@itcase/ui-web 1.9.77 → 1.9.82

package/dist/types/components/Cell/stories/CellDemo.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from '../Cell';
+import { cellMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Cell',
+    component: Cell,
+    args: {
+        appearance: 'surfacePrimary sizeXL full',
+        ...cellMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Demo = {
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};

package/dist/types/components/Cell/stories/CellDirection.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Cell } from '../Cell';
+declare const meta: {
+    title: string;
+    component: typeof Cell;
+    args: {
+        title: string;
+        titleLabel: string;
+        value: string;
+        valueLabel: string;
+        appearance: "surfacePrimary sizeEqualXL full";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Vertical: Story;
+export declare const VerticalReverse: Story;
+export declare const Horizontal: Story;
+export declare const HorizontalReverse: Story;

package/dist/types/components/Cell/stories/CellDirection.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from '../Cell';
+import { cellMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Cell / Direction',
+    component: Cell,
+    args: {
+        appearance: 'surfacePrimary sizeEqualXL full',
+        ...cellMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Vertical = {
+    args: {
+        direction: 'vertical',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const VerticalReverse = {
+    args: {
+        direction: 'verticalReverse',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const Horizontal = {
+    args: {
+        direction: 'horizontal',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const HorizontalReverse = {
+    args: {
+        direction: 'horizontalReverse',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};

package/dist/types/components/Cell/stories/CellReverse.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Cell } from '../Cell';
+declare const meta: {
+    title: string;
+    component: typeof Cell;
+    args: {
+        title: string;
+        titleLabel: string;
+        value: string;
+        valueLabel: string;
+        appearance: "surfacePrimary sizeXL solid";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Reverse: Story;

package/dist/types/components/Cell/stories/CellReverse.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from '../Cell';
+import { cellMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Cell / Reverse',
+    component: Cell,
+    args: {
+        appearance: 'surfacePrimary sizeXL solid',
+        ...cellMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const Reverse = {
+    args: {
+        reverse: true,
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};

package/dist/types/components/Cell/stories/CellSizeEqualHorizontal.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Cell } from '../Cell';
+declare const meta: {
+    title: string;
+    component: typeof Cell;
+    args: {
+        title: string;
+        titleLabel: string;
+        value: string;
+        valueLabel: string;
+        direction: "horizontal";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SizeXL: Story;
+export declare const SizeL: Story;
+export declare const SizeM: Story;
+export declare const SizeS: Story;

package/dist/types/components/Cell/stories/CellSizeEqualHorizontal.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from '../Cell';
+import { cellMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Cell / Size / Equal / Horizontal',
+    component: Cell,
+    args: {
+        direction: 'horizontal',
+        ...cellMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const SizeXL = {
+    args: {
+        appearance: 'surfacePrimary sizeEqualXL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeL = {
+    args: {
+        appearance: 'surfacePrimary sizeEqualL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeM = {
+    args: {
+        appearance: 'surfacePrimary sizeEqualM full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeS = {
+    args: {
+        appearance: 'surfacePrimary sizeEqualS full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};

package/dist/types/components/Cell/stories/CellSizeEqualVertical.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Cell } from '../Cell';
+declare const meta: {
+    title: string;
+    component: typeof Cell;
+    args: {
+        title: string;
+        titleLabel: string;
+        value: string;
+        valueLabel: string;
+        direction: "vertical";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SizeXL: Story;
+export declare const SizeL: Story;
+export declare const SizeM: Story;
+export declare const SizeS: Story;

package/dist/types/components/Cell/stories/CellSizeEqualVertical.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from '../Cell';
+import { cellMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Cell / Size / Equal / Vertical',
+    component: Cell,
+    args: {
+        direction: 'vertical',
+        ...cellMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const SizeXL = {
+    args: {
+        appearance: 'surfacePrimary sizeEqualXL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeL = {
+    args: {
+        appearance: 'surfacePrimary sizeEqualL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeM = {
+    args: {
+        appearance: 'surfacePrimary sizeEqualM full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeS = {
+    args: {
+        appearance: 'surfacePrimary sizeEqualS full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};

package/dist/types/components/Cell/stories/CellSizeHorizontal.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Cell } from '../Cell';
+declare const meta: {
+    title: string;
+    component: typeof Cell;
+    args: {
+        title: string;
+        titleLabel: string;
+        value: string;
+        valueLabel: string;
+        direction: "horizontal";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SizeXL: Story;
+export declare const SizeL: Story;
+export declare const SizeM: Story;
+export declare const SizeS: Story;

package/dist/types/components/Cell/stories/CellSizeHorizontal.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from '../Cell';
+import { cellMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Cell / Size / Horizontal',
+    component: Cell,
+    args: {
+        direction: 'horizontal',
+        ...cellMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const SizeXL = {
+    args: {
+        appearance: 'surfacePrimary sizeXL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeL = {
+    args: {
+        appearance: 'surfacePrimary sizeL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeM = {
+    args: {
+        appearance: 'surfacePrimary sizeM full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeS = {
+    args: {
+        appearance: 'surfacePrimary sizeS full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};

package/dist/types/components/Cell/stories/CellSizeVertical.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Cell } from '../Cell';
+declare const meta: {
+    title: string;
+    component: typeof Cell;
+    args: {
+        title: string;
+        titleLabel: string;
+        value: string;
+        valueLabel: string;
+        direction: "vertical";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SizeXL: Story;
+export declare const SizeL: Story;
+export declare const SizeM: Story;
+export declare const SizeS: Story;

package/dist/types/components/Cell/stories/CellSizeVertical.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from '../Cell';
+import { cellMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Cell / Size / Vertical',
+    component: Cell,
+    args: {
+        direction: 'vertical',
+        ...cellMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const SizeXL = {
+    args: {
+        appearance: 'surfacePrimary sizeXL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeL = {
+    args: {
+        appearance: 'surfacePrimary sizeL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeM = {
+    args: {
+        appearance: 'surfacePrimary sizeM full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const SizeS = {
+    args: {
+        appearance: 'surfacePrimary sizeS full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};

package/dist/types/components/Cell/stories/CellStyle.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Cell } from '../Cell';
+declare const meta: {
+    title: string;
+    component: typeof Cell;
+    args: {
+        title: string;
+        titleLabel: string;
+        value: string;
+        valueLabel: string;
+        direction: "horizontal";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Solid: Story;
+export declare const Outlined: Story;
+export declare const Ghost: Story;
+export declare const Full: Story;

package/dist/types/components/Cell/stories/CellStyle.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from '../Cell';
+import { cellMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Cell / Style',
+    component: Cell,
+    args: {
+        direction: 'horizontal',
+        ...cellMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Solid = {
+    args: {
+        appearance: 'surfacePrimary sizeXL solid',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const Outlined = {
+    args: {
+        appearance: 'surfacePrimary sizeXL outlined',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const Ghost = {
+    args: {
+        appearance: 'surfacePrimary sizeXL ghost',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};
+export const Full = {
+    args: {
+        appearance: 'surfacePrimary sizeXL full',
+    },
+    render: (args) => {
+        return _jsx(Cell, { ...args });
+    },
+};

package/dist/types/components/Cell/stories/__mock__/index.js

@@ -0,0 +1,11 @@
+// "Placeholder" is removed from @itcase/icons.
+// Use url to ".storybook/assets/icons/placeholder.svg"
+const cellMock = {
+    title: 'Title',
+    // titleIcon: icons16.Placeholder,
+    titleLabel: 'Label',
+    value: 'Value',
+    // valueIcon: icons16.Placeholder,
+    valueLabel: 'Label',
+};
+export { cellMock };

package/dist/types/components/Checkbox/Checkbox.appearance.js

@@ -0,0 +1,19 @@
+import { checkboxAppearanceDefault } from './appearance/checkboxDefault';
+import { checkboxAppearanceDisabled } from './appearance/checkboxDisabled';
+import { checkboxAppearanceError } from './appearance/checkboxError';
+import { checkboxAppearanceRequire } from './appearance/checkboxRequire';
+import { checkboxAppearanceShape } from './appearance/checkboxShape';
+import { checkboxAppearanceSize } from './appearance/checkboxSize';
+import { checkboxAppearanceStyle } from './appearance/checkboxStyle';
+import { checkboxAppearanceSuccess } from './appearance/checkboxSuccess';
+const checkboxAppearance = {
+    ...checkboxAppearanceDefault,
+    ...checkboxAppearanceError,
+    ...checkboxAppearanceSuccess,
+    ...checkboxAppearanceRequire,
+    ...checkboxAppearanceDisabled,
+    ...checkboxAppearanceSize,
+    ...checkboxAppearanceStyle,
+    ...checkboxAppearanceShape,
+};
+export { checkboxAppearance };

package/dist/types/components/Checkbox/Checkbox.interface.d.ts

@@ -1,5 +1,5 @@
 import type { ElementType, ReactNode } from 'react';
-import { AppearanceShapeKey, AppearanceSizeKey, AppearanceStateKeysDefault, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, CompositeAppearanceStateDefault, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
+import { AppearanceConfig, AppearanceKeysState, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, CompositeAppearanceStateDefault, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
 import type { StyleAttributes } from '@itcase/ui-core/hooks';
 import { TextProps } from '../Text/Text.interface';
 type CheckboxAppearanceProps = {
@@ -55,12 +55,6 @@ type CheckboxProps = CheckboxAppearanceProps & StyleAttributes & {
     Tag?: ElementType;
     value?: string;
 };
-type CheckboxConfig = {
-    appearance: CheckboxAppearance;
-    setAppearance: (appearanceConfig: CheckboxAppearance) => void;
-};
-type AppearanceKeys = AppearanceShapeKey | AppearanceSizeKey | AppearanceStateKeysDefault | AppearanceStyleKey;
-type CheckboxAppearance = {
-    [key in AppearanceKeys]?: CheckboxAppearanceProps;
-};
+type CheckboxConfig = AppearanceConfig<AppearanceKeysState, CheckboxAppearanceProps>;
+type CheckboxAppearance = CheckboxConfig['appearance'];
 export type { CheckboxAppearance, CheckboxConfig, CheckboxProps };

package/dist/types/components/Checkbox/Checkbox.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Checkbox/Checkbox.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useAppearanceConfig, useDevicePropsGenerator, } from '@itcase/ui-core/hooks';
+import { Text } from 'src/components/Text';
+import { checkboxAppearance } from './Checkbox.appearance';
+const checkboxConfig = {
+    appearance: checkboxAppearance,
+    setAppearance: (appearanceConfig) => {
+        checkboxConfig.appearance = appearanceConfig;
+    },
+};
+function Checkbox(props) {
+    const { id, appearance, className, dataTestId, dataTour, label, desc, checked, disabled, indeterminate, Tag = 'label', value, before, after, isActive, isChecked, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, checkboxConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillCheckboxActiveClass, fillCheckboxActiveHoverClass, fillCheckboxClass, fillCheckboxHoverClass, fillCheckmarkClass, fillClass, fillHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass, borderColorCheckboxClass, borderColorCheckboxHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (_jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, sizeClass && `checkbox_size_${sizeClass}`, !checked
+            ? fillCheckboxClass && `checkbox_fill_${fillCheckboxClass}`
+            : fillCheckboxActiveClass &&
+                `checkbox_fill_active_${fillCheckboxActiveClass}`, !checked
+            ? fillCheckboxHoverClass &&
+                `checkbox_fill_hover_${fillCheckboxHoverClass}`
+            : fillCheckboxActiveHoverClass &&
+                `checkbox_fill_active_hover_${fillCheckboxActiveHoverClass}`, !checked
+            ? borderColorCheckboxClass &&
+                `checkbox_border-color_${borderColorCheckboxClass}`
+            : borderColorCheckboxActiveClass &&
+                `checkbox_border-color_active_${borderColorCheckboxActiveClass}`, !checked
+            ? borderColorCheckboxHoverClass &&
+                `checkbox_border-color_hover_${borderColorCheckboxHoverClass}`
+            : borderColorCheckboxActiveHoverClass &&
+                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `width_${widthClass}`, isSkeleton && `skeleton`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: Tag === 'label' && id, children: [before, _jsxs("div", { className: "checkbox__item", children: [_jsx("input", { id: id, className: "checkbox__input", type: "checkbox", checked: isActive || isChecked || checked, disabled: isDisabled || disabled, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), _jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), _jsx("div", { className: clsx(!indeterminate
+                            ? 'checkbox__state-checkmark'
+                            : 'checkbox__state-indeterminate', (checked || indeterminate) &&
+                            fillCheckmarkClass &&
+                            `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (_jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (_jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && _jsx("div", { className: "checkbox__after", children: after })] }));
+}
+export { Checkbox, checkboxConfig };

package/dist/types/components/Checkbox/appearance/checkboxDefault.js

@@ -0,0 +1,16 @@
+const checkboxAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
+        fillCheckbox: 'surfaceSecondary',
+        fillCheckboxActive: 'surfaceQuaternary',
+        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
+        fillCheckboxHover: 'surfaceHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColorCheckbox: 'surfaceBorderQuaternary',
+        borderColorCheckboxActive: 'surfaceBorderQuaternary',
+        borderColorCheckboxActiveHover: 'surfaceBorderActivePrimary',
+        borderColorCheckboxHover: 'surfaceBorderHoverPrimary',
+    },
+};
+export { checkboxAppearanceDefault };

package/dist/types/components/Checkbox/appearance/checkboxDisabled.js

@@ -0,0 +1,16 @@
+const checkboxAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceSecondary',
+        fillCheckbox: 'surfaceSecondary',
+        fillCheckboxActive: 'surfaceQuaternary',
+        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
+        fillCheckboxHover: 'surfaceHoverTertiary',
+        labelTextColor: 'disabledTextSecondary',
+        descTextColor: 'disabledTextSecondary',
+        borderColorCheckbox: 'surfaceBorderQuaternary',
+        borderColorCheckboxActive: 'surfaceBorderQuaternary',
+        borderColorCheckboxActiveHover: 'surfaceBorderActivePrimary',
+        borderColorCheckboxHover: 'surfaceBorderHoverPrimary',
+    },
+};
+export { checkboxAppearanceDisabled };

package/dist/types/components/Checkbox/appearance/checkboxError.js

@@ -0,0 +1,16 @@
+const checkboxAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        fillCheckbox: 'errorTertiary',
+        fillCheckboxActive: 'errorQuaternary',
+        fillCheckboxActiveHover: 'errorActiveHoverPrimary',
+        fillCheckboxHover: 'errorHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColorCheckbox: 'errorBorderQuaternary',
+        borderColorCheckboxActive: 'errorBorderActiveQuaternary',
+        borderColorCheckboxActiveHover: 'errorBorderActivePrimary',
+        borderColorCheckboxHover: 'errorBorderHoverPrimary',
+    },
+};
+export { checkboxAppearanceError };

package/dist/types/components/Checkbox/appearance/checkboxRequire.js

@@ -0,0 +1,16 @@
+const checkboxAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        fillCheckbox: 'warningTertiary',
+        fillCheckboxActive: 'warningPrimary',
+        fillCheckboxActiveHover: 'warningActiveHoverPrimary',
+        fillCheckboxHover: 'warningHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColorCheckbox: 'warningBorderSecondary',
+        borderColorCheckboxActive: 'warningBorderSecondary',
+        borderColorCheckboxActiveHover: 'warningBorderActivePrimary',
+        borderColorCheckboxHover: 'warningBorderHoverPrimary',
+    },
+};
+export { checkboxAppearanceRequire };