@rovula/ui 0.1.6 → 0.1.8

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -17,6 +17,8 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { ToastProviderProps } from '@radix-ui/react-toast';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { FieldValues, UseFormReturn, DefaultValues, SubmitHandler, SubmitErrorHandler, Resolver, Mode, FieldPath, RegisterOptions, FieldPathValue } from 'react-hook-form';
+import * as yup from 'yup';
 import { ClassValue } from 'clsx';
 
 type ButtonProps = {
@@ -447,6 +449,7 @@ type DropdownProps = {
     optionContainerClassName?: string;
     optionItemClassName?: string;
     optionNotFoundItemClassName?: string;
+    segmentedInput?: boolean;
     options: Options$1[];
     value?: Options$1;
     onChangeText?: InputProps["onChange"];
@@ -478,6 +481,7 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
     optionContainerClassName?: string;
     optionItemClassName?: string;
     optionNotFoundItemClassName?: string;
+    segmentedInput?: boolean;
     options: Options$1[];
     value?: Options$1;
     onChangeText?: InputProps["onChange"];
@@ -641,6 +645,45 @@ type DatePickerProps = {
 } & React__default.ComponentPropsWithoutRef<typeof Calendar>;
 declare const DatePicker: FC<DatePickerProps>;
 
+type OtpInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onComplete?: (value: string) => void;
+    length?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    autoFocus?: boolean;
+    inputMode?: React__default.HTMLAttributes<HTMLInputElement>["inputMode"];
+    charPattern?: RegExp;
+    className?: string;
+    inputClassName?: string;
+};
+declare const OtpInput: React__default.ForwardRefExoticComponent<OtpInputProps & React__default.RefAttributes<HTMLInputElement>>;
+
+type OtpInputGroupProps = OtpInputProps & {
+    id?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    keepFooterSpace?: boolean;
+    labelClassName?: string;
+    messageClassName?: string;
+};
+declare const OtpInputGroup: React__default.ForwardRefExoticComponent<OtpInputProps & {
+    id?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    keepFooterSpace?: boolean;
+    labelClassName?: string;
+    messageClassName?: string;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
 type LoadingProps = {
     size?: number;
     color?: string;
@@ -710,6 +753,12 @@ declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+declare const DialogBody: {
+    ({ className, scrollable, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        scrollable?: boolean;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 declare const DialogFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -1097,6 +1146,116 @@ declare const FocusedScrollView: React__default.FC<FocusedScrollViewProps>;
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+type FormChildren<TFieldValues extends FieldValues> = ReactNode | ((methods: UseFormReturn<TFieldValues>) => ReactNode);
+type FormController<TFieldValues extends FieldValues> = {
+    submit: () => Promise<void>;
+    getValues: () => TFieldValues;
+    setValue: UseFormReturn<TFieldValues>["setValue"];
+    trigger: UseFormReturn<TFieldValues>["trigger"];
+    reset: UseFormReturn<TFieldValues>["reset"];
+};
+type FormProps<TFieldValues extends FieldValues> = Omit<FormHTMLAttributes<HTMLFormElement>, "children" | "onSubmit"> & {
+    children: FormChildren<TFieldValues>;
+    defaultValues: DefaultValues<TFieldValues>;
+    methods?: UseFormReturn<TFieldValues>;
+    controllerRef?: React__default.MutableRefObject<FormController<TFieldValues> | null>;
+    onSubmit: SubmitHandler<TFieldValues>;
+    onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
+    resolver?: Resolver<TFieldValues>;
+    validationSchema?: yup.ObjectSchema<any>;
+    mode?: Mode;
+    reValidateMode?: Exclude<Mode, "onTouched" | "all">;
+};
+declare const createYupResolver: <TFieldValues extends FieldValues>(schema: yup.ObjectSchema<any>) => Resolver<TFieldValues>;
+type ControlledFormFactoryOptions<TFieldValues extends FieldValues> = {
+    methods: UseFormReturn<TFieldValues>;
+    defaultValues: DefaultValues<TFieldValues>;
+    controllerRef?: React__default.MutableRefObject<FormController<TFieldValues> | null>;
+};
+type UseControlledFormOptions<TFieldValues extends FieldValues> = {
+    defaultValues: DefaultValues<TFieldValues>;
+    controllerRef?: React__default.MutableRefObject<FormController<TFieldValues> | null>;
+    resolver?: Resolver<TFieldValues>;
+    validationSchema?: yup.ObjectSchema<any>;
+    mode?: Mode;
+    reValidateMode?: Exclude<Mode, "onTouched" | "all">;
+};
+declare const createControlledForm: <TFieldValues extends FieldValues>({ methods, defaultValues, controllerRef, }: ControlledFormFactoryOptions<TFieldValues>) => {
+    methods: UseFormReturn<TFieldValues>;
+    FormRoot: React__default.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React__default.RefAttributes<FormController<TFieldValues>>>;
+};
+declare const useControlledForm: <TFieldValues extends FieldValues>({ defaultValues, controllerRef, resolver, validationSchema, mode, reValidateMode, }: UseControlledFormOptions<TFieldValues>) => {
+    methods: UseFormReturn<TFieldValues>;
+    FormRoot: React__default.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React__default.RefAttributes<FormController<TFieldValues>>>;
+};
+type FormComponent = <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {
+    ref?: React__default.Ref<FormController<TFieldValues>>;
+}) => React__default.ReactElement;
+declare const Form: FormComponent;
+
+type ControlledComponentProps = object;
+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;
+};
+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>) => react_jsx_runtime.JSX.Element;
+
+type FieldMessageProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = HTMLAttributes<HTMLParagraphElement> & {
+    name: TName;
+};
+declare const FieldMessage: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, className, ...props }: FieldMessageProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element | null;
+
+type ValidationHintState = "pending" | "valid" | "invalid";
+type ValidationHintMode = ValidationHintState[];
+type ValidationHintRule<TValues> = {
+    id: string;
+    label: string;
+    validate: (values: TValues) => boolean;
+    when?: (values: TValues) => boolean;
+};
+type ValidationHintListProps<TValues> = {
+    values: TValues;
+    rules: ValidationHintRule<TValues>[];
+    mode?: ValidationHintMode;
+    className?: string;
+    itemClassName?: string;
+};
+declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, }: ValidationHintListProps<TValues>) => react_jsx_runtime.JSX.Element;
+
+type OptionValue = string | number;
+type OptionLike<TValue extends OptionValue = string> = {
+    value: TValue;
+    label?: string;
+};
+type UseOptionBridgeOptions<TValue extends OptionValue, TOption extends OptionLike<TValue>> = {
+    options: TOption[];
+    loading?: boolean;
+    buildFallbackOption?: (value: TValue, loading: boolean) => TOption;
+};
+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>;
+};
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -1112,198 +1271,212 @@ declare function cn(...inputs: ClassValue[]): string;
 
 /** CSS variable names for theme colors (resolved by data-theme) */
 declare const THEME_COLOR_KEYS: {
-    readonly "primary-5": "--primary-ramps-primary-5";
-    readonly "primary-10": "--primary-ramps-primary-10";
-    readonly "primary-20": "--primary-ramps-primary-20";
-    readonly "primary-30": "--primary-ramps-primary-30";
-    readonly "primary-40": "--primary-ramps-primary-40";
-    readonly "primary-50": "--primary-ramps-primary-50";
-    readonly "primary-60": "--primary-ramps-primary-60";
-    readonly "primary-70": "--primary-ramps-primary-70";
-    readonly "primary-80": "--primary-ramps-primary-80";
-    readonly "primary-90": "--primary-ramps-primary-90";
-    readonly "primary-100": "--primary-ramps-primary-100";
-    readonly "primary-110": "--primary-ramps-primary-110";
-    readonly "primary-120": "--primary-ramps-primary-120";
-    readonly "primary-130": "--primary-ramps-primary-130";
-    readonly "primary-140": "--primary-ramps-primary-140";
-    readonly "primary-150": "--primary-ramps-primary-150";
-    readonly "secondary-5": "--secondary-ramps-secondary-5";
-    readonly "secondary-10": "--secondary-ramps-secondary-10";
-    readonly "secondary-20": "--secondary-ramps-secondary-20";
-    readonly "secondary-30": "--secondary-ramps-secondary-30";
-    readonly "secondary-40": "--secondary-ramps-secondary-40";
-    readonly "secondary-50": "--secondary-ramps-secondary-50";
-    readonly "secondary-60": "--secondary-ramps-secondary-60";
-    readonly "secondary-70": "--secondary-ramps-secondary-70";
-    readonly "secondary-80": "--secondary-ramps-secondary-80";
-    readonly "secondary-90": "--secondary-ramps-secondary-90";
-    readonly "secondary-100": "--secondary-ramps-secondary-100";
-    readonly "secondary-110": "--secondary-ramps-secondary-110";
-    readonly "secondary-120": "--secondary-ramps-secondary-120";
-    readonly "secondary-130": "--secondary-ramps-secondary-130";
-    readonly "secondary-140": "--secondary-ramps-secondary-140";
-    readonly "secondary-150": "--secondary-ramps-secondary-150";
-    readonly "tertiary-5": "--tertiary-ramps-tertiary-5";
-    readonly "tertiary-10": "--tertiary-ramps-tertiary-10";
-    readonly "tertiary-20": "--tertiary-ramps-tertiary-20";
-    readonly "tertiary-30": "--tertiary-ramps-tertiary-30";
-    readonly "tertiary-40": "--tertiary-ramps-tertiary-40";
-    readonly "tertiary-50": "--tertiary-ramps-tertiary-50";
-    readonly "tertiary-60": "--tertiary-ramps-tertiary-60";
-    readonly "tertiary-70": "--tertiary-ramps-tertiary-70";
-    readonly "tertiary-80": "--tertiary-ramps-tertiary-80";
-    readonly "tertiary-90": "--tertiary-ramps-tertiary-90";
-    readonly "tertiary-100": "--tertiary-ramps-tertiary-100";
-    readonly "tertiary-110": "--tertiary-ramps-tertiary-110";
-    readonly "tertiary-120": "--tertiary-ramps-tertiary-120";
-    readonly "tertiary-130": "--tertiary-ramps-tertiary-130";
-    readonly "tertiary-140": "--tertiary-ramps-tertiary-140";
-    readonly "tertiary-150": "--tertiary-ramps-tertiary-150";
-    readonly "grey-5": "--grey-grey-5";
-    readonly "grey-10": "--grey-grey-10";
-    readonly "grey-20": "--grey-grey-20";
-    readonly "grey-30": "--grey-grey-30";
-    readonly "grey-40": "--grey-grey-40";
-    readonly "grey-50": "--grey-grey-50";
-    readonly "grey-60": "--grey-grey-60";
-    readonly "grey-70": "--grey-grey-70";
-    readonly "grey-80": "--grey-grey-80";
-    readonly "grey-90": "--grey-grey-90";
-    readonly "grey-100": "--grey-grey-100";
-    readonly "grey-110": "--grey-grey-110";
-    readonly "grey-120": "--grey-grey-120";
-    readonly "grey-130": "--grey-grey-130";
-    readonly "grey-140": "--grey-grey-140";
-    readonly "grey-150": "--grey-grey-150";
-    readonly "grey2-50": "--grey2-grey2-50";
-    readonly "grey2-100": "--grey2-grey2-100";
-    readonly "grey2-200": "--grey2-grey2-200";
-    readonly "grey2-300": "--grey2-grey2-300";
-    readonly "grey2-400": "--grey2-grey2-400";
-    readonly "grey2-500": "--grey2-grey2-500";
-    readonly "grey2-600": "--grey2-grey2-600";
-    readonly "grey2-700": "--grey2-grey2-700";
-    readonly "grey2-800": "--grey2-grey2-800";
-    readonly "grey2-900": "--grey2-grey2-900";
-    readonly "grey2-950": "--grey2-grey2-950";
-    readonly "info-50": "--info-info-50";
-    readonly "info-100": "--info-info-100";
-    readonly "info-200": "--info-info-200";
-    readonly "info-300": "--info-info-300";
-    readonly "info-400": "--info-info-400";
-    readonly "info-500": "--info-info-500";
-    readonly "info-600": "--info-info-600";
-    readonly "info-700": "--info-info-700";
-    readonly "info-800": "--info-info-800";
-    readonly "info-900": "--info-info-900";
-    readonly "info-950": "--info-info-950";
-    readonly "success-50": "--success-success-50";
-    readonly "success-100": "--success-success-100";
-    readonly "success-200": "--success-success-200";
-    readonly "success-300": "--success-success-300";
-    readonly "success-400": "--success-success-400";
-    readonly "success-500": "--success-success-500";
-    readonly "success-600": "--success-success-600";
-    readonly "success-700": "--success-success-700";
-    readonly "success-800": "--success-success-800";
-    readonly "success-900": "--success-success-900";
-    readonly "success-950": "--success-success-950";
-    readonly "warning-50": "--warning-warning-50";
-    readonly "warning-100": "--warning-warning-100";
-    readonly "warning-200": "--warning-warning-200";
-    readonly "warning-300": "--warning-warning-300";
-    readonly "warning-400": "--warning-warning-400";
-    readonly "warning-500": "--warning-warning-500";
-    readonly "warning-600": "--warning-warning-600";
-    readonly "warning-700": "--warning-warning-700";
-    readonly "warning-800": "--warning-warning-800";
-    readonly "warning-900": "--warning-warning-900";
-    readonly "warning-950": "--warning-warning-950";
-    readonly "error-50": "--error-error-50";
-    readonly "error-100": "--error-error-100";
-    readonly "error-200": "--error-error-200";
-    readonly "error-300": "--error-error-300";
-    readonly "error-400": "--error-error-400";
-    readonly "error-500": "--error-error-500";
-    readonly "error-600": "--error-error-600";
-    readonly "error-700": "--error-error-700";
-    readonly "error-800": "--error-error-800";
-    readonly "error-900": "--error-error-900";
-    readonly "error-950": "--error-error-950";
-    readonly primary: "--state-color-primary-default";
-    readonly "primary-hover": "--state-color-primary-hover";
-    readonly "primary-stroke": "--state-color-primary-stroke";
-    readonly "primary-hover-bg": "--state-color-primary-hover-bg";
-    readonly "primary-pressed": "--state-color-primary-pressed";
-    readonly "primary-active": "--state-color-primary-active";
-    readonly "primary-text-solid": "--state-color-primary-text-solid";
-    readonly "primary-text-outline": "--state-color-primary-text-outline";
-    readonly "primary-text-hover": "--state-color-primary-text-hover";
-    readonly "primary-text-pressed": "--state-color-primary-text-pressed";
-    readonly secondary: "--state-color-secondary-default";
-    readonly "secondary-hover": "--state-color-secondary-hover";
-    readonly "secondary-stroke": "--state-color-secondary-stroke";
-    readonly "secondary-hover-bg": "--state-color-secondary-hover-bg";
-    readonly "secondary-pressed": "--state-color-secondary-pressed";
-    readonly "secondary-active": "--state-color-secondary-active";
-    readonly "secondary-text-solid": "--state-color-secondary-text-solid";
-    readonly "secondary-text-outline": "--state-color-secondary-text-outline";
-    readonly "secondary-text-hover": "--state-color-secondary-text-hover";
-    readonly "secondary-text-pressed": "--state-color-secondary-text-pressed";
-    readonly tertiary: "--state-color-tertiary-default";
-    readonly "tertiary-hover": "--state-color-tertiary-hover";
-    readonly "tertiary-stroke": "--state-color-tertiary-stroke";
-    readonly "tertiary-hover-bg": "--state-color-tertiary-hover-bg";
-    readonly "tertiary-pressed": "--state-color-tertiary-pressed";
-    readonly "tertiary-active": "--state-color-tertiary-active";
-    readonly "tertiary-text-solid": "--state-color-tertiary-text-solid";
-    readonly "tertiary-text-outline": "--state-color-tertiary-text-outline";
-    readonly "tertiary-text-hover": "--state-color-tertiary-text-hover";
-    readonly "tertiary-text-pressed": "--state-color-tertiary-text-pressed";
-    readonly info: "--state-color-info-default";
-    readonly "info-hover": "--state-color-info-hover";
-    readonly "info-stroke": "--state-color-info-stroke";
-    readonly "info-hover-bg": "--state-color-info-hover-bg";
-    readonly "info-pressed": "--state-color-info-pressed";
-    readonly "info-active": "--state-color-info-active";
-    readonly "info-text-solid": "--state-color-info-text-solid";
-    readonly "info-text-outline": "--state-color-info-text-outline";
-    readonly "info-text-hover": "--state-color-info-text-hover";
-    readonly "info-text-pressed": "--state-color-info-text-pressed";
-    readonly success: "--state-color-success-default";
-    readonly "success-hover": "--state-color-success-hover";
-    readonly "success-stroke": "--state-color-success-stroke";
-    readonly "success-hover-bg": "--state-color-success-hover-bg";
-    readonly "success-pressed": "--state-color-success-pressed";
-    readonly "success-active": "--state-color-success-active";
-    readonly "success-text-solid": "--state-color-success-text-solid";
-    readonly "success-text-outline": "--state-color-success-text-outline";
-    readonly "success-text-hover": "--state-color-success-text-hover";
-    readonly "success-text-pressed": "--state-color-success-text-pressed";
-    readonly warning: "--state-color-warning-default";
-    readonly "warning-hover": "--state-color-warning-hover";
-    readonly "warning-stroke": "--state-color-warning-stroke";
-    readonly "warning-hover-bg": "--state-color-warning-hover-bg";
-    readonly "warning-pressed": "--state-color-warning-pressed";
-    readonly "warning-active": "--state-color-warning-active";
-    readonly "warning-text-solid": "--state-color-warning-text-solid";
-    readonly "warning-text-outline": "--state-color-warning-text-outline";
-    readonly "warning-text-hover": "--state-color-warning-text-hover";
-    readonly "warning-text-pressed": "--state-color-warning-text-pressed";
-    readonly error: "--state-color-error-default";
-    readonly "error-hover": "--state-color-error-hover";
-    readonly "error-stroke": "--state-color-error-stroke";
-    readonly "error-hover-bg": "--state-color-error-hover-bg";
-    readonly "error-pressed": "--state-color-error-pressed";
-    readonly "error-active": "--state-color-error-active";
-    readonly "error-text-solid": "--state-color-error-text-solid";
-    readonly "error-text-outline": "--state-color-error-text-outline";
-    readonly "error-text-hover": "--state-color-error-text-hover";
-    readonly "error-text-pressed": "--state-color-error-text-pressed";
-    readonly "disable-solid": "--state-color-disable-solid";
-    readonly "disable-outline": "--state-color-disable-outline";
+    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";
+    readonly "primary-30": "--ramps-primary-30";
+    readonly "primary-40": "--ramps-primary-40";
+    readonly "primary-50": "--ramps-primary-50";
+    readonly "primary-60": "--ramps-primary-60";
+    readonly "primary-70": "--ramps-primary-70";
+    readonly "primary-80": "--ramps-primary-80";
+    readonly "primary-90": "--ramps-primary-90";
+    readonly "primary-100": "--ramps-primary-100";
+    readonly "primary-110": "--ramps-primary-110";
+    readonly "primary-120": "--ramps-primary-120";
+    readonly "primary-130": "--ramps-primary-130";
+    readonly "primary-140": "--ramps-primary-140";
+    readonly "primary-150": "--ramps-primary-150";
+    readonly "secondary-5": "--ramps-secondary-5";
+    readonly "secondary-10": "--ramps-secondary-10";
+    readonly "secondary-20": "--ramps-secondary-20";
+    readonly "secondary-30": "--ramps-secondary-30";
+    readonly "secondary-40": "--ramps-secondary-40";
+    readonly "secondary-50": "--ramps-secondary-50";
+    readonly "secondary-60": "--ramps-secondary-60";
+    readonly "secondary-70": "--ramps-secondary-70";
+    readonly "secondary-80": "--ramps-secondary-80";
+    readonly "secondary-90": "--ramps-secondary-90";
+    readonly "secondary-100": "--ramps-secondary-100";
+    readonly "secondary-110": "--ramps-secondary-110";
+    readonly "secondary-120": "--ramps-secondary-120";
+    readonly "secondary-130": "--ramps-secondary-130";
+    readonly "secondary-140": "--ramps-secondary-140";
+    readonly "secondary-150": "--ramps-secondary-150";
+    readonly "tertiary-5": "--ramps-tertiary-5";
+    readonly "tertiary-10": "--ramps-tertiary-10";
+    readonly "tertiary-20": "--ramps-tertiary-20";
+    readonly "tertiary-30": "--ramps-tertiary-30";
+    readonly "tertiary-40": "--ramps-tertiary-40";
+    readonly "tertiary-50": "--ramps-tertiary-50";
+    readonly "tertiary-60": "--ramps-tertiary-60";
+    readonly "tertiary-70": "--ramps-tertiary-70";
+    readonly "tertiary-80": "--ramps-tertiary-80";
+    readonly "tertiary-90": "--ramps-tertiary-90";
+    readonly "tertiary-100": "--ramps-tertiary-100";
+    readonly "tertiary-110": "--ramps-tertiary-110";
+    readonly "tertiary-120": "--ramps-tertiary-120";
+    readonly "tertiary-130": "--ramps-tertiary-130";
+    readonly "tertiary-140": "--ramps-tertiary-140";
+    readonly "tertiary-150": "--ramps-tertiary-150";
+    readonly "grey-5": "--ramps-grey-5";
+    readonly "grey-10": "--ramps-grey-10";
+    readonly "grey-20": "--ramps-grey-20";
+    readonly "grey-30": "--ramps-grey-30";
+    readonly "grey-40": "--ramps-grey-40";
+    readonly "grey-50": "--ramps-grey-50";
+    readonly "grey-60": "--ramps-grey-60";
+    readonly "grey-70": "--ramps-grey-70";
+    readonly "grey-80": "--ramps-grey-80";
+    readonly "grey-90": "--ramps-grey-90";
+    readonly "grey-100": "--ramps-grey-100";
+    readonly "grey-110": "--ramps-grey-110";
+    readonly "grey-120": "--ramps-grey-120";
+    readonly "grey-130": "--ramps-grey-130";
+    readonly "grey-140": "--ramps-grey-140";
+    readonly "grey-150": "--ramps-grey-150";
+    readonly "grey2-50": "--ramps-grey2-50";
+    readonly "grey2-100": "--ramps-grey2-100";
+    readonly "grey2-200": "--ramps-grey2-200";
+    readonly "grey2-300": "--ramps-grey2-300";
+    readonly "grey2-400": "--ramps-grey2-400";
+    readonly "grey2-500": "--ramps-grey2-500";
+    readonly "grey2-600": "--ramps-grey2-600";
+    readonly "grey2-700": "--ramps-grey2-700";
+    readonly "grey2-800": "--ramps-grey2-800";
+    readonly "grey2-900": "--ramps-grey2-900";
+    readonly "grey2-950": "--ramps-grey2-950";
+    readonly "info-50": "--ramps-info-50";
+    readonly "info-100": "--ramps-info-100";
+    readonly "info-200": "--ramps-info-200";
+    readonly "info-300": "--ramps-info-300";
+    readonly "info-400": "--ramps-info-400";
+    readonly "info-500": "--ramps-info-500";
+    readonly "info-600": "--ramps-info-600";
+    readonly "info-700": "--ramps-info-700";
+    readonly "info-800": "--ramps-info-800";
+    readonly "info-900": "--ramps-info-900";
+    readonly "info-950": "--ramps-info-950";
+    readonly "success-50": "--ramps-success-50";
+    readonly "success-100": "--ramps-success-100";
+    readonly "success-200": "--ramps-success-200";
+    readonly "success-300": "--ramps-success-300";
+    readonly "success-400": "--ramps-success-400";
+    readonly "success-500": "--ramps-success-500";
+    readonly "success-600": "--ramps-success-600";
+    readonly "success-700": "--ramps-success-700";
+    readonly "success-800": "--ramps-success-800";
+    readonly "success-900": "--ramps-success-900";
+    readonly "success-950": "--ramps-success-950";
+    readonly "warning-50": "--ramps-warning-50";
+    readonly "warning-100": "--ramps-warning-100";
+    readonly "warning-200": "--ramps-warning-200";
+    readonly "warning-300": "--ramps-warning-300";
+    readonly "warning-400": "--ramps-warning-400";
+    readonly "warning-500": "--ramps-warning-500";
+    readonly "warning-600": "--ramps-warning-600";
+    readonly "warning-700": "--ramps-warning-700";
+    readonly "warning-800": "--ramps-warning-800";
+    readonly "warning-900": "--ramps-warning-900";
+    readonly "warning-950": "--ramps-warning-950";
+    readonly "error-50": "--ramps-error-50";
+    readonly "error-100": "--ramps-error-100";
+    readonly "error-200": "--ramps-error-200";
+    readonly "error-300": "--ramps-error-300";
+    readonly "error-400": "--ramps-error-400";
+    readonly "error-500": "--ramps-error-500";
+    readonly "error-600": "--ramps-error-600";
+    readonly "error-700": "--ramps-error-700";
+    readonly "error-800": "--ramps-error-800";
+    readonly "error-900": "--ramps-error-900";
+    readonly "error-950": "--ramps-error-950";
+    readonly primary: "--state-primary-default";
+    readonly "primary-hover": "--state-primary-hover";
+    readonly "primary-stroke": "--state-primary-stroke";
+    readonly "primary-hover-bg": "--state-primary-hover-bg";
+    readonly "primary-pressed": "--state-primary-pressed";
+    readonly "primary-active": "--state-primary-active";
+    readonly "primary-text-solid": "--state-primary-text-solid";
+    readonly "primary-text-outline": "--state-primary-text-outline";
+    readonly "primary-text-hover": "--state-primary-text-hover";
+    readonly "primary-text-pressed": "--state-primary-text-pressed";
+    readonly secondary: "--state-secondary-default";
+    readonly "secondary-hover": "--state-secondary-hover";
+    readonly "secondary-stroke": "--state-secondary-stroke";
+    readonly "secondary-hover-bg": "--state-secondary-hover-bg";
+    readonly "secondary-pressed": "--state-secondary-pressed";
+    readonly "secondary-active": "--state-secondary-active";
+    readonly "secondary-text-solid": "--state-secondary-text-solid";
+    readonly "secondary-text-outline": "--state-secondary-text-outline";
+    readonly "secondary-text-hover": "--state-secondary-text-hover";
+    readonly "secondary-text-pressed": "--state-secondary-text-pressed";
+    readonly tertiary: "--state-tertiary-default";
+    readonly "tertiary-hover": "--state-tertiary-hover";
+    readonly "tertiary-stroke": "--state-tertiary-stroke";
+    readonly "tertiary-hover-bg": "--state-tertiary-hover-bg";
+    readonly "tertiary-pressed": "--state-tertiary-pressed";
+    readonly "tertiary-active": "--state-tertiary-active";
+    readonly "tertiary-text-solid": "--state-tertiary-text-solid";
+    readonly "tertiary-text-outline": "--state-tertiary-text-outline";
+    readonly "tertiary-text-hover": "--state-tertiary-text-hover";
+    readonly "tertiary-text-pressed": "--state-tertiary-text-pressed";
+    readonly info: "--state-info-default";
+    readonly "info-hover": "--state-info-hover";
+    readonly "info-stroke": "--state-info-stroke";
+    readonly "info-hover-bg": "--state-info-hover-bg";
+    readonly "info-pressed": "--state-info-pressed";
+    readonly "info-active": "--state-info-active";
+    readonly "info-text-solid": "--state-info-text-solid";
+    readonly "info-text-outline": "--state-info-text-outline";
+    readonly "info-text-hover": "--state-info-text-hover";
+    readonly "info-text-pressed": "--state-info-text-pressed";
+    readonly success: "--state-success-default";
+    readonly "success-hover": "--state-success-hover";
+    readonly "success-stroke": "--state-success-stroke";
+    readonly "success-hover-bg": "--state-success-hover-bg";
+    readonly "success-pressed": "--state-success-pressed";
+    readonly "success-active": "--state-success-active";
+    readonly "success-text-solid": "--state-success-text-solid";
+    readonly "success-text-outline": "--state-success-text-outline";
+    readonly "success-text-hover": "--state-success-text-hover";
+    readonly "success-text-pressed": "--state-success-text-pressed";
+    readonly warning: "--state-warning-default";
+    readonly "warning-hover": "--state-warning-hover";
+    readonly "warning-stroke": "--state-warning-stroke";
+    readonly "warning-hover-bg": "--state-warning-hover-bg";
+    readonly "warning-pressed": "--state-warning-pressed";
+    readonly "warning-active": "--state-warning-active";
+    readonly "warning-text-solid": "--state-warning-text-solid";
+    readonly "warning-text-outline": "--state-warning-text-outline";
+    readonly "warning-text-hover": "--state-warning-text-hover";
+    readonly "warning-text-pressed": "--state-warning-text-pressed";
+    readonly error: "--state-error-default";
+    readonly "error-hover": "--state-error-hover";
+    readonly "error-stroke": "--state-error-stroke";
+    readonly "error-hover-bg": "--state-error-hover-bg";
+    readonly "error-pressed": "--state-error-pressed";
+    readonly "error-active": "--state-error-active";
+    readonly "error-text-solid": "--state-error-text-solid";
+    readonly "error-text-outline": "--state-error-text-outline";
+    readonly "error-text-hover": "--state-error-text-hover";
+    readonly "error-text-pressed": "--state-error-text-pressed";
+    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";
@@ -1311,15 +1484,15 @@ declare const THEME_COLOR_KEYS: {
     readonly "text-grey-medium": "--text-grey-medium";
     readonly "text-grey-light": "--text-grey-light";
     readonly "text-white": "--text-white";
-    readonly "input-default-text": "--input-color-default-text";
-    readonly "input-default-stroke": "--input-color-default-stroke";
-    readonly "input-filled-text": "--input-color-filled-text";
-    readonly "input-active-stroke": "--input-color-active-stroke";
-    readonly "input-disable-text": "--input-color-disable-text";
-    readonly "input-disable-stroke": "--input-color-disable-stroke";
-    readonly "input-disable-bg": "--input-color-disable-bg";
-    readonly "input-label-bg": "--input-color-label-bg";
-    readonly "input-error": "--input-color-error";
+    readonly "input-default-text": "--input-default-text";
+    readonly "input-default-stroke": "--input-default-stroke";
+    readonly "input-filled-text": "--input-filled-text";
+    readonly "input-active-stroke": "--input-active-stroke";
+    readonly "input-disable-text": "--input-disable-text";
+    readonly "input-disable-stroke": "--input-disable-stroke";
+    readonly "input-disable-bg": "--input-disable-bg";
+    readonly "input-label-bg": "--input-label-bg";
+    readonly "input-error": "--input-error";
     readonly "function-default-solid": "--function-default-solid";
     readonly "function-default-hover": "--function-default-hover";
     readonly "function-default-hover-bg": "--function-default-hover-bg";
@@ -1331,6 +1504,28 @@ 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";
@@ -1342,6 +1537,54 @@ 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";
@@ -1355,72 +1598,72 @@ declare const THEME_COLOR_KEYS: {
     readonly "error-foreground": "--error-foreground";
     readonly "grey-foreground": "--grey-foreground";
     readonly "grey2-foreground": "--grey2-foreground";
-    readonly "primary-transparent-8": "--main-transparency-primary-8";
-    readonly "primary-transparent-12": "--main-transparency-primary-12";
-    readonly "primary-transparent-16": "--main-transparency-primary-16";
-    readonly "primary-transparent-24": "--main-transparency-primary-24";
-    readonly "primary-transparent-32": "--main-transparency-primary-32";
-    readonly "primary-transparent-48": "--main-transparency-primary-48";
-    readonly "secondary-transparent-8": "--main-transparency-secondary-8";
-    readonly "secondary-transparent-12": "--main-transparency-secondary-12";
-    readonly "secondary-transparent-16": "--main-transparency-secondary-16";
-    readonly "secondary-transparent-24": "--main-transparency-secondary-24";
-    readonly "secondary-transparent-32": "--main-transparency-secondary-32";
-    readonly "secondary-transparent-48": "--main-transparency-secondary-48";
-    readonly "tertiary-transparent-8": "--main-transparency-tertiary-8";
-    readonly "tertiary-transparent-12": "--main-transparency-tertiary-12";
-    readonly "tertiary-transparent-16": "--main-transparency-tertiary-16";
-    readonly "tertiary-transparent-24": "--main-transparency-tertiary-24";
-    readonly "tertiary-transparent-32": "--main-transparency-tertiary-32";
-    readonly "tertiary-transparent-48": "--main-transparency-tertiary-48";
-    readonly "info-transparent-8": "--other-transparency-info-8";
-    readonly "info-transparent-12": "--other-transparency-info-12";
-    readonly "info-transparent-16": "--other-transparency-info-16";
-    readonly "info-transparent-24": "--other-transparency-info-24";
-    readonly "info-transparent-32": "--other-transparency-info-32";
-    readonly "info-transparent-48": "--other-transparency-info-48";
-    readonly "success-transparent-8": "--other-transparency-success-8";
-    readonly "success-transparent-12": "--other-transparency-success-12";
-    readonly "success-transparent-16": "--other-transparency-success-16";
-    readonly "success-transparent-24": "--other-transparency-success-24";
-    readonly "success-transparent-32": "--other-transparency-success-32";
-    readonly "success-transparent-48": "--other-transparency-success-48";
-    readonly "warning-transparent-8": "--other-transparency-warning-8";
-    readonly "warning-transparent-12": "--other-transparency-warning-12";
-    readonly "warning-transparent-16": "--other-transparency-warning-16";
-    readonly "warning-transparent-24": "--other-transparency-warning-24";
-    readonly "warning-transparent-32": "--other-transparency-warning-32";
-    readonly "warning-transparent-48": "--other-transparency-warning-48";
-    readonly "error-transparent-8": "--other-transparency-error-8";
-    readonly "error-transparent-12": "--other-transparency-error-12";
-    readonly "error-transparent-16": "--other-transparency-error-16";
-    readonly "error-transparent-24": "--other-transparency-error-24";
-    readonly "error-transparent-32": "--other-transparency-error-32";
-    readonly "error-transparent-48": "--other-transparency-error-48";
-    readonly "grey-transparent-8": "--other-transparency-grey-8";
-    readonly "grey-transparent-12": "--other-transparency-grey-12";
-    readonly "grey-transparent-16": "--other-transparency-grey-16";
-    readonly "grey-transparent-24": "--other-transparency-grey-24";
-    readonly "grey-transparent-32": "--other-transparency-grey-32";
-    readonly "grey-transparent-48": "--other-transparency-grey-48";
-    readonly "grey2-transparent-8": "--other-transparency-grey2-8";
-    readonly "grey2-transparent-12": "--other-transparency-grey2-12";
-    readonly "grey2-transparent-16": "--other-transparency-grey2-16";
-    readonly "grey2-transparent-24": "--other-transparency-grey2-24";
-    readonly "grey2-transparent-32": "--other-transparency-grey2-32";
-    readonly "grey2-transparent-48": "--other-transparency-grey2-48";
-    readonly "white-transparent-8": "--other-transparency-white-08";
-    readonly "white-transparent-12": "--other-transparency-white-12";
-    readonly "white-transparent-16": "--other-transparency-white-16";
-    readonly "white-transparent-24": "--other-transparency-white-24";
-    readonly "white-transparent-32": "--other-transparency-white-32";
-    readonly "white-transparent-48": "--other-transparency-white-48";
-    readonly "black-transparent-8": "--other-transparency-black-08";
-    readonly "black-transparent-12": "--other-transparency-black-12";
-    readonly "black-transparent-16": "--other-transparency-black-16";
-    readonly "black-transparent-24": "--other-transparency-black-24";
-    readonly "black-transparent-32": "--other-transparency-black-32";
-    readonly "black-transparent-48": "--other-transparency-black-48";
+    readonly "primary-transparent-8": "--transparent-primary-8";
+    readonly "primary-transparent-12": "--transparent-primary-12";
+    readonly "primary-transparent-16": "--transparent-primary-16";
+    readonly "primary-transparent-24": "--transparent-primary-24";
+    readonly "primary-transparent-32": "--transparent-primary-32";
+    readonly "primary-transparent-48": "--transparent-primary-48";
+    readonly "secondary-transparent-8": "--transparent-secondary-8";
+    readonly "secondary-transparent-12": "--transparent-secondary-12";
+    readonly "secondary-transparent-16": "--transparent-secondary-16";
+    readonly "secondary-transparent-24": "--transparent-secondary-24";
+    readonly "secondary-transparent-32": "--transparent-secondary-32";
+    readonly "secondary-transparent-48": "--transparent-secondary-48";
+    readonly "tertiary-transparent-8": "--transparent-tertiary-8";
+    readonly "tertiary-transparent-12": "--transparent-tertiary-12";
+    readonly "tertiary-transparent-16": "--transparent-tertiary-16";
+    readonly "tertiary-transparent-24": "--transparent-tertiary-24";
+    readonly "tertiary-transparent-32": "--transparent-tertiary-32";
+    readonly "tertiary-transparent-48": "--transparent-tertiary-48";
+    readonly "info-transparent-8": "--transparent-info-8";
+    readonly "info-transparent-12": "--transparent-info-12";
+    readonly "info-transparent-16": "--transparent-info-16";
+    readonly "info-transparent-24": "--transparent-info-24";
+    readonly "info-transparent-32": "--transparent-info-32";
+    readonly "info-transparent-48": "--transparent-info-48";
+    readonly "success-transparent-8": "--transparent-success-8";
+    readonly "success-transparent-12": "--transparent-success-12";
+    readonly "success-transparent-16": "--transparent-success-16";
+    readonly "success-transparent-24": "--transparent-success-24";
+    readonly "success-transparent-32": "--transparent-success-32";
+    readonly "success-transparent-48": "--transparent-success-48";
+    readonly "warning-transparent-8": "--transparent-warning-8";
+    readonly "warning-transparent-12": "--transparent-warning-12";
+    readonly "warning-transparent-16": "--transparent-warning-16";
+    readonly "warning-transparent-24": "--transparent-warning-24";
+    readonly "warning-transparent-32": "--transparent-warning-32";
+    readonly "warning-transparent-48": "--transparent-warning-48";
+    readonly "error-transparent-8": "--transparent-error-8";
+    readonly "error-transparent-12": "--transparent-error-12";
+    readonly "error-transparent-16": "--transparent-error-16";
+    readonly "error-transparent-24": "--transparent-error-24";
+    readonly "error-transparent-32": "--transparent-error-32";
+    readonly "error-transparent-48": "--transparent-error-48";
+    readonly "grey-transparent-8": "--transparent-grey-8";
+    readonly "grey-transparent-12": "--transparent-grey-12";
+    readonly "grey-transparent-16": "--transparent-grey-16";
+    readonly "grey-transparent-24": "--transparent-grey-24";
+    readonly "grey-transparent-32": "--transparent-grey-32";
+    readonly "grey-transparent-48": "--transparent-grey-48";
+    readonly "grey2-transparent-8": "--transparent-grey2-8";
+    readonly "grey2-transparent-12": "--transparent-grey2-12";
+    readonly "grey2-transparent-16": "--transparent-grey2-16";
+    readonly "grey2-transparent-24": "--transparent-grey2-24";
+    readonly "grey2-transparent-32": "--transparent-grey2-32";
+    readonly "grey2-transparent-48": "--transparent-grey2-48";
+    readonly "white-transparent-8": "--transparent-white-8";
+    readonly "white-transparent-12": "--transparent-white-12";
+    readonly "white-transparent-16": "--transparent-white-16";
+    readonly "white-transparent-24": "--transparent-white-24";
+    readonly "white-transparent-32": "--transparent-white-32";
+    readonly "white-transparent-48": "--transparent-white-48";
+    readonly "black-transparent-8": "--transparent-black-8";
+    readonly "black-transparent-12": "--transparent-black-12";
+    readonly "black-transparent-16": "--transparent-black-16";
+    readonly "black-transparent-24": "--transparent-black-24";
+    readonly "black-transparent-32": "--transparent-black-32";
+    readonly "black-transparent-48": "--transparent-black-48";
 };
 type ThemeColorKey = keyof typeof THEME_COLOR_KEYS;
 /**
@@ -1429,7 +1672,7 @@ type ThemeColorKey = keyof typeof THEME_COLOR_KEYS;
  *
  * @example
  * const primary = getThemeColor('primary');
- * const hex = getThemeColor('--primary-ramps-primary-100');
+ * const hex = getThemeColor('--ramps-primary-100');
  */
 declare function getThemeColor(keyOrVar: ThemeColorKey | string, element?: HTMLElement | Document): string;
 /**
@@ -1452,4 +1695,4 @@ declare const srgbToHex: (color: string) => string;
  */
 declare function getLucideIconNames(): Promise<string[]>;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type Options$1 as Options, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };