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

@fanvue/ui 2.20.1 → 3.0.0

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

Files changed (236) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Logo.cjs","sources":["../../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst getLogoColors = (color: LogoColor, variant: LogoVariant) => {\n if (color === \"fullColour\") {\n return {\n icon: \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"\", // Uses parent's text-content-primary\n };\n }\n\n if (color === \"decolour\") {\n return {\n iconClass: \"fill-[#151515] dark:fill-[#ffffff]\",\n iconInnerClass: \"fill-[#ffffff] dark:fill-[#151515]\",\n textClass: \"\", // Uses parent's text-content-primary\n };\n }\n\n if (color === \"whiteAlways\") {\n return {\n icon:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-white)\"\n : \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"text-content-on-brand-inverted\",\n };\n }\n\n if (color === \"blackAlways\") {\n return {\n icon:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-black)\"\n : \"var(--color-brand-primary-default)\",\n iconInner:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-white)\"\n : \"var(--primitives-color-gray-black)\",\n textClass: \"text-content-on-brand\",\n };\n }\n\n return {\n icon: \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"\", // Default to adaptive color\n };\n};\n\n/** Layout variant of the logo. /\nexport type LogoVariant = \"full\" \| \"icon\" \| \"wordmark\" \| \"portrait\";\n/* Colour scheme of the logo. /\nexport type LogoColor = \"fullColour\" \| \"decolour\" \| \"whiteAlways\" \| \"blackAlways\";\n/* Height of the logo in pixels. Both icon and wordmark scale proportionally. /\nexport type LogoSize = \"16\" \| \"20\" \| \"24\" \| \"32\" \| \"40\" \| \"48\" \| \"64\";\n\nconst sizeClasses: Record<LogoSize, string> = {\n \"16\": \"h-4\",\n \"20\": \"h-5\",\n \"24\": \"h-6\",\n \"32\": \"h-8\",\n \"40\": \"h-10\",\n \"48\": \"h-12\",\n \"64\": \"h-16\",\n};\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Layout variant of the logo. @default \"full\" /\n variant?: LogoVariant;\n /* Colour scheme of the logo. @default \"fullColour\" /\n color?: LogoColor;\n /* Height of the logo in pixels. @default \"32\" (or \"40\" when `variant=\"icon\"`) /\n size?: LogoSize;\n /\n Accessible label for the logo. Required when `type` is `\"icon\"` and\n * the logo is used inside interactive contexts (links, buttons).\n \n @example \"Fanvue home\"\n /\n \"aria-label\"?: string;\n}\n\nconst WordmarkSVG = ({ className }: { className?: string }) => {\n return (\n <svg\n viewBox=\"0 0 128 30\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n className={className}\n data-testid=\"logo-wordmark\"\n >\n <path\n d=\"M89.0679 20.1823C89.0679 23.4373 90.1256 25.553 93.0961 25.553C95.9847 25.553 98.1815 23.0304 98.1815 17.7818V8.01701H102.902V29.0523H98.2629V25.3495C97.1238 27.75 95.2114 29.6218 91.9566 29.6218C86.464 29.6218 84.3888 26.0006 84.3888 21.1589V8.01701H89.0679V20.1823ZM116.586 7.44485C123.787 7.44485 126.717 12.9782 126.757 18.9592C126.757 19.1627 126.757 19.4883 126.716 19.8544H110.523C110.889 23.5569 113.249 25.8353 116.586 25.8353C118.986 25.8353 121.02 24.8995 121.752 22.8245H126.432C125.211 27.0966 121.59 29.6192 116.586 29.6192C110.279 29.6192 106.007 25.1028 106.007 18.4707C106.007 12.0829 110.483 7.44485 116.586 7.44485ZM29.0135 7.40527C35.971 7.40527 37.8834 11.5958 37.8834 16.112V24.2089C37.8834 25.7957 37.965 27.8301 38.2091 29.0508H33.408C33.3266 28.237 33.2858 27.4232 33.2858 26.5688V25.5922H33.2451C32.5534 27.301 30.7633 29.5795 26.5726 29.5796C21.8122 29.5796 19.1673 26.6501 19.1673 23.3137C19.1674 17.4955 26.2876 17.0073 29.3391 16.5191C32.0245 16.1122 33.2451 15.5831 33.2451 13.7929C33.2451 12.1248 31.6581 11.067 29.0949 11.067C26.8165 11.067 25.1484 12.3691 24.6601 14.4441H20.1846C20.7135 11.1078 23.5208 7.40535 29.0135 7.40527ZM66.6676 8.01701C68.4577 13.5504 70.2072 18.8399 71.9568 24.3326H71.9973C73.5435 19.2874 75.4559 13.5911 77.2055 8.01701H82.2099C79.606 15.0559 77.0835 22.0134 74.5202 29.0523H69.312L61.6223 8.01701H66.6676ZM18.3094 4.15021H4.92328V12.2878H17.2107V16.3973H4.92328V29.0508H0V0H18.3094V4.15021ZM52.6473 7.44485C58.099 7.44493 60.2147 11.066 60.2147 15.9077V29.0497H55.536V16.8839C55.536 13.629 54.437 11.5133 51.5078 11.5133C48.5783 11.5133 46.4216 14.036 46.4216 19.2845V29.0497H41.7024V8.01436H46.3406V11.7168C47.4392 9.31627 49.3921 7.44485 52.6473 7.44485ZM33.3265 17.0886C32.879 18.2685 31.7802 19.2856 28.1997 19.9773C25.3111 20.5062 23.8464 21.4015 23.8464 23.1509C23.8464 24.8191 25.2704 26.04 27.7523 26.04C30.5597 26.04 33.3265 24.2902 33.3265 19.2857V17.0886ZM116.586 11.1066C113.249 11.1066 111.011 13.263 110.564 16.5179H122.119C121.834 13.5071 120.085 11.1066 116.586 11.1066Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\n/\n The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only,\n * and portrait (stacked) layouts with multiple colour schemes.\n \n @example\n * ```tsx\n * <Logo type=\"full\" color=\"fullColour\" />\n * ```\n */\nexport const Logo = React.forwardRef<HTMLDivElement, LogoProps>(\n ({ className, variant = \"full\", color = \"fullColour\", size, ...props }, ref) => {\n const colors = getLogoColors(color, variant);\n const showIcon = variant === \"full\" \|\| variant === \"icon\" \|\| variant === \"portrait\";\n const showWordmark = variant === \"full\" \|\| variant === \"wordmark\" \|\| variant === \"portrait\";\n const sizeClass = sizeClasses[size ?? (variant === \"icon\" ? \"40\" : \"32\")];\n\n // When aria-label is provided, add role=\"img\" for proper accessibility\n const ariaProps = props[\"aria-label\"] ? { role: \"img\" as const } : {};\n\n return (\n <div\n ref={ref}\n data-testid=\"logo\"\n className={cn(\n \"inline-flex items-center text-content-primary\",\n variant === \"portrait\" ? \"flex-col gap-2\" : \"flex-row\",\n variant === \"full\" && \"gap-2\",\n className,\n )}\n {...ariaProps}\n {...props}\n >\n {showIcon && (\n <svg\n viewBox=\"0 0 39 39\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn(\"w-auto shrink-0\", sizeClass)}\n aria-hidden=\"true\"\n data-testid=\"logo-icon\"\n >\n <path\n d=\"M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z\"\n {...(color === \"decolour\" ? { className: colors.iconClass } : { fill: colors.icon })}\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z\"\n {...(color === \"decolour\"\n ? { className: colors.iconInnerClass }\n : { fill: colors.iconInner })}\n />\n </svg>\n )}\n {showWordmark && <WordmarkSVG className={cn(\"w-auto\", sizeClass, colors.textClass)} />}\n </div>\n );\n },\n);\n\nLogo.displayName = \"Logo\";\n"],"names":["jsx","React","jsxs","cn"],"mappings":"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"}
1	+ {"version":3,"file":"Logo.cjs","sources":["../../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst getLogoColors = (color: LogoColor, variant: LogoVariant) => {\n if (color === \"fullColour\") {\n return {\n icon: \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"\", // Uses parent's text-content-primary\n };\n }\n\n if (color === \"decolour\") {\n return {\n iconClass: \"fill-[#151515] dark:fill-[#ffffff]\",\n iconInnerClass: \"fill-[#ffffff] dark:fill-[#151515]\",\n textClass: \"\", // Uses parent's text-content-primary\n };\n }\n\n if (color === \"whiteAlways\") {\n return {\n icon:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-white)\"\n : \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"text-content-always-white\",\n };\n }\n\n if (color === \"blackAlways\") {\n return {\n icon:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-black)\"\n : \"var(--color-brand-primary-default)\",\n iconInner:\n variant === \"icon\"\n ? \"var(--primitives-color-gray-white)\"\n : \"var(--primitives-color-gray-black)\",\n textClass: \"text-content-always-black\",\n };\n }\n\n return {\n icon: \"var(--color-brand-primary-default)\",\n iconInner: \"var(--primitives-color-gray-black)\",\n textClass: \"\", // Default to adaptive color\n };\n};\n\n/** Layout variant of the logo. /\nexport type LogoVariant = \"full\" \| \"icon\" \| \"wordmark\" \| \"portrait\";\n/* Colour scheme of the logo. /\nexport type LogoColor = \"fullColour\" \| \"decolour\" \| \"whiteAlways\" \| \"blackAlways\";\n/* Height of the logo in pixels. Both icon and wordmark scale proportionally. /\nexport type LogoSize = \"16\" \| \"20\" \| \"24\" \| \"32\" \| \"40\" \| \"48\" \| \"64\";\n\nconst sizeClasses: Record<LogoSize, string> = {\n \"16\": \"h-4\",\n \"20\": \"h-5\",\n \"24\": \"h-6\",\n \"32\": \"h-8\",\n \"40\": \"h-10\",\n \"48\": \"h-12\",\n \"64\": \"h-16\",\n};\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Layout variant of the logo. @default \"full\" /\n variant?: LogoVariant;\n /* Colour scheme of the logo. @default \"fullColour\" /\n color?: LogoColor;\n /* Height of the logo in pixels. @default \"32\" (or \"40\" when `variant=\"icon\"`) /\n size?: LogoSize;\n /\n Accessible label for the logo. Required when `type` is `\"icon\"` and\n * the logo is used inside interactive contexts (links, buttons).\n \n @example \"Fanvue home\"\n /\n \"aria-label\"?: string;\n}\n\nconst WordmarkSVG = ({ className }: { className?: string }) => {\n return (\n <svg\n viewBox=\"0 0 128 30\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n className={className}\n data-testid=\"logo-wordmark\"\n >\n <path\n d=\"M89.0679 20.1823C89.0679 23.4373 90.1256 25.553 93.0961 25.553C95.9847 25.553 98.1815 23.0304 98.1815 17.7818V8.01701H102.902V29.0523H98.2629V25.3495C97.1238 27.75 95.2114 29.6218 91.9566 29.6218C86.464 29.6218 84.3888 26.0006 84.3888 21.1589V8.01701H89.0679V20.1823ZM116.586 7.44485C123.787 7.44485 126.717 12.9782 126.757 18.9592C126.757 19.1627 126.757 19.4883 126.716 19.8544H110.523C110.889 23.5569 113.249 25.8353 116.586 25.8353C118.986 25.8353 121.02 24.8995 121.752 22.8245H126.432C125.211 27.0966 121.59 29.6192 116.586 29.6192C110.279 29.6192 106.007 25.1028 106.007 18.4707C106.007 12.0829 110.483 7.44485 116.586 7.44485ZM29.0135 7.40527C35.971 7.40527 37.8834 11.5958 37.8834 16.112V24.2089C37.8834 25.7957 37.965 27.8301 38.2091 29.0508H33.408C33.3266 28.237 33.2858 27.4232 33.2858 26.5688V25.5922H33.2451C32.5534 27.301 30.7633 29.5795 26.5726 29.5796C21.8122 29.5796 19.1673 26.6501 19.1673 23.3137C19.1674 17.4955 26.2876 17.0073 29.3391 16.5191C32.0245 16.1122 33.2451 15.5831 33.2451 13.7929C33.2451 12.1248 31.6581 11.067 29.0949 11.067C26.8165 11.067 25.1484 12.3691 24.6601 14.4441H20.1846C20.7135 11.1078 23.5208 7.40535 29.0135 7.40527ZM66.6676 8.01701C68.4577 13.5504 70.2072 18.8399 71.9568 24.3326H71.9973C73.5435 19.2874 75.4559 13.5911 77.2055 8.01701H82.2099C79.606 15.0559 77.0835 22.0134 74.5202 29.0523H69.312L61.6223 8.01701H66.6676ZM18.3094 4.15021H4.92328V12.2878H17.2107V16.3973H4.92328V29.0508H0V0H18.3094V4.15021ZM52.6473 7.44485C58.099 7.44493 60.2147 11.066 60.2147 15.9077V29.0497H55.536V16.8839C55.536 13.629 54.437 11.5133 51.5078 11.5133C48.5783 11.5133 46.4216 14.036 46.4216 19.2845V29.0497H41.7024V8.01436H46.3406V11.7168C47.4392 9.31627 49.3921 7.44485 52.6473 7.44485ZM33.3265 17.0886C32.879 18.2685 31.7802 19.2856 28.1997 19.9773C25.3111 20.5062 23.8464 21.4015 23.8464 23.1509C23.8464 24.8191 25.2704 26.04 27.7523 26.04C30.5597 26.04 33.3265 24.2902 33.3265 19.2857V17.0886ZM116.586 11.1066C113.249 11.1066 111.011 13.263 110.564 16.5179H122.119C121.834 13.5071 120.085 11.1066 116.586 11.1066Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n\n/\n The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only,\n * and portrait (stacked) layouts with multiple colour schemes.\n \n @example\n * ```tsx\n * <Logo type=\"full\" color=\"fullColour\" />\n * ```\n */\nexport const Logo = React.forwardRef<HTMLDivElement, LogoProps>(\n ({ className, variant = \"full\", color = \"fullColour\", size, ...props }, ref) => {\n const colors = getLogoColors(color, variant);\n const showIcon = variant === \"full\" \|\| variant === \"icon\" \|\| variant === \"portrait\";\n const showWordmark = variant === \"full\" \|\| variant === \"wordmark\" \|\| variant === \"portrait\";\n const sizeClass = sizeClasses[size ?? (variant === \"icon\" ? \"40\" : \"32\")];\n\n // When aria-label is provided, add role=\"img\" for proper accessibility\n const ariaProps = props[\"aria-label\"] ? { role: \"img\" as const } : {};\n\n return (\n <div\n ref={ref}\n data-testid=\"logo\"\n className={cn(\n \"inline-flex items-center text-content-primary\",\n variant === \"portrait\" ? \"flex-col gap-2\" : \"flex-row\",\n variant === \"full\" && \"gap-2\",\n className,\n )}\n {...ariaProps}\n {...props}\n >\n {showIcon && (\n <svg\n viewBox=\"0 0 39 39\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn(\"w-auto shrink-0\", sizeClass)}\n aria-hidden=\"true\"\n data-testid=\"logo-icon\"\n >\n <path\n d=\"M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z\"\n {...(color === \"decolour\" ? { className: colors.iconClass } : { fill: colors.icon })}\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z\"\n {...(color === \"decolour\"\n ? { className: colors.iconInnerClass }\n : { fill: colors.iconInner })}\n />\n </svg>\n )}\n {showWordmark && <WordmarkSVG className={cn(\"w-auto\", sizeClass, colors.textClass)} />}\n </div>\n );\n },\n);\n\nLogo.displayName = \"Logo\";\n"],"names":["jsx","React","jsxs","cn"],"mappings":"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"}

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

