@rovula/ui 0.1.6 → 0.1.8

package/dist/components/Form/FieldMessage.js

@@ -0,0 +1,24 @@
+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 { useFormContext } from "react-hook-form";
+import { cn } from "@/utils/cn";
+export const FieldMessage = (_a) => {
+    var { name, className } = _a, props = __rest(_a, ["name", "className"]);
+    const { getFieldState, formState } = useFormContext();
+    const { error } = getFieldState(name, formState);
+    if (!(error === null || error === void 0 ? void 0 : error.message)) {
+        return null;
+    }
+    return (_jsx("p", Object.assign({}, props, { className: cn("text-sm text-input-error mt-1", className), role: "alert", children: error.message })));
+};
+export default FieldMessage;

package/dist/components/Form/Form.js

@@ -1,45 +1,77 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// src/Form.tsx
-import { useState } from "react";
-import * as yup from "yup";
-const schema = yup.object().shape({
-    name: yup.string().required("Name is required"),
-    email: yup.string().email("Invalid email").required("Email is required"),
-    password: yup
-        .string()
-        .min(6, "Password must be at least 6 characters")
-        .required("Password is required"),
-});
-const Form = ({ onSubmit, className = "" }) => {
-    const [values, setValues] = useState({
-        name: "",
-        email: "",
-        password: "",
-    });
-    const [errors, setErrors] = useState({});
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setValues(Object.assign(Object.assign({}, values), { [name]: value }));
-    };
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            await schema.validate(values, { abortEarly: false });
-            setErrors({});
-            onSubmit(values);
-        }
-        catch (err) {
-            if (err instanceof yup.ValidationError) {
-                const validationErrors = {};
-                err.inner.forEach((error) => {
-                    if (error.path) {
-                        validationErrors[error.path] = error.message;
-                    }
-                });
-                setErrors(validationErrors);
-            }
+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 React from "react";
+import { FormProvider, useForm, } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+export const createYupResolver = (schema) => yupResolver(schema);
+export const createControlledForm = ({ methods, defaultValues, controllerRef, }) => {
+    const FormRoot = React.forwardRef((_a, ref) => {
+        var { children } = _a, props = __rest(_a, ["children"]);
+        return (_jsx(Form, Object.assign({}, props, { ref: ref, methods: methods, defaultValues: defaultValues, controllerRef: controllerRef, children: children })));
+    });
+    FormRoot.displayName = "ControlledFormRoot";
+    return {
+        methods,
+        FormRoot,
     };
-    return (_jsxs("form", { className: `form ${className}`, onSubmit: handleSubmit, children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "name", children: "Name" }), _jsx("input", { id: "name", name: "name", type: "text", value: values.name, onChange: handleChange }), errors.name && _jsx("span", { className: "error", children: errors.name })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "email", children: "Email" }), _jsx("input", { id: "email", name: "email", type: "email", value: values.email, onChange: handleChange }), errors.email && _jsx("span", { className: "error", children: errors.email })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "password", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", value: values.password, onChange: handleChange }), errors.password && _jsx("span", { className: "error", children: errors.password })] }), _jsx("button", { type: "submit", children: "Submit" })] }));
 };
