@itcase/ui 1.9.51 → 1.9.52

package/dist/cjs/hooks/useStyles/useStyles.js

@@ -24,167 +24,181 @@ require('../../utils/setViewportProperty.js');
  * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
  */
 function useStyles(props) {
-  const {
-    deviceCurrentMainType,
-    deviceCurrentType,
-    deviceTypesList
-  } = UIContext.useUserDeviceContext();
-  const propsStyleAttributes = React.useMemo(() => {
-    const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
-      const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
-      if (styleAttributeKey) {
-        result[propKey] = propValue;
-      }
-      return result;
-    }, {});
-    return styles;
-    // "props" object maybe big and frequently changing
-  }, [props]);
-  const collectedStyles = React.useMemo(() => {
-    const resultStylesGroups = {};
-    for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
-      let value = null;
-      const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
-      const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
-      // e.g. "GridWrapperInner"
-      const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
-      const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
-      if (!resultStylesGroups[targetElementGroupKey]) {
-        resultStylesGroups[targetElementGroupKey] = {};
-      }
-      if (isStyleForCurrentDevice) {
-        value = propValue;
-      } else {
-        const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
-        const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${upperFirst(deviceCurrentMainType)}`;
-        const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
-        let currentValue = resultStylesGroups[targetElementGroupKey][styleAttributeKey];
-        if (propKeyWithOutDeviceType.includes('Horizontal')) {
-          const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
-          currentValue = resultStylesGroups[targetElementGroupKey][keyLeft];
-        } else if (propKeyWithOutDeviceType.includes('Vertical')) {
-          const keyTop = styleAttributeKey.replace('Vertical', 'Top');
-          currentValue = resultStylesGroups[targetElementGroupKey][keyTop];
+    const { deviceCurrentMainType, deviceCurrentType, deviceTypesList } = UIContext.useUserDeviceContext();
+    const propsStyleAttributes = React.useMemo(() => {
+        const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
+            const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
+            if (styleAttributeKey) {
+                result[propKey] = propValue;
+            }
+            return result;
+        }, {});
+        return styles;
+        // "props" object maybe big and frequently changing
+    }, [props]);
+    const collectedStyles = React.useMemo(() => {
+        const resultStylesGroups = {};
+        for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
+            let value = null;
+            const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
+            const isStyleForCurrentDevice = propKey
+                .toLowerCase()
+                .endsWith(deviceCurrentType.toLowerCase());
+            // e.g. "GridWrapperInner"
+            const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
+            const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
+            if (!resultStylesGroups[targetElementGroupKey]) {
+                resultStylesGroups[targetElementGroupKey] = {};
+            }
+            if (isStyleForCurrentDevice) {
+                value = propValue;
+            }
+            else {
+                const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
+                const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${upperFirst(deviceCurrentMainType)}`;
+                const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
+                let currentValue = resultStylesGroups[targetElementGroupKey][styleAttributeKey];
+                if (propKeyWithOutDeviceType.includes('Horizontal')) {
+                    const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
+                    currentValue =
+                        resultStylesGroups[targetElementGroupKey][keyLeft];
+                }
+                else if (propKeyWithOutDeviceType.includes('Vertical')) {
+                    const keyTop = styleAttributeKey.replace('Vertical', 'Top');
+                    currentValue =
+                        resultStylesGroups[targetElementGroupKey][keyTop];
+                }
+                if (!currentValue) {
+                    value = defaultValue;
+                }
+            }
+            if (value) {
+                // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
+                const isValueHasUnit = /\D/.test(value);
+                // If value has some unit
+                if (isValueHasUnit) {
+                    // Check value on our custom "m"(module) unit
+                    /** Pattern for:
+                     * 1m
+                     * 1.5m
+                     * 1m 1m 1.5m
+                     * 0 0 1m 1m
+                     */
+                    const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
+                    // If value has module unit
+                    if (isValueHasModuleUnit) {
+                        /** Order for shorthand properties:
+                         *   top
+                         *   right
+                         *   bottom
+                         *   left
+                         * or:
+                         *   top
+                         *   right and left
+                         *   bottom
+                         * or:
+                         *   top and bottom
+                         *   right and left
+                         */
+                        const valuePxPartsList = value
+                            .split(' ')
+                            .map((valuePart) => {
+                            const valueModule = valuePart.replace(/[a-z]/gi, '');
+                            const valuePx = parseFloat(valueModule) * 8;
+                            return `${valuePx}px`;
+                        }, []);
+                        value = valuePxPartsList.join(' ');
+                    }
+                }
+                else {
+                    // Some properties doesn't have any units
+                    const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
+                    if (!ignorePX) {
+                        // Add px to non-unit value
+                        value = `${value}px`;
+                    }
+                }
+                if (styleAttributeKey.includes('Horizontal')) {
+                    const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
+                    const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
+                    const valuePartsList = value.split(' ');
+                    const valueRight = valuePartsList[0];
+                    const valueLeft = valuePartsList[1] || valuePartsList[0];
+                    resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
+                    resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
+                }
+                else if (styleAttributeKey.includes('Vertical')) {
+                    const keyTop = styleAttributeKey.replace('Vertical', 'Top');
+                    const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
+                    const valuePartsList = value.split(' ');
+                    const valueTop = valuePartsList[0];
+                    const valueBottom = valuePartsList[1] || valuePartsList[0];
+                    resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
+                    resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
+                }
+                else {
+                    resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
+                }
+            }
         }
-        if (!currentValue) {
-          value = defaultValue;
-        }
-      }
-      if (value) {
-        // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
-        const isValueHasUnit = /\D/.test(value);
-        // If value has some unit
-        if (isValueHasUnit) {
-          // Check value on our custom "m"(module) unit
-          /** Pattern for:
-           * 1m
-           * 1.5m
-           * 1m 1m 1.5m
-           * 0 0 1m 1m
-           */
-          const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
-          // If value has module unit
-          if (isValueHasModuleUnit) {
-            /** Order for shorthand properties:
-             *   top
-             *   right
-             *   bottom
-             *   left
-             * or:
-             *   top
-             *   right and left
-             *   bottom
-             * or:
-             *   top and bottom
-             *   right and left
-             */
-            const valuePxPartsList = value.split(' ').map(valuePart => {
-              const valueModule = valuePart.replace(/[a-z]/gi, '');
-              const valuePx = parseFloat(valueModule) * 8;
-              return `${valuePx}px`;
-            }, []);
-            value = valuePxPartsList.join(' ');
-          }
-        } else {
-          // Some properties doesn't have any units
-          const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
-          if (!ignorePX) {
-            // Add px to non-unit value
-            value = `${value}px`;
-          }
-        }
-        if (styleAttributeKey.includes('Horizontal')) {
-          const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
-          const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
-          const valuePartsList = value.split(' ');
-          const valueRight = valuePartsList[0];
-          const valueLeft = valuePartsList[1] || valuePartsList[0];
-          resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
-          resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
-        } else if (styleAttributeKey.includes('Vertical')) {
-          const keyTop = styleAttributeKey.replace('Vertical', 'Top');
-          const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
-          const valuePartsList = value.split(' ');
-          const valueTop = valuePartsList[0];
-          const valueBottom = valuePartsList[1] || valuePartsList[0];
-          resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
-          resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
-        } else {
-          resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
-        }
-      }
-    }
-    return resultStylesGroups;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [deviceCurrentMainType, deviceCurrentType, ...Object.values(propsStyleAttributes)]);
-  return collectedStyles;
+        return resultStylesGroups;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        deviceCurrentMainType,
+        deviceCurrentType,
+        ...Object.values(propsStyleAttributes),
+    ]);
+    return collectedStyles;
 }
 const removeDeviceType = (originalKey, deviceTypesList) => {
-  // Remove "mobile"/"tablet"/"desktop"
-  const withOutDeviceType = deviceTypesList.reduce((cleanKey, deviceType) => {
-    if (cleanKey.endsWith(upperFirst(deviceType))) {
-      return cleanKey.replace(upperFirst(deviceType), '');
-    }
-    return cleanKey;
-  }, originalKey);
-  return withOutDeviceType;
+    // Remove "mobile"/"tablet"/"desktop"
+    const withOutDeviceType = deviceTypesList.reduce((cleanKey, deviceType) => {
+        if (cleanKey.endsWith(upperFirst(deviceType))) {
+            return cleanKey.replace(upperFirst(deviceType), '');
+        }
+        return cleanKey;
+    }, originalKey);
+    return withOutDeviceType;
 };
 const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