@@ -100,7 +100,7 @@ const MobileStepper = React__namespace.forwardRef(
           "output",
           {
             "aria-live": "polite",
-            className: "typography-regular-body-sm truncate text-content-secondary",
+            className: "typography-description-12px-regular truncate text-content-secondary",
             children: formatText(clampedStep + 1, safeSteps)
           }
         )

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileStepper.cjs","sources":["../../../../src/components/MobileStepper/MobileStepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ProgressBar } from \"../ProgressBar/ProgressBar\";\n\n/** Display variant for the step indicator. /\nexport type MobileStepperVariant = \"dots\" \| \"progress\" \| \"text\";\n\n/* Positioning mode — `\"static\"` flows normally, `\"bottom\"` fixes to the viewport bottom. /\nexport type MobileStepperPosition = \"static\" \| \"bottom\";\n\nexport interface MobileStepperProps extends React.HTMLAttributes<HTMLElement> {\n /* Total number of steps. /\n steps: number;\n /* Zero-indexed active step, clamped to `0` – `steps - 1`. /\n activeStep: number;\n /* Step indicator style. @default \"dots\" /\n variant?: MobileStepperVariant;\n /* Content rendered on the left (typically a \"Back\" button). /\n backButton?: React.ReactNode;\n /* Content rendered on the right (typically a \"Next\" button). /\n nextButton?: React.ReactNode;\n /* Positioning mode. @default \"static\" /\n position?: MobileStepperPosition;\n /* Accessible label for the stepper region. @default \"Progress\" /\n ariaLabel?: string;\n /* Accessible label for the step progress indicator (dots/progress bar). @default \"Step progress\" /\n stepProgressLabel?: string;\n /\n Formatter for the `aria-valuetext` on dots and progress variants.\n * Receives `(activeStep, totalSteps)` where `activeStep` is 1-indexed.\n * @default (active, total) => \\`Step ${active} of ${total}\\`\n /\n formatStepLabel?: (activeStep: number, totalSteps: number) => string;\n /\n Custom formatter for the text variant.\n * Receives `(activeStep, steps)` where `activeStep` is 1-indexed for display.\n * Only used when `variant` is `\"text\"`.\n * @default (active, total) => \\`${active} / ${total}\\`\n /\n formatText?: (activeStep: number, totalSteps: number) => string;\n}\n\nfunction defaultFormatText(activeStep: number, totalSteps: number): string {\n return `${activeStep} / ${totalSteps}`;\n}\n\nfunction defaultFormatStepLabel(activeStep: number, totalSteps: number): string {\n return `Step ${activeStep} of ${totalSteps}`;\n}\n\n/\n A compact, mobile-friendly stepper that shows progress through a sequence of\n * steps. Supports three indicator variants: dots, a progress bar, or text.\n \n @example\n * ```tsx\n * <MobileStepper\n * steps={6}\n * activeStep={2}\n * variant=\"dots\"\n * backButton={<Button size=\"sm\" onClick={handleBack}>Back</Button>}\n * nextButton={<Button size=\"sm\" onClick={handleNext}>Next</Button>}\n * />\n * ```\n /\nexport const MobileStepper = React.forwardRef<HTMLElement, MobileStepperProps>(\n (\n {\n steps,\n activeStep,\n variant = \"dots\",\n backButton,\n nextButton,\n position = \"static\",\n ariaLabel = \"Progress\",\n stepProgressLabel = \"Step progress\",\n formatStepLabel = defaultFormatStepLabel,\n formatText = defaultFormatText,\n className,\n ...props\n },\n ref,\n ) => {\n const safeSteps = Math.max(1, steps);\n const clampedStep = Math.min(safeSteps - 1, Math.max(0, activeStep));\n const progressValue = safeSteps > 1 ? (clampedStep / (safeSteps - 1)) 100 : 100;\n const stepText = formatStepLabel(clampedStep + 1, safeSteps);\n\n const hasButtons = backButton != null \|\| nextButton != null;\n\n const sharedClassName = cn(\n \"flex w-full items-center justify-between gap-2 bg-background-surface px-2 py-2\",\n position === \"bottom\" && \"fixed inset-x-0 bottom-0 z-50 pb-[env(safe-area-inset-bottom)]\",\n className,\n );\n\n const content = (\n <>\n {backButton != null && <div className=\"flex shrink-0\">{backButton}</div>}\n\n <div className=\"flex min-w-0 flex-1 items-center justify-center overflow-hidden\">\n {variant === \"dots\" && (\n <output aria-live=\"polite\" className=\"flex items-center\">\n <div\n role=\"progressbar\"\n aria-label={stepProgressLabel}\n aria-valuenow={clampedStep + 1}\n aria-valuemin={1}\n aria-valuemax={safeSteps}\n aria-valuetext={stepText}\n className=\"flex flex-wrap items-center gap-1\"\n >\n {Array.from({ length: safeSteps }, (_, i) => {\n const state =\n i < clampedStep ? \"completed\" : i === clampedStep ? \"active\" : \"incomplete\";\n return (\n <span\n // biome-ignore lint/suspicious/noArrayIndexKey: static dot list never reorders\n key={`step-${i}`}\n data-state={state}\n className={cn(\n \"block size-2 shrink-0 rounded-full motion-safe:transition-colors motion-safe:duration-150\",\n state === \"active\" ? \"bg-content-primary\" : \"bg-neutral-alphas-200\",\n )}\n aria-hidden=\"true\"\n />\n );\n })}\n </div>\n <span className=\"sr-only\">{stepText}</span>\n </output>\n )}\n\n {variant === \"progress\" && (\n <output aria-live=\"polite\" className=\"w-full max-w-md px-2\">\n <ProgressBar\n value={progressValue}\n size=\"small\"\n variant=\"generic\"\n ariaLabel={stepProgressLabel}\n ariaValueText={stepText}\n />\n </output>\n )}\n\n {variant === \"text\" && (\n <output\n aria-live=\"polite\"\n className=\"typography-~~regular~~-~~body~~-sm truncate text-content-secondary\"\n >\n {formatText(clampedStep + 1, safeSteps)}\n </output>\n )}\n </div>\n\n {nextButton != null && <div className=\"flex shrink-0\">{nextButton}</div>}\n </>\n );\n\n if (hasButtons) {\n return (\n <nav\n ref={ref as React.Ref<HTMLElement>}\n aria-label={ariaLabel}\n className={sharedClassName}\n {...props}\n >\n {content}\n </nav>\n );\n }\n\n return (\n <fieldset\n ref={ref as React.Ref<HTMLFieldSetElement>}\n aria-label={ariaLabel}\n className={cn(sharedClassName, \"m-0 border-0 p-0\")}\n {...props}\n >\n {content}\n </fieldset>\n );\n },\n);\n\nMobileStepper.displayName = \"MobileStepper\";\n"],"names":["React","cn","jsxs","Fragment","jsx","ProgressBar"],"mappings":"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"}
1	+ {"version":3,"file":"MobileStepper.cjs","sources":["../../../../src/components/MobileStepper/MobileStepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ProgressBar } from \"../ProgressBar/ProgressBar\";\n\n/** Display variant for the step indicator. /\nexport type MobileStepperVariant = \"dots\" \| \"progress\" \| \"text\";\n\n/* Positioning mode — `\"static\"` flows normally, `\"bottom\"` fixes to the viewport bottom. /\nexport type MobileStepperPosition = \"static\" \| \"bottom\";\n\nexport interface MobileStepperProps extends React.HTMLAttributes<HTMLElement> {\n /* Total number of steps. /\n steps: number;\n /* Zero-indexed active step, clamped to `0` – `steps - 1`. /\n activeStep: number;\n /* Step indicator style. @default \"dots\" /\n variant?: MobileStepperVariant;\n /* Content rendered on the left (typically a \"Back\" button). /\n backButton?: React.ReactNode;\n /* Content rendered on the right (typically a \"Next\" button). /\n nextButton?: React.ReactNode;\n /* Positioning mode. @default \"static\" /\n position?: MobileStepperPosition;\n /* Accessible label for the stepper region. @default \"Progress\" /\n ariaLabel?: string;\n /* Accessible label for the step progress indicator (dots/progress bar). @default \"Step progress\" /\n stepProgressLabel?: string;\n /\n Formatter for the `aria-valuetext` on dots and progress variants.\n * Receives `(activeStep, totalSteps)` where `activeStep` is 1-indexed.\n * @default (active, total) => \\`Step ${active} of ${total}\\`\n /\n formatStepLabel?: (activeStep: number, totalSteps: number) => string;\n /\n Custom formatter for the text variant.\n * Receives `(activeStep, steps)` where `activeStep` is 1-indexed for display.\n * Only used when `variant` is `\"text\"`.\n * @default (active, total) => \\`${active} / ${total}\\`\n /\n formatText?: (activeStep: number, totalSteps: number) => string;\n}\n\nfunction defaultFormatText(activeStep: number, totalSteps: number): string {\n return `${activeStep} / ${totalSteps}`;\n}\n\nfunction defaultFormatStepLabel(activeStep: number, totalSteps: number): string {\n return `Step ${activeStep} of ${totalSteps}`;\n}\n\n/\n A compact, mobile-friendly stepper that shows progress through a sequence of\n * steps. Supports three indicator variants: dots, a progress bar, or text.\n \n @example\n * ```tsx\n * <MobileStepper\n * steps={6}\n * activeStep={2}\n * variant=\"dots\"\n * backButton={<Button size=\"sm\" onClick={handleBack}>Back</Button>}\n * nextButton={<Button size=\"sm\" onClick={handleNext}>Next</Button>}\n * />\n * ```\n /\nexport const MobileStepper = React.forwardRef<HTMLElement, MobileStepperProps>(\n (\n {\n steps,\n activeStep,\n variant = \"dots\",\n backButton,\n nextButton,\n position = \"static\",\n ariaLabel = \"Progress\",\n stepProgressLabel = \"Step progress\",\n formatStepLabel = defaultFormatStepLabel,\n formatText = defaultFormatText,\n className,\n ...props\n },\n ref,\n ) => {\n const safeSteps = Math.max(1, steps);\n const clampedStep = Math.min(safeSteps - 1, Math.max(0, activeStep));\n const progressValue = safeSteps > 1 ? (clampedStep / (safeSteps - 1)) 100 : 100;\n const stepText = formatStepLabel(clampedStep + 1, safeSteps);\n\n const hasButtons = backButton != null \|\| nextButton != null;\n\n const sharedClassName = cn(\n \"flex w-full items-center justify-between gap-2 bg-background-surface px-2 py-2\",\n position === \"bottom\" && \"fixed inset-x-0 bottom-0 z-50 pb-[env(safe-area-inset-bottom)]\",\n className,\n );\n\n const content = (\n <>\n {backButton != null && <div className=\"flex shrink-0\">{backButton}</div>}\n\n <div className=\"flex min-w-0 flex-1 items-center justify-center overflow-hidden\">\n {variant === \"dots\" && (\n <output aria-live=\"polite\" className=\"flex items-center\">\n <div\n role=\"progressbar\"\n aria-label={stepProgressLabel}\n aria-valuenow={clampedStep + 1}\n aria-valuemin={1}\n aria-valuemax={safeSteps}\n aria-valuetext={stepText}\n className=\"flex flex-wrap items-center gap-1\"\n >\n {Array.from({ length: safeSteps }, (_, i) => {\n const state =\n i < clampedStep ? \"completed\" : i === clampedStep ? \"active\" : \"incomplete\";\n return (\n <span\n // biome-ignore lint/suspicious/noArrayIndexKey: static dot list never reorders\n key={`step-${i}`}\n data-state={state}\n className={cn(\n \"block size-2 shrink-0 rounded-full motion-safe:transition-colors motion-safe:duration-150\",\n state === \"active\" ? \"bg-content-primary\" : \"bg-neutral-alphas-200\",\n )}\n aria-hidden=\"true\"\n />\n );\n })}\n </div>\n <span className=\"sr-only\">{stepText}</span>\n </output>\n )}\n\n {variant === \"progress\" && (\n <output aria-live=\"polite\" className=\"w-full max-w-md px-2\">\n <ProgressBar\n value={progressValue}\n size=\"small\"\n variant=\"generic\"\n ariaLabel={stepProgressLabel}\n ariaValueText={stepText}\n />\n </output>\n )}\n\n {variant === \"text\" && (\n <output\n aria-live=\"polite\"\n className=\"typography-description-12px-regular truncate text-content-secondary\"\n >\n {formatText(clampedStep + 1, safeSteps)}\n </output>\n )}\n </div>\n\n {nextButton != null && <div className=\"flex shrink-0\">{nextButton}</div>}\n </>\n );\n\n if (hasButtons) {\n return (\n <nav\n ref={ref as React.Ref<HTMLElement>}\n aria-label={ariaLabel}\n className={sharedClassName}\n {...props}\n >\n {content}\n </nav>\n );\n }\n\n return (\n <fieldset\n ref={ref as React.Ref<HTMLFieldSetElement>}\n aria-label={ariaLabel}\n className={cn(sharedClassName, \"m-0 border-0 p-0\")}\n {...props}\n >\n {content}\n </fieldset>\n );\n },\n);\n\nMobileStepper.displayName = \"MobileStepper\";\n"],"names":["React","cn","jsxs","Fragment","jsx","ProgressBar"],"mappings":"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"}

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

