@rovula/ui 0.1.7 → 0.1.8

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/types/components/Form/ValidationHintList.d.ts

@@ -0,0 +1,17 @@
+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 ValidationHintListProps<TValues> = {
+    values: TValues;
+    rules: ValidationHintRule<TValues>[];
+    mode?: ValidationHintMode;
+    className?: string;
+    itemClassName?: string;
+};
+export declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, }: ValidationHintListProps<TValues>) => import("react/jsx-runtime").JSX.Element;
+export default ValidationHintList;

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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";