-  // Collect list of possible styles for propKey. e.g:
-  // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
-  const possibleStyleAttributesList = styleAttributes.default.filter(styleAttribute => {
-    // Attribute can be array with key on first position and params on second
-    if (Array.isArray(styleAttribute)) {
-      // First item always attribute key (e.g. border, width, etc)
-      const styleAttributeKey = styleAttribute[0];
-      // Second item always params with some settings or methods
-      const styleAttributeParams = styleAttribute[1] || {};
-      // If is target attribute key
-      if (styleKey.startsWith(styleAttributeKey)) {
-        // If target attribute params has validate method
-        if (styleAttributeParams.validate) {
-          // Return validation result for target attribute
-          return styleAttributeParams.validate(styleValue);
-        } else {
-          // Or always add to list
-          return true;
+    // Collect list of possible styles for propKey. e.g:
+    // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
+    const possibleStyleAttributesList = styleAttributes.default.filter((styleAttribute) => {
+        // Attribute can be array with key on first position and params on second
+        if (Array.isArray(styleAttribute)) {
+            // First item always attribute key (e.g. border, width, etc)
+            const styleAttributeKey = styleAttribute[0];
+            // Second item always params with some settings or methods
+            const styleAttributeParams = styleAttribute[1] || {};
+            // If is target attribute key
+            if (styleKey.startsWith(styleAttributeKey)) {
+                // If target attribute params has validate method
+                if (styleAttributeParams.validate) {
+                    // Return validation result for target attribute
+                    return styleAttributeParams.validate(styleValue);
+                }
+                else {
+                    // Or always add to list
+                    return true;
+                }
+            }
+            else {
+                // Else ignore
+                return false;
+            }
+        }
+        else {
+            // If is target attribute
+            return styleKey.startsWith(String(styleAttribute));
         }
-      } else {
-        // Else ignore
-        return false;
-      }
-    } else {
-      // If is target attribute
-      return styleKey.startsWith(styleAttribute);
-    }
-  });
-  // Get longest style key (e.g. "borderLeftWidth")
-  const targetStyleAttribute = maxBy(possibleStyleAttributesList, styleAttribute => {
-    const key = index_helpers.getStyleAttributeKey(styleAttribute);
-    return key.length;
-  });
-  const styleAttributeKey = index_helpers.getStyleAttributeKey(targetStyleAttribute);
-  return styleAttributeKey;
+    });
+    // Get longest style key (e.g. "borderLeftWidth")
+    const targetStyleAttribute = maxBy(possibleStyleAttributesList, (styleAttribute) => {
+        const key = index_helpers.getStyleAttributeKey(styleAttribute);
+        return key.length;
+    });
+    const styleAttributeKey = index_helpers.getStyleAttributeKey(targetStyleAttribute);
+    return styleAttributeKey;
 };
 
 exports.useStyles = useStyles;

