@itcase/ui 1.9.56 → 1.9.57

package/dist/components/Button/appearance/buttonStyle.js

@@ -0,0 +1,14 @@
+const buttonAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { buttonAppearanceStyle };

package/dist/components/Button/appearance/buttonSuccess.js

@@ -0,0 +1,24 @@
+const buttonAppearanceSuccess = {
+    successMutedPrimary: {
+        fill: 'successTertiary',
+        fillHover: 'successHoverPrimary',
+        labelTextColor: 'successTextQuaternary',
+        labelTextColorHover: 'successTextQuaternary',
+        borderColor: 'successBorderQuaternary',
+        iconAfterFillIcon: 'successItemQuaternary',
+        iconBeforeFillIcon: 'successItemQuaternary',
+        iconFillIcon: 'successItemQuaternary',
+        loaderAppearance: 'successTertiary',
+    },
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successHoverPrimary',
+        labelTextColor: 'successTextPrimary',
+        labelTextColorHover: 'successTextPrimary',
+        iconAfterFillIcon: 'successItemPrimary',
+        iconBeforeFillIcon: 'successItemPrimary',
+        iconFillIcon: 'successItemPrimary',
+        loaderAppearance: 'successPrimary',
+    },
+};
+export { buttonAppearanceSuccess };

package/dist/components/Button/appearance/buttonSurface.js

@@ -0,0 +1,52 @@
+const buttonAppearanceSurface = {
+    surfaceMutedPrimary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconAfterFillIcon: 'surfaceItemQuaternary',
+        iconBeforeFillIcon: 'surfaceItemQuaternary',
+        iconFillIcon: 'surfaceItemQuaternary',
+        loaderAppearance: 'surfaceTertiary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+        iconFillIcon: 'surfaceItemPrimary',
+        loaderAppearance: 'surfacePrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+        iconFillIcon: 'surfaceItemPrimary',
+        loaderAppearance: 'surfacePrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+        iconFillIcon: 'surfaceItemPrimary',
+        loaderAppearance: 'surfacePrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+        iconFillIcon: 'surfaceItemPrimary',
+        loaderAppearance: 'surfacePrimary',
+    },
+};
+export { buttonAppearanceSurface };

package/dist/components/Button/appearance/buttonWarning.js

@@ -0,0 +1,24 @@
+const buttonAppearanceWarning = {
+    warningMutedPrimary: {
+        fill: 'warningTertiary',
+        fillHover: 'warningHoverPrimary',
+        labelTextColor: 'warningTextSecondary',
+        labelTextColorHover: 'warningTextPrimary',
+        borderColor: 'warningBorderPrimary',
+        iconAfterFillIcon: 'warningItemSecondary',
+        iconBeforeFillIcon: 'warningItemSecondary',
+        iconFillIcon: 'warningItemSecondary',
+        loaderAppearance: 'warningTertiary',
+    },
+    warningPrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningHoverPrimary',
+        labelTextColor: 'warningTextPrimary',
+        labelTextColorHover: 'warningTextPrimary',
+        iconAfterFillIcon: 'warningItemPrimary',
+        iconBeforeFillIcon: 'warningItemPrimary',
+        iconFillIcon: 'warningItemPrimary',
+        loaderAppearance: 'warningPrimary',
+    },
+};
+export { buttonAppearanceWarning };

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+export { Button, buttonConfig } from './Button';
+export { buttonAppearance } from './Button.appearance';

package/dist/components/Cell/Cell.appearance.js

@@ -0,0 +1,9 @@
+import { cellAppearanceSize } from './appearance/cellSize';
+import { cellAppearanceStyle } from './appearance/cellStyle';
+import { cellAppearanceSurface } from './appearance/cellSurface';
+const cellAppearance = {
+    ...cellAppearanceSize,
+    ...cellAppearanceStyle,
+    ...cellAppearanceSurface,
+};
+export { cellAppearance };

package/dist/components/Cell/Cell.interface.js

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

