@rovula/ui 0.1.7 → 0.1.8

package/dist/components/OtpInput/OtpInputGroup.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "@/utils/cn";
+import { OtpInput } from "./OtpInput";
+export const OtpInputGroup = React.forwardRef((_a, ref) => {
+    var { id, label, required = false, helperText, error = false, errorMessage, keepFooterSpace = true, labelClassName, messageClassName, className } = _a, otpProps = __rest(_a, ["id", "label", "required", "helperText", "error", "errorMessage", "keepFooterSpace", "labelClassName", "messageClassName", "className"]);
+    const isInvalid = Boolean(error || errorMessage);
+    const message = isInvalid ? errorMessage : helperText;
+    return (_jsxs("div", { className: cn("inline-flex w-full flex-col gap-2", className), children: [label && (_jsxs("label", { htmlFor: id, className: cn("typography-overline text-input-default-text", isInvalid && "text-input-error", labelClassName), children: [label, required && _jsx("span", { className: "ml-1 text-input-error", children: "*" })] })), _jsx(OtpInput, Object.assign({}, otpProps, { ref: ref, invalid: isInvalid })), (message || keepFooterSpace) && (_jsx("div", { className: cn("typography-small2 min-h-[18px]", isInvalid ? "text-input-error" : "text-text-g-contrast-medium", messageClassName), role: isInvalid ? "alert" : undefined, children: message || " " }))] }));
+});
+OtpInputGroup.displayName = "OtpInputGroup";
+export default OtpInputGroup;

package/dist/components/OtpInput/index.js

@@ -0,0 +1,3 @@
+export { OtpInput } from "./OtpInput";
+export { OtpInputGroup } from "./OtpInputGroup";
+export { default } from "./OtpInput";

package/dist/components/PasswordInput/PasswordInput.stories.js

@@ -8,7 +8,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/Popover/Popover.js