+export const useControlledForm = ({ defaultValues, controllerRef, resolver, validationSchema, mode = "onSubmit", reValidateMode = "onChange", }) => {
+    const resolvedResolver = resolver !== null && resolver !== void 0 ? resolver : (validationSchema
+        ? createYupResolver(validationSchema)
+        : undefined);
+    const methods = useForm({
+        defaultValues,
+        resolver: resolvedResolver,
+        mode,
+        reValidateMode,
+    });
+    return createControlledForm({
+        methods,
+        defaultValues,
+        controllerRef,
+    });
+};
+const FormInner = (_a, ref) => {
+    var { children, defaultValues, methods: externalMethods, controllerRef, onSubmit, onInvalidSubmit, resolver, validationSchema, mode = "onSubmit", reValidateMode = "onChange", noValidate = true } = _a, formProps = __rest(_a, ["children", "defaultValues", "methods", "controllerRef", "onSubmit", "onInvalidSubmit", "resolver", "validationSchema", "mode", "reValidateMode", "noValidate"]);
+    const resolvedResolver = resolver !== null && resolver !== void 0 ? resolver : (validationSchema
+        ? createYupResolver(validationSchema)
+        : undefined);
+    const internalMethods = useForm({
+        defaultValues,
+        resolver: resolvedResolver,
+        mode,
+        reValidateMode,
+    });
+    const methods = externalMethods !== null && externalMethods !== void 0 ? externalMethods : internalMethods;
+    const controller = React.useMemo(() => ({
+        submit: async () => {
+            await methods.handleSubmit(onSubmit, onInvalidSubmit)();
+        },
+        getValues: () => methods.getValues(),
+        setValue: methods.setValue,
+        trigger: methods.trigger,
+        reset: methods.reset,
+    }), [methods, onSubmit, onInvalidSubmit]);
+    React.useImperativeHandle(ref, () => controller, [controller]);
+    React.useEffect(() => {
+        if (!controllerRef)
+            return;
+        controllerRef.current = controller;
+        return () => {
+            controllerRef.current = null;
+        };
+    }, [controllerRef, controller]);
+    return (_jsx(FormProvider, Object.assign({}, methods, { children: _jsx("form", Object.assign({}, formProps, { noValidate: noValidate, onSubmit: methods.handleSubmit(onSubmit, onInvalidSubmit), children: typeof children === "function" ? children(methods) : children })) })));
+};
+export const Form = React.forwardRef(FormInner);
 export default Form;