package/dist/components/Cell/Cell.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { mergeAppearanceKeys } from 'src/utils';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { Label } from 'src/components/Label';
+import { Text } from 'src/components/Text';
+import { cellAppearance } from './Cell.appearance';
+const cellConfig = {
+    appearance: cellAppearance,
+    setAppearance: (appearanceConfig) => {
+        cellConfig.appearance = appearanceConfig;
+    },
+};
+function Cell(props) {
+    const { appearance, className, dataTestId, dataTour, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, cellConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, titleIconFill, titleIconFillHover, titleIconFillSize, titleIconItemFill, titleIconShape, titleIconSrc, titleLabelAppearance, titleLabelAppearanceSize, titleLabelShape, titleLabelSize, titleLabelTextSize, titleTextColor, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWrap, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, reverseClass, shapeClass, sizeClass, valueIconFill, valueIconFillHover, valueIconFillSize, valueIconItemFill, valueIconShape, valueIconSrc, valueLabel, valueLabelAppearance, valueLabelAppearanceSize, valueLabelShape, valueLabelSize, valueLabelTextSize, valueTextAlign, valueTextColor, valueTextSize, valueTextTruncate, valueTextWeight, valueTextWrap, widthClass, zeroGap, zeroPadding, } = propsGenerator;
+    const { data: dataStyles, styles: cellStyles } = useStyles(props);
+    return (_jsxs("div", { className: clsx(className, 'cell', sizeClass && `cell_size_${sizeClass}`, !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, !isActive
+            ? borderColorClass && `border-color_${borderColorClass}`
+            : borderColorActiveClass &&
+                `border-color_active_${borderColorActiveClass}`, !isActive
+            ? borderColorHoverClass &&
+                `border-color_hover_${borderColorHoverClass}`
+            : borderColorActiveHoverClass &&
+                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), "data-testid": dataTestId, "data-tour": dataTour, style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && _jsx("div", { className: "cell__before", children: before }), _jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (_jsxs("div", { className: "cell__data", style: dataStyles, children: [_jsx(Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (_jsx(Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (_jsx(Label, { appearance: mergeAppearanceKeys(titleLabelAppearance, titleLabelAppearanceSize), className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (_jsxs("div", { className: "cell__data", style: dataStyles, children: [_jsx(Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (_jsx(Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (_jsx(Label, { appearance: mergeAppearanceKeys(valueLabelAppearance, valueLabelAppearanceSize), className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && _jsx("div", { className: "cell__after", children: after })] }));
+}
+export { Cell, cellConfig };

package/dist/components/Cell/appearance/cellSize.js

@@ -0,0 +1,59 @@
+const cellAppearanceSize = {
+    sizeXL: {
+        size: 'xl',
+        titleLabelAppearanceSize: 'sizeXS',
+        titleTextSize: 'l',
+        valueLabelAppearanceSize: 'sizeS',
+        valueTextSize: 'xl',
+    },
+    sizeL: {
+        size: 'l',
+        titleLabelAppearanceSize: 'sizeXS',
+        titleTextSize: 'm',
+        valueLabelAppearanceSize: 'sizeS',
+        valueTextSize: 'l',
+    },
+    sizeM: {
+        size: 'm',
+        titleLabelAppearanceSize: 'sizeXS',
+        titleTextSize: 's',
+        valueLabelAppearanceSize: 'sizeS',
+        valueTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        titleLabelAppearanceSize: 'sizeXS',
+        titleTextSize: 'xs',
+        valueLabelAppearanceSize: 'sizeS',
+        valueTextSize: 's',
+    },
+    sizeEqualL: {
+        size: 'l',
+        titleLabelAppearanceSize: 'sizeS',
+        titleTextSize: 'l',
+        valueLabelAppearanceSize: 'sizeS',
+        valueTextSize: 'l',
+    },
+    sizeEqualM: {
+        size: 'm',
+        titleLabelAppearanceSize: 'sizeS',
+        titleTextSize: 'm',
+        valueLabelAppearanceSize: 'sizeS',
+        valueTextSize: 'm',
+    },
+    sizeEqualS: {
+        size: 's',
+        titleLabelAppearanceSize: 'sizeXS',
+        titleTextSize: 's',
+        valueLabelAppearanceSize: 'sizeXS',
+        valueTextSize: 's',
+    },
+    sizeEqualXL: {
+        size: 'xl',
+        titleLabelAppearanceSize: 'sizeS',
+        titleTextSize: 'xl',
+        valueLabelAppearanceSize: 'sizeS',
+        valueTextSize: 'xl',
+    },
+};
+export { cellAppearanceSize };

package/dist/components/Cell/appearance/cellStyle.js

@@ -0,0 +1,14 @@
+const cellAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { cellAppearanceStyle };

package/dist/components/Cell/appearance/cellSurface.js

@@ -0,0 +1,51 @@
+const cellAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimary',
+        titleIconItemFill: 'surfaceItemPrimary',
+        titleLabelAppearance: 'accentPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        valueIconItemFill: 'surfaceItemPrimary',
+        valueLabelAppearance: 'accentPrimary',
+        valueTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternary',
+        titleIconItemFill: 'surfaceItemPrimary',
+        titleLabelAppearance: 'accentPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        valueIconItemFill: 'surfaceItemPrimary',
+        valueLabelAppearance: 'accentPrimary',
+        valueTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondary',
+        titleIconItemFill: 'surfaceItemPrimary',
+        titleLabelAppearance: 'accentPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        valueIconItemFill: 'surfaceItemPrimary',
+        valueLabelAppearance: 'accentPrimary',
+        valueTextColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiary',
+        titleIconItemFill: 'surfaceItemPrimary',
+        titleLabelAppearance: 'accentPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        valueIconItemFill: 'surfaceItemPrimary',
+        valueLabelAppearance: 'accentPrimary',
+        valueTextColor: 'surfaceTextPrimary',
+    },
+};
+export { cellAppearanceSurface };

package/dist/components/Cell/index.js

@@ -0,0 +1,2 @@
+export { Cell, cellConfig } from './Cell';
+export { cellAppearance } from './Cell.appearance';

package/dist/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/components/Checkbox/Checkbox.interface.js

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

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Text } from 'src/components/Text';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+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 && `checkbox_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/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/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/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/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 };

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

@@ -0,0 +1,10 @@
+const checkboxAppearanceShape = {
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { checkboxAppearanceShape };

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

@@ -0,0 +1,23 @@
+const checkboxAppearanceSize = {
+    sizeXL: {
+        size: 'xl',
+        labelTextSize: 'm',
+        descTextSize: 'xs',
+    },
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'm',
+        descTextSize: 'xs',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        descTextSize: 'xs',
+    },
+    sizeS: {
+        size: 'xs',
+        labelTextSize: 's',
+        descTextSize: 'xs',
+    },
+};
+export { checkboxAppearanceSize };

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

@@ -0,0 +1,22 @@
+const checkboxAppearanceStyle = {
+    solid: {
+        borderColorCheckbox: 'none',
+        borderColorCheckboxActive: 'none',
+        borderColorCheckboxActiveHover: 'none',
+        borderColorCheckboxHover: 'none',
+    },
+    outlined: {
+        fill: 'none',
+        fillHover: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        fillHover: 'none',
+        borderColorCheckbox: 'none',
+        borderColorCheckboxActive: 'none',
+        borderColorCheckboxActiveHover: 'none',
+        borderColorCheckboxHover: 'none',
+    },
+};
+export { checkboxAppearanceStyle };

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

@@ -0,0 +1,16 @@
+const checkboxAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        fillCheckbox: 'successTertiary',
+        fillCheckboxActive: 'successSecondary',
+        fillCheckboxActiveHover: 'successActiveHoverPrimary',
+        fillCheckboxHover: 'successHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColorCheckbox: 'successBorderSecondary',
+        borderColorCheckboxActive: 'successBorderSecondary',
+        borderColorCheckboxActiveHover: 'successBorderActivePrimary',
+        borderColorCheckboxHover: 'successBorderHoverPrimary',
+    },
+};
+export { checkboxAppearanceSuccess };

package/dist/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox, checkboxConfig } from './Checkbox';
+export { checkboxAppearance } from './Checkbox.appearance';

package/dist/components/Checkmark/Checkmark.appearance.js

@@ -0,0 +1,15 @@
+import { checkmarkAppearanceAccent } from './appearance/checkmarkAccent';
+import { checkmarkAppearanceDisabled } from './appearance/checkmarkDisabled';
+import { checkmarkAppearanceError } from './appearance/checkmarkError';
+import { checkmarkAppearanceSize } from './appearance/checkmarkSize';
+import { checkmarkAppearanceStyle } from './appearance/checkmarkStyle';
+import { checkmarkAppearanceSurface } from './appearance/checkmarkSurface';
+const checkmarkAppearance = {
+    ...checkmarkAppearanceAccent,
+    ...checkmarkAppearanceDisabled,
+    ...checkmarkAppearanceStyle,
+    ...checkmarkAppearanceSurface,
+    ...checkmarkAppearanceSize,
+    ...checkmarkAppearanceError,
+};
+export { checkmarkAppearance };

package/dist/components/Checkmark/Checkmark.interface.js

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

package/dist/components/Checkmark/Checkmark.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from '../Icon';
+import { checkmarkAppearance } from './Checkmark.appearance';
+const checkmarkConfig = {
+    appearance: checkmarkAppearance,
+    setAppearance: (appearanceConfig) => {
+        checkmarkConfig.appearance = appearanceConfig;
+    },
+};
+function Checkmark(props) {
+    const { appearance, className, dataTestId, dataTour, isActive, isChecked, isDisabled = false, onClick, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, checkmarkConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, checkmarkFill, checkmarkIcon, checkmarkIconFill, checkmarkIconShape, checkmarkIconSize, checkmarkIconSrc, sizeClass, } = propsGenerator;
+    const { styles: checkmarkStyles } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'checkmark', sizeClass && `checkmark_size_${sizeClass}`, !isChecked || !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isChecked || !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, !isChecked || !isActive
+            ? borderColorClass && `border-color_${borderColorClass}`
+            : borderColorActiveClass &&
+                `border-color_active_${borderColorActiveClass}`, !isChecked || !isActive
+            ? borderColorHoverClass &&
+                `border-color_hover_${borderColorHoverClass}`
+            : borderColorActiveHoverClass &&
+                `border-color_active_hover_${borderColorActiveHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, isDisabled), "data-testid": dataTestId, "data-tour": dataTour, style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (_jsx(Icon, { fill: checkmarkFill, iconFill: checkmarkIconFill, iconSize: checkmarkIconSize, imageSrc: checkmarkIconSrc, shape: checkmarkIconShape, SvgImage: checkmarkIcon })) }));
+}
+export { Checkmark, checkmarkConfig };

package/dist/components/Checkmark/appearance/checkmarkAccent.js

@@ -0,0 +1,10 @@
+const checkmarkAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentPrimary',
+        borderColor: 'accentBorderPrimary',
+        borderWidth: '2',
+        checkmarkIconFill: 'accentItemPrimary',
+    },
+};
+export { checkmarkAppearanceAccent };

package/dist/components/Checkmark/appearance/checkmarkDisabled.js

@@ -0,0 +1,10 @@
+const checkmarkAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceDisabled',
+        fillActive: 'surfaceDisabled',
+        borderColor: 'surfaceBorderDisabled',
+        borderWidth: '2',
+        checkmarkIconFill: 'surfaceItemDisabled',
+    },
+};
+export { checkmarkAppearanceDisabled };

package/dist/components/Checkmark/appearance/checkmarkError.js

@@ -0,0 +1,10 @@
+const checkmarkAppearanceError = {
+    errorPrimary: {
+        fill: 'extraPrimary',
+        fillActive: 'extraActivePrimary',
+        borderColor: 'extraBorderTertiary',
+        borderWidth: '2',
+        checkmarkIconFill: 'extraItemPrimary',
+    },
+};
+export { checkmarkAppearanceError };