@rovula/ui 0.1.6 → 0.1.8

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef, } from "react";
+import { cn } from "@/utils/cn";
+const sanitizeChars = (raw, charPattern, maxLength) => {
+    const chars = Array.from(raw).filter((char) => charPattern.test(char));
+    return chars.slice(0, maxLength);
+};
+export const OtpInput = forwardRef(({ value, onChange, onBlur, onComplete, length = 6, disabled = false, invalid = false, autoFocus = false, inputMode = "numeric", charPattern = /^\d$/, className, inputClassName, }, ref) => {
+    const inputRefs = useRef([]);
+    const containerRef = useRef(null);
+    const slots = useMemo(() => {
+        const normalizedValue = value || "";
+        return Array.from({ length }, (_, index) => normalizedValue[index] || "");
+    }, [length, value]);
+    useImperativeHandle(ref, () => inputRefs.current[0], []);
+    const setCode = (nextSlots) => {
+        const nextValue = nextSlots.join("");
+        onChange(nextValue);
+        if (onComplete && nextSlots.every((slot) => slot !== "")) {
+            onComplete(nextValue);
+        }
+    };
+    const focusInput = (index) => {
+        var _a, _b;
+        const clamped = Math.max(0, Math.min(length - 1, index));
+        (_a = inputRefs.current[clamped]) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = inputRefs.current[clamped]) === null || _b === void 0 ? void 0 : _b.select();
+    };
+    const handleInputChange = (index, rawValue) => {
+        if (disabled)
+            return;
+        if (!rawValue) {
+            const nextSlots = [...slots];
+            nextSlots[index] = "";
+            setCode(nextSlots);
+            return;
+        }
+        const incomingChars = sanitizeChars(rawValue, charPattern, length);
+        if (!incomingChars.length)
+            return;
+        const nextSlots = [...slots];
+        let cursor = index;
+        incomingChars.forEach((char) => {
+            if (cursor < length) {
+                nextSlots[cursor] = char;
+                cursor += 1;
+            }
+        });
+        setCode(nextSlots);
+        if (cursor < length) {
+            focusInput(cursor);
+        }
+        else {
+            focusInput(length - 1);
+        }
+    };
+    const handlePaste = (index, event) => {
+        event.preventDefault();
+        if (disabled)
+            return;
+        const pasted = event.clipboardData.getData("text");
+        const incomingChars = sanitizeChars(pasted, charPattern, length - index);
+        if (!incomingChars.length)
+            return;
+        const nextSlots = [...slots];
+        incomingChars.forEach((char, offset) => {
+            nextSlots[index + offset] = char;
+        });
+        setCode(nextSlots);
+        const nextFocusIndex = Math.min(index + incomingChars.length, length - 1);
+        focusInput(nextFocusIndex);
+    };
+    const handleKeyDown = (index, event) => {
+        if (disabled)
+            return;
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusInput(index - 1);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusInput(index + 1);
+            return;
+        }
+        if (event.key !== "Backspace")
+            return;
+        if (slots[index]) {
+            event.preventDefault();
+            const nextSlots = [...slots];
+            nextSlots[index] = "";
+            setCode(nextSlots);
+            return;
+        }
+        if (index > 0) {
+            event.preventDefault();
+            const nextSlots = [...slots];
+            nextSlots[index - 1] = "";
+            setCode(nextSlots);
+            focusInput(index - 1);
+        }
+    };
+    return (_jsx("div", { className: cn("flex items-center gap-3", className), ref: containerRef, children: slots.map((slot, index) => (_jsx("input", { ref: (element) => {
+                inputRefs.current[index] = element;
+            }, type: "text", inputMode: inputMode, autoComplete: index === 0 ? "one-time-code" : "off", value: slot, maxLength: 1, disabled: disabled, autoFocus: autoFocus && index === 0, "aria-invalid": invalid || undefined, className: cn("h-14 w-[46px] rounded-[8px] border bg-transparent text-center text-2xl font-semibold text-text-white outline-none transition-all duration-200", "border-input-default-stroke focus:border-input-active-stroke", "disabled:cursor-not-allowed disabled:opacity-50", invalid && "border-input-error focus:border-input-error", inputClassName), onFocus: (event) => {
+                event.target.select();
+            }, onBlur: (event) => {
+                var _a;
+                const nextFocused = event.relatedTarget;
+                const stillInside = nextFocused && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(nextFocused));
+                // Notify RHF only when focus leaves the whole OTP control.
+                if (!stillInside) {
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                }
+            }, onChange: (event) => handleInputChange(index, event.target.value), onPaste: (event) => handlePaste(index, event), onKeyDown: (event) => handleKeyDown(index, event) }, index))) }));
+});
+OtpInput.displayName = "OtpInput";
+export default OtpInput;

