@chakra-ui/tag/dist/chunk-RPO2WXNL.mjs.map

This component displays as a tag with an optional link and/or button to remove the given tag.

{"version":3,"sources":["../src/tag.tsx"],"sourcesContent":["import { Icon, IconProps } from \"@chakra-ui/icon\"\nimport { createContext } from \"@chakra-ui/react-context\"\nimport {\n  chakra,\n  forwardRef,\n  HTMLChakraProps,\n  omitThemingProps,\n  SystemStyleObject,\n  ThemingProps,\n  useMultiStyleConfig,\n} from \"@chakra-ui/system\"\n\nconst [TagStylesProvider, useTagStyles] = createContext<\n  Record<string, SystemStyleObject>\n>({\n  name: `TagStylesContext`,\n  errorMessage: `useTagStyles returned is 'undefined'. Seems you forgot to wrap the components in \"<Tag />\" `,\n})\n\nexport { useTagStyles }\n\nexport interface TagProps\n  extends HTMLChakraProps<\"span\">,\n    ThemingProps<\"Tag\"> {}\n\n/**\n * The tag component is used to label or categorize UI elements.\n * To style the tag globally, change the styles in `theme.components.Tag`\n * @see Docs https://chakra-ui.com/tag\n */\nexport const Tag = forwardRef<TagProps, \"span\">((props, ref) => {\n  const styles = useMultiStyleConfig(\"Tag\", props)\n  const ownProps = omitThemingProps(props)\n\n  const containerStyles: SystemStyleObject = {\n    display: \"inline-flex\",\n    verticalAlign: \"top\",\n    alignItems: \"center\",\n    maxWidth: \"100%\",\n    ...styles.container,\n  }\n\n  return (\n    <TagStylesProvider value={styles}>\n      <chakra.span ref={ref} {...ownProps} __css={containerStyles} />\n    </TagStylesProvider>\n  )\n})\n\nTag.displayName = \"Tag\"\n\nexport interface TagLabelProps extends HTMLChakraProps<\"span\"> {}\n\nexport const TagLabel = forwardRef<TagLabelProps, \"span\">((props, ref) => {\n  const styles = useTagStyles()\n  return <chakra.span ref={ref} noOfLines={1} {...props} __css={styles.label} />\n})\n\nTagLabel.displayName = \"TagLabel\"\n\nexport const TagLeftIcon = forwardRef<IconProps, \"svg\">((props, ref) => (\n  <Icon ref={ref} verticalAlign=\"top\" marginEnd=\"0.5rem\" {...props} />\n))\n\nTagLeftIcon.displayName = \"TagLeftIcon\"\n\nexport const TagRightIcon = forwardRef<IconProps, \"svg\">((props, ref) => (\n  <Icon ref={ref} verticalAlign=\"top\" marginStart=\"0.5rem\" {...props} />\n))\n\nTagRightIcon.displayName = \"TagRightIcon\"\n\nconst TagCloseIcon: React.FC<IconProps> = (props) => (\n  <Icon verticalAlign=\"inherit\" viewBox=\"0 0 512 512\" {...props}>\n    <path\n      fill=\"currentColor\"\n      d=\"M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z\"\n    />\n  </Icon>\n)\n\nTagCloseIcon.displayName = \"TagCloseIcon\"\n\nexport interface TagCloseButtonProps\n  extends Omit<HTMLChakraProps<\"button\">, \"disabled\"> {\n  /**\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\n/**\n * TagCloseButton is used to close \"remove\" the tag\n * @see Docs https://chakra-ui.com/tag\n */\nexport const TagCloseButton = forwardRef<TagCloseButtonProps, \"button\">(\n  (props, ref) => {\n    const { isDisabled, children, ...rest } = props\n\n    const styles = useTagStyles()\n\n    const btnStyles: SystemStyleObject = {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      outline: \"0\",\n      ...styles.closeButton,\n    }\n\n    return (\n      <chakra.button\n        ref={ref}\n        aria-label=\"close\"\n        {...rest}\n        type=\"button\"\n        disabled={isDisabled}\n        __css={btnStyles}\n      >\n        {children || <TagCloseIcon />}\n      </chakra.button>\n    )\n  },\n)\n\nTagCloseButton.displayName = \"TagCloseButton\"\n"],"mappings":";;;AAAA,SAAS,YAAuB;AAChC,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAGA;AAAA,OACK;AAkCD;AAhCN,IAAM,CAAC,mBAAmB,YAAY,IAAI,cAExC;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAaM,IAAM,MAAM,WAA6B,CAAC,OAAO,QAAQ;AAC9D,QAAM,SAAS,oBAAoB,OAAO,KAAK;AAC/C,QAAM,WAAW,iBAAiB,KAAK;AAEvC,QAAM,kBAAqC;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,EACZ;AAEA,SACE,oBAAC,qBAAkB,OAAO,QACxB,8BAAC,OAAO,MAAP,EAAY,KAAW,GAAG,UAAU,OAAO,iBAAiB,GAC/D;AAEJ,CAAC;AAED,IAAI,cAAc;AAIX,IAAM,WAAW,WAAkC,CAAC,OAAO,QAAQ;AACxE,QAAM,SAAS,aAAa;AAC5B,SAAO,oBAAC,OAAO,MAAP,EAAY,KAAU,WAAW,GAAI,GAAG,OAAO,OAAO,OAAO,OAAO;AAC9E,CAAC;AAED,SAAS,cAAc;AAEhB,IAAM,cAAc,WAA6B,CAAC,OAAO,QAC9D,oBAAC,QAAK,KAAU,eAAc,OAAM,WAAU,UAAU,GAAG,OAAO,CACnE;AAED,YAAY,cAAc;AAEnB,IAAM,eAAe,WAA6B,CAAC,OAAO,QAC/D,oBAAC,QAAK,KAAU,eAAc,OAAM,aAAY,UAAU,GAAG,OAAO,CACrE;AAED,aAAa,cAAc;AAE3B,IAAM,eAAoC,CAAC,UACzC,oBAAC,QAAK,eAAc,WAAU,SAAQ,eAAe,GAAG,OACtD;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,GAAE;AAAA;AACJ,GACF;AAGF,aAAa,cAAc;AAcpB,IAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,YAAY,UAAU,GAAG,KAAK,IAAI;AAE1C,UAAM,SAAS,aAAa;AAE5B,UAAM,YAA+B;AAAA,MACnC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC;AAAA,QACA,cAAW;AAAA,QACV,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO;AAAA,QAEN,sBAAY,oBAAC,gBAAa;AAAA;AAAA,IAC7B;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;","names":[]}