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

@fanvue/ui 2.21.0 → 3.0.1

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/components/SwitchField/SwitchField.mjs CHANGED Viewed

@@ -48,7 +48,7 @@ const SwitchField = React.forwardRef(
                 className: cn(
                   "cursor-pointer select-none text-content-primary",
                   disabled && "cursor-not-allowed text-content-tertiary",
-                  size === "default" ? "typography-semibold-body-lg" : "typography-semibold-body-md"
+                  size === "default" ? "typography-body-default-16px-semibold" : "typography-body-small-14px-semibold"
                 ),
                 children: label
               }
@@ -71,7 +71,7 @@ const SwitchField = React.forwardRef(
               className: cn(
                 "text-content-secondary",
                 disabled && "text-content-tertiary",
-                size === "default" ? "typography-regular-body-md" : "typography-regular-body-sm"
+                size === "default" ? "typography-body-small-14px-regular" : "typography-description-12px-regular"
               ),
               children: helperText
             }

package/dist/components/SwitchField/SwitchField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwitchField.mjs","sources":["../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Side on which the switch toggle is positioned relative to the label. /\nexport type SwitchFieldOrientation = \"right\" \| \"left\";\n\nexport interface SwitchFieldProps\n extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" \| \"className\"> {\n /* Side on which the switch is placed relative to the label. @default \"right\" /\n orientation?: SwitchFieldOrientation;\n /* Size variant of the switch and accompanying text. @default \"default\" /\n size?: SwitchSize;\n /* Label text displayed next to the switch. /\n label?: string;\n /* Descriptive text displayed below the label. /\n helperText?: string;\n /* Tooltip text shown when hovering the info icon next to the label. /\n infoText?: string;\n /* Accessible label for the info tooltip trigger button. Override for i18n.\n * @default \"More information\"\n /\n infoLabel?: string;\n /* Additional CSS class name for the outer wrapper. /\n className?: string;\n}\n\n/\n A labelled switch field with optional helper text and info tooltip. Composes\n * the {@link Switch} component with a `<label>` and description.\n \n @example\n * ```tsx\n * <SwitchField\n * label=\"Notifications\"\n * helperText=\"Receive push notifications\"\n * checked={enabled}\n * onCheckedChange={setEnabled}\n * />\n * ```\n */\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n (\n {\n className,\n orientation = \"right\",\n size = \"default\",\n label,\n helperText,\n infoText,\n infoLabel = \"More information\",\n disabled,\n id: propId,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const id = propId ?? generatedId;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n const switchElement = (\n <Switch\n ref={ref}\n id={id}\n size={size}\n disabled={disabled}\n aria-describedby={helperTextId}\n {...props}\n />\n );\n\n const labelContent = (label \|\| helperText) && (\n <div\n className={cn(\n \"flex min-w-0 flex-1 flex-col items-start\",\n size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n )}\n >\n {label && (\n <div className=\"flex items-center gap-1\">\n <label\n htmlFor={id}\n className={cn(\n \"cursor-pointer select-none text-content-primary\",\n disabled && \"cursor-not-allowed text-content-tertiary\",\n size === \"default\" ? \"typography-~~semibold-~~body-lg\" : \"typography-~~semibold-~~body-md\",\n )}\n >\n {label}\n </label>\n {infoText && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <button type=\"button\" aria-label={infoLabel} className=\"flex shrink-0 pt-0.5\">\n <InfoCircleIcon\n aria-hidden=\"true\"\n className=\"size-5 text-content-secondary\"\n />\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">{infoText}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )}\n {helperText && (\n <span\n id={helperTextId}\n className={cn(\n \"text-content-secondary\",\n disabled && \"text-content-tertiary\",\n size === \"default\" ? \"typography-~~regular-~~body-md\" : \"typography-~~regular~~-~~body~~-sm\",\n )}\n >\n {helperText}\n </span>\n )}\n </div>\n );\n\n return (\n <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n {orientation === \"left\" && switchElement}\n {labelContent}\n {orientation === \"right\" && switchElement}\n </div>\n );\n },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":[],"mappings":";;;;;;;AA2CO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACC,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,~~YAAY~~,~~gCAAgC~~;AAAA,gBAAA;AAAA,~~gBAGtD~~,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACC,oBAAC,iBAAA,EACC,UAAA,qBAAC,SAAA,EACC,UAAA;AAAA,cAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA,oBAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,gBAAA;AAAA,cAAA,GAEd,EAAA,CACF;AAAA,cACA,oBAAC,gBAAA,EAAe,MAAK,UAAU,UAAA,SAAA,CAAS;AAAA,YAAA,EAAA,CAC1C,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,~~YAAY,+BAA+B~~;AAAA,cAAA;AAAA,~~cAGrD~~,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACE,qBAAC,SAAI,WAAW,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;"}
1	+ {"version":3,"file":"SwitchField.mjs","sources":["../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Side on which the switch toggle is positioned relative to the label. /\nexport type SwitchFieldOrientation = \"right\" \| \"left\";\n\nexport interface SwitchFieldProps\n extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" \| \"className\"> {\n /* Side on which the switch is placed relative to the label. @default \"right\" /\n orientation?: SwitchFieldOrientation;\n /* Size variant of the switch and accompanying text. @default \"default\" /\n size?: SwitchSize;\n /* Label text displayed next to the switch. /\n label?: string;\n /* Descriptive text displayed below the label. /\n helperText?: string;\n /* Tooltip text shown when hovering the info icon next to the label. /\n infoText?: string;\n /* Accessible label for the info tooltip trigger button. Override for i18n.\n * @default \"More information\"\n /\n infoLabel?: string;\n /* Additional CSS class name for the outer wrapper. /\n className?: string;\n}\n\n/\n A labelled switch field with optional helper text and info tooltip. Composes\n * the {@link Switch} component with a `<label>` and description.\n \n @example\n * ```tsx\n * <SwitchField\n * label=\"Notifications\"\n * helperText=\"Receive push notifications\"\n * checked={enabled}\n * onCheckedChange={setEnabled}\n * />\n * ```\n */\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n (\n {\n className,\n orientation = \"right\",\n size = \"default\",\n label,\n helperText,\n infoText,\n infoLabel = \"More information\",\n disabled,\n id: propId,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const id = propId ?? generatedId;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n const switchElement = (\n <Switch\n ref={ref}\n id={id}\n size={size}\n disabled={disabled}\n aria-describedby={helperTextId}\n {...props}\n />\n );\n\n const labelContent = (label \|\| helperText) && (\n <div\n className={cn(\n \"flex min-w-0 flex-1 flex-col items-start\",\n size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n )}\n >\n {label && (\n <div className=\"flex items-center gap-1\">\n <label\n htmlFor={id}\n className={cn(\n \"cursor-pointer select-none text-content-primary\",\n disabled && \"cursor-not-allowed text-content-tertiary\",\n size === \"default\"\n ? \"typography-body-default-16px-semibold\"\n : \"typography-body-small-14px-semibold\",\n )}\n >\n {label}\n </label>\n {infoText && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <button type=\"button\" aria-label={infoLabel} className=\"flex shrink-0 pt-0.5\">\n <InfoCircleIcon\n aria-hidden=\"true\"\n className=\"size-5 text-content-secondary\"\n />\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">{infoText}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )}\n {helperText && (\n <span\n id={helperTextId}\n className={cn(\n \"text-content-secondary\",\n disabled && \"text-content-tertiary\",\n size === \"default\"\n ? \"typography-body-small-14px-regular\"\n : \"typography-description-12px-regular\",\n )}\n >\n {helperText}\n </span>\n )}\n </div>\n );\n\n return (\n <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n {orientation === \"left\" && switchElement}\n {labelContent}\n {orientation === \"right\" && switchElement}\n </div>\n );\n },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":[],"mappings":";;;;;;;AA2CO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACC,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,YACL,0CACA;AAAA,gBAAA;AAAA,gBAGL,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACC,oBAAC,iBAAA,EACC,UAAA,qBAAC,SAAA,EACC,UAAA;AAAA,cAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA,oBAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,gBAAA;AAAA,cAAA,GAEd,EAAA,CACF;AAAA,cACA,oBAAC,gBAAA,EAAe,MAAK,UAAU,UAAA,SAAA,CAAS;AAAA,YAAA,EAAA,CAC1C,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YACL,uCACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACE,qBAAC,SAAI,WAAW,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;"}

package/dist/components/SwitchToggle/SwitchToggle.mjs CHANGED Viewed

@@ -29,7 +29,7 @@ const SwitchToggle = React.forwardRef(
     const anySelected = options.some((o) => o.value === currentValue);
     const isSecondSelected = currentValue === options[1].value;
     const buttonRefs = React.useRef([]);
-    const sizeClass = size === "24" ? "px-2 py-1 typography-semibold-body-sm" : size === "32" ? "px-3 py-1.75 typography-semibold-body-md" : "h-10 px-4 py-2.25 typography-semibold-body-lg";
+    const sizeClass = size === "24" ? "px-2 py-1 typography-description-12px-semibold" : size === "32" ? "px-3 py-1.75 typography-body-small-14px-semibold" : "h-10 px-4 py-2.25 typography-body-default-16px-semibold";
     const handleSelect = (optionValue) => {
       if (disabled || optionValue === currentValue) return;
       if (!isControlled) {

package/dist/components/SwitchToggle/SwitchToggle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwitchToggle.mjs","sources":["../../../src/components/SwitchToggle/SwitchToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the switch toggle in pixels. /\nexport type SwitchToggleSize = \"24\" \| \"32\" \| \"40\";\n\n/* Describes one side of the binary toggle. /\nexport interface SwitchToggleOption {\n /* Display label for the option. /\n label: string;\n /* Value identifier returned via `onChange`. /\n value: string;\n}\n\nexport interface SwitchToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n /* Height of the toggle in pixels. @default \"24\" /\n size?: SwitchToggleSize;\n /* The two options to toggle between (exactly two required). /\n options: [SwitchToggleOption, SwitchToggleOption];\n /* Currently selected value (controlled). /\n value?: string;\n /* Initially selected value (uncontrolled). /\n defaultValue?: string;\n /* Callback fired when the selected value changes. /\n onChange?: (value: string) => void;\n /* Whether the toggle is disabled. @default false /\n disabled?: boolean;\n}\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"SwitchToggle: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\n/\n A binary segmented toggle rendered as a `radiogroup`. The active option is\n * highlighted with a sliding pill indicator. Supports both controlled and\n * uncontrolled usage.\n \n @example\n * ```tsx\n * <SwitchToggle\n * options={[\n * { label: \"Monthly\", value: \"monthly\" },\n * { label: \"Yearly\", value: \"yearly\" },\n * ]}\n * value={billing}\n * onChange={setBilling}\n * />\n * ```\n */\nexport const SwitchToggle = React.forwardRef<HTMLDivElement, SwitchToggleProps>(\n (\n {\n className,\n size = \"24\",\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n disabled = false,\n ...props\n },\n ref,\n ) => {\n warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0].value);\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n const anySelected = options.some((o) => o.value === currentValue);\n const isSecondSelected = currentValue === options[1].value;\n const buttonRefs = React.useRef<(HTMLButtonElement \| null)[]>([]);\n\n const sizeClass =\n size === \"24\"\n ? \"px-2 py-1 typography-~~semibold~~-~~body~~-sm\"\n : size === \"32\"\n ? \"px-3 py-1.75 typography-~~semibold-~~body-md\"\n : \"h-10 px-4 py-2.25 typography-~~semibold-~~body-lg\";\n\n const handleSelect = (optionValue: string) => {\n if (disabled \|\| optionValue === currentValue) return;\n if (!isControlled) {\n setInternalValue(optionValue);\n }\n onChange?.(optionValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n const nextIndex =\n e.key === \"ArrowRight\" \|\| e.key === \"ArrowDown\"\n ? (index + 1) % options.length\n : e.key === \"ArrowLeft\" \|\| e.key === \"ArrowUp\"\n ? (index - 1 + options.length) % options.length\n : null;\n if (nextIndex === null) return;\n e.preventDefault();\n const nextOption = options[nextIndex] as (typeof options)[number];\n handleSelect(nextOption.value);\n buttonRefs.current[nextIndex]?.focus();\n };\n\n return (\n <div\n ref={ref}\n role=\"radiogroup\"\n className={cn(\n \"relative inline-grid grid-cols-2 rounded-full border border-neutral-alphas-200 p-1\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <span\n aria-hidden=\"true\"\n className={cn(\n \"absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-primary-default bg-brand-primary-muted\",\n \"motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out\",\n isSecondSelected && \"translate-x-full\",\n )}\n />\n {options.map((option, index) => {\n const isSelected = currentValue === option.value;\n return (\n // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n <button\n key={option.value}\n ref={(el) => {\n buttonRefs.current[index] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={isSelected}\n tabIndex={isSelected \|\| (!anySelected && index === 0) ? 0 : -1}\n disabled={disabled}\n onClick={() => handleSelect(option.value)}\n onKeyDown={(e) => handleKeyDown(e, index)}\n className={cn(\n \"relative z-10 inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-content-primary\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n \"active:rounded-full active:bg-brand-primary-muted\",\n disabled && \"pointer-events-none\",\n sizeClass,\n )}\n >\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </button>\n );\n })}\n </div>\n );\n },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":[],"mappings":";;;;AA6BA,SAAS,0BAA0B,WAAoB,gBAAyB;AAC9E,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa,CAAC,gBAAgB;AACjC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAmBO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,8BAA0B,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAGvE,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,QAAQ,CAAC,EAAE,KAAK;AACzF,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY;AAChE,UAAM,mBAAmB,iBAAiB,QAAQ,CAAC,EAAE;AACrD,UAAM,aAAa,MAAM,OAAqC,EAAE;AAEhE,UAAM,YACJ,SAAS,OACL,~~0CACA~~,SAAS,OACP,~~6CACA~~;AAER,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,YAAY,gBAAgB,aAAc;AAC9C,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,YAAM,YACJ,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eAC/B,QAAQ,KAAK,QAAQ,SACtB,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAChC,QAAQ,IAAI,QAAQ,UAAU,QAAQ,SACvC;AACR,UAAI,cAAc,KAAM;AACxB,QAAE,eAAA;AACF,YAAM,aAAa,QAAQ,SAAS;AACpC,mBAAa,WAAW,KAAK;AAC7B,iBAAW,QAAQ,SAAS,GAAG,MAAA;AAAA,IACjC;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,oBAAoB;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAED,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,kBAAM,aAAa,iBAAiB,OAAO;AAC3C;AAAA;AAAA,cAEE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,KAAK,CAAC,OAAO;AACX,+BAAW,QAAQ,KAAK,IAAI;AAAA,kBAC9B;AAAA,kBACA,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,gBAAc;AAAA,kBACd,UAAU,cAAe,CAAC,eAAe,UAAU,IAAK,IAAI;AAAA,kBAC5D;AAAA,kBACA,SAAS,MAAM,aAAa,OAAO,KAAK;AAAA,kBACxC,WAAW,CAAC,MAAM,cAAc,GAAG,KAAK;AAAA,kBACxC,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,YAAY;AAAA,oBACZ;AAAA,kBAAA;AAAA,kBAGF,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,gBAAA;AAAA,gBAnB5C,OAAO;AAAA,cAAA;AAAA;AAAA,UAsBlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}
1	+ {"version":3,"file":"SwitchToggle.mjs","sources":["../../../src/components/SwitchToggle/SwitchToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the switch toggle in pixels. /\nexport type SwitchToggleSize = \"24\" \| \"32\" \| \"40\";\n\n/* Describes one side of the binary toggle. /\nexport interface SwitchToggleOption {\n /* Display label for the option. /\n label: string;\n /* Value identifier returned via `onChange`. /\n value: string;\n}\n\nexport interface SwitchToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n /* Height of the toggle in pixels. @default \"24\" /\n size?: SwitchToggleSize;\n /* The two options to toggle between (exactly two required). /\n options: [SwitchToggleOption, SwitchToggleOption];\n /* Currently selected value (controlled). /\n value?: string;\n /* Initially selected value (uncontrolled). /\n defaultValue?: string;\n /* Callback fired when the selected value changes. /\n onChange?: (value: string) => void;\n /* Whether the toggle is disabled. @default false /\n disabled?: boolean;\n}\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"SwitchToggle: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\n/\n A binary segmented toggle rendered as a `radiogroup`. The active option is\n * highlighted with a sliding pill indicator. Supports both controlled and\n * uncontrolled usage.\n \n @example\n * ```tsx\n * <SwitchToggle\n * options={[\n * { label: \"Monthly\", value: \"monthly\" },\n * { label: \"Yearly\", value: \"yearly\" },\n * ]}\n * value={billing}\n * onChange={setBilling}\n * />\n * ```\n */\nexport const SwitchToggle = React.forwardRef<HTMLDivElement, SwitchToggleProps>(\n (\n {\n className,\n size = \"24\",\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n disabled = false,\n ...props\n },\n ref,\n ) => {\n warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0].value);\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n const anySelected = options.some((o) => o.value === currentValue);\n const isSecondSelected = currentValue === options[1].value;\n const buttonRefs = React.useRef<(HTMLButtonElement \| null)[]>([]);\n\n const sizeClass =\n size === \"24\"\n ? \"px-2 py-1 typography-description-12px-semibold\"\n : size === \"32\"\n ? \"px-3 py-1.75 typography-body-small-14px-semibold\"\n : \"h-10 px-4 py-2.25 typography-body-default-16px-semibold\";\n\n const handleSelect = (optionValue: string) => {\n if (disabled \|\| optionValue === currentValue) return;\n if (!isControlled) {\n setInternalValue(optionValue);\n }\n onChange?.(optionValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n const nextIndex =\n e.key === \"ArrowRight\" \|\| e.key === \"ArrowDown\"\n ? (index + 1) % options.length\n : e.key === \"ArrowLeft\" \|\| e.key === \"ArrowUp\"\n ? (index - 1 + options.length) % options.length\n : null;\n if (nextIndex === null) return;\n e.preventDefault();\n const nextOption = options[nextIndex] as (typeof options)[number];\n handleSelect(nextOption.value);\n buttonRefs.current[nextIndex]?.focus();\n };\n\n return (\n <div\n ref={ref}\n role=\"radiogroup\"\n className={cn(\n \"relative inline-grid grid-cols-2 rounded-full border border-neutral-alphas-200 p-1\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <span\n aria-hidden=\"true\"\n className={cn(\n \"absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-primary-default bg-brand-primary-muted\",\n \"motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out\",\n isSecondSelected && \"translate-x-full\",\n )}\n />\n {options.map((option, index) => {\n const isSelected = currentValue === option.value;\n return (\n // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n <button\n key={option.value}\n ref={(el) => {\n buttonRefs.current[index] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={isSelected}\n tabIndex={isSelected \|\| (!anySelected && index === 0) ? 0 : -1}\n disabled={disabled}\n onClick={() => handleSelect(option.value)}\n onKeyDown={(e) => handleKeyDown(e, index)}\n className={cn(\n \"relative z-10 inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-content-primary\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n \"active:rounded-full active:bg-brand-primary-muted\",\n disabled && \"pointer-events-none\",\n sizeClass,\n )}\n >\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </button>\n );\n })}\n </div>\n );\n },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":[],"mappings":";;;;AA6BA,SAAS,0BAA0B,WAAoB,gBAAyB;AAC9E,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa,CAAC,gBAAgB;AACjC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAmBO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,8BAA0B,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAGvE,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,QAAQ,CAAC,EAAE,KAAK;AACzF,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY;AAChE,UAAM,mBAAmB,iBAAiB,QAAQ,CAAC,EAAE;AACrD,UAAM,aAAa,MAAM,OAAqC,EAAE;AAEhE,UAAM,YACJ,SAAS,OACL,mDACA,SAAS,OACP,qDACA;AAER,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,YAAY,gBAAgB,aAAc;AAC9C,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,YAAM,YACJ,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eAC/B,QAAQ,KAAK,QAAQ,SACtB,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAChC,QAAQ,IAAI,QAAQ,UAAU,QAAQ,SACvC;AACR,UAAI,cAAc,KAAM;AACxB,QAAE,eAAA;AACF,YAAM,aAAa,QAAQ,SAAS;AACpC,mBAAa,WAAW,KAAK;AAC7B,iBAAW,QAAQ,SAAS,GAAG,MAAA;AAAA,IACjC;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,oBAAoB;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAED,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,kBAAM,aAAa,iBAAiB,OAAO;AAC3C;AAAA;AAAA,cAEE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,KAAK,CAAC,OAAO;AACX,+BAAW,QAAQ,KAAK,IAAI;AAAA,kBAC9B;AAAA,kBACA,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,gBAAc;AAAA,kBACd,UAAU,cAAe,CAAC,eAAe,UAAU,IAAK,IAAI;AAAA,kBAC5D;AAAA,kBACA,SAAS,MAAM,aAAa,OAAO,KAAK;AAAA,kBACxC,WAAW,CAAC,MAAM,cAAc,GAAG,KAAK;AAAA,kBACxC,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,YAAY;AAAA,oBACZ;AAAA,kBAAA;AAAA,kBAGF,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,gBAAA;AAAA,gBAnB5C,OAAO;AAAA,cAAA;AAAA;AAAA,UAsBlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}

package/dist/components/Table/Table.mjs CHANGED Viewed

@@ -106,7 +106,7 @@ const TableHead = React.forwardRef(
         ref,
         scope,
         className: cn(
-          "typography-semibold-body-sm box-border min-h-12 border-b border-border-primary px-4 py-3 align-middle text-content-tertiary",
+          "typography-description-12px-semibold box-border min-h-12 border-b border-border-primary px-4 py-3 align-middle text-content-tertiary",
           HEAD_INTENT_CLASSES[intent],
           className
         ),
@@ -136,7 +136,7 @@ const CELL_INTENT_CLASSES = {
 const TableCell = React.forwardRef(
   ({ className, cellVariant = "default", intent = "default", ...props }, ref) => {
     const size = useTableSize();
-    const typo = intent === "sideLabel" ? "typography-semibold-body-sm" : "typography-regular-body-sm";
+    const typo = intent === "sideLabel" ? "typography-description-12px-semibold" : "typography-description-12px-regular";
     return /* @__PURE__ */ jsx(
       "td",
       {
@@ -170,11 +170,11 @@ function TableCellContent({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "typography-semibold-body-sm text-content-primary", children: primary }),
+      /* @__PURE__ */ jsx("span", { className: "typography-description-12px-semibold text-content-primary", children: primary }),
       primaryAdornment
     ] }),
     (secondary != null || secondaryAdornment != null) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      secondary != null && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-content-secondary", children: secondary }),
+      secondary != null && /* @__PURE__ */ jsx("span", { className: "typography-description-12px-regular text-content-secondary", children: secondary }),
       secondaryAdornment
     ] })
   ] });
@@ -231,7 +231,7 @@ const TableProgressTrack = React.forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute top-0 left-0 h-1 rounded-full bg-buttons-primary",
+            className: "absolute top-0 left-0 h-1 rounded-full bg-buttons-primary-default",
             style: { width: `${width}%` },
             "aria-hidden": true
           }
@@ -266,7 +266,7 @@ const TableSortLabel = React.forwardRef(
             "span",
             {
               className: cn(
-                "typography-semibold-body-sm",
+                "typography-description-12px-semibold",
                 direction != null && "border-b border-content-primary pb-px"
               ),
               children
@@ -309,7 +309,7 @@ function TableRowsPerPageSelect(props) {
       defaultValue: "10",
       size: "32",
       "aria-label": ariaLabel,
-      className: "w-[154px] [&_button]:rounded-sm [&_button]:border-transparent [&_button]:bg-surface-inputs",
+      className: "w-[154px] [&_button]:rounded-sm [&_button]:border-transparent [&_button]:bg-inputs-inputs-primary",
       id,
       children: /* @__PURE__ */ jsxs(SelectContent, { children: [
         /* @__PURE__ */ jsx(SelectItem, { value: "10", children: "10 rows per page" }),

package/dist/components/Table/Table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ArrowDownIcon } from \"../Icons/ArrowDownIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { Select, SelectContent, SelectItem } from \"../Select/Select\";\n\n/*\n Row density for body cells.\n \n - `\"md\"` (default) → 64px Figma `V2 Table Cell` Small.\n * - `\"lg\"` → 80px Figma `V2 Table Cell` Large.\n \n `\"default\"` is the v2 numeric-token equivalent of `\"md\"` and is preferred\n * for new code.\n /\nexport type TableSize = \"md\" \| \"lg\" \| \"default\";\n\nexport interface TableCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Row density applied to {@link TableCell} descendants. @default \"md\" /\n size?: TableSize;\n}\n\nconst TableSizeContext = React.createContext<TableSize>(\"md\");\n\nfunction useTableSize(): TableSize {\n return React.useContext(TableSizeContext);\n}\n\n/\n Surface wrapper for data tables: rounded 24px container with a strong\n * outer border, inner spacing, and size context for {@link TableCell}\n * descendants. Compose with {@link TableScrollArea}, {@link Table},\n * {@link TableHeader}, {@link TableBody}, {@link TableRow},\n * {@link TableHead}, and {@link TableCell}.\n \n @example\n * ```tsx\n * <TableCard>\n * <TableScrollArea>\n * <Table>\n * <TableHeader>\n * <TableRow>\n * <TableHead>Name</TableHead>\n * </TableRow>\n * </TableHeader>\n * <TableBody>\n * <TableRow>\n * <TableCell>Jane Doe</TableCell>\n * </TableRow>\n * </TableBody>\n * </Table>\n * </TableScrollArea>\n * </TableCard>\n * ```\n /\nexport const TableCard = React.forwardRef<HTMLDivElement, TableCardProps>(\n ({ className, size = \"md\", ...props }, ref) => {\n return (\n <TableSizeContext.Provider value={size}>\n <div\n ref={ref}\n className={cn(\n \"isolate flex flex-col gap-2 overflow-hidden rounded-3xl border border-border-strong px-3 py-1\",\n className,\n )}\n {...props}\n />\n </TableSizeContext.Provider>\n );\n },\n);\nTableCard.displayName = \"TableCard\";\n\nexport interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/\n Optional toolbar row above the table (e.g. bulk selection actions).\n /\nexport const TableToolbar = React.forwardRef<HTMLDivElement, TableToolbarProps>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\"flex flex-wrap items-center gap-4 px-4 py-3\", className)}\n {...props}\n />\n );\n },\n);\nTableToolbar.displayName = \"TableToolbar\";\n\nexport interface TableScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n /\n No longer needed in v2 — {@link TableCard} handles corner rounding via\n * its own `overflow-hidden rounded-3xl`. Accepted for back-compat.\n \n @deprecated v2 ignores this prop; safe to remove.\n /\n roundTop?: boolean;\n}\n\n/\n Horizontal scroll container for wide tables. The inner scrollport keeps\n * `border-collapse` styles intact when the table wraps.\n /\nexport const TableScrollArea = React.forwardRef<HTMLDivElement, TableScrollAreaProps>(\n ({ className, children, roundTop: _roundTop, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\"relative w-full min-w-0 overflow-hidden\", className)}\n {...props}\n >\n <div className=\"overflow-x-auto\">{children}</div>\n </div>\n );\n },\n);\nTableScrollArea.displayName = \"TableScrollArea\";\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\n/\n Semantic `<table>` element. Place inside {@link TableScrollArea}.\n /\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n ({ className, ...props }, ref) => {\n return (\n <table\n ref={ref}\n className={cn(\n \"w-full caption-bottom border-separate border-spacing-0 text-left\",\n className,\n )}\n {...props}\n />\n );\n },\n);\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n ({ className, ...props }, ref) => {\n return <thead ref={ref} className={cn(className)} {...props} />;\n },\n);\nTableHeader.displayName = \"TableHeader\";\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\n/\n `<tbody>` wrapper. Removes the bottom border on cells in the final row to\n * match the Figma `V2 Table Final Row` treatment.\n /\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(\n ({ className, ...props }, ref) => {\n return (\n <tbody ref={ref} className={cn(\"[&_tr:last-child_td]:border-b-0\", className)} {...props} />\n );\n },\n);\nTableBody.displayName = \"TableBody\";\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(\n ({ className, ...props }, ref) => {\n return <tfoot ref={ref} className={cn(className)} {...props} />;\n },\n);\nTableFooter.displayName = \"TableFooter\";\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, ...props }, ref) => {\n return <tr ref={ref} className={cn(className)} {...props} />;\n },\n);\nTableRow.displayName = \"TableRow\";\n\n/* Column layout preset for {@link TableHead}. /\nexport type TableHeadIntent = \"default\" \| \"checkbox\" \| \"sort\" \| \"leading\";\n\nconst HEAD_INTENT_CLASSES: Record<TableHeadIntent, string> = {\n default: \"text-left\",\n checkbox: \"w-12 min-w-12 max-w-12 text-center\",\n sort: \"text-right\",\n leading: \"min-w-0 w-2/5 text-left\",\n};\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /* Layout preset for common column types. @default \"default\" /\n intent?: TableHeadIntent;\n}\n\n/\n Header cell. v2: transparent background, 48px min height, tertiary text,\n * `border-border-primary` bottom rule.\n /\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, intent = \"default\", scope = \"col\", ...props }, ref) => {\n return (\n <th\n ref={ref}\n scope={scope}\n className={cn(\n \"typography-semibold-body-sm box-border min-h-12 border-b border-border-primary px-4 py-3 align-middle text-content-tertiary\",\n HEAD_INTENT_CLASSES[intent],\n className,\n )}\n {...props}\n />\n );\n },\n);\nTableHead.displayName = \"TableHead\";\n\nconst CELL_MIN_HEIGHT: Record<TableSize, string> = {\n md: \"h-16 min-h-16\",\n default: \"h-16 min-h-16\",\n lg: \"h-20 min-h-20\",\n};\n\n/* Bottom border and padding preset for body cells (Figma table cell component). /\nexport type TableCellVariant = \"default\" \| \"chip\" \| \"pillProgress\";\n\nconst CELL_VARIANT_CLASSES: Record<TableCellVariant, string> = {\n default: \"border-b border-border-primary px-4 py-3\",\n chip: \"border-b border-border-primary px-4 py-3\",\n pillProgress: \"border-b border-border-primary px-4 py-3\",\n};\n\n/* Layout / typography preset for {@link TableCell} (orthogonal to {@link TableCellVariant}). /\nexport type TableCellIntent = \"default\" \| \"checkbox\" \| \"stacked\" \| \"multiline\" \| \"sideLabel\";\n\nconst CELL_INTENT_CLASSES: Record<TableCellIntent, string> = {\n default: \"\",\n checkbox: \"w-12 min-w-12 max-w-12 text-center\",\n stacked: \"align-top\",\n multiline: \"max-w-[240px]\",\n sideLabel: \"\",\n};\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n /* Padding preset for the cell. v2 uses identical padding across variants; values are kept for back-compat. @default \"default\" /\n cellVariant?: TableCellVariant;\n /* Alignment and typography preset for common cell types. @default \"default\" /\n intent?: TableCellIntent;\n}\n\n/\n Body cell. v2: `h-16` (or `h-20` when the parent {@link TableCard} uses\n * `size=\"lg\"`), `px-4 py-3` padding, body-sm typography, and a single\n * `border-border-primary` rule that is zeroed by {@link TableBody} for the\n * final row.\n /\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n ({ className, cellVariant = \"default\", intent = \"default\", ...props }, ref) => {\n const size = useTableSize();\n const typo =\n intent === \"sideLabel\" ? \"typography-semibold-body-sm\" : \"typography-regular-body-sm\";\n return (\n <td\n ref={ref}\n className={cn(\n typo,\n \"align-middle text-content-primary\",\n CELL_VARIANT_CLASSES[cellVariant],\n CELL_MIN_HEIGHT[size],\n CELL_INTENT_CLASSES[intent],\n className,\n )}\n {...props}\n />\n );\n },\n);\nTableCell.displayName = \"TableCell\";\n\nexport interface TableCellGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/\n Horizontal group for icons, chips, and metadata inside a {@link TableCell}\n * (Figma `gap-[4px]`).\n /\nexport const TableCellGroup = React.forwardRef<HTMLDivElement, TableCellGroupProps>(\n ({ className, ...props }, ref) => {\n return <div ref={ref} className={cn(\"flex items-center gap-1\", className)} {...props} />;\n },\n);\nTableCellGroup.displayName = \"TableCellGroup\";\n\nexport interface TableCellContentProps {\n /* Primary line (semibold body-sm). /\n primary: React.ReactNode;\n /* Optional secondary line (regular body-sm, secondary color). /\n secondary?: React.ReactNode;\n /* Inline node rendered next to the primary line (icon, chip). /\n primaryAdornment?: React.ReactNode;\n /* Inline node rendered next to the secondary line. /\n secondaryAdornment?: React.ReactNode;\n /* Class for the outer wrapper. /\n className?: string;\n}\n\n/\n Two-line content slot matching Figma `V2 Table Content` — primary line\n * (semibold) over an optional secondary line (regular, muted) with a 2px\n * gap. Use inside {@link TableCell} for the common stacked-text pattern.\n /\nexport function TableCellContent({\n primary,\n secondary,\n primaryAdornment,\n secondaryAdornment,\n className,\n}: TableCellContentProps) {\n return (\n <div className={cn(\"flex flex-col gap-0.5\", className)}>\n <div className=\"flex items-center gap-1\">\n <span className=\"typography-semibold-body-sm text-content-primary\">{primary}</span>\n {primaryAdornment}\n </div>\n {(secondary != null \|\| secondaryAdornment != null) && (\n <div className=\"flex items-center gap-1\">\n {secondary != null && (\n <span className=\"typography-regular-body-sm text-content-secondary\">{secondary}</span>\n )}\n {secondaryAdornment}\n </div>\n )}\n </div>\n );\n}\nTableCellContent.displayName = \"TableCellContent\";\n\nexport interface TableMediaThumbnailProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n /* Image URL. /\n src: string;\n /* Alt text for the image. @default \"\" /\n alt?: string;\n /* Applies the table's blurred-media treatment. @default false /\n blurred?: boolean;\n /* `center` uses the fixed media column width from the lg spec. @default \"start\" /\n align?: \"start\" \| \"center\";\n}\n\n/\n Square 48px thumbnail used inside {@link TableCell} for media columns\n * (Figma `V2 Media Thumbnail Item`).\n /\nexport const TableMediaThumbnail = React.forwardRef<HTMLDivElement, TableMediaThumbnailProps>(\n ({ className, src, alt = \"\", blurred, align = \"start\", ...props }, ref) => {\n const frame = \"size-12 overflow-hidden rounded-sm bg-neutral-alphas-200\";\n return (\n <div\n ref={ref}\n className={cn(\n align === \"center\" && \"flex w-16 shrink-0 justify-center\",\n align === \"start\" && \"inline-flex shrink-0\",\n )}\n >\n <div className={cn(frame, blurred && \"blur-[2px]\", className)} {...props}>\n <img alt={alt} className=\"size-full object-cover\" src={src} />\n </div>\n </div>\n );\n },\n);\nTableMediaThumbnail.displayName = \"TableMediaThumbnail\";\n\nexport interface TableStatusDotProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/\n Small status indicator dot for table cells (Figma status column).\n /\nexport const TableStatusDot = React.forwardRef<HTMLDivElement, TableStatusDotProps>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\"size-2 shrink-0 rounded-full bg-info-content\", className)}\n {...props}\n />\n );\n },\n);\nTableStatusDot.displayName = \"TableStatusDot\";\n\nexport interface TableProgressTrackProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Fill width from 0–100. @default 0 /\n value?: number;\n}\n\n/\n Thin progress track used with badges in table cells (Figma pill + progress).\n * Renders with `role=\"progressbar\"` and a default `aria-label` of `\"Progress\"`.\n /\nexport const TableProgressTrack = React.forwardRef<HTMLDivElement, TableProgressTrackProps>(\n ({ className, value = 0, \"aria-label\": ariaLabel = \"Progress\", ...props }, ref) => {\n const width = Math.min(100, Math.max(0, value));\n const rounded = Math.round(width);\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuenow={rounded}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={ariaLabel}\n className={cn(\n \"relative h-1 w-full overflow-hidden rounded-full bg-neutral-alphas-200\",\n className,\n )}\n {...props}\n >\n <div\n className=\"absolute top-0 left-0 h-1 rounded-full bg-buttons-primary\"\n style={{ width: `${width}%` }}\n aria-hidden\n />\n </div>\n );\n },\n);\nTableProgressTrack.displayName = \"TableProgressTrack\";\n\nexport interface TablePillProgressLayoutProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/\n Vertical layout for pill label + {@link TableProgressTrack} in a cell.\n /\nexport const TablePillProgressLayout = React.forwardRef<\n HTMLDivElement,\n TablePillProgressLayoutProps\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\"flex min-w-[120px] flex-col items-start gap-2\", className)}\n {...props}\n />\n );\n});\nTablePillProgressLayout.displayName = \"TablePillProgressLayout\";\n\n/* Current sort direction of a {@link TableSortLabel}. `null` means unsorted. /\nexport type TableSortDirection = \"asc\" \| \"desc\" \| null;\n\nexport interface TableSortLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n children: React.ReactNode;\n /\n Visual indicator of the column's sort state. When set to `\"asc\"` or\n * `\"desc\"`, a 1px underline accent appears beneath the label and a small\n * directional arrow is shown next to it. @default null\n /\n direction?: TableSortDirection;\n}\n\n/\n Sortable column label. v2 expresses the sort state with a 1px underline\n * beneath the label plus a directional arrow when sorted.\n /\nexport const TableSortLabel = React.forwardRef<HTMLSpanElement, TableSortLabelProps>(\n ({ className, children, direction = null, ...props }, ref) => {\n const Icon = direction === \"desc\" ? ArrowDownIcon : ArrowUpIcon;\n return (\n <span\n ref={ref}\n className={cn(\"inline-flex items-center gap-1 text-content-primary\", className)}\n {...props}\n >\n <span\n className={cn(\n \"typography-semibold-body-sm\",\n direction != null && \"border-b border-content-primary pb-px\",\n )}\n >\n {children}\n </span>\n {direction != null && <Icon className=\"size-4 shrink-0\" aria-hidden />}\n </span>\n );\n },\n);\nTableSortLabel.displayName = \"TableSortLabel\";\n\nexport interface TableStackedTextProps {\n /* Primary line (semibold body). /\n title: React.ReactNode;\n /* Secondary line (caption, muted). /\n subtitle: React.ReactNode;\n}\n\n/\n Two-line primary + secondary text block for \"cell + info\" patterns.\n \n @deprecated Prefer {@link TableCellContent} which supports adornments and\n * matches the Figma `V2 Table Content` slot.\n /\nexport function TableStackedText({ title, subtitle }: TableStackedTextProps) {\n return <TableCellContent primary={title} secondary={subtitle} />;\n}\n\nTableStackedText.displayName = \"TableStackedText\";\n\nexport interface TableLineClampProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Number of lines before ellipsis. @default 2 /\n lines?: 1 \| 2 \| 3;\n}\n\n/\n Clamps child text to a fixed number of lines inside a {@link TableCell}.\n /\nexport const TableLineClamp = React.forwardRef<HTMLDivElement, TableLineClampProps>(\n ({ className, lines = 2, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n lines === 1 && \"line-clamp-1\",\n lines === 2 && \"line-clamp-2\",\n lines === 3 && \"line-clamp-3\",\n className,\n )}\n {...props}\n />\n );\n },\n);\nTableLineClamp.displayName = \"TableLineClamp\";\n\nexport interface TableRowsPerPageSelectProps {\n /* Passed to the trigger for forms and labels. /\n id?: string;\n /* Accessible name for the trigger when no visible label. @default \"Rows per page\" /\n \"aria-label\"?: string;\n}\n\n/\n Rows-per-page {@link Select} styled for {@link TablePagination}. v2 uses a\n * subtle pill trigger with the table's secondary-surface background.\n */\nexport function TableRowsPerPageSelect(props: TableRowsPerPageSelectProps) {\n const { id, \"aria-label\": ariaLabel = \"Rows per page\" } = props;\n return (\n <Select\n defaultValue=\"10\"\n size=\"32\"\n aria-label={ariaLabel}\n className=\"w-[154px] [&_button]:rounded-sm [&_button]:border-transparent [&_button]:bg-surface-inputs\"\n id={id}\n >\n <SelectContent>\n <SelectItem value=\"10\">10 rows per page</SelectItem>\n <SelectItem value=\"25\">25 rows per page</SelectItem>\n <SelectItem value=\"50\">50 rows per page</SelectItem>\n </SelectContent>\n </Select>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Table.mjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ArrowDownIcon } from \"../Icons/ArrowDownIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { Select, SelectContent, SelectItem } from \"../Select/Select\";\n\n/*\n Row density for body cells.\n \n - `\"md\"` (default) → 64px Figma `V2 Table Cell` Small.\n * - `\"lg\"` → 80px Figma `V2 Table Cell` Large.\n \n `\"default\"` is the v2 numeric-token equivalent of `\"md\"` and is preferred\n * for new code.\n /\nexport type TableSize = \"md\" \| \"lg\" \| \"default\";\n\nexport interface TableCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Row density applied to {@link TableCell} descendants. @default \"md\" /\n size?: TableSize;\n}\n\nconst TableSizeContext = React.createContext<TableSize>(\"md\");\n\nfunction useTableSize(): TableSize {\n return React.useContext(TableSizeContext);\n}\n\n/\n Surface wrapper for data tables: rounded 24px container with a strong\n * outer border, inner spacing, and size context for {@link TableCell}\n * descendants. Compose with {@link TableScrollArea}, {@link Table},\n * {@link TableHeader}, {@link TableBody}, {@link TableRow},\n * {@link TableHead}, and {@link TableCell}.\n \n @example\n * ```tsx\n * <TableCard>\n * <TableScrollArea>\n * <Table>\n * <TableHeader>\n * <TableRow>\n * <TableHead>Name</TableHead>\n * </TableRow>\n * </TableHeader>\n * <TableBody>\n * <TableRow>\n * <TableCell>Jane Doe</TableCell>\n * </TableRow>\n * </TableBody>\n * </Table>\n * </TableScrollArea>\n * </TableCard>\n * ```\n /\nexport const TableCard = React.forwardRef<HTMLDivElement, TableCardProps>(\n ({ className, size = \"md\", ...props }, ref) => {\n return (\n <TableSizeContext.Provider value={size}>\n <div\n ref={ref}\n className={cn(\n \"isolate flex flex-col gap-2 overflow-hidden rounded-3xl border border-border-strong px-3 py-1\",\n className,\n )}\n {...props}\n />\n </TableSizeContext.Provider>\n );\n },\n);\nTableCard.displayName = \"TableCard\";\n\nexport interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/\n Optional toolbar row above the table (e.g. bulk selection actions).\n /\nexport const TableToolbar = React.forwardRef<HTMLDivElement, TableToolbarProps>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\"flex flex-wrap items-center gap-4 px-4 py-3\", className)}\n {...props}\n />\n );\n },\n);\nTableToolbar.displayName = \"TableToolbar\";\n\nexport interface TableScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n /\n No longer needed in v2 — {@link TableCard} handles corner rounding via\n * its own `overflow-hidden rounded-3xl`. Accepted for back-compat.\n \n @deprecated v2 ignores this prop; safe to remove.\n /\n roundTop?: boolean;\n}\n\n/\n Horizontal scroll container for wide tables. The inner scrollport keeps\n * `border-collapse` styles intact when the table wraps.\n /\nexport const TableScrollArea = React.forwardRef<HTMLDivElement, TableScrollAreaProps>(\n ({ className, children, roundTop: _roundTop, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\"relative w-full min-w-0 overflow-hidden\", className)}\n {...props}\n >\n <div className=\"overflow-x-auto\">{children}</div>\n </div>\n );\n },\n);\nTableScrollArea.displayName = \"TableScrollArea\";\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\n/\n Semantic `<table>` element. Place inside {@link TableScrollArea}.\n /\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n ({ className, ...props }, ref) => {\n return (\n <table\n ref={ref}\n className={cn(\n \"w-full caption-bottom border-separate border-spacing-0 text-left\",\n className,\n )}\n {...props}\n />\n );\n },\n);\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n ({ className, ...props }, ref) => {\n return <thead ref={ref} className={cn(className)} {...props} />;\n },\n);\nTableHeader.displayName = \"TableHeader\";\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\n/\n `<tbody>` wrapper. Removes the bottom border on cells in the final row to\n * match the Figma `V2 Table Final Row` treatment.\n /\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(\n ({ className, ...props }, ref) => {\n return (\n <tbody ref={ref} className={cn(\"[&_tr:last-child_td]:border-b-0\", className)} {...props} />\n );\n },\n);\nTableBody.displayName = \"TableBody\";\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(\n ({ className, ...props }, ref) => {\n return <tfoot ref={ref} className={cn(className)} {...props} />;\n },\n);\nTableFooter.displayName = \"TableFooter\";\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, ...props }, ref) => {\n return <tr ref={ref} className={cn(className)} {...props} />;\n },\n);\nTableRow.displayName = \"TableRow\";\n\n/* Column layout preset for {@link TableHead}. /\nexport type TableHeadIntent = \"default\" \| \"checkbox\" \| \"sort\" \| \"leading\";\n\nconst HEAD_INTENT_CLASSES: Record<TableHeadIntent, string> = {\n default: \"text-left\",\n checkbox: \"w-12 min-w-12 max-w-12 text-center\",\n sort: \"text-right\",\n leading: \"min-w-0 w-2/5 text-left\",\n};\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /* Layout preset for common column types. @default \"default\" /\n intent?: TableHeadIntent;\n}\n\n/\n Header cell. v2: transparent background, 48px min height, tertiary text,\n * `border-border-primary` bottom rule.\n /\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, intent = \"default\", scope = \"col\", ...props }, ref) => {\n return (\n <th\n ref={ref}\n scope={scope}\n className={cn(\n \"typography-description-12px-semibold box-border min-h-12 border-b border-border-primary px-4 py-3 align-middle text-content-tertiary\",\n HEAD_INTENT_CLASSES[intent],\n className,\n )}\n {...props}\n />\n );\n },\n);\nTableHead.displayName = \"TableHead\";\n\nconst CELL_MIN_HEIGHT: Record<TableSize, string> = {\n md: \"h-16 min-h-16\",\n default: \"h-16 min-h-16\",\n lg: \"h-20 min-h-20\",\n};\n\n/* Bottom border and padding preset for body cells (Figma table cell component). /\nexport type TableCellVariant = \"default\" \| \"chip\" \| \"pillProgress\";\n\nconst CELL_VARIANT_CLASSES: Record<TableCellVariant, string> = {\n default: \"border-b border-border-primary px-4 py-3\",\n chip: \"border-b border-border-primary px-4 py-3\",\n pillProgress: \"border-b border-border-primary px-4 py-3\",\n};\n\n/* Layout / typography preset for {@link TableCell} (orthogonal to {@link TableCellVariant}). /\nexport type TableCellIntent = \"default\" \| \"checkbox\" \| \"stacked\" \| \"multiline\" \| \"sideLabel\";\n\nconst CELL_INTENT_CLASSES: Record<TableCellIntent, string> = {\n default: \"\",\n checkbox: \"w-12 min-w-12 max-w-12 text-center\",\n stacked: \"align-top\",\n multiline: \"max-w-[240px]\",\n sideLabel: \"\",\n};\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n /* Padding preset for the cell. v2 uses identical padding across variants; values are kept for back-compat. @default \"default\" /\n cellVariant?: TableCellVariant;\n /* Alignment and typography preset for common cell types. @default \"default\" /\n intent?: TableCellIntent;\n}\n\n/\n Body cell. v2: `h-16` (or `h-20` when the parent {@link TableCard} uses\n * `size=\"lg\"`), `px-4 py-3` padding, body-sm typography, and a single\n * `border-border-primary` rule that is zeroed by {@link TableBody} for the\n * final row.\n /\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n ({ className, cellVariant = \"default\", intent = \"default\", ...props }, ref) => {\n const size = useTableSize();\n const typo =\n intent === \"sideLabel\"\n ? \"typography-description-12px-semibold\"\n : \"typography-description-12px-regular\";\n return (\n <td\n ref={ref}\n className={cn(\n typo,\n \"align-middle text-content-primary\",\n CELL_VARIANT_CLASSES[cellVariant],\n CELL_MIN_HEIGHT[size],\n CELL_INTENT_CLASSES[intent],\n className,\n )}\n {...props}\n />\n );\n },\n);\nTableCell.displayName = \"TableCell\";\n\nexport interface TableCellGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/\n Horizontal group for icons, chips, and metadata inside a {@link TableCell}\n * (Figma `gap-[4px]`).\n /\nexport const TableCellGroup = React.forwardRef<HTMLDivElement, TableCellGroupProps>(\n ({ className, ...props }, ref) => {\n return <div ref={ref} className={cn(\"flex items-center gap-1\", className)} {...props} />;\n },\n);\nTableCellGroup.displayName = \"TableCellGroup\";\n\nexport interface TableCellContentProps {\n /* Primary line (semibold body-sm). /\n primary: React.ReactNode;\n /* Optional secondary line (regular body-sm, secondary color). /\n secondary?: React.ReactNode;\n /* Inline node rendered next to the primary line (icon, chip). /\n primaryAdornment?: React.ReactNode;\n /* Inline node rendered next to the secondary line. /\n secondaryAdornment?: React.ReactNode;\n /* Class for the outer wrapper. /\n className?: string;\n}\n\n/\n Two-line content slot matching Figma `V2 Table Content` — primary line\n * (semibold) over an optional secondary line (regular, muted) with a 2px\n * gap. Use inside {@link TableCell} for the common stacked-text pattern.\n /\nexport function TableCellContent({\n primary,\n secondary,\n primaryAdornment,\n secondaryAdornment,\n className,\n}: TableCellContentProps) {\n return (\n <div className={cn(\"flex flex-col gap-0.5\", className)}>\n <div className=\"flex items-center gap-1\">\n <span className=\"typography-description-12px-semibold text-content-primary\">{primary}</span>\n {primaryAdornment}\n </div>\n {(secondary != null \|\| secondaryAdornment != null) && (\n <div className=\"flex items-center gap-1\">\n {secondary != null && (\n <span className=\"typography-description-12px-regular text-content-secondary\">\n {secondary}\n </span>\n )}\n {secondaryAdornment}\n </div>\n )}\n </div>\n );\n}\nTableCellContent.displayName = \"TableCellContent\";\n\nexport interface TableMediaThumbnailProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n /* Image URL. /\n src: string;\n /* Alt text for the image. @default \"\" /\n alt?: string;\n /* Applies the table's blurred-media treatment. @default false /\n blurred?: boolean;\n /* `center` uses the fixed media column width from the lg spec. @default \"start\" /\n align?: \"start\" \| \"center\";\n}\n\n/\n Square 48px thumbnail used inside {@link TableCell} for media columns\n * (Figma `V2 Media Thumbnail Item`).\n /\nexport const TableMediaThumbnail = React.forwardRef<HTMLDivElement, TableMediaThumbnailProps>(\n ({ className, src, alt = \"\", blurred, align = \"start\", ...props }, ref) => {\n const frame = \"size-12 overflow-hidden rounded-sm bg-neutral-alphas-200\";\n return (\n <div\n ref={ref}\n className={cn(\n align === \"center\" && \"flex w-16 shrink-0 justify-center\",\n align === \"start\" && \"inline-flex shrink-0\",\n )}\n >\n <div className={cn(frame, blurred && \"blur-[2px]\", className)} {...props}>\n <img alt={alt} className=\"size-full object-cover\" src={src} />\n </div>\n </div>\n );\n },\n);\nTableMediaThumbnail.displayName = \"TableMediaThumbnail\";\n\nexport interface TableStatusDotProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/\n Small status indicator dot for table cells (Figma status column).\n /\nexport const TableStatusDot = React.forwardRef<HTMLDivElement, TableStatusDotProps>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\"size-2 shrink-0 rounded-full bg-info-content\", className)}\n {...props}\n />\n );\n },\n);\nTableStatusDot.displayName = \"TableStatusDot\";\n\nexport interface TableProgressTrackProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Fill width from 0–100. @default 0 /\n value?: number;\n}\n\n/\n Thin progress track used with badges in table cells (Figma pill + progress).\n * Renders with `role=\"progressbar\"` and a default `aria-label` of `\"Progress\"`.\n /\nexport const TableProgressTrack = React.forwardRef<HTMLDivElement, TableProgressTrackProps>(\n ({ className, value = 0, \"aria-label\": ariaLabel = \"Progress\", ...props }, ref) => {\n const width = Math.min(100, Math.max(0, value));\n const rounded = Math.round(width);\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuenow={rounded}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={ariaLabel}\n className={cn(\n \"relative h-1 w-full overflow-hidden rounded-full bg-neutral-alphas-200\",\n className,\n )}\n {...props}\n >\n <div\n className=\"absolute top-0 left-0 h-1 rounded-full bg-buttons-primary-default\"\n style={{ width: `${width}%` }}\n aria-hidden\n />\n </div>\n );\n },\n);\nTableProgressTrack.displayName = \"TableProgressTrack\";\n\nexport interface TablePillProgressLayoutProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/\n Vertical layout for pill label + {@link TableProgressTrack} in a cell.\n /\nexport const TablePillProgressLayout = React.forwardRef<\n HTMLDivElement,\n TablePillProgressLayoutProps\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\"flex min-w-[120px] flex-col items-start gap-2\", className)}\n {...props}\n />\n );\n});\nTablePillProgressLayout.displayName = \"TablePillProgressLayout\";\n\n/* Current sort direction of a {@link TableSortLabel}. `null` means unsorted. /\nexport type TableSortDirection = \"asc\" \| \"desc\" \| null;\n\nexport interface TableSortLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n children: React.ReactNode;\n /\n Visual indicator of the column's sort state. When set to `\"asc\"` or\n * `\"desc\"`, a 1px underline accent appears beneath the label and a small\n * directional arrow is shown next to it. @default null\n /\n direction?: TableSortDirection;\n}\n\n/\n Sortable column label. v2 expresses the sort state with a 1px underline\n * beneath the label plus a directional arrow when sorted.\n /\nexport const TableSortLabel = React.forwardRef<HTMLSpanElement, TableSortLabelProps>(\n ({ className, children, direction = null, ...props }, ref) => {\n const Icon = direction === \"desc\" ? ArrowDownIcon : ArrowUpIcon;\n return (\n <span\n ref={ref}\n className={cn(\"inline-flex items-center gap-1 text-content-primary\", className)}\n {...props}\n >\n <span\n className={cn(\n \"typography-description-12px-semibold\",\n direction != null && \"border-b border-content-primary pb-px\",\n )}\n >\n {children}\n </span>\n {direction != null && <Icon className=\"size-4 shrink-0\" aria-hidden />}\n </span>\n );\n },\n);\nTableSortLabel.displayName = \"TableSortLabel\";\n\nexport interface TableStackedTextProps {\n /* Primary line (semibold body). /\n title: React.ReactNode;\n /* Secondary line (caption, muted). /\n subtitle: React.ReactNode;\n}\n\n/\n Two-line primary + secondary text block for \"cell + info\" patterns.\n \n @deprecated Prefer {@link TableCellContent} which supports adornments and\n * matches the Figma `V2 Table Content` slot.\n /\nexport function TableStackedText({ title, subtitle }: TableStackedTextProps) {\n return <TableCellContent primary={title} secondary={subtitle} />;\n}\n\nTableStackedText.displayName = \"TableStackedText\";\n\nexport interface TableLineClampProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Number of lines before ellipsis. @default 2 /\n lines?: 1 \| 2 \| 3;\n}\n\n/\n Clamps child text to a fixed number of lines inside a {@link TableCell}.\n /\nexport const TableLineClamp = React.forwardRef<HTMLDivElement, TableLineClampProps>(\n ({ className, lines = 2, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n lines === 1 && \"line-clamp-1\",\n lines === 2 && \"line-clamp-2\",\n lines === 3 && \"line-clamp-3\",\n className,\n )}\n {...props}\n />\n );\n },\n);\nTableLineClamp.displayName = \"TableLineClamp\";\n\nexport interface TableRowsPerPageSelectProps {\n /* Passed to the trigger for forms and labels. /\n id?: string;\n /* Accessible name for the trigger when no visible label. @default \"Rows per page\" /\n \"aria-label\"?: string;\n}\n\n/\n Rows-per-page {@link Select} styled for {@link TablePagination}. v2 uses a\n * subtle pill trigger with the table's secondary-surface background.\n */\nexport function TableRowsPerPageSelect(props: TableRowsPerPageSelectProps) {\n const { id, \"aria-label\": ariaLabel = \"Rows per page\" } = props;\n return (\n <Select\n defaultValue=\"10\"\n size=\"32\"\n aria-label={ariaLabel}\n className=\"w-[154px] [&_button]:rounded-sm [&_button]:border-transparent [&_button]:bg-inputs-inputs-primary\"\n id={id}\n >\n <SelectContent>\n <SelectItem value=\"10\">10 rows per page</SelectItem>\n <SelectItem value=\"25\">25 rows per page</SelectItem>\n <SelectItem value=\"50\">50 rows per page</SelectItem>\n </SelectContent>\n </Select>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Table/TablePagination.mjs CHANGED Viewed

@@ -18,7 +18,7 @@ const TablePagination = React.forwardRef(
                 "div",
                 {
                   className: cn(
-                    "typography-regular-body-sm min-w-0 flex-1 text-content-secondary",
+                    "typography-description-12px-regular min-w-0 flex-1 text-content-secondary",
                     leadingSlot == null && "text-left",
                     leadingSlot != null && "text-right"
                   ),
@@ -40,7 +40,7 @@ const TablePagination = React.forwardRef(
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex min-h-0 min-w-0 flex-1 items-center", children: leadingSlot }),
           paginationSlot != null ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center", children: paginationSlot }) : null,
-          /* @__PURE__ */ jsx("div", { className: "typography-regular-body-sm min-w-0 flex-1 text-right text-content-secondary", children: summary })
+          /* @__PURE__ */ jsx("div", { className: "typography-description-12px-regular min-w-0 flex-1 text-right text-content-secondary", children: summary })
         ]
       }
     );

package/dist/components/Table/TablePagination.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TablePagination.mjs","sources":["../../../src/components/Table/TablePagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Layout preset for the pagination bar — desktop (range on the right) or stacked mobile. /\nexport type TablePaginationLayout = \"desktop\" \| \"mobile\";\n\nexport interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Layout preset. @default \"desktop\" /\n layout?: TablePaginationLayout;\n /* Left (desktop) or top row (mobile) content, e.g. rows-per-page {@link Select}. /\n leadingSlot?: React.ReactNode;\n /* Center (desktop) or bottom row (mobile) content, e.g. {@link Pagination}. /\n paginationSlot?: React.ReactNode;\n /* Summary text or node (e.g. current range and total). /\n summary: React.ReactNode;\n}\n\n/\n Footer bar for data tables: rows-per-page control, page navigation, and\n * range summary. Pair `paginationSlot` with {@link Pagination} for numbered\n * controls.\n \n v2 sits flush inside {@link TableCard} (`px-3` matches the card's inner\n * gutter); the chip styling now lives on the {@link TableRowsPerPageSelect}\n * trigger itself.\n \n @example\n * ```tsx\n * <TablePagination\n * leadingSlot={<TableRowsPerPageSelect />}\n * paginationSlot={<Pagination totalPages={5} currentPage={2} onPageChange={setPage} />}\n * summary=\"20–30 of 100 rows\"\n * />\n * ```\n */\nexport const TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n ({ className, layout = \"desktop\", leadingSlot, paginationSlot, summary, ...props }, ref) => {\n if (layout === \"mobile\") {\n return (\n <div\n ref={ref}\n className={cn(\"flex w-full max-w-full flex-col gap-4 px-3 py-3\", className)}\n {...props}\n >\n <div className=\"flex w-full items-center gap-2\">\n {leadingSlot != null ? (\n <div className=\"flex min-w-0 shrink-0 items-center\">{leadingSlot}</div>\n ) : null}\n <div\n className={cn(\n \"typography-~~regular~~-~~body~~-sm min-w-0 flex-1 text-content-secondary\",\n leadingSlot == null && \"text-left\",\n leadingSlot != null && \"text-right\",\n )}\n >\n {summary}\n </div>\n </div>\n {paginationSlot != null ? (\n <div className=\"flex justify-center\">{paginationSlot}</div>\n ) : null}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={cn(\"flex w-full flex-wrap items-center gap-3 px-3 py-3\", className)}\n {...props}\n >\n <div className=\"flex min-h-0 min-w-0 flex-1 items-center\">{leadingSlot}</div>\n {paginationSlot != null ? (\n <div className=\"flex shrink-0 items-center justify-center\">{paginationSlot}</div>\n ) : null}\n <div className=\"typography-~~regular~~-~~body~~-sm min-w-0 flex-1 text-right text-content-secondary\">\n {summary}\n </div>\n </div>\n );\n },\n);\nTablePagination.displayName = \"TablePagination\";\n"],"names":[],"mappings":";;;;AAmCO,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,SAAS,WAAW,aAAa,gBAAgB,SAAS,GAAG,MAAA,GAAS,QAAQ;AAC1F,QAAI,WAAW,UAAU;AACvB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,mDAAmD,SAAS;AAAA,UACzE,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,kCACZ,UAAA;AAAA,cAAA,eAAe,OACd,oBAAC,OAAA,EAAI,WAAU,sCAAsC,uBAAY,IAC/D;AAAA,cACJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,eAAe,QAAQ;AAAA,oBACvB,eAAe,QAAQ;AAAA,kBAAA;AAAA,kBAGxB,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YACC,kBAAkB,OACjB,oBAAC,SAAI,WAAU,uBAAuB,0BAAe,IACnD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sDAAsD,SAAS;AAAA,QAC5E,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,aAAY;AAAA,UACtE,kBAAkB,OACjB,oBAAC,SAAI,WAAU,6CAA6C,0BAAe,IACzE;AAAA,UACJ,oBAAC,OAAA,EAAI,WAAU~~,+EACZ~~,UAAA,QAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,gBAAgB,cAAc;"}
1	+ {"version":3,"file":"TablePagination.mjs","sources":["../../../src/components/Table/TablePagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Layout preset for the pagination bar — desktop (range on the right) or stacked mobile. /\nexport type TablePaginationLayout = \"desktop\" \| \"mobile\";\n\nexport interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Layout preset. @default \"desktop\" /\n layout?: TablePaginationLayout;\n /* Left (desktop) or top row (mobile) content, e.g. rows-per-page {@link Select}. /\n leadingSlot?: React.ReactNode;\n /* Center (desktop) or bottom row (mobile) content, e.g. {@link Pagination}. /\n paginationSlot?: React.ReactNode;\n /* Summary text or node (e.g. current range and total). /\n summary: React.ReactNode;\n}\n\n/\n Footer bar for data tables: rows-per-page control, page navigation, and\n * range summary. Pair `paginationSlot` with {@link Pagination} for numbered\n * controls.\n \n v2 sits flush inside {@link TableCard} (`px-3` matches the card's inner\n * gutter); the chip styling now lives on the {@link TableRowsPerPageSelect}\n * trigger itself.\n \n @example\n * ```tsx\n * <TablePagination\n * leadingSlot={<TableRowsPerPageSelect />}\n * paginationSlot={<Pagination totalPages={5} currentPage={2} onPageChange={setPage} />}\n * summary=\"20–30 of 100 rows\"\n * />\n * ```\n */\nexport const TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n ({ className, layout = \"desktop\", leadingSlot, paginationSlot, summary, ...props }, ref) => {\n if (layout === \"mobile\") {\n return (\n <div\n ref={ref}\n className={cn(\"flex w-full max-w-full flex-col gap-4 px-3 py-3\", className)}\n {...props}\n >\n <div className=\"flex w-full items-center gap-2\">\n {leadingSlot != null ? (\n <div className=\"flex min-w-0 shrink-0 items-center\">{leadingSlot}</div>\n ) : null}\n <div\n className={cn(\n \"typography-description-12px-regular min-w-0 flex-1 text-content-secondary\",\n leadingSlot == null && \"text-left\",\n leadingSlot != null && \"text-right\",\n )}\n >\n {summary}\n </div>\n </div>\n {paginationSlot != null ? (\n <div className=\"flex justify-center\">{paginationSlot}</div>\n ) : null}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={cn(\"flex w-full flex-wrap items-center gap-3 px-3 py-3\", className)}\n {...props}\n >\n <div className=\"flex min-h-0 min-w-0 flex-1 items-center\">{leadingSlot}</div>\n {paginationSlot != null ? (\n <div className=\"flex shrink-0 items-center justify-center\">{paginationSlot}</div>\n ) : null}\n <div className=\"typography-description-12px-regular min-w-0 flex-1 text-right text-content-secondary\">\n {summary}\n </div>\n </div>\n );\n },\n);\nTablePagination.displayName = \"TablePagination\";\n"],"names":[],"mappings":";;;;AAmCO,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,SAAS,WAAW,aAAa,gBAAgB,SAAS,GAAG,MAAA,GAAS,QAAQ;AAC1F,QAAI,WAAW,UAAU;AACvB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,mDAAmD,SAAS;AAAA,UACzE,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,kCACZ,UAAA;AAAA,cAAA,eAAe,OACd,oBAAC,OAAA,EAAI,WAAU,sCAAsC,uBAAY,IAC/D;AAAA,cACJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,eAAe,QAAQ;AAAA,oBACvB,eAAe,QAAQ;AAAA,kBAAA;AAAA,kBAGxB,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YACC,kBAAkB,OACjB,oBAAC,SAAI,WAAU,uBAAuB,0BAAe,IACnD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sDAAsD,SAAS;AAAA,QAC5E,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,aAAY;AAAA,UACtE,kBAAkB,OACjB,oBAAC,SAAI,WAAU,6CAA6C,0BAAe,IACzE;AAAA,UACJ,oBAAC,OAAA,EAAI,WAAU,wFACZ,UAAA,QAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,gBAAgB,cAAc;"}

package/dist/components/Tabs/TabsTrigger.mjs CHANGED Viewed

@@ -10,7 +10,7 @@ const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) =>
     className: cn(
       "inline-flex min-w-0 items-center justify-center",
       "rounded-xs",
-      "typography-semibold-body-lg cursor-pointer text-content-primary",
+      "typography-body-default-16px-semibold cursor-pointer text-content-primary",
       "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
       "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
       "data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) =>
       "data-disabled:pointer-events-none",
       "data-disabled:data-[state=active]:text-content-tertiary",
       "data-disabled:data-[state=inactive]:text-neutral-alphas-300",
-      "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",
       className
     ),
     ...props,

package/dist/components/Tabs/TabsTrigger.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. /\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/* An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"inline-flex min-w-0 items-center justify-center\",\n \"rounded-xs\",\n \"typography-~~semibold-~~body-lg cursor-pointer text-content-primary\",\n \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n \"data-[state=active]:hover:text-buttons-primary-muted\",\n \"data-[state=inactive]:hover:text-neutral-alphas-300\",\n \"data-[state=active]:active:text-buttons-primary-muted\",\n \"data-[state=inactive]:active:text-neutral-alphas-300\",\n \"data-disabled:pointer-events-none\",\n \"data-disabled:data-[state=active]:text-content-tertiary\",\n \"data-disabled:data-[state=inactive]:text-neutral-alphas-300\",\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 className,\n )}\n {...props}\n >\n <span className=\"min-w-0 truncate\">{children}</span>\n </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;"}
1	+ {"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. /\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/* An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"inline-flex min-w-0 items-center justify-center\",\n \"rounded-xs\",\n \"typography-body-default-16px-semibold cursor-pointer text-content-primary\",\n \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n \"data-[state=active]:hover:text-buttons-primary-muted\",\n \"data-[state=inactive]:hover:text-neutral-alphas-300\",\n \"data-[state=active]:active:text-buttons-primary-muted\",\n \"data-[state=inactive]:active:text-neutral-alphas-300\",\n \"data-disabled:pointer-events-none\",\n \"data-disabled:data-[state=active]:text-content-tertiary\",\n \"data-disabled:data-[state=inactive]:text-neutral-alphas-300\",\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 className,\n )}\n {...props}\n >\n <span className=\"min-w-0 truncate\">{children}</span>\n </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;"}

package/dist/components/TextArea/TextArea.mjs CHANGED Viewed

@@ -11,9 +11,9 @@ const CONTAINER_MIN_HEIGHT = {
   "32": "min-h-8"
 };
 const TEXTAREA_SIZE_CLASSES = {
-  "48": "py-3 typography-regular-body-lg autofill-body-lg",
-  "40": "py-2 typography-regular-body-lg autofill-body-lg",
-  "32": "py-2 typography-regular-body-md autofill-body-md"
+  "48": "py-3 typography-body-default-16px-regular autofill-body-lg",
+  "40": "py-2 typography-body-default-16px-regular autofill-body-lg",
+  "32": "py-2 typography-body-small-14px-regular autofill-body-md"
 };
 const PADDING_HORIZONTAL = {
   "48": "px-4",
@@ -59,7 +59,7 @@ function TextAreaHelperText({
     {
       id,
       className: cn(
-        "typography-regular-body-sm px-2 pt-1 pb-0.5",
+        "typography-description-12px-regular px-2 pt-1 pb-0.5",
         error ? "text-error-content" : "text-content-secondary"
       ),
       children
@@ -160,7 +160,7 @@ const TextArea = React.forwardRef(
             "label",
             {
               htmlFor: inputId,
-              className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary",
+              className: "typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary",
               children: label
             }
           ),

package/dist/components/TextArea/TextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.mjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. /\nexport type TextAreaSize = \"48\" \| \"40\" \| \"32\";\n\nexport interface TextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n /* Label text displayed above the textarea. Also used as the accessible name. /\n label?: string;\n /* Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. /\n helperText?: string;\n /* Minimum height of the text area in pixels. @default \"48\" /\n size?: TextAreaSize;\n /* Whether the text area is in an error state. @default false /\n error?: boolean;\n /* Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. /\n errorMessage?: string;\n /* Whether the text area is validated. @default false /\n validated?: boolean;\n /* Whether the text area stretches to fill its container width. @default false /\n fullWidth?: boolean;\n /* Whether to show a clear button when text is present. @default false /\n showClearButton?: boolean;\n /* Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. /\n onClear?: () => void;\n /* Minimum number of rows (lines) for the textarea. /\n minRows?: number;\n /* Maximum number of rows (lines) for the textarea. /\n maxRows?: number;\n /* Whether the textarea can be resized by the user. @default true /\n resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n \"48\": \"min-h-12\",\n \"40\": \"min-h-10\",\n \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n \"48\": \"py-3 typography-regular-body-lg autofill-body-lg\",\n \"40\": \"py-2 typography-regular-body-lg autofill-body-lg\",\n \"32\": \"py-2 typography-regular-body-md autofill-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n \"48\": \"px-4\",\n \"40\": \"px-4\",\n \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n \"48\": \"pr-11\",\n \"40\": \"pr-11\",\n \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n \"48\": \"right-4 top-3\",\n \"40\": \"right-4 top-2\",\n \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n return cn(\n \"relative rounded-sm border bg-neutral-alphas-50 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-content\" : \"border-transparent\",\n !disabled && !error && \"hover:border-neutral-alphas-400\",\n CONTAINER_MIN_HEIGHT[size],\n disabled && \"opacity-50\",\n );\n}\n\nfunction getTextareaClassName(\n size: TextAreaSize,\n hasClearButton: boolean,\n hasMinRows: boolean,\n resizable: boolean,\n) {\n return cn(\n \"h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n resizable ? \"resize-y\" : \"resize-none\",\n !hasMinRows && \"min-h-[80px]\",\n TEXTAREA_SIZE_CLASSES[size],\n PADDING_HORIZONTAL[size],\n hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n );\n}\n\nfunction TextAreaHelperText({\n id,\n error,\n children,\n}: {\n id: string;\n error: boolean;\n children: React.ReactNode;\n}) {\n return (\n <p\n id={id}\n className={cn(\n \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n error ? \"text-error-content\" : \"text-content-secondary\",\n )}\n >\n {children}\n </p>\n );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string \| undefined {\n if (!maxRows) return undefined;\n\n // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n const lineHeight = size === \"32\" ? 20 : 24;\n // py-2 = 8px, py-3 = 12px\n const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n return `${lineHeight maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n showClearButton: boolean,\n onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n onClear?: () => void,\n textareaRef?: React.RefObject<HTMLTextAreaElement \| null>,\n) {\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n const resolvedValue = value !== undefined ? value : internalValue;\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setInternalValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n setInternalValue(\"\");\n\n if (onChange && textareaRef?.current) {\n const syntheticEvent = {\n target: { ...textareaRef.current, value: \"\" },\n currentTarget: { ...textareaRef.current, value: \"\" },\n } as React.ChangeEvent<HTMLTextAreaElement>;\n onChange(syntheticEvent);\n }\n\n onClear?.();\n };\n\n return {\n resolvedValue,\n displayValue: showClearButton ? resolvedValue : value,\n resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n handleChange,\n handleClear,\n };\n}\n\n/*\n A multi-line text input with optional label, helper/error text, and clear button.\n \n Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n \n @example\n * ```tsx\n * <TextArea\n * label=\"Description\"\n * placeholder=\"Enter your description...\"\n * showClearButton\n * error={!!descError}\n * errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n validated = false,\n className,\n id,\n disabled,\n fullWidth = false,\n showClearButton = false,\n onClear,\n value,\n defaultValue,\n onChange,\n minRows,\n maxRows,\n resizable = false,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const inputId = id \|\| generatedId;\n const helperTextId = `${inputId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n const maxHeight = calculateMaxHeight(size, maxRows);\n\n const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n const mergedRef = (node: HTMLTextAreaElement \| null) => {\n internalRef.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\n const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n const showValidated = validated && !showClear;\n const ariaDescribedBy = bottomText ? helperTextId : undefined;\n const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n return (\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={inputId}\n className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n >\n {label}\n </label>\n )}\n\n <div className={getContainerClassName(size, error, disabled)}>\n <textarea\n ref={mergedRef}\n id={inputId}\n disabled={disabled}\n aria-describedby={ariaDescribedBy}\n aria-invalid={error \|\| undefined}\n className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n value={displayValue}\n defaultValue={resolvedDefaultValue}\n onChange={handleChange}\n rows={minRows}\n style={textareaStyle}\n {...props}\n />\n\n {showClear && (\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n icon={<CloseIcon />}\n aria-label=\"Clear text\"\n onClick={handleClear}\n className={cn(\n \"absolute flex size-5 items-center justify-center self-end\",\n CLEAR_BUTTON_RIGHT[size],\n )}\n />\n )}\n {showValidated && (\n <div\n className={cn(\n \"pointer-events-none absolute flex size-5 items-center justify-center\",\n CLEAR_BUTTON_RIGHT[size],\n )}\n >\n <CheckOutlineIcon className=\"text-success-content\" />\n </div>\n )}\n </div>\n\n {bottomText && (\n <TextAreaHelperText id={helperTextId} error={error}>\n {bottomText}\n </TextAreaHelperText>\n )}\n </div>\n );\n },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"TextArea.mjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. /\nexport type TextAreaSize = \"48\" \| \"40\" \| \"32\";\n\nexport interface TextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n /* Label text displayed above the textarea. Also used as the accessible name. /\n label?: string;\n /* Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. /\n helperText?: string;\n /* Minimum height of the text area in pixels. @default \"48\" /\n size?: TextAreaSize;\n /* Whether the text area is in an error state. @default false /\n error?: boolean;\n /* Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. /\n errorMessage?: string;\n /* Whether the text area is validated. @default false /\n validated?: boolean;\n /* Whether the text area stretches to fill its container width. @default false /\n fullWidth?: boolean;\n /* Whether to show a clear button when text is present. @default false /\n showClearButton?: boolean;\n /* Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. /\n onClear?: () => void;\n /* Minimum number of rows (lines) for the textarea. /\n minRows?: number;\n /* Maximum number of rows (lines) for the textarea. /\n maxRows?: number;\n /* Whether the textarea can be resized by the user. @default true /\n resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n \"48\": \"min-h-12\",\n \"40\": \"min-h-10\",\n \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n \"48\": \"px-4\",\n \"40\": \"px-4\",\n \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n \"48\": \"pr-11\",\n \"40\": \"pr-11\",\n \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n \"48\": \"right-4 top-3\",\n \"40\": \"right-4 top-2\",\n \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n return cn(\n \"relative rounded-sm border bg-neutral-alphas-50 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-content\" : \"border-transparent\",\n !disabled && !error && \"hover:border-neutral-alphas-400\",\n CONTAINER_MIN_HEIGHT[size],\n disabled && \"opacity-50\",\n );\n}\n\nfunction getTextareaClassName(\n size: TextAreaSize,\n hasClearButton: boolean,\n hasMinRows: boolean,\n resizable: boolean,\n) {\n return cn(\n \"h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n resizable ? \"resize-y\" : \"resize-none\",\n !hasMinRows && \"min-h-[80px]\",\n TEXTAREA_SIZE_CLASSES[size],\n PADDING_HORIZONTAL[size],\n hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n );\n}\n\nfunction TextAreaHelperText({\n id,\n error,\n children,\n}: {\n id: string;\n error: boolean;\n children: React.ReactNode;\n}) {\n return (\n <p\n id={id}\n className={cn(\n \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n error ? \"text-error-content\" : \"text-content-secondary\",\n )}\n >\n {children}\n </p>\n );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string \| undefined {\n if (!maxRows) return undefined;\n\n // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n const lineHeight = size === \"32\" ? 20 : 24;\n // py-2 = 8px, py-3 = 12px\n const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n return `${lineHeight maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n showClearButton: boolean,\n onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n onClear?: () => void,\n textareaRef?: React.RefObject<HTMLTextAreaElement \| null>,\n) {\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n const resolvedValue = value !== undefined ? value : internalValue;\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setInternalValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n setInternalValue(\"\");\n\n if (onChange && textareaRef?.current) {\n const syntheticEvent = {\n target: { ...textareaRef.current, value: \"\" },\n currentTarget: { ...textareaRef.current, value: \"\" },\n } as React.ChangeEvent<HTMLTextAreaElement>;\n onChange(syntheticEvent);\n }\n\n onClear?.();\n };\n\n return {\n resolvedValue,\n displayValue: showClearButton ? resolvedValue : value,\n resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n handleChange,\n handleClear,\n };\n}\n\n/*\n A multi-line text input with optional label, helper/error text, and clear button.\n \n Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n \n @example\n * ```tsx\n * <TextArea\n * label=\"Description\"\n * placeholder=\"Enter your description...\"\n * showClearButton\n * error={!!descError}\n * errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n validated = false,\n className,\n id,\n disabled,\n fullWidth = false,\n showClearButton = false,\n onClear,\n value,\n defaultValue,\n onChange,\n minRows,\n maxRows,\n resizable = false,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const inputId = id \|\| generatedId;\n const helperTextId = `${inputId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n const maxHeight = calculateMaxHeight(size, maxRows);\n\n const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n const mergedRef = (node: HTMLTextAreaElement \| null) => {\n internalRef.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\n const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n const showValidated = validated && !showClear;\n const ariaDescribedBy = bottomText ? helperTextId : undefined;\n const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n return (\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={inputId}\n className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n >\n {label}\n </label>\n )}\n\n <div className={getContainerClassName(size, error, disabled)}>\n <textarea\n ref={mergedRef}\n id={inputId}\n disabled={disabled}\n aria-describedby={ariaDescribedBy}\n aria-invalid={error \|\| undefined}\n className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n value={displayValue}\n defaultValue={resolvedDefaultValue}\n onChange={handleChange}\n rows={minRows}\n style={textareaStyle}\n {...props}\n />\n\n {showClear && (\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n icon={<CloseIcon />}\n aria-label=\"Clear text\"\n onClick={handleClear}\n className={cn(\n \"absolute flex size-5 items-center justify-center self-end\",\n CLEAR_BUTTON_RIGHT[size],\n )}\n />\n )}\n {showValidated && (\n <div\n className={cn(\n \"pointer-events-none absolute flex size-5 items-center justify-center\",\n CLEAR_BUTTON_RIGHT[size],\n )}\n >\n <CheckOutlineIcon className=\"text-success-content\" />\n </div>\n )}\n </div>\n\n {bottomText && (\n <TextAreaHelperText id={helperTextId} error={error}>\n {bottomText}\n </TextAreaHelperText>\n )}\n </div>\n );\n },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":[],"mappings":"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"}

package/dist/components/TextField/TextField.mjs CHANGED Viewed

@@ -10,9 +10,9 @@ const CONTAINER_HEIGHT = {
   "32": "h-8"
 };
 const INPUT_SIZE_CLASSES = {
-  "48": "py-3 typography-regular-body-lg autofill-body-lg",
-  "40": "py-2 typography-regular-body-lg autofill-body-lg",
-  "32": "py-2 typography-regular-body-md autofill-body-md"
+  "48": "py-3 typography-body-default-16px-regular autofill-body-lg",
+  "40": "py-2 typography-body-default-16px-regular autofill-body-lg",
+  "32": "py-2 typography-body-small-14px-regular autofill-body-md"
 };
 const INPUT_PL = {
   "48": { default: "pl-4", withIcon: "pl-10" },
@@ -56,7 +56,7 @@ function TextFieldHelperText({
     {
       id,
       className: cn(
-        "typography-regular-body-sm px-2 pt-2 pb-0.5",
+        "typography-description-12px-regular px-2 pt-2 pb-0.5",
         error ? "text-error-content" : "text-content-secondary"
       ),
       children
@@ -104,7 +104,7 @@ const TextField = React.forwardRef(
             "label",
             {
               htmlFor: inputId,
-              className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary",
+              className: "typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary",
               children: label
             }
           ),

package/dist/components/TextField/TextField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.mjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. /\nexport type TextFieldSize = \"48\" \| \"40\" \| \"32\";\n\nexport interface TextFieldProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" \| \"prefix\"> {\n /* Label text displayed above the input. Also used as the accessible name. /\n label?: string;\n /* Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. /\n helperText?: string;\n /* Height of the text field in pixels. @default \"48\" /\n size?: TextFieldSize;\n /* Whether the text field is in an error state. @default false /\n error?: boolean;\n /* Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. /\n errorMessage?: string;\n /* Whether the text field is validated. @default false /\n validated?: boolean;\n /* Icon element displayed at the left side of the input. /\n leftIcon?: React.ReactNode;\n /* Icon element displayed at the right side of the input. /\n rightIcon?: React.ReactNode;\n /* Whether the text field stretches to fill its container width. @default false /\n fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n \"48\": \"h-12\",\n \"40\": \"h-10\",\n \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n \"48\": \"py-3 typography-regular-body-lg autofill-body-lg\",\n \"40\": \"py-2 typography-regular-body-lg autofill-body-lg\",\n \"32\": \"py-2 typography-regular-body-md autofill-body-md\",\n};\n\nconst INPUT_PL: Record<TextFieldSize, { default: string; withIcon: string }> = {\n \"48\": { default: \"pl-4\", withIcon: \"pl-10\" },\n \"40\": { default: \"pl-4\", withIcon: \"pl-10\" },\n \"32\": { default: \"pl-3\", withIcon: \"pl-9\" },\n};\n\nconst INPUT_PR: Record<TextFieldSize, { default: string; withIcon: string }> = {\n \"48\": { default: \"pr-4\", withIcon: \"pr-10\" },\n \"40\": { default: \"pr-4\", withIcon: \"pr-10\" },\n \"32\": { default: \"pr-3\", withIcon: \"pr-9\" },\n};\n\nconst ICON_INSET: Record<TextFieldSize, string> = {\n \"48\": \"px-4\",\n \"40\": \"px-4\",\n \"32\": \"px-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n return cn(\n \"relative overflow-hidden rounded-sm border bg-neutral-alphas-50 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-content\" : \"border-transparent\",\n !disabled && !error && \"hover:border-neutral-alphas-400\",\n CONTAINER_HEIGHT[size],\n disabled && \"opacity-50\",\n );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n return cn(\n \"h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n INPUT_SIZE_CLASSES[size],\n hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,\n hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default,\n );\n}\n\nfunction TextFieldHelperText({\n id,\n error,\n children,\n}: {\n id: string;\n error: boolean;\n children: React.ReactNode;\n}) {\n return (\n <p\n id={id}\n className={cn(\n \"typography-regular-body-sm px-2 pt-2 pb-0.5\",\n error ? \"text-error-content\" : \"text-content-secondary\",\n )}\n >\n {children}\n </p>\n );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\n/\n A text input field with optional label, helper/error text, and icon slots.\n \n Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n \n @example\n * ```tsx\n * <TextField\n * label=\"Email\"\n * placeholder=\"you@example.com\"\n * error={!!emailError}\n * errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n validated = false,\n leftIcon,\n rightIcon,\n className,\n id,\n disabled,\n fullWidth = false,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const inputId = id \|\| generatedId;\n const helperTextId = `${inputId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n\n warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n return (\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={inputId}\n className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n >\n {label}\n </label>\n )}\n\n <div className={getContainerClassName(size, error, disabled)}>\n <input\n ref={ref}\n id={inputId}\n disabled={disabled}\n aria-describedby={bottomText ? helperTextId : undefined}\n aria-invalid={error \|\| undefined}\n className={cn(\n getInputClassName(size, !!leftIcon, !!(rightIcon \|\| validated)),\n \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n )}\n {...props}\n />\n\n {leftIcon && (\n <div\n className={cn(\n \"pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary\",\n ICON_INSET[size],\n )}\n >\n <div className=\"flex size-4 shrink-0 items-center justify-center\">{leftIcon}</div>\n </div>\n )}\n\n {(rightIcon \|\| validated) && (\n <div\n className={cn(\n \"absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary\",\n ICON_INSET[size],\n )}\n >\n {rightIcon && (\n <div className=\"flex size-4 shrink-0 items-center justify-center\">{rightIcon}</div>\n )}\n {validated && (\n <div className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n <CheckOutlineIcon className=\"text-success-content\" />\n </div>\n )}\n </div>\n )}\n </div>\n\n {bottomText && (\n <TextFieldHelperText id={helperTextId} error={error}>\n {bottomText}\n </TextFieldHelperText>\n )}\n </div>\n );\n },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"TextField.mjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. /\nexport type TextFieldSize = \"48\" \| \"40\" \| \"32\";\n\nexport interface TextFieldProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" \| \"prefix\"> {\n /* Label text displayed above the input. Also used as the accessible name. /\n label?: string;\n /* Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. /\n helperText?: string;\n /* Height of the text field in pixels. @default \"48\" /\n size?: TextFieldSize;\n /* Whether the text field is in an error state. @default false /\n error?: boolean;\n /* Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. /\n errorMessage?: string;\n /* Whether the text field is validated. @default false /\n validated?: boolean;\n /* Icon element displayed at the left side of the input. /\n leftIcon?: React.ReactNode;\n /* Icon element displayed at the right side of the input. /\n rightIcon?: React.ReactNode;\n /* Whether the text field stretches to fill its container width. @default false /\n fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n \"48\": \"h-12\",\n \"40\": \"h-10\",\n \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst INPUT_PL: Record<TextFieldSize, { default: string; withIcon: string }> = {\n \"48\": { default: \"pl-4\", withIcon: \"pl-10\" },\n \"40\": { default: \"pl-4\", withIcon: \"pl-10\" },\n \"32\": { default: \"pl-3\", withIcon: \"pl-9\" },\n};\n\nconst INPUT_PR: Record<TextFieldSize, { default: string; withIcon: string }> = {\n \"48\": { default: \"pr-4\", withIcon: \"pr-10\" },\n \"40\": { default: \"pr-4\", withIcon: \"pr-10\" },\n \"32\": { default: \"pr-3\", withIcon: \"pr-9\" },\n};\n\nconst ICON_INSET: Record<TextFieldSize, string> = {\n \"48\": \"px-4\",\n \"40\": \"px-4\",\n \"32\": \"px-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n return cn(\n \"relative overflow-hidden rounded-sm border bg-neutral-alphas-50 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-content\" : \"border-transparent\",\n !disabled && !error && \"hover:border-neutral-alphas-400\",\n CONTAINER_HEIGHT[size],\n disabled && \"opacity-50\",\n );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n return cn(\n \"h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n INPUT_SIZE_CLASSES[size],\n hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,\n hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default,\n );\n}\n\nfunction TextFieldHelperText({\n id,\n error,\n children,\n}: {\n id: string;\n error: boolean;\n children: React.ReactNode;\n}) {\n return (\n <p\n id={id}\n className={cn(\n \"typography-description-12px-regular px-2 pt-2 pb-0.5\",\n error ? \"text-error-content\" : \"text-content-secondary\",\n )}\n >\n {children}\n </p>\n );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\n/\n A text input field with optional label, helper/error text, and icon slots.\n \n Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n \n @example\n * ```tsx\n * <TextField\n * label=\"Email\"\n * placeholder=\"you@example.com\"\n * error={!!emailError}\n * errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n validated = false,\n leftIcon,\n rightIcon,\n className,\n id,\n disabled,\n fullWidth = false,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const inputId = id \|\| generatedId;\n const helperTextId = `${inputId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n\n warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n return (\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={inputId}\n className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n >\n {label}\n </label>\n )}\n\n <div className={getContainerClassName(size, error, disabled)}>\n <input\n ref={ref}\n id={inputId}\n disabled={disabled}\n aria-describedby={bottomText ? helperTextId : undefined}\n aria-invalid={error \|\| undefined}\n className={cn(\n getInputClassName(size, !!leftIcon, !!(rightIcon \|\| validated)),\n \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n )}\n {...props}\n />\n\n {leftIcon && (\n <div\n className={cn(\n \"pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary\",\n ICON_INSET[size],\n )}\n >\n <div className=\"flex size-4 shrink-0 items-center justify-center\">{leftIcon}</div>\n </div>\n )}\n\n {(rightIcon \|\| validated) && (\n <div\n className={cn(\n \"absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary\",\n ICON_INSET[size],\n )}\n >\n {rightIcon && (\n <div className=\"flex size-4 shrink-0 items-center justify-center\">{rightIcon}</div>\n )}\n {validated && (\n <div className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n <CheckOutlineIcon className=\"text-success-content\" />\n </div>\n )}\n </div>\n )}\n </div>\n\n {bottomText && (\n <TextFieldHelperText id={helperTextId} error={error}>\n {bottomText}\n </TextFieldHelperText>\n )}\n </div>\n );\n },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":[],"mappings":"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"}

package/dist/components/Toast/Toast.mjs CHANGED Viewed

@@ -72,8 +72,8 @@ const Toast = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-3", children: [
             /* @__PURE__ */ jsx("div", { className: "self-start", children: variant === "messageToast" ? avatarSrc && /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: avatarAlt, fallback: avatarFallback }) : /* @__PURE__ */ jsx(VariantIcon, { variant }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-start", children: [
-              title && /* @__PURE__ */ jsx(ToastPrimitive.Title, { className: "typography-semibold-body-md", children: title }),
-              description && /* @__PURE__ */ jsx(ToastPrimitive.Description, { className: "typography-regular-body-md mt-1 opacity-90", children: description }),
+              title && /* @__PURE__ */ jsx(ToastPrimitive.Title, { className: "typography-body-small-14px-semibold", children: title }),
+              description && /* @__PURE__ */ jsx(ToastPrimitive.Description, { className: "typography-body-small-14px-regular mt-1 opacity-90", children: description }),
               children,
               onActionClick && /* @__PURE__ */ jsx(
                 Button,