npm - @fanvue/ui - Versions diffs - 2.21.0 → 3.0.0 - Mend

@fanvue/ui 2.21.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (227) hide show

package/dist/cjs/components/Chart/ChartCard.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartCard.cjs","sources":["../../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. /\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /* Card title text. Pass translated string for i18n. /\n title: React.ReactNode;\n /* Large subtitle value (e.g. formatted price or count). /\n subtitle?: React.ReactNode;\n /* Tooltip text shown next to the title. Pass translated string for i18n. /\n tooltip?: React.ReactNode;\n /* Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" /\n tooltipAriaLabel?: string;\n /* Date range or period label shown below the subtitle. /\n dateInfo?: React.ReactNode;\n /* Trend indicator chip config. /\n trendChip?: {\n /* Display label (e.g. \"12.5%\"). /\n label: React.ReactNode;\n /* Whether the trend is positive (green) or negative (red). /\n trend: \"positive\" \| \"negative\";\n };\n /* Show loading skeleton instead of content. @default false /\n loading?: boolean;\n /* Chart content rendered below the header. /\n children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" \| \"negative\", string> = {\n positive: \"bg-success-surface text-success-content\",\n negative: \"bg-error-surface text-error-content\",\n};\n\n/\n Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n \n @example\n * ```tsx\n * <ChartCard\n * title=\"Revenue\"\n * subtitle=\"$4,523\"\n * trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n * dateInfo=\"Jan 1 – Mar 17\"\n * tooltip=\"Total revenue for the selected period.\"\n * >\n * <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n (\n {\n className,\n title,\n subtitle,\n tooltip,\n tooltipAriaLabel = \"More info\",\n dateInfo,\n trendChip,\n loading = false,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Card ref={ref} variant=\"outlined\" noPadding className={className} {...props}>\n <div className=\"flex flex-col gap-2 p-4\">\n {loading ? (\n <>\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-4 w-32\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-7 w-44\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-3 w-24\" />\n </>\n ) : (\n <>\n <div className=\"flex items-center gap-1.5\">\n <span className=\"typography-~~semibold-~~body-md text-content-primary\">{title}</span>\n {tooltip && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n aria-label={tooltipAriaLabel}\n icon={<InfoCircleIcon className=\"size-4 text-content-tertiary\" />}\n />\n </TooltipTrigger>\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n {subtitle && (\n <div className=\"flex items-center gap-2\">\n <span className=\"typography-~~bold~~-heading-sm text-content-primary\">\n {subtitle}\n </span>\n {trendChip && (\n <span\n className={cn(\n \"typography-~~semibold~~-~~body~~-sm rounded-full px-2 py-0.5\",\n TREND_CLASSES[trendChip.trend],\n )}\n >\n {trendChip.label}\n </span>\n )}\n </div>\n )}\n {dateInfo && (\n <span className=\"typography-~~regular~~-~~body~~-sm text-content-tertiary\">{dateInfo}</span>\n )}\n </>\n )}\n <div className=\"mt-auto\">{children}</div>\n </div>\n </Card>\n );\n },\n);\nChartCard.displayName = \"ChartCard\";\n"],"names":["React","jsx","Card","jsxs","Fragment","Skeleton","TooltipProvider","Tooltip","TooltipTrigger","IconButton","InfoCircleIcon","TooltipContent","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,gBAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,UAAU;AACZ;AAoBO,MAAM,YAAYA,iBAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,KAAU,SAAQ,YAAW,WAAS,MAAC,WAAuB,GAAG,OACrE,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,UACCA,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,QAAAH,+BAACI,SAAAA,YAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,WAAA,CAAW;AAAA,MAAA,EAAA,CACpE,IAEAF,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~oDAAoD~~,UAAA,~~OAAM~~;AAAA,~~UACzE~~,WACCA,2BAAAA,IAACK,yBAAA,EACC,UAAAH,gCAACI,QAAAA,SAAA,EACC,UAAA;AAAA,YAAAN,2BAAAA,IAACO,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAP,2BAAAA;AAAAA,cAACQ,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,MAAMR,2BAAAA,IAACS,eAAAA,gBAAA,EAAe,WAAU,+BAAA,CAA+B;AAAA,cAAA;AAAA,YAAA,GAEnE;AAAA,YACAT,2BAAAA,IAACU,QAAAA,kBAAgB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC3B,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACC,YACCR,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~mDACb~~,UAAA,UACH;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWW,GAAAA;AAAAA,gBACT;AAAA,gBACA,cAAc,UAAU,KAAK;AAAA,cAAA;AAAA,cAG9B,UAAA,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,GAEJ;AAAA,QAED,YACCX,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~oDAAoD~~,UAAA,SAAA,~~CAAS~~;AAAA,MAAA,~~GAEjF~~;AAAA,MAEFA,2BAAAA,IAAC,OAAA,EAAI,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,EAAA,CACrC,EAAA,CACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;;"}
1	+ {"version":3,"file":"ChartCard.cjs","sources":["../../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. /\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /* Card title text. Pass translated string for i18n. /\n title: React.ReactNode;\n /* Large subtitle value (e.g. formatted price or count). /\n subtitle?: React.ReactNode;\n /* Tooltip text shown next to the title. Pass translated string for i18n. /\n tooltip?: React.ReactNode;\n /* Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" /\n tooltipAriaLabel?: string;\n /* Date range or period label shown below the subtitle. /\n dateInfo?: React.ReactNode;\n /* Trend indicator chip config. /\n trendChip?: {\n /* Display label (e.g. \"12.5%\"). /\n label: React.ReactNode;\n /* Whether the trend is positive (green) or negative (red). /\n trend: \"positive\" \| \"negative\";\n };\n /* Show loading skeleton instead of content. @default false /\n loading?: boolean;\n /* Chart content rendered below the header. /\n children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" \| \"negative\", string> = {\n positive: \"bg-success-surface text-success-content\",\n negative: \"bg-error-surface text-error-content\",\n};\n\n/\n Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n \n @example\n * ```tsx\n * <ChartCard\n * title=\"Revenue\"\n * subtitle=\"$4,523\"\n * trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n * dateInfo=\"Jan 1 – Mar 17\"\n * tooltip=\"Total revenue for the selected period.\"\n * >\n * <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n (\n {\n className,\n title,\n subtitle,\n tooltip,\n tooltipAriaLabel = \"More info\",\n dateInfo,\n trendChip,\n loading = false,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Card ref={ref} variant=\"outlined\" noPadding className={className} {...props}>\n <div className=\"flex flex-col gap-2 p-4\">\n {loading ? (\n <>\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-4 w-32\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-7 w-44\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-3 w-24\" />\n </>\n ) : (\n <>\n <div className=\"flex items-center gap-1.5\">\n <span className=\"typography-body-small-14px-semibold text-content-primary\">\n {title}\n </span>\n {tooltip && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n aria-label={tooltipAriaLabel}\n icon={<InfoCircleIcon className=\"size-4 text-content-tertiary\" />}\n />\n </TooltipTrigger>\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n {subtitle && (\n <div className=\"flex items-center gap-2\">\n <span className=\"typography-header-heading-sm text-content-primary\">\n {subtitle}\n </span>\n {trendChip && (\n <span\n className={cn(\n \"typography-description-12px-semibold rounded-full px-2 py-0.5\",\n TREND_CLASSES[trendChip.trend],\n )}\n >\n {trendChip.label}\n </span>\n )}\n </div>\n )}\n {dateInfo && (\n <span className=\"typography-description-12px-regular text-content-tertiary\">\n {dateInfo}\n </span>\n )}\n </>\n )}\n <div className=\"mt-auto\">{children}</div>\n </div>\n </Card>\n );\n },\n);\nChartCard.displayName = \"ChartCard\";\n"],"names":["React","jsx","Card","jsxs","Fragment","Skeleton","TooltipProvider","Tooltip","TooltipTrigger","IconButton","InfoCircleIcon","TooltipContent","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,gBAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,UAAU;AACZ;AAoBO,MAAM,YAAYA,iBAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,KAAU,SAAQ,YAAW,WAAS,MAAC,WAAuB,GAAG,OACrE,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,UACCA,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,QAAAH,+BAACI,SAAAA,YAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,WAAA,CAAW;AAAA,MAAA,EAAA,CACpE,IAEAF,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,4DACb,UAAA,OACH;AAAA,UACC,WACCA,2BAAAA,IAACK,yBAAA,EACC,UAAAH,gCAACI,QAAAA,SAAA,EACC,UAAA;AAAA,YAAAN,2BAAAA,IAACO,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAP,2BAAAA;AAAAA,cAACQ,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,MAAMR,2BAAAA,IAACS,eAAAA,gBAAA,EAAe,WAAU,+BAAA,CAA+B;AAAA,cAAA;AAAA,YAAA,GAEnE;AAAA,YACAT,2BAAAA,IAACU,QAAAA,kBAAgB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC3B,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACC,YACCR,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,qDACb,UAAA,UACH;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWW,GAAAA;AAAAA,gBACT;AAAA,gBACA,cAAc,UAAU,KAAK;AAAA,cAAA;AAAA,cAG9B,UAAA,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,GAEJ;AAAA,QAED,YACCX,2BAAAA,IAAC,QAAA,EAAK,WAAU,6DACb,UAAA,SAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAEFA,2BAAAA,IAAC,OAAA,EAAI,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,EAAA,CACrC,EAAA,CACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;;"}

package/dist/cjs/components/Chart/ChartPieLegend.cjs CHANGED Viewed

@@ -33,8 +33,8 @@ const ChartPieLegend = React__namespace.forwardRef(
             style: { backgroundColor: item.color }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm min-w-0 flex-1 truncate text-content-secondary", children: item.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-content-primary tabular-nums", children: item.formattedValue ?? item.value.toLocaleString() })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-regular min-w-0 flex-1 truncate text-content-secondary", children: item.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-semibold text-content-primary tabular-nums", children: item.formattedValue ?? item.value.toLocaleString() })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",

package/dist/cjs/components/Chart/ChartPieLegend.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartPieLegend.cjs","sources":["../../../../src/components/Chart/ChartPieLegend.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single item in a {@link ChartPieLegend}. /\nexport interface ChartPieLegendItem {\n /* Display label. Pass translated string for i18n. /\n label: React.ReactNode;\n /* Numeric value for this slice. Used to calculate the proportional bar width. /\n value: number;\n /* Formatted display value (e.g. \"$4,500\"). If omitted, `value.toLocaleString()` is used. /\n formattedValue?: React.ReactNode;\n /* Slice color (CSS value). /\n color: string;\n /* Optional icon to show instead of the color dot. /\n icon?: React.ReactNode;\n}\n\n/* Props for {@link ChartPieLegend}. /\nexport interface ChartPieLegendProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Legend items to display. /\n items: ChartPieLegendItem[];\n}\n\n/\n A side legend for pie/donut charts that shows each slice's label,\n * formatted value, and a proportional progress bar.\n \n @example\n * ```tsx\n * <ChartPieLegend\n * items={[\n * { label: \"Subscriptions\", value: 4500, formattedValue: \"$4,500\", color: \"var(--color-special-chart-teal)\" },\n * { label: \"Messages\", value: 2100, formattedValue: \"$2,100\", color: \"var(--color-special-chart-sky)\" },\n * { label: \"Tips\", value: 1200, formattedValue: \"$1,200\", color: \"var(--color-special-chart-orange)\" },\n * ]}\n * />\n * ```\n /\nexport const ChartPieLegend = React.forwardRef<HTMLDivElement, ChartPieLegendProps>(\n ({ items, className, ...props }, ref) => {\n const total = items.reduce((sum, item) => sum + item.value, 0);\n\n return (\n <div ref={ref} className={cn(\"flex flex-col gap-3\", className)} {...props}>\n {items.map((item) => (\n <div key={`${item.color}-${item.value}`} className=\"flex flex-col gap-1.5\">\n <div className=\"flex items-center gap-2\">\n {item.icon ?? (\n <span\n className=\"size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: item.color }}\n />\n )}\n <span className=\"typography-~~regular~~-~~body~~-sm min-w-0 flex-1 truncate text-content-secondary\">\n {item.label}\n </span>\n <span className=\"typography-~~semibold-~~body-md text-content-primary tabular-nums\">\n {item.formattedValue ?? item.value.toLocaleString()}\n </span>\n </div>\n <div\n className=\"h-1.5 rounded-full\"\n style={{\n backgroundColor: item.color,\n width: total > 0 ? `${(item.value / total) 100}%` : \"0%\",\n }}\n />\n </div>\n ))}\n </div>\n );\n },\n);\n\nChartPieLegend.displayName = \"ChartPieLegend\";\n"],"names":["React","cn","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACvC,UAAM,QAAQ,MAAM,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAE7D,0CACG,OAAA,EAAI,KAAU,WAAWC,MAAG,uBAAuB,SAAS,GAAI,GAAG,OACjE,gBAAM,IAAI,CAAC,SACVC,2BAAAA,KAAC,OAAA,EAAwC,WAAU,yBACjD,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,QAAA,KAAK,QACJC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,UAAM;AAAA,QAAA;AAAA,QAGzCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~6EACb~~,eAAK,OACR;AAAA,QACAA,2BAAAA,IAAC,UAAK,WAAU,~~iEACb~~,eAAK,kBAAkB,KAAK,MAAM,eAAA,EAAe,CACpD;AAAA,MAAA,GACF;AAAA,MACAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,iBAAiB,KAAK;AAAA,YACtB,OAAO,QAAQ,IAAI,GAAI,KAAK,QAAQ,QAAS,GAAG,MAAM;AAAA,UAAA;AAAA,QACxD;AAAA,MAAA;AAAA,IACF,KArBQ,GAAG,KAAK,KAAK,IAAI,KAAK,KAAK,EAsBrC,CACD,GACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;;"}
1	+ {"version":3,"file":"ChartPieLegend.cjs","sources":["../../../../src/components/Chart/ChartPieLegend.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single item in a {@link ChartPieLegend}. /\nexport interface ChartPieLegendItem {\n /* Display label. Pass translated string for i18n. /\n label: React.ReactNode;\n /* Numeric value for this slice. Used to calculate the proportional bar width. /\n value: number;\n /* Formatted display value (e.g. \"$4,500\"). If omitted, `value.toLocaleString()` is used. /\n formattedValue?: React.ReactNode;\n /* Slice color (CSS value). /\n color: string;\n /* Optional icon to show instead of the color dot. /\n icon?: React.ReactNode;\n}\n\n/* Props for {@link ChartPieLegend}. /\nexport interface ChartPieLegendProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Legend items to display. /\n items: ChartPieLegendItem[];\n}\n\n/\n A side legend for pie/donut charts that shows each slice's label,\n * formatted value, and a proportional progress bar.\n \n @example\n * ```tsx\n * <ChartPieLegend\n * items={[\n * { label: \"Subscriptions\", value: 4500, formattedValue: \"$4,500\", color: \"var(--color-special-chart-teal)\" },\n * { label: \"Messages\", value: 2100, formattedValue: \"$2,100\", color: \"var(--color-special-chart-sky)\" },\n * { label: \"Tips\", value: 1200, formattedValue: \"$1,200\", color: \"var(--color-special-chart-orange)\" },\n * ]}\n * />\n * ```\n /\nexport const ChartPieLegend = React.forwardRef<HTMLDivElement, ChartPieLegendProps>(\n ({ items, className, ...props }, ref) => {\n const total = items.reduce((sum, item) => sum + item.value, 0);\n\n return (\n <div ref={ref} className={cn(\"flex flex-col gap-3\", className)} {...props}>\n {items.map((item) => (\n <div key={`${item.color}-${item.value}`} className=\"flex flex-col gap-1.5\">\n <div className=\"flex items-center gap-2\">\n {item.icon ?? (\n <span\n className=\"size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: item.color }}\n />\n )}\n <span className=\"typography-description-12px-regular min-w-0 flex-1 truncate text-content-secondary\">\n {item.label}\n </span>\n <span className=\"typography-body-small-14px-semibold text-content-primary tabular-nums\">\n {item.formattedValue ?? item.value.toLocaleString()}\n </span>\n </div>\n <div\n className=\"h-1.5 rounded-full\"\n style={{\n backgroundColor: item.color,\n width: total > 0 ? `${(item.value / total) 100}%` : \"0%\",\n }}\n />\n </div>\n ))}\n </div>\n );\n },\n);\n\nChartPieLegend.displayName = \"ChartPieLegend\";\n"],"names":["React","cn","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACvC,UAAM,QAAQ,MAAM,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAE7D,0CACG,OAAA,EAAI,KAAU,WAAWC,MAAG,uBAAuB,SAAS,GAAI,GAAG,OACjE,gBAAM,IAAI,CAAC,SACVC,2BAAAA,KAAC,OAAA,EAAwC,WAAU,yBACjD,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,QAAA,KAAK,QACJC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,UAAM;AAAA,QAAA;AAAA,QAGzCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,sFACb,eAAK,OACR;AAAA,QACAA,2BAAAA,IAAC,UAAK,WAAU,yEACb,eAAK,kBAAkB,KAAK,MAAM,eAAA,EAAe,CACpD;AAAA,MAAA,GACF;AAAA,MACAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,iBAAiB,KAAK;AAAA,YACtB,OAAO,QAAQ,IAAI,GAAI,KAAK,QAAQ,QAAS,GAAG,MAAM;AAAA,UAAA;AAAA,QACxD;AAAA,MAAA;AAAA,IACF,KArBQ,GAAG,KAAK,KAAK,IAAI,KAAK,KAAK,EAsBrC,CACD,GACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;;"}

package/dist/cjs/components/Chart/ChartSeriesToggle.cjs CHANGED Viewed

@@ -40,7 +40,7 @@ const ChartSeriesToggle = React__namespace.forwardRef(
           type: "button",
           "aria-pressed": isActive,
           className: cn.cn(
-            "typography-regular-body-sm flex items-center gap-2 rounded-full border px-3 py-1.5 text-content-primary transition-opacity hover:opacity-100",
+            "typography-description-12px-regular flex items-center gap-2 rounded-full border px-3 py-1.5 text-content-primary transition-opacity hover:opacity-100",
             isActive ? "border-neutral-alphas-200 bg-surface-primary" : "border-transparent bg-transparent opacity-50"
           ),
           onClick: () => toggle(item.key),

package/dist/cjs/components/Chart/ChartSeriesToggle.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. /\nexport interface ChartSeriesToggleItem {\n /* Unique key matching the data series key and ChartConfig key. /\n key: string;\n /* Human-readable label. Pass translated string for i18n. /\n label: React.ReactNode;\n /* Series color (CSS value). Shown as indicator dot. /\n color: string;\n}\n\n/* Props for {@link ChartSeriesToggle}. /\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Available series that can be toggled. /\n items: ChartSeriesToggleItem[];\n /* Set of currently visible series keys. /\n value: Set<string>;\n /* Called when a series is toggled. Receives the updated Set. /\n onValueChange: (value: Set<string>) => void;\n}\n\n/\n Renders a grid of toggleable chips that control which series are visible\n * on a multi-series chart. Each toggle shows a color indicator dot and a label.\n \n @example\n * ```tsx\n * const [visible, setVisible] = useState(new Set([\"subscription\", \"message\", \"tip\"]));\n \n <ChartSeriesToggle\n * items={[\n * { key: \"subscription\", label: \"Subscription\", color: \"var(--color-special-chart-teal)\" },\n * { key: \"message\", label: \"Message\", color: \"var(--color-special-chart-sky)\" },\n * { key: \"tip\", label: \"Tip\", color: \"var(--color-special-chart-orange)\" },\n * ]}\n * value={visible}\n * onValueChange={setVisible}\n * />\n * ```\n */\nexport const ChartSeriesToggle = React.forwardRef<HTMLDivElement, ChartSeriesToggleProps>(\n ({ className, items, value, onValueChange, ...props }, ref) => {\n const toggle = (key: string) => {\n const next = new Set(value);\n if (next.has(key)) {\n next.delete(key);\n } else {\n next.add(key);\n }\n onValueChange(next);\n };\n\n return (\n <div ref={ref} className={cn(\"grid grid-cols-2 gap-2 sm:grid-cols-3\", className)} {...props}>\n {items.map((item) => {\n const isActive = value.has(item.key);\n return (\n <button\n key={item.key}\n type=\"button\"\n aria-pressed={isActive}\n className={cn(\n \"typography-~~regular~~-~~body~~-sm flex items-center gap-2 rounded-full border px-3 py-1.5 text-content-primary transition-opacity hover:opacity-100\",\n isActive\n ? \"border-neutral-alphas-200 bg-surface-primary\"\n : \"border-transparent bg-transparent opacity-50\",\n )}\n onClick={() => toggle(item.key)}\n >\n <span\n className=\"size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: item.color }}\n />\n <span>{item.label}</span>\n </button>\n );\n })}\n </div>\n );\n },\n);\n\nChartSeriesToggle.displayName = \"ChartSeriesToggle\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,OAAO,OAAO,eAAe,GAAG,MAAA,GAAS,QAAQ;AAC7D,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,UAAI,KAAK,IAAI,GAAG,GAAG;AACjB,aAAK,OAAO,GAAG;AAAA,MACjB,OAAO;AACL,aAAK,IAAI,GAAG;AAAA,MACd;AACA,oBAAc,IAAI;AAAA,IACpB;AAEA,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,yCAAyC,SAAS,GAAI,GAAG,OACnF,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,WAAW,MAAM,IAAI,KAAK,GAAG;AACnC,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,WACI,iDACA;AAAA,UAAA;AAAA,UAEN,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,UAE9B,UAAA;AAAA,YAAAD,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,cAAM;AAAA,YAAA;AAAA,YAEvCA,2BAAAA,IAAC,QAAA,EAAM,UAAA,KAAK,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAfb,KAAK;AAAA,MAAA;AAAA,IAkBhB,CAAC,EAAA,CACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;"}
1	+ {"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. /\nexport interface ChartSeriesToggleItem {\n /* Unique key matching the data series key and ChartConfig key. /\n key: string;\n /* Human-readable label. Pass translated string for i18n. /\n label: React.ReactNode;\n /* Series color (CSS value). Shown as indicator dot. /\n color: string;\n}\n\n/* Props for {@link ChartSeriesToggle}. /\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Available series that can be toggled. /\n items: ChartSeriesToggleItem[];\n /* Set of currently visible series keys. /\n value: Set<string>;\n /* Called when a series is toggled. Receives the updated Set. /\n onValueChange: (value: Set<string>) => void;\n}\n\n/\n Renders a grid of toggleable chips that control which series are visible\n * on a multi-series chart. Each toggle shows a color indicator dot and a label.\n \n @example\n * ```tsx\n * const [visible, setVisible] = useState(new Set([\"subscription\", \"message\", \"tip\"]));\n \n <ChartSeriesToggle\n * items={[\n * { key: \"subscription\", label: \"Subscription\", color: \"var(--color-special-chart-teal)\" },\n * { key: \"message\", label: \"Message\", color: \"var(--color-special-chart-sky)\" },\n * { key: \"tip\", label: \"Tip\", color: \"var(--color-special-chart-orange)\" },\n * ]}\n * value={visible}\n * onValueChange={setVisible}\n * />\n * ```\n */\nexport const ChartSeriesToggle = React.forwardRef<HTMLDivElement, ChartSeriesToggleProps>(\n ({ className, items, value, onValueChange, ...props }, ref) => {\n const toggle = (key: string) => {\n const next = new Set(value);\n if (next.has(key)) {\n next.delete(key);\n } else {\n next.add(key);\n }\n onValueChange(next);\n };\n\n return (\n <div ref={ref} className={cn(\"grid grid-cols-2 gap-2 sm:grid-cols-3\", className)} {...props}>\n {items.map((item) => {\n const isActive = value.has(item.key);\n return (\n <button\n key={item.key}\n type=\"button\"\n aria-pressed={isActive}\n className={cn(\n \"typography-description-12px-regular flex items-center gap-2 rounded-full border px-3 py-1.5 text-content-primary transition-opacity hover:opacity-100\",\n isActive\n ? \"border-neutral-alphas-200 bg-surface-primary\"\n : \"border-transparent bg-transparent opacity-50\",\n )}\n onClick={() => toggle(item.key)}\n >\n <span\n className=\"size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: item.color }}\n />\n <span>{item.label}</span>\n </button>\n );\n })}\n </div>\n );\n },\n);\n\nChartSeriesToggle.displayName = \"ChartSeriesToggle\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,OAAO,OAAO,eAAe,GAAG,MAAA,GAAS,QAAQ;AAC7D,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,UAAI,KAAK,IAAI,GAAG,GAAG;AACjB,aAAK,OAAO,GAAG;AAAA,MACjB,OAAO;AACL,aAAK,IAAI,GAAG;AAAA,MACd;AACA,oBAAc,IAAI;AAAA,IACpB;AAEA,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,yCAAyC,SAAS,GAAI,GAAG,OACnF,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,WAAW,MAAM,IAAI,KAAK,GAAG;AACnC,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,WACI,iDACA;AAAA,UAAA;AAAA,UAEN,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,UAE9B,UAAA;AAAA,YAAAD,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,cAAM;AAAA,YAAA;AAAA,YAEvCA,2BAAAA,IAAC,QAAA,EAAM,UAAA,KAAK,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAfb,KAAK;AAAA,MAAA;AAAA,IAkBhB,CAAC,EAAA,CACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;"}

package/dist/cjs/components/ChatInput/ChatInput.cjs CHANGED Viewed

@@ -39,7 +39,7 @@ function ChatInputDefaultAttachmentThumbnails({
   return attachments.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-bg-secondary",
+      className: "relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.src, alt: "", className: "size-full object-cover" }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -192,7 +192,7 @@ const ChatInput = React__namespace.forwardRef(
                 className: cn.cn(
                   "w-full resize-none bg-transparent px-4",
                   hasAttachmentStrip ? "pt-0" : "pt-4",
-                  "typography-regular-body-md text-content-primary",
+                  "typography-body-small-14px-regular text-content-primary",
                   "placeholder:text-content-tertiary",
                   "focus:outline-none disabled:cursor-not-allowed",
                   "overflow-y-auto"
@@ -273,7 +273,7 @@ function InlineSelect({ options, value, onChange, disabled, selectedOption }) {
         disabled,
         onClick: () => setOpen((prev) => !prev),
         className: cn.cn(
-          "typography-semibold-body-sm text-content-primary",
+          "typography-description-12px-semibold text-content-primary",
           "flex items-center gap-1 rounded-md px-2 py-2",
           "hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -306,7 +306,7 @@ function InlineSelect({ options, value, onChange, disabled, selectedOption }) {
             tabIndex: 0,
             "aria-selected": option.value === value,
             className: cn.cn(
-              "typography-regular-body-md flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5",
+              "typography-body-small-14px-regular flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5",
               "text-content-primary hover:bg-neutral-alphas-50",
               "focus-visible:shadow-focus-ring focus-visible:outline-none",
               option.value === value && "bg-neutral-alphas-50"

package/dist/cjs/components/ChatInput/ChatInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatInput.cjs","sources":["../../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. /\nexport interface ChatInputAttachmentItem {\n /* Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. /\n id: string;\n /* Image URL for the thumbnail. /\n src: string;\n /* Optional value passed to the remove control `aria-label`. /\n ariaLabel?: string;\n}\n\n/* A single option for the inline model/dropdown selector. /\nexport interface ChatInputSelectOption {\n /* Unique value for this option. /\n value: string;\n /* Display label. /\n label: string;\n /* Optional icon rendered to the left of the label. /\n icon?: React.ReactNode;\n}\n\n/\n Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n /\nexport interface ChatInputProps\n extends Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"className\" \| \"rows\" \| \"onSubmit\"\n > {\n /* Minimum number of visible rows. @default 1 /\n minRows?: number;\n /* Maximum number of visible rows before scrolling. @default 6 /\n maxRows?: number;\n /* Whether a submission is in progress (disables submit, shows visual feedback). @default false /\n loading?: boolean;\n /\n Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n * Receives the current trimmed text value.\n /\n onSubmit?: (value: string) => void;\n /\n When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n * @default false\n /\n showFileButton?: boolean;\n /* Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. /\n onFileClick?: () => void;\n /* Accessible label for the attach-file button. @default \"Attach file\" /\n fileButtonAriaLabel?: string;\n /* Accessible label for the submit button. @default \"Send message\" /\n submitAriaLabel?: string;\n /* Icon element for the submit button. @default `<ArrowUpIcon />` /\n submitIcon?: React.ReactNode;\n /\n Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n * When provided, takes precedence over the built-in `selectOptions` dropdown.\n /\n toolbarRight?: React.ReactNode;\n /\n Options for the built-in inline dropdown selector (e.g. model picker).\n * Ignored when `toolbarRight` is provided.\n /\n selectOptions?: ChatInputSelectOption[];\n /* Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. /\n selectValue?: string;\n /* Callback fired when the user picks a different dropdown option. /\n onSelectChange?: (value: string) => void;\n /\n Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n * is provided (including `null`).\n /\n attachments?: ChatInputAttachmentItem[];\n /\n Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n * omitted or the input is {@link ChatInputProps.disabled}.\n /\n onAttachmentRemove?: (id: string) => void;\n /\n Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n /\n attachmentPreviews?: React.ReactNode;\n /* Additional className applied to the outermost container. /\n className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n return LINE_HEIGHT rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n attachments: ChatInputAttachmentItem[];\n onAttachmentRemove?: (id: string) => void;\n disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n attachments,\n onAttachmentRemove,\n disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n return attachments.map((item) => (\n <div\n key={item.id}\n className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-bg-secondary\"\n >\n <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n icon={<CloseIcon className=\"!size-3\" />}\n disabled={disabled \|\| !onAttachmentRemove}\n onClick={() => onAttachmentRemove?.(item.id)}\n className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n />\n </div>\n ));\n}\n\n/*\n A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n \n Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n \n @example\n * ```tsx\n * <ChatInput\n * placeholder=\"Type a message...\"\n * onSubmit={(text) => send(text)}\n * />\n * ```\n \n @example\n * ```tsx\n * <ChatInput\n * placeholder=\"Ask the agent...\"\n * showFileButton\n * onFileClick={() => openFilePicker()}\n * selectOptions={[\n * { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n * { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n * ]}\n * selectValue=\"fanvue-ai\"\n * onSelectChange={(v) => setModel(v)}\n * onSubmit={(text) => send(text)}\n * />\n * ```\n \n @example\n * ```tsx\n * <ChatInput\n * showFileButton\n * onFileClick={() => openPicker()}\n * attachments={files}\n * onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n \n @example\n * ```tsx\n * <ChatInput\n * showFileButton\n * onFileClick={() => openPicker()}\n * attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n (\n {\n className,\n minRows = 1,\n maxRows = 6,\n disabled = false,\n loading = false,\n value,\n defaultValue,\n placeholder,\n maxLength,\n \"aria-label\": ariaLabel,\n onChange,\n onKeyDown,\n onSubmit,\n showFileButton = false,\n onFileClick,\n fileButtonAriaLabel = \"Attach file\",\n submitAriaLabel = \"Send message\",\n submitIcon,\n toolbarRight,\n selectOptions,\n selectValue,\n onSelectChange,\n attachments,\n onAttachmentRemove,\n attachmentPreviews,\n style,\n ...textareaProps\n },\n ref,\n ) => {\n const internalRef = React.useRef<HTMLTextAreaElement>(null);\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n const resolvedValue = value !== undefined ? value : internalValue;\n const isControlled = value !== undefined;\n\n const mergedRef = React.useCallback(\n (node: HTMLTextAreaElement \| null) => {\n (internalRef as React.MutableRefObject<HTMLTextAreaElement \| null>).current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLTextAreaElement \| null>).current = node;\n }\n },\n [ref],\n );\n\n const adjustHeight = React.useCallback(() => {\n const textarea = internalRef.current;\n if (!textarea) return;\n\n const minHeight = calculateHeight(minRows);\n const maxHeight = calculateHeight(maxRows);\n\n textarea.style.height = `${minHeight}px`;\n const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n textarea.style.height = `${desired}px`;\n }, [minRows, maxRows]);\n\n React.useEffect(() => {\n adjustHeight();\n }, [resolvedValue, adjustHeight]);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n setInternalValue(e.target.value);\n }\n onChange?.(e);\n };\n\n const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n const handleSubmit = () => {\n const text = String(resolvedValue).trim();\n if (!text \|\| !canSubmit) return;\n onSubmit?.(text);\n if (!isControlled) {\n setInternalValue(\"\");\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n onKeyDown?.(e);\n };\n\n const minHeight = calculateHeight(minRows);\n const maxHeight = calculateHeight(maxRows);\n\n const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n const defaultAttachmentStrip =\n !useCustomAttachmentPreviews && !!attachments?.length ? (\n <ChatInputDefaultAttachmentThumbnails\n attachments={attachments ?? []}\n disabled={disabled}\n onAttachmentRemove={onAttachmentRemove}\n />\n ) : null;\n const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n const selectedOption =\n selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n const resolvedToolbarRight =\n toolbarRight ??\n (selectOptions && selectOptions.length > 0 ? (\n <InlineSelect\n options={selectOptions}\n value={selectValue}\n onChange={onSelectChange}\n disabled={disabled}\n selectedOption={selectedOption}\n />\n ) : null);\n\n return (\n <div\n className={cn(\n \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n \"has-focus-visible:outline-none\",\n \"motion-safe:transition-colors\",\n disabled && \"opacity-50\",\n className,\n )}\n >\n <div className=\"flex flex-col\">\n {hasAttachmentStrip ? (\n <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n {resolvedAttachmentStrip}\n </div>\n ) : null}\n <textarea\n {...textareaProps}\n ref={mergedRef}\n value={isControlled ? value : internalValue}\n placeholder={placeholder}\n maxLength={maxLength}\n disabled={disabled}\n aria-label={ariaLabel ?? placeholder}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n rows={minRows}\n className={cn(\n \"w-full resize-none bg-transparent px-4\",\n hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n \"typography-regular-body-md text-content-primary\",\n \"placeholder:text-content-tertiary\",\n \"focus:outline-none disabled:cursor-not-allowed\",\n \"overflow-y-auto\",\n )}\n style={{\n minHeight: `${minHeight}px`,\n maxHeight: `${maxHeight}px`,\n ...style,\n }}\n />\n </div>\n\n <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n <div className=\"flex items-center gap-1\">\n {showFileButton && (\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<AddIcon />}\n aria-label={fileButtonAriaLabel}\n onClick={onFileClick}\n disabled={disabled}\n className=\"sm:border sm:border-border-primary max-sm:-ml-2\"\n />\n )}\n </div>\n\n <div className=\"flex items-center gap-1\">\n {resolvedToolbarRight}\n <IconButton\n variant=\"primary\"\n size=\"32\"\n icon={submitIcon ?? <ArrowUpIcon />}\n aria-label={submitAriaLabel}\n onClick={handleSubmit}\n disabled={!canSubmit}\n className=\"disabled:bg-surface-secondary disabled:opacity-100 disabled:text-icons-primary\"\n />\n </div>\n </div>\n </div>\n );\n },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n options: ChatInputSelectOption[];\n value?: string;\n onChange?: (value: string) => void;\n disabled?: boolean;\n selectedOption?: ChatInputSelectOption;\n}\n\nfunction InlineSelect({ options, value, onChange, disabled, selectedOption }: InlineSelectProps) {\n const [open, setOpen] = React.useState(false);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (!open) return;\n const handleClick = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClick);\n return () => document.removeEventListener(\"mousedown\", handleClick);\n }, [open]);\n\n React.useEffect(() => {\n if (!open) return;\n const handleKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setOpen(false);\n };\n document.addEventListener(\"keydown\", handleKey);\n return () => document.removeEventListener(\"keydown\", handleKey);\n }, [open]);\n\n return (\n <div ref={containerRef} className=\"relative\">\n <button\n type=\"button\"\n role=\"combobox\"\n aria-expanded={open}\n aria-haspopup=\"listbox\"\n aria-label=\"Select model\"\n disabled={disabled}\n onClick={() => setOpen((prev) => !prev)}\n className={cn(\n \"typography-semibold-body-sm text-content-primary\",\n \"flex items-center gap-1 rounded-md px-2 py-2\",\n \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"motion-safe:transition-colors\",\n )}\n >\n {selectedOption?.icon && (\n <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n )}\n {selectedOption?.label ?? options[0]?.label ?? \"Select\"}\n <ChevronDownIcon\n className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n />\n </button>\n\n {open && (\n <div\n role=\"listbox\"\n className={cn(\n \"absolute right-0 bottom-full z-10 mb-1 min-w-[140px]\",\n \"overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1 shadow-lg\",\n )}\n >\n {options.map((option) => (\n <div\n key={option.value}\n role=\"option\"\n tabIndex={0}\n aria-selected={option.value === value}\n className={cn(\n \"typography-regular-body-md flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5\",\n \"text-content-primary hover:bg-neutral-alphas-50\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n option.value === value && \"bg-neutral-alphas-50\",\n )}\n onClick={() => {\n onChange?.(option.value);\n setOpen(false);\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n onChange?.(option.value);\n setOpen(false);\n }\n }}\n >\n {option.icon && (\n <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{option.icon}</span>\n )}\n {option.label}\n </div>\n ))}\n </div>\n )}\n </div>\n );\n}\n"],"names":["jsxs","jsx","IconButton","CloseIcon","React","minHeight","maxHeight","cn","AddIcon","ArrowUpIcon","ChevronDownIcon"],"mappings":"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"}
1	+ {"version":3,"file":"ChatInput.cjs","sources":["../../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. /\nexport interface ChatInputAttachmentItem {\n /* Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. /\n id: string;\n /* Image URL for the thumbnail. /\n src: string;\n /* Optional value passed to the remove control `aria-label`. /\n ariaLabel?: string;\n}\n\n/* A single option for the inline model/dropdown selector. /\nexport interface ChatInputSelectOption {\n /* Unique value for this option. /\n value: string;\n /* Display label. /\n label: string;\n /* Optional icon rendered to the left of the label. /\n icon?: React.ReactNode;\n}\n\n/\n Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n /\nexport interface ChatInputProps\n extends Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"className\" \| \"rows\" \| \"onSubmit\"\n > {\n /* Minimum number of visible rows. @default 1 /\n minRows?: number;\n /* Maximum number of visible rows before scrolling. @default 6 /\n maxRows?: number;\n /* Whether a submission is in progress (disables submit, shows visual feedback). @default false /\n loading?: boolean;\n /\n Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n * Receives the current trimmed text value.\n /\n onSubmit?: (value: string) => void;\n /\n When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n * @default false\n /\n showFileButton?: boolean;\n /* Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. /\n onFileClick?: () => void;\n /* Accessible label for the attach-file button. @default \"Attach file\" /\n fileButtonAriaLabel?: string;\n /* Accessible label for the submit button. @default \"Send message\" /\n submitAriaLabel?: string;\n /* Icon element for the submit button. @default `<ArrowUpIcon />` /\n submitIcon?: React.ReactNode;\n /\n Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n * When provided, takes precedence over the built-in `selectOptions` dropdown.\n /\n toolbarRight?: React.ReactNode;\n /\n Options for the built-in inline dropdown selector (e.g. model picker).\n * Ignored when `toolbarRight` is provided.\n /\n selectOptions?: ChatInputSelectOption[];\n /* Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. /\n selectValue?: string;\n /* Callback fired when the user picks a different dropdown option. /\n onSelectChange?: (value: string) => void;\n /\n Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n * is provided (including `null`).\n /\n attachments?: ChatInputAttachmentItem[];\n /\n Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n * omitted or the input is {@link ChatInputProps.disabled}.\n /\n onAttachmentRemove?: (id: string) => void;\n /\n Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n /\n attachmentPreviews?: React.ReactNode;\n /* Additional className applied to the outermost container. /\n className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n return LINE_HEIGHT rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n attachments: ChatInputAttachmentItem[];\n onAttachmentRemove?: (id: string) => void;\n disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n attachments,\n onAttachmentRemove,\n disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n return attachments.map((item) => (\n <div\n key={item.id}\n className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n >\n <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n icon={<CloseIcon className=\"!size-3\" />}\n disabled={disabled \|\| !onAttachmentRemove}\n onClick={() => onAttachmentRemove?.(item.id)}\n className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n />\n </div>\n ));\n}\n\n/*\n A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n \n Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n \n @example\n * ```tsx\n * <ChatInput\n * placeholder=\"Type a message...\"\n * onSubmit={(text) => send(text)}\n * />\n * ```\n \n @example\n * ```tsx\n * <ChatInput\n * placeholder=\"Ask the agent...\"\n * showFileButton\n * onFileClick={() => openFilePicker()}\n * selectOptions={[\n * { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n * { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n * ]}\n * selectValue=\"fanvue-ai\"\n * onSelectChange={(v) => setModel(v)}\n * onSubmit={(text) => send(text)}\n * />\n * ```\n \n @example\n * ```tsx\n * <ChatInput\n * showFileButton\n * onFileClick={() => openPicker()}\n * attachments={files}\n * onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n \n @example\n * ```tsx\n * <ChatInput\n * showFileButton\n * onFileClick={() => openPicker()}\n * attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n (\n {\n className,\n minRows = 1,\n maxRows = 6,\n disabled = false,\n loading = false,\n value,\n defaultValue,\n placeholder,\n maxLength,\n \"aria-label\": ariaLabel,\n onChange,\n onKeyDown,\n onSubmit,\n showFileButton = false,\n onFileClick,\n fileButtonAriaLabel = \"Attach file\",\n submitAriaLabel = \"Send message\",\n submitIcon,\n toolbarRight,\n selectOptions,\n selectValue,\n onSelectChange,\n attachments,\n onAttachmentRemove,\n attachmentPreviews,\n style,\n ...textareaProps\n },\n ref,\n ) => {\n const internalRef = React.useRef<HTMLTextAreaElement>(null);\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n const resolvedValue = value !== undefined ? value : internalValue;\n const isControlled = value !== undefined;\n\n const mergedRef = React.useCallback(\n (node: HTMLTextAreaElement \| null) => {\n (internalRef as React.MutableRefObject<HTMLTextAreaElement \| null>).current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLTextAreaElement \| null>).current = node;\n }\n },\n [ref],\n );\n\n const adjustHeight = React.useCallback(() => {\n const textarea = internalRef.current;\n if (!textarea) return;\n\n const minHeight = calculateHeight(minRows);\n const maxHeight = calculateHeight(maxRows);\n\n textarea.style.height = `${minHeight}px`;\n const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n textarea.style.height = `${desired}px`;\n }, [minRows, maxRows]);\n\n React.useEffect(() => {\n adjustHeight();\n }, [resolvedValue, adjustHeight]);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n setInternalValue(e.target.value);\n }\n onChange?.(e);\n };\n\n const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n const handleSubmit = () => {\n const text = String(resolvedValue).trim();\n if (!text \|\| !canSubmit) return;\n onSubmit?.(text);\n if (!isControlled) {\n setInternalValue(\"\");\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n onKeyDown?.(e);\n };\n\n const minHeight = calculateHeight(minRows);\n const maxHeight = calculateHeight(maxRows);\n\n const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n const defaultAttachmentStrip =\n !useCustomAttachmentPreviews && !!attachments?.length ? (\n <ChatInputDefaultAttachmentThumbnails\n attachments={attachments ?? []}\n disabled={disabled}\n onAttachmentRemove={onAttachmentRemove}\n />\n ) : null;\n const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n const selectedOption =\n selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n const resolvedToolbarRight =\n toolbarRight ??\n (selectOptions && selectOptions.length > 0 ? (\n <InlineSelect\n options={selectOptions}\n value={selectValue}\n onChange={onSelectChange}\n disabled={disabled}\n selectedOption={selectedOption}\n />\n ) : null);\n\n return (\n <div\n className={cn(\n \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n \"has-focus-visible:outline-none\",\n \"motion-safe:transition-colors\",\n disabled && \"opacity-50\",\n className,\n )}\n >\n <div className=\"flex flex-col\">\n {hasAttachmentStrip ? (\n <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n {resolvedAttachmentStrip}\n </div>\n ) : null}\n <textarea\n {...textareaProps}\n ref={mergedRef}\n value={isControlled ? value : internalValue}\n placeholder={placeholder}\n maxLength={maxLength}\n disabled={disabled}\n aria-label={ariaLabel ?? placeholder}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n rows={minRows}\n className={cn(\n \"w-full resize-none bg-transparent px-4\",\n hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n \"typography-body-small-14px-regular text-content-primary\",\n \"placeholder:text-content-tertiary\",\n \"focus:outline-none disabled:cursor-not-allowed\",\n \"overflow-y-auto\",\n )}\n style={{\n minHeight: `${minHeight}px`,\n maxHeight: `${maxHeight}px`,\n ...style,\n }}\n />\n </div>\n\n <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n <div className=\"flex items-center gap-1\">\n {showFileButton && (\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<AddIcon />}\n aria-label={fileButtonAriaLabel}\n onClick={onFileClick}\n disabled={disabled}\n className=\"sm:border sm:border-border-primary max-sm:-ml-2\"\n />\n )}\n </div>\n\n <div className=\"flex items-center gap-1\">\n {resolvedToolbarRight}\n <IconButton\n variant=\"primary\"\n size=\"32\"\n icon={submitIcon ?? <ArrowUpIcon />}\n aria-label={submitAriaLabel}\n onClick={handleSubmit}\n disabled={!canSubmit}\n className=\"disabled:bg-surface-secondary disabled:opacity-100 disabled:text-icons-primary\"\n />\n </div>\n </div>\n </div>\n );\n },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n options: ChatInputSelectOption[];\n value?: string;\n onChange?: (value: string) => void;\n disabled?: boolean;\n selectedOption?: ChatInputSelectOption;\n}\n\nfunction InlineSelect({ options, value, onChange, disabled, selectedOption }: InlineSelectProps) {\n const [open, setOpen] = React.useState(false);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (!open) return;\n const handleClick = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClick);\n return () => document.removeEventListener(\"mousedown\", handleClick);\n }, [open]);\n\n React.useEffect(() => {\n if (!open) return;\n const handleKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setOpen(false);\n };\n document.addEventListener(\"keydown\", handleKey);\n return () => document.removeEventListener(\"keydown\", handleKey);\n }, [open]);\n\n return (\n <div ref={containerRef} className=\"relative\">\n <button\n type=\"button\"\n role=\"combobox\"\n aria-expanded={open}\n aria-haspopup=\"listbox\"\n aria-label=\"Select model\"\n disabled={disabled}\n onClick={() => setOpen((prev) => !prev)}\n className={cn(\n \"typography-description-12px-semibold text-content-primary\",\n \"flex items-center gap-1 rounded-md px-2 py-2\",\n \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"motion-safe:transition-colors\",\n )}\n >\n {selectedOption?.icon && (\n <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n )}\n {selectedOption?.label ?? options[0]?.label ?? \"Select\"}\n <ChevronDownIcon\n className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n />\n </button>\n\n {open && (\n <div\n role=\"listbox\"\n className={cn(\n \"absolute right-0 bottom-full z-10 mb-1 min-w-[140px]\",\n \"overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1 shadow-lg\",\n )}\n >\n {options.map((option) => (\n <div\n key={option.value}\n role=\"option\"\n tabIndex={0}\n aria-selected={option.value === value}\n className={cn(\n \"typography-body-small-14px-regular flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5\",\n \"text-content-primary hover:bg-neutral-alphas-50\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n option.value === value && \"bg-neutral-alphas-50\",\n )}\n onClick={() => {\n onChange?.(option.value);\n setOpen(false);\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n onChange?.(option.value);\n setOpen(false);\n }\n }}\n >\n {option.icon && (\n <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{option.icon}</span>\n )}\n {option.label}\n </div>\n ))}\n </div>\n )}\n </div>\n );\n}\n"],"names":["jsxs","jsx","IconButton","CloseIcon","React","minHeight","maxHeight","cn","AddIcon","ArrowUpIcon","ChevronDownIcon"],"mappings":"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"}

package/dist/cjs/components/Checkbox/Checkbox.cjs CHANGED Viewed

@@ -104,7 +104,7 @@ const Checkbox = React__namespace.forwardRef(
                 "hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default",
                 "not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default",
                 // Focus state
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
                 // Disabled state
                 "disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0",
                 "disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary",
@@ -148,7 +148,7 @@ const Checkbox = React__namespace.forwardRef(
                 className: cn.cn(
                   "cursor-pointer select-none text-content-primary",
                   "group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
-                  useSmallLabelTypography ? "typography-semibold-body-md" : "typography-semibold-body-lg"
+                  useSmallLabelTypography ? "typography-body-small-14px-semibold" : "typography-body-default-16px-semibold"
                 ),
                 children: label
               }
@@ -161,7 +161,7 @@ const Checkbox = React__namespace.forwardRef(
               className: cn.cn(
                 "ml-7 text-content-secondary",
                 "in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary",
-                useSmallLabelTypography ? "typography-regular-body-sm" : "typography-regular-body-md"
+                useSmallLabelTypography ? "typography-description-12px-regular" : "typography-body-small-14px-regular"
               ),
               children: helperText
             }

package/dist/cjs/components/Checkbox/Checkbox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/*\n Size variant for the checkbox.\n \n - `\"20\"` (default) — 20px box, body-lg label.\n * - `\"16\"` — 16px box, body-md label, used in compact contexts like data tables.\n * - `\"default\"` and `\"small\"` are legacy aliases retained for back-compat\n * (`\"default\"` → `\"20\"`, `\"small\"` → `\"20\"` with smaller label typography).\n /\nexport type CheckboxSize =\n \| \"20\"\n \| \"16\"\n /* @deprecated Use `\"20\"` instead. /\n \| \"default\"\n /* @deprecated Use `\"20\"` (the smaller-typography variant remains via `\"small\"`). /\n \| \"small\";\n\nconst BOX_SIZE_CLASS: Record<\"20\" \| \"16\", string> = {\n \"20\": \"size-5\",\n \"16\": \"size-4\",\n};\n\nconst INDICATOR_SIZE_CLASS: Record<\"20\" \| \"16\", string> = {\n \"20\": \"size-3\",\n \"16\": \"size-2.5\",\n};\n\nexport interface CheckboxProps\n extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n /* Size variant. @default \"20\" /\n size?: CheckboxSize;\n /* Label text displayed next to the checkbox. /\n label?: string;\n /* Descriptive text displayed below the label. /\n helperText?: string;\n}\n\n/\n A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n \n The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n \n @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n ({ className, size = \"20\", label, helperText, disabled, name, ...props }, ref) => {\n const id = React.useId();\n const helperTextId = helperText ? `${id}-helper` : undefined;\n const hasLabel = Boolean(label \|\| helperText);\n const boxSize: \"20\" \| \"16\" = size === \"16\" ? \"16\" : \"20\";\n const useSmallLabelTypography = size === \"small\";\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n !label &&\n !props[\"aria-label\"] &&\n !props[\"aria-labelledby\"]\n ) {\n console.warn(\n \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n );\n }\n\n // Hidden input for form library compatibility (e.g. react-hook-form register)\n const inputRef = React.useRef<HTMLInputElement>(null);\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n const handleCheckedChange = (value: boolean \| \"indeterminate\") => {\n const checked = value === true;\n if (inputRef.current) {\n inputRef.current.checked = checked;\n inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n props.onCheckedChange?.(value);\n };\n\n const checkboxElement = (\n <span\n className={cn(\n \"relative inline-flex shrink-0\",\n BOX_SIZE_CLASS[boxSize],\n // Alignment when used with label\n label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n )}\n >\n <input\n ref={inputRef}\n type=\"checkbox\"\n name={name}\n disabled={disabled}\n aria-hidden\n tabIndex={-1}\n onChange={() => {}}\n className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n style={{ clip: \"rect(0,0,0,0)\" }}\n />\n <CheckboxPrimitive.Root\n id={id}\n disabled={disabled}\n aria-describedby={helperTextId}\n data-testid=\"checkbox\"\n {...props}\n onCheckedChange={handleCheckedChange}\n className={cn(\n // Base styles\n \"flex items-center justify-center rounded border-2\",\n BOX_SIZE_CLASS[boxSize],\n \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n // Default state\n \"border-content-primary bg-transparent text-transparent\",\n // Checked state\n \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n // Indeterminate state\n \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n // Hover & active state\n \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n // Focus state\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n // Disabled state\n \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n !hasLabel && className,\n )}\n >\n <CheckboxPrimitive.Indicator\n forceMount\n className={cn(\n \"flex items-center justify-center text-content-primary-inverted\",\n INDICATOR_SIZE_CLASS[boxSize],\n \"data-[state=unchecked]:invisible\",\n )}\n >\n {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n </span>\n );\n\n if (!hasLabel) {\n return checkboxElement;\n }\n\n return (\n <div\n className={cn(\n \"inline-flex flex-col gap-0.5\",\n disabled && \"is-disabled cursor-not-allowed\",\n className,\n )}\n >\n <div className=\"group inline-flex items-start gap-2\">\n {checkboxElement}\n {label && (\n <label\n htmlFor={id}\n className={cn(\n \"cursor-pointer select-none text-content-primary\",\n \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n useSmallLabelTypography\n ? \"typography-semibold-body-md\"\n : \"typography-semibold-body-lg\",\n )}\n >\n {label}\n </label>\n )}\n </div>\n {helperText && (\n <span\n id={helperTextId}\n className={cn(\n \"ml-7 text-content-secondary\",\n \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n useSmallLabelTypography ? \"typography-regular-body-sm\" : \"typography-regular-body-md\",\n )}\n >\n {helperText}\n </span>\n )}\n </div>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["React","jsxs","cn","jsx","CheckboxPrimitive","MinusIcon","CheckIcon"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/*\n Size variant for the checkbox.\n \n - `\"20\"` (default) — 20px box, body-lg label.\n * - `\"16\"` — 16px box, body-md label, used in compact contexts like data tables.\n * - `\"default\"` and `\"small\"` are legacy aliases retained for back-compat\n * (`\"default\"` → `\"20\"`, `\"small\"` → `\"20\"` with smaller label typography).\n /\nexport type CheckboxSize =\n \| \"20\"\n \| \"16\"\n /* @deprecated Use `\"20\"` instead. /\n \| \"default\"\n /* @deprecated Use `\"20\"` (the smaller-typography variant remains via `\"small\"`). /\n \| \"small\";\n\nconst BOX_SIZE_CLASS: Record<\"20\" \| \"16\", string> = {\n \"20\": \"size-5\",\n \"16\": \"size-4\",\n};\n\nconst INDICATOR_SIZE_CLASS: Record<\"20\" \| \"16\", string> = {\n \"20\": \"size-3\",\n \"16\": \"size-2.5\",\n};\n\nexport interface CheckboxProps\n extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n /* Size variant. @default \"20\" /\n size?: CheckboxSize;\n /* Label text displayed next to the checkbox. /\n label?: string;\n /* Descriptive text displayed below the label. /\n helperText?: string;\n}\n\n/\n A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n \n The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n \n @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n ({ className, size = \"20\", label, helperText, disabled, name, ...props }, ref) => {\n const id = React.useId();\n const helperTextId = helperText ? `${id}-helper` : undefined;\n const hasLabel = Boolean(label \|\| helperText);\n const boxSize: \"20\" \| \"16\" = size === \"16\" ? \"16\" : \"20\";\n const useSmallLabelTypography = size === \"small\";\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n !label &&\n !props[\"aria-label\"] &&\n !props[\"aria-labelledby\"]\n ) {\n console.warn(\n \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n );\n }\n\n // Hidden input for form library compatibility (e.g. react-hook-form register)\n const inputRef = React.useRef<HTMLInputElement>(null);\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n const handleCheckedChange = (value: boolean \| \"indeterminate\") => {\n const checked = value === true;\n if (inputRef.current) {\n inputRef.current.checked = checked;\n inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n props.onCheckedChange?.(value);\n };\n\n const checkboxElement = (\n <span\n className={cn(\n \"relative inline-flex shrink-0\",\n BOX_SIZE_CLASS[boxSize],\n // Alignment when used with label\n label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n )}\n >\n <input\n ref={inputRef}\n type=\"checkbox\"\n name={name}\n disabled={disabled}\n aria-hidden\n tabIndex={-1}\n onChange={() => {}}\n className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n style={{ clip: \"rect(0,0,0,0)\" }}\n />\n <CheckboxPrimitive.Root\n id={id}\n disabled={disabled}\n aria-describedby={helperTextId}\n data-testid=\"checkbox\"\n {...props}\n onCheckedChange={handleCheckedChange}\n className={cn(\n // Base styles\n \"flex items-center justify-center rounded border-2\",\n BOX_SIZE_CLASS[boxSize],\n \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n // Default state\n \"border-content-primary bg-transparent text-transparent\",\n // Checked state\n \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n // Indeterminate state\n \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n // Hover & active state\n \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n // Focus state\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n // Disabled state\n \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n !hasLabel && className,\n )}\n >\n <CheckboxPrimitive.Indicator\n forceMount\n className={cn(\n \"flex items-center justify-center text-content-primary-inverted\",\n INDICATOR_SIZE_CLASS[boxSize],\n \"data-[state=unchecked]:invisible\",\n )}\n >\n {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n </span>\n );\n\n if (!hasLabel) {\n return checkboxElement;\n }\n\n return (\n <div\n className={cn(\n \"inline-flex flex-col gap-0.5\",\n disabled && \"is-disabled cursor-not-allowed\",\n className,\n )}\n >\n <div className=\"group inline-flex items-start gap-2\">\n {checkboxElement}\n {label && (\n <label\n htmlFor={id}\n className={cn(\n \"cursor-pointer select-none text-content-primary\",\n \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n useSmallLabelTypography\n ? \"typography-body-small-14px-semibold\"\n : \"typography-body-default-16px-semibold\",\n )}\n >\n {label}\n </label>\n )}\n </div>\n {helperText && (\n <span\n id={helperTextId}\n className={cn(\n \"ml-7 text-content-secondary\",\n \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n useSmallLabelTypography\n ? \"typography-description-12px-regular\"\n : \"typography-body-small-14px-regular\",\n )}\n >\n {helperText}\n </span>\n )}\n </div>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["React","jsxs","cn","jsx","CheckboxPrimitive","MinusIcon","CheckIcon"],"mappings":"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"}

package/dist/cjs/components/Chip/Chip.cjs CHANGED Viewed

@@ -48,14 +48,14 @@ const Chip = React__namespace.forwardRef(
         ref,
         "data-testid": "chip",
         className: cn.cn(
-          "typography-semibold-body-sm relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150",
+          "typography-description-12px-semibold relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150",
           // Shape
           variant === "square" ? "rounded-xs" : "rounded-full",
           // Size
           size === "32" && "h-8 py-1",
           size === "40" && "h-10 py-2.5",
           // Variant colors
-          isDark && "bg-neutral-alphas-150 text-content-on-brand-inverted",
+          isDark && "bg-neutral-alphas-150 text-content-always-white",
           !isDark && selected && "bg-brand-primary-muted text-neutral-alphas-900",
           !isDark && !selected && !dotted && "bg-neutral-alphas-50 text-neutral-alphas-900",
           !isDark && !selected && dotted && "border border-dashed border-border-primary bg-transparent text-neutral-alphas-900",
@@ -93,7 +93,7 @@ const Chip = React__namespace.forwardRef(
               }
             )
           ] }),
-          notificationLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-sm absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted", children: notificationLabel })
+          notificationLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted", children: notificationLabel })
         ] })
       }
     );

package/dist/cjs/components/Chip/Chip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.cjs","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual variant of the chip. /\nexport type ChipVariant = \"rounded\" \| \"square\" \| \"dark\";\n/* Height of the chip in pixels. /\nexport type ChipSize = \"32\" \| \"40\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLElement> {\n /* Visual variant of the chip. @default \"rounded\" /\n variant?: ChipVariant;\n /* Height of the chip in pixels. @default \"32\" /\n size?: ChipSize;\n /* Whether the chip is in a selected (pressed) state. @default false /\n selected?: boolean;\n /* Whether the chip is disabled. @default false /\n disabled?: boolean;\n /* Whether to show a coloured status dot at the leading edge. @default false /\n leftDot?: boolean;\n /\n Whether the chip uses a dashed border for add/create affordances.\n * Has no effect when `variant=\"dark\"` or `selected` is `true`.\n * @default false\n /\n dotted?: boolean;\n /* Icon element displayed before the label. /\n leftIcon?: React.ReactNode;\n /* Icon element displayed after the label. /\n rightIcon?: React.ReactNode;\n /* Notification badge content (e.g. `\"99+\"`). Passed as a string for i18n support. /\n notificationLabel?: string;\n /* Click handler — when provided, the chip renders as a `<button>` for accessibility. /\n onClick?: React.MouseEventHandler<HTMLElement>;\n /* Merge props onto a child element instead of rendering a wrapper. @default false /\n asChild?: boolean;\n}\n\n/\n A compact element for filters, tags, or toggleable actions. When an `onClick`\n * handler is provided, the chip renders as an interactive `<button>` with\n * `aria-pressed` support.\n \n @example\n * ```tsx\n * <Chip selected onClick={toggle}>Music</Chip>\n * ```\n */\nexport const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(\n (\n {\n className,\n variant = \"rounded\",\n size = \"32\",\n selected = false,\n disabled = false,\n leftDot = false,\n dotted = false,\n leftIcon,\n rightIcon,\n notificationLabel,\n onClick,\n asChild = false,\n children,\n ...props\n },\n ref,\n // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n ) => {\n const isInteractive = !!onClick && !asChild;\n const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n const isDark = variant === \"dark\";\n\n return (\n <Comp\n ref={ref}\n data-testid=\"chip\"\n className={cn(\n \"typography-~~semibold~~-~~body~~-sm relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150\",\n // Shape\n variant === \"square\" ? \"rounded-xs\" : \"rounded-full\",\n // Size\n size === \"32\" && \"h-8 py-1\",\n size === \"40\" && \"h-10 py-2.5\",\n // Variant colors\n isDark && \"bg-neutral-alphas-150 text-content-on-~~brand-inverted~~\",\n !isDark && selected && \"bg-brand-primary-muted text-neutral-alphas-900\",\n !isDark && !selected && !dotted && \"bg-neutral-alphas-50 text-neutral-alphas-900\",\n !isDark &&\n !selected &&\n dotted &&\n \"border border-dashed border-border-primary bg-transparent text-neutral-alphas-900\",\n // Interactive\n isInteractive && !disabled && \"cursor-pointer\",\n isInteractive &&\n !disabled &&\n !isDark &&\n !selected &&\n !dotted &&\n \"hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n isInteractive &&\n !disabled &&\n !isDark &&\n !selected &&\n dotted &&\n \"hover:border-neutral-alphas-500 hover:bg-neutral-alphas-50 active:border-neutral-alphas-500 active:bg-neutral-alphas-50\",\n // Focus\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n // Disabled\n disabled && isDark && \"pointer-events-none opacity-50\",\n disabled && !isDark && \"pointer-events-none text-neutral-alphas-400\",\n className,\n )}\n {...(isInteractive && {\n type: \"button\" as const,\n disabled,\n \"aria-pressed\": selected,\n onClick,\n })}\n {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n {...(selected && { \"data-selected\": \"\" })}\n {...props}\n >\n {asChild ? (\n <Slottable>{children}</Slottable>\n ) : (\n <>\n <span className=\"flex min-w-0 items-center gap-0.5 overflow-hidden px-3\">\n {leftDot && (\n <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />\n )}\n {leftIcon && (\n <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n <span className=\"min-w-0 truncate\">{children}</span>\n {rightIcon && (\n <span\n className=\"flex size-5 shrink-0 items-center justify-center\"\n aria-hidden=\"true\"\n >\n {rightIcon}\n </span>\n )}\n </span>\n {notificationLabel && (\n <span className=\"typography-~~semibold~~-~~body~~-sm absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted\">\n {notificationLabel}\n </span>\n )}\n </>\n )}\n </Comp>\n );\n },\n);\n\nChip.displayName = \"Chip\";\n"],"names":["React","Slot","jsx","cn","Slottable","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgDO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEG;AACH,UAAM,gBAAgB,CAAC,CAAC,WAAW,CAAC;AACpC,UAAM,OAAO,UAAUC,UAAAA,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA;AAAA,UAEA,YAAY,WAAW,eAAe;AAAA;AAAA,UAEtC,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA;AAAA,UAEjB,UAAU;AAAA,UACV,CAAC,UAAU,YAAY;AAAA,UACvB,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU;AAAA,UACnC,CAAC,UACC,CAAC,YACD,UACA;AAAA;AAAA,UAEF,iBAAiB,CAAC,YAAY;AAAA,UAC9B,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD,CAAC,UACD;AAAA,UACF,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD,UACA;AAAA;AAAA,UAEF;AAAA;AAAA,UAEA,YAAY,UAAU;AAAA,UACtB,YAAY,CAAC,UAAU;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAI,iBAAiB;AAAA,UACpB,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAI,CAAC,iBAAiB,YAAY,EAAE,iBAAiB,KAAA;AAAA,QACrD,GAAI,YAAY,EAAE,iBAAiB,GAAA;AAAA,QACnC,GAAG;AAAA,QAEH,UAAA,UACCD,2BAAAA,IAACE,qBAAA,EAAW,SAAA,CAAS,IAErBC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,UAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,0DACb,UAAA;AAAA,YAAA,WACCH,2BAAAA,IAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,YAE9E,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAA4C,eAAY,QACrE,UAAA,UACH;AAAA,YAEFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,YAC5C,aACCA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,gBAEX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,qBACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~wKACb~~,UAAA,kBAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;;"}
1	+ {"version":3,"file":"Chip.cjs","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual variant of the chip. /\nexport type ChipVariant = \"rounded\" \| \"square\" \| \"dark\";\n/* Height of the chip in pixels. /\nexport type ChipSize = \"32\" \| \"40\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLElement> {\n /* Visual variant of the chip. @default \"rounded\" /\n variant?: ChipVariant;\n /* Height of the chip in pixels. @default \"32\" /\n size?: ChipSize;\n /* Whether the chip is in a selected (pressed) state. @default false /\n selected?: boolean;\n /* Whether the chip is disabled. @default false /\n disabled?: boolean;\n /* Whether to show a coloured status dot at the leading edge. @default false /\n leftDot?: boolean;\n /\n Whether the chip uses a dashed border for add/create affordances.\n * Has no effect when `variant=\"dark\"` or `selected` is `true`.\n * @default false\n /\n dotted?: boolean;\n /* Icon element displayed before the label. /\n leftIcon?: React.ReactNode;\n /* Icon element displayed after the label. /\n rightIcon?: React.ReactNode;\n /* Notification badge content (e.g. `\"99+\"`). Passed as a string for i18n support. /\n notificationLabel?: string;\n /* Click handler — when provided, the chip renders as a `<button>` for accessibility. /\n onClick?: React.MouseEventHandler<HTMLElement>;\n /* Merge props onto a child element instead of rendering a wrapper. @default false /\n asChild?: boolean;\n}\n\n/\n A compact element for filters, tags, or toggleable actions. When an `onClick`\n * handler is provided, the chip renders as an interactive `<button>` with\n * `aria-pressed` support.\n \n @example\n * ```tsx\n * <Chip selected onClick={toggle}>Music</Chip>\n * ```\n */\nexport const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(\n (\n {\n className,\n variant = \"rounded\",\n size = \"32\",\n selected = false,\n disabled = false,\n leftDot = false,\n dotted = false,\n leftIcon,\n rightIcon,\n notificationLabel,\n onClick,\n asChild = false,\n children,\n ...props\n },\n ref,\n // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n ) => {\n const isInteractive = !!onClick && !asChild;\n const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n const isDark = variant === \"dark\";\n\n return (\n <Comp\n ref={ref}\n data-testid=\"chip\"\n className={cn(\n \"typography-description-12px-semibold relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150\",\n // Shape\n variant === \"square\" ? \"rounded-xs\" : \"rounded-full\",\n // Size\n size === \"32\" && \"h-8 py-1\",\n size === \"40\" && \"h-10 py-2.5\",\n // Variant colors\n isDark && \"bg-neutral-alphas-150 text-content-always-white\",\n !isDark && selected && \"bg-brand-primary-muted text-neutral-alphas-900\",\n !isDark && !selected && !dotted && \"bg-neutral-alphas-50 text-neutral-alphas-900\",\n !isDark &&\n !selected &&\n dotted &&\n \"border border-dashed border-border-primary bg-transparent text-neutral-alphas-900\",\n // Interactive\n isInteractive && !disabled && \"cursor-pointer\",\n isInteractive &&\n !disabled &&\n !isDark &&\n !selected &&\n !dotted &&\n \"hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n isInteractive &&\n !disabled &&\n !isDark &&\n !selected &&\n dotted &&\n \"hover:border-neutral-alphas-500 hover:bg-neutral-alphas-50 active:border-neutral-alphas-500 active:bg-neutral-alphas-50\",\n // Focus\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n // Disabled\n disabled && isDark && \"pointer-events-none opacity-50\",\n disabled && !isDark && \"pointer-events-none text-neutral-alphas-400\",\n className,\n )}\n {...(isInteractive && {\n type: \"button\" as const,\n disabled,\n \"aria-pressed\": selected,\n onClick,\n })}\n {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n {...(selected && { \"data-selected\": \"\" })}\n {...props}\n >\n {asChild ? (\n <Slottable>{children}</Slottable>\n ) : (\n <>\n <span className=\"flex min-w-0 items-center gap-0.5 overflow-hidden px-3\">\n {leftDot && (\n <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />\n )}\n {leftIcon && (\n <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n <span className=\"min-w-0 truncate\">{children}</span>\n {rightIcon && (\n <span\n className=\"flex size-5 shrink-0 items-center justify-center\"\n aria-hidden=\"true\"\n >\n {rightIcon}\n </span>\n )}\n </span>\n {notificationLabel && (\n <span className=\"typography-description-12px-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted\">\n {notificationLabel}\n </span>\n )}\n </>\n )}\n </Comp>\n );\n },\n);\n\nChip.displayName = \"Chip\";\n"],"names":["React","Slot","jsx","cn","Slottable","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgDO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEG;AACH,UAAM,gBAAgB,CAAC,CAAC,WAAW,CAAC;AACpC,UAAM,OAAO,UAAUC,UAAAA,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA;AAAA,UAEA,YAAY,WAAW,eAAe;AAAA;AAAA,UAEtC,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA;AAAA,UAEjB,UAAU;AAAA,UACV,CAAC,UAAU,YAAY;AAAA,UACvB,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU;AAAA,UACnC,CAAC,UACC,CAAC,YACD,UACA;AAAA;AAAA,UAEF,iBAAiB,CAAC,YAAY;AAAA,UAC9B,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD,CAAC,UACD;AAAA,UACF,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD,UACA;AAAA;AAAA,UAEF;AAAA;AAAA,UAEA,YAAY,UAAU;AAAA,UACtB,YAAY,CAAC,UAAU;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAI,iBAAiB;AAAA,UACpB,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAI,CAAC,iBAAiB,YAAY,EAAE,iBAAiB,KAAA;AAAA,QACrD,GAAI,YAAY,EAAE,iBAAiB,GAAA;AAAA,QACnC,GAAG;AAAA,QAEH,UAAA,UACCD,2BAAAA,IAACE,qBAAA,EAAW,SAAA,CAAS,IAErBC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,UAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,0DACb,UAAA;AAAA,YAAA,WACCH,2BAAAA,IAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,YAE9E,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAA4C,eAAY,QACrE,UAAA,UACH;AAAA,YAEFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,YAC5C,aACCA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,gBAEX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,qBACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iLACb,UAAA,kBAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;;"}

package/dist/cjs/components/Count/Count.cjs CHANGED Viewed

@@ -45,17 +45,17 @@ const Count = React__namespace.forwardRef(
       {
         ref,
         className: cn.cn(
-          "typography-semibold-body-sm inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none",
+          "typography-description-12px-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none",
           size === "16" && "h-3 min-w-3 px-0.5 text-[8px]",
           size === "24" && "h-4 min-w-4 px-1 text-[10px]",
           size === "32" && "h-5 min-w-5 px-1.5 text-[12px]",
           variant === "default" && "bg-content-primary text-content-primary-inverted",
-          variant === "alert" && "bg-error-content text-content-on-brand-inverted",
-          variant === "brand" && "bg-brand-primary-default text-content-on-brand",
-          variant === "pink" && "bg-brand-secondary-default text-content-on-brand",
-          variant === "info" && "bg-info-content text-content-on-brand-inverted",
-          variant === "success" && "bg-success-content text-content-on-brand-inverted",
-          variant === "warning" && "bg-warning-content text-content-on-brand",
+          variant === "alert" && "bg-error-content text-content-always-white",
+          variant === "brand" && "bg-brand-primary-default text-content-always-black",
+          variant === "pink" && "bg-brand-secondary-default text-content-always-black",
+          variant === "info" && "bg-info-content text-content-always-white",
+          variant === "success" && "bg-success-content text-content-always-white",
+          variant === "warning" && "bg-warning-content text-content-always-black",
           className
         ),
         ...props,

package/dist/cjs/components/Count/Count.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Count.cjs","sources":["../../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. /\nexport type CountVariant = \"default\" \| \"alert\" \| \"brand\" \| \"pink\" \| \"info\" \| \"success\" \| \"warning\";\n\n/* Size of the count badge, aligned with button and icon-button sizes. /\nexport type CountSize = \"16\" \| \"24\" \| \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n /* Colour variant of the count badge. @default \"default\" /\n variant?: CountVariant;\n /* Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 /\n value?: number;\n /* Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 /\n max?: number;\n /* Size of the count badge. @default \"32\" /\n size?: CountSize;\n /* Merge props onto a child element instead of rendering a `<span>`. @default false /\n asChild?: boolean;\n}\n\n/\n A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n \n @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n (\n {\n className,\n variant = \"default\",\n value = 0,\n max = 99,\n size = \"32\",\n asChild = false,\n children,\n ...props\n },\n ref,\n ) => {\n if (value === 0 && !children) {\n return null;\n }\n\n const Comp = asChild ? Slot : \"span\";\n\n return (\n <Comp\n ref={ref}\n className={cn(\n \"typography-~~semibold~~-~~body~~-sm inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n variant === \"default\" && \"bg-content-primary text-content-primary-inverted\",\n variant === \"alert\" && \"bg-error-content text-content-on-~~brand-inverted~~\",\n variant === \"brand\" && \"bg-brand-primary-default text-content-on-~~brand~~\",\n variant === \"pink\" && \"bg-brand-secondary-default text-content-on-~~brand~~\",\n variant === \"info\" && \"bg-info-content text-content-on-~~brand-inverted~~\",\n variant === \"success\" && \"bg-success-content text-content-on-~~brand-inverted~~\",\n variant === \"warning\" && \"bg-warning-content text-content-on-~~brand~~\",\n className,\n )}\n {...props}\n >\n {children ?? getDisplayValue(value, max)}\n </Comp>\n );\n },\n);\n\nCount.displayName = \"Count\";\n"],"names":["React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;;"}
1	+ {"version":3,"file":"Count.cjs","sources":["../../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. /\nexport type CountVariant = \"default\" \| \"alert\" \| \"brand\" \| \"pink\" \| \"info\" \| \"success\" \| \"warning\";\n\n/* Size of the count badge, aligned with button and icon-button sizes. /\nexport type CountSize = \"16\" \| \"24\" \| \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n /* Colour variant of the count badge. @default \"default\" /\n variant?: CountVariant;\n /* Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 /\n value?: number;\n /* Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 /\n max?: number;\n /* Size of the count badge. @default \"32\" /\n size?: CountSize;\n /* Merge props onto a child element instead of rendering a `<span>`. @default false /\n asChild?: boolean;\n}\n\n/\n A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n \n @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n (\n {\n className,\n variant = \"default\",\n value = 0,\n max = 99,\n size = \"32\",\n asChild = false,\n children,\n ...props\n },\n ref,\n ) => {\n if (value === 0 && !children) {\n return null;\n }\n\n const Comp = asChild ? Slot : \"span\";\n\n return (\n <Comp\n ref={ref}\n className={cn(\n \"typography-description-12px-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n variant === \"default\" && \"bg-content-primary text-content-primary-inverted\",\n variant === \"alert\" && \"bg-error-content text-content-always-white\",\n variant === \"brand\" && \"bg-brand-primary-default text-content-always-black\",\n variant === \"pink\" && \"bg-brand-secondary-default text-content-always-black\",\n variant === \"info\" && \"bg-info-content text-content-always-white\",\n variant === \"success\" && \"bg-success-content text-content-always-white\",\n variant === \"warning\" && \"bg-warning-content text-content-always-black\",\n className,\n )}\n {...props}\n >\n {children ?? getDisplayValue(value, max)}\n </Comp>\n );\n },\n);\n\nCount.displayName = \"Count\";\n"],"names":["React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/CreatorCard/CreatorCard.cjs CHANGED Viewed

@@ -29,7 +29,7 @@ const CreatorCard = React__namespace.forwardRef(
       {
         ref,
         className: cn.cn(
-          "relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-bg-primary",
+          "relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-background-primary",
           className
         ),
         ...props,
@@ -39,7 +39,7 @@ const CreatorCard = React__namespace.forwardRef(
             "div",
             {
               className: cn.cn(
-                "pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-bg-primary via-bg-primary/90 to-transparent",
+                "pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-background-primary via-background-primary/90 to-transparent",
                 actions ? "h-3/5" : "h-1/3"
               )
             }
@@ -57,8 +57,8 @@ const CreatorCard = React__namespace.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-bold-heading-sm truncate text-content-primary", children: name }),
-                description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-sm truncate text-content-secondary dark:text-brand-primary-default", children: description })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-header-heading-sm truncate text-content-primary", children: name }),
+                description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-description-12px-semibold truncate text-content-secondary dark:text-brand-primary-default", children: description })
               ] })
             ] }),
             actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: actions })

package/dist/cjs/components/CreatorCard/CreatorCard.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreatorCard.cjs","sources":["../../../../src/components/CreatorCard/CreatorCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\nexport interface CreatorCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Decorative background media rendered behind the creator content. /\n background: React.ReactNode;\n /* Creator display name shown as the heading. /\n name: string;\n /* Optional secondary line shown below the name (e.g. role or tagline). /\n description?: string;\n /* Avatar props forwarded to the inner {@link Avatar}. /\n avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n /\n Action buttons rendered at the bottom of the card. Pass zero, one, or two\n * `Button` elements to render variants with no, one, or two CTAs.\n /\n actions?: React.ReactNode;\n}\n\n/\n A portrait media card highlighting a creator with avatar, name, optional\n * tagline, and up to two stacked action buttons over a background image.\n \n Pass zero, one, or two {@link Button} elements via `actions` to render the\n * no-button, single-button, or two-button variants.\n \n @example\n * ```tsx\n * <CreatorCard\n * background={<img src=\"/creator.jpg\" alt=\"\" />}\n * name=\"Jane Doe\"\n * description=\"MODEL & PODCASTER\"\n * avatar={{ src: \"/avatar.jpg\", alt: \"Jane Doe\", fallback: \"JD\" }}\n * actions={\n * <>\n * <Button variant=\"brand\" fullWidth>Join for free for 3 days</Button>\n * <Button variant=\"primary\" fullWidth>Follow for Free</Button>\n * </>\n * }\n * />\n * ```\n /\nexport const CreatorCard = React.forwardRef<HTMLDivElement, CreatorCardProps>(\n ({ className, background, name, description, avatar, actions, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n \"relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-bg-primary\",\n className,\n )}\n {...props}\n >\n <div className=\"pointer-events-none absolute inset-0 h-full w-full select-none :h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n {background}\n </div>\n <div\n className={cn(\n \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-bg-primary via-bg-primary/90 to-transparent\",\n actions ? \"h-3/5\" : \"h-1/3\",\n )}\n />\n <div className=\"relative flex flex-col gap-4 p-4\">\n <div className=\"flex items-center gap-4\">\n <Avatar\n size={48}\n src={avatar?.src}\n alt={avatar?.alt ?? name}\n fallback={avatar?.fallback}\n {...avatar}\n />\n <div className=\"min-w-0 flex-1\">\n <p className=\"typography-~~bold~~-heading-sm truncate text-content-primary\">{name}</p>\n {description && (\n <p className=\"typography-~~semibold~~-~~body~~-sm truncate text-content-secondary dark:text-brand-primary-default\">\n {description}\n </p>\n )}\n </div>\n </div>\n {actions && <div className=\"flex flex-col gap-2\">{actions}</div>}\n </div>\n </div>\n );\n },\n);\n\nCreatorCard.displayName = \"CreatorCard\";\n"],"names":["React","jsxs","cn","jsx","Avatar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,QAAQ,SAAS,GAAG,MAAA,GAAS,QAAQ;AAChF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,gIACZ,UAAA,YACH;AAAA,UACAA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,UAAU,UAAU;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAEFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,YAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAAE,2BAAAA;AAAAA,gBAACC,OAAAA;AAAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,OAAO;AAAA,kBACpB,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAENH,2BAAAA,KAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,gBAAAE,2BAAAA,IAAC,KAAA,EAAE,WAAU,~~4DAA4D~~,UAAA,MAAK;AAAA,~~gBAC7E~~,eACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU~~,+FACV~~,UAAA,YAAA,CACH;AAAA,cAAA,EAAA,CAEJ;AAAA,YAAA,GACF;AAAA,YACC,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}
1	+ {"version":3,"file":"CreatorCard.cjs","sources":["../../../../src/components/CreatorCard/CreatorCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\nexport interface CreatorCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Decorative background media rendered behind the creator content. /\n background: React.ReactNode;\n /* Creator display name shown as the heading. /\n name: string;\n /* Optional secondary line shown below the name (e.g. role or tagline). /\n description?: string;\n /* Avatar props forwarded to the inner {@link Avatar}. /\n avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n /\n Action buttons rendered at the bottom of the card. Pass zero, one, or two\n * `Button` elements to render variants with no, one, or two CTAs.\n /\n actions?: React.ReactNode;\n}\n\n/\n A portrait media card highlighting a creator with avatar, name, optional\n * tagline, and up to two stacked action buttons over a background image.\n \n Pass zero, one, or two {@link Button} elements via `actions` to render the\n * no-button, single-button, or two-button variants.\n \n @example\n * ```tsx\n * <CreatorCard\n * background={<img src=\"/creator.jpg\" alt=\"\" />}\n * name=\"Jane Doe\"\n * description=\"MODEL & PODCASTER\"\n * avatar={{ src: \"/avatar.jpg\", alt: \"Jane Doe\", fallback: \"JD\" }}\n * actions={\n * <>\n * <Button variant=\"brand\" fullWidth>Join for free for 3 days</Button>\n * <Button variant=\"primary\" fullWidth>Follow for Free</Button>\n * </>\n * }\n * />\n * ```\n /\nexport const CreatorCard = React.forwardRef<HTMLDivElement, CreatorCardProps>(\n ({ className, background, name, description, avatar, actions, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n \"relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-background-primary\",\n className,\n )}\n {...props}\n >\n <div className=\"pointer-events-none absolute inset-0 h-full w-full select-none :h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n {background}\n </div>\n <div\n className={cn(\n \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-background-primary via-background-primary/90 to-transparent\",\n actions ? \"h-3/5\" : \"h-1/3\",\n )}\n />\n <div className=\"relative flex flex-col gap-4 p-4\">\n <div className=\"flex items-center gap-4\">\n <Avatar\n size={48}\n src={avatar?.src}\n alt={avatar?.alt ?? name}\n fallback={avatar?.fallback}\n {...avatar}\n />\n <div className=\"min-w-0 flex-1\">\n <p className=\"typography-header-heading-sm truncate text-content-primary\">{name}</p>\n {description && (\n <p className=\"typography-description-12px-semibold truncate text-content-secondary dark:text-brand-primary-default\">\n {description}\n </p>\n )}\n </div>\n </div>\n {actions && <div className=\"flex flex-col gap-2\">{actions}</div>}\n </div>\n </div>\n );\n },\n);\n\nCreatorCard.displayName = \"CreatorCard\";\n"],"names":["React","jsxs","cn","jsx","Avatar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,QAAQ,SAAS,GAAG,MAAA,GAAS,QAAQ;AAChF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,gIACZ,UAAA,YACH;AAAA,UACAA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,UAAU,UAAU;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAEFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,YAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAAE,2BAAAA;AAAAA,gBAACC,OAAAA;AAAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,OAAO;AAAA,kBACpB,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAENH,2BAAAA,KAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,gBAAAE,2BAAAA,IAAC,KAAA,EAAE,WAAU,8DAA8D,UAAA,MAAK;AAAA,gBAC/E,eACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,wGACV,UAAA,YAAA,CACH;AAAA,cAAA,EAAA,CAEJ;AAAA,YAAA,GACF;AAAA,YACC,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/components/CreatorCover/CreatorCover.cjs CHANGED Viewed

@@ -36,7 +36,7 @@ const CreatorCover = React__namespace.forwardRef(
         "aria-labelledby": headingId,
         "data-testid": "creator-cover",
         className: cn.cn(
-          "relative isolate w-full overflow-hidden bg-white dark:bg-bg-primary",
+          "relative isolate w-full overflow-hidden bg-white dark:bg-background-primary",
           className
         ),
         ...props,
@@ -51,8 +51,8 @@ const CreatorCover = React__namespace.forwardRef(
                 className: "size-full scale-110 object-cover blur-3xl"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-b from-white/30 to-white/15 dark:from-bg-primary/30 dark:to-bg-primary/15" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-b from-transparent to-white dark:to-bg-primary" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-b from-white/30 to-white/15 dark:from-background-primary/30 dark:to-background-primary/15" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-b from-transparent to-white dark:to-background-primary" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("mx-auto flex max-w-90 flex-col items-center gap-4 px-4 pt-17 pb-16"), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -68,8 +68,8 @@ const CreatorCover = React__namespace.forwardRef(
               renderedTag ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2", children: renderedTag }) : null
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1 pt-4 text-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: headingId, className: "typography-bold-heading-md m-0 text-white", children: name }),
-              tagline ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-badge m-0 text-brand-primary-default uppercase", children: tagline }) : null
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: headingId, className: "typography-header-heading-md m-0 text-white", children: name }),
+              tagline ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-badge-badgecaps m-0 text-brand-primary-default uppercase", children: tagline }) : null
             ] }),
             action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full pt-2", children: action }) : null
           ] })