package/dist/components/Form/Form.stories.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo, useState } from "react";
+import * as yup from "yup";
+import Button from "@/components/Button/Button";
+import TextInput from "@/components/TextInput/TextInput";
+import Dropdown from "@/components/Dropdown/Dropdown";
+import DatePicker from "@/components/DatePicker/DatePicker";
+import { NumberInput } from "@/components/NumberInput/NumberInput";
+import { Switch } from "@/components/Switch/Switch";
+import { Field } from "./Field";
+import { Form, useControlledForm, } from "./Form";
+const roleOptions = [
+    { value: "dev", label: "Developer" },
+    { value: "pm", label: "Product Manager" },
+    { value: "qa", label: "QA Engineer" },
+];
+const meta = {
+    title: "Components/Form",
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-[520px] max-w-full p-5 bg-bg-bg2 rounded-md", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const loginSchema = yup.object({
+    email: yup
+        .string()
+        .email("Invalid email format")
+        .required("Email is required"),
+    password: yup
+        .string()
+        .required("Password is required")
+        .min(6, "Password must be at least 6 characters"),
+});
+export const BasicYupLogin = {
+    args: {},
+    render: () => {
+        const [lastEmailChange, setLastEmailChange] = useState("");
+        return (_jsxs(Form, { className: "flex flex-col gap-3", defaultValues: {
+                email: "",
+                password: "",
+            }, validationSchema: loginSchema, onSubmit: (values) => {
+                // eslint-disable-next-line no-console
+                console.log("Submitted form values:", values);
+            }, children: [_jsx(Field, { name: "email", component: TextInput, componentProps: {
+                        label: "Email",
+                        type: "email",
+                        helperText: "Use your work email",
+                        required: true,
+                    }, onChange: (value) => {
+                        setLastEmailChange(String(value !== null && value !== void 0 ? value : ""));
+                    } }), _jsx(Field, { name: "password", component: TextInput, componentProps: {
+                        label: "Password",
+                        type: "password",
+                        required: true,
+                    } }), _jsxs("div", { className: "text-xs text-text-g-contrast-medium", children: ["Last email change: ", lastEmailChange || "-"] }), _jsx(Button, { type: "submit", children: "Sign in" })] }));
+    },
+};
+export const MixedUiKitControls = {
+    args: {},
+    render: () => {
+        const selectedRole = useMemo(() => roleOptions.find((item) => item.value === "dev"), []);
+        return (_jsxs(Form, { className: "flex flex-col gap-4", defaultValues: {
+                fullName: "",
+                role: (selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.value) || "",
+                salary: undefined,
+                startDate: undefined,
+                isActive: true,
+            }, validationSchema: yup.object({
+                fullName: yup.string().required("Full name is required"),
+                role: yup.string().required("Please select a role"),
+            }), onSubmit: (values) => {
+                // eslint-disable-next-line no-console
+                console.log("Submitted employee values:", values);
+            }, children: [_jsx(Field, { name: "fullName", component: TextInput, componentProps: {
+                        label: "Full name",
+                        required: true,
+                    } }), _jsx(Field, { name: "role", component: Dropdown, componentProps: {
+                        label: "Role",
+                        options: roleOptions,
+                        required: true,
+                        helperText: "Choose one role",
+                    }, valuePropName: "value", changePropName: "onSelect", parseValue: (incoming) => {
+                        const option = incoming;
+                        return (option === null || option === void 0 ? void 0 : option.value) || "";
+                    }, formatValue: (value) => roleOptions.find((option) => option.value === value) }), _jsx(Field, { name: "salary", component: NumberInput, componentProps: {
+                        label: "Salary",
+                        min: 0,
+                        thousandSeparator: ",",
+                        formatDisplay: true,
+                    }, parseValue: (incoming) => typeof incoming === "number" ? incoming : undefined }), _jsx(Field, { name: "startDate", component: DatePicker, componentProps: {
+                        date: undefined,
+                        onSelect: () => undefined,
+                        textInputProps: { label: "Start date", required: false },
+                    }, valuePropName: "date", changePropName: "onSelect", blurPropName: false, refPropName: false, errorMessagePropName: false, invalidPropName: false, parseValue: (incoming) => incoming }), _jsxs("div", { className: "flex items-center justify-between rounded-md border border-bg-stroke1 px-3 py-2", children: [_jsx("span", { className: "text-sm text-text-contrast-max", children: "Active employee" }), _jsx(Field, { name: "isActive", component: Switch, valuePropName: "checked", changePropName: "onCheckedChange", blurPropName: false, errorMessagePropName: false, invalidPropName: false, parseValue: (incoming) => Boolean(incoming) })] }), _jsx(Button, { type: "submit", children: "Create employee" })] }));
+    },
+};
+export const ResolverBasedValidation = {
+    args: {},
+    render: () => {
+        const resolver = async (values) => {
+            var _a;
+            const errors = {};
+            if (!((_a = values.email) === null || _a === void 0 ? void 0 : _a.includes("@"))) {
+                errors.email = { type: "validate", message: "Email must include @" };
+            }
+            if (!values.password || values.password.length < 8) {
+                errors.password = {
+                    type: "validate",
+                    message: "Password must be at least 8 characters",
+                };
+            }
+            return {
+                values: Object.keys(errors).length ? {} : values,
+                errors,
+            };
+        };
+        return (_jsxs(Form, { className: "flex flex-col gap-3", defaultValues: {
+                email: "",
+                password: "",
+            }, resolver: resolver, onSubmit: (values) => {
+                // eslint-disable-next-line no-console
+                console.log("Resolver submit values:", values);
+            }, children: [_jsx(Field, { name: "email", component: TextInput, componentProps: {
+                        label: "Email",
+                        type: "email",
+                        required: true,
+                    } }), _jsx(Field, { name: "password", component: TextInput, componentProps: {
+                        label: "Password",
+                        type: "password",
+                        helperText: "This story demonstrates custom resolver.",
+                        required: true,
+                    } }), _jsx(Button, { type: "submit", children: "Validate" })] }));
+    },
+};
+export const RenderPropsCodeControl = {
+    args: {},
+    render: () => {
+        const codeControlSchema = yup.object({
+            title: yup.string().required("Title is required"),
+            description: yup
+                .string()
+                .required("Description is required")
+                .min(10, "Description must be at least 10 characters"),
+        });
+        return (_jsx(Form, { className: "flex flex-col gap-3", defaultValues: {
+                title: "",
+                description: "",
+            }, mode: "onChange", validationSchema: codeControlSchema, onSubmit: (values) => {
+                // eslint-disable-next-line no-console
+                console.log("Submit with code:", values);
+            }, children: ({ formState, getValues, handleSubmit }) => (_jsxs(_Fragment, { children: [_jsx(Field, { name: "title", component: TextInput, componentProps: {
+                            label: "Title",
+                            required: true,
+                        } }), _jsx(Field, { name: "description", component: TextInput, componentProps: {
+                            label: "Description",
+                            helperText: "Try at least 10 characters",
+                            required: true,
+                        } }), _jsx("div", { className: "flex gap-2", children: _jsx(Button, { type: "submit", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Submit with code" }) })] })) }));
+    },
+};
+export const HigherLayerCodeControl = {
+    args: {},
+    render: () => {
+        const [stateSnapshot, setStateSnapshot] = useState("-");
+        const [submitCount, setSubmitCount] = useState(0);
+        const formRef = React.useRef(null);
+        const schema = yup.object({
+            title: yup.string().required("Title is required"),
+            description: yup
+                .string()
+                .required("Description is required")
+                .min(10, "Description must be at least 10 characters"),
+        });
+        const { methods, FormRoot } = useControlledForm({
+            defaultValues: {
+                title: "",
+                description: "",
+            },
+            validationSchema: schema,
+            mode: "onChange",
+        });
+        const onSubmit = (values) => {
+            setSubmitCount((prev) => prev + 1);
+            // eslint-disable-next-line no-console
+            console.log("Higher layer submit with code:", values);
+        };
+        return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium", children: ["Higher layer state: ", methods.formState.isValid ? "valid" : "invalid", " ", "/", methods.formState.isDirty ? " dirty" : " pristine", " / submits:", " ", submitCount] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                const snapshot = JSON.stringify({
+                                    values: methods.getValues(),
+                                    isValid: methods.formState.isValid,
+                                    isDirty: methods.formState.isDirty,
+                                });
+                                setStateSnapshot(snapshot);
+                            }, children: "Get state with code (outside Form)" }), _jsx(Button, { type: "button", disabled: !methods.formState.isValid || methods.formState.isSubmitting, isLoading: methods.formState.isSubmitting, onClick: () => {
+                                methods.handleSubmit(onSubmit)();
+                            }, children: "Submit with code (outside Form)" }), _jsx(Button, { type: "button", variant: "outline", onClick: async () => {
+                                var _a;
+                                await ((_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit());
+                            }, children: "Submit with ref" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                var _a;
+                                const valuesFromRef = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getValues();
+                                if (!valuesFromRef)
+                                    return;
+                                setStateSnapshot(JSON.stringify({
+                                    values: valuesFromRef,
+                                    via: "controllerRef",
+                                }));
+                            }, children: "Get state with ref" })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium", children: ["Snapshot: ", stateSnapshot] }), _jsxs(FormRoot, { ref: formRef, className: "flex flex-col gap-3", onSubmit: onSubmit, children: [_jsx(Field, { name: "title", component: TextInput, componentProps: {
+                                label: "Title",
+                                required: true,
+                            } }), _jsx(Field, { name: "description", component: TextInput, componentProps: {
+                                label: "Description",
+                                helperText: "Try at least 10 characters",
+                                required: true,
+                            } })] })] }));
+    },
+};

