@rovula/ui 0.1.7 → 0.1.9

package/dist/cjs/types/components/AlertDialog/AlertDialog.stories.d.ts

@@ -22,3 +22,6 @@ export declare const CustomStyle: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FigmaFail: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Dialog/Dialog.d.ts

@@ -13,10 +13,16 @@ declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+declare const DialogBody: {
+    ({ className, scrollable, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        scrollable?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const DialogFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };

package/dist/cjs/types/components/Dialog/Dialog.stories.d.ts

@@ -23,3 +23,6 @@ export declare const Demo: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FigmaChangePassword: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Dropdown/Dropdown.d.ts

@@ -31,6 +31,7 @@ export type DropdownProps = {
     optionContainerClassName?: string;
     optionItemClassName?: string;
     optionNotFoundItemClassName?: string;
+    segmentedInput?: boolean;
     options: Options[];
     value?: Options;
     onChangeText?: InputProps["onChange"];
@@ -62,6 +63,7 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     optionContainerClassName?: string;
     optionItemClassName?: string;
     optionNotFoundItemClassName?: string;
+    segmentedInput?: boolean;
     options: Options[];
     value?: Options;
     onChangeText?: InputProps["onChange"];

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -22,6 +22,7 @@ declare const meta: {
         optionContainerClassName?: string;
         optionItemClassName?: string;
         optionNotFoundItemClassName?: string;
+        segmentedInput?: boolean;
         options: Options[];
         value?: Options;
         onChangeText?: import("../..").InputProps["onChange"];
@@ -57,6 +58,7 @@ declare const meta: {
         optionContainerClassName?: string | undefined;
         optionItemClassName?: string | undefined;
         optionNotFoundItemClassName?: string | undefined;
+        segmentedInput?: boolean | undefined;
         options: Options[];
         value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;

package/dist/cjs/types/components/Form/Field.d.ts

@@ -0,0 +1,26 @@
+import { ComponentType } from "react";
+import { FieldPath, FieldPathValue, FieldValues, RegisterOptions } from "react-hook-form";
+type ControlledComponentProps = object;
+export type FieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TComponentProps extends ControlledComponentProps = ControlledComponentProps> = {
+    name: TName;
+    component: ComponentType<TComponentProps>;
+    componentProps?: Omit<TComponentProps, "name" | "value" | "onChange" | "onBlur" | "ref" | "aria-invalid">;
+    rules?: Omit<RegisterOptions<TFieldValues, TName>, "disabled" | "setValueAs" | "valueAsDate" | "valueAsNumber">;
+    defaultValue?: FieldPathValue<TFieldValues, TName>;
+    disabled?: boolean;
+    shouldUnregister?: boolean;
+    id?: string;
+    describedBy?: string;
+    valuePropName?: string;
+    changePropName?: string;
+    blurPropName?: string | false;
+    refPropName?: string | false;
+    errorMessagePropName?: string | false;
+    invalidPropName?: string | false;
+    parseValue?: (incomingValue: unknown, rawPayload: unknown) => FieldPathValue<TFieldValues, TName>;
+    formatValue?: (value: FieldPathValue<TFieldValues, TName>) => TComponentProps[keyof TComponentProps];
+    onChange?: (value: FieldPathValue<TFieldValues, TName>, rawPayload: unknown) => void;
+    onBlur?: () => void;
+};
+export declare const Field: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TComponentProps extends ControlledComponentProps = object>({ name, component: Component, componentProps, rules, defaultValue, disabled, shouldUnregister, id, describedBy, valuePropName, changePropName, blurPropName, refPropName, errorMessagePropName, invalidPropName, parseValue, formatValue, onChange, onBlur, }: FieldProps<TFieldValues, TName, TComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export default Field;

package/dist/cjs/types/components/Form/FieldMessage.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+import { FieldPath, FieldValues } from "react-hook-form";
+export type FieldMessageProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = HTMLAttributes<HTMLParagraphElement> & {
+    name: TName;
+};
+export declare const FieldMessage: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, className, ...props }: FieldMessageProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element | null;
+export default FieldMessage;

package/dist/cjs/types/components/Form/Form.d.ts

@@ -1,12 +1,50 @@
-import React from "react";
-interface FormValues {
-    name: string;
-    email: string;
-    password: string;
-}
-interface FormProps {
-    onSubmit: (values: FormValues) => void;
-    className?: string;
-}
-declare const Form: React.FC<FormProps>;
+import React, { FormHTMLAttributes, ReactNode } from "react";
+import { DefaultValues, FieldValues, Mode, Resolver, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
+import * as yup from "yup";
+type FormChildren<TFieldValues extends FieldValues> = ReactNode | ((methods: UseFormReturn<TFieldValues>) => ReactNode);
+export type FormController<TFieldValues extends FieldValues> = {
+    submit: () => Promise<void>;
+    getValues: () => TFieldValues;
+    setValue: UseFormReturn<TFieldValues>["setValue"];
+    trigger: UseFormReturn<TFieldValues>["trigger"];
+    reset: UseFormReturn<TFieldValues>["reset"];
+};
+export type FormProps<TFieldValues extends FieldValues> = Omit<FormHTMLAttributes<HTMLFormElement>, "children" | "onSubmit"> & {
+    children: FormChildren<TFieldValues>;
+    defaultValues: DefaultValues<TFieldValues>;
+    methods?: UseFormReturn<TFieldValues>;
+    controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
+    onSubmit: SubmitHandler<TFieldValues>;
+    onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
+    resolver?: Resolver<TFieldValues>;
+    validationSchema?: yup.ObjectSchema<any>;
+    mode?: Mode;
+    reValidateMode?: Exclude<Mode, "onTouched" | "all">;
+};
+export declare const createYupResolver: <TFieldValues extends FieldValues>(schema: yup.ObjectSchema<any>) => Resolver<TFieldValues>;
+export type ControlledFormFactoryOptions<TFieldValues extends FieldValues> = {
+    methods: UseFormReturn<TFieldValues>;
+    defaultValues: DefaultValues<TFieldValues>;
+    controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
+};
+export type UseControlledFormOptions<TFieldValues extends FieldValues> = {
+    defaultValues: DefaultValues<TFieldValues>;
+    controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
+    resolver?: Resolver<TFieldValues>;
+    validationSchema?: yup.ObjectSchema<any>;
+    mode?: Mode;
+    reValidateMode?: Exclude<Mode, "onTouched" | "all">;
+};
+export declare const createControlledForm: <TFieldValues extends FieldValues>({ methods, defaultValues, controllerRef, }: ControlledFormFactoryOptions<TFieldValues>) => {
+    methods: UseFormReturn<TFieldValues>;
+    FormRoot: React.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React.RefAttributes<FormController<TFieldValues>>>;
+};
+export declare const useControlledForm: <TFieldValues extends FieldValues>({ defaultValues, controllerRef, resolver, validationSchema, mode, reValidateMode, }: UseControlledFormOptions<TFieldValues>) => {
+    methods: UseFormReturn<TFieldValues>;
+    FormRoot: React.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React.RefAttributes<FormController<TFieldValues>>>;
+};
+type FormComponent = <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {
+    ref?: React.Ref<FormController<TFieldValues>>;
+}) => React.ReactElement;
+export declare const Form: FormComponent;
 export default Form;

package/dist/cjs/types/components/Form/Form.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const BasicYupLogin: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const MixedUiKitControls: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ResolverBasedValidation: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const RenderPropsCodeControl: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const HigherLayerCodeControl: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Form/ValidationHintList.d.ts

@@ -0,0 +1,20 @@
+export type ValidationHintState = "pending" | "valid" | "invalid";
+export type ValidationHintMode = ValidationHintState[];
+export type ValidationHintRule<TValues> = {
+    id: string;
+    label: string;
+    validate: (values: TValues) => boolean;
+    when?: (values: TValues) => boolean;
+};
+export type ValidationHintStateClassMap = Partial<Record<ValidationHintState, string>>;
+export type ValidationHintListProps<TValues> = {
+    values: TValues;
+    rules: ValidationHintRule<TValues>[];
+    mode?: ValidationHintMode;
+    className?: string;
+    itemClassName?: string;
+    labelStateClassName?: ValidationHintStateClassMap;
+    iconStateClassName?: ValidationHintStateClassMap;
+};
+export declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, labelStateClassName, iconStateClassName, }: ValidationHintListProps<TValues>) => import("react/jsx-runtime").JSX.Element;
+export default ValidationHintList;

package/dist/cjs/types/components/Form/ValidationHintList.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const ThreeState: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const TwoState: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Form/index.d.ts

@@ -0,0 +1,10 @@
+export { Form, createControlledForm, createYupResolver, useControlledForm, } from "./Form";
+export type { ControlledFormFactoryOptions, FormController, FormProps, UseControlledFormOptions, } from "./Form";
+export { Field } from "./Field";
+export type { FieldProps } from "./Field";
+export { FieldMessage } from "./FieldMessage";
+export type { FieldMessageProps } from "./FieldMessage";
+export { ValidationHintList } from "./ValidationHintList";
+export type { ValidationHintListProps, ValidationHintMode, ValidationHintRule, ValidationHintState, } from "./ValidationHintList";
+export { useOptionBridge } from "./useOptionBridge";
+export type { OptionLike, UseOptionBridgeOptions, } from "./useOptionBridge";

package/dist/cjs/types/components/Form/useOptionBridge.d.ts

@@ -0,0 +1,17 @@
+type OptionValue = string | number;
+export type OptionLike<TValue extends OptionValue = string> = {
+    value: TValue;
+    label?: string;
+};
+export type UseOptionBridgeOptions<TValue extends OptionValue, TOption extends OptionLike<TValue>> = {
+    options: TOption[];
+    loading?: boolean;
+    buildFallbackOption?: (value: TValue, loading: boolean) => TOption;
+};
+export declare const useOptionBridge: <TValue extends OptionValue = string, TOption extends OptionLike<TValue> = OptionLike<TValue>>({ options, loading, buildFallbackOption, }: UseOptionBridgeOptions<TValue, TOption>) => {
+    toOption: (value: TValue | null | undefined) => TOption | undefined;
+    toOptionWithFallback: (value: TValue | null | undefined) => TOption | undefined;
+    toValue: (option: TOption | null | undefined) => TValue | undefined;
+    optionsByValue: Map<TValue, TOption>;
+};
+export default useOptionBridge;

package/dist/cjs/types/components/OtpInput/OtpInput.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type OtpInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onComplete?: (value: string) => void;
+    length?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    autoFocus?: boolean;
+    inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+    charPattern?: RegExp;
+    className?: string;
+    inputClassName?: string;
+};
+export declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLInputElement>>;
+export default OtpInput;

package/dist/cjs/types/components/OtpInput/OtpInput.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Basic: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithFormField: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const GroupWithLabelAndError: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const GroupWithFormField: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/OtpInput/OtpInputGroup.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { OtpInputProps } from "./OtpInput";
+export type OtpInputGroupProps = OtpInputProps & {
+    id?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    keepFooterSpace?: boolean;
+    labelClassName?: string;
+    messageClassName?: string;
+};
+export declare const OtpInputGroup: React.ForwardRefExoticComponent<OtpInputProps & {
+    id?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    keepFooterSpace?: boolean;
+    labelClassName?: string;
+    messageClassName?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export default OtpInputGroup;

package/dist/cjs/types/components/OtpInput/index.d.ts

@@ -0,0 +1,5 @@
+export { OtpInput } from "./OtpInput";
+export type { OtpInputProps } from "./OtpInput";
+export { OtpInputGroup } from "./OtpInputGroup";
+export type { OtpInputGroupProps } from "./OtpInputGroup";
+export { default } from "./OtpInput";

package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts

@@ -34,6 +34,9 @@ export declare const inlineStartIconWrapperVariant: (props?: ({
 export declare const iconActionVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const searchIconVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const segmentedIconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;

package/dist/cjs/types/index.d.ts

@@ -19,6 +19,8 @@ export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
 export { Calendar } from "./components/Calendar";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as OtpInput } from "./components/OtpInput";
+export { OtpInputGroup } from "./components/OtpInput";
 export { Popover, PopoverTrigger, PopoverContent, } from "./components/Popover/Popover";
 export { default as Loading } from "./components/Loading/Loading";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
@@ -41,12 +43,15 @@ export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
+export * from "./components/Form";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { PasswordInputProps } from "./components/PasswordInput/PasswordInput";
 export type { MaskedTextInputProps, MaskRule, } from "./components/MaskedTextInput";
 export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
+export type { OtpInputProps } from "./components/OtpInput";
+export type { OtpInputGroupProps } from "./components/OtpInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps, NavbarVariant } from "./components/Navbar/Navbar";
 export type { FooterProps, FooterVariant } from "./components/Footer/Footer";

package/dist/cjs/types/theme/ThemeColorCoverageRuntime.stories.d.ts

@@ -0,0 +1,10 @@
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+export declare const RuntimeCoverage: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/utils/colors.d.ts

@@ -1,5 +1,12 @@
 /** CSS variable names for theme colors (resolved by data-theme) */
 export declare const THEME_COLOR_KEYS: {
+    readonly "main-primary": "--main-primary";
+    readonly "main-secondary": "--main-secondary";
+    readonly "main-tertiary": "--main-tertiary";
+    readonly "brand-midnight-blue": "--brand-midnight-blue";
+    readonly "brand-columbia-blue": "--brand-columbia-blue";
+    readonly "brand-background": "--brand-background";
+    readonly "brand-lemon-glacier": "--brand-lemon-glacier";
     readonly "primary-5": "--ramps-primary-5";
     readonly "primary-10": "--ramps-primary-10";
     readonly "primary-20": "--ramps-primary-20";
@@ -192,6 +199,13 @@ export declare const THEME_COLOR_KEYS: {
     readonly "disable-solid": "--state-disable-solid";
     readonly "disable-outline": "--state-disable-outline";
     readonly "text-black": "--text-black";
+    readonly "text-contrast-low": "--text-contrast-low";
+    readonly "text-contrast-medium": "--text-contrast-medium";
+    readonly "text-contrast-high": "--text-contrast-high";
+    readonly "text-contrast-max": "--text-contrast-max";
+    readonly "text-g-contrast-low": "--text-g-contrast-low";
+    readonly "text-g-contrast-medium": "--text-g-contrast-medium";
+    readonly "text-g-contrast-high": "--text-g-contrast-high";
     readonly "text-dark": "--text-dark";
     readonly "text-medium": "--text-medium";
     readonly "text-light": "--text-light";
@@ -219,6 +233,28 @@ export declare const THEME_COLOR_KEYS: {
     readonly "function-active-hover-bg": "--function-active-hover-bg";
     readonly "function-active-stroke": "--function-active-stroke";
     readonly "function-active-icon": "--function-active-icon";
+    readonly "modal-surface": "--modal-surface";
+    readonly "modal-highlight": "--modal-highlight";
+    readonly "modal-overlay": "--modal-overlay";
+    readonly "bg-bg1": "--bg-bg1";
+    readonly "bg-bg2": "--bg-bg2";
+    readonly "bg-bg3": "--bg-bg3";
+    readonly "bg-stroke1": "--bg-stroke1";
+    readonly "bg-stroke2": "--bg-stroke2";
+    readonly "state-primary-text-solid": "--state-primary-text-solid";
+    readonly "state-primary-text-hover": "--state-primary-text-hover";
+    readonly "state-secondary-text-solid": "--state-secondary-text-solid";
+    readonly "state-secondary-text-hover": "--state-secondary-text-hover";
+    readonly "state-tertiary-text-solid": "--state-tertiary-text-solid";
+    readonly "state-tertiary-text-hover": "--state-tertiary-text-hover";
+    readonly "state-info-text-solid": "--state-info-text-solid";
+    readonly "state-info-text-hover": "--state-info-text-hover";
+    readonly "state-success-text-solid": "--state-success-text-solid";
+    readonly "state-success-text-hover": "--state-success-text-hover";
+    readonly "state-warning-text-solid": "--state-warning-text-solid";
+    readonly "state-warning-text-hover": "--state-warning-text-hover";
+    readonly "state-error-text-solid": "--state-error-text-solid";
+    readonly "state-error-text-hover": "--state-error-text-hover";
     readonly "base-bg": "--base-color-bg";
     readonly "base-bg2": "--base-color-bg2";
     readonly "base-bg3": "--base-color-bg3";
@@ -230,6 +266,54 @@ export declare const THEME_COLOR_KEYS: {
     readonly "base-popup-foreground": "--base-color-popup-foreground";
     readonly "common-white": "--common-white";
     readonly "common-black": "--common-black";
+    readonly "brand-rvl-yellow": "--brand-rvl-yellow";
+    readonly "brand-rvl-grey": "--brand-rvl-grey";
+    readonly "others-1": "--others-1";
+    readonly "others-2": "--others-2";
+    readonly "others-3": "--others-3";
+    readonly "others-4": "--others-4";
+    readonly "others-5": "--others-5";
+    readonly "others-6": "--others-6";
+    readonly "others-7": "--others-7";
+    readonly "others-8": "--others-8";
+    readonly "others-9": "--others-9";
+    readonly "others-10": "--others-10";
+    readonly "others-11": "--others-11";
+    readonly "others-12": "--others-12";
+    readonly "others-13": "--others-13";
+    readonly "others-14": "--others-14";
+    readonly "others-15": "--others-15";
+    readonly "others-16": "--others-16";
+    readonly "others-17": "--others-17";
+    readonly "others-18": "--others-18";
+    readonly "others-19": "--others-19";
+    readonly "others-20": "--others-20";
+    readonly "others-21": "--others-21";
+    readonly "others-22": "--others-22";
+    readonly "others-23": "--others-23";
+    readonly "others-24": "--others-24";
+    readonly "others-25": "--others-25";
+    readonly "others-26": "--others-26";
+    readonly "others-27": "--others-27";
+    readonly "others-28": "--others-28";
+    readonly "others-29": "--others-29";
+    readonly "others-30": "--others-30";
+    readonly "others-31": "--others-31";
+    readonly "others-32": "--others-32";
+    readonly "others-33": "--others-33";
+    readonly "others-34": "--others-34";
+    readonly "others-35": "--others-35";
+    readonly "page-bg-main": "--page-bg-main";
+    readonly "page-bg-circle-top-g-in": "--page-bg-circle-top-g-in";
+    readonly "page-bg-circle-top-g-out": "--page-bg-circle-top-g-out";
+    readonly "page-bg-circle-bottom-g-in": "--page-bg-circle-bottom-g-in";
+    readonly "page-bg-circle-bottom-g-out": "--page-bg-circle-bottom-g-out";
+    readonly "modal-line": "--modal-line";
+    readonly "bg-bg4": "--bg-bg4";
+    readonly "bg-bg5": "--bg-bg5";
+    readonly "bg-stroke3": "--bg-stroke3";
+    readonly "bg-stroke4": "--bg-stroke4";
+    readonly "bg-stroke5": "--bg-stroke5";
     readonly background: "--background";
     readonly foreground: "--foreground";
     readonly surface: "--surface";

package/dist/components/ActionButton/ActionButton.stories.js

@@ -16,7 +16,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -59,7 +59,7 @@ const forcedStateClassName = {
     disable: {},
 };
 const icon = _jsx(ArrowsUpDownIcon, {});
-const renderPreview = (shape) => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("h3", { className: "text-xl font-semibold tracking-wide text-text-white", children: "Function button" }), previewStates.map((state) => (_jsxs("div", { className: "grid grid-cols-[120px_repeat(3,minmax(0,1fr))] items-stretch gap-4", children: [_jsx("span", { className: "pt-3 text-sm font-semibold text-text-white", children: state.label }), previewVariants.map((previewVariant) => (_jsxs("div", { className: "h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3", children: [_jsx("span", { className: "text-xs font-semibold tracking-wide text-text-white uppercase", children: previewVariant.label }), _jsx("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: previewVariant.sizes.map((size) => (_jsx(ActionButton, { variant: previewVariant.variant, size: size, shape: shape, active: state.key === "active" || state.key === "active-hover", disabled: state.key === "disable", className: forcedStateClassName[state.key][previewVariant.variant], children: icon }, `${previewVariant.variant}-${size}-${state.key}`))) })] }, previewVariant.variant)))] }, state.key)))] }) }));
+const renderPreview = (shape) => (_jsx("div", { className: "bg-bg-bg2 p-8 min-h-screen", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("h3", { className: "text-xl font-semibold tracking-wide text-text-contrast-max", children: "Function button" }), previewStates.map((state) => (_jsxs("div", { className: "grid grid-cols-[120px_repeat(3,minmax(0,1fr))] items-stretch gap-4", children: [_jsx("span", { className: "pt-3 text-sm font-semibold text-text-contrast-max", children: state.label }), previewVariants.map((previewVariant) => (_jsxs("div", { className: "h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3", children: [_jsx("span", { className: "text-xs font-semibold tracking-wide text-text-contrast-max uppercase", children: previewVariant.label }), _jsx("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: previewVariant.sizes.map((size) => (_jsx(ActionButton, { variant: previewVariant.variant, size: size, shape: shape, active: state.key === "active" || state.key === "active-hover", disabled: state.key === "disable", className: forcedStateClassName[state.key][previewVariant.variant], children: icon }, `${previewVariant.variant}-${size}-${state.key}`))) })] }, previewVariant.variant)))] }, state.key)))] }) }));
 export const FigmaPreview = {
     render: () => renderPreview("round"),
 };

package/dist/components/ActionButton/ActionButton.styles.js

@@ -103,7 +103,7 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
         {
             size: "xxs",
             variant: "icon",
-            className: "px-[1px] py-[1px] [&_svg]:size-[12px]",
+            className: "px-[1px] py-[1px] [&_svg]:size-[10px]",
         },
         {
             size: "xs",

package/dist/components/AlertDialog/AlertDialog.js

@@ -20,32 +20,32 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 const AlertDialogOverlay = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Overlay, Object.assign({ className: cn("fixed inset-0 bg-base-popup-curtain z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
+    return (_jsx(AlertDialogPrimitive.Overlay, Object.assign({ className: cn("fixed inset-0 bg-modal-overlay z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 const AlertDialogContent = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border border-base-popup bg-base-popup p-8 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md", className) }, props))] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-8 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props))] }));
 });
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 const AlertDialogHeader = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col items-center gap-2 text-center", className) }, props)));
 };
 AlertDialogHeader.displayName = "AlertDialogHeader";
 const AlertDialogFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse items-center justify-center gap-3 sm:flex-row sm:gap-4", className) }, props)));
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogTitle = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h5", className) }, props)));
+    return (_jsx(AlertDialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-subtitle3 text-text-contrast-max", className) }, props)));
 });
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 const AlertDialogDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm", className) }, props)));
+    return (_jsx(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-small1 text-text-contrast-max", className) }, props)));
 });
 AlertDialogDescription.displayName =
     AlertDialogPrimitive.Description.displayName;

package/dist/components/AlertDialog/AlertDialog.stories.js

@@ -38,3 +38,6 @@ export const CustomStyle = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { children: "Open" }), _jsxs(AlertDialogContent, { className: "justify-center text-center", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { className: "text-center", children: "Are you absolutely sure?" }), _jsx(AlertDialogDescription, { className: "text-center", children: "This action cannot be undone. This will permanently delete your account and remove your data from our servers." })] }), _jsxs(AlertDialogFooter, { className: "flex sm:justify-stretch", children: [_jsx(AlertDialogCancel, { className: "flex-1 justify-center", children: "Cancel" }), _jsx(AlertDialogAction, { className: "flex-1 justify-center", children: "Continue" })] })] })] }) }));
     },
 };
+export const FigmaFail = {
+    render: () => (_jsx("div", { className: "flex w-full", children: _jsx(AlertDialog, { defaultOpen: true, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Infomation update failed" }), _jsx(AlertDialogDescription, { children: "Please login again and complete your profile to activate your account." })] }), _jsx(AlertDialogFooter, { children: _jsx(AlertDialogAction, { className: "w-[140px] justify-center", children: "Try again" }) })] }) }) })),
+};

package/dist/components/Avatar/Avatar.stories.js

@@ -31,6 +31,6 @@ export const Preview = {
         console.log("args ", args);
         const props = Object.assign({}, args);
         const BORDER = ["full", "normal", "none"];
-        return (_jsxs("div", { className: "flex flex-col gap-2 w-full  bg-black p-20", children: [BORDER.map((rounded) => (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Avatar, { size: "xxs", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "xs", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "sm", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "md", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "lg", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" })] }, rounded))), BORDER.map((rounded) => (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Avatar, { size: "xxs", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "xs", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "sm", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "md", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: rounded, type: "text", text: "AS" })] }, rounded)))] }));
+        return (_jsxs("div", { className: "flex flex-col gap-2 w-full bg-bg-bg2 p-20", children: [BORDER.map((rounded) => (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Avatar, { size: "xxs", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "xs", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "sm", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "md", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "lg", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" })] }, rounded))), BORDER.map((rounded) => (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Avatar, { size: "xxs", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "xs", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "sm", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "md", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: rounded, type: "text", text: "AS" })] }, rounded)))] }));
     },
 };

package/dist/components/Avatar/Avatar.styles.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 export const avatarVariants = cva([
-    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitle2 truncate",
+    "flex items-center justify-center bg-grey2-700 text-common-black typography-subtitle2 truncate",
 ], {
     variants: {
         size: {

package/dist/components/Avatar/AvatarBase.js

@@ -26,7 +26,7 @@ const AvatarImage = React.forwardRef((_a, ref) => {
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 const AvatarFallback = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AvatarPrimitive.Fallback, Object.assign({ ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className) }, props)));
+    return (_jsx(AvatarPrimitive.Fallback, Object.assign({ ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-inherit text-inherit", className) }, props)));
 });
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 export { AvatarBase, AvatarImage, AvatarFallback };

package/dist/components/Avatar/AvatarGroup.stories.js

@@ -31,6 +31,6 @@ export const Preview = {
     render: (args) => {
         console.log("args ", args);
         const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-col gap-2 w-full  bg-black p-20", children: _jsx("div", { className: "flex flex-row items-center gap-3", children: _jsxs(AvatarGroup, { children: [_jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" })] }) }) }));
+        return (_jsx("div", { className: "flex flex-col gap-2 w-full bg-bg-bg2 p-20", children: _jsx("div", { className: "flex flex-row items-center gap-3", children: _jsxs(AvatarGroup, { children: [_jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" })] }) }) }));
     },
 };