@@ -102,7 +102,7 @@ const Pagination = React__namespace.forwardRef(
                 onClick: () => onPageChange?.(page),
                 className: cn.cn(
                   "flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150",
-                  page === currentPage ? "bg-buttons-primary text-content-primary-inverted" : "bg-neutral-alphas-50 text-content-primary hover:bg-neutral-alphas-100 active:bg-neutral-alphas-100"
+                  page === currentPage ? "bg-buttons-primary-default text-content-primary-inverted" : "bg-neutral-alphas-50 text-content-primary hover:bg-neutral-alphas-100 active:bg-neutral-alphas-100"
                 ),
                 children: page
               },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\n/** Pagination display style — numbered buttons or minimal dots. /\nexport type PaginationVariant = \"default\" \| \"dots\";\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n /* Display style — numbered page buttons or minimal dots. @default \"default\" /\n variant?: PaginationVariant;\n /* Total number of pages. /\n totalPages: number;\n /* Current active page (1-indexed). /\n currentPage: number;\n /* Callback fired when the active page changes. Receives the new 1-indexed page number. /\n onPageChange?: (page: number) => void;\n /* Accessible label for the `<nav>` landmark. @default \"Pagination\" /\n ariaLabel?: string;\n /* Accessible label for the previous-page button. @default \"Previous page\" /\n previousLabel?: string;\n /* Accessible label for the next-page button. @default \"Next page\" /\n nextLabel?: string;\n /* Function that returns an accessible label for each page button. @default (page) => \\`Page ${page}\\` /\n getPageLabel?: (page: number) => string;\n}\n\ntype PageItem = number \| \"ellipsis-start\" \| \"ellipsis-end\";\n\nfunction getVisiblePages(currentPage: number, totalPages: number): PageItem[] {\n if (totalPages <= 7) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const pages: PageItem[] = [1];\n\n if (currentPage <= 4) {\n pages.push(2, 3, 4, 5, \"ellipsis-end\");\n } else if (currentPage >= totalPages - 3) {\n pages.push(\"ellipsis-start\", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1);\n } else {\n pages.push(\"ellipsis-start\", currentPage - 1, currentPage, currentPage + 1, \"ellipsis-end\");\n }\n\n pages.push(totalPages);\n return pages;\n}\n\n/\n Page navigation control with previous/next buttons and numbered page\n * indicators. Supports a numbered-buttons layout (`\"default\"`) and a compact\n * dots layout (`\"dots\"`).\n \n @example\n * ```tsx\n * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n (\n {\n variant = \"default\",\n totalPages,\n currentPage,\n onPageChange,\n ariaLabel = \"Pagination\",\n previousLabel = \"Previous page\",\n nextLabel = \"Next page\",\n getPageLabel = (page: number) => `Page ${page}`,\n className,\n ...props\n },\n ref,\n ) => {\n const isFirstPage = currentPage <= 1;\n const isLastPage = currentPage >= totalPages;\n\n const handlePrevious = () => {\n if (!isFirstPage) onPageChange?.(currentPage - 1);\n };\n\n const handleNext = () => {\n if (!isLastPage) onPageChange?.(currentPage + 1);\n };\n\n return (\n <nav\n ref={ref}\n aria-label={ariaLabel}\n className={cn(\n \"inline-flex items-center pb-4\",\n variant === \"default\" && \"gap-3\",\n variant === \"dots\" && \"gap-4\",\n className,\n )}\n {...props}\n >\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<ChevronLeftIcon />}\n aria-label={previousLabel}\n disabled={isFirstPage}\n onClick={handlePrevious}\n />\n\n {variant === \"default\" && (\n <div className=\"flex items-center gap-3\">\n {getVisiblePages(currentPage, totalPages).map((page) =>\n typeof page === \"string\" ? (\n <span\n key={page}\n className=\"flex size-4 items-center justify-center text-content-secondary text-xs\"\n aria-hidden=\"true\"\n >\n …\n </span>\n ) : (\n <button\n key={page}\n type=\"button\"\n aria-label={getPageLabel(page)}\n aria-current={page === currentPage ? \"page\" : undefined}\n onClick={() => onPageChange?.(page)}\n className={cn(\n \"flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n page === currentPage\n ? \"bg-buttons-primary text-content-primary-inverted\"\n : \"bg-neutral-alphas-50 text-content-primary hover:bg-neutral-alphas-100 active:bg-neutral-alphas-100\",\n )}\n >\n {page}\n </button>\n ),\n )}\n </div>\n )}\n\n {variant === \"dots\" && (\n <div className=\"flex items-center\">\n {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n <button\n key={page}\n type=\"button\"\n aria-label={getPageLabel(page)}\n aria-current={page === currentPage ? \"page\" : undefined}\n onClick={() => onPageChange?.(page)}\n className=\"flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:shadow-focus-ring focus-visible:outline-none\"\n >\n <span\n className={cn(\n \"block rounded-full motion-safe:transition-all motion-safe:duration-150\",\n page === currentPage\n ? \"size-2 bg-neutral-alphas-400\"\n : \"size-1.5 bg-neutral-alphas-200 hover:bg-neutral-alphas-300 active:bg-neutral-alphas-300\",\n )}\n />\n </button>\n ))}\n </div>\n )}\n\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<ChevronRightIcon />}\n aria-label={nextLabel}\n disabled={isLastPage}\n onClick={handleNext}\n />\n </nav>\n );\n },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":["React","jsxs","cn","jsx","IconButton","ChevronLeftIcon","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAS,gBAAgB,aAAqB,YAAgC;AAC5E,MAAI,cAAc,GAAG;AACnB,WAAO,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,EAC3D;AAEA,QAAM,QAAoB,CAAC,CAAC;AAE5B,MAAI,eAAe,GAAG;AACpB,UAAM,KAAK,GAAG,GAAG,GAAG,GAAG,cAAc;AAAA,EACvC,WAAW,eAAe,aAAa,GAAG;AACxC,UAAM,KAAK,kBAAkB,aAAa,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CAAC;AAAA,EAC7F,OAAO;AACL,UAAM,KAAK,kBAAkB,cAAc,GAAG,aAAa,cAAc,GAAG,cAAc;AAAA,EAC5F;AAEA,QAAM,KAAK,UAAU;AACrB,SAAO;AACT;AAYO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,eAAe,CAAC,SAAiB,QAAQ,IAAI;AAAA,IAC7C;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAc,eAAe;AACnC,UAAM,aAAa,eAAe;AAElC,UAAM,iBAAiB,MAAM;AAC3B,UAAI,CAAC,YAAa,gBAAe,cAAc,CAAC;AAAA,IAClD;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,CAAC,WAAY,gBAAe,cAAc,CAAC;AAAA,IACjD;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,UAAU;AAAA,UACtB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAACC,WAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,qCAAOC,gBAAAA,iBAAA,EAAgB;AAAA,cACvB,cAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAGV,YAAY,aACXF,+BAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,gBAAgB,aAAa,UAAU,EAAE;AAAA,YAAI,CAAC,SAC7C,OAAO,SAAS,WACdA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,eAAY;AAAA,gBACb,UAAA;AAAA,cAAA;AAAA,cAHM;AAAA,YAAA,IAOPA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,cAAY,aAAa,IAAI;AAAA,gBAC7B,gBAAc,SAAS,cAAc,SAAS;AAAA,gBAC9C,SAAS,MAAM,eAAe,IAAI;AAAA,gBAClC,WAAWD,GAAAA;AAAAA,kBACT;AAAA,kBACA,SAAS,cACL,~~qDACA~~;AAAA,gBAAA;AAAA,gBAGL,UAAA;AAAA,cAAA;AAAA,cAZI;AAAA,YAAA;AAAA,UAaP,GAGN;AAAA,UAGD,YAAY,UACXC,2BAAAA,IAAC,OAAA,EAAI,WAAU,qBACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,GAAG,MAAM,IAAI,CAAC,EAAE,IAAI,CAAC,SACxDA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAK;AAAA,cACL,cAAY,aAAa,IAAI;AAAA,cAC7B,gBAAc,SAAS,cAAc,SAAS;AAAA,cAC9C,SAAS,MAAM,eAAe,IAAI;AAAA,cAClC,WAAU;AAAA,cAEV,UAAAA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,GAAAA;AAAAA,oBACT;AAAA,oBACA,SAAS,cACL,iCACA;AAAA,kBAAA;AAAA,gBACN;AAAA,cAAA;AAAA,YACF;AAAA,YAdK;AAAA,UAAA,CAgBR,GACH;AAAA,UAGFC,2BAAAA;AAAAA,YAACC,WAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,qCAAOE,iBAAAA,kBAAA,EAAiB;AAAA,cACxB,cAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACX;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,WAAW,cAAc;;"}
1	+ {"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\n/** Pagination display style — numbered buttons or minimal dots. /\nexport type PaginationVariant = \"default\" \| \"dots\";\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n /* Display style — numbered page buttons or minimal dots. @default \"default\" /\n variant?: PaginationVariant;\n /* Total number of pages. /\n totalPages: number;\n /* Current active page (1-indexed). /\n currentPage: number;\n /* Callback fired when the active page changes. Receives the new 1-indexed page number. /\n onPageChange?: (page: number) => void;\n /* Accessible label for the `<nav>` landmark. @default \"Pagination\" /\n ariaLabel?: string;\n /* Accessible label for the previous-page button. @default \"Previous page\" /\n previousLabel?: string;\n /* Accessible label for the next-page button. @default \"Next page\" /\n nextLabel?: string;\n /* Function that returns an accessible label for each page button. @default (page) => \\`Page ${page}\\` /\n getPageLabel?: (page: number) => string;\n}\n\ntype PageItem = number \| \"ellipsis-start\" \| \"ellipsis-end\";\n\nfunction getVisiblePages(currentPage: number, totalPages: number): PageItem[] {\n if (totalPages <= 7) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const pages: PageItem[] = [1];\n\n if (currentPage <= 4) {\n pages.push(2, 3, 4, 5, \"ellipsis-end\");\n } else if (currentPage >= totalPages - 3) {\n pages.push(\"ellipsis-start\", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1);\n } else {\n pages.push(\"ellipsis-start\", currentPage - 1, currentPage, currentPage + 1, \"ellipsis-end\");\n }\n\n pages.push(totalPages);\n return pages;\n}\n\n/\n Page navigation control with previous/next buttons and numbered page\n * indicators. Supports a numbered-buttons layout (`\"default\"`) and a compact\n * dots layout (`\"dots\"`).\n \n @example\n * ```tsx\n * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n (\n {\n variant = \"default\",\n totalPages,\n currentPage,\n onPageChange,\n ariaLabel = \"Pagination\",\n previousLabel = \"Previous page\",\n nextLabel = \"Next page\",\n getPageLabel = (page: number) => `Page ${page}`,\n className,\n ...props\n },\n ref,\n ) => {\n const isFirstPage = currentPage <= 1;\n const isLastPage = currentPage >= totalPages;\n\n const handlePrevious = () => {\n if (!isFirstPage) onPageChange?.(currentPage - 1);\n };\n\n const handleNext = () => {\n if (!isLastPage) onPageChange?.(currentPage + 1);\n };\n\n return (\n <nav\n ref={ref}\n aria-label={ariaLabel}\n className={cn(\n \"inline-flex items-center pb-4\",\n variant === \"default\" && \"gap-3\",\n variant === \"dots\" && \"gap-4\",\n className,\n )}\n {...props}\n >\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<ChevronLeftIcon />}\n aria-label={previousLabel}\n disabled={isFirstPage}\n onClick={handlePrevious}\n />\n\n {variant === \"default\" && (\n <div className=\"flex items-center gap-3\">\n {getVisiblePages(currentPage, totalPages).map((page) =>\n typeof page === \"string\" ? (\n <span\n key={page}\n className=\"flex size-4 items-center justify-center text-content-secondary text-xs\"\n aria-hidden=\"true\"\n >\n …\n </span>\n ) : (\n <button\n key={page}\n type=\"button\"\n aria-label={getPageLabel(page)}\n aria-current={page === currentPage ? \"page\" : undefined}\n onClick={() => onPageChange?.(page)}\n className={cn(\n \"flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n page === currentPage\n ? \"bg-buttons-primary-default text-content-primary-inverted\"\n : \"bg-neutral-alphas-50 text-content-primary hover:bg-neutral-alphas-100 active:bg-neutral-alphas-100\",\n )}\n >\n {page}\n </button>\n ),\n )}\n </div>\n )}\n\n {variant === \"dots\" && (\n <div className=\"flex items-center\">\n {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n <button\n key={page}\n type=\"button\"\n aria-label={getPageLabel(page)}\n aria-current={page === currentPage ? \"page\" : undefined}\n onClick={() => onPageChange?.(page)}\n className=\"flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:shadow-focus-ring focus-visible:outline-none\"\n >\n <span\n className={cn(\n \"block rounded-full motion-safe:transition-all motion-safe:duration-150\",\n page === currentPage\n ? \"size-2 bg-neutral-alphas-400\"\n : \"size-1.5 bg-neutral-alphas-200 hover:bg-neutral-alphas-300 active:bg-neutral-alphas-300\",\n )}\n />\n </button>\n ))}\n </div>\n )}\n\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<ChevronRightIcon />}\n aria-label={nextLabel}\n disabled={isLastPage}\n onClick={handleNext}\n />\n </nav>\n );\n },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":["React","jsxs","cn","jsx","IconButton","ChevronLeftIcon","ChevronRightIcon"],"mappings":"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"}

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

@@ -29,10 +29,10 @@ const pillVariants = {
     blue: "bg-info-surface text-info-content",
     gold: "bg-warning-surface text-warning-content",
     pinkLight: "bg-brand-secondary-muted text-content-primary",
-    base: "bg-buttons-primary text-content-primary-inverted",
-    brand: "bg-brand-primary-default text-content-on-brand",
-    brandLight: "bg-brand-primary-muted text-content-on-brand",
-    beta: "bg-brand-secondary-default text-content-on-brand",
+    base: "bg-buttons-primary-default text-content-primary-inverted",
+    brand: "bg-brand-primary-default text-content-always-black",
+    brandLight: "bg-brand-primary-muted text-content-always-black",
+    beta: "bg-brand-secondary-default text-content-always-black",
     error: "bg-error-content text-error-surface"
   }
 };
@@ -57,7 +57,7 @@ const Pill = React__namespace.forwardRef(
           // Base styles
           "inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-3 py-1",
           // Typography
-          "typography-semibold-body-sm",
+          "typography-description-12px-semibold",
           // Variant styles
           pillVariants.variant[variant],
           // Interactive

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pill.cjs","sources":["../../../../src/components/Pill/Pill.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst pillVariants = {\n variant: {\n green: \"bg-success-surface text-success-content\",\n grey: \"bg-neutral-alphas-50 text-content-secondary\",\n blue: \"bg-info-surface text-info-content\",\n gold: \"bg-warning-surface text-warning-content\",\n pinkLight: \"bg-brand-secondary-muted text-content-primary\",\n base: \"bg-buttons-primary text-content-primary-inverted\",\n brand: \"bg-brand-primary-default text-content-on-~~brand~~\",\n brandLight: \"bg-brand-primary-muted text-content-on-~~brand~~\",\n beta: \"bg-brand-secondary-default text-content-on-~~brand~~\",\n error: \"bg-error-content text-error-surface\",\n },\n} as const;\n\n/** Colour variant of the pill. /\nexport type PillVariant =\n \| \"green\"\n \| \"grey\"\n \| \"blue\"\n \| \"gold\"\n \| \"pinkLight\"\n \| \"base\"\n \| \"brand\"\n \| \"brandLight\"\n \| \"beta\"\n \| \"error\";\n\nexport interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {\n /* Colour variant of the pill. @default \"green\" /\n variant?: PillVariant;\n /* Icon element displayed before the label. /\n leftIcon?: React.ReactNode;\n /* Icon element displayed after the label. /\n rightIcon?: React.ReactNode;\n /* Merge props onto a child element instead of rendering a `<span>`. @default false /\n asChild?: boolean;\n}\n\n/\n A small rounded label for categorisation, status, or tagging.\n \n @example\n * ```tsx\n * <Pill variant=\"brand\">New</Pill>\n * ```\n */\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(\n (\n {\n className,\n variant = \"green\",\n leftIcon,\n rightIcon,\n asChild = false,\n onClick,\n children,\n ...props\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : \"span\";\n\n return (\n <Comp\n ref={ref}\n data-testid=\"pill\"\n className={cn(\n // Base styles\n \"inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-3 py-1\",\n // Typography\n \"typography-~~semibold~~-~~body~~-sm\",\n // Variant styles\n pillVariants.variant[variant],\n // Interactive\n onClick && \"cursor-pointer\",\n // Manual CSS overrides\n className,\n )}\n onClick={onClick}\n {...props}\n >\n {leftIcon && (\n <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n {asChild ? (\n <Slottable>{children}</Slottable>\n ) : (\n <span className=\"min-w-0 truncate\">{children}</span>\n )}\n {rightIcon && (\n <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n {rightIcon}\n </span>\n )}\n </Comp>\n );\n },\n);\n\nPill.displayName = \"Pill\";\n"],"names":["React","Slot","jsxs","cn","Slottable","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAkCO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA,aAAa,QAAQ,OAAO;AAAA;AAAA,UAE5B,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,2CACE,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UACH;AAAA,UAED,yCACEC,qBAAA,EAAW,SAAA,CAAS,IAErBC,+BAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;;"}
1	+ {"version":3,"file":"Pill.cjs","sources":["../../../../src/components/Pill/Pill.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst pillVariants = {\n variant: {\n green: \"bg-success-surface text-success-content\",\n grey: \"bg-neutral-alphas-50 text-content-secondary\",\n blue: \"bg-info-surface text-info-content\",\n gold: \"bg-warning-surface text-warning-content\",\n pinkLight: \"bg-brand-secondary-muted text-content-primary\",\n base: \"bg-buttons-primary-default text-content-primary-inverted\",\n brand: \"bg-brand-primary-default text-content-always-black\",\n brandLight: \"bg-brand-primary-muted text-content-always-black\",\n beta: \"bg-brand-secondary-default text-content-always-black\",\n error: \"bg-error-content text-error-surface\",\n },\n} as const;\n\n/** Colour variant of the pill. /\nexport type PillVariant =\n \| \"green\"\n \| \"grey\"\n \| \"blue\"\n \| \"gold\"\n \| \"pinkLight\"\n \| \"base\"\n \| \"brand\"\n \| \"brandLight\"\n \| \"beta\"\n \| \"error\";\n\nexport interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {\n /* Colour variant of the pill. @default \"green\" /\n variant?: PillVariant;\n /* Icon element displayed before the label. /\n leftIcon?: React.ReactNode;\n /* Icon element displayed after the label. /\n rightIcon?: React.ReactNode;\n /* Merge props onto a child element instead of rendering a `<span>`. @default false /\n asChild?: boolean;\n}\n\n/\n A small rounded label for categorisation, status, or tagging.\n \n @example\n * ```tsx\n * <Pill variant=\"brand\">New</Pill>\n * ```\n */\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(\n (\n {\n className,\n variant = \"green\",\n leftIcon,\n rightIcon,\n asChild = false,\n onClick,\n children,\n ...props\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : \"span\";\n\n return (\n <Comp\n ref={ref}\n data-testid=\"pill\"\n className={cn(\n // Base styles\n \"inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-3 py-1\",\n // Typography\n \"typography-description-12px-semibold\",\n // Variant styles\n pillVariants.variant[variant],\n // Interactive\n onClick && \"cursor-pointer\",\n // Manual CSS overrides\n className,\n )}\n onClick={onClick}\n {...props}\n >\n {leftIcon && (\n <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n {asChild ? (\n <Slottable>{children}</Slottable>\n ) : (\n <span className=\"min-w-0 truncate\">{children}</span>\n )}\n {rightIcon && (\n <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n {rightIcon}\n </span>\n )}\n </Comp>\n );\n },\n);\n\nPill.displayName = \"Pill\";\n"],"names":["React","Slot","jsxs","cn","Slottable","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAkCO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA,aAAa,QAAQ,OAAO;AAAA;AAAA,UAE5B,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,2CACE,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UACH;AAAA,UAED,yCACEC,qBAAA,EAAW,SAAA,CAAS,IAErBC,+BAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;;"}

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

@@ -69,13 +69,13 @@ const ProgressBar = React__namespace.forwardRef(
     const showFooter = leftIcon != null || helperLeft != null || helperRight != null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex w-full flex-col", GAP[size], className), ...props, children: [
       showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-end justify-between", children: [
-        title != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-sm text-content-primary", children: title }),
+        title != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-description-12px-semibold text-content-primary", children: title }),
         showCompletion && /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
             className: cn.cn(
               textColor,
-              isSmall ? "typography-bold-heading-sm" : "typography-bold-heading-xl"
+              isSmall ? "typography-header-heading-sm" : "typography-header-heading-xl"
             ),
             children: [
               Math.round(clampedValue),
@@ -83,7 +83,7 @@ const ProgressBar = React__namespace.forwardRef(
             ]
           }
         ),
-        stepsLabel != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-content-primary", children: stepsLabel })
+        stepsLabel != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-regular text-content-primary", children: stepsLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -110,9 +110,9 @@ const ProgressBar = React__namespace.forwardRef(
       showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
           leftIcon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 items-center justify-center", "aria-hidden": "true", children: leftIcon }),
-          helperLeft != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-content-primary", children: helperLeft })
+          helperLeft != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-regular text-content-primary", children: helperLeft })
         ] }),
