src/documentation/config/componentData.json from bufferapp/ui

src/documentation/config/componentData.json
Summary

Maintainability

Test Coverage

Issues
{"id":"ui","fileName":"ui","level":0,"name":"Components","parentName":"ui","children":[{"name":"Animation Wrapper","description":"","props":{"align":{"type":{"name":"string"},"required":false,"description":"","defaultValue":{"value":"'center'","computed":false}},"children":{"type":{"name":"node"},"required":true,"description":""},"dismissing":{"type":{"name":"bool"},"required":false,"description":"","defaultValue":{"value":"false","computed":false}},"duration":{"type":{"name":"number"},"required":false,"description":"","defaultValue":{"value":"300","computed":false}},"justify":{"type":{"name":"string"},"required":false,"description":"","defaultValue":{"value":"'center'","computed":false}},"easing":{"type":{"name":"string"},"required":false,"description":"","defaultValue":{"value":"easeOutQuart","computed":true}},"stageInAnimation":{"type":{"name":"shape","value":{}},"required":true,"description":""},"stageOutAnimation":{"type":{"name":"shape","value":{}},"required":true,"description":""},"onDismiss":{"type":{"name":"func"},"required":false,"description":"","defaultValue":{"value":"() => {}","computed":false}}},"code":"import React, { useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { easeOutQuart } from '../style/animations'\n\nconst AnimationContainer = styled.div`\n  animation-fill-mode: forwards;\n  display: flex;\n  align-items: ${({  \n align }): string => align}}\n  justify-content: ${({  \n justify }): string => justify}}\n  outline: none;\n  width: 100%;\n\n  &.stageIn {\n    animation: ${({    \n duration }): string => `${duration}ms`} ${({\n    stageInAnimation,\n}) => stageInAnimation} ${({ easing }): string => easing};\n  }\n\n  &.stageOut {\n    animation: ${({    \n duration }): string => `${duration}ms`} ${({\n    stageOutAnimation,\n}) => stageOutAnimation} ${({ easing }): string => easing};\n  }\n\n  @media (prefers-reduced-motion) {\n    &.stageIn,\n    &.stageOut {\n      animation-name: dissolve;\n    }\n  }\n`\n\nconst AnimationWrapper = ({\n    align,\n    children,\n    dismissing,\n    duration,\n    easing,\n    justify,\n    stageInAnimation,\n    stageOutAnimation,\n    onDismiss,\n}) => {\n  const [content, setContent] = useState(children)\n  const [hasChanged, setHasChanged] = useState(false)\n  const [dismissed, setDismissed] = useState(false)\n  const [animationLocked, setAnimationLocked] = useState(false)\n  const [className, setClassName] = useState('stageIn')\n  const shouldUpdate = children !== content && !dismissing\n\n  function lockAnimationDuringStaging() {\n    setAnimationLocked(true)\n    setTimeout(() => {\n      setAnimationLocked(false)\n    }, duration * 2)\n  }\n\n  function stageIn() {\n    setClassName('stageIn')\n  }\n\n  function stageOut() {\n    setClassName('stageOut')\n  }\n\n  useEffect(() => {\n    if (shouldUpdate) {\n      setHasChanged(true)\n      setTimeout(() => {\n        stageIn()\n        setContent(children)\n        setHasChanged(false)\n      }, duration)\n    }\n  }, [children])\n\n  useEffect(() => {\n    if (dismissing) {\n      // we are dismissing a bit earlier then animation end to prevent accidental re-render\n      setTimeout(() => {\n        setDismissed(true)\n        onDismiss()\n      }, duration - 10)\n    }\n  }, [dismissing])\n\n  useEffect(() => {\n    lockAnimationDuringStaging()\n  }, [])\n\n  if (!animationLocked && (hasChanged || dismissing)) {\n    stageOut()\n    lockAnimationDuringStaging()\n  }\n\n  return (\n    <AnimationContainer\n            align={align}\n      duration={duration}\n      easing={easing}\n      justify={justify}\n      stageInAnimation={stageInAnimation}\n      stageOutAnimation={stageOutAnimation}\n      className={className}\n    >\n      {!dismissed && content}\n    </AnimationContainer>\n  )\n}\n\nAnimationWrapper.propTypes = {\n  align: PropTypes.string,\n  children: PropTypes.node.isRequired,\n  dismissing: PropTypes.bool,\n  duration: PropTypes.number,\n  justify: PropTypes.string,\n  easing: PropTypes.string,\n  stageInAnimation: PropTypes.shape({}).isRequired,\n  stageOutAnimation: PropTypes.shape({}).isRequired,\n  onDismiss: PropTypes.func,\n}\n\nAnimationWrapper.defaultProps = {\n  align: 'center',\n  dismissing: false,\n  duration: 300,\n  justify: 'center',\n  easing: easeOutQuart,\n  onDismiss: () => {},\n}\n\nexport default AnimationWrapper\n","level":1,"id":"animationwrapper","parentName":"ui","examples":[{"name":"AnimationWrapper","description":"AnimationWrapper Example","methods":[],"code":"import React, { useState, useEffect } from 'react'\nimport AnimationWrapper from '@bufferapp/ui/AnimationWrapper'\nimport Text from '@bufferapp/ui/Text'\n\nimport { stageInCenter, stageOutCenter } from '@bufferapp/ui/style/animations'\n\n/** AnimationWrapper Example */\nexport default function ExampleSimpleModal() {\n  const [changed, setChanged] = useState(false)\n\n  useEffect(() => {\n    setTimeout(() => {\n      setChanged(!changed)\n    }, 2000)\n  }, [changed])\n\n  return (\n    <div>\n      <AnimationWrapper\n        stageInAnimation={stageInCenter}\n        stageOutAnimation={stageOutCenter}\n        duration={450}\n      >\n        {!changed && (\n          <div style={{ width: '300px', padding: '30px', background: 'pink' }}>\n            <Text type=\"p\">\n              There is a theory which states that if ever anyone discovers\n              exactly what the Universe is for and why it is here, it will\n              instantly disappear and be replaced by something even more bizarre\n              and inexplicable.\n            </Text>\n          </div>\n        )}\n        {changed && (\n          <div\n            style={{\n              width: '200px',\n              padding: '30px',\n              background: 'paleturquoise',\n            }}\n          >\n            <Text type=\"p\">\n              Ah-ah, ah!\n              <br />\n              Ah-ah, ah!\n              <br />\n              <br />\n              We come from the land of the ice and snow\n              <br />\n              From the midnight sun where the hot springs flow\n              <br />\n              The hammer of the gods\n              <br />\n              Will drive our ships to new lands\n              <br />\n              To fight the horde, sing and cry\n              <br />\n              Valhalla, I am coming\n            </Text>\n          </div>\n        )}\n      </AnimationWrapper>\n    </div>\n  )\n}\n","title":""},{"name":"AnimationWrapperHook","description":"useAnimation hook example","methods":[],"code":"import React, { useState, useEffect } from 'react'\nimport { useAnimation } from '@bufferapp/ui/AnimationWrapper'\nimport Text from '@bufferapp/ui/Text'\n\nimport { stageInTop, stageOutRight } from '@bufferapp/ui/style/animations'\n\n/** useAnimation hook example */\nexport default function ExampleSimpleModal() {\n  const [changed, setChanged] = useState(false)\n\n  useEffect(() => {\n    setTimeout(() => {\n      setChanged(!changed)\n    }, 2000)\n  }, [changed])\n\n  const { AnimationWrapper, animationProps } = useAnimation({\n    stageInAnimation: stageInTop,\n    stageOutAnimation: stageOutRight,\n    duration: 450,\n  })\n\n  return (\n    <div>\n      <AnimationWrapper {...animationProps}>\n        {!changed && (\n          <div style={{ width: '300px', padding: '30px', background: 'pink' }}>\n            <Text type=\"p\">\n              There is a theory which states that if ever anyone discovers\n              exactly what the Universe is for and why it is here, it will\n              instantly disappear and be replaced by something even more bizarre\n              and inexplicable.\n            </Text>\n          </div>\n        )}\n        {changed && (\n          <div\n            style={{\n              width: '200px',\n              padding: '30px',\n              background: 'paleturquoise',\n            }}\n          >\n            <Text type=\"p\">\n              Ah-ah, ah!\n              <br />\n              Ah-ah, ah!\n              <br />\n              <br />\n              We come from the land of the ice and snow\n              <br />\n              From the midnight sun where the hot springs flow\n              <br />\n              The hammer of the gods\n              <br />\n              Will drive our ships to new lands\n              <br />\n              To fight the horde, sing and cry\n              <br />\n              Valhalla, I am coming\n            </Text>\n          </div>\n        )}\n      </AnimationWrapper>\n    </div>\n  )\n}\n","title":""}]},{"name":"Avatar","description":"","props":{"src":{"type":{"name":"string"},"required":true,"description":"The source of the avatar image."},"alt":{"type":{"name":"string"},"required":true,"description":"The alt text for the avatar image."},"fallbackUrl":{"type":{"name":"string"},"required":false,"description":"The fallback url for the avatar image.","defaultValue":{"value":"''","computed":false}},"type":{"type":{"name":"enum","value":[{"value":"'default'","computed":false},{"value":"'social'","computed":false},{"value":"'status'","computed":false}]},"required":false,"description":"Can be `'default'` (default, plain avatar), `'status'` (online/offline indicator) or `'social'` (has social network icon from the `network` prop).","defaultValue":{"value":"'default'","computed":false}},"size":{"type":{"name":"enum","value":[{"value":"'large'","computed":false},{"value":"'medium'","computed":false},{"value":"'small'","computed":false}]},"required":false,"description":"Can be `'small'`, `'medium'` or `'large'` (`32px`, `40px` and `48px` respectively).","defaultValue":{"value":"'small'","computed":false}},"network":{"type":{"name":"enum","value":[{"value":"'facebook'","computed":false},{"value":"'twitter'","computed":false},{"value":"'instagram'","computed":false},{"value":"'linkedin'","computed":false},{"value":"'google'","computed":false},{"value":"'pinterest'","computed":false},{"value":"'shopify'","computed":false},{"value":"'tiktok'","computed":false},{"value":"'startPage'","computed":false},{"value":"'googlebusiness'","computed":false},{"value":"'mastodon'","computed":false},{"value":"'youtube'","computed":false}]},"required":false,"description":"Name of social network icon to overlay. (E.g., `'instagram'`). Only applicable when `{ type: 'social' }`","defaultValue":{"value":"null","computed":false}}},"code":"/* eslint-disable */\nimport React from 'react'\n\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport * as Styles from './style'\nimport {\n  facebook,\n  googlebusiness,\n  instagram,\n  linkedin,\n  pinterest,\n  shopify,\n  tiktok,\n  twitter,\n  startpage,\n  mastodon,\n  youtube,\n} from '../style/colors'\nimport {\n  Facebook,\n  Gbp,\n  Instagram,\n  LinkedIn,\n  Pinterest,\n  Shopify,\n  Tiktok,\n  Twitter,\n  StartPage,\n  Mastodon,\n  Youtube,\n} from '../Icon'\n\nconst Wrapper = styled.div`\n  ${(props) =>\n        Styles.wrapper[props.size]}\n`\n\nconst Image = styled.div`\n  ${(props) =>\n        Styles.image[props.type][props.size]}\n`\n\nconst socialIconMap = new Map([\n  [\n    'instagram',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={instagram}>\n        <Instagram size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'facebook',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={facebook}>\n        <Facebook size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'twitter',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={twitter}>\n        <Twitter size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'linkedin',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={linkedin}>\n        <LinkedIn size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'pinterest',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={pinterest}>\n        <Pinterest size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'googlebusiness',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={googlebusiness}>\n        <Gbp size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'shopify',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={shopify}>\n        <Shopify size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'tiktok',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={tiktok}>\n        <Tiktok size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'startPage',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={startpage}>\n        <Styles.StartPageIcon>\n          <StartPage size=\"small\" color=\"white\" />{' '}\n        </Styles.StartPageIcon>\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'mastodon',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={mastodon}>\n        <Mastodon size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n  [\n    'youtube',\n        ({ size }) => (\n      <Styles.SocialIconWrapper size={size} bgColor={youtube}>\n        <Youtube size=\"small\" color=\"white\" />\n      </Styles.SocialIconWrapper>\n    ),\n  ],\n])\n\nconst Avatar = ({ src, alt, type, size, network, fallbackUrl }) => {\n  const SocialIcon = network && socialIconMap.get(network)\n  return (\n        <Wrapper size={size}>\n      {SocialIcon && <SocialIcon size={size} />}\n      <Image\n                size={size}\n        type={type}\n        src={src}\n        fallbackUrl={fallbackUrl}\n        alt={alt}\n      />\n    </Wrapper>\n  )\n}\n\nAvatar.propTypes = {\n  /** The source of the avatar image. */\n  src: PropTypes.string.isRequired,\n  /** The alt text for the avatar image. */\n  alt: PropTypes.string.isRequired,\n  /** The fallback url for the avatar image. */\n  fallbackUrl: PropTypes.string,\n  /** Can be `'default'` (default, plain avatar), `'status'` (online/offline indicator) or `'social'` (has social network icon from the `network` prop). */\n  type: PropTypes.oneOf(['default', 'social', 'status']),\n  /** Can be `'small'`, `'medium'` or `'large'` (`32px`, `40px` and `48px` respectively). */\n  size: PropTypes.oneOf(['large', 'medium', 'small']),\n  /** Name of social network icon to overlay. (E.g., `'instagram'`). Only applicable when `{ type: 'social' }` */\n  network: PropTypes.oneOf([\n    'facebook',\n    'twitter',\n    'instagram',\n    'linkedin',\n    'google',\n    'pinterest',\n    'shopify',\n    'tiktok',\n    'startPage',\n    'googlebusiness',\n    'mastodon',\n    'youtube',\n  ]),\n}\n\nAvatar.defaultProps = {\n  type: 'default',\n  size: 'small',\n  fallbackUrl: '',\n  network: null,\n}\n\nexport default Avatar\n","level":1,"id":"avatar","parentName":"ui","examples":[[{"name":"AvatarWithFallbackImage","description":"With Fallback Icon","methods":[],"code":"import React from 'react'\nimport Avatar from '@bufferapp/ui/Avatar'\n\n/** With Fallback Icon */\nexport default function ExampleAvatar() {\n  return (\n    <Avatar\n      src=\"https://broken-image-url\"\n      fallbackUrl=\"https://s3.amazonaws.com/buffer-ui/Default+Avatar.png\"\n      alt=\"Example\"\n      size=\"large\"\n      type=\"social\"\n      network=\"instagram\"\n    />\n  )\n}\n","title":"Fallback"}],[{"name":"Large","description":"Large","methods":[],"code":"import React from 'react'\nimport Avatar from '@bufferapp/ui/Avatar'\n\n/** Large */\nexport default function ExampleAvatar() {\n  return (\n    <Avatar\n      src=\"https://pbs.twimg.com/profile_images/1212260099604897792/OU6OulZj_400x400.jpg\"\n      alt=\"@joelgascoigne\"\n      size=\"large\"\n    />\n  )\n}\n","title":"Size"},{"name":"Medium","description":"Medium","methods":[],"code":"import React from 'react'\nimport Avatar from '@bufferapp/ui/Avatar'\n\n/** Medium */\nexport default function ExampleAvatar() {\n  return (\n    <Avatar\n      src=\"https://pbs.twimg.com/profile_images/1212260099604897792/OU6OulZj_400x400.jpg\"\n      alt=\"@joelgascoigne\"\n      size=\"medium\"\n    />\n  )\n}\n","title":"Size"},{"name":"Small","description":"Small","methods":[],"code":"import React from 'react'\nimport Avatar from '@bufferapp/ui/Avatar'\n\n/** Small */\nexport default function ExampleAvatar() {\n  return (\n    <Avatar\n      src=\"https://pbs.twimg.com/profile_images/1212260099604897792/OU6OulZj_400x400.jpg\"\n      alt=\"@joelgascoigne\"\n      size=\"small\"\n    />\n  )\n}\n","title":"Size"}],[{"name":"AvatarSocial","description":"With Social Network Icon","methods":[],"code":"import React from 'react'\nimport Avatar from '@bufferapp/ui/Avatar'\n\n/** With Social Network Icon */\nexport default function ExampleAvatar() {\n  return (\n    <Avatar\n      src=\"http://i.pravatar.cc/64?img=60\"\n      alt=\"Hamish\"\n      size=\"large\"\n      type=\"social\"\n      network=\"startPage\"\n    />\n  )\n}\n","title":"Type"}]]},{"name":"Banner","description":"","props":{"text":{"type":{"name":"string"},"required":false,"description":"The main text of the banner","defaultValue":{"value":"''","computed":false}},"actionButton":{"type":{"name":"shape","value":{"label":{"name":"string","required":false},"action":{"name":"func","required":false}}},"required":false,"description":"The text of the Call To Action of the banner","defaultValue":{"value":"{}","computed":false}},"customHTML":{"type":{"name":"shape","value":{"__html":{"name":"string","required":false}}},"required":false,"description":"Custom HTML","defaultValue":{"value":"null","computed":false}},"themeColor":{"type":{"name":"enum","value":[{"value":"'blue'","computed":false},{"value":"'orange'","computed":false}]},"required":false,"description":"Theme color. Can be `'blue'` or `'orange'`","defaultValue":{"value":"'blue'","computed":false}},"onCloseBanner":{"type":{"name":"func"},"required":false,"description":"Handler when the banner closes","defaultValue":{"value":"null","computed":false}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport Button from '../Button'\nimport Text from '../Text'\nimport CrossIcon from '../Icon/Icons/Cross'\n\nimport {\n  BannerStyled,\n  BannerCloseButton,\n  Wrapper,\n  ButtonWrapper,\n} from './style'\n\nimport { orangeDarker } from '../style/colors'\n\nexport default class Banner extends React.Component {\n    constructor(props) {\n    super(props)\n\n    this.state = {\n      isOpen: true,\n    }\n\n    this.closeBanner = this.closeBanner.bind(this)\n  }\n\n  closeBanner() {\n    this.setState({ isOpen: false })\n        const { onCloseBanner } = this.props\n    if (onCloseBanner) {\n      onCloseBanner()\n    }\n  }\n\n    renderBannerContent(themeColor) {\n        const { customHTML, text, actionButton } = this.props\n    if (customHTML) {\n      return (\n        <Wrapper>\n          {/* eslint-disable-next-line */}\n          <div dangerouslySetInnerHTML={customHTML} />\n        </Wrapper>\n      )\n    }\n    return (\n      <Wrapper>\n        <Text type=\"paragraph\" color=\"#FFF\">\n          {text}\n        </Text>\n        <ButtonWrapper>\n          <Button\n            type={themeColor === 'orange' ? 'orange' : 'primary'}\n            onClick={actionButton.action}\n            label={actionButton.label}\n            size=\"small\"\n          />\n        </ButtonWrapper>\n      </Wrapper>\n    )\n  }\n\n  render() {\n        const { isOpen } = this.state\n        const { themeColor } = this.props\n\n    if (isOpen) {\n      return (\n                <BannerStyled themeColor={themeColor}>\n          {this.renderBannerContent(themeColor)}\n          <BannerCloseButton>\n            <Button\n              type=\"text\"\n              icon={\n                <CrossIcon\n                  color={themeColor === 'blue' ? '#fff' : orangeDarker}\n                />\n              }\n              hasIconOnly\n              onClick={this.closeBanner}\n              label=\"Close\"\n              size=\"small\"\n            />\n          </BannerCloseButton>\n        </BannerStyled>\n      )\n    }\n    return null\n  }\n}\n\nBanner.propTypes = {\n  /** The main text of the banner */\n  text: PropTypes.string,\n\n  /** The text of the Call To Action of the banner */\n  actionButton: PropTypes.shape({\n    label: PropTypes.string,\n    action: PropTypes.func,\n  }),\n\n  /** Custom HTML */\n  customHTML: PropTypes.shape({ __html: PropTypes.string }),\n\n  /** Theme color. Can be `'blue'` or `'orange'` */\n  themeColor: PropTypes.oneOf(['blue', 'orange']),\n\n  /** Handler when the banner closes */\n  onCloseBanner: PropTypes.func,\n}\n\nBanner.defaultProps = {\n  text: '',\n  actionButton: {},\n  customHTML: null,\n  themeColor: 'blue',\n  onCloseBanner: null,\n}\n","level":1,"id":"banner","parentName":"ui","examples":[{"name":"Banner","description":"Banner Example","methods":[],"code":"import React from 'react'\nimport Banner from '@bufferapp/ui/Banner'\n\n/** Banner Example */\nexport default function ExampleBanner() {\n  const bannerButton = {\n    label: 'Add Billing Details',\n    action: () => {\n      console.info('yaaas')\n    },\n  }\n  return (\n    <Banner\n      text=\"You have 14 days left on your trial.\"\n      actionButton={bannerButton}\n    />\n  )\n}\n","title":""},{"name":"BannerOrange","description":"Banner Orange","methods":[],"code":"import React from 'react'\nimport Banner from '@bufferapp/ui/Banner'\n\n/** Banner Orange */\nexport default function ExampleBanner() {\n  const bannerButton = {\n    label: 'Add Billing Details',\n    action: () => {\n      console.info('yaaas')\n    },\n  }\n  return (\n    <Banner\n      text=\"You have 14 days left on your trial.\"\n      actionButton={bannerButton}\n      themeColor=\"orange\"\n    />\n  )\n}\n","title":""},{"name":"BannerWithHtml","description":"Orange banner with customHTML","methods":[],"code":"import React from 'react'\nimport Banner from '@bufferapp/ui/Banner'\n\n/** Orange banner with customHTML */\nexport default function ExampleBanner() {\n  return (\n    <Banner\n      themeColor=\"orange\"\n      customHTML={{\n        __html:\n          \"<b>You're on the Business trial.</b> Complete your billing details to make the transition smooth.\",\n      }}\n      /* eslint-disable-next-line */\n      onCloseBanner={() => console.log('Banner closed!')}\n    />\n  )\n}\n","title":""}]},{"name":"Button","description":"All buttons, including text and split-buttons, follow the same core principles in dimensions, padding, and font sizes.\nCombined with simple modifiers, they can be changed in size and appearance.","props":{"disabled":{"type":{"name":"bool"},"required":false,"description":"Is the button disabled","defaultValue":{"value":"false","computed":false}},"size":{"type":{"name":"enum","value":[{"value":"'small'","computed":false},{"value":"'large'","computed":false},{"value":"'medium'","computed":false}]},"required":false,"description":"Size of the Button","defaultValue":{"value":"'medium'","computed":false}},"onClick":{"type":{"name":"func"},"required":true,"description":"OnClick handler"},"label":{"type":{"name":"string"},"required":false,"description":"Button label","defaultValue":{"value":"undefined","computed":true}},"type":{"type":{"name":"enum","value":[{"value":"'primary'","computed":false},{"value":"'secondary'","computed":false},{"value":"'text'","computed":false},{"value":"'error'","computed":false},{"value":"'danger'","computed":false},{"value":"'orange'","computed":false}]},"required":false,"description":"Type of button","defaultValue":{"value":"'secondary'","computed":false}},"isSplit":{"type":{"name":"bool"},"required":false,"description":"Is the Button Split","defaultValue":{"value":"undefined","computed":true}},"isSelect":{"type":{"name":"bool"},"required":false,"description":"Is this the Select button with chevron","defaultValue":{"value":"undefined","computed":true}},"loading":{"type":{"name":"bool"},"required":false,"description":"Is the Button Loading","defaultValue":{"value":"false","computed":false}},"hasIconOnly":{"type":{"name":"bool"},"required":false,"description":"Does the button have only an icon and no label","defaultValue":{"value":"false","computed":false}},"icon":{"type":{"name":"node"},"required":false,"description":"Icon to show with the label","defaultValue":{"value":"undefined","computed":true}},"iconEnd":{"type":{"name":"bool"},"required":false,"description":"Icon to show with the label","defaultValue":{"value":"false","computed":false}},"items":{"type":{"name":"arrayOf","value":{"name":"shape","value":{"id":{"name":"string","required":false},"title":{"name":"string","required":false}}}},"required":false,"description":"Items to display in the Split Button popup","defaultValue":{"value":"undefined","computed":true}},"children":{"type":{"name":"element"},"required":false,"description":"Child element(s) to use for custom Split Button child content","defaultValue":{"value":"undefined","computed":true}},"selectPosition":{"type":{"name":"enum","value":[{"value":"'top'","computed":false},{"value":"'bottom'","computed":false}]},"required":false,"description":"Position of the Select popup","defaultValue":{"value":"'bottom'","computed":false}},"onSelectClick":{"type":{"name":"func"},"required":false,"description":"Function to call on Split Button selected item click","defaultValue":{"value":"undefined","computed":true}},"fullWidth":{"type":{"name":"bool"},"required":false,"description":"Is the button the full width of the parent container","defaultValue":{"value":"false","computed":false}},"tooltip":{"type":{"name":"string"},"required":false,"description":"Tooltip to show on the component","defaultValue":{"value":"undefined","computed":true}},"ref":{"type":{"name":"node"},"required":false,"description":"The prop to get the DOM element of the Button","defaultValue":{"value":"undefined","computed":true}},"hideSearch":{"type":{"name":"bool"},"required":false,"description":"Is search hidden","defaultValue":{"value":"true","computed":false}},"className":{"type":{"name":"string"},"required":false,"description":"class passed by the dom element","defaultValue":{"value":"undefined","computed":true}},"onOpen":{"type":{"name":"func"},"required":false,"description":"onOpen function to fire when the Dropdown menu is open","defaultValue":{"value":"null","computed":false}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport * as Styles from './style'\nimport ChevronDown from '../Icon/Icons/ChevronDown'\nimport Select from '../Select/Select'\n\n/*\nSince buttons keep their own inline-block display type, we can only imitate this by using a wrapper (with\n `display: inline-block`) an internal container (with `display: flex`), and then the actual contents (including real\n  buttons\n */\n\nexport const ButtonWrapperStyled = styled.div`\n  ${Styles.ButtonWrapperBase};\n  ${(props) =>\n        Styles[[props.type, props.disabled ? 'Disabled' : ''].join('')]};\n  ${(props): string =>  \n (props.fullWidth ? Styles.fullWidth : '')};\n`\n\nexport const ButtonContainerStyled = styled.div`\n  ${Styles.ButtonContainerBase};\n`\n\nexport const ButtonStyled = styled.button`\n  ${Styles.ButtonNestedBase};\n  ${(props) =>\n        Styles[props.size]};\n  ${(props) =>\n        Styles[props.disabled ? 'disabled' : '']};\n  ${(props): string =>  \n (props.fullWidth ? Styles.fullWidth : '')};\n`\n\nconst Loading = styled.img`\n  width: 24px;\n  margin-left: 10px;\n`\n\nconst VisuallyHiddenLabel = styled.span`\n  position: absolute;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n`\n\n/** All buttons, including text and split-buttons, follow the same core principles in dimensions, padding, and font sizes.\n * Combined with simple modifiers, they can be changed in size and appearance.  */\nconst Button = ({\n    disabled,\n    onClick,\n    type,\n    size,\n    label,\n    isSplit,\n    loading,\n    icon,\n    iconEnd,\n    hasIconOnly,\n    isSelect,\n    items,\n    selectPosition,\n    onSelectClick,\n    fullWidth,\n    tooltip,\n    ref,\n    hideSearch,\n    textToLeft,\n    className,\n    children,\n    onOpen,\n  ...props\n}) => (\n  <ButtonWrapperStyled\n    className={className}\n        disabled={disabled}\n    type={type}\n    fullWidth={fullWidth}\n    $loading={loading}\n  >\n    <ButtonContainerStyled>\n      <ButtonStyled\n        onClick={!disabled ? onClick : undefined}\n        disabled={disabled}\n                isSplit={isSplit}\n        icon={icon}\n        hasIconOnly={hasIconOnly}\n        data-tip={tooltip}\n        ref={ref}\n        aria-haspopup=\"false\"\n        size={size}\n        fullWidth={fullWidth}\n        type={type}\n        {...props}\n      >\n        {!iconEnd && icon}\n        {hasIconOnly && <VisuallyHiddenLabel>{label}</VisuallyHiddenLabel>}\n        {!hasIconOnly && (\n                    <Styles.ButtonLabel hasIcon={!!icon} iconEnd={!!iconEnd}>\n            {label}\n          </Styles.ButtonLabel>\n        )}\n        {iconEnd && icon}\n\n        {isSelect && (type === 'primary' || type === 'secondary') && (\n                    <Styles.ButtonArrow textToLeft={textToLeft}>\n            <ChevronDown\n              color={type === 'primary' ? 'white' : 'grayDark'}\n              size={size}\n              isChevron\n            />\n          </Styles.ButtonArrow>\n        )}\n\n        {loading && <Loading src=\"./images/loading-gray.svg\" alt=\"loading\" />}\n      </ButtonStyled>\n      {isSplit &&\n        (type === 'primary' || type === 'secondary') &&\n        (children ? (\n          React.Children.map(children, (child) => React.cloneElement(child, {}))\n        ) : (\n          <Select\n                        onSelectClick={onSelectClick}\n            items={items}\n            type={type}\n            size={size}\n            isSplit\n            yPosition={selectPosition}\n            xPosition=\"right\"\n            disabled={disabled}\n            hideSearch={hideSearch}\n            onOpen={onOpen}\n          />\n        ))}\n    </ButtonContainerStyled>\n  </ButtonWrapperStyled>\n)\n\nButton.propTypes = {\n  /** Is the button disabled */\n  disabled: PropTypes.bool,\n\n  /** Size of the Button */\n  size: PropTypes.oneOf(['small', 'large', 'medium']),\n\n  /** OnClick handler */\n  onClick: PropTypes.func.isRequired,\n\n  /** Button label */\n  label: PropTypes.string,\n\n  /** Type of button */\n  type: PropTypes.oneOf([\n    'primary',\n    'secondary',\n    'text',\n    'error',\n    'danger',\n    'orange',\n  ]),\n\n  /** Is the Button Split  */\n  isSplit: PropTypes.bool,\n\n  /** Is this the Select button with chevron */\n  isSelect: PropTypes.bool,\n\n  /** Is the Button Loading  */\n  loading: PropTypes.bool,\n\n  /** Does the button have only an icon and no label */\n  hasIconOnly: PropTypes.bool,\n\n  /** Icon to show with the label */\n  icon: PropTypes.node,\n\n  /** Icon to show with the label */\n  iconEnd: PropTypes.bool,\n\n  /** Items to display in the Split Button popup */\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      title: PropTypes.string,\n    }),\n  ),\n\n  /** Child element(s) to use for custom Split Button child content */\n  children: PropTypes.element,\n\n  /** Position of the Select popup */\n  selectPosition: PropTypes.oneOf(['top', 'bottom']),\n\n  /** Function to call on Split Button selected item click */\n  onSelectClick: PropTypes.func,\n\n  /** Is the button the full width of the parent container */\n  fullWidth: PropTypes.bool,\n\n  /** Tooltip to show on the component */\n  tooltip: PropTypes.string,\n\n  /** The prop to get the DOM element of the Button */\n  ref: PropTypes.node,\n\n  /** Is search hidden */\n  hideSearch: PropTypes.bool,\n\n  /** class passed by the dom element */\n  className: PropTypes.string,\n\n  /** onOpen function to fire when the Dropdown menu is open */\n  onOpen: PropTypes.func,\n}\n\nButton.defaultProps = {\n  disabled: false,\n  isSplit: undefined,\n  loading: false,\n  size: 'medium',\n  type: 'secondary',\n  label: undefined,\n  hasIconOnly: false,\n  icon: undefined,\n  iconEnd: false,\n  isSelect: undefined,\n  items: undefined,\n  selectPosition: 'bottom',\n  onSelectClick: undefined,\n  fullWidth: false,\n  tooltip: undefined,\n  ref: undefined,\n  hideSearch: true,\n  className: undefined,\n  children: undefined,\n  onOpen: null,\n}\n\nexport default Button\n","level":1,"id":"button","parentName":"ui","examples":[[{"name":"SizeFullWidth","description":"Full Width","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Full Width */\nexport default function ExampleSizeFullWidth() {\n  return <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" fullWidth />\n}\n","title":"Size"},{"name":"SizeLarge","description":"Large","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Large */\nexport default function ExampleSizeLarge() {\n  return (\n    <Button type=\"primary\" size=\"large\" onClick={() => {}} label=\"Click Me\" />\n  )\n}\n","title":"Size"},{"name":"SizeMedium","description":"Normal","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Normal */\nexport default function ExampleSizeNormal() {\n  return <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" />\n}\n","title":"Size"},{"name":"SizeSmall","description":"Small","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Small */\nexport default function ExampleSizeSmall() {\n  return (\n    <Button type=\"primary\" size=\"small\" onClick={() => {}} label=\"Click Me\" />\n  )\n}\n","title":"Size"}],[{"name":"StateDisabled","description":"Disabled","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  display: flex;\n  column-gap: 16px;\n`\n\n/** Disabled */\nexport default function ExampleDisabled() {\n  return (\n    <Wrapper>\n      <Button type=\"primary\" disabled onClick={() => {}} label=\"Click Me\" />\n      <Button type=\"secondary\" disabled onClick={() => {}} label=\"Click Me\" />\n      <Button\n        onSelectClick={() => true}\n        onClick={() => true}\n        type=\"secondary\"\n        disabled\n        isSplit\n        items={[\n          { id: '1', title: 'Save as Draft' },\n          { id: '2', title: 'Save as Post' },\n        ]}\n        label=\"Click Me\"\n      />\n    </Wrapper>\n  )\n}\n","title":"State"},{"name":"StateLoading","description":"Loading","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Loading */\nexport default function ExamplePrimaryLoading() {\n  return <Button type=\"primary\" loading onClick={() => {}} label=\"Click Me\" />\n}\n","title":"State"}],[{"name":"TypeDanger","description":"Danger","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Danger */\nexport default function ExampleTypeDanger() {\n  return <Button type=\"danger\" onClick={() => {}} label=\"Click Me\" />\n}\n","title":"Type"},{"name":"TypeIcon","description":"Secondary Icon","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport { Folder } from '@bufferapp/ui/Icon'\n\n/** Secondary Icon */\nexport default function ExampleButton() {\n  return (\n    <Button\n      type=\"secondary\"\n      icon={<Folder />}\n      hasIconOnly\n      onClick={() => {}}\n      label=\"Click Me\"\n    />\n  )\n}\n","title":"Type"},{"name":"TypeIconEnd","description":"Secondary with Icon at End","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport { Folder } from '@bufferapp/ui/Icon'\n\n/** Secondary with Icon at End */\nexport default function ExampleButton() {\n  return (\n    <Button\n      type=\"secondary\"\n      icon={<Folder />}\n      iconEnd\n      onClick={() => {}}\n      label=\"Click Me\"\n    />\n  )\n}\n","title":"Type"},{"name":"TypeOrange","description":"Orange","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Orange */\nexport default function ExampleTypeOrange() {\n  return <Button type=\"orange\" onClick={() => {}} label=\"Click Me\" />\n}\n","title":"Type"},{"name":"TypePrimary","description":"Primary","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Primary */\nexport default function ExampleTypePrimary() {\n  return <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" />\n}\n","title":"Type"},{"name":"TypePrimaryIcon","description":"Primary with Icon","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport { MessageFilled } from '@bufferapp/ui/Icon'\n\n/** Primary with Icon */\nexport default function ExampleButton() {\n  return (\n    <Button\n      type=\"primary\"\n      icon={<MessageFilled color=\"white\" />}\n      onClick={() => {}}\n      label=\"Click Me\"\n    />\n  )\n}\n","title":"Type"},{"name":"TypePrimaryIconEnd","description":"Primary with Icon","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport { MessageFilled } from '@bufferapp/ui/Icon'\n\n/** Primary with Icon */\nexport default function ExampleButton() {\n  return (\n    <Button\n      type=\"primary\"\n      icon={<MessageFilled color=\"white\" />}\n      iconEnd\n      onClick={() => {}}\n      label=\"Click Me\"\n    />\n  )\n}\n","title":"Type"},{"name":"TypeSecondary","description":"Secondary","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Secondary */\nexport default function ExampleTypeSecondary() {\n  return <Button type=\"secondary\" onClick={() => {}} label=\"Click Me\" />\n}\n","title":"Type"},{"name":"TypeSecondaryIcon","description":"Secondary with Icon","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport { Folder } from '@bufferapp/ui/Icon'\n\n/** Secondary with Icon */\nexport default function ExampleButton() {\n  return (\n    <Button\n      type=\"secondary\"\n      icon={<Folder />}\n      onClick={() => {}}\n      label=\"Click Me\"\n    />\n  )\n}\n","title":"Type"},{"name":"TypeSplit","description":"Split Button","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Split Button */\nexport default function ExampleSplitButton() {\n  return (\n    <Button\n      onSelectClick={() => true}\n      onClick={() => true}\n      type=\"primary\"\n      isSplit\n      items={[\n        { id: '1', title: 'Reply + Pending' },\n        { id: '2', title: 'Reply + Close + Assign To Me' },\n      ]}\n      label=\"Click Me\"\n    />\n  )\n}\n","title":"Type"},{"name":"TypeSplitButtonWithCustomSelect","description":"Split Button With Custom Select","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport UISelect from '@bufferapp/ui/Select'\n\nclass Select extends UISelect {\n    handleSelectOption = (option, event) => {\n        this.props.onSelectClick(option, event)\n        this.setState({\n      isOpen: false,\n    })\n  }\n}\n\n/** Split Button With Custom Select */\nexport default function ExampleSplitButtonWithCustomSelect() {\n  return (\n    <Button onClick={() => true} type=\"primary\" isSplit label=\"Click Me\">\n      <Select\n        onSelectClick={() => true}\n        items={[\n          { id: '1', title: 'Reply + Pending' },\n          { id: '2', title: 'Reply + Close + Assign To Me' },\n        ]}\n        type=\"primary\"\n        isSplit\n        xPosition=\"right\"\n        hideSearch\n      />\n    </Button>\n  )\n}\n","title":"Type"},{"name":"TypeSplitIsOpen","description":"Split Button With On Open functionality","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  display: flex;\n  column-gap: 16px;\n`\n\n/** Split Button With On Open functionality */\nexport default function ExampleIsOpen() {\n  return (\n    <Wrapper>\n      <Button\n        onSelectClick={() => true}\n        onClick={() => true}\n        type=\"secondary\"\n        isSplit\n        items={[\n          { id: '1', title: 'Save as Draft' },\n          { id: '2', title: 'Save as Post' },\n        ]}\n        label=\"Click Me\"\n        onOpen={() => console.log('OnOpen Event Fired')}\n      />\n    </Wrapper>\n  )\n}\n","title":"Type"},{"name":"TypeSplitSmall","description":"Split Button (small)","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Split Button (small) */\nexport default function ExampleSplitButtonSmall() {\n  return (\n    <Button\n      onSelectClick={() => true}\n      onClick={() => true}\n      size=\"small\"\n      type=\"primary\"\n      isSplit\n      items={[\n        { id: '1', title: 'Reply + Pending' },\n        { id: '2', title: 'Reply + Close + Assign To Me' },\n      ]}\n      label=\"Click Me\"\n    />\n  )\n}\n","title":"Type"},{"name":"TypeSplitWithEndIcon","description":"Split Button With End Icon","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\nimport Tag from '@bufferapp/ui/Tag'\nimport { Flash } from '@bufferapp/ui/Icon'\n\n/** Split Button With End Icon */\nexport default function ExampleSplitButton() {\n  return (\n    <Button\n      onSelectClick={() => true}\n      onClick={() => true}\n      type=\"secondary\"\n      isSplit\n      items={[\n        { id: '1', title: 'Save as Draft' },\n        {\n          id: '2',\n          title: 'Request Approval',\n          icon: (\n            <Tag color=\"purpleLighter\">\n              <Flash color=\"purple\" />\n            </Tag>\n          ),\n          iconEnd: true,\n        },\n      ]}\n      label=\"Click Me\"\n    />\n  )\n}\n","title":"Type"},{"name":"TypeText","description":"Text","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Text */\nexport default function ExampleTypeText() {\n  return <Button type=\"text\" onClick={() => {}} label=\"Click Me\" />\n}\n","title":"Type"}]]},{"name":"Carousel","description":"","props":{"children":{"type":{"name":"node"},"required":true,"description":"The content within the carousel"},"width":{"type":{"name":"string"},"required":true,"description":"The normalized width for each item"},"rightNavigation":{"type":{"name":"bool"},"required":false,"description":"Option to only navigate towards the right","defaultValue":{"value":"false","computed":false}},"withIndicators":{"type":{"name":"bool"},"required":false,"description":"Show indicators at the bottom","defaultValue":{"value":"true","computed":false}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled, { css } from 'styled-components'\nimport Button from '../Button/index'\nimport ArrowRight from '../Icon/Icons/ArrowRight'\nimport ArrowLeft from '../Icon/Icons/ArrowLeft'\nimport CarouselItems from './CarouselItems'\nimport { gray, white } from '../style/colors'\nimport { easeOutQuart } from '../style/animations'\n\nconst CarouselStyled = styled.div`\n  align-items: center;\n  display: flex;\n`\n\nconst Window = styled.div`\n  overflow: hidden;\n  width: ${(props): string => props.  \nwidth};\n  margin: 8px;\n  display: flex;\n`\n\nconst ButtonOverlapContainer = styled.div`\n  position: relative;\n  z-index: 3;\n\n  ${(props) =>\n        props.left\n      ? css`\n          left: 20px;\n        `\n      : css`\n          right: 20px;\n        `}\n`\n\nconst MainList = styled.ul`\n  display: flex;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  left: ${(props): string => `${props.  \nleft}px`};\n  transition: left 0.4s ${easeOutQuart};\n`\n\n// grabbed these styles from https://a11yproject.com/posts/how-to-hide-content/\nconst Announcement = styled.div`\n  position: absolute !important;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip-path: inset(1px 1px 1px 1px);\n  white-space: nowrap; /* added line */\n  margin: 0;\n`\n\nconst IndicatorList = styled.ol`\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n`\n\nconst IndicatorListItem = styled.li`\n  list-style: none;\n  padding: 0 4px;\n  position: relative;\n  display: flex;\n`\n\nconst IndicatorButton = styled.button`\n  width: 11px;\n  height: 11px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background-color: ${gray};\n\n  :hover {\n    cursor: pointer;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    width: 11px;\n    height: 11px;\n    border-radius: 50%;\n    background: ${white};\n    position: absolute;\n    top: 0;\n    left: 4px;\n    transform: ${({    \n active }): string => (active ? 'scale(1)' : 'scale(0)')};\n    transition: transform\n      ${({      \n active }): string => (active ? '250ms' : '150ms')} ease-out;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    width: 13px;\n    height: 13px;\n    border-radius: 50%;\n    border: 1px solid ${white};\n    position: absolute;\n    top: 0;\n    left: 2px;\n    opacity: 0;\n    transition: opacity 100ms ease-out;\n    transition-delay: ${({    \n active }): string => (active ? '0' : '150ms')};\n  }\n\n  &:hover {\n    &:after {\n      transform: scale(1);\n    }\n    &:before {\n      opacity: 1;\n    }\n  }\n`\n\nconst Content = styled.div`\n  display: flex;\n  flex-direction: column;\n`\n\nclass Carousel extends React.Component {\n  state = {\n    left: 0,\n    currentSlideIndex: 0,\n  }\n\n    verifyLastItem = (lengthOfChildren, widthOfEachItem) => {\n    const { left } = this.state\n    const finalLength = (lengthOfChildren - 1) * parseInt(widthOfEachItem, 10)\n\n    return left === -finalLength\n  }\n\n    goToSlide = (index) => {\n        const { width, children } = this.props\n    const { currentSlideIndex, left } = this.state\n\n    // going backwards\n    if (currentSlideIndex > index) {\n      // if it's the first slide, loop back to the last one\n      if (left === 0) {\n        const finalLength =\n          (React.Children.count(children) - 1) * parseInt(width, 10)\n        this.setState({\n          left: -finalLength,\n          currentSlideIndex: React.Children.count(children) - 1,\n        })\n        return\n      }\n    }\n\n    // going forwards\n    if (currentSlideIndex < index) {\n      // if it's the last slide, loop back to the first one\n      if (this.verifyLastItem(React.Children.count(children), width)) {\n        this.setState({\n          left: 0,\n          currentSlideIndex: 0,\n        })\n        return\n      }\n    }\n\n    const newLeft = parseInt(width, 10) * index\n    this.setState({\n      left: -newLeft,\n      currentSlideIndex: index,\n    })\n  }\n\n  render() {\n    const { left, currentSlideIndex } = this.state\n        const { children, width, rightNavigation, withIndicators } = this.props\n\n    return (\n      <CarouselStyled>\n        {/* this announcement is hidden but notifies screen reader users when the slide has changed */}\n        <Announcement aria-live=\"polite\" aria-atomic=\"true\" tabIndex={-1}>\n          Slide\n          {currentSlideIndex + 1}\n          out of\n          {children.length}\n        </Announcement>\n        {React.Children.count(children) > 1 && !rightNavigation && (\n                    <ButtonOverlapContainer left>\n            <Button\n              type=\"secondary\"\n              icon={<ArrowLeft />}\n              hasIconOnly\n              onClick={() => {\n                this.goToSlide(currentSlideIndex - 1)\n              }}\n              label=\"Backwards\"\n            />\n          </ButtonOverlapContainer>\n        )}\n        <Content>\n          <Window width={width}>\n            <MainList left={left}>\n              <CarouselItems currentSlideIndex={currentSlideIndex}>\n                {children}\n              </CarouselItems>\n            </MainList>\n          </Window>\n          {React.Children.count(children) > 1 && withIndicators && (\n            <IndicatorList>\n              {React.Children.map(children, (child, index) => (\n                <IndicatorListItem key={index}>\n                  <IndicatorButton\n                    type=\"button\"\n                    onClick={() => this.goToSlide(index)}\n                                        active={index === currentSlideIndex}\n                  >\n                    <Announcement as=\"p\">\n                      {index === currentSlideIndex\n                        ? `Currently on slide\n                    ${index + 1}`\n                        : `Go to slide ${index + 1}`}\n                    </Announcement>\n                  </IndicatorButton>\n                </IndicatorListItem>\n              ))}\n            </IndicatorList>\n          )}\n        </Content>\n        {React.Children.count(children) > 1 && (\n          <ButtonOverlapContainer>\n            <Button\n              type=\"secondary\"\n              icon={<ArrowRight />}\n              hasIconOnly\n              onClick={() => {\n                this.goToSlide(currentSlideIndex + 1)\n              }}\n              label=\"Forwards\"\n            />\n          </ButtonOverlapContainer>\n        )}\n      </CarouselStyled>\n    )\n  }\n}\n\nCarousel.defaultProps = {\n  rightNavigation: false,\n  withIndicators: true,\n}\n\nCarousel.propTypes = {\n  /** The content within the carousel */\n  children: PropTypes.node.isRequired,\n\n  /** The normalized width for each item */\n  width: PropTypes.string.isRequired,\n\n  /** Option to only navigate towards the right */\n  rightNavigation: PropTypes.bool,\n\n  /** Show indicators at the bottom */\n  withIndicators: PropTypes.bool,\n}\n\nexport default Carousel\n","level":1,"id":"carousel","parentName":"ui","examples":[{"name":"Carousel-no-indicators","description":"Carousel No Indicators Example","methods":[],"code":"import React from 'react'\nimport Carousel from '@bufferapp/ui/Carousel'\n\n/** Carousel No Indicators Example */\nexport default function ExampleCarousel() {\n  return (\n    <Carousel width=\"400px\" withIndicators={false}>\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 1\"\n        width=\"400\"\n      />\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 2\"\n        width=\"400\"\n      />\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 3\"\n        width=\"400\"\n      />\n    </Carousel>\n  )\n}\n","title":""},{"name":"Carousel-one-direction","description":"Carousel One Direction Example","methods":[],"code":"import React from 'react'\nimport Carousel from '@bufferapp/ui/Carousel'\n\n/** Carousel One Direction Example */\nexport default function ExampleCarousel() {\n  return (\n    <Carousel width=\"400px\" rightNavigation>\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 1\"\n        width=\"400\"\n      />\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 2\"\n        width=\"400\"\n      />\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 3\"\n        width=\"400\"\n      />\n    </Carousel>\n  )\n}\n","title":""},{"name":"Carousel","description":"Carousel Example","methods":[],"code":"import React from 'react'\nimport Carousel from '@bufferapp/ui/Carousel'\n\n/** Carousel Example */\nexport default function ExampleCarousel() {\n  return (\n    <Carousel width=\"400px\">\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 1\"\n        width=\"400\"\n      />\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 2\"\n        width=\"400\"\n      />\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 3\"\n        width=\"400\"\n      />\n    </Carousel>\n  )\n}\n","title":""},{"name":"one-slide","description":"Carousel with One Slide Example","methods":[],"code":"import React from 'react'\nimport Carousel from '@bufferapp/ui/Carousel'\n\n/** Carousel with One Slide Example */\nexport default function ExampleCarousel() {\n  return (\n    <Carousel width=\"400px\">\n      <img\n        src=\"https://buffer-analyze.s3.amazonaws.com/images/modal-pro-bg.png\"\n        alt=\"slide 1\"\n        width=\"400\"\n      />\n    </Carousel>\n  )\n}\n","title":""}]},{"name":"Cross Sell","description":"","props":{"texts":{"type":{"name":"shape","value":{"title":{"name":"string","required":false},"subtitle":{"name":"string","required":false},"cards":{"name":"arrayOf","value":{"name":"shape","value":{"image":{"name":"string","required":false},"alt":{"name":"string","required":false},"title":{"name":"string","required":false},"description":{"name":"string","required":false}}},"required":false},"button":{"name":"shape","value":{"label":{"name":"string","required":false},"url":{"name":"string","required":false}},"required":false},"priceTagline":{"name":"string","required":false}}},"required":true,"description":""}},"code":"import React from 'react'\n\nimport PropTypes from 'prop-types'\nimport {\n  CrossSellStyled,\n  CrossSellHeader,\n  SubHeaderWrapper,\n  CardsContainer,\n  ButtonsContainer,\n  ButtonWrapper,\n  Footer,\n  Card,\n  TitleContainer,\n  CardImage,\n} from './style'\nimport Text from '../Text/Text'\nimport Button from '../Button/Button'\n\nexport default class CrossSell extends React.Component {\n  renderHeader = () => {\n        const { texts } = this.props\n\n    return (\n      <CrossSellHeader>\n        <Text type=\"h1\">{texts.title}</Text>\n        <SubHeaderWrapper>\n          <Text type=\"h3\">{texts.subtitle}</Text>\n        </SubHeaderWrapper>\n      </CrossSellHeader>\n    )\n  }\n\n  renderBody = () => {\n        const { texts } = this.props\n\n    return (\n      <CardsContainer>\n        {texts.cards.map((card, idx) => (\n          <Card key={idx}>\n            <CardImage src={card.image} alt={card.alt} />\n            <TitleContainer>\n              <Text type=\"h3\">{card.title}</Text>\n            </TitleContainer>\n            <Text type=\"p\">{card.description}</Text>\n          </Card>\n        ))}\n      </CardsContainer>\n    )\n  }\n\n  renderFooter = () => {\n        const { button, priceTagline } = this.props.texts\n\n    return (\n      <Footer>\n        <ButtonsContainer>\n          <ButtonWrapper>\n            <Button\n              type=\"primary\"\n              size=\"large\"\n              onClick={() => window.location.replace(button.url)}\n              label={button.label}\n              fullWidth\n            />\n          </ButtonWrapper>\n        </ButtonsContainer>\n        <Text type=\"p\">{priceTagline}</Text>\n      </Footer>\n    )\n  }\n\n  render() {\n    return (\n      <CrossSellStyled>\n        {this.renderHeader()}\n        {this.renderBody()}\n        {this.renderFooter()}\n      </CrossSellStyled>\n    )\n  }\n}\n\nCrossSell.propTypes = {\n  texts: PropTypes.shape({\n    title: PropTypes.string,\n    subtitle: PropTypes.string,\n    cards: PropTypes.arrayOf(\n      PropTypes.shape({\n        image: PropTypes.string,\n        alt: PropTypes.string,\n        title: PropTypes.string,\n        description: PropTypes.string,\n      }),\n    ),\n    button: PropTypes.shape({\n      label: PropTypes.string,\n      url: PropTypes.string,\n    }),\n    priceTagline: PropTypes.string,\n  }).isRequired,\n}\n","level":1,"id":"crosssell","parentName":"ui","examples":[{"name":"CrossSell","description":"CrossSell Example","methods":[],"code":"import React from 'react'\nimport CrossSell from '@bufferapp/ui/CrossSell'\n\n/** CrossSell Example */\nexport default function ExampleCrossSell() {\n  const replyMock = {\n    title: 'Provide amazing customer service on social media',\n    subtitle:\n      'Respond to social conversations, resolve customer support requests, and create an outstanding experience.',\n    cards: [\n      {\n        image: './images/reply-cross-sell-01.png',\n        alt: 'Alt text 1',\n        title: 'Single Team Inbox',\n        description:\n          'Direct messages and comments on your posts and ads are gathered into one team inbox to streamline your processes.',\n      },\n      {\n        image: './images/reply-cross-sell-02.png',\n        alt: 'Alt text 2',\n        title: 'Tagging and Organization',\n        description:\n          'Conversations can be sorted into various categories to help you respond to the urgent and important ones first.',\n      },\n      {\n        image: './images/reply-cross-sell-03.png',\n        alt: 'Alt text 3',\n        title: 'Automated Workflows',\n        description:\n          'Rules let you automatically tag or assign conversations based on specific criteria and improve your team efficiency.',\n      },\n    ],\n    button: {\n      label: 'Start a Free 14-Day Trial',\n      url: '',\n    },\n    priceTagline: 'NO CREDIT CARD REQUIRED',\n  }\n  return <CrossSell texts={replyMock} />\n}\n","title":""}]},{"name":"Dropdown Menu","description":"","props":{"menubarItem":{"type":{"name":"node"},"required":true,"description":"Link in the NavBar that triggers the popup"},"ariaLabel":{"type":{"name":"string"},"required":true,"description":"Aria label for list component"},"ariaLabelPopup":{"type":{"name":"string"},"required":false,"description":"Aria label for popup menu, it should preferibly be the same as the menubarItem name","defaultValue":{"value":"null","computed":false}},"xPosition":{"type":{"name":"string"},"required":false,"description":"xPosition for Dropdown menu","defaultValue":{"value":"'right'","computed":false}},"items":{"type":{"name":"arrayOf","value":{"name":"shape","value":{"id":{"name":"string","required":false},"title":{"name":"string","required":false},"colors":{"name":"shape","value":{"title":{"name":"string","required":false},"iconHover":{"name":"string","required":false}},"required":false}}}},"required":true,"description":"Items list to display in the popup menu"},"onOpen":{"type":{"name":"func"},"required":false,"description":"onOpen function to fire when the Dropdown menu is open","defaultValue":{"value":"null","computed":false}}},"code":"/* eslint-disable jsx-a11y/role-supports-aria-props */\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { DropdownItems, Item } from './style'\nimport PopupMenu from './PopupMenu/PopupMenu'\nimport { keyCode } from './keyCode'\n\nexport default class DropdownMenu extends React.Component {\n    constructor(props) {\n    super(props)\n\n    this.state = {\n      isOpen: false,\n      usingMouse: false,\n    }\n\n        this.keyCode = keyCode\n\n    this.handleKeydown = this.handleKeydown.bind(this)\n    this.handlePopupBlur = this.handlePopupBlur.bind(this)\n    this.handleMousedown = this.handleMousedown.bind(this)\n  }\n\n  componentDidMount() {\n        this.itemsNode.addEventListener('keydown', this.handleKeydown)\n        this.itemsNode.addEventListener('mousedown', this.handleMousedown)\n  }\n\n  componentWillUnmount() {\n        this.itemsNode.removeEventListener('keydown', this.handleKeydown)\n        this.itemsNode.removeEventListener('mousedown', this.handleMousedown)\n  }\n\n  handleMousedown = () => {\n    this.setState({ usingMouse: true })\n  }\n\n  togglePopup = () => {\n        const { isOpen } = this.state\n    this.setState({ isOpen: !isOpen })\n  }\n\n    isPopupOpen = () => this.state.isOpen\n\n  openPopup = () => {\n    this.setState({ isOpen: true })\n  }\n\n  closePopup = () => {\n    this.setState({ isOpen: false })\n  }\n\n    handleKeydown = (event) => {\n    let flag = false\n    switch (event.keyCode) {\n            case this.keyCode.SPACE:\n            case this.keyCode.RETURN:\n            case this.keyCode.DOWN:\n        if (!this.isPopupOpen()) {\n          this.openPopup()\n          flag = true\n        }\n        break\n            case this.keyCode.ESC:\n            case this.keyCode.TAB:\n        this.closePopup()\n        break\n      default:\n        break\n    }\n\n    this.setState({ usingMouse: false })\n\n    if (flag) {\n      event.stopPropagation()\n      event.preventDefault()\n    }\n  }\n\n    handlePopupBlur = (event) => {\n    const outsideOfPopup = !event.currentTarget.contains(event.relatedTarget)\n    setTimeout(() => {\n      if (this.isPopupOpen() && outsideOfPopup) {\n        this.closePopup()\n      }\n    }, 300)\n  }\n\n  render() {\n    const {\n            menubarItem,\n            items,\n            ariaLabel,\n            ariaLabelPopup,\n            horizontalOffset,\n            xPosition,\n            onOpen,\n    } = this.props\n\n    const MenubarItem = React.cloneElement(menubarItem)\n\n    return (\n      <DropdownItems\n                ref={(itemsNode) => (this.itemsNode = itemsNode)}\n        role=\"menubar\"\n        aria-label={ariaLabel}\n                usingMouse={this.state.usingMouse}\n      >\n        <Item role=\"none\" menuOption>\n          <MenubarItem.type\n            {...MenubarItem.props}\n            role=\"menuitem\"\n                        tabIndex=\"0\"\n            aria-haspopup=\"true\"\n                        aria-expanded={this.state.isOpen}\n            onKeyDown={(ev) => this.handleKeydown(ev)}\n            onClick={(ev) => {\n              this.togglePopup()\n              ev.preventDefault()\n            }}\n          />\n          <PopupMenu\n                        role=\"menu\"\n            xPosition={xPosition}\n            items={items}\n            aria-label={ariaLabelPopup}\n            horizontalOffset={horizontalOffset}\n                        isOpen={this.state.isOpen}\n                        usingMouse={this.state.usingMouse}\n            closePopup={this.closePopup}\n                        onBlur={(event) => this.handlePopupBlur(event)}\n            onOpen={onOpen}\n          />\n        </Item>\n      </DropdownItems>\n    )\n  }\n}\n\nDropdownMenu.propTypes = {\n  /** Link in the NavBar that triggers the popup */\n  menubarItem: PropTypes.node.isRequired,\n\n  /** Aria label for list component */\n  ariaLabel: PropTypes.string.isRequired,\n\n  /** Aria label for popup menu, it should preferibly be the same as the menubarItem name */\n  ariaLabelPopup: PropTypes.string,\n\n  /** xPosition for Dropdown menu */\n  xPosition: PropTypes.string,\n\n  /** Items list to display in the popup menu */\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      title: PropTypes.string,\n      colors: PropTypes.shape({\n        title: PropTypes.string,\n        iconHover: PropTypes.string,\n      }),\n    }),\n  ).isRequired,\n\n  /** onOpen function to fire when the Dropdown menu is open */\n  onOpen: PropTypes.func,\n}\n\nDropdownMenu.defaultProps = {\n  ariaLabelPopup: null,\n  xPosition: 'right',\n  onOpen: null,\n}\n","level":1,"id":"dropdownmenu","parentName":"ui","examples":[{"name":"DropdownMenu","description":"DropdownMenu Example","methods":[],"code":"import React from 'react'\nimport DropdownMenu from '@bufferapp/ui/DropdownMenu'\nimport Tag from '@bufferapp/ui/Tag'\nimport styled from 'styled-components'\n\nimport Flash from '@bufferapp/ui/Icon/Icons/Flash'\nimport Canva from '@bufferapp/ui/Icon/Icons/Canva'\n\nimport { white, grayDark, canva, canvaLight } from '@bufferapp/ui/style/colors'\n\nconst MenuItem = styled.a`\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 24px;\n  position: relative;\n  text-decoration: none;\n  z-index: 2;\n  cursor: pointer;\n  background-color: ${white};\n  border: 1px solid ${grayDark};\n  border-radius: 4px;\n`\n\nconst menuItems = [\n  {\n    id: '1',\n    title: 'FAQ',\n    onItemClick: () => console.info('FAQ'),\n  },\n  {\n    id: '2',\n    title: 'Status',\n    onItemClick: () => console.info('Status'),\n  },\n  {\n    id: '3',\n    title: 'Pricing & Plans',\n    onItemClick: () => console.info('Pricing'),\n  },\n  {\n    id: '4',\n    title: 'Wishlist',\n    onItemClick: () => console.info('Wishlist'),\n    disabled: true,\n  },\n  {\n    id: '5',\n    title: 'Highlighted',\n    colors: { title: 'purple', iconHover: 'red' },\n    icon: <Flash color=\"purple\" />,\n    onItemClick: () => console.info('Highlighted'),\n  },\n  {\n    id: '6',\n    title: 'Canva',\n    colors: { iconHover: canvaLight },\n    icon: <Canva color={canva} />,\n    tag: <Tag>New</Tag>,\n    onItemClick: () => console.info('Canva'),\n  },\n]\n\nconst Navigation = styled.nav`\n  display: flex;\n  height: 45px;\n  width: 100px;\n  padding: 10px 0px;\n  margin: 0;\n`\n\n/** DropdownMenu Example */\nexport default function ExampleDropdownMenu() {\n  return (\n    <Navigation>\n      <DropdownMenu\n        ariaLabel=\"Help Menu\"\n        ariaLabelPopup=\"Help\"\n        menubarItem={<MenuItem>Help</MenuItem>}\n        items={menuItems}\n        xPosition=\"left\"\n      />\n    </Navigation>\n  )\n}\n","title":""},{"name":"DropdownMenuWithOnOpenEvent","description":"DropdownMenu with on open event Example","methods":[],"code":"import React from 'react'\nimport DropdownMenu from '@bufferapp/ui/DropdownMenu'\nimport Tag from '@bufferapp/ui/Tag'\nimport styled from 'styled-components'\n\nimport Flash from '@bufferapp/ui/Icon/Icons/Flash'\nimport Canva from '@bufferapp/ui/Icon/Icons/Canva'\n\nimport { white, grayDark, canva, canvaLight } from '@bufferapp/ui/style/colors'\n\nconst MenuItem = styled.a`\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 24px;\n  position: relative;\n  text-decoration: none;\n  z-index: 2;\n  cursor: pointer;\n  background-color: ${white};\n  border: 1px solid ${grayDark};\n  border-radius: 4px;\n`\n\nconst menuItems = [\n  {\n    id: '1',\n    title: 'FAQ',\n    onItemClick: () => console.info('FAQ'),\n  },\n  {\n    id: '2',\n    title: 'Status',\n    onItemClick: () => console.info('Status'),\n  },\n  {\n    id: '3',\n    title: 'Pricing & Plans',\n    onItemClick: () => console.info('Pricing'),\n  },\n  {\n    id: '4',\n    title: 'Wishlist',\n    onItemClick: () => console.info('Wishlist'),\n    disabled: true,\n  },\n  {\n    id: '5',\n    title: 'Highlighted',\n    colors: { title: 'purple', iconHover: 'red' },\n    icon: <Flash color=\"purple\" />,\n    onItemClick: () => console.info('Highlighted'),\n  },\n  {\n    id: '6',\n    title: 'Canva',\n    colors: { iconHover: canvaLight },\n    icon: <Canva color={canva} />,\n    tag: <Tag>New</Tag>,\n    onItemClick: () => console.info('Canva'),\n  },\n]\n\nconst Navigation = styled.nav`\n  display: flex;\n  height: 45px;\n  width: 100px;\n  padding: 10px 0px;\n  margin: 0;\n`\n\n/** DropdownMenu with on open event Example */\nexport default function ExampleDropdownMenu() {\n  return (\n    <Navigation>\n      <DropdownMenu\n        ariaLabel=\"Help Menu\"\n        ariaLabelPopup=\"Help\"\n        menubarItem={<MenuItem>Menu</MenuItem>}\n        items={menuItems}\n        xPosition=\"left\"\n        onOpen={() => console.log('----- onOpen Event')}\n      />\n    </Navigation>\n  )\n}\n","title":""}]},{"name":"Icon","description":"","props":{"size":{"type":{"name":"enum","value":[{"value":"'small'","computed":false},{"value":"'smedium'","computed":false},{"value":"'medium'","computed":false},{"value":"'large'","computed":false},{"value":"'extraLarge'","computed":false}]},"required":false,"description":"The size of the icon. Can be 'small', 'smedium, 'medium', 'large', or 'extraLarge'","defaultValue":{"value":"'medium'","computed":false}},"verticalAlign":{"type":{"name":"string"},"required":false,"description":"The `vertical-align` CSS value","defaultValue":{"value":"''","computed":false}},"title":{"type":{"name":"string"},"required":false,"description":"The title for better accessibility","defaultValue":{"value":"''","computed":false}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as styles from './style'\n\nconst StyledIcon = styled.svg`\n  ${styles.base};\n  ${(props) =>\n        styles[props.size]};\n  vertical-align: ${(props) =>\n        props.verticalAlign ? props.verticalAlign : null};\n`\n\nconst Icon = ({ children, ...props }) => (\n  <StyledIcon {...props}>\n    <title>{props.title}</title>\n    {children}\n  </StyledIcon>\n)\n\nIcon.propTypes = {\n  /** The size of the icon. Can be 'small', 'smedium, 'medium', 'large', or 'extraLarge' */\n  size: PropTypes.oneOf(['small', 'smedium', 'medium', 'large', 'extraLarge']),\n\n  /** The `vertical-align` CSS value */\n  verticalAlign: PropTypes.string,\n\n  /** The title for better accessibility */\n  title: PropTypes.string,\n}\n\nIcon.defaultProps = {\n  size: 'medium',\n  verticalAlign: '',\n  title: '',\n}\n\nexport default Icon\n","level":1,"id":"icon","parentName":"ui","examples":[{"name":"Add","description":"Add","methods":[],"code":"import React from 'react'\nimport AddIcon from '@bufferapp/ui/Icon/Icons/Add'\n\n/** Add */\nexport default function AddIconExample() {\n  return <AddIcon size=\"large\" />\n}\n","title":""},{"name":"AddMedia","description":"AddMedia","methods":[],"code":"import React from 'react'\nimport AddMediaIcon from '@bufferapp/ui/Icon/Icons/AddMedia'\n\n/** AddMedia */\nexport default function AddMediaIconExample() {\n  return <AddMediaIcon size=\"large\" />\n}\n","title":""},{"name":"AltTag","description":"AltTag","methods":[],"code":"import React from 'react'\nimport AltTagIcon from '@bufferapp/ui/Icon/Icons/AltTag'\n\n/** AltTag */\nexport default function AltTagIconExample() {\n  return <AltTagIcon size=\"large\" />\n}\n","title":""},{"name":"Analyze","description":"Analyze","methods":[],"code":"import React from 'react'\nimport AnalyzeIcon from '@bufferapp/ui/Icon/Icons/Analyze'\n\n/** Analyze */\nexport default function AnalyzeIconExample() {\n  return <AnalyzeIcon size=\"large\" />\n}\n","title":""},{"name":"Appearance","description":"Appearance","methods":[],"code":"import React from 'react'\nimport AppearanceIcon from '@bufferapp/ui/Icon/Icons/Appearance'\n\n/** Appearance */\nexport default function AppearanceIconExample() {\n  return <AppearanceIcon size=\"large\" />\n}\n","title":""},{"name":"AppleMusic","description":"AppleMusic","methods":[],"code":"import React from 'react'\nimport AppleMusicIcon from '@bufferapp/ui/Icon/Icons/AppleMusic'\n\n/** AppleMusic */\nexport default function AppleMusicIconExample() {\n  return <AppleMusicIcon size=\"large\" />\n}\n","title":""},{"name":"ArrowDown","description":"ArrowDown","methods":[],"code":"import React from 'react'\nimport ArrowDownIcon from '@bufferapp/ui/Icon/Icons/ArrowDown'\n\n/** ArrowDown */\nexport default function ArrowDownIconExample() {\n  return <ArrowDownIcon size=\"large\" />\n}\n","title":""},{"name":"ArrowLeft","description":"ArrowLeft","methods":[],"code":"import React from 'react'\nimport ArrowLeftIcon from '@bufferapp/ui/Icon/Icons/ArrowLeft'\n\n/** ArrowLeft */\nexport default function ArrowLeftIconExample() {\n  return <ArrowLeftIcon size=\"large\" />\n}\n","title":""},{"name":"ArrowRight","description":"ArrowRight","methods":[],"code":"import React from 'react'\nimport ArrowRightIcon from '@bufferapp/ui/Icon/Icons/ArrowRight'\n\n/** ArrowRight */\nexport default function ArrowRightIconExample() {\n  return <ArrowRightIcon size=\"large\" />\n}\n","title":""},{"name":"ArrowUp","description":"ArrowUp","methods":[],"code":"import React from 'react'\nimport ArrowUpIcon from '@bufferapp/ui/Icon/Icons/ArrowUp'\n\n/** ArrowUp */\nexport default function ArrowUpIconExample() {\n  return <ArrowUpIcon size=\"large\" />\n}\n","title":""},{"name":"Attach","description":"Attach","methods":[],"code":"import React from 'react'\nimport AttachIcon from '@bufferapp/ui/Icon/Icons/Attach'\n\n/** Attach */\nexport default function AttachIconExample() {\n  return <AttachIcon size=\"large\" />\n}\n","title":""},{"name":"Audience","description":"Audience","methods":[],"code":"import React from 'react'\nimport AudienceIcon from '@bufferapp/ui/Icon/Icons/Audience'\n\n/** Audience */\nexport default function AudienceIconExample() {\n  return <AudienceIcon size=\"large\" />\n}\n","title":""},{"name":"Bandcamp","description":"Bandcamp","methods":[],"code":"import React from 'react'\nimport BandcampIcon from '@bufferapp/ui/Icon/Icons/Bandcamp'\n\n/** Bandcamp */\nexport default function BandcampIconExample() {\n  return <BandcampIcon size=\"large\" />\n}\n","title":""},{"name":"Behance","description":"Behance","methods":[],"code":"import React from 'react'\nimport BehanceIcon from '@bufferapp/ui/Icon/Icons/Behance'\n\n/** Behance */\nexport default function BehanceIconExample() {\n  return <BehanceIcon size=\"large\" />\n}\n","title":""},{"name":"Bell","description":"Bell","methods":[],"code":"import React from 'react'\nimport BellIcon from '@bufferapp/ui/Icon/Icons/Bell'\n\n/** Bell */\nexport default function BellIconExample() {\n  return <BellIcon size=\"large\" />\n}\n","title":""},{"name":"BookmarkFilled","description":"BookmarkFilled","methods":[],"code":"import React from 'react'\nimport BookmarkFilledIcon from '@bufferapp/ui/Icon/Icons/BookmarkFilled'\n\n/** BookmarkFilled */\nexport default function BookmarkFilledIconExample() {\n  return <BookmarkFilledIcon size=\"large\" />\n}\n","title":""},{"name":"BookmarkOutline","description":"BookmarkOutline","methods":[],"code":"import React from 'react'\nimport BookmarkOutlineIcon from '@bufferapp/ui/Icon/Icons/BookmarkOutline'\n\n/** BookmarkOutline */\nexport default function BookmarkOutlineIconExample() {\n  return <BookmarkOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"Buffer","description":"Buffer","methods":[],"code":"import React from 'react'\nimport BufferIcon from '@bufferapp/ui/Icon/Icons/Buffer'\n\n/** Buffer */\nexport default function BufferIconExample() {\n  return <BufferIcon size=\"large\" />\n}\n","title":""},{"name":"Building","description":"Building","methods":[],"code":"import React from 'react'\nimport BuildingIcon from '@bufferapp/ui/Icon/Icons/Building'\n\n/** Building */\nexport default function BuildingIconExample() {\n  return <BuildingIcon size=\"large\" />\n}\n","title":""},{"name":"ButtonLink","description":"ButtonLink","methods":[],"code":"import React from 'react'\nimport ButtonLinkIcon from '@bufferapp/ui/Icon/Icons/ButtonLink'\n\n/** ButtonLink */\nexport default function ButtonLinkIconExample() {\n  return <ButtonLinkIcon size=\"large\" />\n}\n","title":""},{"name":"Calendar","description":"Calendar","methods":[],"code":"import React from 'react'\nimport CalendarIcon from '@bufferapp/ui/Icon/Icons/Calendar'\n\n/** Calendar */\nexport default function CalendarIconExample() {\n  return <CalendarIcon size=\"large\" />\n}\n","title":""},{"name":"CalendarAdd","description":"CalendarAdd","methods":[],"code":"import React from 'react'\nimport CalendarAddIcon from '@bufferapp/ui/Icon/Icons/CalendarAdd'\n\n/** CalendarAdd */\nexport default function CalendarAddIconExample() {\n  return <CalendarAddIcon size=\"large\" />\n}\n","title":""},{"name":"Camera","description":"Camera","methods":[],"code":"import React from 'react'\nimport CameraIcon from '@bufferapp/ui/Icon/Icons/Camera'\n\n/** Camera */\nexport default function CameraIconExample() {\n  return <CameraIcon size=\"large\" />\n}\n","title":""},{"name":"Canva","description":"Canva","methods":[],"code":"import React from 'react'\nimport CanvaIcon from '@bufferapp/ui/Icon/Icons/Canva'\n\n/** Canva */\nexport default function CanvaIconExample() {\n  return <CanvaIcon size=\"large\" />\n}\n","title":""},{"name":"Caption","description":"Caption","methods":[],"code":"import React from 'react'\nimport CaptionIcon from '@bufferapp/ui/Icon/Icons/Caption'\n\n/** Caption */\nexport default function CaptionIconExample() {\n  return <CaptionIcon size=\"large\" />\n}\n","title":""},{"name":"Card","description":"Card","methods":[],"code":"import React from 'react'\nimport CardIcon from '@bufferapp/ui/Icon/Icons/Card'\n\n/** Card */\nexport default function CardIconExample() {\n  return <CardIcon size=\"large\" />\n}\n","title":""},{"name":"CaretDown","description":"CaretDown","methods":[],"code":"import React from 'react'\nimport CaretDownIcon from '@bufferapp/ui/Icon/Icons/CaretDown'\n\n/** CaretDown */\nexport default function CaretDownIconExample() {\n  return <CaretDownIcon size=\"large\" />\n}\n","title":""},{"name":"CaretLeft","description":"CaretLeft","methods":[],"code":"import React from 'react'\nimport CaretLeftIcon from '@bufferapp/ui/Icon/Icons/CaretLeft'\n\n/** CaretLeft */\nexport default function CaretLeftIconExample() {\n  return <CaretLeftIcon size=\"large\" />\n}\n","title":""},{"name":"CaretRight","description":"CaretRight","methods":[],"code":"import React from 'react'\nimport CaretRightIcon from '@bufferapp/ui/Icon/Icons/CaretRight'\n\n/** CaretRight */\nexport default function CaretRightIconExample() {\n  return <CaretRightIcon size=\"large\" />\n}\n","title":""},{"name":"CaretUp","description":"CaretUp","methods":[],"code":"import React from 'react'\nimport CaretUpIcon from '@bufferapp/ui/Icon/Icons/CaretUp'\n\n/** CaretUp */\nexport default function CaretUpIconExample() {\n  return <CaretUpIcon size=\"large\" />\n}\n","title":""},{"name":"Carousel","description":"Carousel","methods":[],"code":"import React from 'react'\nimport CarouselIcon from '@bufferapp/ui/Icon/Icons/Carousel'\n\n/** Carousel */\nexport default function CarouselIconExample() {\n  return <CarouselIcon size=\"large\" />\n}\n","title":""},{"name":"Channels","description":"Channels","methods":[],"code":"import React from 'react'\nimport ChannelsIcon from '@bufferapp/ui/Icon/Icons/Channels'\n\n/** Channels */\nexport default function ChannelsIconExample() {\n  return <ChannelsIcon size=\"large\" />\n}\n","title":""},{"name":"ChartLine","description":"ChartLine","methods":[],"code":"import React from 'react'\nimport ChartLineIcon from '@bufferapp/ui/Icon/Icons/ChartLine'\n\n/** ChartLine */\nexport default function ChartLineIconExample() {\n  return <ChartLineIcon size=\"large\" />\n}\n","title":""},{"name":"Checkmark","description":"Checkmark","methods":[],"code":"import React from 'react'\nimport CheckmarkIcon from '@bufferapp/ui/Icon/Icons/Checkmark'\n\n/** Checkmark */\nexport default function CheckmarkIconExample() {\n  return <CheckmarkIcon size=\"large\" />\n}\n","title":""},{"name":"ChevronDown","description":"ChevronDown","methods":[],"code":"import React from 'react'\nimport ChevronDownIcon from '@bufferapp/ui/Icon/Icons/ChevronDown'\n\n/** ChevronDown */\nexport default function ChevronDownIconExample() {\n  return <ChevronDownIcon size=\"large\" />\n}\n","title":""},{"name":"ChevronUp","description":"ChevronUp","methods":[],"code":"import React from 'react'\nimport ChevronUpIcon from '@bufferapp/ui/Icon/Icons/ChevronUp'\n\n/** ChevronUp */\nexport default function ChevronUpIconExample() {\n  return <ChevronUpIcon size=\"large\" />\n}\n","title":""},{"name":"Clock","description":"Clock","methods":[],"code":"import React from 'react'\nimport ClockIcon from '@bufferapp/ui/Icon/Icons/Clock'\n\n/** Clock */\nexport default function ClockIconExample() {\n  return <ClockIcon size=\"large\" />\n}\n","title":""},{"name":"Clubhouse","description":"Clubhouse","methods":[],"code":"import React from 'react'\nimport ClubhouseIcon from '@bufferapp/ui/Icon/Icons/Clubhouse'\n\n/** Clubhouse */\nexport default function ClubhouseIconExample() {\n  return <ClubhouseIcon size=\"large\" />\n}\n","title":""},{"name":"CommentRoundFilled","description":"CommentRoundFilled","methods":[],"code":"import React from 'react'\nimport CommentRoundFilledIcon from '@bufferapp/ui/Icon/Icons/CommentRoundFilled'\n\n/** CommentRoundFilled */\nexport default function CommentRoundFilledIconExample() {\n  return <CommentRoundFilledIcon size=\"large\" />\n}\n","title":""},{"name":"CommentRoundOutline","description":"CommentRoundOutline","methods":[],"code":"import React from 'react'\nimport CommentRoundOutlineIcon from '@bufferapp/ui/Icon/Icons/CommentRoundOutline'\n\n/** CommentRoundOutline */\nexport default function CommentRoundOutlineIconExample() {\n  return <CommentRoundOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"CommentSquareOutline","description":"CommentSquareOutline","methods":[],"code":"import React from 'react'\nimport CommentSquareOutlineIcon from '@bufferapp/ui/Icon/Icons/CommentSquareOutline'\n\n/** CommentSquareOutline */\nexport default function CommentSquareOutlineIconExample() {\n  return <CommentSquareOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"Compare","description":"Compare","methods":[],"code":"import React from 'react'\nimport CompareIcon from '@bufferapp/ui/Icon/Icons/Compare'\n\n/** Compare */\nexport default function CompareIconExample() {\n  return <CompareIcon size=\"large\" />\n}\n","title":""},{"name":"Copy","description":"Copy","methods":[],"code":"import React from 'react'\nimport CopyIcon from '@bufferapp/ui/Icon/Icons/Copy'\n\n/** Copy */\nexport default function CopyIconExample() {\n  return <CopyIcon size=\"large\" />\n}\n","title":""},{"name":"Coupon","description":"Coupon","methods":[],"code":"import React from 'react'\nimport CouponIcon from '@bufferapp/ui/Icon/Icons/Coupon'\n\n/** Coupon */\nexport default function CouponIconExample() {\n  return <CouponIcon size=\"large\" />\n}\n","title":""},{"name":"Cross","description":"Cross","methods":[],"code":"import React from 'react'\nimport CrossIcon from '@bufferapp/ui/Icon/Icons/Cross'\n\n/** Cross */\nexport default function CrossIconExample() {\n  return <CrossIcon size=\"large\" />\n}\n","title":""},{"name":"Day","description":"Day","methods":[],"code":"import React from 'react'\nimport DayIcon from '@bufferapp/ui/Icon/Icons/Day'\n\n/** Day */\nexport default function DayIconExample() {\n  return <DayIcon size=\"large\" />\n}\n","title":""},{"name":"Direct","description":"Direct","methods":[],"code":"import React from 'react'\nimport DirectIcon from '@bufferapp/ui/Icon/Icons/Direct'\n\n/** Direct */\nexport default function DirectIconExample() {\n  return <DirectIcon size=\"large\" />\n}\n","title":""},{"name":"Discord","description":"Discord","methods":[],"code":"import React from 'react'\nimport DiscordIcon from '@bufferapp/ui/Icon/Icons/Discord'\n\n/** Discord */\nexport default function DiscordIconExample() {\n  return <DiscordIcon size=\"large\" />\n}\n","title":""},{"name":"Dollar","description":"Dollar","methods":[],"code":"import React from 'react'\nimport DollarIcon from '@bufferapp/ui/Icon/Icons/Dollar'\n\n/** Dollar */\nexport default function DollarIconExample() {\n  return <DollarIcon size=\"large\" />\n}\n","title":""},{"name":"Drafts","description":"Drafts","methods":[],"code":"import React from 'react'\nimport DraftsIcon from '@bufferapp/ui/Icon/Icons/Drafts'\n\n/** Drafts */\nexport default function DraftsIconExample() {\n  return <DraftsIcon size=\"large\" />\n}\n","title":""},{"name":"DragIndicator","description":"DragIndicator","methods":[],"code":"import React from 'react'\nimport DragIndicatorIcon from '@bufferapp/ui/Icon/Icons/DragIndicator'\n\n/** DragIndicator */\nexport default function DragIndicatorIconExample() {\n  return <DragIndicatorIcon size=\"large\" />\n}\n","title":""},{"name":"Dribbble","description":"Dribbble","methods":[],"code":"import React from 'react'\nimport DribbbleIcon from '@bufferapp/ui/Icon/Icons/Dribbble'\n\n/** Dribbble */\nexport default function DribbbleIconExample() {\n  return <DribbbleIcon size=\"large\" />\n}\n","title":""},{"name":"Dropbox","description":"Dropbox","methods":[],"code":"import React from 'react'\nimport DropboxIcon from '@bufferapp/ui/Icon/Icons/Dropbox'\n\n/** Dropbox */\nexport default function DropboxIconExample() {\n  return <DropboxIcon size=\"large\" />\n}\n","title":""},{"name":"Email","description":"Email","methods":[],"code":"import React from 'react'\nimport EmailIcon from '@bufferapp/ui/Icon/Icons/Email'\n\n/** Email */\nexport default function EmailIconExample() {\n  return <EmailIcon size=\"large\" />\n}\n","title":""},{"name":"Emoji","description":"Emoji","methods":[],"code":"import React from 'react'\nimport EmojiIcon from '@bufferapp/ui/Icon/Icons/Emoji'\n\n/** Emoji */\nexport default function EmojiIconExample() {\n  return <EmojiIcon size=\"large\" />\n}\n","title":""},{"name":"Facebook","description":"Facebook","methods":[],"code":"import React from 'react'\nimport FacebookIcon from '@bufferapp/ui/Icon/Icons/Facebook'\n\n/** Facebook */\nexport default function FacebookIconExample() {\n  return <FacebookIcon size=\"large\" />\n}\n","title":""},{"name":"Feed","description":"Feed","methods":[],"code":"import React from 'react'\nimport FeedIcon from '@bufferapp/ui/Icon/Icons/Feed'\n\n/** Feed */\nexport default function FeedIconExample() {\n  return <FeedIcon size=\"large\" />\n}\n","title":""},{"name":"Flag","description":"Flag","methods":[],"code":"import React from 'react'\nimport FlagIcon from '@bufferapp/ui/Icon/Icons/Flag'\n\n/** Flag */\nexport default function FlagIconExample() {\n  return <FlagIcon size=\"large\" />\n}\n","title":""},{"name":"Flash","description":"Flash","methods":[],"code":"import React from 'react'\nimport FlashIcon from '@bufferapp/ui/Icon/Icons/Flash'\n\n/** Flash */\nexport default function FlashIconExample() {\n  return <FlashIcon size=\"large\" />\n}\n","title":""},{"name":"Folder","description":"Folder","methods":[],"code":"import React from 'react'\nimport FolderIcon from '@bufferapp/ui/Icon/Icons/Folder'\n\n/** Folder */\nexport default function FolderIconExample() {\n  return <FolderIcon size=\"large\" />\n}\n","title":""},{"name":"Folders","description":"Folders","methods":[],"code":"import React from 'react'\nimport FoldersIcon from '@bufferapp/ui/Icon/Icons/Folders'\n\n/** Folders */\nexport default function FoldersIconExample() {\n  return <FoldersIcon size=\"large\" />\n}\n","title":""},{"name":"Frequency","description":"Frequency","methods":[],"code":"import React from 'react'\nimport FrequencyIcon from '@bufferapp/ui/Icon/Icons/Frequency'\n\n/** Frequency */\nexport default function FrequencyIconExample() {\n  return <FrequencyIcon size=\"large\" />\n}\n","title":""},{"name":"Gbp","description":"Gbp","methods":[],"code":"import React from 'react'\nimport GbpIcon from '@bufferapp/ui/Icon/Icons/Gbp'\n\n/** Gbp */\nexport default function GbpIconExample() {\n  return <GbpIcon size=\"large\" />\n}\n","title":""},{"name":"Gear","description":"Gear","methods":[],"code":"import React from 'react'\nimport GearIcon from '@bufferapp/ui/Icon/Icons/Gear'\n\n/** Gear */\nexport default function GearIconExample() {\n  return <GearIcon size=\"large\" />\n}\n","title":""},{"name":"Giphy","description":"Giphy","methods":[],"code":"import React from 'react'\nimport GiphyIcon from '@bufferapp/ui/Icon/Icons/Giphy'\n\n/** Giphy */\nexport default function GiphyIconExample() {\n  return <GiphyIcon size=\"large\" />\n}\n","title":""},{"name":"Github","description":"Github","methods":[],"code":"import React from 'react'\nimport GithubIcon from '@bufferapp/ui/Icon/Icons/Github'\n\n/** Github */\nexport default function GithubIconExample() {\n  return <GithubIcon size=\"large\" />\n}\n","title":""},{"name":"Giveaway","description":"Giveaway","methods":[],"code":"import React from 'react'\nimport GiveawayIcon from '@bufferapp/ui/Icon/Icons/Giveaway'\n\n/** Giveaway */\nexport default function GiveawayIconExample() {\n  return <GiveawayIcon size=\"large\" />\n}\n","title":""},{"name":"Gmb","description":"Gmb","methods":[],"code":"import React from 'react'\nimport GmbIcon from '@bufferapp/ui/Icon/Icons/Gmb'\n\n/** Gmb */\nexport default function GmbIconExample() {\n  return <GmbIcon size=\"large\" />\n}\n","title":""},{"name":"Google","description":"Google","methods":[],"code":"import React from 'react'\nimport GoogleIcon from '@bufferapp/ui/Icon/Icons/Google'\n\n/** Google */\nexport default function GoogleIconExample() {\n  return <GoogleIcon size=\"large\" />\n}\n","title":""},{"name":"GoogleDrive","description":"GoogleDrive","methods":[],"code":"import React from 'react'\nimport GoogleDriveIcon from '@bufferapp/ui/Icon/Icons/GoogleDrive'\n\n/** GoogleDrive */\nexport default function GoogleDriveIconExample() {\n  return <GoogleDriveIcon size=\"large\" />\n}\n","title":""},{"name":"GooglePhotos","description":"GooglePhotos","methods":[],"code":"import React from 'react'\nimport GooglePhotosIcon from '@bufferapp/ui/Icon/Icons/GooglePhotos'\n\n/** GooglePhotos */\nexport default function GooglePhotosIconExample() {\n  return <GooglePhotosIcon size=\"large\" />\n}\n","title":""},{"name":"GooglePlus","description":"GooglePlus","methods":[],"code":"import React from 'react'\nimport GooglePlusIcon from '@bufferapp/ui/Icon/Icons/GooglePlus'\n\n/** GooglePlus */\nexport default function GooglePlusIconExample() {\n  return <GooglePlusIcon size=\"large\" />\n}\n","title":""},{"name":"Hamburger","description":"Hamburger","methods":[],"code":"import React from 'react'\nimport HamburgerIcon from '@bufferapp/ui/Icon/Icons/Hamburger'\n\n/** Hamburger */\nexport default function HamburgerIconExample() {\n  return <HamburgerIcon size=\"large\" />\n}\n","title":""},{"name":"Hashtag","description":"Hashtag","methods":[],"code":"import React from 'react'\nimport HashtagIcon from '@bufferapp/ui/Icon/Icons/Hashtag'\n\n/** Hashtag */\nexport default function HashtagIconExample() {\n  return <HashtagIcon size=\"large\" />\n}\n","title":""},{"name":"Heading","description":"Heading","methods":[],"code":"import React from 'react'\nimport HeadingIcon from '@bufferapp/ui/Icon/Icons/Heading'\n\n/** Heading */\nexport default function HeadingIconExample() {\n  return <HeadingIcon size=\"large\" />\n}\n","title":""},{"name":"HeartFilled","description":"HeartFilled","methods":[],"code":"import React from 'react'\nimport HeartFilledIcon from '@bufferapp/ui/Icon/Icons/HeartFilled'\n\n/** HeartFilled */\nexport default function HeartFilledIconExample() {\n  return <HeartFilledIcon size=\"large\" />\n}\n","title":""},{"name":"HeartOutline","description":"HeartOutline","methods":[],"code":"import React from 'react'\nimport HeartOutlineIcon from '@bufferapp/ui/Icon/Icons/HeartOutline'\n\n/** HeartOutline */\nexport default function HeartOutlineIconExample() {\n  return <HeartOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"Help","description":"Help","methods":[],"code":"import React from 'react'\nimport HelpIcon from '@bufferapp/ui/Icon/Icons/Help'\n\n/** Help */\nexport default function HelpIconExample() {\n  return <HelpIcon size=\"large\" />\n}\n","title":""},{"name":"Hide","description":"Hide","methods":[],"code":"import React from 'react'\nimport HideIcon from '@bufferapp/ui/Icon/Icons/Hide'\n\n/** Hide */\nexport default function HideIconExample() {\n  return <HideIcon size=\"large\" />\n}\n","title":""},{"name":"Home","description":"Home","methods":[],"code":"import React from 'react'\nimport HomeIcon from '@bufferapp/ui/Icon/Icons/Home'\n\n/** Home */\nexport default function HomeIconExample() {\n  return <HomeIcon size=\"large\" />\n}\n","title":""},{"name":"Hotkeys","description":"Hotkeys","methods":[],"code":"import React from 'react'\nimport HotkeysIcon from '@bufferapp/ui/Icon/Icons/Hotkeys'\n\n/** Hotkeys */\nexport default function HotkeysIconExample() {\n  return <HotkeysIcon size=\"large\" />\n}\n","title":""},{"name":"Image","description":"Image","methods":[],"code":"import React from 'react'\nimport ImageIcon from '@bufferapp/ui/Icon/Icons/Image'\n\n/** Image */\nexport default function ImageIconExample() {\n  return <ImageIcon size=\"large\" />\n}\n","title":""},{"name":"Import","description":"Import","methods":[],"code":"import React from 'react'\nimport ImportIcon from '@bufferapp/ui/Icon/Icons/Import'\n\n/** Import */\nexport default function ImportIconExample() {\n  return <ImportIcon size=\"large\" />\n}\n","title":""},{"name":"Inbox","description":"Inbox","methods":[],"code":"import React from 'react'\nimport InboxIcon from '@bufferapp/ui/Icon/Icons/Inbox'\n\n/** Inbox */\nexport default function InboxIconExample() {\n  return <InboxIcon size=\"large\" />\n}\n","title":""},{"name":"Info","description":"Info","methods":[],"code":"import React from 'react'\nimport InfoIcon from '@bufferapp/ui/Icon/Icons/Info'\n\n/** Info */\nexport default function InfoIconExample() {\n  return <InfoIcon size=\"large\" />\n}\n","title":""},{"name":"Instagram","description":"Instagram","methods":[],"code":"import React from 'react'\nimport InstagramIcon from '@bufferapp/ui/Icon/Icons/Instagram'\n\n/** Instagram */\nexport default function InstagramIconExample() {\n  return <InstagramIcon size=\"large\" />\n}\n","title":""},{"name":"InstagramComment","description":"InstagramComment","methods":[],"code":"import React from 'react'\nimport InstagramCommentIcon from '@bufferapp/ui/Icon/Icons/InstagramComment'\n\n/** InstagramComment */\nexport default function InstagramCommentIconExample() {\n  return <InstagramCommentIcon size=\"large\" />\n}\n","title":""},{"name":"InstagramDm","description":"InstagramDm","methods":[],"code":"import React from 'react'\nimport InstagramDmIcon from '@bufferapp/ui/Icon/Icons/InstagramDm'\n\n/** InstagramDm */\nexport default function InstagramDmIconExample() {\n  return <InstagramDmIcon size=\"large\" />\n}\n","title":""},{"name":"InstagramGrid","description":"InstagramGrid","methods":[],"code":"import React from 'react'\nimport InstagramGridIcon from '@bufferapp/ui/Icon/Icons/InstagramGrid'\n\n/** InstagramGrid */\nexport default function InstagramGridIconExample() {\n  return <InstagramGridIcon size=\"large\" />\n}\n","title":""},{"name":"InstagramLike","description":"InstagramLike","methods":[],"code":"import React from 'react'\nimport InstagramLikeIcon from '@bufferapp/ui/Icon/Icons/InstagramLike'\n\n/** InstagramLike */\nexport default function InstagramLikeIconExample() {\n  return <InstagramLikeIcon size=\"large\" />\n}\n","title":""},{"name":"Layout","description":"Layout","methods":[],"code":"import React from 'react'\nimport LayoutIcon from '@bufferapp/ui/Icon/Icons/Layout'\n\n/** Layout */\nexport default function LayoutIconExample() {\n  return <LayoutIcon size=\"large\" />\n}\n","title":""},{"name":"Link","description":"Link","methods":[],"code":"import React from 'react'\nimport LinkIcon from '@bufferapp/ui/Icon/Icons/Link'\n\n/** Link */\nexport default function LinkIconExample() {\n  return <LinkIcon size=\"large\" />\n}\n","title":""},{"name":"LinkedIn","description":"LinkedIn","methods":[],"code":"import React from 'react'\nimport LinkedInIcon from '@bufferapp/ui/Icon/Icons/LinkedIn'\n\n/** LinkedIn */\nexport default function LinkedInIconExample() {\n  return <LinkedInIcon size=\"large\" />\n}\n","title":""},{"name":"List","description":"List","methods":[],"code":"import React from 'react'\nimport ListIcon from '@bufferapp/ui/Icon/Icons/List'\n\n/** List */\nexport default function ListIconExample() {\n  return <ListIcon size=\"large\" />\n}\n","title":""},{"name":"Load","description":"Load","methods":[],"code":"import React from 'react'\nimport LoadIcon from '@bufferapp/ui/Icon/Icons/Load'\n\n/** Load */\nexport default function LoadIconExample() {\n  return <LoadIcon size=\"large\" />\n}\n","title":""},{"name":"Location","description":"Location","methods":[],"code":"import React from 'react'\nimport LocationIcon from '@bufferapp/ui/Icon/Icons/Location'\n\n/** Location */\nexport default function LocationIconExample() {\n  return <LocationIcon size=\"large\" />\n}\n","title":""},{"name":"LocationPin","description":"LocationPin","methods":[],"code":"import React from 'react'\nimport LocationPinIcon from '@bufferapp/ui/Icon/Icons/LocationPin'\n\n/** LocationPin */\nexport default function LocationPinIconExample() {\n  return <LocationPinIcon size=\"large\" />\n}\n","title":""},{"name":"Locked","description":"Locked","methods":[],"code":"import React from 'react'\nimport LockedIcon from '@bufferapp/ui/Icon/Icons/Locked'\n\n/** Locked */\nexport default function LockedIconExample() {\n  return <LockedIcon size=\"large\" />\n}\n","title":""},{"name":"MagicWand","description":"MagicWand","methods":[],"code":"import React from 'react'\nimport MagicWandIcon from '@bufferapp/ui/Icon/Icons/MagicWand'\n\n/** MagicWand */\nexport default function MagicWandIconExample() {\n  return <MagicWandIcon size=\"large\" />\n}\n","title":""},{"name":"Mail","description":"Mail","methods":[],"code":"import React from 'react'\nimport MailIcon from '@bufferapp/ui/Icon/Icons/Mail'\n\n/** Mail */\nexport default function MailIconExample() {\n  return <MailIcon size=\"large\" />\n}\n","title":""},{"name":"Mastodon","description":"Mastodon","methods":[],"code":"import React from 'react'\nimport MastodonIcon from '@bufferapp/ui/Icon/Icons/Mastodon'\n\n/** Mastodon */\nexport default function MastodonIconExample() {\n  return <MastodonIcon size=\"large\" />\n}\n","title":""},{"name":"Medium","description":"Medium","methods":[],"code":"import React from 'react'\nimport MediumIcon from '@bufferapp/ui/Icon/Icons/Medium'\n\n/** Medium */\nexport default function MediumIconExample() {\n  return <MediumIcon size=\"large\" />\n}\n","title":""},{"name":"Message","description":"Message","methods":[],"code":"import React from 'react'\nimport MessageIcon from '@bufferapp/ui/Icon/Icons/Message'\n\n/** Message */\nexport default function MessageIconExample() {\n  return <MessageIcon size=\"large\" />\n}\n","title":""},{"name":"MessageFilled","description":"MessageFilled","methods":[],"code":"import React from 'react'\nimport MessageFilledIcon from '@bufferapp/ui/Icon/Icons/MessageFilled'\n\n/** MessageFilled */\nexport default function MessageFilledIconExample() {\n  return <MessageFilledIcon size=\"large\" />\n}\n","title":""},{"name":"MessageOutline","description":"MessageOutline","methods":[],"code":"import React from 'react'\nimport MessageOutlineIcon from '@bufferapp/ui/Icon/Icons/MessageOutline'\n\n/** MessageOutline */\nexport default function MessageOutlineIconExample() {\n  return <MessageOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"MessageRoundFilled","description":"MessageRoundFilled","methods":[],"code":"import React from 'react'\nimport MessageRoundFilledIcon from '@bufferapp/ui/Icon/Icons/MessageRoundFilled'\n\n/** MessageRoundFilled */\nexport default function MessageRoundFilledIconExample() {\n  return <MessageRoundFilledIcon size=\"large\" />\n}\n","title":""},{"name":"MessageRoundOutline","description":"MessageRoundOutline","methods":[],"code":"import React from 'react'\nimport MessageRoundOutlineIcon from '@bufferapp/ui/Icon/Icons/MessageRoundOutline'\n\n/** MessageRoundOutline */\nexport default function MessageRoundOutlineIconExample() {\n  return <MessageRoundOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"MessageSquareFilled","description":"MessageSquareFilled","methods":[],"code":"import React from 'react'\nimport MessageSquareFilledIcon from '@bufferapp/ui/Icon/Icons/MessageSquareFilled'\n\n/** MessageSquareFilled */\nexport default function MessageSquareFilledIconExample() {\n  return <MessageSquareFilledIcon size=\"large\" />\n}\n","title":""},{"name":"MessageSquareOutline","description":"MessageSquareOutline","methods":[],"code":"import React from 'react'\nimport MessageSquareOutlineIcon from '@bufferapp/ui/Icon/Icons/MessageSquareOutline'\n\n/** MessageSquareOutline */\nexport default function MessageSquareOutlineIconExample() {\n  return <MessageSquareOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"Messenger","description":"Messenger","methods":[],"code":"import React from 'react'\nimport MessengerIcon from '@bufferapp/ui/Icon/Icons/Messenger'\n\n/** Messenger */\nexport default function MessengerIconExample() {\n  return <MessengerIcon size=\"large\" />\n}\n","title":""},{"name":"More","description":"More","methods":[],"code":"import React from 'react'\nimport MoreIcon from '@bufferapp/ui/Icon/Icons/More'\n\n/** More */\nexport default function MoreIconExample() {\n  return <MoreIcon size=\"large\" />\n}\n","title":""},{"name":"Movie","description":"Movie","methods":[],"code":"import React from 'react'\nimport MovieIcon from '@bufferapp/ui/Icon/Icons/Movie'\n\n/** Movie */\nexport default function MovieIconExample() {\n  return <MovieIcon size=\"large\" />\n}\n","title":""},{"name":"Music","description":"Music","methods":[],"code":"import React from 'react'\nimport MusicIcon from '@bufferapp/ui/Icon/Icons/Music'\n\n/** Music */\nexport default function MusicIconExample() {\n  return <MusicIcon size=\"large\" />\n}\n","title":""},{"name":"Negative","description":"Negative","methods":[],"code":"import React from 'react'\nimport NegativeIcon from '@bufferapp/ui/Icon/Icons/Negative'\n\n/** Negative */\nexport default function NegativeIconExample() {\n  return <NegativeIcon size=\"large\" />\n}\n","title":""},{"name":"Onedrive","description":"Onedrive","methods":[],"code":"import React from 'react'\nimport OnedriveIcon from '@bufferapp/ui/Icon/Icons/Onedrive'\n\n/** Onedrive */\nexport default function OnedriveIconExample() {\n  return <OnedriveIcon size=\"large\" />\n}\n","title":""},{"name":"OpenNew","description":"OpenNew","methods":[],"code":"import React from 'react'\nimport OpenNewIcon from '@bufferapp/ui/Icon/Icons/OpenNew'\n\n/** OpenNew */\nexport default function OpenNewIconExample() {\n  return <OpenNewIcon size=\"large\" />\n}\n","title":""},{"name":"Order","description":"Order","methods":[],"code":"import React from 'react'\nimport OrderIcon from '@bufferapp/ui/Icon/Icons/Order'\n\n/** Order */\nexport default function OrderIconExample() {\n  return <OrderIcon size=\"large\" />\n}\n","title":""},{"name":"Organic","description":"Organic","methods":[],"code":"import React from 'react'\nimport OrganicIcon from '@bufferapp/ui/Icon/Icons/Organic'\n\n/** Organic */\nexport default function OrganicIconExample() {\n  return <OrganicIcon size=\"large\" />\n}\n","title":""},{"name":"Patreon","description":"Patreon","methods":[],"code":"import React from 'react'\nimport PatreonIcon from '@bufferapp/ui/Icon/Icons/Patreon'\n\n/** Patreon */\nexport default function PatreonIconExample() {\n  return <PatreonIcon size=\"large\" />\n}\n","title":""},{"name":"Pause","description":"Pause","methods":[],"code":"import React from 'react'\nimport PauseIcon from '@bufferapp/ui/Icon/Icons/Pause'\n\n/** Pause */\nexport default function PauseIconExample() {\n  return <PauseIcon size=\"large\" />\n}\n","title":""},{"name":"Paypal","description":"Paypal","methods":[],"code":"import React from 'react'\nimport PaypalIcon from '@bufferapp/ui/Icon/Icons/Paypal'\n\n/** Paypal */\nexport default function PaypalIconExample() {\n  return <PaypalIcon size=\"large\" />\n}\n","title":""},{"name":"Pencil","description":"Pencil","methods":[],"code":"import React from 'react'\nimport PencilIcon from '@bufferapp/ui/Icon/Icons/Pencil'\n\n/** Pencil */\nexport default function PencilIconExample() {\n  return <PencilIcon size=\"large\" />\n}\n","title":""},{"name":"People","description":"People","methods":[],"code":"import React from 'react'\nimport PeopleIcon from '@bufferapp/ui/Icon/Icons/People'\n\n/** People */\nexport default function PeopleIconExample() {\n  return <PeopleIcon size=\"large\" />\n}\n","title":""},{"name":"PercentageDown","description":"PercentageDown","methods":[],"code":"import React from 'react'\nimport PercentageDownIcon from '@bufferapp/ui/Icon/Icons/PercentageDown'\n\n/** PercentageDown */\nexport default function PercentageDownIconExample() {\n  return <PercentageDownIcon size=\"large\" />\n}\n","title":""},{"name":"PercentageUp","description":"PercentageUp","methods":[],"code":"import React from 'react'\nimport PercentageUpIcon from '@bufferapp/ui/Icon/Icons/PercentageUp'\n\n/** PercentageUp */\nexport default function PercentageUpIconExample() {\n  return <PercentageUpIcon size=\"large\" />\n}\n","title":""},{"name":"Person","description":"Person","methods":[],"code":"import React from 'react'\nimport PersonIcon from '@bufferapp/ui/Icon/Icons/Person'\n\n/** Person */\nexport default function PersonIconExample() {\n  return <PersonIcon size=\"large\" />\n}\n","title":""},{"name":"Phone","description":"Phone","methods":[],"code":"import React from 'react'\nimport PhoneIcon from '@bufferapp/ui/Icon/Icons/Phone'\n\n/** Phone */\nexport default function PhoneIconExample() {\n  return <PhoneIcon size=\"large\" />\n}\n","title":""},{"name":"Pin","description":"Pin","methods":[],"code":"import React from 'react'\nimport PinIcon from '@bufferapp/ui/Icon/Icons/Pin'\n\n/** Pin */\nexport default function PinIconExample() {\n  return <PinIcon size=\"large\" />\n}\n","title":""},{"name":"Pinned","description":"Pinned","methods":[],"code":"import React from 'react'\nimport PinnedIcon from '@bufferapp/ui/Icon/Icons/Pinned'\n\n/** Pinned */\nexport default function PinnedIconExample() {\n  return <PinnedIcon size=\"large\" />\n}\n","title":""},{"name":"Pinterest","description":"Pinterest","methods":[],"code":"import React from 'react'\nimport PinterestIcon from '@bufferapp/ui/Icon/Icons/Pinterest'\n\n/** Pinterest */\nexport default function PinterestIconExample() {\n  return <PinterestIcon size=\"large\" />\n}\n","title":""},{"name":"Placeholder","description":"Placeholder","methods":[],"code":"import React from 'react'\nimport PlaceholderIcon from '@bufferapp/ui/Icon/Icons/Placeholder'\n\n/** Placeholder */\nexport default function PlaceholderIconExample() {\n  return <PlaceholderIcon size=\"large\" />\n}\n","title":""},{"name":"Play","description":"Play","methods":[],"code":"import React from 'react'\nimport PlayIcon from '@bufferapp/ui/Icon/Icons/Play'\n\n/** Play */\nexport default function PlayIconExample() {\n  return <PlayIcon size=\"large\" />\n}\n","title":""},{"name":"PlayRound","description":"PlayRound","methods":[],"code":"import React from 'react'\nimport PlayRoundIcon from '@bufferapp/ui/Icon/Icons/PlayRound'\n\n/** PlayRound */\nexport default function PlayRoundIconExample() {\n  return <PlayRoundIcon size=\"large\" />\n}\n","title":""},{"name":"Plus","description":"Plus","methods":[],"code":"import React from 'react'\nimport PlusIcon from '@bufferapp/ui/Icon/Icons/Plus'\n\n/** Plus */\nexport default function PlusIconExample() {\n  return <PlusIcon size=\"large\" />\n}\n","title":""},{"name":"Post","description":"Post","methods":[],"code":"import React from 'react'\nimport PostIcon from '@bufferapp/ui/Icon/Icons/Post'\n\n/** Post */\nexport default function PostIconExample() {\n  return <PostIcon size=\"large\" />\n}\n","title":""},{"name":"Promoted","description":"Promoted","methods":[],"code":"import React from 'react'\nimport PromotedIcon from '@bufferapp/ui/Icon/Icons/Promoted'\n\n/** Promoted */\nexport default function PromotedIconExample() {\n  return <PromotedIcon size=\"large\" />\n}\n","title":""},{"name":"Publish","description":"Publish","methods":[],"code":"import React from 'react'\nimport PublishIcon from '@bufferapp/ui/Icon/Icons/Publish'\n\n/** Publish */\nexport default function PublishIconExample() {\n  return <PublishIcon size=\"large\" />\n}\n","title":""},{"name":"QrCode","description":"QrCode","methods":[],"code":"import React from 'react'\nimport QrCodeIcon from '@bufferapp/ui/Icon/Icons/QrCode'\n\n/** QrCode */\nexport default function QrCodeIconExample() {\n  return <QrCodeIcon size=\"large\" />\n}\n","title":""},{"name":"Question","description":"Question","methods":[],"code":"import React from 'react'\nimport QuestionIcon from '@bufferapp/ui/Icon/Icons/Question'\n\n/** Question */\nexport default function QuestionIconExample() {\n  return <QuestionIcon size=\"large\" />\n}\n","title":""},{"name":"Reel","description":"Reel","methods":[],"code":"import React from 'react'\nimport ReelIcon from '@bufferapp/ui/Icon/Icons/Reel'\n\n/** Reel */\nexport default function ReelIconExample() {\n  return <ReelIcon size=\"large\" />\n}\n","title":""},{"name":"Refresh","description":"Refresh","methods":[],"code":"import React from 'react'\nimport RefreshIcon from '@bufferapp/ui/Icon/Icons/Refresh'\n\n/** Refresh */\nexport default function RefreshIconExample() {\n  return <RefreshIcon size=\"large\" />\n}\n","title":""},{"name":"Reply","description":"Reply","methods":[],"code":"import React from 'react'\nimport ReplyIcon from '@bufferapp/ui/Icon/Icons/Reply'\n\n/** Reply */\nexport default function ReplyIconExample() {\n  return <ReplyIcon size=\"large\" />\n}\n","title":""},{"name":"Return","description":"Return","methods":[],"code":"import React from 'react'\nimport ReturnIcon from '@bufferapp/ui/Icon/Icons/Return'\n\n/** Return */\nexport default function ReturnIconExample() {\n  return <ReturnIcon size=\"large\" />\n}\n","title":""},{"name":"Retweet","description":"Retweet","methods":[],"code":"import React from 'react'\nimport RetweetIcon from '@bufferapp/ui/Icon/Icons/Retweet'\n\n/** Retweet */\nexport default function RetweetIconExample() {\n  return <RetweetIcon size=\"large\" />\n}\n","title":""},{"name":"Save","description":"Save","methods":[],"code":"import React from 'react'\nimport SaveIcon from '@bufferapp/ui/Icon/Icons/Save'\n\n/** Save */\nexport default function SaveIconExample() {\n  return <SaveIcon size=\"large\" />\n}\n","title":""},{"name":"Search","description":"Search","methods":[],"code":"import React from 'react'\nimport SearchIcon from '@bufferapp/ui/Icon/Icons/Search'\n\n/** Search */\nexport default function SearchIconExample() {\n  return <SearchIcon size=\"large\" />\n}\n","title":""},{"name":"Share","description":"Share","methods":[],"code":"import React from 'react'\nimport ShareIcon from '@bufferapp/ui/Icon/Icons/Share'\n\n/** Share */\nexport default function ShareIconExample() {\n  return <ShareIcon size=\"large\" />\n}\n","title":""},{"name":"ShareArrow","description":"ShareArrow","methods":[],"code":"import React from 'react'\nimport ShareArrowIcon from '@bufferapp/ui/Icon/Icons/ShareArrow'\n\n/** ShareArrow */\nexport default function ShareArrowIconExample() {\n  return <ShareArrowIcon size=\"large\" />\n}\n","title":""},{"name":"ShareArrowFilled","description":"ShareArrowFilled","methods":[],"code":"import React from 'react'\nimport ShareArrowFilledIcon from '@bufferapp/ui/Icon/Icons/ShareArrowFilled'\n\n/** ShareArrowFilled */\nexport default function ShareArrowFilledIconExample() {\n  return <ShareArrowFilledIcon size=\"large\" />\n}\n","title":""},{"name":"ShareArrowOutline","description":"ShareArrowOutline","methods":[],"code":"import React from 'react'\nimport ShareArrowOutlineIcon from '@bufferapp/ui/Icon/Icons/ShareArrowOutline'\n\n/** ShareArrowOutline */\nexport default function ShareArrowOutlineIconExample() {\n  return <ShareArrowOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"Shopify","description":"Shopify","methods":[],"code":"import React from 'react'\nimport ShopifyIcon from '@bufferapp/ui/Icon/Icons/Shopify'\n\n/** Shopify */\nexport default function ShopifyIconExample() {\n  return <ShopifyIcon size=\"large\" />\n}\n","title":""},{"name":"Short","description":"Short","methods":[],"code":"import React from 'react'\nimport ShortIcon from '@bufferapp/ui/Icon/Icons/Short'\n\n/** Short */\nexport default function ShortIconExample() {\n  return <ShortIcon size=\"large\" />\n}\n","title":""},{"name":"Sidebar","description":"Sidebar","methods":[],"code":"import React from 'react'\nimport SidebarIcon from '@bufferapp/ui/Icon/Icons/Sidebar'\n\n/** Sidebar */\nexport default function SidebarIconExample() {\n  return <SidebarIcon size=\"large\" />\n}\n","title":""},{"name":"SizeExtraLarge","description":"Size: extra large icon","methods":[],"code":"import React from 'react'\nimport LockIcon from '@bufferapp/ui/Icon/Icons/Locked'\n\n/** Size: extra large icon */\nexport default function ExtraLargeIcon() {\n  return <LockIcon size=\"extraLarge\" />\n}\n","title":""},{"name":"SizeLarge","description":"Size: large icon","methods":[],"code":"import React from 'react'\nimport LockIcon from '@bufferapp/ui/Icon/Icons/Locked'\n\n/** Size: large icon */\nexport default function LargeIcon() {\n  return <LockIcon size=\"large\" />\n}\n","title":""},{"name":"SizeMedium","description":"Size: medium icon","methods":[],"code":"import React from 'react'\nimport LockIcon from '@bufferapp/ui/Icon/Icons/Locked'\n\n/** Size: medium icon */\nexport default function MediumIcon() {\n  return <LockIcon size=\"medium\" />\n}\n","title":""},{"name":"SizeSmall","description":"Size: small icon","methods":[],"code":"import React from 'react'\nimport LockIcon from '@bufferapp/ui/Icon/Icons/Locked'\n\n/** Size: small icon */\nexport default function SmallIcon() {\n  return <LockIcon size=\"small\" />\n}\n","title":""},{"name":"Sms","description":"Sms","methods":[],"code":"import React from 'react'\nimport SmsIcon from '@bufferapp/ui/Icon/Icons/Sms'\n\n/** Sms */\nexport default function SmsIconExample() {\n  return <SmsIcon size=\"large\" />\n}\n","title":""},{"name":"Snapchat","description":"Snapchat","methods":[],"code":"import React from 'react'\nimport SnapchatIcon from '@bufferapp/ui/Icon/Icons/Snapchat'\n\n/** Snapchat */\nexport default function SnapchatIconExample() {\n  return <SnapchatIcon size=\"large\" />\n}\n","title":""},{"name":"SocialIcons","description":"SocialIcons","methods":[],"code":"import React from 'react'\nimport SocialIconsIcon from '@bufferapp/ui/Icon/Icons/SocialIcons'\n\n/** SocialIcons */\nexport default function SocialIconsIconExample() {\n  return <SocialIconsIcon size=\"large\" />\n}\n","title":""},{"name":"Soundcloud","description":"Soundcloud","methods":[],"code":"import React from 'react'\nimport SoundcloudIcon from '@bufferapp/ui/Icon/Icons/Soundcloud'\n\n/** Soundcloud */\nexport default function SoundcloudIconExample() {\n  return <SoundcloudIcon size=\"large\" />\n}\n","title":""},{"name":"Spam","description":"Spam","methods":[],"code":"import React from 'react'\nimport SpamIcon from '@bufferapp/ui/Icon/Icons/Spam'\n\n/** Spam */\nexport default function SpamIconExample() {\n  return <SpamIcon size=\"large\" />\n}\n","title":""},{"name":"Sparkles","description":"Sparkles","methods":[],"code":"import React from 'react'\nimport SparklesIcon from '@bufferapp/ui/Icon/Icons/Sparkles'\n\n/** Sparkles */\nexport default function SparklesIconExample() {\n  return <SparklesIcon size=\"large\" />\n}\n","title":""},{"name":"Spotify","description":"Spotify","methods":[],"code":"import React from 'react'\nimport SpotifyIcon from '@bufferapp/ui/Icon/Icons/Spotify'\n\n/** Spotify */\nexport default function SpotifyIconExample() {\n  return <SpotifyIcon size=\"large\" />\n}\n","title":""},{"name":"Star","description":"Star","methods":[],"code":"import React from 'react'\nimport StarIcon from '@bufferapp/ui/Icon/Icons/Star'\n\n/** Star */\nexport default function StarIconExample() {\n  return <StarIcon size=\"large\" />\n}\n","title":""},{"name":"StarOutline","description":"StarOutline","methods":[],"code":"import React from 'react'\nimport StarOutlineIcon from '@bufferapp/ui/Icon/Icons/StarOutline'\n\n/** StarOutline */\nexport default function StarOutlineIconExample() {\n  return <StarOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"StartPage","description":"StartPage","methods":[],"code":"import React from 'react'\nimport StartPageIcon from '@bufferapp/ui/Icon/Icons/StartPage'\n\n/** StartPage */\nexport default function StartPageIconExample() {\n  return <StartPageIcon size=\"large\" />\n}\n","title":""},{"name":"Stats","description":"Stats","methods":[],"code":"import React from 'react'\nimport StatsIcon from '@bufferapp/ui/Icon/Icons/Stats'\n\n/** Stats */\nexport default function StatsIconExample() {\n  return <StatsIcon size=\"large\" />\n}\n","title":""},{"name":"Story","description":"Story","methods":[],"code":"import React from 'react'\nimport StoryIcon from '@bufferapp/ui/Icon/Icons/Story'\n\n/** Story */\nexport default function StoryIconExample() {\n  return <StoryIcon size=\"large\" />\n}\n","title":""},{"name":"Subheading","description":"Subheading","methods":[],"code":"import React from 'react'\nimport SubheadingIcon from '@bufferapp/ui/Icon/Icons/Subheading'\n\n/** Subheading */\nexport default function SubheadingIconExample() {\n  return <SubheadingIcon size=\"large\" />\n}\n","title":""},{"name":"Substack","description":"Substack","methods":[],"code":"import React from 'react'\nimport SubstackIcon from '@bufferapp/ui/Icon/Icons/Substack'\n\n/** Substack */\nexport default function SubstackIconExample() {\n  return <SubstackIcon size=\"large\" />\n}\n","title":""},{"name":"Subtract","description":"Subtract","methods":[],"code":"import React from 'react'\nimport SubtractIcon from '@bufferapp/ui/Icon/Icons/Subtract'\n\n/** Subtract */\nexport default function SubtractIconExample() {\n  return <SubtractIcon size=\"large\" />\n}\n","title":""},{"name":"Swap","description":"Swap","methods":[],"code":"import React from 'react'\nimport SwapIcon from '@bufferapp/ui/Icon/Icons/Swap'\n\n/** Swap */\nexport default function SwapIconExample() {\n  return <SwapIcon size=\"large\" />\n}\n","title":""},{"name":"Tag","description":"Tag","methods":[],"code":"import React from 'react'\nimport TagIcon from '@bufferapp/ui/Icon/Icons/Tag'\n\n/** Tag */\nexport default function TagIconExample() {\n  return <TagIcon size=\"large\" />\n}\n","title":""},{"name":"Telegram","description":"Telegram","methods":[],"code":"import React from 'react'\nimport TelegramIcon from '@bufferapp/ui/Icon/Icons/Telegram'\n\n/** Telegram */\nexport default function TelegramIconExample() {\n  return <TelegramIcon size=\"large\" />\n}\n","title":""},{"name":"TextAlignCenter","description":"TextAlignCenter","methods":[],"code":"import React from 'react'\nimport TextAlignCenterIcon from '@bufferapp/ui/Icon/Icons/TextAlignCenter'\n\n/** TextAlignCenter */\nexport default function TextAlignCenterIconExample() {\n  return <TextAlignCenterIcon size=\"large\" />\n}\n","title":""},{"name":"TextAlignLeft","description":"TextAlignLeft","methods":[],"code":"import React from 'react'\nimport TextAlignLeftIcon from '@bufferapp/ui/Icon/Icons/TextAlignLeft'\n\n/** TextAlignLeft */\nexport default function TextAlignLeftIconExample() {\n  return <TextAlignLeftIcon size=\"large\" />\n}\n","title":""},{"name":"TextAlignRight","description":"TextAlignRight","methods":[],"code":"import React from 'react'\nimport TextAlignRightIcon from '@bufferapp/ui/Icon/Icons/TextAlignRight'\n\n/** TextAlignRight */\nexport default function TextAlignRightIconExample() {\n  return <TextAlignRightIcon size=\"large\" />\n}\n","title":""},{"name":"TextBold","description":"TextBold","methods":[],"code":"import React from 'react'\nimport TextBoldIcon from '@bufferapp/ui/Icon/Icons/TextBold'\n\n/** TextBold */\nexport default function TextBoldIconExample() {\n  return <TextBoldIcon size=\"large\" />\n}\n","title":""},{"name":"TextExpand","description":"TextExpand","methods":[],"code":"import React from 'react'\nimport TextExpandIcon from '@bufferapp/ui/Icon/Icons/TextExpand'\n\n/** TextExpand */\nexport default function TextExpandIconExample() {\n  return <TextExpandIcon size=\"large\" />\n}\n","title":""},{"name":"TextItalic","description":"TextItalic","methods":[],"code":"import React from 'react'\nimport TextItalicIcon from '@bufferapp/ui/Icon/Icons/TextItalic'\n\n/** TextItalic */\nexport default function TextItalicIconExample() {\n  return <TextItalicIcon size=\"large\" />\n}\n","title":""},{"name":"TextRephrase","description":"TextRephrase","methods":[],"code":"import React from 'react'\nimport TextRephraseIcon from '@bufferapp/ui/Icon/Icons/TextRephrase'\n\n/** TextRephrase */\nexport default function TextRephraseIconExample() {\n  return <TextRephraseIcon size=\"large\" />\n}\n","title":""},{"name":"TextSummarize","description":"TextSummarize","methods":[],"code":"import React from 'react'\nimport TextSummarizeIcon from '@bufferapp/ui/Icon/Icons/TextSummarize'\n\n/** TextSummarize */\nexport default function TextSummarizeIconExample() {\n  return <TextSummarizeIcon size=\"large\" />\n}\n","title":""},{"name":"TextUnderline","description":"TextUnderline","methods":[],"code":"import React from 'react'\nimport TextUnderlineIcon from '@bufferapp/ui/Icon/Icons/TextUnderline'\n\n/** TextUnderline */\nexport default function TextUnderlineIconExample() {\n  return <TextUnderlineIcon size=\"large\" />\n}\n","title":""},{"name":"Thread","description":"Thread","methods":[],"code":"import React from 'react'\nimport ThreadIcon from '@bufferapp/ui/Icon/Icons/Thread'\n\n/** Thread */\nexport default function ThreadIconExample() {\n  return <ThreadIcon size=\"large\" />\n}\n","title":""},{"name":"Thumbsup","description":"Thumbsup","methods":[],"code":"import React from 'react'\nimport ThumbsupIcon from '@bufferapp/ui/Icon/Icons/Thumbsup'\n\n/** Thumbsup */\nexport default function ThumbsupIconExample() {\n  return <ThumbsupIcon size=\"large\" />\n}\n","title":""},{"name":"ThumbsupFilled","description":"ThumbsupFilled","methods":[],"code":"import React from 'react'\nimport ThumbsupFilledIcon from '@bufferapp/ui/Icon/Icons/ThumbsupFilled'\n\n/** ThumbsupFilled */\nexport default function ThumbsupFilledIconExample() {\n  return <ThumbsupFilledIcon size=\"large\" />\n}\n","title":""},{"name":"ThumbsupOutline","description":"ThumbsupOutline","methods":[],"code":"import React from 'react'\nimport ThumbsupOutlineIcon from '@bufferapp/ui/Icon/Icons/ThumbsupOutline'\n\n/** ThumbsupOutline */\nexport default function ThumbsupOutlineIconExample() {\n  return <ThumbsupOutlineIcon size=\"large\" />\n}\n","title":""},{"name":"Tiktok","description":"Tiktok","methods":[],"code":"import React from 'react'\nimport TiktokIcon from '@bufferapp/ui/Icon/Icons/Tiktok'\n\n/** Tiktok */\nexport default function TiktokIconExample() {\n  return <TiktokIcon size=\"large\" />\n}\n","title":""},{"name":"Title","description":"Title","methods":[],"code":"import React from 'react'\nimport TitleIcon from '@bufferapp/ui/Icon/Icons/Title'\n\n/** Title */\nexport default function TitleIconExample() {\n  return <TitleIcon size=\"large\" />\n}\n","title":""},{"name":"Trash","description":"Trash","methods":[],"code":"import React from 'react'\nimport TrashIcon from '@bufferapp/ui/Icon/Icons/Trash'\n\n/** Trash */\nexport default function TrashIconExample() {\n  return <TrashIcon size=\"large\" />\n}\n","title":""},{"name":"Twitch","description":"Twitch","methods":[],"code":"import React from 'react'\nimport TwitchIcon from '@bufferapp/ui/Icon/Icons/Twitch'\n\n/** Twitch */\nexport default function TwitchIconExample() {\n  return <TwitchIcon size=\"large\" />\n}\n","title":""},{"name":"Twitter","description":"Twitter","methods":[],"code":"import React from 'react'\nimport TwitterIcon from '@bufferapp/ui/Icon/Icons/Twitter'\n\n/** Twitter */\nexport default function TwitterIconExample() {\n  return <TwitterIcon size=\"large\" />\n}\n","title":""},{"name":"Unknown","description":"Unknown","methods":[],"code":"import React from 'react'\nimport UnknownIcon from '@bufferapp/ui/Icon/Icons/Unknown'\n\n/** Unknown */\nexport default function UnknownIconExample() {\n  return <UnknownIcon size=\"large\" />\n}\n","title":""},{"name":"Unlocked","description":"Unlocked","methods":[],"code":"import React from 'react'\nimport UnlockedIcon from '@bufferapp/ui/Icon/Icons/Unlocked'\n\n/** Unlocked */\nexport default function UnlockedIconExample() {\n  return <UnlockedIcon size=\"large\" />\n}\n","title":""},{"name":"Unsplash","description":"Unsplash","methods":[],"code":"import React from 'react'\nimport UnsplashIcon from '@bufferapp/ui/Icon/Icons/Unsplash'\n\n/** Unsplash */\nexport default function UnsplashIconExample() {\n  return <UnsplashIcon size=\"large\" />\n}\n","title":""},{"name":"Video","description":"Video","methods":[],"code":"import React from 'react'\nimport VideoIcon from '@bufferapp/ui/Icon/Icons/Video'\n\n/** Video */\nexport default function VideoIconExample() {\n  return <VideoIcon size=\"large\" />\n}\n","title":""},{"name":"View","description":"View","methods":[],"code":"import React from 'react'\nimport ViewIcon from '@bufferapp/ui/Icon/Icons/View'\n\n/** View */\nexport default function ViewIconExample() {\n  return <ViewIcon size=\"large\" />\n}\n","title":""},{"name":"VolumeOff","description":"VolumeOff","methods":[],"code":"import React from 'react'\nimport VolumeOffIcon from '@bufferapp/ui/Icon/Icons/VolumeOff'\n\n/** VolumeOff */\nexport default function VolumeOffIconExample() {\n  return <VolumeOffIcon size=\"large\" />\n}\n","title":""},{"name":"VolumeOn","description":"VolumeOn","methods":[],"code":"import React from 'react'\nimport VolumeOnIcon from '@bufferapp/ui/Icon/Icons/VolumeOn'\n\n/** VolumeOn */\nexport default function VolumeOnIconExample() {\n  return <VolumeOnIcon size=\"large\" />\n}\n","title":""},{"name":"Warning","description":"Warning","methods":[],"code":"import React from 'react'\nimport WarningIcon from '@bufferapp/ui/Icon/Icons/Warning'\n\n/** Warning */\nexport default function WarningIconExample() {\n  return <WarningIcon size=\"large\" />\n}\n","title":""},{"name":"Website","description":"Website","methods":[],"code":"import React from 'react'\nimport WebsiteIcon from '@bufferapp/ui/Icon/Icons/Website'\n\n/** Website */\nexport default function WebsiteIconExample() {\n  return <WebsiteIcon size=\"large\" />\n}\n","title":""},{"name":"Whatsapp","description":"Whatsapp","methods":[],"code":"import React from 'react'\nimport WhatsappIcon from '@bufferapp/ui/Icon/Icons/Whatsapp'\n\n/** Whatsapp */\nexport default function WhatsappIconExample() {\n  return <WhatsappIcon size=\"large\" />\n}\n","title":""},{"name":"World","description":"World","methods":[],"code":"import React from 'react'\nimport WorldIcon from '@bufferapp/ui/Icon/Icons/World'\n\n/** World */\nexport default function WorldIconExample() {\n  return <WorldIcon size=\"large\" />\n}\n","title":""},{"name":"Youtube","description":"Youtube","methods":[],"code":"import React from 'react'\nimport YoutubeIcon from '@bufferapp/ui/Icon/Icons/Youtube'\n\n/** Youtube */\nexport default function YoutubeIconExample() {\n  return <YoutubeIcon size=\"large\" />\n}\n","title":""}]},{"name":"Input","description":"","props":{"disabled":{"type":{"name":"bool"},"required":false,"description":"It disables the input field. </i>","defaultValue":{"value":"false","computed":false}},"hasError":{"type":{"name":"bool"},"required":false,"description":"It colors the field in red.","defaultValue":{"value":"false","computed":false}},"required":{"type":{"name":"bool"},"required":false,"description":"Marks the input as required","defaultValue":{"value":"false","computed":false}},"help":{"type":{"name":"string"},"required":false,"description":"It adds an help text below the input box.","defaultValue":{"value":"''","computed":false}},"id":{"type":{"name":"string"},"required":false,"description":"Id to link label with input for a11y","defaultValue":{"value":"''","computed":false}},"label":{"type":{"name":"string"},"required":false,"description":"It adds a label on top of the input box. Make sure you also add an id for a11y","defaultValue":{"value":"''","computed":false}},"maxLength":{"type":{"name":"string"},"required":false,"description":"It adds a maxlength option for the input.","defaultValue":{"value":"undefined","computed":true}},"name":{"type":{"name":"string"},"required":true,"description":"It's the name of the input."},"placeholder":{"type":{"name":"string"},"required":false,"description":"It's the placeholder value of the input.","defaultValue":{"value":"''","computed":false}},"prefix":{"type":{"name":"shape","value":{"text":{"name":"string","required":true},"paddingLeft":{"name":"string","required":true}}},"required":false,"description":"Optional object describing fixed text that is placed inside the input, format is `{ text: '@', paddingLeft: '30px' }`","defaultValue":{"value":"null","computed":false}},"onChange":{"type":{"name":"func"},"required":true,"description":"The onChange event"},"onBlur":{"type":{"name":"func"},"required":false,"description":"The onBlur event","defaultValue":{"value":"() => {}","computed":false}},"onKeyUp":{"type":{"name":"func"},"required":false,"description":"The onKeyUp event","defaultValue":{"value":"() => {}","computed":false}},"size":{"type":{"name":"string"},"required":false,"description":"This is the vertical size of the input field, can be `small`, `regular`, or `tall`","defaultValue":{"value":"'regular'","computed":false}},"type":{"type":{"name":"string"},"required":false,"description":"The type of the input","defaultValue":{"value":"'text'","computed":false}},"value":{"type":{"name":"string"},"required":false,"description":"The value of the input","defaultValue":{"value":"undefined","computed":true}},"icon":{"type":{"name":"node"},"required":false,"description":"The value of the icon","defaultValue":{"value":"undefined","computed":true}},"forwardedRef":{"type":{"name":"shape","value":{"current":{"name":"any","required":false}}},"required":false,"description":"this consumed by the default export that is wrapping the component into a ForwardRef\n@ignore","defaultValue":{"value":"undefined","computed":true}}},"code":"import React from 'react'\n\nimport PropTypes from 'prop-types'\nimport * as Styles from './style'\nimport { Warning } from '../Icon'\nimport Text from '../Text'\n\nexport default class Input extends React.Component {\n  render() {\n    const {\n            disabled,\n            hasError,\n            help,\n            label,\n            maxLength,\n            id,\n            name,\n            onChange,\n            onBlur,\n            onKeyUp,\n            prefix,\n            placeholder,\n            size,\n            type,\n            value,\n            forwardedRef,\n            required,\n            icon,\n    } = this.props\n    return (\n      <Styles.InputWrapper>\n        {label.length > 0 && (\n          <Text htmlFor={id} type=\"label\">\n            {label}\n          </Text>\n        )}\n        <Styles.InputFieldWrapper prefix={prefix} size={size}>\n          {icon && !prefix && <Styles.StyledIcon>{icon}</Styles.StyledIcon>}\n          <Styles.InputStyled\n            disabled={disabled}\n                        hasError={hasError}\n            maxLength={maxLength}\n            id={id}\n            name={name}\n            onChange={onChange}\n            onBlur={onBlur}\n            onKeyUp={onKeyUp}\n            prefix={prefix}\n            placeholder={placeholder}\n            type={type}\n            size={size}\n            value={value}\n            ref={forwardedRef}\n            required={required}\n            aria-required={required ? true : undefined}\n            icon={icon}\n          />\n        </Styles.InputFieldWrapper>\n        {help.length > 0 && (\n          <Styles.HelpTextWrapper>\n            {hasError && <Warning size=\"medium\" />}\n            <Styles.HelpText type=\"help\" htmlFor={name} hasError={hasError}>\n              {help}\n            </Styles.HelpText>\n          </Styles.HelpTextWrapper>\n        )}\n      </Styles.InputWrapper>\n    )\n  }\n}\n\nInput.propTypes = {\n  /** It disables the input field. </i> */\n  disabled: PropTypes.bool,\n  /** It colors the field in red. */\n  hasError: PropTypes.bool,\n  /** Marks the input as required */\n  required: PropTypes.bool,\n  /** It adds an help text below the input box. */\n  help: PropTypes.string,\n  /** Id to link label with input for a11y */\n  id: PropTypes.string,\n  /** It adds a label on top of the input box. Make sure you also add an id for a11y */\n  label: PropTypes.string,\n  /** It adds a maxlength option for the input. */\n  maxLength: PropTypes.string,\n  /** It's the name of the input. */\n  name: PropTypes.string.isRequired,\n  /** It's the placeholder value of the input. */\n  placeholder: PropTypes.string,\n  /** Optional object describing fixed text that is placed inside the input, format is `{ text: '@', paddingLeft: '30px' }` */\n  prefix: PropTypes.shape({\n    text: PropTypes.string.isRequired,\n    paddingLeft: PropTypes.string.isRequired,\n  }),\n  /** The onChange event */\n  onChange: PropTypes.func.isRequired,\n  /** The onBlur event */\n  onBlur: PropTypes.func,\n  /** The onKeyUp event */\n  onKeyUp: PropTypes.func,\n  /** This is the vertical size of the input field, can be `small`, `regular`, or `tall` */\n  size: PropTypes.string,\n  /** The type of the input */\n  type: PropTypes.string,\n  /** The value of the input */\n  value: PropTypes.string,\n  /** The value of the icon */\n  icon: PropTypes.node,\n  /**\n   * this consumed by the default export that is wrapping the component into a ForwardRef\n   * @ignore\n   */\n  forwardedRef: PropTypes.shape({ current: PropTypes.any }),\n}\n\nInput.defaultProps = {\n  disabled: false,\n  hasError: false,\n  required: false,\n  help: '',\n  id: '',\n  label: '',\n  placeholder: '',\n  size: 'regular',\n  type: 'text',\n  value: undefined,\n  onBlur: () => {},\n  onKeyUp: () => {},\n  forwardedRef: undefined,\n  prefix: null,\n  maxLength: undefined,\n  icon: undefined,\n}\n","level":1,"id":"input","parentName":"ui","examples":[[{"name":"Default","description":"Input","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input */\nexport default function ExampleInput() {\n  return (\n    <Input\n      type=\"input\"\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"placeholder text\"\n    />\n  )\n}\n","title":"option"},{"name":"WithExposedRef","description":"Input with exposed ref","methods":[],"code":"import React, { useRef } from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input with exposed ref */\nexport default function ExampleInput() {\n  const inputRef = useRef(null)\n  return (\n    <React.Fragment>\n      <Input onChange={() => {}} name=\"foo\" ref={inputRef} />\n      <button type=\"button\" onClick={() => inputRef.current.focus()}>\n        Focus input\n      </button>\n    </React.Fragment>\n  )\n}\n","title":"option"},{"name":"WithHelp","description":"Input with help text","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input with help text */\nexport default function ExampleInput() {\n  return (\n    <Input\n      onChange={() => {}}\n      name=\"foo\"\n      help=\"this is an help text\"\n      placeholder=\"placeholder text\"\n    />\n  )\n}\n","title":"option"},{"name":"WithIcon","description":"Input with icon","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\nimport SearchIcon from '@bufferapp/ui/Icon/Icons/Search'\n\n/** Input with icon */\nexport default function ExampleInput() {\n  return (\n    <Input\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"Search channels\"\n      icon={<SearchIcon size=\"large\" />}\n    />\n  )\n}\n","title":"option"},{"name":"WithLabel","description":"Input with label text","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input with label text */\nexport default function ExampleInput() {\n  return (\n    <Input\n      onChange={() => {}}\n      name=\"foo\"\n      label=\"this is a label text\"\n      placeholder=\"placeholder text\"\n    />\n  )\n}\n","title":"option"},{"name":"WithOnBlur","description":"Input with onBlur option","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input with onBlur option */\nexport default function ExampleInput() {\n  return (\n    <Input\n      type=\"input\"\n      onChange={() => {}}\n      onBlur={() => {}}\n      name=\"foo\"\n      placeholder=\"placeholder text\"\n    />\n  )\n}\n","title":"option"},{"name":"WithPrefix","description":"Input with prefix text","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input with prefix text */\nexport default function ExampleInput() {\n  return (\n    <Input\n      onChange={() => {}}\n      name=\"foo\"\n      label=\"What is your Twitter handle?\"\n      prefix={{ text: '@', paddingLeft: '25px' }}\n    />\n  )\n}\n","title":"option"},{"name":"WithValue","description":"Input with value","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input with value */\nexport default function ExampleInput() {\n  return (\n    <Input\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"placeholder text\"\n      value=\"This is an input with a value\"\n    />\n  )\n}\n","title":"option"}],[{"name":"Regular","description":"Regular input","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Regular input */\nexport default function ExampleInput() {\n  return (\n    <Input\n      type=\"input\"\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"placeholder text\"\n    />\n  )\n}\n","title":"size"},{"name":"Small","description":"Small input","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Small input */\nexport default function ExampleInput() {\n  return (\n    <Input\n      type=\"input\"\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"placeholder text\"\n      size=\"small\"\n    />\n  )\n}\n","title":"size"},{"name":"Tall","description":"Tall input","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Tall input */\nexport default function ExampleInput() {\n  return (\n    <Input\n      type=\"input\"\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"placeholder text\"\n      size=\"tall\"\n    />\n  )\n}\n","title":"size"}],[{"name":"Disabled","description":"Input disabled","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input disabled */\nexport default function ExampleInput() {\n  return (\n    <Input\n      type=\"input\"\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"a disabled text input\"\n      disabled\n    />\n  )\n}\n","title":"state"},{"name":"WithError","description":"Input with error","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input with error */\nexport default function ExampleInput() {\n  return (\n    <Input\n      type=\"input\"\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"placeholder text\"\n      hasError\n      value=\"this is an input with an error\"\n    />\n  )\n}\n","title":"state"},{"name":"WithErrorAndHelp","description":"Input with error and help text","methods":[],"code":"import React from 'react'\nimport Input from '@bufferapp/ui/Input'\n\n/** Input with error and help text */\nexport default function ExampleInput() {\n  return (\n    <Input\n      onChange={() => {}}\n      name=\"foo\"\n      placeholder=\"placeholder text\"\n      help=\"help text\"\n      hasError\n      value=\"this is an input with an error\"\n    />\n  )\n}\n","title":"state"}]]},{"name":"Link","description":"","props":{"children":{"type":{"name":"node"},"required":true,"description":"Linkable content."},"href":{"type":{"name":"string"},"required":true,"description":"Url to navigate to."},"newTab":{"type":{"name":"bool"},"required":false,"description":"Opens new tab.","defaultValue":{"value":"false","computed":false}},"download":{"type":{"name":"union","value":[{"name":"bool"},{"name":"string"}]},"required":false,"description":"Saves the linked URL instead of navigating to it.","defaultValue":{"value":"false","computed":false}},"className":{"type":{"name":"string"},"required":false,"description":"Class passed by the DOM element.","defaultValue":{"value":"undefined","computed":true}},"title":{"type":{"name":"string"},"required":false,"description":"Title of the link.","defaultValue":{"value":"''","computed":false}},"fontWeight":{"type":{"name":"enum","value":[{"value":"500","computed":false},{"value":"700","computed":false}]},"required":false,"description":"Font weight of the link.","defaultValue":{"value":"fontWeightMedium","computed":true}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LinkStyled } from './style'\nimport { fontWeightMedium } from '../style/fonts'\n\nconst Link = ({\n    children,\n    href,\n    newTab,\n    download,\n    className,\n    title,\n    fontWeight,\n}) => (\n  <LinkStyled\n    href={href}\n    target={newTab ? '_blank' : '_self'}\n    rel={newTab ? 'noopener noreferrer' : undefined}\n    download={download}\n    className={className}\n    title={title}\n        fontWeight={fontWeight}\n  >\n    {children}\n  </LinkStyled>\n)\n\nLink.propTypes = {\n  /** Linkable content. */\n  children: PropTypes.node.isRequired,\n  /** Url to navigate to. */\n  href: PropTypes.string.isRequired,\n  /** Opens new tab. */\n  newTab: PropTypes.bool,\n  /** Saves the linked URL instead of navigating to it. */\n  download: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  /** Class passed by the DOM element. */\n  className: PropTypes.string,\n  /** Title of the link. */\n  title: PropTypes.string,\n  /** Font weight of the link. */\n  fontWeight: PropTypes.oneOf([500, 700]),\n}\n\nLink.defaultProps = {\n  newTab: false,\n  download: false,\n  className: undefined,\n  title: '',\n  fontWeight: fontWeightMedium,\n}\n\nexport default Link\n","level":1,"id":"link","parentName":"ui","examples":[{"name":"BoldLink","description":"Link with bolder weight","methods":[],"code":"import React from 'react'\nimport Link from '@bufferapp/ui/Link'\n\n/** Link with bolder weight */\nexport default function ExampleLink() {\n  return (\n    <Link newTab href=\"http://buffer.com\" fontWeight={700}>\n      This is a link\n    </Link>\n  )\n}\n","title":""},{"name":"DefaultLink","description":"Link","methods":[],"code":"import React from 'react'\nimport Link from '@bufferapp/ui/Link'\n\n/** Link */\nexport default function ExampleLink() {\n  return (\n    <Link newTab href=\"http://buffer.com\">\n      This is a link\n    </Link>\n  )\n}\n","title":""}]},{"name":"Loader","description":"","code":"import React from 'react'\nimport { LoaderStyled, Top, Middle, Bottom } from './style'\n\nconst Loader = () => (\n  <LoaderStyled>\n    <svg\n      width=\"36\"\n      height=\"40\"\n      viewBox=\"0 0 36 40\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n    >\n      <title>Loading</title>\n      <Top\n        d=\"M17.914 0.695986L35.258 9.66199L17.89 18.579L0.707985 9.64801L17.914 0.695986Z\"\n        fill=\"#3D3D3D\"\n      />\n      <Middle\n        d=\"M0.723011 20.194L6.135 17.512L17.895 23.345L29.782 17.505L35.336 20.205L17.894 28.671L0.723011 20.194Z\"\n        fill=\"#3D3D3D\"\n      />\n      <Bottom\n        d=\"M0.68401 30.536L6.12902 27.58L17.896 34.015L29.783 27.626L35.283 30.537L17.897 39.842L0.68401 30.536Z\"\n        fill=\"#3D3D3D\"\n      />\n    </svg>\n  </LoaderStyled>\n)\n\nexport default Loader\n","level":1,"id":"loader","parentName":"ui","examples":[{"name":"Loader","description":"Loader Example","methods":[],"code":"import React from 'react'\nimport Loader from '@bufferapp/ui/Loader'\n\n/** Loader Example */\nexport default function ExampleLoader() {\n  return <Loader />\n}\n","title":""}]},{"name":"Modal","description":"","props":{"background":{"type":{"name":"string"},"required":false,"description":"The style attribute to apply a background to the modal","defaultValue":{"value":"null","computed":false}},"children":{"type":{"name":"node"},"required":true,"description":"The content of the modal"},"action":{"type":{"name":"shape","value":{"label":{"name":"string","required":true},"disabled":{"name":"bool","required":false},"callback":{"name":"func","required":false},"type":{"name":"string","required":false}}},"required":false,"description":"The main action settings {**label**: the label of the button,  **disabled** to disable the button, **callback** a callback to invoke on action click, before dismiss, **type** to set the action button type (danger, primary)}","defaultValue":{"value":"null","computed":false}},"dismissible":{"type":{"name":"bool"},"required":false,"description":"Verifies if the modal should be dismissed right after the action is executed, in case we are doing a validation inside the modal before closing it","defaultValue":{"value":"true","computed":false}},"secondaryAction":{"type":{"name":"shape","value":{"label":{"name":"string","required":true},"disabled":{"name":"bool","required":false},"callback":{"name":"func","required":false}}},"required":false,"description":"The secondary action settings {**label**: the label of the button, **disabled** to disable the button, **callback** a callback to invoke on action click, before dismiss","defaultValue":{"value":"null","computed":false}},"cookie":{"type":{"name":"shape","value":{"days":{"name":"number","required":false},"store":{"name":"string","required":true},"key":{"name":"string","required":true}}},"required":false,"description":"The cookie settings if it's omitted the modal won't use cookies {**days**: expire time of the cookie in days, **store**, usually document.cookie, **key**: the key of the cookie}","defaultValue":{"value":"null","computed":false}},"footer":{"type":{"name":"node"},"required":false,"description":"","defaultValue":{"value":"null","computed":false}},"previousFocus":{"type":{"name":"node"},"required":false,"description":"this element will regain focus on modal close","defaultValue":{"value":"null","computed":false}},"width":{"type":{"name":"string"},"required":false,"description":"set a custom modal width, accepts 'wide' as a preset for 730px","defaultValue":{"value":"null","computed":false}},"noBackground":{"type":{"name":"bool"},"required":false,"description":"remove the background so only the content shows","defaultValue":{"value":"false","computed":false}},"closeButton":{"type":{"name":"shape","value":{"callback":{"name":"func","required":true}}},"required":false,"description":"adds a close icon, the function to close remains in your app","defaultValue":{"value":"null","computed":false}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport * as Styles from './style'\nimport Button from '../Button'\nimport { Cross } from '../Icon'\n\nfunction setCookie(cookie, cookieKey, days, value) {\n  const expiresInDays = days * 24 * 60 * 60\n  document.cookie = `${cookieKey}=${value}; max-age=${expiresInDays}; ${cookie}`\n}\n\nexport function hasDismissedCookie(cookie, cookieKey) {\n  const match = cookie.match(new RegExp(`${cookieKey}=dismissed;*`))\n  if (match) {\n    return true\n  }\n  return false\n}\n\nclass Modal extends React.Component {\n    constructor(props) {\n    super(props)\n    if (props.cookie) {\n      this.state = {\n        dismissed: hasDismissedCookie(props.cookie.store, props.cookie.store),\n      }\n    }\n  }\n\n  componentDidMount() {\n        if (this.ctaButton) {\n            this.ctaButton.focus()\n    }\n        if (this.modal) {\n            this.modal.addEventListener('keydown', this.onKeyDown)\n            this.modal.focus()\n            if (this.props.closeButton) {\n                this.container.addEventListener('click', (e) => this.clickToClose(e))\n      }\n    }\n  }\n\n  componentWillUnmount() {\n        if (this.modal) {\n            this.modal.removeEventListener('keydown', this.onKeyDown)\n    }\n  }\n\n    onKeyDown = (event) => {\n    // ESC\n    if (event.which === 27) {\n      event.preventDefault()\n      event.stopPropagation()\n            if (this.props.closeButton) {\n                this.props.closeButton.callback()\n      }\n      this.dismiss()\n    }\n  }\n\n    validateAction = (action) => {\n    if (action && action.label && action.callback) {\n      return true\n    }\n    return false\n  }\n\n    handleAction(action) {\n    if (action.callback) {\n      action.callback()\n    }\n        if (this.props.dismissible) {\n      this.dismiss()\n    }\n  }\n\n    clickToClose(e) {\n        if (e.target !== this.container) return\n        this.props.closeButton.callback()\n    this.dismiss()\n  }\n\n  /** this must be invoked to properly dismiss the modal */\n  dismiss() {\n        const { cookie } = this.props\n    this.setState({ dismissed: true })\n    if (cookie) {\n      setCookie(cookie.store, cookie.key, cookie.days, 'dismissed')\n    }\n        if (this.props.previousFocus && this.props.previousFocus.current) {\n            this.props.previousFocus.current.focus()\n    }\n  }\n\n  render() {\n    const {\n      children,\n            background,\n            action,\n            secondaryAction,\n            footer,\n            width,\n            noBackground,\n            closeButton,\n    } = this.props\n\n        if (this.state && this.state.dismissed) {\n      return null\n    }\n\n    return (\n            <Styles.Container ref={(container) => (this.container = container)}>\n        <Styles.Modal\n          background={background}\n                    ref={(modal) => (this.modal = modal)}\n          width={width}\n                    tabIndex=\"0\" // this needs to have a tabIndex so that it can listen for the ESC key\n          noBackground={noBackground}\n        >\n          {closeButton && (\n            <Styles.IconContainer\n              onClick={() => {\n                this.handleAction(closeButton)\n              }}\n                            noBackground={noBackground}\n            >\n              <Cross size=\"large\" />\n            </Styles.IconContainer>\n          )}\n          {children}\n          <Styles.Footer background={background}>\n            {footer}\n            {this.validateAction(secondaryAction) && (\n                            <Button\n                type=\"text\"\n                onClick={() => {\n                  this.handleAction(secondaryAction)\n                }}\n                disabled={secondaryAction.disabled}\n                label={secondaryAction.label}\n              />\n            )}\n            {this.validateAction(action) && (\n                            <Button\n                                ref={(ctaButton) => (this.ctaButton = ctaButton)}\n                type={action.type || 'primary'}\n                onClick={() => {\n                  this.handleAction(action)\n                }}\n                disabled={action.disabled}\n                label={action.label}\n              />\n            )}\n          </Styles.Footer>\n        </Styles.Modal>\n      </Styles.Container>\n    )\n  }\n}\n\nModal.propTypes = {\n  /** The style attribute to apply a background to the modal */\n  background: PropTypes.string,\n  /** The content of the modal */\n  children: PropTypes.node.isRequired,\n  /** The main action settings {**label**: the label of the button,  **disabled** to disable the button, **callback** a callback to invoke on action click, before dismiss, **type** to set the action button type (danger, primary)} */\n  action: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    disabled: PropTypes.bool,\n    callback: PropTypes.func,\n    type: PropTypes.string,\n  }),\n  /** Verifies if the modal should be dismissed right after the action is executed, in case we are doing a validation inside the modal before closing it */\n  dismissible: PropTypes.bool,\n  /** The secondary action settings {**label**: the label of the button, **disabled** to disable the button, **callback** a callback to invoke on action click, before dismiss */\n  secondaryAction: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    disabled: PropTypes.bool,\n    callback: PropTypes.func,\n  }),\n  /** The cookie settings if it's omitted the modal won't use cookies {**days**: expire time of the cookie in days, **store**, usually document.cookie, **key**: the key of the cookie} */\n  cookie: PropTypes.shape({\n    days: PropTypes.number,\n    store: PropTypes.string.isRequired,\n    key: PropTypes.string.isRequired,\n  }),\n  footer: PropTypes.node,\n  /** this element will regain focus on modal close */\n  previousFocus: PropTypes.node,\n  /** set a custom modal width, accepts 'wide' as a preset for 730px */\n  width: PropTypes.string,\n  /** remove the background so only the content shows */\n  noBackground: PropTypes.bool,\n  /** adds a close icon, the function to close remains in your app */\n  closeButton: PropTypes.shape({\n    callback: PropTypes.func.isRequired,\n  }),\n}\n\nModal.defaultProps = {\n  background: null,\n  cookie: null,\n  action: null,\n  secondaryAction: null,\n  footer: null,\n  previousFocus: null,\n  dismissible: true,\n  width: null,\n  noBackground: false,\n  closeButton: null,\n}\n\nexport default Modal\n","level":1,"id":"modal","parentName":"ui","examples":[{"name":"basic-modal","description":"Modal","methods":[],"code":"import React, { useState } from 'react'\nimport Modal from '@bufferapp/ui/Modal'\nimport Text from '@bufferapp/ui/Text'\nimport Button from '@bufferapp/ui/Button'\n\n/** Modal */\nexport default function ModalTest() {\n  const [modalOpen, openModal] = useState(false)\n  return (\n    <div style={{ width: '100%', height: '400px', position: 'relative' }}>\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          openModal(true)\n        }}\n        label=\"Bring the modal!\"\n      />\n      {modalOpen && (\n        <Modal\n          action={{ label: 'It has already happened', disabled: true }}\n          secondaryAction={{ label: 'Close' }}\n          footer={<Text type=\"p\">Optional footer text!</Text>}\n          closeButton={{ callback: () => openModal(false) }}\n        >\n          <div>\n            <div style={{ padding: '0 16px' }}>\n              <Text type=\"h2\">Forty-two</Text>\n            </div>\n            <div\n              style={{\n                background: '#F5F5F5',\n                width: '100%',\n                padding: '16px',\n                boxSizing: 'border-box',\n              }}\n            >\n              <Text type=\"p\">\n                There is a theory which states that if ever anyone discovers\n                exactly what the Universe is for and why it is here, it will\n                instantly disappear and be replaced by something even more\n                bizarre and inexplicable.{' '}\n              </Text>\n            </div>\n          </div>\n        </Modal>\n      )}\n    </div>\n  )\n}\n","title":""},{"name":"focus_reset","description":"Reset focus on dismiss","methods":[],"code":"import React, { useState } from 'react'\nimport Modal from '@bufferapp/ui/Modal'\nimport Text from '@bufferapp/ui/Text'\nimport Button from '@bufferapp/ui/Button'\n\n/** Reset focus on dismiss */\nexport default function ModalTest() {\n  const previousFocusRef = React.createRef()\n  const [modalOpen, openModal] = useState(false)\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '400px',\n        position: 'relative',\n        padding: '16px',\n        boxSizing: 'border-box',\n      }}\n    >\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          openModal(true)\n        }}\n        label=\"Eyes on me!\"\n        ref={previousFocusRef}\n      />\n      {modalOpen && (\n        <Modal\n          action={{ label: 'Don’t Panic!', callback: () => {} }}\n          previousFocus={previousFocusRef}\n        >\n          <div>\n            <div\n              style={{\n                width: '100%',\n                padding: '16px',\n                boxSizing: 'border-box',\n              }}\n            >\n              <Text type=\"h3\">\n                Curiously enough, the only thing that went through the mind of\n                the bowl of petunias as it fell was Oh no, not again. Many\n                people have speculated that if we knew exactly why the bowl of\n                petunias had thought that we would know a lot more about the\n                nature of the Universe than we do now.\n              </Text>\n            </div>\n          </div>\n        </Modal>\n      )}\n    </div>\n  )\n}\n","title":""},{"name":"form-modal","description":"Form modal, prevent dismiss until","methods":[],"code":"import React, { useState } from 'react'\nimport Modal from '@bufferapp/ui/Modal'\nimport Text from '@bufferapp/ui/Text'\nimport Input from '@bufferapp/ui/Input'\nimport Button from '@bufferapp/ui/Button'\n\n/** Form modal, prevent dismiss until */\nexport default function FormModalTest() {\n  const [modalOpen, openModal] = useState(false)\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '400px',\n        position: 'relative',\n        padding: '16px',\n        boxSizing: 'border-box',\n      }}\n    >\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          openModal(true)\n        }}\n        label=\"Bring the modal!\"\n      />\n      {modalOpen && (\n        <Modal\n          action={{ label: \"Don't close yet!\" }}\n          secondaryAction={{\n            label: 'Cancel',\n            callback: () => openModal(false),\n          }}\n          dismissible={false}\n        >\n          <div\n            style={{ width: '100%', padding: '16px', boxSizing: 'border-box' }}\n          >\n            <Text type=\"h3\">Your name here</Text>\n            <Input\n              type=\"input\"\n              onChange={() => {}}\n              name=\"foo\"\n              placeholder=\"placeholder text\"\n            />\n          </div>\n        </Modal>\n      )}\n    </div>\n  )\n}\n","title":""},{"name":"with-background","description":"Modal with background","methods":[],"code":"import React, { useState } from 'react'\nimport Modal from '@bufferapp/ui/Modal'\nimport Text from '@bufferapp/ui/Text'\nimport Button from '@bufferapp/ui/Button'\n\n/** Modal with background */\nexport default function ModalTest() {\n  const [modalOpen, openModal] = useState(false)\n  return (\n    <div style={{ width: '100%', height: '700px', position: 'relative' }}>\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          openModal(true)\n        }}\n        label=\"Bring the modal!\"\n      />\n      {modalOpen && (\n        <Modal\n          background=\"url('https://s3.amazonaws.com/buffer-analyze/images/modal-header-background.png') no-repeat\"\n          action={{\n            label: \"Let's do it\",\n            action: () => {\n              console.info('action')\n            },\n          }}\n        >\n          <div>\n            <div style={{ width: '320px' }}>\n              <Text type=\"h2\">We have a new look!</Text>\n              <Text type=\"p\">\n                We’ve moved a few things around in the interface which we\n                believe will best set up Analyze for the future. Take a look\n                around!\n              </Text>\n            </div>\n            <img\n              src=\"https://s3.amazonaws.com/buffer-analyze/images/modal-new-layout.png\"\n              alt=\"The new navigation layout\"\n              width=\"480px\"\n              height=\"298px\"\n            />\n          </div>\n        </Modal>\n      )}\n    </div>\n  )\n}\n","title":""},{"name":"with-carousel","description":"With Carousel Modal","methods":[],"code":"import React, { useState } from 'react'\nimport Modal from '@bufferapp/ui/Modal'\nimport Button from '@bufferapp/ui/Button'\nimport Carousel from '@bufferapp/ui/Carousel'\n\n/** With Carousel Modal */\nexport default function ModalTest() {\n  const [modalOpen, openModal] = useState(false)\n  return (\n    <div style={{ width: '100%', height: '400px', position: 'relative' }}>\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          openModal(true)\n        }}\n        label=\"Bring the modal!\"\n      />\n      {modalOpen && (\n        <Modal\n          width=\"1100px\"\n          closeButton={{ callback: () => openModal(false) }}\n          noBackground\n          dismissible\n        >\n          <div>\n            <Carousel width=\"1000px\">\n              <div\n                style={{\n                  height: '500px',\n                  width: '1000px',\n                  background:\n                    '#cecece url(\"https://picsum.photos/id/1002/1000/500\")',\n                  display: 'flex',\n                  color: 'white',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                  fontSize: '100px',\n                  fontWeight: 500,\n                }}\n              >\n                oh\n              </div>\n              <div\n                style={{\n                  height: '500px',\n                  width: '1000px',\n                  background:\n                    '#cecece url(\"https://picsum.photos/id/1052/1000/500\")',\n                  display: 'flex',\n                  color: 'white',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                  fontSize: '100px',\n                  fontWeight: 500,\n                }}\n              >\n                hi\n              </div>\n              <div\n                style={{\n                  height: '500px',\n                  width: '1000px',\n                  background:\n                    '#cecece url(\"https://picsum.photos/id/1032/1000/500\")',\n                  display: 'flex',\n                  color: 'white',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                  fontSize: '100px',\n                  fontWeight: 500,\n                }}\n              >\n                there\n              </div>\n            </Carousel>\n          </div>\n        </Modal>\n      )}\n    </div>\n  )\n}\n","title":""}]},{"name":"Nav Bar","description":"The NavBar is not consumed alone, but instead is used by the AppShell component. Go check out the AppShell component to learn more.","props":{"products":{"type":{"name":"arrayOf","value":{"name":"shape","value":{"id":{"name":"string","required":false},"isNew":{"name":"bool","required":false},"href":{"name":"string","required":false}}}},"required":false,"description":"The list of available products","defaultValue":{"value":"[]","computed":false}},"activeProduct":{"type":{"name":"enum","value":[{"value":"'publish'","computed":false},{"value":"'analyze'","computed":false},{"value":"'engage'","computed":false}]},"required":false,"description":"The currently active (highlighted) product in the `NavBar`.","defaultValue":{"value":"undefined","computed":true}},"user":{"type":{"name":"shape","value":{"name":{"name":"string","required":true},"email":{"name":"string","required":true},"avatar":{"name":"string","description":"If missing we will use Gravatar to get the user avatar by email","required":false},"ignoreMenuItems":{"name":"arrayOf","value":{"name":"string"},"description":"If missing we will use Gravatar to get the user avatar by email","required":false},"menuItems":{"name":"arrayOf","value":{"name":"shape","value":{"id":{"name":"string","required":true},"title":{"name":"string","required":true},"component":{"name":"func","required":false},"hasDivider":{"name":"bool","required":false},"onItemClick":{"name":"func","required":false}}},"required":true}}},"required":true,"description":""},"helpMenuItems":{"type":{"name":"arrayOf","value":{"name":"shape","value":{"id":{"name":"string","required":true},"title":{"name":"string","required":true},"component":{"name":"node","required":false},"hasDivider":{"name":"bool","required":false},"onItemClick":{"name":"func","required":false}}}},"required":false,"description":"","defaultValue":{"value":"null","computed":false}},"isImpersonation":{"type":{"name":"bool"},"required":false,"description":"","defaultValue":{"value":"false","computed":false}},"onLogout":{"type":{"name":"func"},"required":false,"description":"","defaultValue":{"value":"undefined","computed":true}},"displaySkipLink":{"type":{"name":"bool"},"required":false,"description":"","defaultValue":{"value":"false","computed":false}},"orgSwitcher":{"type":{"name":"shape","value":{"title":{"name":"string","required":true},"menuItems":{"name":"arrayOf","value":{"name":"shape","value":{"id":{"name":"string","required":true},"title":{"name":"string","required":true},"selected":{"name":"bool","required":true},"onItemClick":{"name":"func","required":false}}},"required":true}}},"required":false,"description":"Optional menu for selecting the user's organization","defaultValue":{"value":"undefined","computed":true}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport {\n  Cross,\n  Info as InfoIcon,\n  ArrowLeft,\n  Person as PersonIcon,\n  Instagram as InstagramIcon,\n  Twitter as TwitterIcon,\n  Facebook as FacebookIcon,\n  Pinterest as PinterestIcon,\n  LinkedIn as LinkedInIcon,\n} from '../Icon'\n\nimport {\n  gray,\n  blueDarker,\n  grayLight,\n  grayLighter,\n  grayDark,\n} from '../style/colors'\n\nimport { fontWeightMedium, fontFamily } from '../style/fonts'\n\nimport Link from '../Link'\nimport DropdownMenu from '../DropdownMenu'\n\nimport BufferLogo from './BufferLogo'\nimport NavBarMenu from './NavBarMenu/NavBarMenu'\nimport NavBarProducts from './NavBarProducts/NavBarProducts'\n\nexport function getProductPath(baseUrl) {\n  const result = baseUrl.match(/https*:\\/\\/(.+)\\.buffer\\.com/)\n  let productPath = baseUrl\n  if (result instanceof Array) {\n    ;[, productPath] = result\n  }\n  return productPath\n}\n\nfunction getRedirectUrl(baseUrl) {\n  const productPath = getProductPath(baseUrl)\n  return `https://${productPath}.buffer.com`\n}\n\nexport function getLogoutUrl(baseUrl = '') {\n  const productPath = getProductPath(baseUrl)\n  return `https://login${\n    productPath.includes('local') ? '.local' : ''\n  }.buffer.com/logout?redirect=${getRedirectUrl(baseUrl)}`\n}\n\nexport function getAccountUrl(baseUrl = '', user) {\n  return `https://account.buffer.com?redirect=${getRedirectUrl(\n    baseUrl,\n  )}&username=${encodeURI(user.name)}`\n}\n\nexport const ORG_SWITCHER = 'org_switcher'\n\nexport function getStopImpersonationUrl() {\n  const { hostname } = window.location\n  if (!hostname.endsWith('buffer.com')) {\n    return null\n  }\n\n  return `https://admin${\n    hostname.includes('local') ? '-next.local' : ''\n  }.buffer.com/clearImpersonation`\n}\n\nconst NavBarStyled = styled.nav`\n  background: #fff;\n  border-bottom: 1px solid ${gray};\n  box-shadow: 0 1px 10px -5px rgba(0, 0, 0, 0.15);\n  display: flex;\n  height: 56px;\n  justify-content: space-between;\n  position: relative;\n  width: 100vw;\n`\n\nconst NavBarLeft = styled.div`\n  display: flex;\n`\nconst NavBarRight = styled.nav`\n  display: flex;\n`\n\nconst NavBarHelp = styled.a`\n  align-items: center;\n  color: #fff;\n  color: ${(props): string => (props.  \nactive ? blueDarker : grayDark)};\n  display: flex;\n  font-size: 16px;\n  font-family: ${fontFamily};\n  font-weight: ${fontWeightMedium};\n  height: 100%;\n  padding: 0 24px;\n  position: relative;\n  text-decoration: none;\n  z-index: 2;\n  &:hover {\n    color: ${(props): string => (props.    \nactive ? blueDarker : grayDark)};\n    background-color: ${grayLighter};\n  }\n  cursor: pointer;\n`\n\nconst NavBarHelpText = styled.span`\n  margin-left: 8px;\n`\n\nconst NavBarVerticalRule = styled.div`\n  background-color: ${grayLight};\n  height: 24px;\n  margin-left: -1px;\n  margin-right: -1px;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 1px;\n  z-index: 1;\n`\n\n/**\n * A11Y feature: A skip to main content link appears when a user is on a screen reader\n * and the link is in focus. To work properly, each page will need to have an element with the id main\n * example: <main id=\"main\"></main> This feature is optional\n */\nconst SkipToMainLink = styled(Link)`\n  position: absolute;\n  top: -1000px;\n  left: -1000px;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n\n  :focus {\n    left: auto;\n    top: auto;\n    position: relative;\n    height: auto;\n    width: auto;\n    overflow: visible;\n    margin: auto;\n    margin-left: 10px;\n  }\n`\n\nexport function appendMenuItem(ignoreMenuItems, menuItem) {\n  if (!ignoreMenuItems) {\n    return menuItem\n  }\n\n  return ignoreMenuItems.includes(menuItem.id) ? null : menuItem\n}\n\nfunction getNetworkIcon(item) {\n  if (!item.network) return null\n\n  switch (item.network) {\n    case 'instagram':\n      return <InstagramIcon size=\"medium\" />\n    case 'twitter':\n      return <TwitterIcon size=\"medium\" />\n    case 'facebook':\n      return <FacebookIcon size=\"medium\" />\n    case 'pinterest':\n      return <PinterestIcon size=\"medium\" />\n    case 'linkedin':\n      return <LinkedInIcon size=\"medium\" />\n    default:\n      break\n  }\n}\n\nexport function appendOrgSwitcher(orgSwitcher) {\n  if (!orgSwitcher || !orgSwitcher.menuItems) {\n    return []\n  }\n\n    return orgSwitcher.menuItems.map((item, index) => {\n    item.type = ORG_SWITCHER\n    if (orgSwitcher.title && index === 0) {\n      item.hasDivider = true\n      item.dividerTitle = orgSwitcher.title\n    }\n    if (item.subItems) {\n            item.subItems.forEach((subItem) => {\n        subItem.icon = getNetworkIcon(subItem)\n      })\n    }\n    if (!item.subItems || item.subItems.length === 0) {\n      item.defaultTooltipMessage = 'No channels connected yet.'\n    }\n\n    return item\n  })\n}\n\n/**\n * The NavBar is not consumed alone, but instead is used by the AppShell component. Go check out the AppShell component to learn more.\n */\nclass NavBar extends React.Component {\n    shouldComponentUpdate(nextProps) {\n    return (\n            nextProps.user.name !== this.props.user.name ||\n            nextProps.user.email !== this.props.user.email ||\n            nextProps.isImpersonation !== this.props.isImpersonation ||\n            nextProps.products !== this.props.products ||\n            nextProps.orgSwitcher !== this.props.orgSwitcher\n    )\n  }\n\n  render() {\n    const {\n            products,\n            activeProduct,\n            user,\n            helpMenuItems,\n            onLogout,\n            displaySkipLink,\n            isImpersonation,\n            orgSwitcher,\n    } = this.props\n\n    const orgSwitcherHasItems =\n      orgSwitcher && orgSwitcher.menuItems && orgSwitcher.menuItems.length > 0\n\n    return (\n      <NavBarStyled aria-label=\"Main menu\">\n        <NavBarLeft>\n          {displaySkipLink && (\n            <SkipToMainLink href=\"#main\">Skip to main content</SkipToMainLink>\n          )}\n          <BufferLogo />\n          <NavBarVerticalRule />\n          <NavBarProducts products={products} activeProduct={activeProduct} />\n        </NavBarLeft>\n        <NavBarRight>\n          {helpMenuItems && (\n            <DropdownMenu\n                            xPosition=\"right\"\n              ariaLabel=\"Help Menu\"\n              ariaLabelPopup=\"Help\"\n              menubarItem={\n                <NavBarHelp>\n                  <InfoIcon />\n                  <NavBarHelpText>Help</NavBarHelpText>\n                </NavBarHelp>\n              }\n              items={helpMenuItems}\n            />\n          )}\n          <NavBarVerticalRule />\n          <DropdownMenu\n                        xPosition=\"right\"\n            ariaLabel=\"Account Menu\"\n            ariaLabelPopup=\"Account\"\n            horizontalOffset=\"-16px\"\n            isImpersonation={isImpersonation}\n            menubarItem={\n              <NavBarMenu user={user} isImpersonation={isImpersonation} />\n            }\n            items={[\n              ...appendOrgSwitcher(orgSwitcher),\n              appendMenuItem(user.ignoreMenuItems, {\n                id: 'account',\n                title: 'Account',\n                icon: <PersonIcon color={gray} />,\n                hasDivider: orgSwitcherHasItems,\n                onItemClick: () => {\n                  window.location.assign(\n                                        getAccountUrl(window.location.href, this.props.user),\n                  )\n                },\n              }),\n              ...user.menuItems,\n              appendMenuItem(\n                user.ignoreMenuItems,\n                isImpersonation\n                  ? {\n                      id: 'Stop Impersonation',\n                      title: 'Stop Impersonation',\n                      icon: <Cross color={gray} />,\n                      hasDivider: user.menuItems && user.menuItems.length > 0,\n                      onItemClick: () => {\n                                                window.location.assign(getStopImpersonationUrl())\n                      },\n                    }\n                  : {\n                      id: 'logout',\n                      title: 'Logout',\n                      icon: <ArrowLeft color={gray} />,\n                      hasDivider: user.menuItems && user.menuItems.length > 0,\n                      onItemClick: () => {\n                        if (typeof onLogout === 'function') onLogout()\n                        window.location.assign(\n                          getLogoutUrl(window.location.href),\n                        )\n                      },\n                    },\n              ),\n            ].filter((e) => e)}\n          />\n        </NavBarRight>\n      </NavBarStyled>\n    )\n  }\n}\n\nNavBar.propTypes = {\n  /** The list of available products */\n  products: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      isNew: PropTypes.bool,\n      href: PropTypes.string,\n    }),\n  ),\n\n  /** The currently active (highlighted) product in the `NavBar`. */\n  activeProduct: PropTypes.oneOf(['publish', 'analyze', 'engage']),\n\n  user: PropTypes.shape({\n    name: PropTypes.string.isRequired,\n    email: PropTypes.string.isRequired,\n    /** If missing we will use Gravatar to get the user avatar by email */\n    avatar: PropTypes.string,\n    /** If missing we will use Gravatar to get the user avatar by email */\n    ignoreMenuItems: PropTypes.arrayOf(PropTypes.string),\n    menuItems: PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string.isRequired,\n        title: PropTypes.string.isRequired,\n        component: PropTypes.func,\n        hasDivider: PropTypes.bool,\n        onItemClick: PropTypes.func,\n      }),\n    ).isRequired,\n  }).isRequired,\n  helpMenuItems: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      component: PropTypes.node,\n      hasDivider: PropTypes.bool,\n      onItemClick: PropTypes.func,\n    }),\n  ),\n  isImpersonation: PropTypes.bool,\n\n  onLogout: PropTypes.func,\n  displaySkipLink: PropTypes.bool,\n\n  /** Optional menu for selecting the user's organization */\n  orgSwitcher: PropTypes.shape({\n    title: PropTypes.string.isRequired,\n    menuItems: PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string.isRequired,\n        title: PropTypes.string.isRequired,\n        selected: PropTypes.bool.isRequired,\n        onItemClick: PropTypes.func,\n      }),\n    ).isRequired,\n  }),\n}\n\nNavBar.defaultProps = {\n  products: [],\n  activeProduct: undefined,\n  helpMenuItems: null,\n  isImpersonation: false,\n  onLogout: undefined,\n  displaySkipLink: false,\n  orgSwitcher: undefined,\n}\n\nexport default NavBar\n","level":1,"id":"navbar","parentName":"ui","examples":[]},{"name":"Non Dismissible Modal","description":"","props":{"children":{"type":{"name":"node"},"required":true,"description":""}},"code":"import React, { useRef, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Container, Modal } from '../SimpleModal/style'\nimport { useAnimation } from '../AnimationWrapper'\nimport { stageInCenter, stageOutCenter } from '../style/animations'\n\nconst NonDismissibleModal = ({ children }) => {\n  const modalRef = useRef(null)\n  const { AnimationWrapper, animationProps } = useAnimation({\n    stageInAnimation: stageInCenter,\n    stageOutAnimation: stageOutCenter,\n    duration: 400,\n  })\n\n  useEffect(() => {\n        modalRef.current.focus()\n  }, [])\n\n  return (\n    <Container role=\"dialog\" aria-modal=\"true\" NonDismissibleModal>\n      <AnimationWrapper {...animationProps}>\n        <Modal ref={modalRef}>{children}</Modal>\n      </AnimationWrapper>\n    </Container>\n  )\n}\n\nNonDismissibleModal.propTypes = {\n  children: PropTypes.node.isRequired,\n}\n\nexport default NonDismissibleModal\n","level":1,"id":"nondismissiblemodal","parentName":"ui","examples":[{"name":"NonDismissibleModal","description":"NonDismissibleModal Example","methods":[],"code":"import React, { useState, useEffect } from 'react'\nimport NonDismissibleModal from '@bufferapp/ui/NonDismissibleModal'\nimport Text from '@bufferapp/ui/Text'\nimport Button from '@bufferapp/ui/Button'\n\n/** NonDismissibleModal Example */\nexport default function ExampleSimpleModal() {\n  const [modalOpen, openModal] = useState(false)\n\n  useEffect(() => {\n    const selfDestroy = setTimeout(() => {\n      openModal(false)\n    }, 3000)\n\n    return () => {\n      clearInterval(selfDestroy)\n    }\n  }, [modalOpen])\n\n  return (\n    <div>\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          openModal(true)\n        }}\n        label=\"Bring the modal!\"\n      />\n      {modalOpen && (\n        <NonDismissibleModal>\n          <div key=\"modal1\" style={{ width: '300px', padding: '30px' }}>\n            <Text type=\"p\">\n              This Modal will self destroy in\n              <b>{` `}3 seconds</b>\n            </Text>\n          </div>\n        </NonDismissibleModal>\n      )}\n    </div>\n  )\n}\n","title":""}]},{"name":"Notice","description":"","props":{"children":{"type":{"name":"node"},"required":true,"description":""},"dismiss":{"type":{"name":"func"},"required":false,"description":"","defaultValue":{"value":"null","computed":false}},"disableAnimation":{"type":{"name":"bool"},"required":false,"description":"doesn't use animation wrapper if true","defaultValue":{"value":"false","computed":false}},"type":{"type":{"name":"string"},"required":true,"description":"can be warning, note, alert, tip"}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { borderRadius } from '../style/borders'\nimport { fontSize } from '../style/fonts'\nimport Warning from '../Icon/Icons/Warning'\nimport Cross from '../Icon/Icons/Cross'\nimport Buffer from '../Icon/Icons/Buffer'\nimport {\n  grayDark,\n  grayLighter,\n  grayDarker,\n  redLightest,\n  redDark,\n  redDarker,\n  purpleDark,\n  purpleLightest,\n  purpleDarker,\n  yellowLightest,\n  yellowDark,\n  yellowDarker,\n} from '../style/colors'\nimport { useAnimation } from '../AnimationWrapper'\nimport { stageInRight, fadeOut } from '../style/animations'\n\nconst colorMap = {\n  alert: {\n    border: redDark,\n    background: redLightest,\n    color: redDarker,\n  },\n  warning: {\n    border: yellowDark,\n    background: yellowLightest,\n    color: yellowDarker,\n  },\n  note: {\n    border: grayDark,\n    background: grayLighter,\n    color: grayDarker,\n  },\n  tip: {\n    border: purpleDark,\n    background: purpleLightest,\n    color: purpleDarker,\n  },\n}\n\nconst NoticeWrapper = styled.div`\n  border: ${(props) =>\n    `1px solid ${\n            colorMap[props.type].border\n    }`};\n  color: ${(props) =>\n        colorMap[props.type].color};\n  background: ${(props) =>\n        colorMap[props.type].background};\n  border-radius: ${borderRadius};\n  font-size: ${fontSize};\n  padding: 8px ${({  \n dismiss }): string => (dismiss ? '28px' : '8px')} 8px 8px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  width: 100%;\n`\n\nconst WarningIcon = styled(Warning)`\n  display: block;\n  margin-right: 12px;\n  flex: 1 0 auto;\n  max-width: 16px;\n`\n\nconst BufferIcon = styled(Buffer)`\n  display: block;\n  margin-right: 12px;\n  flex: 1 0 auto;\n  max-width: 16px;\n`\n\nconst CloseButton = styled.button`\n  color: ${(props) =>\n        colorMap[props.type].color};\n  border: 0;\n  background: 0;\n  padding: 0;\n  margin: 0;\n  opacity: 0.8;\n  height: 16px;\n  position: absolute;\n  right: 16px;\n  &:hover {\n    color: ${(props) =>\n            colorMap[props.type].color};\n    opacity: 1;\n    cursor: pointer;\n  }\n`\n\nfunction Notice({ children, dismiss, type, className, disableAnimation }) {\n  // We always need to wrap the Notice with AnimationWrapper because the dismiss function\n  // shows the Notice based on the dismissed property. If the animation is disabled the properties\n  // that control the animation are removed from animationProps.\n  const {\n    AnimationWrapper,\n    dismiss: dismissAnimationWrapper,\n    animationProps,\n  } = useAnimation({\n    justify: 'flex-end',\n    stageInAnimation: disableAnimation ? undefined : stageInRight,\n    stageOutAnimation: disableAnimation ? undefined : fadeOut,\n    onDismiss: dismiss,\n  })\n\n  const noticeContent = (\n        <NoticeWrapper type={type} dismiss={dismiss} className={className}>\n      {type === 'warning' && <WarningIcon />}\n      {type === 'alert' && <WarningIcon />}\n      {type === 'tip' && <BufferIcon />}\n      {children}\n      {dismiss && (\n        <CloseButton type={type} onClick={() => dismissAnimationWrapper()}>\n          <Cross />\n        </CloseButton>\n      )}\n    </NoticeWrapper>\n  )\n\n  return (\n    <AnimationWrapper {...animationProps}>{noticeContent}</AnimationWrapper>\n  )\n}\n\nNotice.propTypes = {\n  children: PropTypes.node.isRequired,\n  dismiss: PropTypes.func,\n  /** doesn't use animation wrapper if true */\n  disableAnimation: PropTypes.bool,\n  /** can be warning, note, alert, tip */\n  type: PropTypes.string.isRequired,\n}\n\nNotice.defaultProps = {\n  dismiss: null,\n  disableAnimation: false,\n}\n\nexport default Notice\n","level":1,"id":"notice","parentName":"ui","examples":[{"name":"Notice","description":"Notice Example","methods":[],"code":"import React from 'react'\nimport Notice from '@bufferapp/ui/Notice'\nimport Text from '@bufferapp/ui/Text'\n\n/** Notice Example */\nexport default function ExampleNotice() {\n  return (\n    <Notice type=\"note\">\n      <Text>\n        We&apos;re actively working on improving this feature and would love\n        your feedback!\n      </Text>\n    </Notice>\n  )\n}\n","title":""},{"name":"NoticeDanger","description":"Notice Danger Example","methods":[],"code":"import React from 'react'\nimport Notice from '@bufferapp/ui/Notice'\nimport Text from '@bufferapp/ui/Text'\n\n/** Notice Danger Example */\nexport default function ExampleNotice() {\n  return (\n    // eslint-disable-next-line\n    <Notice type=\"alert\">\n      <Text>\n        We&apos;re aware of an issue and we&apos;re actively working to resolve\n        the situation\n      </Text>\n    </Notice>\n  )\n}\n","title":""},{"name":"NoticeDismissable","description":"Notice Dismissable","methods":[],"code":"import React from 'react'\nimport Notice from '@bufferapp/ui/Notice'\nimport Text from '@bufferapp/ui/Text'\n\n/** Notice Dismissable */\nexport default function ExampleNotice() {\n  return (\n    // eslint-disable-next-line\n    <Notice dismiss={() => console.log('dismissed!')} type=\"note\">\n      <Text>\n        We&apos;re actively working on improving this feature and would love\n        your feedback!\n      </Text>\n    </Notice>\n  )\n}\n","title":""},{"name":"NoticeDismissableNoAnimation","description":"Notice Dismissable without Animation","methods":[],"code":"import React from 'react'\nimport Notice from '@bufferapp/ui/Notice'\nimport Text from '@bufferapp/ui/Text'\n\n/** Notice Dismissable without Animation */\nexport default function ExampleNotice() {\n  return (\n    // eslint-disable-next-line\n    <Notice\n      dismiss={() => console.log('dismissed!')}\n      type=\"note\"\n      disableAnimation\n    >\n      <Text>\n        We&apos;re actively working on improving this feature and would love\n        your feedback!\n      </Text>\n    </Notice>\n  )\n}\n","title":""},{"name":"NoticeLongText","description":"Notice Long Text","methods":[],"code":"import React from 'react'\nimport Notice from '@bufferapp/ui/Notice'\nimport Text from '@bufferapp/ui/Text'\n\n/** Notice Long Text */\nexport default function ExampleNotice() {\n  return (\n    // eslint-disable-next-line\n    <Notice dismiss={() => console.log('dismissed!')} type=\"warning\">\n      <Text>\n        We&apos;re aware of an issue and we&apos;re actively working to resolve\n        the situation. Thanks for your patience, you&apos;re honeslty the very\n        best and this message is so long!\n      </Text>\n    </Notice>\n  )\n}\n","title":""},{"name":"NoticeTip","description":"Notice Tip Example","methods":[],"code":"import React from 'react'\nimport Notice from '@bufferapp/ui/Notice'\nimport Text from '@bufferapp/ui/Text'\n\n/** Notice Tip Example */\nexport default function ExampleNotice() {\n  return (\n    // eslint-disable-next-line\n    <Notice type=\"tip\">\n      <Text>\n        There&apos;s a huge upturn in Followers over the last week, try to\n        recreate some of that magic!\n      </Text>\n    </Notice>\n  )\n}\n","title":""},{"name":"NoticeWarning","description":"Notice Warning Example","methods":[],"code":"import React from 'react'\nimport Notice from '@bufferapp/ui/Notice'\nimport Text from '@bufferapp/ui/Text'\n\n/** Notice Warning Example */\nexport default function ExampleNotice() {\n  return (\n    // eslint-disable-next-line\n    <Notice type=\"warning\">\n      <Text>\n        We&apos;re aware of an issue and we&apos;re actively working to resolve\n        the situation\n      </Text>\n    </Notice>\n  )\n}\n","title":""}]},{"name":"Notification","description":"","props":{"text":{"type":{"name":"string"},"required":true,"description":"Text of the notification"},"onClose":{"type":{"name":"func"},"required":true,"description":"Callback function to execute when the notification closes"},"type":{"type":{"name":"enum","value":[{"value":"'action'","computed":false},{"value":"'text'","computed":false}]},"required":false,"description":"Type of the notification","defaultValue":{"value":"'text'","computed":false}},"action":{"type":{"name":"shape","value":{"label":{"name":"string","required":true},"disabled":{"name":"bool","required":false},"callback":{"name":"func","required":false}}},"required":false,"description":"The main action settings {**label**: the label of the button,  **disabled** to disable the button, **callback** a callback to invoke on action click, before dismiss","defaultValue":{"value":"undefined","computed":true}},"secondaryAction":{"type":{"name":"shape","value":{"label":{"name":"string","required":true},"disabled":{"name":"bool","required":false},"callback":{"name":"func","required":false}}},"required":false,"description":"The secondary action settings {**label**: the label of the button, **disabled** to disable the button, **callback** a callback to invoke on action click, before dismiss","defaultValue":{"value":"undefined","computed":true}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport {\n  Container,\n  Text,\n  Icon,\n  TextRow,\n  ButtonsRow,\n  ButtonStyled,\n} from './style'\nimport { useAnimation } from '../AnimationWrapper'\nimport { stageInTop, fadeOut } from '../style/animations'\n\nfunction Notification({ text, onClose, type, action, secondaryAction }) {\n  const {\n    AnimationWrapper,\n    dismiss: dismissAnimationWrapper,\n    animationProps,\n  } = useAnimation({\n    justify: 'flex-end',\n    stageInAnimation: stageInTop,\n    stageOutAnimation: fadeOut,\n    onDismiss: onClose,\n  })\n\n  return (\n    <AnimationWrapper {...animationProps}>\n      <Container>\n        <TextRow>\n          <Text>{text}</Text>\n          <Icon onClick={() => dismissAnimationWrapper()} />\n        </TextRow>\n        {type === 'action' && (\n          <ButtonsRow>\n            {action && (\n              <ButtonStyled\n                onClick={action.callback}\n                label={action.label}\n                type=\"text\"\n              />\n            )}\n            {secondaryAction && (\n              <ButtonStyled\n                onClick={secondaryAction.callback}\n                label={secondaryAction.label}\n                type=\"text\"\n              />\n            )}\n          </ButtonsRow>\n        )}\n      </Container>\n    </AnimationWrapper>\n  )\n}\n\nNotification.propTypes = {\n  /** Text of the notification */\n  text: PropTypes.string.isRequired,\n\n  /** Callback function to execute when the notification closes */\n  onClose: PropTypes.func.isRequired,\n\n  /** Type of the notification */\n  type: PropTypes.oneOf(['action', 'text']),\n\n  /** The main action settings {**label**: the label of the button,  **disabled** to disable the button, **callback** a callback to invoke on action click, before dismiss */\n  action: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    disabled: PropTypes.bool,\n    callback: PropTypes.func,\n  }),\n  /** The secondary action settings {**label**: the label of the button, **disabled** to disable the button, **callback** a callback to invoke on action click, before dismiss */\n  secondaryAction: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    disabled: PropTypes.bool,\n    callback: PropTypes.func,\n  }),\n}\n\nNotification.defaultProps = {\n  type: 'text',\n  action: undefined,\n  secondaryAction: undefined,\n}\n\nexport default Notification\n","level":1,"id":"notification","parentName":"ui","examples":[{"name":"Notification","description":"Notification with text","methods":[],"code":"import React from 'react'\nimport Notification from '@bufferapp/ui/Notification'\n\n/** Notification with text */\nexport default function ExampleNotification() {\n  return (\n    // the wrapping div is only for documentation example purposes\n    <div style={{ position: 'relative', height: '100px' }}>\n      <Notification text=\"There's been an error fetching data. Your access has expired. Please login again\" />\n    </div>\n  )\n}\n","title":""},{"name":"NotificationAction","description":"Notification with action buttons","methods":[],"code":"import React from 'react'\nimport Notification from '@bufferapp/ui/Notification'\n\n/** Notification with action buttons */\nexport default function ExampleNotification() {\n  return (\n    // the wrapping div is only for documentation example purposes\n    <div style={{ position: 'relative', height: '100px' }}>\n      <Notification\n        text=\"Conversation has been set to Pending\"\n        type=\"action\"\n        action={{ label: 'Undo' }}\n        secondaryAction={{ label: 'Go Back' }}\n      />\n    </div>\n  )\n}\n","title":""}]},{"name":"Progress Bar","description":"","props":{"progress":{"type":{"name":"string"},"required":true,"description":"Percentage of progress."},"className":{"type":{"name":"string"},"required":false,"description":"Class passed by the DOM element.","defaultValue":{"value":"undefined","computed":true}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport { ContainerStyled, ProgressStyled } from './style'\n\nconst ProgressBar = ({ progress, className }) => (\n  <ContainerStyled className={className}>\n    <ProgressStyled progress={progress} />\n  </ContainerStyled>\n)\n\nProgressBar.propTypes = {\n  /** Percentage of progress. */\n  progress: PropTypes.string.isRequired,\n  /** Class passed by the DOM element. */\n  className: PropTypes.string,\n}\n\nProgressBar.defaultProps = {\n  className: undefined,\n}\n\nexport default ProgressBar\n","level":1,"id":"progressbar","parentName":"ui","examples":[{"name":"DefaultProgressBar","description":"Progress Bar","methods":[],"code":"import React from 'react'\nimport ProgressBar from '@bufferapp/ui/ProgressBar'\n\n/** Progress Bar */\nexport default function ExampleProgressBar() {\n  return (\n    <div style={{ position: 'relative' }}>\n      <ProgressBar progress=\"50%\" />\n    </div>\n  )\n}\n","title":""}]},{"name":"Search","description":"Search input that filters the Select items and adds keyboard navigation","props":{"placeholder":{"type":{"name":"string"},"required":false,"description":"Search placeholder","defaultValue":{"value":"''","computed":false}},"onChange":{"type":{"name":"func"},"required":true,"description":"Function to call on search input change"},"isOpen":{"type":{"name":"bool"},"required":false,"description":"Is the select menu open","defaultValue":{"value":"false","computed":false}},"onClick":{"type":{"name":"func"},"required":false,"description":"Is onClick event","defaultValue":{"value":"() => {}","computed":false}},"height":{"type":{"name":"string"},"required":false,"description":"Input height","defaultValue":{"value":"'tall'","computed":false}},"clearSearchOnBlur":{"type":{"name":"bool"},"required":false,"description":"Should the search clear on blur","defaultValue":{"value":"false","computed":false}},"clearSearchOnFocus":{"type":{"name":"bool"},"required":false,"description":"Should the search clear on focus","defaultValue":{"value":"false","computed":false}},"onBlur":{"type":{"name":"func"},"required":false,"description":"Is onBlur event","defaultValue":{"value":"() => {}","computed":false}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport { SearchInput, SearchWrapper } from './style'\n\n/** Search input that filters the Select items and adds keyboard navigation */\nexport default class Search extends React.Component {\n  state = {\n    search: '',\n  }\n\n    componentDidUpdate(prevProps) {\n        if (prevProps.isOpen !== this.props.isOpen) {\n            setTimeout(() => this.inputRef.focus(), 50)\n    }\n  }\n\n    updateSearch = (search) => {\n    this.setState({\n      search,\n    })\n  }\n\n    onChange = (event) => {\n        const { onChange } = this.props\n    const search = event.target.value\n\n    onChange(search)\n    this.updateSearch(search)\n  }\n\n  clearSearch = () => {\n        const { onChange } = this.props\n\n    onChange('')\n    this.updateSearch('')\n  }\n\n  render() {\n    const {\n            placeholder,\n            onClick,\n            height,\n            clearSearchOnBlur,\n            clearSearchOnFocus,\n    } = this.props\n\n    const { search } = this.state\n\n    return (\n      <SearchWrapper>\n        <SearchInput\n          placeholder={placeholder}\n          type=\"text\"\n          value={search}\n                    ref={(inputRef) => (this.inputRef = inputRef)}\n          onChange={(event) => this.onChange(event)}\n          onClick={onClick}\n          onBlur={clearSearchOnBlur ? this.clearSearch : undefined}\n          onFocus={clearSearchOnFocus ? this.clearSearch : undefined}\n          height={height}\n        />\n      </SearchWrapper>\n    )\n  }\n}\n\nSearch.propTypes = {\n  /** Search placeholder */\n  placeholder: PropTypes.string,\n\n  /** Function to call on search input change */\n  onChange: PropTypes.func.isRequired,\n\n  /** Is the select menu open */\n  isOpen: PropTypes.bool,\n\n  /** Is onClick event */\n  onClick: PropTypes.func,\n\n  /** Input height */\n  height: PropTypes.string,\n\n  /** Should the search clear on blur */\n  clearSearchOnBlur: PropTypes.bool,\n\n  /** Should the search clear on focus */\n  clearSearchOnFocus: PropTypes.bool,\n\n  /** Is onBlur event */\n  onBlur: PropTypes.func,\n}\n\nSearch.defaultProps = {\n  placeholder: '',\n  height: 'tall',\n  isOpen: false,\n  clearSearchOnBlur: false,\n  clearSearchOnFocus: false,\n  onClick: () => {},\n  onBlur: () => {},\n}\n","level":1,"id":"search","parentName":"ui","examples":[]},{"name":"Segmented Control","description":"Segmented control used for quickly selecting between a small set of mutually exclusive options.\nThey work like a group of radio inputs in that no more than one may be selected at a time.\nSegmented controls are useful for scenarios where there are only a few options.\nIf you need to present many options, consider using another component such as a Select.","props":{"children":{"type":{"name":"node"},"required":true,"description":""}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport Option from './Option'\nimport { Container } from './style'\n\n/**\n * Segmented control used for quickly selecting between a small set of mutually exclusive options.\n * They work like a group of radio inputs in that no more than one may be selected at a time.\n * Segmented controls are useful for scenarios where there are only a few options.\n * If you need to present many options, consider using another component such as a Select.\n */\nconst SegmentedControl = ({ children }) => (\n  <Container role=\"group\">{children}</Container>\n)\n\nSegmentedControl.propTypes = {\n  children: PropTypes.node.isRequired,\n}\n\nSegmentedControl.defaultProps = {}\n\nSegmentedControl.Option = Option\n\nexport default SegmentedControl\n","level":1,"id":"segmentedcontrol","parentName":"ui","examples":[[{"name":"IconPosition","description":"Select Icon Position","methods":[],"code":"import React, { useState } from 'react'\nimport Select from '@bufferapp/ui/Select'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/**\n * Select Icon Position\n */\nexport default function ExampleIconPosition() {\n  const [selected, setSelected] = useState('facebook')\n  const [iconPosition, setIconPosition] = useState('left')\n\n    const handleSelect = (item) => {\n    setIconPosition(item.title)\n  }\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"textAndIcon\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n            iconPosition={iconPosition}\n          />\n        ))}\n      </SegmentedControl>\n      <div style={{ padding: '10px' }} />\n      <Select\n        onSelectClick={handleSelect}\n        label=\"Icon position\"\n        items={[\n          { id: '1', title: 'left' },\n          { id: '2', title: 'right' },\n          { id: '3', title: 'top' },\n          { id: '4', title: 'bottom' },\n        ]}\n        hideSearch\n      />\n    </div>\n  )\n}\n","title":"Interactive"}],[{"name":"SizeLarge","description":"Large","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/**\n * Large\n */\nexport default function ExampleSizeLarge() {\n  const [selected, setSelected] = useState('facebook')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"textAndIcon\"\n            size=\"large\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n","title":"Size"},{"name":"SizeNormal","description":"Normal","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/**\n * Normal\n */\nexport default function ExampleSizeNormal() {\n  const [selected, setSelected] = useState('facebook')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"textAndIcon\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n","title":"Size"},{"name":"SizeSmall","description":"Small","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/**\n * Small\n */\nexport default function ExampleSizeSmall() {\n  const [selected, setSelected] = useState('facebook')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"textAndIcon\"\n            size=\"small\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n","title":"Size"}],[{"name":"StateCustomDefault","description":"Custom default option","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    default: true,\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/**\n * Custom default option\n */\nexport default function ExampleStateDisabled() {\n  const [selected, setSelected] = useState('facebook')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"textAndIcon\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n","title":"State"},{"name":"StateCustomTooltip","description":"Custom tooltip message","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n    tooltip: \"I'm Facebook\",\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n    tooltip: \"I'm Pinterest\",\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n    tooltip: \"I'm Twitter\",\n  },\n]\n\n/**\n * Custom tooltip message\n */\nexport default function ExampleStateDisabled() {\n  const [selected, setSelected] = useState('facebook')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"textAndIcon\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n","title":"State"},{"name":"StateOptionDisabled","description":"Option disabled","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    disabled: true,\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/**\n * Option disabled\n */\nexport default function ExampleStateOptionDisabled() {\n  const [selected, setSelected] = useState('pinterest')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"textAndIcon\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={!disabled && value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n","title":"State"}],[{"name":"TypeIconOnly","description":"Icon only. Always shows tooltip.","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n    tooltip: 'Custom tooltip message',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/** Icon only. Always shows tooltip. */\nexport default function ExampleTypeIconOnly() {\n  const [selected, setSelected] = useState('facebook')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"icon\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n","title":"Type"},{"name":"TypeTextAndIcon","description":"Text and Icon","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/** Text and Icon */\nexport default function ExampleTypeTextAndIcon() {\n  const [selected, setSelected] = useState('facebook')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"textAndIcon\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n\n/** The value of the option to select by default. If the option is disabled,\n * or no defaultOption value is passed it will revert to the first\n * non-disabled option in the array. */\n","title":"Type"},{"name":"TypeTextOnly","description":"Text only","methods":[],"code":"import React, { useState } from 'react'\nimport SegmentedControl from '@bufferapp/ui/SegmentedControl'\nimport { Facebook, Pinterest, Twitter } from '@bufferapp/ui/Icon'\n\nconst options = [\n  {\n    label: 'Facebook',\n    icon: <Facebook />,\n    value: 'facebook',\n  },\n  {\n    label: 'Pinterest',\n    icon: <Pinterest />,\n    value: 'pinterest',\n  },\n  {\n    label: 'Twitter',\n    icon: <Twitter />,\n    value: 'twitter',\n  },\n]\n\n/** Text only */\nexport default function ExampleTypeTextOnly() {\n  const [selected, setSelected] = useState('facebook')\n\n  return (\n    <div style={{ display: 'inline-block' }}>\n      <SegmentedControl>\n        {options.map(({ disabled, icon, label, value, tooltip }, index) => (\n          <SegmentedControl.Option\n            key={`${value}-${index}`}\n            optionType=\"text\"\n            disabled={disabled}\n            icon={icon}\n            label={label}\n            value={value}\n            tooltip={tooltip}\n            selected={value === selected}\n            onClick={setSelected}\n          />\n        ))}\n      </SegmentedControl>\n    </div>\n  )\n}\n\n/** The value of the option to select by default. If the option is disabled,\n * or no defaultOption value is passed it will revert to the first\n * non-disabled option in the array. */\n","title":"Type"}]]},{"name":"Select","description":"Select component that opens a popup menu on click and displays items that can be selected","props":{"disabled":{"type":{"name":"bool"},"required":false,"description":"Is the button disabled","defaultValue":{"value":"undefined","computed":true}},"onSelectClick":{"type":{"name":"func"},"required":false,"description":"Function to call on selected item click","defaultValue":{"value":"undefined","computed":true}},"label":{"type":{"name":"string"},"required":false,"description":"Label to display on the Select button","defaultValue":{"value":"''","computed":false}},"items":{"type":{"name":"arrayOf","value":{"name":"shape","value":{"id":{"name":"string","required":false},"title":{"name":"string","required":false},"hideOnSearch":{"name":"bool","description":"If true, item will be hidden while searching","required":false}}}},"required":true,"description":"Items to display in the popup"},"isSplit":{"type":{"name":"bool"},"required":false,"description":"Is the Select component part of the Split Button","defaultValue":{"value":"false","computed":false}},"type":{"type":{"name":"enum","value":[{"value":"'primary'","computed":false},{"value":"'secondary'","computed":false}]},"required":false,"description":"Type of the select component","defaultValue":{"value":"'secondary'","computed":false}},"size":{"type":{"name":"enum","value":[{"value":"'small'","computed":false},{"value":"'large'","computed":false},{"value":"'medium'","computed":false}]},"required":false,"description":"Size of the Button","defaultValue":{"value":"'medium'","computed":false}},"xPosition":{"type":{"name":"enum","value":[{"value":"'right'","computed":false},{"value":"'left'","computed":false}]},"required":false,"description":"Position of the popup right or left","defaultValue":{"value":"'left'","computed":false}},"yPosition":{"type":{"name":"enum","value":[{"value":"'top'","computed":false},{"value":"'bottom'","computed":false}]},"required":false,"description":"Position of the popup top or bottom","defaultValue":{"value":"'bottom'","computed":false}},"horizontalOffset":{"type":{"name":"string"},"required":false,"description":"Offset the popup horizontally","defaultValue":{"value":"undefined","computed":true}},"icon":{"type":{"name":"node"},"required":false,"description":"Icon to show in the Button","defaultValue":{"value":"undefined","computed":true}},"hideSearch":{"type":{"name":"bool"},"required":false,"description":"Does the Select have a search bar","defaultValue":{"value":"false","computed":false}},"customButton":{"type":{"name":"func"},"required":false,"description":"Custom Button component","defaultValue":{"value":"undefined","computed":true}},"keyMap":{"type":{"name":"shape","value":{"id":{"name":"string","required":false},"title":{"name":"string","required":false}}},"required":false,"description":"Custom keys to used in the Items array","defaultValue":{"value":"undefined","computed":true}},"multiSelect":{"type":{"name":"bool"},"required":false,"description":"Can the select have multiple items selected","defaultValue":{"value":"false","computed":false}},"shortcutsEnabled":{"type":{"name":"bool"},"required":false,"description":"If false don't enable keyboard navigation","defaultValue":{"value":"true","computed":false}},"searchPlaceholder":{"type":{"name":"string"},"required":false,"description":"Search placeholder","defaultValue":{"value":"'Search'","computed":false}},"tooltip":{"type":{"name":"string"},"required":false,"description":"Tooltip to show on the component","defaultValue":{"value":"undefined","computed":true}},"isOpen":{"type":{"name":"bool"},"required":false,"description":"Should the component be opened","defaultValue":{"value":"false","computed":false}},"onClose":{"type":{"name":"func"},"required":false,"description":"Callback to be called when the Select menu gets closed","defaultValue":{"value":"undefined","computed":true}},"hasIconOnly":{"type":{"name":"bool"},"required":false,"description":"Does the button have only an icon and no label","defaultValue":{"value":"false","computed":false}},"marginTop":{"type":{"name":"string"},"required":false,"description":"Space between the dropdown and the button","defaultValue":{"value":"undefined","computed":true}},"hasCustomAction":{"type":{"name":"bool"},"required":false,"description":"Indicated whether the select has a custom action","defaultValue":{"value":"false","computed":false}},"onCustomItemClick":{"type":{"name":"func"},"required":false,"description":"The custom action item","defaultValue":{"value":"undefined","computed":true}},"customItemLabel":{"type":{"name":"string"},"required":false,"description":"A custom label for a custom item","defaultValue":{"value":"undefined","computed":true}},"hotKeys":{"type":{"name":"arrayOf","value":{"name":"shape","value":{"hotKey":{"name":"number","required":false},"onKeyPress":{"name":"func","required":false}}}},"required":false,"description":"An array of objects containing HotKeys","defaultValue":{"value":"undefined","computed":true}},"fullWidth":{"type":{"name":"bool"},"required":false,"description":"Is the select full width","defaultValue":{"value":"undefined","computed":true}},"capitalizeItemLabel":{"type":{"name":"bool"},"required":false,"description":"Should capitalize Item Label","defaultValue":{"value":"true","computed":false}},"isInputSearch":{"type":{"name":"bool"},"required":false,"description":"Boolean to check if the select is triggered by an input instead of a button","defaultValue":{"value":"false","computed":false}},"selectPopupVisible":{"type":{"name":"bool"},"required":false,"description":"Indicates if the select popup should be visible","defaultValue":{"value":"false","computed":false}},"noResultsCustomMessage":{"type":{"name":"string"},"required":false,"description":"Custom message to display when no results were found","defaultValue":{"value":"'No matches found'","computed":false}},"clearSearchOnBlur":{"type":{"name":"bool"},"required":false,"description":"Should clear the search field's value when the main input is blurred","defaultValue":{"value":"false","computed":false}},"searchInputProps":{"type":{"name":"shape","value":{}},"required":false,"description":"Prop","defaultValue":{"value":"{\n  clearSearchOnBlur: true,\n}","computed":false}},"textToLeft":{"type":{"name":"bool"},"required":false,"description":"Aligns text in Select to the left","defaultValue":{"value":"false","computed":false}},"onOpen":{"type":{"name":"func"},"required":false,"description":"onOpen function to fire when the Select menu is open","defaultValue":{"value":"null","computed":false}}},"code":"/* eslint-disable no-unused-expressions, react/no-unused-state */\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport helper from 'immutability-helper'\nimport SearchIcon from '../Icon/Icons/Search'\nimport {\n  Wrapper,\n  SelectStyled,\n  SelectItems,\n  SelectItemDivider,\n  SearchBarWrapper,\n  NoMatchesContainer,\n  CustomItemContainer,\n  SelectItemDividerTitle,\n} from './style'\nimport SelectItem from './SelectItem/SelectItem'\nimport Button from '../Button/Button'\nimport { ButtonSelect } from '../Button/style'\nimport ChevronDown from '../Icon/Icons/ChevronDown'\nimport Search from '../Search/Search'\n\n/** Select component that opens a popup menu on click and displays items that can be selected */\nexport default class Select extends React.Component {\n    static sameItems = (itemsA, itemsB) =>\n    itemsA.length === itemsB.length &&\n    itemsA.every(\n            (el, ix) =>\n        el &&\n        itemsB[ix] &&\n        el.id === itemsB[ix].id &&\n        el.title === itemsB[ix].title &&\n        el.selected === itemsB[ix].selected &&\n        el.disabled === itemsB[ix].disabled,\n    )\n\n  state = {\n        isOpen: this.props.isOpen,\n        items: this.props.items || [],\n        selectedItems: this.props.items || [],\n    isFiltering: false,\n    searchValue: '',\n    /* We've added the functionality of adding a custom item with an action so\n    we're using this value to handle keyboard events on that custom item. We\n    use it to determine if the custom item has focus and listen for up, down\n    and enter and well as highlighting on hover */\n    isCustomItemFocused: false,\n  }\n\n    static getDerivedStateFromProps(props, state) {\n    if (\n      props.items &&\n      !Select.sameItems(props.items, state.items) &&\n      !state.isFiltering\n    ) {\n      return { items: props.items, selectedItems: props.items }\n    }\n    return null\n  }\n\n  componentDidMount() {\n    // When the selector is open and users click anywhere on the page,\n    // the selector should close\n    // Set capture to true so an open select will close when another select gets opened\n    document.addEventListener('click', this.closePopover, true)\n\n    // catch the keypress to move the selected items up or down\n        this.selectNode &&\n            this.selectNode.addEventListener('keydown', this.keyDownPressed)\n  }\n\n    componentDidUpdate(prevProps, prevState) {\n    // Simulate button click if isOpen is being controlled\n        if (prevProps.isOpen !== this.props.isOpen) {\n      // focus the Select component in order to be able to catch the keyboard events\n            this.props.isOpen && this.onButtonClick()\n    }\n\n    if (\n      prevState.isOpen !== this.state.isOpen &&\n      this.state.isOpen &&\n            this.props.onOpen\n    ) {\n            this.props.onOpen()\n    }\n\n    const menuIsOpening = !prevState.isOpen && !!this.state.isOpen\n    const shouldFilterOnMenuOpen =\n            !this.props.clearSearchOnBlur && !!this.state.searchValue\n    if (menuIsOpening && shouldFilterOnMenuOpen) this.filterOnMenuOpen()\n\n    const menuIsClosing = !!prevState.isOpen && !this.state.isOpen\n        if (menuIsClosing && this.props.clearSearchOnBlur)\n      this.clearSearchOnMenuClose()\n  }\n\n  componentWillUnmount() {\n    document.removeEventListener('click', this.closePopover, true)\n        this.selectNode &&\n            this.selectNode.removeEventListener('keydown', this.keyDownPressed)\n  }\n\n  filterOnMenuOpen = () => {\n        if (this.searchInput) this.searchInput.updateSearch(this.state.searchValue)\n    this.onSearchChange(this.state.searchValue)\n  }\n\n  clearSearchOnMenuClose = () => {\n        if (this.searchInput) this.searchInput.updateSearch('')\n    this.onSearchChange('')\n  }\n\n    keyDownPressed = (e) => {\n        const { shortcutsEnabled, hotKeys } = this.props\n    if (!shortcutsEnabled) return\n\n    if (hotKeys) {\n            hotKeys.forEach((item) => {\n        if (e.which === item.hotKey) {\n          item.onKeyPress()\n        }\n      })\n    }\n\n    switch (e.which) {\n      case 40: // Arrow down\n        return this.handleKeyPress(e, this.onMoveDown)\n      case 38: // Arrow up\n        return this.handleKeyPress(e, this.onMoveUp)\n      case 13: // Enter\n        return this.handleKeyPress(e, this.onAddItem)\n      case 27: // Esc\n        return this.handleKeyPress(e, this.onClose)\n      default:\n        return null\n    }\n  }\n\n    handleKeyPress = (event, keyHandler) => {\n    event.preventDefault()\n    event.stopPropagation()\n    keyHandler(event)\n  }\n\n  // Close the popover\n    closePopover = (e) => {\n        if (this.selectNode && this.selectNode.contains(e.target)) {\n      return\n    }\n\n    const { isOpen } = this.state\n\n    if (isOpen) {\n      this.setState({\n        isOpen: false,\n        hoveredItem: undefined,\n      })\n    }\n  }\n\n    updateItemsInState = (items, option, index) =>\n    index > -1\n      ? helper(items, {\n          [index]: {\n            selected: { $set: !option.selected },\n          },\n        })\n      : items\n\n    handleSelectOption = (option, event) => {\n        const { onSelectClick, multiSelect } = this.props\n    const { items } = this.state\n    onSelectClick && onSelectClick(option, event)\n\n        const selectedIndex = items.findIndex((x) => x.selected === true)\n\n    const deselectItems =\n      !multiSelect && selectedIndex > -1\n        ? helper(items, {\n            [selectedIndex]: {\n              selected: { $set: false },\n            },\n          })\n        : items\n\n    const optionIndex = deselectItems.findIndex(\n            (x) => this.getItemId(x) === this.getItemId(option),\n    )\n\n    this.setState({\n      isOpen: multiSelect,\n      items: this.updateItemsInState(deselectItems, option, optionIndex),\n      // we need to copy the items to another array here in order to use that one during search\n      // filtering\n      selectedItems: this.updateItemsInState(\n        deselectItems,\n        option,\n        optionIndex,\n      ),\n    })\n  }\n\n    onClick = (e) => {\n    e.stopPropagation()\n    e.nativeEvent.stopImmediatePropagation()\n        if (this.props.isSplit && !this.props.disabled) {\n            this.onButtonClick(e)\n    }\n  }\n\n    onKeyUp = (e) => {\n    e.stopPropagation()\n    e.nativeEvent.stopImmediatePropagation()\n        if (this.props.isSplit && !this.props.disabled) {\n      const altPlusUp = e.altKey && ['Up', 'ArrowUp'].indexOf(e.key) >= 0\n      const altPlusDown = e.altKey && ['Down', 'ArrowDown'].indexOf(e.key) >= 0\n      const space = ['Space', ' '].indexOf(e.key) >= 0\n      const enter = ['Enter'].indexOf(e.key) >= 0\n      if (altPlusUp || altPlusDown || space || enter) {\n        e.preventDefault()\n                this.onButtonClick(e)\n      }\n    }\n  }\n\n  onButtonClick = () => {\n    const { isOpen } = this.state\n        const { isInputSearch, items } = this.props\n    this.setState(\n      {\n        isOpen: !isOpen,\n        items,\n      },\n      () => {\n                !isInputSearch && !isOpen && this.selectNode && this.selectNode.focus()\n        this.scrollToItem(\n                    this.itemsNode,\n          document.getElementById(this.getItemId(items[0])),\n        )\n      },\n    )\n  }\n\n  onMoveUp = () => {\n        const { items, isCustomItemFocused, hoveredItem } = this.state\n    const itemsLength = items.length\n\n    for (\n      let i = hoveredItem - 1;\n      i < itemsLength && itemsLength > 0 && i >= 0;\n      i -= 1\n    ) {\n      if (items[i]) {\n        this.setState({ hoveredItem: i % itemsLength })\n        this.scrollToItem(\n                    this.itemsNode,\n          document.getElementById(this.getItemId(items[i])),\n        )\n        break\n      }\n    }\n\n    if (isCustomItemFocused) {\n      this.setState({ isCustomItemFocused: false })\n    }\n  }\n\n  onMoveDown = () => {\n        const { items, hoveredItem } = this.state\n        const { hasCustomAction } = this.props\n    const itemsLength = items.length\n\n    if (itemsLength === 0 && hasCustomAction) {\n      this.setState({ isCustomItemFocused: true })\n    }\n    if (!hoveredItem) {\n      this.setState(\n        {\n          hoveredItem: 0,\n        },\n        () => this.updateHoveredItemPosition(hoveredItem, itemsLength, items),\n      )\n    } else {\n      this.updateHoveredItemPosition(hoveredItem, itemsLength, items)\n    }\n  }\n\n    onAddItem = (event) => {\n        const { multiSelect } = this.props\n        const { items, hoveredItem, isCustomItemFocused, searchValue } = this.state\n    const selectedItem = items[hoveredItem]\n\n    if (isCustomItemFocused) {\n            this.props.onCustomItemClick(searchValue)\n      this.setState({ isCustomItemFocused: false, isOpen: multiSelect })\n    }\n\n    if (selectedItem) {\n      selectedItem.onItemClick\n        ? this.handleSelectOption(selectedItem, selectedItem.onItemClick)\n        : this.handleSelectOption(selectedItem, event)\n    }\n  }\n\n    updateHoveredItemPosition = (hoveredItem, itemsLength, items) => {\n    for (\n      let i = hoveredItem + 1;\n      i <= itemsLength && itemsLength > 0 && i > 0;\n      i += 1\n    ) {\n      if (i === itemsLength) {\n        this.setState({ hoveredItem: 0 })\n        this.scrollToItem(\n                    this.itemsNode,\n          document.getElementById(this.getItemId(items[i])),\n        )\n        break\n      }\n      if (items[i]) {\n        this.setState({ hoveredItem: i % itemsLength })\n        this.scrollToItem(\n                    this.itemsNode,\n          document.getElementById(this.getItemId(items[i])),\n        )\n        break\n      }\n    }\n  }\n\n    scrollToItem = (parent, child) => {\n    if (!parent || !child) return\n\n    // Where is the parent on page\n    const parentRect = parent.getBoundingClientRect()\n    // What can you see?\n    const parentViewableArea = {\n      height: parent.clientHeight,\n      width: parent.clientWidth,\n    }\n\n    // Where is the child\n    const childRect = child.getBoundingClientRect()\n    // Is the child viewable?\n    const isViewable =\n      childRect.top >= parentRect.top &&\n      childRect.top <= parentRect.top + parentViewableArea.height\n\n    // if you can't see the child try to scroll parent\n    if (!isViewable) {\n      // scroll by offset relative to parent\n      parent.scrollTop = childRect.top + parent.scrollTop - parentRect.top\n    }\n  }\n\n    findItemInState = (item) => {\n    const { selectedItems } = this.state\n        return selectedItems.find((x) => this.getItemId(x) === this.getItemId(item))\n  }\n\n    onSearchChange = (searchValue) => {\n        const { items, keyMap } = this.props\n    const searchField = keyMap ? keyMap.title : 'title'\n    const isFiltering = !!searchValue\n\n    // first, filter the items in the props that we get from the parent\n\n    // the items in the props don't have the {selected: true/false} information\n    // so we need to find out for each item in filteredProps if its selected or not\n\n    // that's why we made the selectedItems array in the state, to store that information\n    // and we need to check there to see, for each item, if its selected\n\n    const { startingWith, including } = items.reduce(\n            (filtered, item) => {\n        const hideItemWhileSearching = isFiltering && !!item.hideOnSearch\n        if (hideItemWhileSearching) return filtered\n\n        if (\n          item[searchField].toLowerCase().startsWith(searchValue.toLowerCase())\n        ) {\n          return {\n            ...filtered,\n            startingWith: [\n              ...filtered.startingWith,\n              {\n                ...item,\n                selected:\n                  this.findItemInState(item) &&\n                  this.findItemInState(item).selected,\n              },\n            ],\n          }\n        }\n        if (\n          item[searchField].toLowerCase().includes(searchValue.toLowerCase())\n        ) {\n          return {\n            ...filtered,\n            including: [\n              ...filtered.including,\n              {\n                ...item,\n                selected:\n                  this.findItemInState(item) &&\n                  this.findItemInState(item).selected,\n              },\n            ],\n          }\n        }\n\n        return { ...filtered }\n      },\n      { startingWith: [], including: [] },\n    )\n\n    const arrayFinal = [...startingWith, ...including]\n\n    this.setState({\n      items: arrayFinal,\n      isFiltering,\n      searchValue,\n    })\n  }\n\n  onClose = () => {\n        const { onClose } = this.props\n    this.setState(\n      {\n        isOpen: false,\n        isFiltering: false,\n        hoveredItem: 0,\n      },\n      onClose && onClose(),\n    )\n  }\n\n    getItemId = (item) => {\n    if (!item) return\n        const { keyMap } = this.props\n    return item[keyMap && keyMap.id ? keyMap.id : 'id']\n  }\n\n  renderSelectButton = () => {\n    const {\n            isSplit,\n            customButton,\n            type,\n            size,\n            disabled,\n            icon,\n            label,\n            hasIconOnly,\n            fullWidth,\n            isInputSearch,\n            textToLeft,\n    } = this.props\n    const { items } = this.state\n\n    if (isSplit) {\n      return (\n        <ButtonSelect\n                    type={type}\n          size={size}\n          disabled={disabled}\n          onClick={!disabled ? this.onButtonClick : undefined}\n        >\n          <ChevronDown\n            color={type === 'primary' && !disabled ? 'white' : 'grayDark'}\n          />\n        </ButtonSelect>\n      )\n    }\n    if (customButton && isInputSearch) {\n      return customButton(this.onButtonClick, this.onSearchChange)\n    }\n    if (customButton) {\n      return customButton(this.onButtonClick, null, this.state.isOpen)\n    }\n    if (hasIconOnly) {\n      return (\n                <Button\n          type=\"text\"\n          icon={icon}\n          hasIconOnly\n          onClick={this.onButtonClick}\n          label=\"Click Me\"\n        />\n      )\n    }\n\n    return (\n            <Button\n        size={size}\n        items={items}\n        disabled={disabled}\n        type={type}\n        label={label}\n        icon={icon}\n        onClick={this.onButtonClick}\n        isSelect\n        fullWidth={fullWidth}\n        textToLeft={textToLeft}\n      />\n    )\n  }\n\n    renderCustomActionItem = (length, onCustomItemClick, customItemLabel) => {\n    if (length === 0) {\n      return (\n        <CustomItemContainer\n                    isCustomItemFocused={this.state.isCustomItemFocused}\n          onClick={() => onCustomItemClick(this.state.searchValue)}\n        >\n          {`${customItemLabel} ${this.state.searchValue}`}\n        </CustomItemContainer>\n      )\n    }\n  }\n\n  renderNoItems = (\n        hideSearch,\n        length,\n        isInputSearch,\n        noResultsCustomMessage,\n  ) => {\n    if (length === 0 && (!hideSearch || isInputSearch)) {\n      return <NoMatchesContainer>{noResultsCustomMessage}</NoMatchesContainer>\n    }\n  }\n\n  renderSelectPopup = () => {\n    const {\n            xPosition,\n            yPosition,\n            horizontalOffset,\n            hideSearch,\n            keyMap,\n            searchPlaceholder,\n            hasIconOnly,\n            marginTop,\n            multiSelect,\n            hasCustomAction,\n            onCustomItemClick,\n            customItemLabel,\n            fullWidth,\n            capitalizeItemLabel,\n            isInputSearch,\n            selectPopupVisible,\n            noResultsCustomMessage,\n            searchInputProps,\n    } = this.props\n        const { isOpen, hoveredItem, items, isFiltering } = this.state\n\n    return (\n      <SelectStyled\n                isOpen={isOpen || selectPopupVisible}\n        xPosition={xPosition}\n        yPosition={yPosition}\n        hasIconOnly={hasIconOnly}\n        marginTop={marginTop}\n        fullWidth={fullWidth}\n        horizontalOffset={horizontalOffset}\n      >\n        {!hideSearch && (items.length > 5 || isFiltering) && (\n          <SearchBarWrapper\n            id=\"searchInput\"\n                        ref={(node) => (this.searchInputNode = node)}\n          >\n            <SearchIcon />\n            <Search\n                            ref={(node) => (this.searchInput = node)}\n              onChange={this.onSearchChange}\n              placeholder={searchPlaceholder}\n              isOpen={isOpen}\n              {...searchInputProps}\n            />\n          </SearchBarWrapper>\n        )}\n        <SelectItems ref={(itemsNode) => (this.itemsNode = itemsNode)}>\n          {hasCustomAction\n            ? this.renderCustomActionItem(\n                items.length,\n                onCustomItemClick,\n                customItemLabel,\n              )\n            : this.renderNoItems(\n                hideSearch,\n                items.length,\n                isInputSearch,\n                noResultsCustomMessage,\n              )}\n          {}\n          {items.map((item, idx) => [\n            item.hasDivider && (\n              <SelectItemDivider key={`${this.getItemId(item)}--divider`}>\n                {item.dividerTitle && (\n                  <SelectItemDividerTitle>\n                    {item.dividerTitle}\n                  </SelectItemDividerTitle>\n                )}\n              </SelectItemDivider>\n            ),\n            <SelectItem\n              hovered={hoveredItem === idx}\n              key={this.getItemId(item) + idx}\n              getItemId={this.getItemId}\n              item={item}\n              capitalizeItemLabel={capitalizeItemLabel}\n              keyMap={keyMap}\n                            hasSelectedItems={items.some((i) => i.selected)}\n                            onClick={(event) => this.handleSelectOption(item, event)}\n              onItemClick={() =>\n                this.handleSelectOption(item, item.onItemClick)\n              }\n              hideSearch={hideSearch}\n              multiSelect={multiSelect}\n            />,\n          ])}\n        </SelectItems>\n      </SelectStyled>\n    )\n  }\n\n  render() {\n        const { isSplit, tooltip, disabled, fullWidth } = this.props\n\n    return (\n      <Wrapper\n        role=\"button\"\n        onClick={(e) => this.onClick(e)}\n        onKeyUp={(e) => this.onKeyUp(e)}\n        tabIndex={0}\n                isSplit={isSplit}\n                ref={(selectNode) => (this.selectNode = selectNode)}\n        data-tip={disabled ? '' : tooltip}\n        fullWidth={fullWidth}\n        aria-haspopup=\"true\"\n        aria-expanded={this.state.isOpen}\n      >\n        {this.renderSelectButton()}\n        {this.renderSelectPopup()}\n      </Wrapper>\n    )\n  }\n}\n\nSelect.propTypes = {\n  /** Is the button disabled */\n  disabled: PropTypes.bool,\n\n  /** Function to call on selected item click */\n  onSelectClick: PropTypes.func,\n\n  /** Label to display on the Select button */\n  label: PropTypes.string,\n\n  /** Items to display in the popup */\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      title: PropTypes.string,\n      /** If true, item will be hidden while searching */\n      hideOnSearch: PropTypes.bool,\n    }),\n  ).isRequired,\n\n  /** Is the Select component part of the Split Button */\n  isSplit: PropTypes.bool,\n\n  /** Type of the select component  */\n  type: PropTypes.oneOf(['primary', 'secondary']),\n\n  /** Size of the Button */\n  size: PropTypes.oneOf(['small', 'large', 'medium']),\n\n  /** Position of the popup right or left */\n  xPosition: PropTypes.oneOf(['right', 'left']),\n\n  /** Position of the popup top or bottom */\n  yPosition: PropTypes.oneOf(['top', 'bottom']),\n\n  /** Offset the popup horizontally */\n  horizontalOffset: PropTypes.string,\n\n  /** Icon to show in the Button */\n  icon: PropTypes.node,\n\n  /** Does the Select have a search bar */\n  hideSearch: PropTypes.bool,\n\n  /** Custom Button component */\n  customButton: PropTypes.func,\n\n  /** Custom keys to used in the Items array */\n  keyMap: PropTypes.shape({\n    id: PropTypes.string,\n    title: PropTypes.string,\n  }),\n\n  /** Can the select have multiple items selected */\n  multiSelect: PropTypes.bool,\n\n  /** If false don't enable keyboard navigation */\n  shortcutsEnabled: PropTypes.bool,\n\n  /** Search placeholder */\n  searchPlaceholder: PropTypes.string,\n\n  /** Tooltip to show on the component */\n  tooltip: PropTypes.string,\n\n  /** Should the component be opened */\n  isOpen: PropTypes.bool,\n\n  /** Callback to be called when the Select menu gets closed */\n  onClose: PropTypes.func,\n\n  /** Does the button have only an icon and no label */\n  hasIconOnly: PropTypes.bool,\n\n  /** Space between the dropdown and the button */\n  marginTop: PropTypes.string,\n\n  /** Indicated whether the select has a custom action */\n  hasCustomAction: PropTypes.bool,\n\n  /** The custom action item */\n  onCustomItemClick: PropTypes.func,\n\n  /** A custom label for a custom item */\n  customItemLabel: PropTypes.string,\n\n  /** An array of objects containing HotKeys */\n  hotKeys: PropTypes.arrayOf(\n    PropTypes.shape({\n      hotKey: PropTypes.number,\n      onKeyPress: PropTypes.func,\n    }),\n  ),\n\n  /** Is the select full width */\n  fullWidth: PropTypes.bool,\n\n  /** Should capitalize Item Label */\n  capitalizeItemLabel: PropTypes.bool,\n\n  /** Boolean to check if the select is triggered by an input instead of a button */\n  isInputSearch: PropTypes.bool,\n\n  /** Indicates if the select popup should be visible */\n  selectPopupVisible: PropTypes.bool,\n\n  /** Custom message to display when no results were found */\n  noResultsCustomMessage: PropTypes.string,\n\n  /** Should clear the search field's value when the main input is blurred  */\n  clearSearchOnBlur: PropTypes.bool,\n\n  /** Prop */\n  searchInputProps: PropTypes.shape({}),\n\n  /** Aligns text in Select to the left  */\n  textToLeft: PropTypes.bool,\n\n  /** onOpen function to fire when the Select menu is open */\n  onOpen: PropTypes.func,\n}\n\nSelect.defaultProps = {\n  label: '',\n  isSplit: false,\n  type: 'secondary',\n  size: 'medium',\n  xPosition: 'left',\n  yPosition: 'bottom',\n  horizontalOffset: undefined,\n  disabled: undefined,\n  icon: undefined,\n  hideSearch: false,\n  customButton: undefined,\n  onSelectClick: undefined,\n  keyMap: undefined,\n  multiSelect: false,\n  shortcutsEnabled: true,\n  searchPlaceholder: 'Search',\n  tooltip: undefined,\n  isOpen: false,\n  onClose: undefined,\n  hasIconOnly: false,\n  marginTop: undefined,\n  hasCustomAction: false,\n  onCustomItemClick: undefined,\n  customItemLabel: undefined,\n  hotKeys: undefined,\n  fullWidth: undefined,\n  capitalizeItemLabel: true,\n  isInputSearch: false,\n  selectPopupVisible: false,\n  noResultsCustomMessage: 'No matches found',\n  clearSearchOnBlur: false,\n  searchInputProps: {\n    clearSearchOnBlur: true,\n  },\n  textToLeft: false,\n  onOpen: null,\n}\n","level":1,"id":"select","parentName":"ui","examples":[{"name":"BasicSelect","description":"Basic","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\n\n/** Basic */\nexport default function ExampleSelect() {\n  return (\n    <Select\n      onSelectClick={() => console.info('Main select clicked')}\n      label=\"Click Me\"\n      keyMap={{\n        id: '_id',\n        title: 'name',\n      }}\n      items={[\n        {\n          _id: '1',\n          name: 'OpenOpenOpenOpenOpenOpenOpenOpenOpen',\n          hotKeyPrompt: 'Q',\n        },\n        { _id: '2', name: 'Pending' },\n        { _id: '3', name: 'Closed' },\n        { _id: '4', name: 'Open' },\n        { _id: '5', name: 'Pending' },\n        { _id: '6', name: 'Closed' },\n        { _id: '7', name: 'Open' },\n        { _id: '8', name: 'Pending' },\n        { _id: '9', name: 'Closed' },\n        { _id: '10', name: 'Open' },\n        { _id: '11', name: 'Pending' },\n        { _id: '23', name: 'Closed' },\n        { _id: '21', name: 'Open' },\n        { _id: '22', name: 'Pending' },\n        { _id: '33', name: 'Closed' },\n        { _id: '41', name: 'Open' },\n        { _id: '52', name: 'Pending' },\n        { _id: '63', name: 'Closed' },\n      ]}\n      hotKeys={[\n        {\n          hotKey: 81,\n          onKeyPress: () => {\n            console.info('hey')\n          },\n        },\n        {\n          hotKey: 87,\n          onKeyPress: () => {\n            console.info('hello there')\n          },\n        },\n      ]}\n      hasCustomAction\n            onCustomItemClick={(string) => console.info(string)}\n      customItemLabel=\"Create Tag\"\n    />\n  )\n}\n","title":""},{"name":"DisabledSelect","description":"Basic Disabled","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\n\n/** Basic Disabled */\nexport default function ExampleSelectDisabled() {\n  return (\n    <Select\n      onSelectClick={() => console.info('Main select clicked')}\n      label=\"Click Me\"\n      disabled\n      keyMap={{\n        id: '_id',\n        title: 'name',\n      }}\n      items={[\n        { _id: '1', name: 'Open' },\n        { _id: '2', name: 'Pending' },\n        { _id: '3', name: 'Closed' },\n      ]}\n    />\n  )\n}\n","title":""},{"name":"SelectIconOnly","description":"With Icon Only","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\nimport MoreIcon from '@bufferapp/ui/Icon/Icons/More'\n\n/** With Icon Only */\nexport default function ExampleSelect() {\n  return (\n    <Select\n      onSelectClick={() => true}\n      label=\"Click me\"\n      icon={<MoreIcon />}\n      type=\"primary\"\n      items={[\n        { id: '1', title: 'Open' },\n        { id: '2', title: 'Pending' },\n        { id: '3', title: 'Closed' },\n      ]}\n      hasIconOnly\n      position=\"right\"\n      hideSearch\n    />\n  )\n}\n","title":""},{"name":"SelectWithCustomItem","description":"Custom Item","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\n\n/** Custom Item */\nexport default function ExampleSelectWithCustomItem() {\n  return (\n    <Select\n            onSelectClick={(selectedItem) => selectedItem.selectedItemClick()}\n      label=\"Click Me\"\n      items={[\n        {\n          id: '1',\n          title: 'Red',\n          color: 'red',\n                    component: (item) =>\n            `<div style=\"background: ${item.color}; width: 10px; height: 10px\"/>`,\n          selectedItemClick: () => console.info('Red Clicked'),\n        },\n        {\n          id: '2',\n          title: 'Green',\n          color: 'green',\n                    component: (item) =>\n            `<div style=\"background: ${item.color}; width: 10px; height: 10px\"/>`,\n          selectedItemClick: () => console.info('Green Clicked'),\n        },\n        {\n          id: '3',\n          title: 'Blue',\n          color: 'blue',\n                    component: (item) =>\n            `<div style=\"background: ${item.color}; width: 10px; height: 10px\"/>`,\n          selectedItemClick: () => console.info('Blue Clicked'),\n        },\n      ]}\n      hideSearch\n    />\n  )\n}\n","title":""},{"name":"SelectWithIcon","description":"With Icon","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\nimport { Person } from '@bufferapp/ui/Icon'\n\n/** With Icon */\nexport default function ExampleSelect() {\n  return (\n    <Select\n      onSelectClick={() => true}\n      label=\"Click Me\"\n      icon={<Person color=\"white\" />}\n      type=\"primary\"\n      items={[\n        { id: '1', title: 'Open' },\n        { id: '2', title: 'Pending' },\n        { id: '3', title: 'Closed' },\n      ]}\n    />\n  )\n}\n","title":""},{"name":"SelectWithInputSearch","description":"With Input search","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\nimport Search from '@bufferapp/ui/Search'\nimport { Search as SearchIcon } from '@bufferapp/ui/Icon'\n\nconst searchBarWrapperStyle = {\n  width: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  borderRadius: '4px',\n  padding: '5px 8px 4px 8px',\n  border: '1px solid #B8B8B8',\n  color: '#636363',\n  backgroundColor: '#FFFFFF',\n  boxShadow: '2px 2px 0 2px transparent',\n  transitionProperty: 'border-width, border-color, box-shadow',\n  transitionDuration: '0.1s',\n  transitionTimingFunction: 'ease-in',\n}\n\n/** With Input search */\nexport default function ExampleSelectWithInputSearch() {\n  return (\n    <Select\n      onSelectClick={() => true}\n            customButton={(onButtonClick, onSearchChange) => (\n                <div style={searchBarWrapperStyle}>\n          <SearchIcon />\n          <Search\n            onClick={onButtonClick}\n            onChange={onSearchChange}\n            height=\"small\"\n            placeholder=\"Search Profiles\"\n            isOpen\n          />\n        </div>\n      )}\n      isInputSearch\n      hideSearch\n      capitalizeItemLabel={false}\n      hasCustomAction={false}\n      noResultsCustomMessage=\"No Profiles Found\"\n      items={[\n        { id: '1', title: 'hamish' },\n        { id: '2', title: 'juliana' },\n        { id: '3', title: 'joel' },\n      ]}\n    />\n  )\n}\n","title":""},{"name":"SelectWithItemTextToLeft","description":"With Item Align to the left","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\n\n/** With Item Align to the left */\nexport default function ExampleSelect() {\n  return (\n    <div style={{ width: '300px' }}>\n      <Select\n        hideSearch\n        textToLeft\n        onSelectClick={() => true}\n        fullWidth\n        label=\"Click me\"\n        type=\"primary\"\n        items={[\n          { id: '1', title: 'With a very very long text' },\n          { id: '2', title: 'Short text' },\n        ]}\n      />\n    </div>\n  )\n}\n","title":""},{"name":"SelectWithItemTooltip","description":"With Item Tooltip","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\n\n/** With Item Tooltip */\nexport default function ExampleSelect() {\n  return (\n    <Select\n      onSelectClick={() => true}\n      label=\"Click me\"\n      type=\"primary\"\n      items={[\n        { id: '1', title: 'With tooltip', tooltip: 'Item with tooltip' },\n        { id: '2', title: 'Without tooltip' },\n      ]}\n      position=\"right\"\n      hideSearch\n    />\n  )\n}\n","title":""},{"name":"SelectWithItemsWithNoSelectedState","description":"Basic Without Selected State On Items","methods":[],"code":"import React from 'react'\nimport UISelect from '@bufferapp/ui/Select'\n\nclass Select extends UISelect {\n    handleSelectOption = (option, event) => {\n        this.props.onSelectClick(option, event)\n        this.setState({\n      isOpen: false,\n    })\n  }\n}\n\n/** Basic Without Selected State On Items */\nexport default function ExampleSelect() {\n  return (\n        <Select\n      onSelectClick={() => console.info('Main select clicked')}\n      label=\"Click Me\"\n      keyMap={{\n        id: '_id',\n        title: 'name',\n      }}\n      items={[\n        {\n          _id: '1',\n          name: 'OpenOpenOpenOpenOpenOpenOpenOpenOpen',\n          hotKeyPrompt: 'Q',\n        },\n        { _id: '2', name: 'Pending' },\n        { _id: '3', name: 'Closed' },\n        { _id: '4', name: 'Open' },\n        { _id: '5', name: 'Pending' },\n        { _id: '6', name: 'Closed' },\n        { _id: '7', name: 'Open' },\n        { _id: '8', name: 'Pending' },\n        { _id: '9', name: 'Closed' },\n        { _id: '10', name: 'Open' },\n        { _id: '11', name: 'Pending' },\n        { _id: '23', name: 'Closed' },\n        { _id: '21', name: 'Open' },\n        { _id: '22', name: 'Pending' },\n        { _id: '33', name: 'Closed' },\n        { _id: '41', name: 'Open' },\n        { _id: '52', name: 'Pending' },\n        { _id: '63', name: 'Closed' },\n      ]}\n      hotKeys={[\n        {\n          hotKey: 81,\n          onKeyPress: () => {\n            console.info('hey')\n          },\n        },\n        {\n          hotKey: 87,\n          onKeyPress: () => {\n            console.info('hello there')\n          },\n        },\n      ]}\n      hasCustomAction\n            onCustomItemClick={(string) => console.info(string)}\n      customItemLabel=\"Create Tag\"\n    />\n  )\n}\n","title":""},{"name":"SelectWithMenu","description":"With Custom Component","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\nimport { NavBarMenu } from '@bufferapp/ui/NavBar'\n\n/** With Custom Component */\nexport default function ExampleSelectMenu() {\n  return (\n    <Select\n      onSelectClick={() => console.info('Selected')}\n            customButton={(onButtonClick) => (\n        <NavBarMenu\n          user={{\n            name: 'Courtney Seiter',\n            email: 'courtney@buffer.com',\n          }}\n          onClick={onButtonClick}\n        />\n      )}\n      items={[\n        { id: '1', title: 'Option 1' },\n        { id: '2', title: 'Option 2' },\n        { id: '3', title: 'Option 3' },\n      ]}\n      marginTop=\"32px\"\n      hideSearch\n    />\n  )\n}\n","title":""},{"name":"SelectWithMenuAndCustomItem","description":"With Custom Component and Custom Items","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\nimport { Person, People, Gear, ArrowLeft } from '@bufferapp/ui/Icon'\nimport { NavBarMenu } from '@bufferapp/ui/NavBar'\n\n/** With Custom Component and Custom Items */\nexport default function ExampleSelectMenu() {\n  return (\n    <Select\n            onSelectClick={(selectedItem) => selectedItem.selectedItemClick()}\n            customButton={(onButtonClick) => (\n        <NavBarMenu\n          user={{\n            name: 'Courtney Seiter',\n            email: 'courtney@buffer.com',\n          }}\n          onClick={onButtonClick}\n        />\n      )}\n      items={[\n        {\n          id: '1',\n          title: 'Account',\n          icon: <Person color=\"gray\" />,\n          selectedItemClick: () => console.info('Account Clicked'),\n        },\n        {\n          id: '2',\n          title: 'Organization',\n          icon: <People color=\"gray\" />,\n          selectedItemClick: () => console.info('Organization Clicked'),\n        },\n        {\n          id: '3',\n          title: 'Settings',\n          icon: <Gear color=\"gray\" />,\n          selectedItemClick: () => console.info('Settings Clicked'),\n        },\n        {\n          id: '4',\n          title: 'Logout',\n          icon: <ArrowLeft color=\"gray\" />,\n          hasDivider: true,\n          selectedItemClick: () => console.info('Logout Clicked'),\n        },\n        {\n          id: '5',\n          title: 'Logout',\n          icon: <ArrowLeft color=\"gray\" />,\n          hasDivider: true,\n          dividerTitle: 'Logout',\n          selectedItemClick: () => console.info('Logout Clicked'),\n        },\n      ]}\n      marginTop=\"32px\"\n      hideSearch\n    />\n  )\n}\n","title":""},{"name":"SelectWithMultiSelect","description":"Multi-Select","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\n\n/** Multi-Select */\nexport default function ExampleSelect() {\n  return (\n    <Select\n      onSelectClick={() => console.info('Main select clicked')}\n      label=\"Click Me\"\n      multiSelect\n      items={[\n        { id: '1', title: 'Open', selected: true },\n        { id: '2', title: 'Pending' },\n        { id: '3', title: 'Closed' },\n      ]}\n      hideSearch\n    />\n  )\n}\n","title":""},{"name":"SelectWithOnOpen","description":"Select With On Open Functionality","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\n\n/** Select With On Open Functionality */\nexport default function ExampleOnOpn() {\n  return (\n    <Select\n      onSelectClick={() => console.info('Main select clicked')}\n      label=\"Click Me\"\n      keyMap={{\n        id: '_id',\n        title: 'name',\n      }}\n      items={[\n        {\n          _id: '1',\n          name: 'OpenOpenOpenOpenOpenOpenOpenOpenOpen',\n          hotKeyPrompt: 'Q',\n        },\n        { _id: '2', name: 'Pending' },\n        { _id: '3', name: 'Closed' },\n        { _id: '4', name: 'Open' },\n        { _id: '5', name: 'Pending' },\n        { _id: '6', name: 'Closed' },\n        { _id: '7', name: 'Open' },\n        { _id: '8', name: 'Pending' },\n        { _id: '9', name: 'Closed' },\n        { _id: '10', name: 'Open' },\n        { _id: '11', name: 'Pending' },\n        { _id: '23', name: 'Closed' },\n        { _id: '21', name: 'Open' },\n        { _id: '22', name: 'Pending' },\n        { _id: '33', name: 'Closed' },\n        { _id: '41', name: 'Open' },\n        { _id: '52', name: 'Pending' },\n        { _id: '63', name: 'Closed' },\n      ]}\n      hotKeys={[\n        {\n          hotKey: 81,\n          onKeyPress: () => {\n            console.info('hey')\n          },\n        },\n        {\n          hotKey: 87,\n          onKeyPress: () => {\n            console.info('hello there')\n          },\n        },\n      ]}\n      hasCustomAction\n            onCustomItemClick={(string) => console.info(string)}\n      customItemLabel=\"Create Tag\"\n      onOpen={() => console.log('OnOpen Event Trigged')}\n    />\n  )\n}\n","title":""},{"name":"SelectWithSearch","description":"With Search","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\nimport { Flag } from '@bufferapp/ui/Icon'\n\n/** With Search */\nexport default function ExampleSelectWithSearch() {\n  return (\n    <Select\n            onSelectClick={(item) => console.info(item)}\n      label=\"Search Me\"\n      icon={<Flag color=\"white\" />}\n      onSearchChange={() => true}\n      type=\"primary\"\n      searchPlaceholder=\"Search items...\"\n      keyMap={{\n        id: '_id',\n        title: 'name',\n      }}\n      items={[\n        { _id: '1', name: 'Open' },\n        { _id: '2', name: 'Pending' },\n        { _id: '3', name: 'Closed' },\n        { _id: '4', name: 'Open' },\n        { _id: '5', name: 'Pending' },\n        { _id: '6', name: 'Closed' },\n      ]}\n    />\n  )\n}\n","title":""},{"name":"SelectWithSelectAll","description":"With Select All option","methods":[],"code":"import React, { useState } from 'react'\nimport Select from '@bufferapp/ui/Select'\n\nconst data = [\n  { _id: '1', name: 'First', selected: true },\n  { _id: '2', name: 'Second', selected: true },\n  { _id: '3', name: 'Third', selected: true },\n  { _id: '4', name: 'Fourth', selected: true },\n  { _id: '5', name: 'Fifth', selected: true },\n]\n\n/** With Select All option */\nexport default function ExampleSelectWithSelectAll() {\n  const [items, setItems] = useState(data)\n\n    const handleClick = (option) => {\n    // If 'All' item is clicked, either select or deselect all items\n    if (option.name === 'All') {\n      const newSelectedValue = !items.every((item) => item.selected === true)\n      setItems(items.map((item) => ({ ...item, selected: newSelectedValue })))\n    } else {\n      // If any other item is clicked, either select or deselect only that item\n      setItems(\n        items.map((item) => {\n          if (item._id === option._id)\n            return { ...item, selected: !item.selected }\n          return item\n        }),\n      )\n    }\n  }\n\n  // Create the 'All' item and determine whether it should be marked as selected or not\n  const allItemsOption = {\n    _id: '0',\n    name: 'All',\n    selected: items.every((item) => item.selected === true),\n  }\n\n  return (\n    <Select\n            onSelectClick={(item) => handleClick(item)}\n      label=\"Try Select All\"\n      type=\"primary\"\n      multiSelect\n      keyMap={{\n        id: '_id',\n        title: 'name',\n      }}\n      items={[allItemsOption, ...items]}\n      clearSearchOnBlur\n      searchInputProps={{\n        clearSearchOnBlur: false,\n      }}\n    />\n  )\n}\n","title":""},{"name":"SelectWithoutCapitalize","description":"Without Capitalize","methods":[],"code":"import React from 'react'\nimport Select from '@bufferapp/ui/Select'\n\n/** Without Capitalize */\nexport default function ExampleWithoutCapitalize() {\n  return (\n    <Select\n      onSelectClick={() => true}\n      label=\"Click me\"\n      type=\"primary\"\n      items={[\n        { id: '1', title: 'hamish' },\n        { id: '2', title: 'juliana' },\n        { id: '3', title: 'joel' },\n      ]}\n      position=\"right\"\n      hideSearch\n      capitalizeItemLabel={false}\n    />\n  )\n}\n","title":""},{"name":"SplitButtonBottom","description":"Split Button with Select on Bottom","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Split Button with Select on Bottom */\nexport default function ExampleSplitButtonBottom() {\n  return (\n    <Button\n      onSelectClick={() => true}\n      onClick={() => true}\n      label=\"Reply + Close\"\n      type=\"primary\"\n      isSplit\n      items={[\n        { id: '1', title: 'Reply + Pending1' },\n        { id: '2', title: 'Reply + Close + Assign To Me' },\n      ]}\n      hideSearch\n    />\n  )\n}\n","title":""},{"name":"SplitButtonDisabled","description":"Split Button Disabled","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Split Button Disabled */\nexport default function ExampleSplitButtonDisabled() {\n  return (\n    <Button\n      onSelectClick={() => true}\n      onClick={() => true}\n      label=\"Reply + Close\"\n      type=\"primary\"\n      disabled\n      isSplit\n      items={[\n        { id: '1', title: 'Reply + Pending' },\n        { id: '2', title: 'Reply + Close + Assign To Me' },\n      ]}\n    />\n  )\n}\n","title":""},{"name":"SplitButtonTop","description":"Split Button with Select on Top","methods":[],"code":"import React from 'react'\nimport Button from '@bufferapp/ui/Button'\n\n/** Split Button with Select on Top */\nexport default function ExampleSplitButtonTop() {\n  return (\n    <Button\n      onSelectClick={() => true}\n      onClick={() => true}\n      label=\"Reply + Close\"\n      type=\"primary\"\n      selectPosition=\"top\"\n      isSplit\n      items={[\n        { id: '1', title: 'Reply + Pending' },\n        { id: '2', title: 'Reply + Close + Assign To Me' },\n      ]}\n    />\n  )\n}\n","title":""}]},{"name":"Sidebar Header","description":"","props":{"title":{"type":{"name":"string"},"required":true,"description":""}},"code":"import React from 'react'\n\nimport PropTypes from 'prop-types'\nimport { TitleContainer } from './style'\nimport Text from '../Text/Text'\n\nconst SidebarHeader = ({ title }) => (\n  <TitleContainer>\n    <Text type=\"label\">{title}</Text>\n  </TitleContainer>\n)\n\nSidebarHeader.propTypes = {\n  title: PropTypes.string.isRequired,\n}\n\nexport default SidebarHeader\n","level":1,"id":"sidebarheader","parentName":"ui","examples":[{"name":"Header","description":"SidebarHeader Example","methods":[],"code":"import React from 'react'\nimport SidebarHeader from '@bufferapp/ui/SidebarHeader'\n\n/** SidebarHeader Example */\nexport default function ExampleHeader() {\n  return <SidebarHeader title=\"Section Header\" />\n}\n","title":""}]},{"name":"Sidebar List Item","description":"","props":{"id":{"type":{"name":"string"},"required":false,"description":"The id of the element","defaultValue":{"value":"''","computed":false}},"className":{"type":{"name":"string"},"required":false,"description":"The className of the element","defaultValue":{"value":"null","computed":false}},"title":{"type":{"name":"string"},"required":true,"description":"What the label will say"},"icon":{"type":{"name":"node"},"required":false,"description":"An icon either from this library or a node of your choice","defaultValue":{"value":"null","computed":false}},"onItemClick":{"type":{"name":"func"},"required":true,"description":"A function to perform when the item is clicked"},"badges":{"type":{"name":"union","value":[{"name":"string"},{"name":"node"}]},"required":false,"description":"A string or Node to display at the far right side of the item","defaultValue":{"value":"null","computed":false}},"badgeIcon":{"type":{"name":"node"},"required":false,"description":"An icon either from this library or a node of your choice","defaultValue":{"value":"null","computed":false}},"selected":{"type":{"name":"bool"},"required":false,"description":"Whether the item is currently selected","defaultValue":{"value":"null","computed":false}},"user":{"type":{"name":"shape","value":{"id":{"name":"string","required":false},"name":{"name":"string","required":false},"handle":{"name":"string","required":false},"profileImageUrl":{"name":"string","required":false},"fallbackUrl":{"name":"string","required":false},"network":{"name":"enum","value":[{"value":"'facebook'","computed":false},{"value":"'twitter'","computed":false},{"value":"'instagram'","computed":false},{"value":"'linkedin'","computed":false},{"value":"'google'","computed":false},{"value":"'pinterest'","computed":false},{"value":"'tiktok'","computed":false},{"value":"'googlebusiness'","computed":false},{"value":"'startPage'","computed":false},{"value":"'mastodon'","computed":false},{"value":"'youtube'","computed":false}],"required":false}}},"required":false,"description":"A user object if you'd like the item to display the user Avatar, social network and handle","defaultValue":{"value":"null","computed":false}}},"code":"import React from 'react'\n\nimport PropTypes from 'prop-types'\nimport {\n  Badge,\n  BadgeIconContainer,\n  Handle,\n  IconContainer,\n  ItemStyled,\n  LabelContainer,\n  LabelStyled,\n  NameHandleWrapper,\n} from './style'\nimport Avatar from '../Avatar/Avatar'\n\nconst SidebarListItem = ({\n    title,\n    icon,\n    onItemClick,\n    badges,\n    badgeIcon,\n    selected,\n    user,\n    className,\n}) => (\n  <ItemStyled\n    onClick={() => onItemClick()}\n        hasUser={user}\n    selected={selected}\n    className={className}\n  >\n    {icon && <IconContainer selected={selected}>{icon}</IconContainer>}\n    <LabelContainer>\n      {user ? (\n        <React.Fragment>\n          <Avatar\n            src={user.profileImageUrl}\n            fallbackUrl={user.fallbackUrl}\n            alt={user.name}\n            size=\"small\"\n            type=\"social\"\n            network={user.network}\n          />\n          <NameHandleWrapper>\n            <LabelStyled\n              type=\"label\"\n              title={title}\n              hasUser={user}\n              selected={selected}\n            >\n              {user.name}\n            </LabelStyled>\n            <Handle selected={selected}>{user.handle}</Handle>\n          </NameHandleWrapper>\n        </React.Fragment>\n      ) : (\n        <LabelStyled type=\"label\" title={title} selected={selected}>\n          {title}\n        </LabelStyled>\n      )}\n    </LabelContainer>\n\n    {!badgeIcon && badges && <Badge selected={selected}>{badges}</Badge>}\n    {badgeIcon && (\n            <BadgeIconContainer selected={selected}>{badgeIcon}</BadgeIconContainer>\n    )}\n  </ItemStyled>\n)\n\nSidebarListItem.propTypes = {\n  /** The id of the element */\n  id: PropTypes.string,\n  /** The className of the element */\n  className: PropTypes.string,\n  /** What the label will say */\n  title: PropTypes.string.isRequired,\n  /** An icon either from this library or a node of your choice */\n  icon: PropTypes.node,\n  /** A function to perform when the item is clicked */\n  onItemClick: PropTypes.func.isRequired,\n  /** A string or Node to display at the far right side of the item */\n  badges: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  /** An icon either from this library or a node of your choice */\n  badgeIcon: PropTypes.node,\n  /** Whether the item is currently selected */\n  selected: PropTypes.bool,\n  /** A user object if you'd like the item to display the user Avatar, social network and handle */\n  user: PropTypes.shape({\n    id: PropTypes.string,\n    name: PropTypes.string,\n    handle: PropTypes.string,\n    profileImageUrl: PropTypes.string,\n    fallbackUrl: PropTypes.string,\n    network: PropTypes.oneOf([\n      'facebook',\n      'twitter',\n      'instagram',\n      'linkedin',\n      'google',\n      'pinterest',\n      'tiktok',\n      'googlebusiness',\n      'startPage',\n      'mastodon',\n      'youtube',\n    ]),\n  }),\n}\n\nSidebarListItem.defaultProps = {\n  id: '',\n  icon: null,\n  badgeIcon: null,\n  badges: null,\n  selected: null,\n  user: null,\n  className: null,\n}\n\nexport default SidebarListItem\n","level":1,"id":"sidebarlistitem","parentName":"ui","examples":[{"name":"SidebarListItem","description":"SidebarListItem Example","methods":[],"code":"import React from 'react'\nimport SidebarListItem from '@bufferapp/ui/SidebarListItem'\nimport { Person } from '@bufferapp/ui/Icon'\n\n/** SidebarListItem Example */\nexport default function ExampleSidebarListItem() {\n  return (\n    <SidebarListItem\n      id=\"1a\"\n      title=\"Label Default\"\n      icon={<Person />}\n      onItemClick={() => console.info('hey')}\n      badges={123}\n    />\n  )\n}\n","title":""},{"name":"SidebarListItemSelected","description":"SidebarListItem Selected Example","methods":[],"code":"import React from 'react'\nimport SidebarListItem from '@bufferapp/ui/SidebarListItem'\nimport { Person } from '@bufferapp/ui/Icon'\n\n/** SidebarListItem Selected Example */\nexport default function ExampleSidebarListItem() {\n  return (\n    <SidebarListItem\n      id=\"1a\"\n      title=\"Label Default\"\n      icon={<Person color=\"gray\" />}\n      onItemClick={() => console.info('hey')}\n      badges={123}\n      selected\n    />\n  )\n}\n","title":""},{"name":"SidebarListItemWithCustomBadge","description":"SidebarListItem With Custom Badge Example","methods":[],"code":"import React from 'react'\nimport SidebarListItem from '@bufferapp/ui/SidebarListItem'\n\n/** SidebarListItem With Custom Badge Example */\nexport default function SidebarListItemWithCustomBadge() {\n  return (\n    <SidebarListItem\n      id=\"1a\"\n      title=\"My Label With Custom Badge\"\n      icon={\n        <div\n          style={{\n            background: 'blue',\n            width: '16px',\n            height: '16px',\n            borderRadius: '4px',\n          }}\n        />\n      }\n      onItemClick={() => console.info('hey')}\n      badges={\n        <span>\n          <b style={{ color: 'rebeccapurple' }}>NEW</b>\n        </span>\n      }\n    />\n  )\n}\n","title":""},{"name":"SidebarListItemWithCustomComponent","description":"SidebarListItem With Custom Component Example","methods":[],"code":"import React from 'react'\nimport SidebarListItem from '@bufferapp/ui/SidebarListItem'\n\n/** SidebarListItem With Custom Component Example */\nexport default function ExampleSidebarListItem() {\n  return (\n    <SidebarListItem\n      id=\"1a\"\n      title=\"Label Default\"\n      icon={\n        <div\n          style={{\n            background: 'red',\n            width: '16px',\n            height: '16px',\n            borderRadius: '4px',\n          }}\n        />\n      }\n      onItemClick={() => console.info('hey')}\n      badges={123}\n    />\n  )\n}\n","title":""},{"name":"SidebarListItemWithIcon","description":"SidebarListItem With Badge Icon Example","methods":[],"code":"import React from 'react'\nimport SidebarListItem from '@bufferapp/ui/SidebarListItem'\nimport { Warning } from '@bufferapp/ui/Icon'\n\n/** SidebarListItem With Badge Icon Example */\nexport default function ExampleSidebarListItem() {\n  return (\n    <SidebarListItem\n      id=\"1a\"\n      title=\"Label Default\"\n      onItemClick={() => console.info('hey')}\n      badges={123}\n      badgeIcon={<Warning />}\n    />\n  )\n}\n","title":""},{"name":"SidebarListItemWithUser","description":"SidebarListItem With User Example","methods":[],"code":"import React from 'react'\nimport SidebarListItem from '@bufferapp/ui/SidebarListItem'\n\n/** SidebarListItem With User Example */\nexport default function ExampleSidebarListItem() {\n  const userMock = {\n    id: 'W_Lvu75KcgABAT6L',\n    name: 'Joel Gascoigne',\n    handle: '@joelgascogine',\n    profileImageUrl: 'http://i.pravatar.cc/64?img=60',\n    network: 'instagram',\n  }\n\n  return (\n    <SidebarListItem\n      id=\"1a\"\n      title=\"Label Default\"\n      onItemClick={() => console.info('hey')}\n      badges={123}\n      user={userMock}\n    />\n  )\n}\n","title":""},{"name":"SidebarListItemWithUserSelected","description":"SidebarListItem With User Selected Example","methods":[],"code":"import React from 'react'\nimport SidebarListItem from '@bufferapp/ui/SidebarListItem'\n\n/** SidebarListItem With User Selected Example */\nexport default function ExampleSidebarListItem() {\n  const userMock = {\n    id: 'W_Lvu75KcgABAT6L',\n    name: 'Joel Gascoigne',\n    handle: '@joelgascogine',\n    profileImageUrl: 'http://i.pravatar.cc/64?img=60',\n    network: 'instagram',\n  }\n\n  return (\n    <SidebarListItem\n      id=\"1a\"\n      title=\"Label Default\"\n      onItemClick={() => console.info('hey')}\n      badges={123}\n      user={userMock}\n      selected\n    />\n  )\n}\n","title":""}]},{"name":"Simple Modal","description":"","props":{"children":{"type":{"name":"node"},"required":true,"description":""},"closeAction":{"type":{"name":"func"},"required":true,"description":""}},"code":"import React, { useRef, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Cross } from '../Icon'\nimport { Container, Modal, CloseButton } from './style'\nimport { useAnimation } from '../AnimationWrapper'\nimport { stageInCenter, stageOutCenter } from '../style/animations'\n\nconst ESCAPE_KEY = 27\nconst TAB_KEY = 9\nconst SimpleModal = ({ children, closeAction }) => {\n  const modalRef = useRef(null)\n  const containerRef = useRef(null)\n  const {\n    AnimationWrapper,\n    dismiss: dismissAnimationWrapper,\n    animationProps,\n  } = useAnimation({\n    stageInAnimation: stageInCenter,\n    stageOutAnimation: stageOutCenter,\n    duration: 400,\n    onDismiss: closeAction,\n  })\n\n    const handleTabKey = (e) => {\n        const focusableModalElements = modalRef.current.querySelectorAll(\n      'a[href], button, textarea, input[type=\"text\"], input[type=\"radio\"], input[type=\"checkbox\"], select, div[tabIndex=\"0\"]',\n    )\n    const firstElement = focusableModalElements[0]\n    const lastElement =\n      focusableModalElements[focusableModalElements.length - 1]\n\n    if (!e.shiftKey && document.activeElement === lastElement) {\n      firstElement.focus()\n      return e.preventDefault()\n    }\n\n    if (e.shiftKey && document.activeElement === firstElement) {\n      lastElement.focus()\n      e.preventDefault()\n    }\n  }\n\n  const keyListenersMap = new Map([\n    [ESCAPE_KEY, dismissAnimationWrapper],\n    [TAB_KEY, handleTabKey],\n  ])\n\n    const clickToClose = (e) => {\n    if (e.target !== containerRef.current) return\n    dismissAnimationWrapper()\n  }\n\n  useEffect(() => {\n        function keyListener(e) {\n      const listener = keyListenersMap.get(e.keyCode)\n      return listener && listener(e)\n    }\n    document.addEventListener('keydown', keyListener)\n        modalRef.current.focus()\n        containerRef.current.addEventListener('click', (e) => clickToClose(e))\n\n    return () => document.removeEventListener('keydown', keyListener)\n  }, [])\n\n  return (\n        <Container ref={containerRef} role=\"dialog\" aria-modal=\"true\">\n      <AnimationWrapper {...animationProps}>\n        <Modal\n          ref={modalRef}\n                    tabIndex=\"0\" // this needs to have a tabIndex so that it can listen for the ESC key\n        >\n          <CloseButton onClick={() => dismissAnimationWrapper()}>\n            <Cross />\n          </CloseButton>\n          {children}\n        </Modal>\n      </AnimationWrapper>\n    </Container>\n  )\n}\n\nSimpleModal.propTypes = {\n  children: PropTypes.node.isRequired,\n  closeAction: PropTypes.func.isRequired,\n}\n\nexport default SimpleModal\n","level":1,"id":"simplemodal","parentName":"ui","examples":[{"name":"SimpleModal","description":"SimpleModal Example","methods":[],"code":"import React, { useState } from 'react'\nimport SimpleModal from '@bufferapp/ui/SimpleModal'\nimport Text from '@bufferapp/ui/Text'\nimport Button from '@bufferapp/ui/Button'\n\n/** SimpleModal Example */\nexport default function ExampleSimpleModal() {\n  const [modalOpen, openModal] = useState(false)\n  const [changed, setChanged] = useState(false)\n  const [showingModal, setShowingModal] = useState(false)\n\n  return (\n    <div>\n      <Button\n        disabled={showingModal}\n        type=\"primary\"\n        onClick={() => {\n          openModal(true)\n          setTimeout(() => {\n            setShowingModal(true)\n          }, 200)\n        }}\n        label=\"Bring the modal!\"\n      />\n      {modalOpen && (\n        <SimpleModal\n          closeAction={() => {\n            openModal(false)\n            setChanged(false)\n            setShowingModal(false)\n          }}\n        >\n          {!changed && (\n            <div key=\"modal1\" style={{ width: '300px', padding: '30px' }}>\n              <Text type=\"p\">\n                There is a theory which states that if ever anyone discovers\n                exactly what the Universe is for and why it is here, it will\n                instantly disappear and be replaced by something even more\n                bizarre and inexplicable.\n              </Text>\n              <button type=\"button\" onClick={() => setChanged(true)}>\n                change content\n              </button>\n            </div>\n          )}\n          {changed && (\n            <div key=\"modal2\" style={{ width: '200px', padding: '30px' }}>\n              <Text type=\"p\">\n                Ah-ah, ah!\n                <br />\n                Ah-ah, ah!\n                <br />\n                <br />\n                We come from the land of the ice and snow\n                <br />\n                From the midnight sun where the hot springs flow\n                <br />\n                The hammer of the gods\n                <br />\n                Will drive our ships to new lands\n                <br />\n                To fight the horde, sing and cry\n                <br />\n                Valhalla, I am coming\n              </Text>\n              <button type=\"button\" onClick={() => setChanged(false)}>\n                back\n              </button>\n            </div>\n          )}\n        </SimpleModal>\n      )}\n    </div>\n  )\n}\n","title":""}]},{"name":"Social Button","description":"","props":{"disabled":{"type":{"name":"bool"},"required":false,"description":"Is the button disabled","defaultValue":{"value":"false","computed":false}},"channel":{"type":{"name":"enum","value":[{"value":"'twitter'","computed":false},{"value":"'instagram'","computed":false},{"value":"'facebook'","computed":false},{"value":"'pinterest'","computed":false},{"value":"'linkedin'","computed":false}]},"required":true,"description":"Channel"},"onClick":{"type":{"name":"func"},"required":true,"description":"OnClick handler"}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Twitter, Instagram, Facebook, Pinterest, LinkedIn } from '../Icon'\nimport Text from '../Text/Text'\n\nimport { ChannelIconContainerStyled, SocialButtonStyled } from './style'\n\nconst renderContent = (channel) => {\n  const content = {}\n  switch (channel) {\n    case 'instagram':\n            content.Icon = <Instagram />\n            content.name = 'Instagram'\n            content.cta = 'Connect an Instagram business account'\n      break\n    case 'twitter':\n            content.Icon = <Twitter />\n            content.name = 'Twitter'\n            content.cta = 'Connect a Twitter profile'\n      break\n    case 'facebook':\n            content.Icon = <Facebook />\n            content.name = 'Facebook'\n            content.cta = 'Connect a Facebook page'\n      break\n    case 'pinterest':\n            content.Icon = <Pinterest />\n            content.name = 'Pinterest'\n            content.cta = 'Connect a Pinterest profile'\n      break\n    case 'linkedin':\n            content.Icon = <LinkedIn />\n            content.name = 'LinkedIn'\n            content.cta = 'Connect a LinkedIn profile'\n      break\n    default:\n      break\n  }\n  return content\n}\n\nconst SocialButton = ({ disabled, channel, onClick }) => {\n  const content = renderContent(channel)\n  return (\n    <SocialButtonStyled\n      onClick={!disabled ? onClick : undefined}\n      channel={channel}\n      disabled={disabled}\n    >\n      <ChannelIconContainerStyled>\n        {content.Icon}\n        <Text type=\"p\">{content.name}</Text>\n      </ChannelIconContainerStyled>\n      <Text type=\"p\">{content.cta}</Text>\n    </SocialButtonStyled>\n  )\n}\n\nSocialButton.propTypes = {\n  /** Is the button disabled */\n  disabled: PropTypes.bool,\n  /** Channel */\n  channel: PropTypes.oneOf([\n    'twitter',\n    'instagram',\n    'facebook',\n    'pinterest',\n    'linkedin',\n  ]).isRequired,\n  /** OnClick handler */\n  onClick: PropTypes.func.isRequired,\n}\n\nSocialButton.defaultProps = {\n  disabled: false,\n}\n\nexport default SocialButton\n","level":1,"id":"socialbutton","parentName":"ui","examples":[{"name":"FacebookSocialButton","description":"Facebook Social Button","methods":[],"code":"import React from 'react'\nimport SocialButton from '@bufferapp/ui/SocialButton'\n\n/** Facebook Social Button */\nexport default function ExampleSocialButton() {\n  return (\n    <div style={{ position: 'relative' }}>\n      <SocialButton channel=\"facebook\" onClick={() => {}} />\n    </div>\n  )\n}\n","title":""},{"name":"InstagramSocialButton","description":"Instagram Social Button","methods":[],"code":"import React from 'react'\nimport SocialButton from '@bufferapp/ui/SocialButton'\n\n/** Instagram Social Button */\nexport default function ExampleSocialButton() {\n  return (\n    <div style={{ position: 'relative' }}>\n      <SocialButton channel=\"instagram\" onClick={() => {}} />\n    </div>\n  )\n}\n","title":""},{"name":"LinkedinSocialButton","description":"Linkedin Social Button","methods":[],"code":"import React from 'react'\nimport SocialButton from '@bufferapp/ui/SocialButton'\n\n/** Linkedin Social Button */\nexport default function ExampleSocialButton() {\n  return (\n    <div style={{ position: 'relative' }}>\n      <SocialButton channel=\"linkedin\" onClick={() => {}} />\n    </div>\n  )\n}\n","title":""},{"name":"PinterestSocialButton","description":"Pinterest Social Button","methods":[],"code":"import React from 'react'\nimport SocialButton from '@bufferapp/ui/SocialButton'\n\n/** Pinterest Social Button */\nexport default function ExampleSocialButton() {\n  return (\n    <div style={{ position: 'relative' }}>\n      <SocialButton channel=\"pinterest\" onClick={() => {}} />\n    </div>\n  )\n}\n","title":""},{"name":"TwitterSocialButton","description":"Twitter Social Button","methods":[],"code":"import React from 'react'\nimport SocialButton from '@bufferapp/ui/SocialButton'\n\n/** Twitter Social Button */\nexport default function ExampleSocialButton() {\n  return (\n    <div style={{ position: 'relative' }}>\n      <SocialButton channel=\"twitter\" onClick={() => {}} />\n    </div>\n  )\n}\n","title":""}]},{"name":"States","description":"","props":{"children":{"type":{"name":"node"},"required":true,"description":""},"size":{"type":{"name":"enum","value":[{"value":"'small'","computed":false},{"value":"'large'","computed":false}]},"required":false,"description":"","defaultValue":{"value":"'large'","computed":false}}},"code":"import React from 'react'\n\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport Text from '../Text/Text'\n\nconst Wrapper = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n`\n\nconst MediaWrapper = styled.div<{ size: string }>`\n  width: ${(props): string => (props.size === 'large' ? '420px' : '300px')};\n  height: ${(props): string => (props.size === 'large' ? '280px' : '200px')};\n`\n\nconst HeaderWrapper = styled.div`\n  h2 {\n    max-width: 700px;\n    overflow: hidden;\n    margin-top: 16px;\n    margin-bottom: 8px;\n    text-align: center;\n  }\n\n  h3 {\n    max-width: 400px;\n    overflow: hidden;\n    margin-top: 16px;\n    margin-bottom: 8px;\n    text-align: center;\n  }\n`\n\nconst DescriptionWrapper = styled.div<{ size: string }>`\n  p {\n    margin-top: 0px;\n    margin-bottom: 16px;\n    max-width: ${(props): string =>\n      props.size === 'large' ? '500px' : '400px'};\n    overflow: hidden;\n    text-align: center;\n  }\n`\n\nconst ButtonWrapper = styled.div`\n  width: 80%;\n  display: flex;\n  justify-content: center;\n\n  div:nth-child(2) {\n    margin-left: 8px;\n  }\n`\n\nconst StatesContext = React.createContext()\n\nconst useStatesContext = () => {\n  const context = React.useContext(StatesContext)\n  if (!context) {\n    throw new Error(\n      `States compound components cannot be rendered outside the States component`,\n    )\n  }\n  return context\n}\n\nconst States = ({ children, size }) => (\n  <StatesContext.Provider value={size}>\n    <Wrapper>{children}</Wrapper>\n  </StatesContext.Provider>\n)\n\nStates.propTypes = {\n  children: PropTypes.node.isRequired,\n  size: PropTypes.oneOf(['small', 'large']),\n}\n\nStates.defaultProps = {\n  size: 'large',\n}\n\nconst Image = ({ src, alt }) => {\n  const size = useStatesContext()\n  const height = size === 'large' ? 280 : 200\n  const width = size === 'large' ? 420 : 300\n  return (\n    <div>\n      <img src={src} alt={alt} width={width} height={height} />\n    </div>\n  )\n}\n\nImage.propTypes = {\n  src: PropTypes.string.isRequired,\n  alt: PropTypes.string.isRequired, // fix this prop type later\n}\n\nImage.defaultProps = {}\n\nconst Media = ({ children }) => {\n  const size = useStatesContext()\n    return <MediaWrapper size={size}>{children}</MediaWrapper>\n}\n\nMedia.propTypes = {\n  children: PropTypes.node.isRequired, // fix this prop type later\n}\n\nMedia.defaultProps = {}\n\nconst Header = ({ children }) => {\n  const size = useStatesContext()\n  return (\n    <HeaderWrapper>\n      {size === 'large' && <Text type=\"h2\">{children}</Text>}\n      {size === 'small' && <Text type=\"h3\">{children}</Text>}\n    </HeaderWrapper>\n  )\n}\n\nHeader.propTypes = {\n  children: PropTypes.node.isRequired, // fix this prop type later\n}\n\nHeader.defaultProps = {}\n\nconst Description = ({ children }) => {\n  const size = useStatesContext()\n  return (\n        <DescriptionWrapper size={size}>\n      <Text type=\"p\">{children}</Text>\n    </DescriptionWrapper>\n  )\n}\n\nDescription.propTypes = {\n  children: PropTypes.node.isRequired, // fix this prop type later\n}\n\nDescription.defaultProps = {}\n\nconst Buttons = ({ children }) => <ButtonWrapper>{children}</ButtonWrapper>\n\nButtons.propTypes = {\n  children: PropTypes.node.isRequired, // fix this prop type later\n}\n\nButtons.defaultProps = {}\n\nStates.Image = Image\nStates.Media = Media\nStates.Header = Header\nStates.Description = Description\nStates.Buttons = Buttons\n\nexport default States\n","level":1,"id":"states","parentName":"ui","examples":[{"name":"StatesLarge","description":"States Large (default) Example","methods":[],"code":"import React from 'react'\nimport States from '@bufferapp/ui/States'\nimport Button from '@bufferapp/ui/Button'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  height: 562px;\n  width: 780px;\n  border: 1px solid black;\n`\n\n/** States Large (default) Example */\nexport default function ExampleStates() {\n  return (\n    <Wrapper>\n      <States>\n        <States.Image\n          src=\"./images/illustration2.png\"\n          alt=\"a colourful illustration of a buffer character\"\n        />\n        <States.Header>We are trying to tell you something</States.Header>\n        <States.Description>\n          We have something very important to tell you that you should know\n          about and we would like to kindly tell you what that is.\n        </States.Description>\n        <States.Buttons>\n          <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" />\n        </States.Buttons>\n      </States>\n    </Wrapper>\n  )\n}\n","title":""},{"name":"StatesLargeWithMedia","description":"States Large with Media Example","methods":[],"code":"import React from 'react'\nimport States from '@bufferapp/ui/States'\nimport Button from '@bufferapp/ui/Button'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  height: 562px;\n  width: 780px;\n  border: 1px solid black;\n`\n\n/** States Large with Media Example */\nexport default function ExampleStates() {\n  return (\n    <Wrapper>\n      <States>\n        <States.Media>\n          <iframe\n            title=\"buffer promo vid\"\n            width=\"420\"\n            height=\"280\"\n            src=\"https://www.youtube.com/embed/KHWHAeWQ1u8\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n        </States.Media>\n        <States.Header>We are trying to tell you something</States.Header>\n        <States.Description>\n          We have something very important to tell you that you should know\n          about and we would like to kindly tell you what that is.\n        </States.Description>\n        <States.Buttons>\n          <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" />\n        </States.Buttons>\n      </States>\n    </Wrapper>\n  )\n}\n","title":""},{"name":"StatesLargeWithTwoButtons","description":"States Large With Two Buttons Example","methods":[],"code":"import React from 'react'\nimport States from '@bufferapp/ui/States'\nimport Button from '@bufferapp/ui/Button'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  height: 562px;\n  width: 780px;\n  border: 1px solid black;\n`\n\n/** States Large With Two Buttons Example */\nexport default function ExampleStates() {\n  return (\n    <Wrapper>\n      <States>\n        <States.Image\n          src=\"./images/illustration2.png\"\n          alt=\"a colourful illustration of a buffer character\"\n        />\n        <States.Header>We are trying to tell you something</States.Header>\n        <States.Description>\n          We have something very important to tell you that you should know\n          about and we would like to kindly tell you what that is.\n        </States.Description>\n        <States.Buttons>\n          <Button type=\"secondary\" onClick={() => {}} label=\"Maybe later\" />\n          <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" />\n        </States.Buttons>\n      </States>\n    </Wrapper>\n  )\n}\n","title":""},{"name":"StatesLargeWithoutButtons","description":"States Large without Buttons Example","methods":[],"code":"import React from 'react'\nimport States from '@bufferapp/ui/States'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  height: 562px;\n  width: 780px;\n  border: 1px solid black;\n`\n\n/** States Large without Buttons Example */\nexport default function ExampleStates() {\n  return (\n    <Wrapper>\n      <States>\n        <States.Image\n          src=\"./images/illustration2.png\"\n          alt=\"a colourful illustration of a buffer character\"\n        />\n        <States.Header>We are trying to tell you something</States.Header>\n        <States.Description>\n          We have something very important to tell you that you should know\n          about and we would like to kindly tell you what that is.\n        </States.Description>\n      </States>\n    </Wrapper>\n  )\n}\n","title":""},{"name":"StatesSmall","description":"States Small Example","methods":[],"code":"import React from 'react'\nimport States from '@bufferapp/ui/States'\nimport Button from '@bufferapp/ui/Button'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  height: 426px;\n  width: 480px;\n  border: 1px solid black;\n`\n\n/** States Small Example */\nexport default function ExampleStates() {\n  return (\n    <Wrapper>\n      <States size=\"small\">\n        <States.Image\n          src=\"./images/illustration2.png\"\n          alt=\"a colourful illustration of a buffer character\"\n        />\n        <States.Header>We are trying to tell you something</States.Header>\n        <States.Description>\n          We have something very important to tell you that you should know\n          about and we would like to kindly tell you what that is.\n        </States.Description>\n        <States.Buttons>\n          <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" />\n        </States.Buttons>\n      </States>\n    </Wrapper>\n  )\n}\n","title":""},{"name":"StatesSmallWithMedia","description":"States Small with Media Example","methods":[],"code":"import React from 'react'\nimport States from '@bufferapp/ui/States'\nimport Button from '@bufferapp/ui/Button'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  height: 426px;\n  width: 480px;\n  border: 1px solid black;\n  background-color: white;\n`\n\n/** States Small with Media Example */\nexport default function ExampleStates() {\n  return (\n    <Wrapper>\n      <States size=\"small\">\n        <States.Media>\n          <iframe\n            title=\"buffer promo vid\"\n            width=\"300\"\n            height=\"200\"\n            src=\"https://www.youtube.com/embed/KHWHAeWQ1u8\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n        </States.Media>\n        <States.Header>We are trying to tell you something</States.Header>\n        <States.Description>\n          We have something very important to tell you that you should know\n          about and we would like to kindly tell you what that is.\n        </States.Description>\n        <States.Buttons>\n          <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" />\n        </States.Buttons>\n      </States>\n    </Wrapper>\n  )\n}\n","title":""},{"name":"StatesSmallWithTwoButtons","description":"States Small With Two Buttons Example","methods":[],"code":"import React from 'react'\nimport States from '@bufferapp/ui/States'\nimport Button from '@bufferapp/ui/Button'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  height: 426px;\n  width: 480px;\n  border: 1px solid black;\n`\n\n/** States Small With Two Buttons Example */\nexport default function ExampleStates() {\n  return (\n    <Wrapper>\n      <States size=\"small\">\n        <States.Image\n          src=\"./images/illustration2.png\"\n          alt=\"a colourful illustration of a buffer character\"\n        />\n        <States.Header>We are trying to tell you something</States.Header>\n        <States.Description>\n          We have something very important to tell you that you should know\n          about and we would like to kindly tell you what that is.\n        </States.Description>\n        <States.Buttons>\n          <Button type=\"secondary\" onClick={() => {}} label=\"Maybe later\" />\n          <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" />\n        </States.Buttons>\n      </States>\n    </Wrapper>\n  )\n}\n","title":""},{"name":"StatesSmallWithoutButtons","description":"States Small without Buttons Example","methods":[],"code":"import React from 'react'\nimport States from '@bufferapp/ui/States'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n  height: 426px;\n  width: 480px;\n  border: 1px solid black;\n`\n\n/** States Small without Buttons Example */\nexport default function ExampleStates() {\n  return (\n    <Wrapper>\n      <States size=\"small\">\n        <States.Image\n          src=\"./images/illustration2.png\"\n          alt=\"a colourful illustration of a buffer character\"\n        />\n        <States.Header>We are trying to tell you something</States.Header>\n        <States.Description>\n          We have something very important to tell you that you should know\n          about and we would like to kindly tell you what that is.\n        </States.Description>\n      </States>\n    </Wrapper>\n  )\n}\n","title":""}]},{"name":"Switch","description":"","props":{"label":{"type":{"name":"string"},"required":true,"description":"It adds a label to the left of the switch."},"isOn":{"type":{"name":"bool"},"required":false,"description":"The value for whether the switch is on or off","defaultValue":{"value":"false","computed":false}},"id":{"type":{"name":"string"},"required":true,"description":"The id for the label and input"},"disabled":{"type":{"name":"bool"},"required":false,"description":"It removes pointer and changes it to readonly","defaultValue":{"value":"false","computed":false}},"handleSwitch":{"type":{"name":"func"},"required":true,"description":"It changes the checked value of the switch"}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Input, Span, Wrapper, Container } from './style'\nimport Text from '../Text/Text'\n\nconst Switch = ({ label, id, disabled, handleSwitch, isOn }) => (\n  <Container>\n    <Text htmlFor={id} type=\"label\">\n      {label}\n    </Text>\n    <Wrapper>\n      <Input\n        checked={isOn}\n        onChange={handleSwitch}\n        id={id}\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-checked={isOn}\n        aria-readonly={disabled}\n        disabled={disabled}\n      />\n      <Span aria-hidden=\"true\" />\n    </Wrapper>\n  </Container>\n)\n\nSwitch.propTypes = {\n  /** It adds a label to the left of the switch. */\n  label: PropTypes.string.isRequired,\n  /** The value for whether the switch is on or off */\n  isOn: PropTypes.bool,\n  /** The id for the label and input */\n  id: PropTypes.string.isRequired,\n  /** It removes pointer and changes it to readonly */\n  disabled: PropTypes.bool,\n  /** It changes the checked value of the switch */\n  handleSwitch: PropTypes.func.isRequired,\n}\n\nSwitch.defaultProps = {\n  disabled: false,\n  isOn: false,\n}\n\nexport default Switch\n","level":1,"id":"switch","parentName":"ui","examples":[{"name":"SwitchDisabled","description":"Switch Disabled","methods":[],"code":"import React, { useState } from 'react'\nimport Switch from '@bufferapp/ui/Switch'\n\n/** Switch Disabled */\nexport default function ExampleSwitchDisabled() {\n  const [value, setValue] = useState(false)\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <Switch\n        isOn={value}\n        disabled\n        handleSwitch={() => setValue(!value)}\n        label=\"Notifications\"\n        id=\"switch-disabled\"\n      />\n    </div>\n  )\n}\n","title":""},{"name":"SwitchOff","description":"Switch Off","methods":[],"code":"import React, { useState } from 'react'\nimport Switch from '@bufferapp/ui/Switch'\n\n/** Switch Off */\nexport default function ExampleSwitchOff() {\n  const [value, setValue] = useState(false)\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <Switch\n        isOn={value}\n        disabled={false}\n        handleSwitch={() => setValue(!value)}\n        label=\"Notifications\"\n        id=\"switch-off\"\n      />\n    </div>\n  )\n}\n","title":""},{"name":"SwitchOn","description":"Switch On","methods":[],"code":"import React, { useState } from 'react'\nimport Switch from '@bufferapp/ui/Switch'\n\n/** Switch On */\nexport default function ExampleSwitchOn() {\n  const [value, setValue] = useState(true)\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <Switch\n        isOn={value}\n        disabled={false}\n        handleSwitch={() => setValue(!value)}\n        label={value ? 'On' : 'Off'}\n        id=\"switch-on\"\n      />\n    </div>\n  )\n}\n","title":""}]},{"name":"Tag","description":"","props":{"children":{"type":{"name":"node"},"required":true,"description":"The actual content of the tag."},"color":{"type":{"name":"string"},"required":false,"description":"The color of the tag.","defaultValue":{"value":"'green'","computed":false}},"textColor":{"type":{"name":"string"},"required":false,"description":"The color of the text. It can be: `white`, `gray`, `grayDark`, `blue` and `red`.","defaultValue":{"value":"'white'","computed":false}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport * as Styles from './style'\n\nconst Tag = ({ children, ...props }) => (\n  <Styles.Tag {...props}>{children}</Styles.Tag>\n)\n\nTag.propTypes = {\n  /** The actual content of the tag. */\n  children: PropTypes.node.isRequired,\n  /** The color of the tag. */\n  color: PropTypes.string,\n  /** The color of the text. It can be: `white`, `gray`, `grayDark`, `blue` and `red`. */\n  textColor: PropTypes.string,\n}\n\nTag.defaultProps = {\n  color: 'green',\n  textColor: 'white',\n}\n\nexport default Tag\n","level":1,"id":"tag","parentName":"ui","examples":[{"name":"CountTag","description":"Tag with number","methods":[],"code":"import React from 'react'\nimport Tag from '@bufferapp/ui/Tag'\n\n/** Tag with number */\nexport default function BasicTag() {\n  return (\n    <Tag color=\"grayLight\" textColor=\"grayDark\">\n      10\n    </Tag>\n  )\n}\n","title":""},{"name":"IconTag","description":"Tag with icon","methods":[],"code":"import React from 'react'\nimport Tag from '@bufferapp/ui/Tag'\nimport FlashIcon from '@bufferapp/ui/Icon/Icons/Flash'\n\n/** Tag with icon */\nexport default function IconTag() {\n  return (\n    <Tag color=\"purpleLighter\">\n      <FlashIcon color=\"purple\" />\n    </Tag>\n  )\n}\n","title":""},{"name":"TextTag","description":"Tag with text","methods":[],"code":"import React from 'react'\nimport Tag from '@bufferapp/ui/Tag'\n\n/** Tag with text */\nexport default function TextTag() {\n  return <Tag color=\"green\">New</Tag>\n}\n","title":""}]},{"name":"Text","description":"","props":{"children":{"type":{"name":"node"},"required":false,"description":"The actual text content.","defaultValue":{"value":"undefined","computed":true}},"hasError":{"type":{"name":"bool"},"required":false,"description":"It changes the color of the text to red. <br><i>This is only used for `help`</i>.","defaultValue":{"value":"false","computed":false}},"htmlFor":{"type":{"name":"string"},"required":false,"description":"It's the name of the input it refers to. <br><i>This is only used for `label`.</i>","defaultValue":{"value":"undefined","computed":true}},"color":{"type":{"name":"string"},"required":false,"description":"The color can be: `white`, `gray`, `grayDark`, `blue` and `red`.<br><i>Not used for `span` and `help`.</i>","defaultValue":{"value":"'grayDarker'","computed":false}},"type":{"type":{"name":"string"},"required":false,"description":"The type can be: `h1`, `h2`, `h3`, `p`, `label`, `help`. <br><i>If omitted will return a `span`</i>","defaultValue":{"value":"'span'","computed":false}},"as":{"type":{"name":"string"},"required":false,"description":"If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the \"as\" prop to do this at runtime."}},"code":"import React from 'react'\n\nimport PropTypes from 'prop-types'\nimport * as Styles from './style'\n\nconst Text = ({ children, type, ...props }) => {\n  switch (type) {\n    case 'h1':\n      return <Styles.H1 {...props}>{children}</Styles.H1>\n    case 'h2':\n      return <Styles.H2 {...props}>{children}</Styles.H2>\n    case 'h3':\n      return <Styles.H3 {...props}>{children}</Styles.H3>\n    case 'p':\n      return <Styles.Paragraph {...props}>{children}</Styles.Paragraph>\n    case 'label':\n      return <Styles.Label {...props}>{children}</Styles.Label>\n    case 'help':\n      return <Styles.Help {...props}>{children}</Styles.Help>\n    default:\n      return <Styles.Span>{children}</Styles.Span>\n  }\n}\n\nText.propTypes = {\n  /** The actual text content. */\n  children: PropTypes.node,\n  /** It changes the color of the text to red. <br><i>This is only used for `help`</i>. */\n  hasError: PropTypes.bool,\n  /** It's the name of the input it refers to. <br><i>This is only used for `label`.</i> */\n  htmlFor: PropTypes.string,\n  /** The color can be: `white`, `gray`, `grayDark`, `blue` and `red`.<br><i>Not used for `span` and `help`.</i> */\n  color: PropTypes.string,\n  /** The type can be: `h1`, `h2`, `h3`, `p`, `label`, `help`. <br><i>If omitted will return a `span`</i> */\n  type: PropTypes.string,\n  /** If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the \"as\" prop to do this at runtime. */\n  as: PropTypes.string,\n}\n\nText.defaultProps = {\n  children: undefined,\n  hasError: false,\n  htmlFor: undefined,\n  color: 'grayDarker',\n  type: 'span',\n}\n\nexport default Text\n","level":1,"id":"text","parentName":"ui","examples":[[{"name":"Paragraph","description":"Paragraph","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** Paragraph  */\nexport default function ExampleText() {\n  return <Text type=\"p\">This is a paragraph</Text>\n}\n","title":"basic"},{"name":"Span","description":"Span (default)","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** Span (default) */\nexport default function ExampleText() {\n  return <Text>This is a span</Text>\n}\n","title":"basic"}],[{"name":"H1","description":"H1 Heading","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** H1 Heading */\nexport default function ExampleText() {\n  return <Text type=\"h1\">This is a H1 Heading</Text>\n}\n","title":"heading"},{"name":"H2","description":"H2 Heading","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** H2 Heading */\nexport default function ExampleText() {\n  return <Text type=\"h2\">This is a H2 Heading</Text>\n}\n","title":"heading"},{"name":"H3","description":"H3 Heading","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** H3 Heading */\nexport default function ExampleText() {\n  return <Text type=\"h3\">This is a H3 Heading</Text>\n}\n","title":"heading"}],[{"name":"Help","description":"Help","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** Help */\nexport default function ExampleText() {\n  return (\n    <Text htmlFor=\"foo\" type=\"help\">\n      This is a help Label\n    </Text>\n  )\n}\n","title":"label"},{"name":"HelpWithError","description":"Help with error","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** Help with error */\nexport default function ExampleText() {\n  return (\n    <Text htmlFor=\"foo\" type=\"help\" hasError>\n      This is a help with error Label\n    </Text>\n  )\n}\n","title":"label"},{"name":"Label","description":"Label","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** Label */\nexport default function ExampleText() {\n  return (\n    <Text htmlFor=\"foo\" type=\"label\">\n      This is a Label\n    </Text>\n  )\n}\n","title":"label"},{"name":"LabelColored","description":"Label (color)","methods":[],"code":"import React from 'react'\nimport Text from '@bufferapp/ui/Text'\n\n/** Label (color) */\nexport default function ExampleText() {\n  return (\n    <Text htmlFor=\"foo\" type=\"label\" color=\"gray\">\n      This is a colored Label\n    </Text>\n  )\n}\n","title":"label"}]]},{"name":"Text Area","description":"","props":{"label":{"type":{"name":"string"},"required":true,"description":"It adds a label on top of the textarea box."},"placeholder":{"type":{"name":"string"},"required":false,"description":"It's the placeholder value of the textarea.","defaultValue":{"value":"undefined","computed":true}},"hasError":{"type":{"name":"bool"},"required":false,"description":"It colors the field in red.","defaultValue":{"value":"false","computed":false}},"disabled":{"type":{"name":"bool"},"required":false,"description":"It disables the textarea field.","defaultValue":{"value":"false","computed":false}},"onChange":{"type":{"name":"func"},"required":true,"description":"The onChange event"},"rows":{"type":{"name":"number"},"required":false,"description":"Number of rows, max 20","defaultValue":{"value":"4","computed":false}},"id":{"type":{"name":"string"},"required":true,"description":"The id to link the textarea with the label"},"fullHeight":{"type":{"name":"bool"},"required":false,"description":"If the textarea should take the height of the parent div","defaultValue":{"value":"false","computed":false}},"forwardRef":{"type":{"name":"union","value":[{"name":"func"},{"name":"shape","value":{"current":{"name":"instanceOf","value":"Element","required":false}}}]},"required":false,"description":"this consumed by the default export that is wrapping the component into a ForwardRef\n@ignore","defaultValue":{"value":"undefined","computed":true}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport Text from '../Text'\nimport { HelpTextWrapper, HelpText } from '../Input/style'\nimport { Warning } from '../Icon'\nimport { Container, StyledTextArea } from './style'\n\nexport default class TextArea extends React.Component {\n  render() {\n    const {\n            value,\n            label,\n            hasError,\n            help,\n            disabled,\n            rows,\n            onChange,\n            id,\n            fullHeight,\n            forwardRef,\n      ...props\n    } = this.props\n    return (\n      <Container>\n        <Text htmlFor={id} type=\"label\">\n          {label}\n        </Text>\n        <StyledTextArea\n          id={id}\n          {...props}\n          hasError={hasError}\n          disabled={disabled}\n          rows={rows > 20 ? 20 : rows}\n          value={value}\n          onChange={onChange}\n          fullHeight={fullHeight}\n          ref={forwardRef}\n        />\n        {hasError && (\n          <HelpTextWrapper>\n            <Warning size=\"medium\" />\n            <HelpText type=\"help\" htmlFor={id} hasError={hasError}>\n              {help}\n            </HelpText>\n          </HelpTextWrapper>\n        )}\n      </Container>\n    )\n  }\n}\n\nTextArea.propTypes = {\n  /** It adds a label on top of the textarea box. */\n  label: PropTypes.string.isRequired,\n  /** It's the placeholder value of the textarea. */\n  placeholder: PropTypes.string,\n  /** It colors the field in red. */\n  hasError: PropTypes.bool,\n  /** It disables the textarea field. */\n  disabled: PropTypes.bool,\n  /** The onChange event */\n  onChange: PropTypes.func.isRequired,\n  /** Number of rows, max 20 */\n  rows: PropTypes.number,\n  /** The id to link the textarea with the label */\n  id: PropTypes.string.isRequired,\n  /** If the textarea should take the height of the parent div */\n  fullHeight: PropTypes.bool,\n  /**\n   * this consumed by the default export that is wrapping the component into a ForwardRef\n   * @ignore\n   */\n  forwardRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]),\n}\n\nTextArea.defaultProps = {\n  placeholder: undefined,\n  hasError: false,\n  disabled: false,\n  rows: 4,\n  fullHeight: false,\n  forwardRef: undefined,\n}\n","level":1,"id":"textarea","parentName":"ui","examples":[{"name":"TextArea","description":"TextArea Example","methods":[],"code":"import React from 'react'\nimport TextArea from '@bufferapp/ui/TextArea'\n\n/** TextArea Example */\nexport default function ExampleTextArea() {\n  return (\n    <TextArea\n      label=\"Textarea (Normal)\"\n      placeholder=\"placeholder\"\n      onChange={() => {}}\n      id=\"example1\"\n    />\n  )\n}\n","title":""},{"name":"TextAreaDisabled","description":"TextArea Disabled Example","methods":[],"code":"import React from 'react'\nimport TextArea from '@bufferapp/ui/TextArea'\n\n/** TextArea Disabled Example */\nexport default function ExampleTextArea() {\n  return (\n    <TextArea\n      label=\"Textarea (Disabled)\"\n      placeholder=\"placeholder\"\n      onChange={() => {}}\n      value=\"hello, world!\"\n      disabled\n      id=\"example2\"\n    />\n  )\n}\n","title":""},{"name":"TextAreaFullHeight","description":"TextArea FullHeight Example","methods":[],"code":"import React from 'react'\nimport TextArea from '@bufferapp/ui/TextArea'\nimport styled from 'styled-components'\n\nconst StyledDiv = styled.div`\n  height: 400px;\n`\n\n/** TextArea FullHeight Example */\nexport default function ExampleTextArea() {\n  return (\n    <StyledDiv>\n      <TextArea\n        label=\"Textarea (Full Height)\"\n        placeholder=\"placeholder\"\n        onChange={() => {}}\n        id=\"example1\"\n        fullHeight\n      />\n    </StyledDiv>\n  )\n}\n","title":""},{"name":"TextAreaWithError","description":"TextArea With Error Example","methods":[],"code":"import React from 'react'\nimport TextArea from '@bufferapp/ui/TextArea'\n\n/** TextArea With Error Example */\nexport default function ExampleTextArea() {\n  return (\n    <TextArea\n      label=\"Textarea (Error)\"\n      placeholder=\"placeholder\"\n      onChange={() => {}}\n      hasError\n      help=\"nope\"\n      id=\"example3\"\n      value=\"this is a textarea with an error\"\n    />\n  )\n}\n","title":""}]},{"name":"Tooltip","description":"","props":{"children":{"type":{"name":"node"},"required":true,"description":"The component being wrapped"},"label":{"type":{"name":"string"},"required":false,"description":"The tooltip label","defaultValue":{"value":"''","computed":false}},"position":{"type":{"name":"string"},"required":false,"description":"The tooltip position","defaultValue":{"value":"'bottom'","computed":false}},"verticalAlign":{"type":{"name":"string"},"required":false,"description":"The tooltip vertical position: this only applies for left and right positioned tooltip","defaultValue":{"value":"'center'","computed":false}},"hotkey":{"type":{"name":"string"},"required":false,"description":"The tooltip position","defaultValue":{"value":"''","computed":false}},"customLabel":{"type":{"name":"node"},"required":false,"description":"Custom Label","defaultValue":{"value":"''","computed":false}},"opacity":{"type":{"name":"number"},"required":false,"description":"Custom Opacity","defaultValue":{"value":"1","computed":false}}},"code":"import React from 'react'\nimport PropTypes from 'prop-types'\nimport '@reach/tooltip/styles.css'\nimport * as Styles from './style'\nimport { gray, white } from '../style/colors'\n\nclass Tooltip extends React.Component {\n    constructor(props) {\n    super(props)\n\n    this.setTooltipPosition = this.setTooltipPosition.bind(this)\n    this.state = {\n      childWidth: 0,\n    }\n  }\n\n  componentDidMount() {\n    this.setTooltipPosition()\n    window.addEventListener('resize', this.setTooltipPosition)\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this.setTooltipPosition)\n  }\n\n  setTooltipPosition() {\n    // Getting the first child width to calculate Tooltip position\n        if (this.tooltipWrapper) {\n            const childWidth = this.tooltipWrapper.children[0].children[0].getBoundingClientRect()\n        .width\n      this.setState({\n        childWidth,\n      })\n    }\n  }\n\n  /**\n   * Adjusting the styles according to the desired position\n   * The tooltip should be vertically or horizontally centered\n   */\n    getTooltipPosition(triggerRect, tooltipRect, position, verticalAlign) {\n        const { childWidth } = this.state\n    const gap = 8\n    const triggerCenter = triggerRect.left + childWidth / 2\n    const left = triggerCenter - tooltipRect.width / 2\n    const maxLeft = window.innerWidth - tooltipRect.width - 2\n    const verticalCenter =\n      triggerRect.top +\n      triggerRect.height -\n      (triggerRect.height + tooltipRect.height) / 2 -\n      window.scrollY\n    const verticalTop = triggerRect.top\n    const topPosition = verticalAlign === 'top' ? verticalTop : verticalCenter\n\n    const newPosition = {\n      left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,\n      top: triggerRect.bottom + gap + window.scrollY,\n    }\n\n    switch (position) {\n      case 'top':\n        newPosition.top =\n          triggerRect.top - tooltipRect.height - gap - window.scrollY\n        break\n\n      case 'right':\n        newPosition.left = triggerRect.left + childWidth + gap + window.scrollX\n        newPosition.top = topPosition\n        break\n\n      case 'left':\n        newPosition.left =\n          triggerRect.left - tooltipRect.width - gap - window.scrollX\n        newPosition.top = topPosition\n        break\n\n      default:\n    }\n\n    return newPosition\n  }\n\n  /**\n   * Rendering label with hotkey option if available\n   */\n    renderLabel = (label, hotkey, customLabel = null) => (\n    <Styles.LabelWrapper>\n      {label && (\n        <Styles.Label color={white}>\n          <Styles.HotkeyWrapper>\n            {label}\n            {hotkey && (\n              <Styles.Label color={gray} isHotkey>\n                {hotkey}\n              </Styles.Label>\n            )}\n          </Styles.HotkeyWrapper>\n        </Styles.Label>\n      )}\n      {customLabel}\n    </Styles.LabelWrapper>\n  )\n\n  render() {\n    const {\n      children,\n            label,\n            position,\n            verticalAlign,\n            hotkey,\n            customLabel,\n            opacity,\n    } = this.props\n\n    const renderTooltip = label || customLabel\n\n    // @todo: remove style from here and use the Styled component\n    // We are currently adding the stylings with the style tag,\n    // instead of the adding it in the Styled component\n    // because we still need to figure out a way to load the css file\n    // properly, and being able to use our customs styles.\n    return (\n      <React.Fragment>\n        {renderTooltip ? (\n                    <Styles.TooltipWrapper ref={(node) => (this.tooltipWrapper = node)}>\n            <Styles.TooltipStyled\n              label={this.renderLabel(label, hotkey, customLabel)}\n                            position={(triggerRect, tooltipRect) =>\n                this.getTooltipPosition(\n                  triggerRect,\n                  tooltipRect,\n                  position,\n                  verticalAlign,\n                )\n              }\n              style={Styles.TooltipStyle}\n              opacity={opacity}\n            >\n              <div>{children}</div>\n            </Styles.TooltipStyled>\n          </Styles.TooltipWrapper>\n        ) : (\n          <div>{children}</div>\n        )}\n      </React.Fragment>\n    )\n  }\n}\n\nTooltip.propTypes = {\n  /** The component being wrapped */\n  children: PropTypes.node.isRequired,\n\n  /** The tooltip label */\n  label: PropTypes.string,\n\n  /** The tooltip position */\n  position: PropTypes.string,\n\n  /** The tooltip vertical position: this only applies for left and right positioned tooltip */\n  verticalAlign: PropTypes.string,\n\n  /** The tooltip position */\n  hotkey: PropTypes.string,\n\n  /** Custom Label */\n  customLabel: PropTypes.node,\n\n  /** Custom Opacity */\n  opacity: PropTypes.number,\n}\n\nTooltip.defaultProps = {\n  label: '',\n  position: 'bottom',\n  verticalAlign: 'center',\n  hotkey: '',\n  customLabel: '',\n  opacity: 1,\n}\n\nexport default Tooltip\n","level":1,"id":"tooltip","parentName":"ui","examples":[[{"name":"customOpacity","description":"With custom opacity","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Avatar from '@bufferapp/ui/Avatar'\n\n/** With custom opacity */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip\n      label=\"My Tooltip Label with multiple lines. Adding up an example here with a long tooltip text.\"\n      opacity={0.8}\n    >\n      <Avatar\n        src=\"https://s3.amazonaws.com/buffer-ui/Default+Avatar.png\"\n        alt=\"@joelgascoigne\"\n        size=\"medium\"\n      />\n    </Tooltip>\n  )\n}\n","title":"option"},{"name":"multiline","description":"Multiline","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Avatar from '@bufferapp/ui/Avatar' // eslint-disable-line\n\n/** Multiline */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip label=\"My Tooltip Label with multiple lines. Adding up an example here with a long tooltip text.\">\n      <Avatar\n        src=\"https://s3.amazonaws.com/buffer-ui/Default+Avatar.png\"\n        alt=\"@joelgascoigne\"\n        size=\"medium\"\n      />\n    </Tooltip>\n  )\n}\n","title":"option"},{"name":"withCustomLabel","description":"With CustomLabel","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Avatar from '@bufferapp/ui/Avatar' // eslint-disable-line\n\nconst customLabel = (\n  <div>\n    <span style={{ color: '#21F32A' }}>0.4%</span>\n    <p style={{ display: 'inline' }}> potential reach</p>\n  </div>\n)\n\n/** With CustomLabel */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip customLabel={customLabel} position=\"bottom\">\n      <Avatar\n        src=\"https://s3.amazonaws.com/buffer-ui/Default+Avatar.png\"\n        alt=\"@joelgascoigne\"\n        size=\"medium\"\n      />\n    </Tooltip>\n  )\n}\n","title":"option"},{"name":"withHotkey","description":"With Hotkey","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Avatar from '@bufferapp/ui/Avatar' // eslint-disable-line\n\n/** With Hotkey */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip\n      label=\"My Tooltip Label with multiple lines. Adding up an example here with a long tooltip text.\"\n      position=\"bottom\"\n      hotkey=\"⌘+C\"\n    >\n      <Avatar\n        src=\"https://s3.amazonaws.com/buffer-ui/Default+Avatar.png\"\n        alt=\"@joelgascoigne\"\n        size=\"medium\"\n      />\n    </Tooltip>\n  )\n}\n","title":"option"}],[{"name":"bottom","description":"Bottom Aligned","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Button from '@bufferapp/ui/Button'\n\n/** Bottom Aligned */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip label=\"My Tooltip Label 🙌\" position=\"bottom\" hotkey=\"⌘+C\">\n      <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" fullWidth />\n    </Tooltip>\n  )\n}\n","title":"position"},{"name":"left","description":"Left Aligned","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Button from '@bufferapp/ui/Button'\n\n/** Left Aligned */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip label=\"My Tooltip Label 🙌\" position=\"left\">\n      <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" fullWidth />\n    </Tooltip>\n  )\n}\n","title":"position"},{"name":"right","description":"Right Aligned","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Button from '@bufferapp/ui/Button'\n\n/** Right Aligned */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip label=\"My Tooltip Label 🙌\" position=\"right\">\n      <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" fullWidth />\n    </Tooltip>\n  )\n}\n","title":"position"},{"name":"top","description":"Top Aligned","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Button from '@bufferapp/ui/Button'\n\n/** Top Aligned */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip label=\"My Tooltip Label 🙌\" position=\"top\">\n      <Button type=\"primary\" onClick={() => {}} label=\"Click Me\" fullWidth />\n    </Tooltip>\n  )\n}\n","title":"position"},{"name":"withVerticalAlign","description":"Left Aligned with Top vertical alignment","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Text from '@bufferapp/ui/Text'\nimport styled from 'styled-components'\nimport { gray, white } from '@bufferapp/ui/style/colors'\n\nconst Wrapper = styled.div`\n  height: 80px;\n  padding: 10px;\n  background-color: ${gray};\n  color: ${white};\n  cursor: pointer;\n`\n\n/** Left Aligned with Top vertical alignment */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip\n      label=\"My top aligned Tooltip 🙌\"\n      position=\"left\"\n      verticalAlign=\"top\"\n    >\n      <Wrapper>\n        <Text type=\"label\">Content</Text>\n      </Wrapper>\n    </Tooltip>\n  )\n}\n","title":"position"}],[{"name":"notVisible","description":"Not visible","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Avatar from '@bufferapp/ui/Avatar' // eslint-disable-line\n\n/** Not visible */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip>\n      <Avatar\n        src=\"https://s3.amazonaws.com/buffer-ui/Default+Avatar.png\"\n        alt=\"@joelgascoigne\"\n        size=\"medium\"\n      />\n    </Tooltip>\n  )\n}\n","title":"visibility"},{"name":"visible","description":"Visible","methods":[],"code":"import React from 'react'\nimport Tooltip from '@bufferapp/ui/Tooltip'\nimport Avatar from '@bufferapp/ui/Avatar' // eslint-disable-line\n\n/** Visible */\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip label=\"Visible tooltip\">\n      <Avatar\n        src=\"https://s3.amazonaws.com/buffer-ui/Default+Avatar.png\"\n        alt=\"@joelgascoigne\"\n        size=\"medium\"\n      />\n    </Tooltip>\n  )\n}\n","title":"visibility"}]]}]}