{"version":3,"sources":["../../../src/Badge/NumberBadge/NumberBadge.tsx","../../../src/Badge/NumberBadge/NumberBadge.css.ts"],"names":["forwardRef","css","vars","variantMap","numberBadgeCSS","jsx","NumberBadge","number","as","size","native","sx","variant","className","ref","__spreadProps","__spreadValues"],"mappings":";6aAGA,OAAS,cAAAA,MAAkB,QCH3B,OAAS,OAAAC,MAAW,iBACpB,OAAS,QAAAC,MAAY,sBAEd,IAAMC,EAAa,CACxB,QAAS,CACP,QAAS,CACP,qBAAsBD,EAAK,SAAS,MAAM,eAC1C,UAAWA,EAAK,SAAS,MAAM,WACjC,EACA,UAAW,CACT,qBAAsBA,EAAK,SAAS,MAAM,sBAC1C,UAAWA,EAAK,SAAS,MAAM,OACjC,EACA,OAAQ,CACN,qBAAsBA,EAAK,SAAS,MAAM,wBAC1C,UAAWA,EAAK,SAAS,MAAM,IACjC,EACA,SAAU,CACR,qBAAsBA,EAAK,SAAS,MAAM,uBAC1C,UAAWA,EAAK,SAAS,MAAM,IACjC,EACA,kBAAmB,CACjB,qBAAsBA,EAAK,SAAS,MAAM,QAC1C,UAAWA,EAAK,SAAS,MAAM,IACjC,EACA,oBAAqB,CACnB,qBAAsBA,EAAK,SAAS,MAAM,QAC1C,UAAWA,EAAK,SAAS,MAAM,OACjC,EACA,iBAAkB,CAChB,qBAAsBA,EAAK,SAAS,MAAM,QAC1C,UAAWA,EAAK,SAAS,MAAM,UACjC,EACA,mBAAoB,CAClB,qBAAsBA,EAAK,SAAS,MAAM,QAC1C,UAAWA,EAAK,SAAS,MAAM,YACjC,CACF,EACA,KAAM,CACJ,MAAO,CACL,YAAa,GAAGA,EAAK,QAAQ,CAAG,CAAC,IAAIA,EAAK,QAAQ,EAAI,CAAC,GACvD,cAAe,OAEf,cAAeA,EAAK,SAAS,SAAS,EACtC,gBAAiBA,EAAK,WAAW,CAAC,EAClC,gBAAiBA,EAAK,WAAW,QACnC,EACA,OAAQ,CACN,YAAa,GAAGA,EAAK,QAAQ,IAAI,CAAC,IAAIA,EAAK,QAAQ,EAAI,CAAC,GACxD,cAAe,OAEf,cAAeA,EAAK,SAAS,OAC7B,gBAAiBA,EAAK,WAAW,CAAC,EAClC,gBAAiBA,EAAK,WAAW,QACnC,EACA,MAAO,CACL,YAAa,KAAKA,EAAK,QAAQ,EAAI,CAAC,GACpC,cAAe,OAEf,cAAeA,EAAK,SAAS,MAC7B,gBAAiBA,EAAK,WAAW,CAAG,EACpC,gBAAiBA,EAAK,WAAW,QACnC,CACF,CACF,EAEaE,EAAiBH,EAAI,CAChC,QAAS,eACT,cAAe,SACf,UAAW,SAGX,gBAAiB,0BACjB,MAAO,eAGP,QAAS,iBACT,SAAU,mBACV,SAAU,mBACV,WAAY,qBACZ,WAAY,qBAEZ,iBAAkB,CAChB,gBAAiBC,EAAK,SAAS,MAAM,WACrC,MAAOA,EAAK,SAAS,MAAM,YAC7B,EAEA,aAAcA,EAAK,QAAQ,IAC7B,CAAC,EDlEG,cAAAG,MAAA,6BATG,IAAMC,EAAoCN,EAAW,SAG1D,CAAE,OAAAO,EAAQ,GAAAC,EAAI,KAAAC,EAAO,SAAU,OAAAC,EAAQ,GAAAC,EAAI,QAAAC,EAAS,UAAAC,CAAU,EAC9DC,EACA,CAGA,OACET,EAHcG,GAAM,OAGnBO,EAAAC,EAAA,CACC,IAAKF,EACL,UAAWD,GACPH,GAHL,CAIC,MAAOM,MAAA,GACFb,EAAW,QAAQS,CAAO,GAC1BT,EAAW,KAAKM,CAAI,GACpBC,GAAA,YAAAA,EAAQ,OAEb,IAAK,CAACN,EAAgBO,CAAE,EAEvB,SAAAJ,GACH,CAEJ,CAAC","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { numberBadgeCSS, variantMap } from \"./NumberBadge.css\";\nimport type { NumberBadgeProps } from \"./NumberBadge.types\";\n\ntype NumberBadgeComponent = <E extends ElementType>(\n  props: NumberBadgeProps<E> & {\n    ref?: ComponentPropsWithRef<E>[\"ref\"];\n  },\n) => JSX.Element | null;\n\nexport const NumberBadge: NumberBadgeComponent = forwardRef(function ClayNumberBadge<\n  E extends ElementType,\n>(\n  { number, as, size = \"medium\", native, sx, variant, className }: NumberBadgeProps<E>,\n  ref: ComponentPropsWithRef<E>[\"ref\"],\n) {\n  const Element = as || \"span\";\n\n  return (\n    <Element\n      ref={ref}\n      className={className}\n      {...native}\n      style={{\n        ...variantMap.variant[variant],\n        ...variantMap.size[size],\n        ...native?.style,\n      }}\n      css={[numberBadgeCSS, sx]}\n    >\n      {number}\n    </Element>\n  );\n});\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const variantMap = {\n  variant: {\n    primary: {\n      \"--background-color\": vars.semantic.color.surfaceInverse,\n      \"--color\": vars.semantic.color.textInverse,\n    },\n    secondary: {\n      \"--background-color\": vars.semantic.color.surfaceSlateSecondary,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    accent: {\n      \"--background-color\": vars.semantic.color.surfaceHighlightPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    critical: {\n      \"--background-color\": vars.semantic.color.surfaceCriticalPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"primary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"secondary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    \"accent-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textAccent,\n    },\n    \"critical-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textCritical,\n    },\n  } as Record<string, Record<string, string>>,\n  size: {\n    small: {\n      \"--padding\": `${vars.spacing[\"1\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-xsmall\n      \"--font-size\": vars.fontSize[\"2xsmall\"],\n      \"--line-height\": vars.lineHeight[3],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    medium: {\n      \"--padding\": `${vars.spacing[\"05\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-small-bold\n      \"--font-size\": vars.fontSize.xsmall,\n      \"--line-height\": vars.lineHeight[4],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    large: {\n      \"--padding\": `0 ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"24px\",\n      // label-medium-bold\n      \"--font-size\": vars.fontSize.small,\n      \"--line-height\": vars.lineHeight[\"6\"],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n  } as Record<string, Record<string, string>>,\n};\n\nexport const numberBadgeCSS = css({\n  display: \"inline-block\",\n  verticalAlign: \"middle\",\n  textAlign: \"center\",\n\n  // variant styles\n  backgroundColor: \"var(--background-color)\",\n  color: \"var(--color)\",\n\n  // size styles\n  padding: \"var(--padding)\",\n  minWidth: \"var(--min-width)\",\n  fontSize: \"var(--font-size)\",\n  lineHeight: \"var(--line-height)\",\n  fontWeight: \"var(--font-weight)\",\n\n  \"*:disabled > &\": {\n    backgroundColor: vars.semantic.color.surfaceSub,\n    color: vars.semantic.color.textDisabled,\n  },\n\n  borderRadius: vars.rounded.full,\n});\n"]}