-        helperRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-content-primary", children: helperRight })
+        helperRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-regular text-content-primary", children: helperRight })
       ] })
     ] });
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). /\nexport type ProgressBarSize = \"default\" \| \"small\";\n/* Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. /\nexport type ProgressBarVariant = \"default\" \| \"generic\" \| \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /* Current progress value, clamped to 0–100. /\n value: number;\n /* Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" /\n size?: ProgressBarSize;\n /* Colour mode — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @default \"default\" /\n variant?: ProgressBarVariant;\n /* Title content shown at the top-left of the bar. /\n title?: React.ReactNode;\n /* Whether to display the completion percentage above the track. @default false /\n showCompletion?: boolean;\n /* Steps label shown at the top-right (e.g. `\"2/8 steps\"`). /\n stepsLabel?: React.ReactNode;\n /* Helper content at the bottom-left of the bar. /\n helperLeft?: React.ReactNode;\n /* Helper content at the bottom-right of the bar. /\n helperRight?: React.ReactNode;\n /* Icon shown at the bottom-left before the helper text. /\n leftIcon?: React.ReactNode;\n /* Accessible label for the `progressbar` role. @default \"Progress\" /\n ariaLabel?: string;\n /* Human-readable text alternative for the current value (e.g. \"Step 3 of 5\"). /\n ariaValueText?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n default: \"h-3\",\n small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n default: \"gap-3\",\n small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n if (value >= 100) return \"bg-success-content\";\n if (value >= 40) return \"bg-warning-content\";\n return \"bg-error-content\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-content\";\n if (value >= 40) return \"text-warning-content\";\n return \"text-error-content\";\n}\n\nfunction resolveColors(\n variant: ProgressBarVariant,\n value: number,\n): { barColor: string; textColor: string } {\n if (variant === \"neutral\")\n return { barColor: \"bg-content-tertiary\", textColor: \"text-content-tertiary\" };\n if (variant === \"generic\")\n return { barColor: \"bg-brand-primary-default\", textColor: \"text-brand-primary-default\" };\n return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\n}\n\n/\n A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n \n @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n (\n {\n value,\n size = \"default\",\n variant = \"default\",\n title,\n showCompletion = false,\n stepsLabel,\n helperLeft,\n helperRight,\n leftIcon,\n ariaLabel,\n ariaValueText,\n className,\n ...props\n },\n ref,\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const isSmall = size === \"small\";\n const { barColor, textColor } = resolveColors(variant, clampedValue);\n\n const showHeader = title != null \|\| showCompletion \|\| stepsLabel != null;\n const showFooter = leftIcon != null \|\| helperLeft != null \|\| helperRight != null;\n\n return (\n <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n {showHeader && (\n <div className=\"flex w-full items-end justify-between\">\n {title != null && (\n <p className=\"typography-~~semibold~~-~~body~~-sm text-content-primary\">{title}</p>\n )}\n {showCompletion && (\n <span\n className={cn(\n textColor,\n isSmall ? \"typography-~~bold~~-heading-sm\" : \"typography-~~bold~~-heading-xl\",\n )}\n >\n {Math.round(clampedValue)}%\n </span>\n )}\n {stepsLabel != null && (\n <span className=\"typography-~~regular~~-~~body~~-sm text-content-primary\">{stepsLabel}</span>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel ?? \"Progress\"}\n aria-valuenow={clampedValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={ariaValueText}\n className={cn(\"relative w-full rounded-full bg-neutral-alphas-50\", TRACK_HEIGHT[size])}\n >\n <div\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n barColor,\n )}\n style={{ width: `${clampedValue}%` }}\n />\n </div>\n\n {showFooter && (\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"flex items-center gap-1\">\n {leftIcon != null && (\n <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n {helperLeft != null && (\n <span className=\"typography-~~regular~~-~~body~~-sm text-content-primary\">\n {helperLeft}\n </span>\n )}\n </div>\n {helperRight != null && (\n <span className=\"typography-~~regular~~-~~body~~-sm text-content-primary\">{helperRight}</span>\n )}\n </div>\n )}\n </div>\n );\n },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,eAAgD;AAAA,EACpD,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,MAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAuB;AACjD,MAAI,SAAS,IAAK,QAAO;AACzB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEA,SAAS,oBAAoB,OAAuB;AAClD,MAAI,SAAS,IAAK,QAAO;AACzB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEA,SAAS,cACP,SACA,OACyC;AACzC,MAAI,YAAY;AACd,WAAO,EAAE,UAAU,uBAAuB,WAAW,wBAAA;AACvD,MAAI,YAAY;AACd,WAAO,EAAE,UAAU,4BAA4B,WAAW,6BAAA;AAC5D,SAAO,EAAE,UAAU,mBAAmB,KAAK,GAAG,WAAW,oBAAoB,KAAK,EAAA;AACpF;AAYO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,UAAU,SAAS;AACzB,UAAM,EAAE,UAAU,UAAA,IAAc,cAAc,SAAS,YAAY;AAEnE,UAAM,aAAa,SAAS,QAAQ,kBAAkB,cAAc;AACpE,UAAM,aAAa,YAAY,QAAQ,cAAc,QAAQ,eAAe;AAE5E,WACEC,2BAAAA,KAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,wBAAwB,IAAI,IAAI,GAAG,SAAS,GAAI,GAAG,OAC7E,UAAA;AAAA,MAAA,cACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,QAAA,SAAS,QACRE,2BAAAA,IAAC,KAAA,EAAE,WAAU,~~oDAAoD~~,UAAA,OAAM;AAAA,~~QAExE~~,kBACCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,GAAAA;AAAAA,cACT;AAAA,cACA,UAAU~~,+BAA+B~~;AAAA,YAAA;AAAA,~~YAG1C~~,UAAA;AAAA,cAAA,KAAK,MAAM,YAAY;AAAA,cAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG7B,cAAc,QACbC,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~mDAAmD~~,UAAA,WAAA,~~CAAW~~;AAAA,MAAA,~~GAElF~~;AAAA,MAGFA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,aAAa;AAAA,UACzB,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,kBAAgB;AAAA,UAChB,WAAWD,GAAAA,GAAG,qDAAqD,aAAa,IAAI,CAAC;AAAA,UAErF,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,OAAO,EAAE,OAAO,GAAG,YAAY,IAAA;AAAA,YAAI;AAAA,UAAA;AAAA,QACrC;AAAA,MAAA;AAAA,MAGD,cACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,UAAA,YAAY,QACXE,+BAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QACnE,UAAA,SAAA,CACH;AAAA,UAED,cAAc,QACbA,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~mDACb~~,UAAA,WAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,eAAe,QACdA,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~mDAAmD~~,UAAA,YAAA,~~CAAY~~;AAAA,MAAA,EAAA,~~CAEnF~~;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}
1	+ {"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). /\nexport type ProgressBarSize = \"default\" \| \"small\";\n/* Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. /\nexport type ProgressBarVariant = \"default\" \| \"generic\" \| \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /* Current progress value, clamped to 0–100. /\n value: number;\n /* Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" /\n size?: ProgressBarSize;\n /* Colour mode — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @default \"default\" /\n variant?: ProgressBarVariant;\n /* Title content shown at the top-left of the bar. /\n title?: React.ReactNode;\n /* Whether to display the completion percentage above the track. @default false /\n showCompletion?: boolean;\n /* Steps label shown at the top-right (e.g. `\"2/8 steps\"`). /\n stepsLabel?: React.ReactNode;\n /* Helper content at the bottom-left of the bar. /\n helperLeft?: React.ReactNode;\n /* Helper content at the bottom-right of the bar. /\n helperRight?: React.ReactNode;\n /* Icon shown at the bottom-left before the helper text. /\n leftIcon?: React.ReactNode;\n /* Accessible label for the `progressbar` role. @default \"Progress\" /\n ariaLabel?: string;\n /* Human-readable text alternative for the current value (e.g. \"Step 3 of 5\"). /\n ariaValueText?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n default: \"h-3\",\n small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n default: \"gap-3\",\n small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n if (value >= 100) return \"bg-success-content\";\n if (value >= 40) return \"bg-warning-content\";\n return \"bg-error-content\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-content\";\n if (value >= 40) return \"text-warning-content\";\n return \"text-error-content\";\n}\n\nfunction resolveColors(\n variant: ProgressBarVariant,\n value: number,\n): { barColor: string; textColor: string } {\n if (variant === \"neutral\")\n return { barColor: \"bg-content-tertiary\", textColor: \"text-content-tertiary\" };\n if (variant === \"generic\")\n return { barColor: \"bg-brand-primary-default\", textColor: \"text-brand-primary-default\" };\n return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\n}\n\n/\n A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n \n @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n (\n {\n value,\n size = \"default\",\n variant = \"default\",\n title,\n showCompletion = false,\n stepsLabel,\n helperLeft,\n helperRight,\n leftIcon,\n ariaLabel,\n ariaValueText,\n className,\n ...props\n },\n ref,\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const isSmall = size === \"small\";\n const { barColor, textColor } = resolveColors(variant, clampedValue);\n\n const showHeader = title != null \|\| showCompletion \|\| stepsLabel != null;\n const showFooter = leftIcon != null \|\| helperLeft != null \|\| helperRight != null;\n\n return (\n <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n {showHeader && (\n <div className=\"flex w-full items-end justify-between\">\n {title != null && (\n <p className=\"typography-description-12px-semibold text-content-primary\">{title}</p>\n )}\n {showCompletion && (\n <span\n className={cn(\n textColor,\n isSmall ? \"typography-header-heading-sm\" : \"typography-header-heading-xl\",\n )}\n >\n {Math.round(clampedValue)}%\n </span>\n )}\n {stepsLabel != null && (\n <span className=\"typography-description-12px-regular text-content-primary\">\n {stepsLabel}\n </span>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel ?? \"Progress\"}\n aria-valuenow={clampedValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={ariaValueText}\n className={cn(\"relative w-full rounded-full bg-neutral-alphas-50\", TRACK_HEIGHT[size])}\n >\n <div\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n barColor,\n )}\n style={{ width: `${clampedValue}%` }}\n />\n </div>\n\n {showFooter && (\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"flex items-center gap-1\">\n {leftIcon != null && (\n <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n {helperLeft != null && (\n <span className=\"typography-description-12px-regular text-content-primary\">\n {helperLeft}\n </span>\n )}\n </div>\n {helperRight != null && (\n <span className=\"typography-description-12px-regular text-content-primary\">\n {helperRight}\n </span>\n )}\n </div>\n )}\n </div>\n );\n },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,eAAgD;AAAA,EACpD,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,MAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAuB;AACjD,MAAI,SAAS,IAAK,QAAO;AACzB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEA,SAAS,oBAAoB,OAAuB;AAClD,MAAI,SAAS,IAAK,QAAO;AACzB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEA,SAAS,cACP,SACA,OACyC;AACzC,MAAI,YAAY;AACd,WAAO,EAAE,UAAU,uBAAuB,WAAW,wBAAA;AACvD,MAAI,YAAY;AACd,WAAO,EAAE,UAAU,4BAA4B,WAAW,6BAAA;AAC5D,SAAO,EAAE,UAAU,mBAAmB,KAAK,GAAG,WAAW,oBAAoB,KAAK,EAAA;AACpF;AAYO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,UAAU,SAAS;AACzB,UAAM,EAAE,UAAU,UAAA,IAAc,cAAc,SAAS,YAAY;AAEnE,UAAM,aAAa,SAAS,QAAQ,kBAAkB,cAAc;AACpE,UAAM,aAAa,YAAY,QAAQ,cAAc,QAAQ,eAAe;AAE5E,WACEC,2BAAAA,KAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,wBAAwB,IAAI,IAAI,GAAG,SAAS,GAAI,GAAG,OAC7E,UAAA;AAAA,MAAA,cACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,QAAA,SAAS,QACRE,2BAAAA,IAAC,KAAA,EAAE,WAAU,6DAA6D,UAAA,OAAM;AAAA,QAEjF,kBACCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,GAAAA;AAAAA,cACT;AAAA,cACA,UAAU,iCAAiC;AAAA,YAAA;AAAA,YAG5C,UAAA;AAAA,cAAA,KAAK,MAAM,YAAY;AAAA,cAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG7B,cAAc,QACbC,2BAAAA,IAAC,QAAA,EAAK,WAAU,4DACb,UAAA,WAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAGFA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,aAAa;AAAA,UACzB,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,kBAAgB;AAAA,UAChB,WAAWD,GAAAA,GAAG,qDAAqD,aAAa,IAAI,CAAC;AAAA,UAErF,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,OAAO,EAAE,OAAO,GAAG,YAAY,IAAA;AAAA,YAAI;AAAA,UAAA;AAAA,QACrC;AAAA,MAAA;AAAA,MAGD,cACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,UAAA,YAAY,QACXE,+BAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QACnE,UAAA,SAAA,CACH;AAAA,UAED,cAAc,QACbA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4DACb,UAAA,WAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,eAAe,QACdA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4DACb,UAAA,YAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}

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

@@ -36,7 +36,7 @@ const Radio = React__namespace.forwardRef(({ className, size = "default", label,
         "data-testid": "radio",
         "aria-describedby": helperText ? helperTextId : void 0,
         className: cn.cn(
-          "relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent",
+          "relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent",
           helperText && "mt-1 self-start"
         ),
         ...props,
@@ -50,7 +50,7 @@ const Radio = React__namespace.forwardRef(({ className, size = "default", label,
           htmlFor: inputId,
           className: cn.cn(
             "cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
-            size === "small" ? "typography-semibold-body-md" : "typography-semibold-body-lg"
+            size === "small" ? "typography-body-small-14px-semibold" : "typography-body-default-16px-semibold"
           ),
           children: label
         }
@@ -61,7 +61,7 @@ const Radio = React__namespace.forwardRef(({ className, size = "default", label,
           id: helperTextId,
           className: cn.cn(
             "text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
-            size === "small" ? "typography-semibold-body-md" : "typography-regular-body-sm"
+            size === "small" ? "typography-body-small-14px-semibold" : "typography-description-12px-regular"
           ),
           children: helperText
         }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface RadioProps\n extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"asChild\"> {\n /** Size variant controlling label and helper text typography. @default \"default\" /\n size?: \"default\" \| \"small\";\n /* Label text displayed next to the radio button. /\n label?: string;\n /* Descriptive text displayed below the label. /\n helperText?: string;\n}\n\n/\n A single radio option within a {@link RadioGroup}. Includes an optional label\n * and helper text.\n \n @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n * <Radio value=\"a\" label=\"Option A\" />\n * <Radio value=\"b\" label=\"Option B\" />\n * </RadioGroup>\n * ```\n */\nexport const Radio = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n RadioProps\n>(({ className, size = \"default\", label, helperText, id, ...props }, ref) => {\n const generatedId = React.useId();\n const inputId = id \|\| generatedId;\n const helperTextId = `${inputId}-helper`;\n\n return (\n <div className={cn(\"group inline-flex items-center gap-2\", className)}>\n <RadioGroupPrimitive.Item\n ref={ref}\n id={inputId}\n data-testid=\"radio\"\n aria-describedby={helperText ? helperTextId : undefined}\n className={cn(\n \"relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent\",\n helperText && \"mt-1 self-start\",\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator className=\"absolute inset-0 flex items-center justify-center\">\n <span className=\"size-2 rounded-full bg-content-primary group-has-disabled:bg-neutral-alphas-600\" />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n {(label \|\| helperText) && (\n <div className=\"flex flex-col gap-0.5\">\n {label && (\n <label\n htmlFor={inputId}\n className={cn(\n \"cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n size === \"small\" ? \"typography-~~semibold-~~body-md\" : \"typography-~~semibold-~~body-lg\",\n )}\n >\n {label}\n </label>\n )}\n {helperText && (\n <span\n id={helperTextId}\n className={cn(\n \"text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n size === \"small\" ? \"typography-~~semibold-~~body-md\" : \"typography-~~regular~~-~~body~~-sm\",\n )}\n >\n {helperText}\n </span>\n )}\n </div>\n )}\n </div>\n );\n});\n\nRadio.displayName = \"Radio\";\n"],"names":["React","cn","jsx","RadioGroupPrimitive","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,QAAQA,iBAAM,WAGzB,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,IAAI,GAAG,MAAA,GAAS,QAAQ;AAC3E,QAAM,cAAcA,iBAAM,MAAA;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,eAAe,GAAG,OAAO;AAE/B,yCACG,OAAA,EAAI,WAAWC,GAAAA,GAAG,wCAAwC,SAAS,GAClE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,+BAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,eAAY;AAAA,QACZ,oBAAkB,aAAa,eAAe;AAAA,QAC9C,WAAWF,GAAAA;AAAAA,UACT;AAAA,UACA,cAAc;AAAA,QAAA;AAAA,QAEf,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,IAACC,+BAAoB,WAApB,EAA8B,WAAU,qDACvC,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,kFAAA,CAAkF,EAAA,CACpG;AAAA,MAAA;AAAA,IAAA;AAAA,KAEA,SAAS,eACTE,2BAAAA,KAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,MAAA,SACCF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,SAAS,~~UAAU~~,~~gCAAgC~~;AAAA,UAAA;AAAA,~~UAGpD~~,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,cACCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,SAAS,~~UAAU~~,~~gCAAgC~~;AAAA,UAAA;AAAA,~~UAGpD~~,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,MAAM,cAAc;;"}
1	+ {"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface RadioProps\n extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"asChild\"> {\n /** Size variant controlling label and helper text typography. @default \"default\" /\n size?: \"default\" \| \"small\";\n /* Label text displayed next to the radio button. /\n label?: string;\n /* Descriptive text displayed below the label. /\n helperText?: string;\n}\n\n/\n A single radio option within a {@link RadioGroup}. Includes an optional label\n * and helper text.\n \n @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n * <Radio value=\"a\" label=\"Option A\" />\n * <Radio value=\"b\" label=\"Option B\" />\n * </RadioGroup>\n * ```\n */\nexport const Radio = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n RadioProps\n>(({ className, size = \"default\", label, helperText, id, ...props }, ref) => {\n const generatedId = React.useId();\n const inputId = id \|\| generatedId;\n const helperTextId = `${inputId}-helper`;\n\n return (\n <div className={cn(\"group inline-flex items-center gap-2\", className)}>\n <RadioGroupPrimitive.Item\n ref={ref}\n id={inputId}\n data-testid=\"radio\"\n aria-describedby={helperText ? helperTextId : undefined}\n className={cn(\n \"relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent\",\n helperText && \"mt-1 self-start\",\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator className=\"absolute inset-0 flex items-center justify-center\">\n <span className=\"size-2 rounded-full bg-content-primary group-has-disabled:bg-neutral-alphas-600\" />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n {(label \|\| helperText) && (\n <div className=\"flex flex-col gap-0.5\">\n {label && (\n <label\n htmlFor={inputId}\n className={cn(\n \"cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n size === \"small\"\n ? \"typography-body-small-14px-semibold\"\n : \"typography-body-default-16px-semibold\",\n )}\n >\n {label}\n </label>\n )}\n {helperText && (\n <span\n id={helperTextId}\n className={cn(\n \"text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n size === \"small\"\n ? \"typography-body-small-14px-semibold\"\n : \"typography-description-12px-regular\",\n )}\n >\n {helperText}\n </span>\n )}\n </div>\n )}\n </div>\n );\n});\n\nRadio.displayName = \"Radio\";\n"],"names":["React","cn","jsx","RadioGroupPrimitive","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,QAAQA,iBAAM,WAGzB,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,IAAI,GAAG,MAAA,GAAS,QAAQ;AAC3E,QAAM,cAAcA,iBAAM,MAAA;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,eAAe,GAAG,OAAO;AAE/B,yCACG,OAAA,EAAI,WAAWC,GAAAA,GAAG,wCAAwC,SAAS,GAClE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,+BAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,eAAY;AAAA,QACZ,oBAAkB,aAAa,eAAe;AAAA,QAC9C,WAAWF,GAAAA;AAAAA,UACT;AAAA,UACA,cAAc;AAAA,QAAA;AAAA,QAEf,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,IAACC,+BAAoB,WAApB,EAA8B,WAAU,qDACvC,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,kFAAA,CAAkF,EAAA,CACpG;AAAA,MAAA;AAAA,IAAA;AAAA,KAEA,SAAS,eACTE,2BAAAA,KAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,MAAA,SACCF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,SAAS,UACL,wCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,cACCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,SAAS,UACL,wCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,MAAM,cAAc;;"}

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

@@ -46,9 +46,9 @@ const TRIGGER_GAP = {
   "32": "gap-2"
 };
 const TRIGGER_TYPOGRAPHY = {
-  "48": "typography-regular-body-lg",
-  "40": "typography-regular-body-lg",
-  "32": "typography-regular-body-md"
+  "48": "typography-body-default-16px-regular",
+  "40": "typography-body-default-16px-regular",
+  "32": "typography-body-small-14px-regular"
 };
 const Select = React__namespace.forwardRef(
   ({
@@ -83,7 +83,7 @@ const Select = React__namespace.forwardRef(
             "label",
             {
               htmlFor: triggerId,
-              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
             }
           ),
@@ -130,7 +130,7 @@ const Select = React__namespace.forwardRef(
             {
               id: helperTextId,
               className: cn.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: bottomText
@@ -160,7 +160,7 @@ const SelectContent = React__namespace.forwardRef(
       collisionPadding,
       style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
       className: cn.cn(
-        "relative w-max min-w-(--radix-select-trigger-width) max-w-(--radix-select-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-bg-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
+        "relative w-max min-w-(--radix-select-trigger-width) max-w-(--radix-select-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-background-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
         "data-[state=closed]:animate-out data-[state=open]:animate-in",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -178,7 +178,7 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn.cn(
-      "typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none",
+      "typography-body-default-16px-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none",
       "focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
@@ -196,7 +196,10 @@ const SelectLabel = React__namespace.forwardRef(({ className, ...props }, ref) =
   SelectPrimitive__namespace.Label,
   {
     ref,
-    className: cn.cn("typography-semibold-body-sm px-3 py-1.5 text-content-secondary", className),
+    className: cn.cn(
+      "typography-description-12px-semibold px-3 py-1.5 text-content-secondary",
+      className
+    ),
     ...props
   }
 ));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. /\nexport type SelectSize = \"48\" \| \"40\" \| \"32\";\n\ntype SelectContextValue = {\n size: SelectSize;\n error: boolean;\n disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n size: \"48\",\n error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n \"48\": \"h-12\",\n \"40\": \"h-10\",\n \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n \"48\": \"px-4\",\n \"40\": \"px-4\",\n \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n \"48\": \"gap-3\",\n \"40\": \"gap-3\",\n \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n \"48\": \"typography-regular-body-lg\",\n \"40\": \"typography-regular-body-lg\",\n \"32\": \"typography-regular-body-md\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n /* Label text displayed above the trigger. Also used as the accessible name. /\n label?: string;\n /* Accessible name applied directly to the trigger button when no visible `label` is provided. /\n \"aria-label\"?: string;\n /* ID of an external element that labels the trigger button. /\n \"aria-labelledby\"?: string;\n /* Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. /\n helperText?: string;\n /* Height of the select field in pixels. @default \"48\" /\n size?: SelectSize;\n /* Whether the field is in an error state. @default false /\n error?: boolean;\n /* Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. /\n errorMessage?: string;\n /* Placeholder shown when no value is selected. /\n placeholder?: string;\n /* Icon element displayed at the left side of the trigger. /\n leftIcon?: React.ReactNode;\n /* Whether the field stretches to fill its container width. @default false /\n fullWidth?: boolean;\n /* Wraps the `className` of the outermost container div. /\n className?: string;\n /* HTML `id` applied to the trigger button. Auto-generated if omitted. /\n id?: string;\n}\n\n/\n A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n \n Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n \n @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n * <SelectContent>\n * <SelectItem value=\"us\">United States</SelectItem>\n * <SelectItem value=\"uk\">United Kingdom</SelectItem>\n * </SelectContent>\n * </Select>\n * ```\n /\nexport const Select = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Trigger>,\n SelectProps\n>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n placeholder,\n leftIcon,\n fullWidth = false,\n className,\n id,\n disabled,\n children,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const triggerId = id ?? generatedId;\n const helperTextId = `${triggerId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n\n return (\n <SelectContext.Provider value={{ size, error, disabled }}>\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={triggerId}\n className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n >\n {label}\n </label>\n )}\n\n <SelectPrimitive.Root disabled={disabled} {...props}>\n <SelectPrimitive.Trigger\n ref={ref}\n id={triggerId}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={bottomText ? helperTextId : undefined}\n aria-invalid={error \|\| undefined}\n className={cn(\n \"flex w-full cursor-pointer items-center justify-between rounded-sm border bg-neutral-alphas-50 outline-none motion-safe:transition-colors focus-visible:shadow-focus-ring\",\n TRIGGER_HEIGHT[size],\n TRIGGER_PADDING_X[size],\n TRIGGER_GAP[size],\n TRIGGER_TYPOGRAPHY[size],\n error ? \"border-error-content\" : \"border-transparent\",\n !disabled &&\n !error &&\n \"hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400\",\n disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <div className=\"flex min-w-0 items-center gap-2\">\n {leftIcon && (\n <span\n className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\"\n data-testid=\"left-icon\"\n >\n {leftIcon}\n </span>\n )}\n <span className=\"min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-secondary [&>[data-placeholder]]:opacity-40\">\n <SelectPrimitive.Value placeholder={placeholder} />\n </span>\n </div>\n\n <SelectPrimitive.Icon asChild>\n <ChevronDownIcon />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n\n {children}\n </SelectPrimitive.Root>\n\n {bottomText && (\n <p\n id={helperTextId}\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 {bottomText}\n </p>\n )}\n </div>\n </SelectContext.Provider>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/\n The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n /\nexport const SelectContent = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Content>,\n SelectContentProps\n>(\n (\n {\n className,\n children,\n position = \"popper\",\n sideOffset = 4,\n collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n style,\n ...props\n },\n ref,\n ) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n position={position}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n className={cn(\n \"relative w-max min-w-(--radix-select-trigger-width) max-w-(--radix-select-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-bg-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n className,\n )}\n {...props}\n >\n <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n {children}\n </SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n ),\n);\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/\n An individual option inside {@link SelectContent}.\n /\nexport const SelectItem = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Item>,\n SelectItemProps\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n \"typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none\",\n \"focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n <CheckIcon className=\"size-4 text-content-primary\" />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/* Props for {@link SelectGroup}. /\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/\n Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n /\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/\n A non-interactive label shown above a {@link SelectGroup}.\n /\nexport const SelectLabel = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Label>,\n SelectLabelProps\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\"typography-semibold-body-sm px-3 py-1.5 text-content-secondary\", className)}\n {...props}\n />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/* A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Separator>,\n SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-neutral-alphas-200\", className)}\n {...props}\n />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","CheckIcon"],"mappings":"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"}
1	+ {"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. /\nexport type SelectSize = \"48\" \| \"40\" \| \"32\";\n\ntype SelectContextValue = {\n size: SelectSize;\n error: boolean;\n disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n size: \"48\",\n error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n \"48\": \"h-12\",\n \"40\": \"h-10\",\n \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n \"48\": \"px-4\",\n \"40\": \"px-4\",\n \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n \"48\": \"gap-3\",\n \"40\": \"gap-3\",\n \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n \"48\": \"typography-body-default-16px-regular\",\n \"40\": \"typography-body-default-16px-regular\",\n \"32\": \"typography-body-small-14px-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n /* Label text displayed above the trigger. Also used as the accessible name. /\n label?: string;\n /* Accessible name applied directly to the trigger button when no visible `label` is provided. /\n \"aria-label\"?: string;\n /* ID of an external element that labels the trigger button. /\n \"aria-labelledby\"?: string;\n /* Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. /\n helperText?: string;\n /* Height of the select field in pixels. @default \"48\" /\n size?: SelectSize;\n /* Whether the field is in an error state. @default false /\n error?: boolean;\n /* Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. /\n errorMessage?: string;\n /* Placeholder shown when no value is selected. /\n placeholder?: string;\n /* Icon element displayed at the left side of the trigger. /\n leftIcon?: React.ReactNode;\n /* Whether the field stretches to fill its container width. @default false /\n fullWidth?: boolean;\n /* Wraps the `className` of the outermost container div. /\n className?: string;\n /* HTML `id` applied to the trigger button. Auto-generated if omitted. /\n id?: string;\n}\n\n/\n A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n \n Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n \n @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n * <SelectContent>\n * <SelectItem value=\"us\">United States</SelectItem>\n * <SelectItem value=\"uk\">United Kingdom</SelectItem>\n * </SelectContent>\n * </Select>\n * ```\n /\nexport const Select = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Trigger>,\n SelectProps\n>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n placeholder,\n leftIcon,\n fullWidth = false,\n className,\n id,\n disabled,\n children,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const triggerId = id ?? generatedId;\n const helperTextId = `${triggerId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n\n return (\n <SelectContext.Provider value={{ size, error, disabled }}>\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={triggerId}\n className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n >\n {label}\n </label>\n )}\n\n <SelectPrimitive.Root disabled={disabled} {...props}>\n <SelectPrimitive.Trigger\n ref={ref}\n id={triggerId}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={bottomText ? helperTextId : undefined}\n aria-invalid={error \|\| undefined}\n className={cn(\n \"flex w-full cursor-pointer items-center justify-between rounded-sm border bg-neutral-alphas-50 outline-none motion-safe:transition-colors focus-visible:shadow-focus-ring\",\n TRIGGER_HEIGHT[size],\n TRIGGER_PADDING_X[size],\n TRIGGER_GAP[size],\n TRIGGER_TYPOGRAPHY[size],\n error ? \"border-error-content\" : \"border-transparent\",\n !disabled &&\n !error &&\n \"hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400\",\n disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <div className=\"flex min-w-0 items-center gap-2\">\n {leftIcon && (\n <span\n className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\"\n data-testid=\"left-icon\"\n >\n {leftIcon}\n </span>\n )}\n <span className=\"min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-secondary [&>[data-placeholder]]:opacity-40\">\n <SelectPrimitive.Value placeholder={placeholder} />\n </span>\n </div>\n\n <SelectPrimitive.Icon asChild>\n <ChevronDownIcon />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n\n {children}\n </SelectPrimitive.Root>\n\n {bottomText && (\n <p\n id={helperTextId}\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 {bottomText}\n </p>\n )}\n </div>\n </SelectContext.Provider>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/\n The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n /\nexport const SelectContent = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Content>,\n SelectContentProps\n>(\n (\n {\n className,\n children,\n position = \"popper\",\n sideOffset = 4,\n collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n style,\n ...props\n },\n ref,\n ) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n position={position}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n className={cn(\n \"relative w-max min-w-(--radix-select-trigger-width) max-w-(--radix-select-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-background-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n className,\n )}\n {...props}\n >\n <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n {children}\n </SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n ),\n);\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/\n An individual option inside {@link SelectContent}.\n /\nexport const SelectItem = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Item>,\n SelectItemProps\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n \"typography-body-default-16px-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none\",\n \"focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n <CheckIcon className=\"size-4 text-content-primary\" />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/* Props for {@link SelectGroup}. /\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/\n Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n /\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/\n A non-interactive label shown above a {@link SelectGroup}.\n /\nexport const SelectLabel = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Label>,\n SelectLabelProps\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n \"typography-description-12px-semibold px-3 py-1.5 text-content-secondary\",\n className,\n )}\n {...props}\n />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/* A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n React.ComponentRef<typeof SelectPrimitive.Separator>,\n SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-neutral-alphas-200\", className)}\n {...props}\n />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","CheckIcon"],"mappings":"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"}

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

@@ -45,7 +45,7 @@ const Skeleton = React__namespace.forwardRef(
         ref,
         "aria-hidden": "true",
         className: cn.cn(
-          "block bg-[color-mix(in_srgb,var(--color-content-primary)_11%,var(--color-bg-primary))]",
+          "block bg-[color-mix(in_srgb,var(--color-content-primary)_11%,var(--color-background-primary))]",
           VARIANT_CLASSES[variant],
           variant === "text" && !height && !hasChildren && "h-[1em]",
           animation === "pulse" && "animate-pulse",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.cjs","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Shape variant of the skeleton placeholder. /\nexport type SkeletonVariant = \"text\" \| \"circular\" \| \"rectangular\" \| \"rounded\";\n\n/* Animation style of the skeleton. `false` disables animation. /\nexport type SkeletonAnimation = \"pulse\" \| \"wave\" \| false;\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {\n /* Shape variant of the skeleton.\n \n - `text` – a single line of text with slight vertical margin and rounded ends\n * - `circular` – a circle (width and height should match)\n * - `rectangular` – a sharp-cornered rectangle\n * - `rounded` – a rectangle with rounded corners\n \n @default \"text\"\n /\n variant?: SkeletonVariant;\n /* Animation style. Set to `false` to disable animation. @default \"pulse\" /\n animation?: SkeletonAnimation;\n /* Width of the skeleton. Accepts a CSS value (number is treated as `px`). /\n width?: number \| string;\n /* Height of the skeleton. Accepts a CSS value (number is treated as `px`). /\n height?: number \| string;\n}\n\nconst VARIANT_CLASSES: Record<SkeletonVariant, string> = {\n text: \"rounded my-0.5\",\n circular: \"rounded-full\",\n rectangular: \"\",\n rounded: \"rounded-xs\",\n};\n\n/\n A placeholder preview of content before data is loaded, reducing perceived\n * load time. Mirrors common MUI Skeleton props for easy migration.\n \n When used as a loading state, wrap the skeleton region with `aria-busy=\"true\"`\n * and provide an accessible label so screen readers can convey the loading state.\n \n @example\n * ```tsx\n * <Skeleton variant=\"text\" width={200} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * <Skeleton variant=\"rectangular\" width=\"100%\" height={120} />\n * ```\n /\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n (\n { className, variant = \"text\", animation = \"pulse\", width, height, style, children, ...props },\n ref,\n ) => {\n const hasChildren = React.Children.count(children) > 0;\n const sizeStyle: React.CSSProperties = {\n ...style,\n ...(width !== undefined && {\n width: typeof width === \"number\" ? `${width}px` : width,\n }),\n ...(height !== undefined && {\n height: typeof height === \"number\" ? `${height}px` : height,\n }),\n };\n\n return (\n <span\n ref={ref}\n aria-hidden=\"true\"\n className={cn(\n \"block bg-[color-mix(in_srgb,var(--color-content-primary)_11%,var(--color-bg-primary))]\",\n VARIANT_CLASSES[variant],\n variant === \"text\" && !height && !hasChildren && \"h-[1em]\",\n animation === \"pulse\" && \"animate-pulse\",\n animation === \"wave\" && \"fv-skeleton-wave\",\n hasChildren && \"relative overflow-hidden [&>]:invisible\",\n className,\n )}\n style={sizeStyle}\n {...props}\n >\n {children}\n </span>\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AACX;AAgBO,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,QAAQ,YAAY,SAAS,OAAO,QAAQ,OAAO,UAAU,GAAG,MAAA,GACvF,QACG;AACH,UAAM,cAAcA,iBAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,YAAiC;AAAA,MACrC,GAAG;AAAA,MACH,GAAI,UAAU,UAAa;AAAA,QACzB,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAAA,MAAA;AAAA,MAEpD,GAAI,WAAW,UAAa;AAAA,QAC1B,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAAA,MAAA;AAAA,IACvD;AAGF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,gBAAgB,OAAO;AAAA,UACvB,YAAY,UAAU,CAAC,UAAU,CAAC,eAAe;AAAA,UACjD,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,SAAS,cAAc;;"}
1	+ {"version":3,"file":"Skeleton.cjs","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Shape variant of the skeleton placeholder. /\nexport type SkeletonVariant = \"text\" \| \"circular\" \| \"rectangular\" \| \"rounded\";\n\n/* Animation style of the skeleton. `false` disables animation. /\nexport type SkeletonAnimation = \"pulse\" \| \"wave\" \| false;\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {\n /* Shape variant of the skeleton.\n \n - `text` – a single line of text with slight vertical margin and rounded ends\n * - `circular` – a circle (width and height should match)\n * - `rectangular` – a sharp-cornered rectangle\n * - `rounded` – a rectangle with rounded corners\n \n @default \"text\"\n /\n variant?: SkeletonVariant;\n /* Animation style. Set to `false` to disable animation. @default \"pulse\" /\n animation?: SkeletonAnimation;\n /* Width of the skeleton. Accepts a CSS value (number is treated as `px`). /\n width?: number \| string;\n /* Height of the skeleton. Accepts a CSS value (number is treated as `px`). /\n height?: number \| string;\n}\n\nconst VARIANT_CLASSES: Record<SkeletonVariant, string> = {\n text: \"rounded my-0.5\",\n circular: \"rounded-full\",\n rectangular: \"\",\n rounded: \"rounded-xs\",\n};\n\n/\n A placeholder preview of content before data is loaded, reducing perceived\n * load time. Mirrors common MUI Skeleton props for easy migration.\n \n When used as a loading state, wrap the skeleton region with `aria-busy=\"true\"`\n * and provide an accessible label so screen readers can convey the loading state.\n \n @example\n * ```tsx\n * <Skeleton variant=\"text\" width={200} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * <Skeleton variant=\"rectangular\" width=\"100%\" height={120} />\n * ```\n /\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n (\n { className, variant = \"text\", animation = \"pulse\", width, height, style, children, ...props },\n ref,\n ) => {\n const hasChildren = React.Children.count(children) > 0;\n const sizeStyle: React.CSSProperties = {\n ...style,\n ...(width !== undefined && {\n width: typeof width === \"number\" ? `${width}px` : width,\n }),\n ...(height !== undefined && {\n height: typeof height === \"number\" ? `${height}px` : height,\n }),\n };\n\n return (\n <span\n ref={ref}\n aria-hidden=\"true\"\n className={cn(\n \"block bg-[color-mix(in_srgb,var(--color-content-primary)_11%,var(--color-background-primary))]\",\n VARIANT_CLASSES[variant],\n variant === \"text\" && !height && !hasChildren && \"h-[1em]\",\n animation === \"pulse\" && \"animate-pulse\",\n animation === \"wave\" && \"fv-skeleton-wave\",\n hasChildren && \"relative overflow-hidden [&>]:invisible\",\n className,\n )}\n style={sizeStyle}\n {...props}\n >\n {children}\n </span>\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AACX;AAgBO,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,QAAQ,YAAY,SAAS,OAAO,QAAQ,OAAO,UAAU,GAAG,MAAA,GACvF,QACG;AACH,UAAM,cAAcA,iBAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,YAAiC;AAAA,MACrC,GAAG;AAAA,MACH,GAAI,UAAU,UAAa;AAAA,QACzB,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAAA,MAAA;AAAA,MAEpD,GAAI,WAAW,UAAa;AAAA,QAC1B,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAAA,MAAA;AAAA,IACvD;AAGF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,gBAAgB,OAAO;AAAA,UACvB,YAAY,UAAU,CAAC,UAAU,CAAC,eAAe;AAAA,UACjD,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,SAAS,cAAc;;"}

package/dist/cjs/components/Slider/SliderLayout.cjs CHANGED Viewed

@@ -12,15 +12,22 @@ function SliderLayout({
 }) {
   if (labelPosition === "left") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-semibold-body-lg shrink-0 text-content-primary", children: label }),
-      minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-content-secondary", children: minLabel }),
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: labelId,
+          className: "typography-body-default-16px-semibold shrink-0 text-content-primary",
+          children: label
+        }
+      ),
+      minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-regular shrink-0 text-content-secondary", children: minLabel }),
       children,
-      maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-content-secondary", children: maxLabel })
+      maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-regular shrink-0 text-content-secondary", children: maxLabel })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-3", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-semibold-body-lg text-content-primary", children: label }),
-    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start justify-between typography-regular-body-md text-content-secondary", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-body-default-16px-semibold text-content-primary", children: label }),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start justify-between typography-body-small-14px-regular text-content-secondary", children: [
       minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: minLabel }),
       maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: maxLabel })
     ] }),