@@ -18,7 +18,7 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef((_a, ref) => {
     var { className, align = "center", sideOffset = 4 } = _a, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-surface border-none overflow-hidden p-0 text-surface-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-bg-bg1 border-none overflow-hidden p-0 text-common-black shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/RadioGroup/RadioGroup.js

@@ -22,7 +22,7 @@ const RadioGroupItem = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square box-border size-4 cursor-pointer rounded-full border border-function-default-solid text-function-default-solid", "hover:border-function-default-hover", "focus:outline-none", 
         // Disabled state styles
-        "data-[disabled]:!border-state-disable-solid data-[disabled]:!fill-state-disable-solid data-[disabled]:!cursor-not-allowed data-[disabled]:!pointer-events-none data-[disabled]:!text-state-disable-solid", 
+        "data-[disabled]:!border-state-disable-outline data-[disabled]:!fill-state-disable-outline data-[disabled]:!cursor-not-allowed data-[disabled]:!pointer-events-none data-[disabled]:!text-state-disable-outline", "[&[data-disabled][data-state=checked]]:!border-state-disable-solid [&[data-disabled][data-state=checked]]:!text-state-disable-solid", 
         // Checked state styles
         "data-[state=checked]:border-function-active-solid data-[state=checked]:text-function-active-solid", "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:text-function-active-hover", className) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "fill-current text-current", children: _jsx("circle", { cx: "5", cy: "5", r: "5", fill: "current" }) }) }) })));
 });

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -9,7 +9,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -53,5 +53,5 @@ const radioPreviewRows = [
     { label: "Checked - Disable", checked: true, disabled: true },
 ];
 export const FigmaPreview = {
-    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6", children: radioPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[160px_16px] items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium text-text-white", children: row.label }), _jsx(RadioGroup, { defaultValue: row.checked ? "option" : undefined, disabled: row.disabled, children: _jsx(RadioGroupItem, { value: "option", className: row.className }) })] }, row.label))) }) })),
+    render: () => (_jsx("div", { className: "bg-bg-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-bg-stroke1 bg-bg-bg1 p-6", children: radioPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[160px_16px] items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium text-text-contrast-max", children: row.label }), _jsx(RadioGroup, { defaultValue: row.checked ? "option" : undefined, disabled: row.disabled, children: _jsx(RadioGroupItem, { value: "option", className: row.className }) })] }, row.label))) }) })),
 };

package/dist/components/Search/Search.js

@@ -1,7 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Dropdown from "../Dropdown/Dropdown";
 const Search = forwardRef((props, ref) => {
-    return (_jsx(Dropdown, Object.assign({ label: "Search" }, props, { ref: ref, keepCloseIconOnValue: true, hasClearIcon: true, hasSearchIcon: true, endIcon: null, filterMode: true, isFloatingLabel: false })));
+    const { label = "Search", required = false } = props, restProps = __rest(props, ["label", "required"]);
+    return (_jsx(Dropdown, Object.assign({ label: label, required: required }, restProps, { ref: ref, keepCloseIconOnValue: true, hasClearIcon: true, hasSearchIcon: true, endIcon: null, filterMode: true, isFloatingLabel: false, segmentedInput: false })));
 });
 export { Search };

package/dist/components/Search/Search.stories.js

@@ -8,7 +8,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/Slider/Slider.js

@@ -16,7 +16,7 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "@/utils/cn";
 const Slider = React.forwardRef((_a, ref) => {
     var { className, trackClassName, rangeClassName, thumbClassName, thumbStyle, trackStyle, rangeStyle } = _a, props = __rest(_a, ["className", "trackClassName", "rangeClassName", "thumbClassName", "thumbStyle", "trackStyle", "rangeStyle"]);
-    return (_jsxs(SliderPrimitive.Root, Object.assign({ ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className) }, props, { children: [_jsx(SliderPrimitive.Track, { className: cn("relative h-2 w-full grow overflow-hidden rounded-full bg-grey-50", trackClassName), style: trackStyle, children: _jsx(SliderPrimitive.Range, { className: cn("absolute h-full bg-primary", rangeClassName), style: rangeStyle }) }), _jsx(SliderPrimitive.Thumb, { className: cn("block h-5 w-5 cursor-pointer rounded-full border-[3px] border-primary bg-background outline-none ring-0 transition-colors disabled:pointer-events-none disabled:opacity-50", thumbClassName), style: thumbStyle })] })));
+    return (_jsxs(SliderPrimitive.Root, Object.assign({ ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className) }, props, { children: [_jsx(SliderPrimitive.Track, { className: cn("relative h-2 w-full grow overflow-hidden rounded-full bg-grey-50", trackClassName), style: trackStyle, children: _jsx(SliderPrimitive.Range, { className: cn("absolute h-full bg-primary", rangeClassName), style: rangeStyle }) }), _jsx(SliderPrimitive.Thumb, { className: cn("block h-5 w-5 cursor-pointer rounded-full border-[3px] border-primary bg-bg-bg1 outline-none ring-0 transition-colors disabled:pointer-events-none disabled:opacity-50", thumbClassName), style: thumbStyle })] })));
 });
 Slider.displayName = SliderPrimitive.Root.displayName;
 export { Slider };

package/dist/components/Slider/Slider.stories.js