package/dist/cjs/utils/mergeAppearanceKeys.js

@@ -1,5 +1,18 @@
 'use strict';
 
-const mergeAppearanceKeys = (...values) => values.join(' ');
+/**
+ * @example
+ * mergeAppearanceKeys(' ', '1', undefined, '2', '1') === '1 2'
+ */
+const mergeAppearanceKeys = (...appearances) => {
+    const trimmedAppearances = appearances
+        .map((appearance) => appearance?.trim())
+        .filter(Boolean);
+    if (trimmedAppearances.length < 2) {
+        return trimmedAppearances[0] ?? '';
+    }
+    const uniqueAppearances = Array.from(new Set(trimmedAppearances));
+    return uniqueAppearances.join(' ');
+};
 
 exports.mergeAppearanceKeys = mergeAppearanceKeys;

package/dist/components/Avatar.js

@@ -1,4 +1,4 @@
-export { A as Avatar, a as avatarAppearance, b as avatarConfig } from '../Avatar_es_B2gMldVe.js';
+export { A as Avatar, a as avatarAppearance, b as avatarConfig } from '../Avatar_es_CV-ffIJu.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -24,4 +24,4 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Link_es_BDAmhIzd.js';
 import '../Text_es_DVNvU0m0.js';
-import '../Image_es_Ca7UQOkj.js';
+import '../Image_es_DpOCNWpn.js';