package/dist/components/OtpInput/OtpInput.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import * as yup from "yup";
+import Button from "@/components/Button/Button";
+import { Field } from "@/components/Form/Field";
+import { Form } from "@/components/Form/Form";
+import OtpInput from "./OtpInput";
+import { OtpInputGroup } from "./OtpInputGroup";
+const meta = {
+    title: "Components/OtpInput",
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Basic = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const [completed, setCompleted] = useState("-");
+        return (_jsx("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(OtpInput, { value: value, onChange: setValue, onComplete: (code) => setCompleted(code) }), _jsxs("div", { className: "text-xs text-text-g-contrast-medium", children: ["Value: ", value || "-"] }), _jsxs("div", { className: "text-xs text-text-g-contrast-medium", children: ["Last completed: ", completed] })] }) }));
+    },
+};
+const otpSchema = yup.object({
+    otp: yup
+        .string()
+        .required("OTP is required")
+        .length(6, "OTP must be 6 digits"),
+});
+export const WithFormField = {
+    render: () => {
+        return (_jsx("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: _jsx(Form, { defaultValues: { otp: "" }, validationSchema: otpSchema, mode: "onTouched", className: "flex flex-col gap-3", onSubmit: (values) => {
+                    // eslint-disable-next-line no-console
+                    console.log("OTP submit:", values);
+                }, children: ({ formState }) => (_jsxs(_Fragment, { children: [_jsx(Field, { name: "otp", component: OtpInput, componentProps: {
+                                autoFocus: true,
+                            }, invalidPropName: "invalid" }), _jsx(Button, { type: "submit", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Verify OTP" })] })) }) }));
+    },
+};
+export const GroupWithLabelAndError = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const isInvalid = value.length > 0 && value.length < 6;
+        return (_jsx("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: _jsx(OtpInputGroup, { id: "otp-group", label: "Verification code", required: true, value: value, onChange: setValue, helperText: "Enter the 6-digit code from your authenticator app", error: isInvalid, errorMessage: isInvalid ? "OTP must be 6 digits" : undefined, autoFocus: true }) }));
+    },
+};
+export const GroupWithFormField = {
+    render: () => {
+        return (_jsx("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: _jsx(Form, { defaultValues: { otp: "" }, validationSchema: otpSchema, mode: "onTouched", className: "flex flex-col gap-3", onSubmit: (values) => {
+                    // eslint-disable-next-line no-console
+                    console.log("OTP group submit:", values);
+                }, children: ({ formState }) => (_jsxs(_Fragment, { children: [_jsx(Field, { name: "otp", component: OtpInputGroup, componentProps: {
+                                id: "otp-field-group",
+                                label: "Verification code",
+                                helperText: "Paste is supported",
+                                required: true,
+                                autoFocus: true,
+                            }, invalidPropName: "error" }), _jsx(Button, { type: "submit", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Verify OTP" })] })) }) }));
+    },
+};

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/Switch/Switch.styles.js

@@ -20,7 +20,7 @@ export const switchThumbVariants = cva([
     "relative isolate block size-4 rounded-full [filter:var(--switch-thumb-filter)] transition-[transform,background-color,color,filter]",
     "data-[state=unchecked]:bg-[var(--switch-thumb-default-color)] data-[state=unchecked]:translate-x-0",
     "data-[state=checked]:bg-[var(--switch-thumb-active-color)] data-[state=checked]:translate-x-4",
-    "data-[state=unchecked]:text-[var(--state-color-tertiary-hover-bg)] data-[state=checked]:text-[var(--state-color-primary-hover-bg)]",
+    "data-[state=unchecked]:text-[var(--state-tertiary-hover-bg)] data-[state=checked]:text-[var(--state-primary-hover-bg)]",
     "group-hover:[&_.switch-thumb-halo]:opacity-100 group-hover:data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)] group-hover:data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)]",
     "group-disabled:!bg-[var(--switch-thumb-disabled-color)] group-disabled:[&_.switch-thumb-halo]:opacity-0",
 ], {

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."