package/dist/components/Form/ValidationHintList.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { cn } from "@/utils/cn";
+const resolveHintState = (values, rule) => {
+    const shouldEvaluate = rule.when ? rule.when(values) : true;
+    if (!shouldEvaluate)
+        return "pending";
+    return rule.validate(values) ? "valid" : "invalid";
+};
+const hintTextStateClass = {
+    valid: "text-success",
+    invalid: "text-input-error",
+    pending: "text-text-g-contrast-medium",
+};
+const hintIconStateClass = {
+    valid: "opacity-100",
+    invalid: "opacity-100",
+    pending: "opacity-40",
+};
+export const ValidationHintList = ({ values, rules, mode = ["pending", "valid", "invalid"], className, itemClassName, }) => {
+    const enabledStates = new Set(mode);
+    return (_jsx("ul", { className: cn("mt-2 flex flex-col gap-3", className), children: rules.map((rule) => {
+            const state = resolveHintState(values, rule);
+            const normalizedState = enabledStates.has(state)
+                ? state
+                : "pending";
+            return (_jsxs("li", { className: cn("flex items-center gap-2 typography-small2", hintTextStateClass[normalizedState], itemClassName), children: [_jsx(CheckCircleIcon, { className: cn("size-4", hintIconStateClass[normalizedState]) }), _jsx("span", { children: rule.label })] }, rule.id));
+        }) }));
+};
+export default ValidationHintList;