@@ -11,7 +11,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-background", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg1", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -38,15 +38,15 @@ export const GradientColor = {
         const [empty, setEmpty] = useState([50]);
         const [rainbow, setRainbow] = useState([50]);
         const [darkRed, setDarkRed] = useState([50]);
-        return (_jsxs("div", { className: "w-[400px] p-6 space-y-8 rounded-md shadow-lg bg-surface", children: [_jsx(Slider, { value: exposure, onValueChange: setExposure, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-black to-white", rangeClassName: "bg-unset", thumbClassName: "bg-white border border-white shadow", thumbStyle: {
+        return (_jsxs("div", { className: "w-[400px] p-6 space-y-8 rounded-md shadow-lg bg-bg-bg1", children: [_jsx(Slider, { value: exposure, onValueChange: setExposure, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-common-black to-common-white", rangeClassName: "bg-unset", thumbClassName: "bg-common-white border border-common-white shadow", thumbStyle: {
                         filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
-                    }, min: 0, max: 100, step: 1 }), _jsx(Slider, { value: empty, onValueChange: setEmpty, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24", rangeClassName: "bg-unset", thumbClassName: "bg-white border border-white shadow", thumbStyle: {
+                    }, min: 0, max: 100, step: 1 }), _jsx(Slider, { value: empty, onValueChange: setEmpty, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24", rangeClassName: "bg-unset", thumbClassName: "bg-common-white border border-common-white shadow", thumbStyle: {
                         filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
                     }, min: 0, max: 100, step: 1 }), _jsx(Slider, { value: rainbow, onValueChange: setRainbow, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24", trackStyle: {
                         backgroundImage: "linear-gradient(90deg, #F00 0%, #FF8502 11.54%, #F2FF05 23.08%, #06F90F 35.58%, #00E6FF 48.56%, #0404FF 61.54%, #AB02FF 74.52%, #FF069E 87.5%, #FF0408 100%)",
-                    }, rangeClassName: "bg-unset", thumbClassName: "bg-white border border-white shadow", thumbStyle: {
+                    }, rangeClassName: "bg-unset", thumbClassName: "bg-common-white border border-common-white shadow", thumbStyle: {
                         filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
-                    }, min: 0, max: 100, step: 1 }), _jsx(Slider, { value: darkRed, onValueChange: setDarkRed, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-[#848484] to-[#A00202]", rangeClassName: "bg-unset", thumbClassName: "bg-white border border-white shadow", thumbStyle: {
+                    }, min: 0, max: 100, step: 1 }), _jsx(Slider, { value: darkRed, onValueChange: setDarkRed, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-[#848484] to-[#A00202]", rangeClassName: "bg-unset", thumbClassName: "bg-common-white border border-common-white shadow", thumbStyle: {
                         filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
                     }, min: 0, max: 100, step: 1 })] }));
     },

package/dist/components/Switch/Switch.stories.js

@@ -10,7 +10,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -33,5 +33,5 @@ const switchPreviewRows = [
     { label: "Off - Disable", checked: false, disabled: true },
 ];
 export const FigmaPreview = {
-    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[300px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6", children: switchPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[1fr_40px] items-center gap-6", children: [_jsx("span", { className: "text-sm font-medium text-text-white", children: row.label }), _jsx(Switch, { checked: row.checked, disabled: row.disabled, forceHover: row.forceHover })] }, row.label))) }) })),
+    render: () => (_jsx("div", { className: "bg-bg-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[300px] flex-col gap-4 rounded-lg border border-bg-stroke1 bg-bg-bg1 p-6", children: switchPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[1fr_40px] items-center gap-6", children: [_jsx("span", { className: "text-sm font-medium text-text-contrast-max", children: row.label }), _jsx(Switch, { checked: row.checked, disabled: row.disabled, forceHover: row.forceHover })] }, row.label))) }) })),
 };

package/dist/components/Table/Table.js

@@ -29,27 +29,27 @@ const TableBody = React.forwardRef((_a, ref) => {
 TableBody.displayName = "TableBody";
 const TableFooter = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("tfoot", Object.assign({ ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className) }, props)));
+    return (_jsx("tfoot", Object.assign({ ref: ref, className: cn("border-t bg-transparent-grey2-8 font-medium [&>tr]:last:border-b-0", className) }, props)));
 });
 TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("tr", Object.assign({ ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-grey-20", className) }, props)));
+    return (_jsx("tr", Object.assign({ ref: ref, className: cn("border-b transition-colors hover:bg-transparent-grey2-8 data-[state=selected]:bg-grey-20", className) }, props)));
 });
 TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("th", Object.assign({ ref: ref, className: cn(" h-12 py-3 px-6 text-left align-middle typography-body2 text-text-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
+    return (_jsx("th", Object.assign({ ref: ref, className: cn(" h-12 py-3 px-6 text-left align-middle typography-body2 text-text-g-contrast-low [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
 });
 TableHead.displayName = "TableHead";
 const TableCell = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("td", Object.assign({ ref: ref, className: cn(" py-3 px-6 text-left align-middle  typography-body3 text-text-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
+    return (_jsx("td", Object.assign({ ref: ref, className: cn(" py-3 px-6 text-left align-middle  typography-body3 text-text-g-contrast-low [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
 });
 TableCell.displayName = "TableCell";
 const TableCaption = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("caption", Object.assign({ ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className) }, props)));
+    return (_jsx("caption", Object.assign({ ref: ref, className: cn("mt-4 text-sm text-text-g-contrast-medium", className) }, props)));
 });
 TableCaption.displayName = "TableCaption";
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/components/Tabs/Tabs.js

@@ -5,8 +5,10 @@ import "./Tabs.css";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { Loading } from "@/index";
-const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, keepMounted = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabButtonActiveDisableClassName, tabButtonDisableClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
+const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = false, disabled = false, keepMounted = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabButtonActiveDisableClassName, tabButtonDisableClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
+    var _a;
     const [activeTab, setActiveTab] = useState(initialTab);
+    const [hoveredTab, setHoveredTab] = useState(null);
     const [sliderStyle, setSliderStyle] = useState({
         width: "0px",
         transform: "translateX(0px)",
@@ -70,11 +72,11 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
                                 justifyContent: tabMode === "justify" ? "stretch" : tabMode,
                             }, role: "tablist", children: [tabs.map((tab, index) => {
                                     var _a, _b, _c, _d, _e, _f, _g, _h;
-                                    return (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitle6", {
-                                            "text-foreground": index === activeTab,
-                                            "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
+                                    return (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("group relative flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0 typography-subtitle6", {
+                                            "text-text-contrast-max": index === activeTab,
+                                            "text-text-g-contrast-medium": index !== activeTab,
                                             // -- disabled
-                                            "text-state-disable-solid pointer-events-none": disabled || tab.disabled,
+                                            "text-state-disable-outline pointer-events-none": disabled || tab.disabled,
                                             [(_b = (_a = tab.disableClassName) !== null && _a !== void 0 ? _a : tabButtonDisableClassName) !== null && _b !== void 0 ? _b : ""]: disabled || tab.disabled,
                                             // --
                                             "text-state-disable-outline": index === activeTab && (disabled || tab.disabled),
@@ -88,10 +90,11 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
                                         }), onClick: () => {
                                             setActiveTab(index);
                                             onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
-                                        }, children: [(keepIconSpace || tab.startTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.isLoading ? _jsx(Loading, {}) : tab.startTabContent })), tab.label, (keepIconSpace || tab.endTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.endTabContent }))] }, index));
-                                }), _jsx("div", { className: cn(`absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`, {
-                                        "bg-state-disable-solid": disabled,
-                                    }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-foreground", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: tabs.map((tab, idx) => {
+                                        }, onMouseEnter: () => setHoveredTab(index), onMouseLeave: () => setHoveredTab(null), children: [(keepIconSpace || tab.startTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-current [&_svg]:text-current", children: tab.isLoading ? (_jsx(Loading, { size: 12 })) : (tab.startTabContent) })), tab.label, (keepIconSpace || tab.endTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-current [&_svg]:text-current", children: tab.endTabContent })), !disabled && !tab.disabled && index !== activeTab && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] rounded-[1px] bg-function-default-hover opacity-0 transition-opacity duration-150 group-hover:opacity-100" }))] }, index));
+                                }), _jsx("div", { className: cn("absolute left-0 bottom-0 h-[2px] rounded-[1px] bg-function-active-solid transition-all duration-300 ease-in-out", {
+                                        hidden: disabled || ((_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.disabled),
+                                        "bg-function-active-hover": hoveredTab === activeTab && !disabled,
+                                    }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-text-g-contrast-high", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: tabs.map((tab, idx) => {
                     var _a;
                     if (!keepMounted && activeTab !== idx) {
                         return null;

package/dist/components/Tabs/Tabs.stories.js

@@ -15,7 +15,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/Text/Text.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@/utils/cn";
 import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
-const textVariants = cva(["text-foreground"], {
+const textVariants = cva(["text-common-black"], {
     variants: {
         color: {
             primary: "text-primary",

package/dist/components/Text/Text.stories.js

@@ -10,7 +10,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full  bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full  bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/TextArea/TextArea.stories.js

@@ -8,7 +8,7 @@ const meta = {
     },
     tags: ["autodocs"],
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex h-screen w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex h-screen w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
     argTypes: {
         size: {

package/dist/components/TextArea/TextArea.styles.js

@@ -52,17 +52,17 @@ export const textareaVariant = cva([
         {
             hasClearIcon: true,
             size: "sm",
-            class: "focus:pe-6",
+            className: "focus:pe-6",
         },
         {
             hasClearIcon: true,
             size: "md",
-            class: "focus:pe-8",
+            className: "focus:pe-8",
         },
         {
             hasClearIcon: true,
             size: "lg",
-            class: "focus:pe-10",
+            className: "focus:pe-10",
         },
     ],
     defaultVariants: {

package/dist/components/TextInput/TextInput.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, } from "react";
-import { helperTextVariant, iconActionVariant, inlineEndIconWrapperVariant, inlineStartIconWrapperVariant, inputVariant, labelVariant, segmentedIconWrapperVariant, } from "./TextInput.styles";
+import { helperTextVariant, iconActionVariant, inlineEndIconWrapperVariant, inlineStartIconWrapperVariant, inputVariant, labelVariant, searchIconVariant, segmentedIconWrapperVariant, } from "./TextInput.styles";
 import { CircleAlert, CircleX, Search, } from "lucide-react";
 import { cn } from "@/utils/cn";
 export const TextInput = forwardRef((_a, ref) => {
@@ -65,6 +65,7 @@ export const TextInput = forwardRef((_a, ref) => {
         size,
     });
     const iconActionClassname = iconActionVariant({ size });
+    const searchIconClassname = searchIconVariant({ size });
     // TODO wait for clearify aboutm start,end, search and clearIcon with iconMode
     const startSegmentIconWrapperClassname = segmentedIconWrapperVariant({
         size,
@@ -146,7 +147,7 @@ export const TextInput = forwardRef((_a, ref) => {
         renderEndIcon,
         handleOnClickRightSectionIcon,
     ]);
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(iconActionClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(searchIconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
                         }, children: _jsx(CircleX, { className: cn(iconActionClassname, 
                             // 'fill-none stroke-current',

package/dist/components/TextInput/TextInput.stories.js

@@ -13,7 +13,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex h-full w-full bg-[var(--base-color-popup)] ", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex h-full w-full bg-modal-surface", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -78,7 +78,7 @@ export const CustomIcon = {
 };
 const KeepFooterSpaceDemo = () => {
     const [hasError, setHasError] = useState(false);
-    return (_jsxs("div", { className: "flex flex-col gap-8 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-grey-dark", children: ["Use ", _jsx("code", { children: "keepFooterSpace" }), " to always reserve space for the footer/helper area, preventing layout shift when an error or helper text is shown or hidden."] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: hasError, onChange: (e) => setHasError(e.target.checked) }), "Show error message"] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-grey-dark", children: "With keepFooterSpace (layout stays stable)" }), _jsx(TextInput, { id: "with-keep", label: "Email", keepFooterSpace: true, size: "lg", error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-grey-dark", children: "Without keepFooterSpace (layout shifts when error appears)" }), _jsx(TextInput, { id: "no-keep", label: "Email", size: "lg", error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsx("div", {})] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-8 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: ["Use ", _jsx("code", { children: "keepFooterSpace" }), " to always reserve space for the footer/helper area, preventing layout shift when an error or helper text is shown or hidden."] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: hasError, onChange: (e) => setHasError(e.target.checked) }), "Show error message"] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-g-contrast-low", children: "With keepFooterSpace (layout stays stable)" }), _jsx(TextInput, { id: "with-keep", label: "Email", keepFooterSpace: true, size: "lg", error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-g-contrast-low", children: "Without keepFooterSpace (layout shifts when error appears)" }), _jsx(TextInput, { id: "no-keep", label: "Email", size: "lg", error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsx("div", {})] })] })] }));
 };
 export const KeepFooterSpace = {
     args: {
@@ -92,7 +92,7 @@ const FeedbackApiDemo = () => {
     const [legacyError, setLegacyError] = useState(false);
     const [legacyWarning, setLegacyWarning] = useState(false);
     const [useStatusOverride, setUseStatusOverride] = useState(false);
-    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-2xl", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-text-grey-dark", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: legacyError, onChange: (e) => setLegacyError(e.target.checked) }), "legacy error"] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: legacyWarning, onChange: (e) => setLegacyWarning(e.target.checked) }), "legacy warning"] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: useStatusOverride, onChange: (e) => setUseStatusOverride(e.target.checked) }), "status override = warning"] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-text-grey-dark", children: "Legacy API (error / warning)" }), _jsx(TextInput, { id: "legacy-feedback", label: "Email", helperText: "We will never share your email.", keepFooterSpace: true, error: legacyError, errorMessage: legacyError ? "Invalid email format." : undefined, warning: legacyWarning, warningMessage: legacyWarning ? "Please verify this email." : undefined })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-text-grey-dark", children: "New API (status + message)" }), _jsx(TextInput, { id: "status-feedback", label: "Email", helperText: "We will never share your email.", keepFooterSpace: true, status: useStatusOverride ? "warning" : "default", error: legacyError, errorMessage: legacyError ? "Invalid email format." : undefined, warning: legacyWarning, warningMessage: useStatusOverride
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-2xl", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-text-g-contrast-low", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: legacyError, onChange: (e) => setLegacyError(e.target.checked) }), "legacy error"] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: legacyWarning, onChange: (e) => setLegacyWarning(e.target.checked) }), "legacy warning"] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: useStatusOverride, onChange: (e) => setUseStatusOverride(e.target.checked) }), "status override = warning"] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-text-g-contrast-low", children: "Legacy API (error / warning)" }), _jsx(TextInput, { id: "legacy-feedback", label: "Email", helperText: "We will never share your email.", keepFooterSpace: true, error: legacyError, errorMessage: legacyError ? "Invalid email format." : undefined, warning: legacyWarning, warningMessage: legacyWarning ? "Please verify this email." : undefined })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-text-g-contrast-low", children: "New API (status + message)" }), _jsx(TextInput, { id: "status-feedback", label: "Email", helperText: "We will never share your email.", keepFooterSpace: true, status: useStatusOverride ? "warning" : "default", error: legacyError, errorMessage: legacyError ? "Invalid email format." : undefined, warning: legacyWarning, warningMessage: useStatusOverride
                                     ? "Status explicitly sets warning."
                                     : legacyWarning
                                         ? "Please verify this email."

package/dist/components/TextInput/TextInput.styles.js

@@ -13,7 +13,7 @@ export const inputVariant = cva([
         },
         rounded: {
             none: "rounded-none",
-            normal: "rounded-md",
+            normal: "",
             full: "rounded-full",
         },
         variant: {
@@ -54,6 +54,16 @@ export const inputVariant = cva([
         },
     },
     compoundVariants: [
+        {
+            rounded: "normal",
+            size: "sm",
+            className: "rounded-sm",
+        },
+        {
+            rounded: "normal",
+            size: ["md", "lg"],
+            className: "rounded-md",
+        },
         {
             variant: "underline",
             className: "rounded-none",
@@ -61,62 +71,62 @@ export const inputVariant = cva([
         {
             hasClearIcon: true,
             size: "sm",
-            class: "focus:pe-6",
+            className: "focus:pe-6",
         },
         {
             hasClearIcon: true,
             size: "md",
-            class: "focus:pe-8",
+            className: "focus:pe-8",
         },
         {
             hasClearIcon: true,
             size: "lg",
-            class: "focus:pe-10",
+            className: "focus:pe-10",
         },
         {
             hasSearchIcon: true,
             size: "sm",
-            class: "!ps-6",
+            className: "!ps-[26px]",
         },
         {
             hasSearchIcon: true,
             size: "md",
-            class: "!ps-9",
+            className: "!ps-[40px]",
         },
         {
             hasSearchIcon: true,
             size: "lg",
-            class: "!ps-11",
+            className: "!ps-[52px]",
         },
         {
             leftSectionIcon: true,
             size: "sm",
-            class: "!ps-[38px]",
+            className: "!ps-[38px]",
         },
         {
             leftSectionIcon: true,
             size: "md",
-            class: "!ps-[46px]",
+            className: "!ps-[46px]",
         },
         {
             leftSectionIcon: true,
             size: "lg",
-            class: "!ps-[72px]",
+            className: "!ps-[72px]",
         },
         {
             rightSectionIcon: true,
             size: "sm",
-            class: "!pe-[38px]",
+            className: "!pe-[38px]",
         },
         {
             rightSectionIcon: true,
             size: "md",
-            class: "!pe-[46px]",
+            className: "!pe-[46px]",
         },
         {
             rightSectionIcon: true,
             size: "lg",
-            class: "!pe-[72px]",
+            className: "!pe-[72px]",
         },
     ],
     defaultVariants: {
@@ -216,7 +226,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "sm",
             className: [
-                "left-6 -top-1.5 typography-label2 bg-input-label-bg",
+                "left-[26px] -top-1.5 typography-label2 bg-input-label-bg",
                 "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label2",
             ],
@@ -226,7 +236,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "md",
             className: [
-                "left-9 -top-1.5 typography-label1 bg-input-label-bg",
+                "left-[40px] -top-1.5 typography-label1 bg-input-label-bg",
                 "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
@@ -236,7 +246,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "lg",
             className: [
-                "left-11 -top-1.5 typography-label1 bg-input-label-bg",
+                "left-[52px] -top-1.5 typography-label1 bg-input-label-bg",
                 "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
@@ -247,7 +257,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "sm",
             className: [
-                "left-6 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+                "left-[26px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
             ],
         },
         {
@@ -255,7 +265,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "md",
             className: [
-                "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
+                "left-[40px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
             ],
         },
         {
@@ -263,7 +273,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "lg",
             className: [
-                "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
+                "left-[52px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
             ],
         },
         // -------- hasLeftSectionIcon ------
@@ -407,6 +417,18 @@ export const iconActionVariant = cva(["cursor-pointer z-50 select-none"], {
         size: "md",
     },
 });
+export const searchIconVariant = cva(["cursor-pointer z-50 select-none"], {
+    variants: {
+        size: {
+            sm: "size-[14px]",
+            md: "size-5",
+            lg: "size-6",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
 export const segmentedIconWrapperVariant = cva([
     "cursor-pointer",
     "absolute items-center justify-center flex",

package/dist/components/Toast/Toast.js

@@ -36,7 +36,9 @@ const ToastAction = React.forwardRef((_a, ref) => {
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 const ToastClose = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Close, Object.assign({ ref: ref, className: cn("-mr-2 self-center text-grey-light", className), "toast-close": "" }, props, { asChild: true, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(Icon, { type: "heroicons", name: "xmark" }) }) })));
+    return (_jsx(ToastPrimitives.Close, Object.assign({ ref: ref, 
+        // className={cn("-mr-2 self-center text-text-g-contrast-high", className)}
+        className: cn("self-center text-text-g-contrast-high", className), "toast-close": "" }, props, { asChild: true, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(Icon, { type: "heroicons", name: "xmark" }) }) })));
 });
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 const ToastTitle = React.forwardRef((_a, ref) => {
@@ -46,7 +48,7 @@ const ToastTitle = React.forwardRef((_a, ref) => {
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitle4 text-grey-light", className) }, props)));
+    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitle4 text-text-g-contrast-high", className) }, props)));
 });
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

package/dist/components/Toast/Toast.stories.js

@@ -17,7 +17,7 @@ const meta = {
         },
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "flex max-h-screen w-full bg-white p-4", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "flex max-h-screen w-full bg-bg-bg1 p-4", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;