package/dist/components/AvatarStack.js

@@ -4,7 +4,7 @@ import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { A as Avatar } from '../Avatar_es_B2gMldVe.js';
+import { A as Avatar } from '../Avatar_es_CV-ffIJu.js';
 import { G as Group } from '../Group_es_Y1qBBLZU.js';
 import { T as Text } from '../Text_es_DVNvU0m0.js';
 import 'react';
@@ -26,7 +26,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../Link_es_BDAmhIzd.js';
-import '../Image_es_Ca7UQOkj.js';
+import '../Image_es_DpOCNWpn.js';
 
 const avatarStackAppearanceSize = {
     size16: {

package/dist/components/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { T as Text } from '../Text_es_DVNvU0m0.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_DVNvU0m0.js';
+import '../hooks/useStyles/useStyles.js';
 import 'react';
 import 'lodash/camelCase';
-import 'lodash/castArray';
+import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
@@ -16,79 +17,79 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../hooks/useStyles/useStyles.js';
-import 'lodash/maxBy';
+import 'lodash/castArray';
 
 const checkboxAppearanceDefault = {
     defaultPrimary: {
+        fill: 'surfaceSecondary',
         fillCheckbox: 'surfaceSecondary',
-        fillCheckboxActive: 'surfaceSecondary',
-        fillCheckboxActiveHover: 'surfaceTertiary',
+        fillCheckboxActive: 'surfaceQuaternary',
+        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
         fillCheckboxHover: 'surfaceHoverTertiary',
-        fillCheckmark: 'surfacePrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
-        borderColorCheckbox: 'surfaceBorderPrimary',
-        borderColorCheckboxActive: 'surfaceBorderPrimary',
-        borderColorCheckboxActiveHover: 'surfaceBorderPrimary',
+        borderColorCheckbox: 'surfaceBorderQuaternary',
+        borderColorCheckboxActive: 'surfaceBorderQuaternary',
+        borderColorCheckboxActiveHover: 'surfaceBorderActivePrimary',
         borderColorCheckboxHover: 'surfaceBorderHoverPrimary',
     },
 };
 
 const checkboxAppearanceDisabled = {
     disabledPrimary: {
-        fill: 'surfacePrimary',
-        borderColor: 'errorBorderQuaternary',
-        borderHover: 'errorBorderHoverQuaternary',
-        textColor: 'surfaceTextQuaternary',
-    },
-    disabledSecondary: {
         fill: 'surfaceSecondary',
-        borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderHoverQuaternary',
+        fillCheckbox: 'surfaceSecondary',
+        fillCheckboxActive: 'surfaceQuaternary',
+        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
+        fillCheckboxHover: 'surfaceHoverTertiary',
+        labelTextColor: 'disabledTextSecondary',
+        descTextColor: 'disabledTextSecondary',
+        borderColorCheckbox: 'surfaceBorderQuaternary',
+        borderColorCheckboxActive: 'surfaceBorderQuaternary',
+        borderColorCheckboxActiveHover: 'surfaceBorderActivePrimary',
+        borderColorCheckboxHover: 'surfaceBorderHoverPrimary',
     },
 };
 
 const checkboxAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
-        fillCheckbox: 'errorPrimary',
-        fillCheckboxActive: 'errorActivePrimary',
+        fillCheckbox: 'errorTertiary',
+        fillCheckboxActive: 'errorQuaternary',
         fillCheckboxActiveHover: 'errorActiveHoverPrimary',
-        fillCheckboxHover: 'surfaceHoverTertiary',
-        fillCheckmark: 'errorPrimary',
+        fillCheckboxHover: 'errorHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
-        borderColorCheckbox: 'errorBorderPrimary',
-        borderColorCheckboxActive: 'errorBorderActivePrimary',
+        borderColorCheckbox: 'errorBorderQuaternary',
+        borderColorCheckboxActive: 'errorBorderActiveQuaternary',
         borderColorCheckboxActiveHover: 'errorBorderActivePrimary',
         borderColorCheckboxHover: 'errorBorderHoverPrimary',
     },
-    errorSecondary: {
-        fill: 'errorSecondary',
-        borderColor: 'errorBorderTertiary',
-        borderHover: 'errorBorderHoverQuaternary',
-    },
 };
 
 const checkboxAppearanceRequire = {
     requirePrimary: {
+        fill: 'warningTertiary',
         fillCheckbox: 'warningTertiary',
-        fillCheckboxActive: 'warningActivePrimary',
-        fillCheckboxActiveHover: 'warningActiveHoverTertiary',
-        fillCheckboxHover: 'warningHoverSecondary',
-        fillCheckmark: 'warningPrimary',
+        fillCheckboxActive: 'warningPrimary',
+        fillCheckboxActiveHover: 'warningActiveHoverPrimary',
+        fillCheckboxHover: 'warningHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
-        borderColorCheckbox: 'warningBorderPrimary',
-        borderColorCheckboxActive: 'warningBorderActivePrimary',
+        borderColorCheckbox: 'warningBorderSecondary',
+        borderColorCheckboxActive: 'warningBorderSecondary',
         borderColorCheckboxActiveHover: 'warningBorderActivePrimary',
         borderColorCheckboxHover: 'warningBorderHoverPrimary',
     },
-    requireSecondary: {
-        fill: 'surfaceSecondary',
-        borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderHoverQuaternary',
+};
+
+const checkboxAppearanceShape = {
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -139,23 +140,18 @@ const checkboxAppearanceStyle = {
 
 const checkboxAppearanceSuccess = {
     successPrimary: {
-        fillCheckbox: 'successPrimary',
-        fillCheckboxActive: 'successActivePrimary',
-        fillCheckboxActiveHover: 'successActiveHoverTertiary',
+        fill: 'successTertiary',
+        fillCheckbox: 'successTertiary',
+        fillCheckboxActive: 'successSecondary',
+        fillCheckboxActiveHover: 'successActiveHoverPrimary',
         fillCheckboxHover: 'successHoverTertiary',
-        fillCheckmark: 'successPrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
-        borderColorCheckbox: 'successBorderPrimary',
-        borderColorCheckboxActive: 'successBorderActivePrimary',
+        borderColorCheckbox: 'successBorderSecondary',
+        borderColorCheckboxActive: 'successBorderSecondary',
         borderColorCheckboxActiveHover: 'successBorderActivePrimary',
         borderColorCheckboxHover: 'successBorderHoverPrimary',
     },
-    successSecondary: {
-        fill: 'successSecondary',
-        borderColor: 'successBorderTertiary',
-        borderHover: 'successBorderHoverQuaternary',
-    },
 };
 
 const checkboxAppearance = {
@@ -166,6 +162,7 @@ const checkboxAppearance = {
     ...checkboxAppearanceDisabled,
     ...checkboxAppearanceSize,
     ...checkboxAppearanceStyle,
+    ...checkboxAppearanceShape,
 };
 
 const checkboxConfig = {