package/dist/components/Form/ValidationHintList.stories.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import PasswordInput from "@/components/PasswordInput";
+import { ValidationHintList } from "./ValidationHintList";
+const rules = [
+    {
+        id: "min-length",
+        label: "Minimum 12 characters",
+        validate: (values) => values.password.length >= 12,
+        when: (values) => Boolean(values.password),
+    },
+    {
+        id: "upper-lower",
+        label: "At least one upper and lower case",
+        validate: (values) => /[a-z]/.test(values.password) && /[A-Z]/.test(values.password),
+        when: (values) => Boolean(values.password),
+    },
+    {
+        id: "match",
+        label: "Password and confirmation are matching",
+        validate: (values) => Boolean(values.password) && values.password === values.confirmPassword,
+        when: (values) => Boolean(values.password) && Boolean(values.confirmPassword),
+    },
+];
+const meta = {
+    title: "Components/Form/ValidationHintList",
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const ThreeState = {
+    render: () => {
+        const [values, setValues] = useState({
+            password: "",
+            confirmPassword: "",
+        });
+        return (_jsxs("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(PasswordInput, { label: "Password", value: values.password, onChange: (event) => setValues((prev) => (Object.assign(Object.assign({}, prev), { password: event.target.value }))) }), _jsx(PasswordInput, { label: "Confirm password", value: values.confirmPassword, onChange: (event) => setValues((prev) => (Object.assign(Object.assign({}, prev), { confirmPassword: event.target.value }))) })] }), _jsx(ValidationHintList, { values: values, rules: rules })] }));
+    },
+};
+export const TwoState = {
+    render: () => {
+        const [values, setValues] = useState({
+            password: "",
+            confirmPassword: "",
+        });
+        return (_jsxs("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(PasswordInput, { label: "Password", value: values.password, onChange: (event) => setValues((prev) => (Object.assign(Object.assign({}, prev), { password: event.target.value }))) }), _jsx(PasswordInput, { label: "Confirm password", value: values.confirmPassword, onChange: (event) => setValues((prev) => (Object.assign(Object.assign({}, prev), { confirmPassword: event.target.value }))) })] }), _jsx(ValidationHintList, { values: values, rules: rules, mode: ["pending", "valid"] })] }));
+    },
+};

package/dist/components/Form/index.js

@@ -0,0 +1,5 @@
+export { Form, createControlledForm, createYupResolver, useControlledForm, } from "./Form";
+export { Field } from "./Field";
+export { FieldMessage } from "./FieldMessage";
+export { ValidationHintList } from "./ValidationHintList";
+export { useOptionBridge } from "./useOptionBridge";

package/dist/components/Form/useOptionBridge.js

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+export const useOptionBridge = ({ options, loading = false, buildFallbackOption, }) => {
+    const optionsByValue = useMemo(() => {
+        return new Map(options.map((option) => [option.value, option]));
+    }, [options]);
+    const toOption = (value) => {
+        if (value === null || value === undefined)
+            return undefined;
+        return optionsByValue.get(value);
+    };
+    const toValue = (option) => {
+        return option === null || option === void 0 ? void 0 : option.value;
+    };
+    const toOptionWithFallback = (value) => {
+        var _a;
+        if (value === null || value === undefined)
+            return undefined;
+        return (_a = toOption(value)) !== null && _a !== void 0 ? _a : buildFallbackOption === null || buildFallbackOption === void 0 ? void 0 : buildFallbackOption(value, loading);
+    };
+    return {
+        toOption,
+        toOptionWithFallback,
+        toValue,
+        optionsByValue,
+    };
+};
+export default useOptionBridge;

package/dist/components/InputFilter/InputFilter.js

@@ -77,7 +77,7 @@ const InputFilter = forwardRef((_a, ref) => {
                 onClick: handleOptionClick,
             });
         }
-        return (_jsxs("ul", { className: cn("absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", optionContainerClassName), children: [optionsFiltered.map((option) => {
+        return (_jsxs("ul", { className: cn("absolute text-text-g-contrast-high mt-1 w-full bg-modal-surface border border-modal-surface text-text-contrast-low rounded-md shadow-md z-10 max-h-60 overflow-y-auto", optionContainerClassName), children: [optionsFiltered.map((option) => {
                     if (option.renderLabel) {
                         return (_jsx(Fragment, { children: option.renderLabel({
                                 value: option.value,
@@ -88,8 +88,8 @@ const InputFilter = forwardRef((_a, ref) => {
                                     : ""}`,
                             }) }, option.value));
                     }
-                    return (_jsxs("li", { onMouseDown: () => handleOptionClick(option), className: `p-4 typography-subtitle4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
-                            ? "bg-base-popup-highlight"
+                    return (_jsxs("li", { onMouseDown: () => handleOptionClick(option), className: `p-4 text-text-g-contrast-high typography-subtitle4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
+                            ? "bg-modal-highlight"
                             : ""}`, children: [_jsx(Checkbox, { checked: selectedOptions.some((selected) => selected.value === option.value) }), option.label] }, option.value));
                 }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
     };
@@ -119,6 +119,7 @@ const InputFilter = forwardRef((_a, ref) => {
         active: !!values.length,
         disabled,
     });
-    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent" }), classes: { endIconWrapper: filterIconClassName } }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
+    const filterIconSizeClassName = size === "lg" ? "size-8" : size === "md" ? "size-[22px]" : "size-[18px]";
+    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent", className: filterIconSizeClassName }), classes: { endIconWrapper: filterIconClassName } }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
 });
 export { InputFilter };

package/dist/components/InputFilter/InputFilter.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;

package/dist/components/InputFilter/InputFilter.styles.js

@@ -23,7 +23,7 @@ export const filterIconVariant = cva([
         },
         rounded: {
             none: "rounded-r-none",
-            normal: "rounded-r-xl",
+            normal: "",
             full: "rounded-r-full",
         },
         error: {
@@ -48,12 +48,25 @@ export const filterIconVariant = cva([
         },
         disabled: {
             true: [
+                "cursor-default pointer-events-none",
                 "border-l-input-disable-stroke",
                 "fill-input-disable-stroke",
                 "stroke-input-disable-stroke",
             ],
         },
     },
+    compoundVariants: [
+        {
+            rounded: "normal",
+            size: "sm",
+            className: "rounded-r-sm",
+        },
+        {
+            rounded: "normal",
+            size: ["md", "lg"],
+            className: "rounded-r-md",
+        },
+    ],
     defaultVariants: {
         size: "md",
         rounded: "normal",

package/dist/components/Label/Label.styles.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 export const labelVariant = cva([
-    "block cursor-pointer duration-450 transition-all px-[2px] text-foreground peer-focus:text-input-text-active",
+    "block cursor-pointer duration-450 transition-all px-[2px] text-input-default-text peer-focus:text-input-text-active",
 ], {
     variants: {
         size: {

package/dist/components/Menu/Menu.js

@@ -4,7 +4,7 @@ import { cn } from "@/utils/cn";
 import Icon from "../Icon/Icon";
 // ==================== Menu Container ====================
 export const Menu = forwardRef(({ items, selectedValues = [], onSelect, className, style, isAbove = false }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground", "border border-base-popup", className), style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, style), children: items.map((item, index) => {
+    return (_jsx("div", { ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-g-contrast-high", "border border-modal-surface", className), style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, style), children: items.map((item, index) => {
             var _a;
             if (item.type === "separator") {
                 return _jsx(MenuSeparator, {}, `separator-${index}`);
@@ -57,7 +57,7 @@ export const MenuSeparator = forwardRef(({ className }, ref) => {
 });
 MenuSeparator.displayName = "MenuSeparator";
 export const MenuLabel = forwardRef(({ children, className }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("px-3 py-2 typography-small4 text-text-grey-medium", className), children: children }));
+    return (_jsx("div", { ref: ref, className: cn("px-3 py-2 typography-small4 text-text-g-contrast-medium", className), children: children }));
 });
 MenuLabel.displayName = "MenuLabel";
 // ==================== Exports ====================

package/dist/components/NumberInput/NumberInput.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: {