@itcase/ui 1.0.81 → 1.0.83

package/dist/components/Tab.js

@@ -67,6 +67,7 @@ function Tab(props) {
     labelTextSize,
     labelTextWrap,
     labelTextStyle,
+    reset,
     labelTextWeight,
     dataTour,
     dividerFill,
@@ -78,9 +79,8 @@ function Tab(props) {
     dividerDirection,
     onClick,
     onMouseEnter,
+    badgeAppearance,
     badgeSize,
-    badgeFill,
-    badgeTextColor,
     badgeTextSize,
     badgeValue
   } = props;
@@ -139,33 +139,32 @@ function Tab(props) {
     styles: tab
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && `tab_set_${set}`, justifyContentClass),
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
+    "data-tour": dataTour,
     style: tab,
     onClick: onClick,
-    onMouseEnter: onMouseEnter,
-    "data-tour": dataTour
+    onMouseEnter: onMouseEnter
   }, /*#__PURE__*/React__default.default.createElement(index.Link, {
-    href: link || href,
     className: clsx__default.default('tab__link', alignDirectionClass, alignClass),
     fill: linkFillClass,
-    target: target,
-    rel: rel
+    href: link || href,
+    rel: rel,
+    target: target
   }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, before, children || /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
     className: "tab__wrapper"
   }, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tab__label",
-    textColorActive: isActive && (labelColorActive || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
-    textColorGradient: labelTextGradient,
     size: labelTextSize,
-    textWeight: labelTextWeight,
     textColor: labelColor || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].labelColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    textWrap: labelTextWrap,
+    textColorActive: isActive && (labelColorActive || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    textColorGradient: labelTextGradient,
     textColorHover: labelTextColorHover,
-    textStyle: labelTextStyle
+    textStyle: labelTextStyle,
+    textWeight: labelTextWeight,
+    textWrap: labelTextWrap
   }, dividerFillActive, " ", label), badgeValue && /*#__PURE__*/React__default.default.createElement(index$2.Badge, {
-    fill: badgeFill,
+    appearance: badgeAppearance,
     size: badgeSize,
-    textColor: badgeTextColor,
     textSize: badgeTextSize,
     value: badgeValue
   })), /*#__PURE__*/React__default.default.createElement(index$3.Divider, {
@@ -188,40 +187,40 @@ Tab.propTypes = {
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
   fillTablet: PropTypes__default.default.oneOf(fill.default),
+  href: PropTypes__default.default.string,
+  isActive: PropTypes__default.default.bool,
+  label: PropTypes__default.default.string,
+  labelColor: PropTypes__default.default.oneOf(textColor.default),
+  labelColorActive: PropTypes__default.default.oneOf(textColorActive.default),
+  labelTextColorHover: PropTypes__default.default.oneOf(textColorHover.default),
+  labelTextGradient: PropTypes__default.default.oneOf(textGradient.default),
+  labelTextSize: PropTypes__default.default.oneOf(size.default),
+  labelTextStyle: PropTypes__default.default.oneOf(textStyle.default),
+  labelTextWeight: PropTypes__default.default.oneOf(textWeight.default),
+  labelTextWrap: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  LinkComponent: PropTypes__default.default.any,
   linkFill: PropTypes__default.default.oneOf(fill.default),
   linkFillDesktop: PropTypes__default.default.oneOf(fill.default),
   linkFillMobile: PropTypes__default.default.oneOf(fill.default),
   linkFillTablet: PropTypes__default.default.oneOf(fill.default),
-  isActive: PropTypes__default.default.bool,
-  label: PropTypes__default.default.string,
-  onClick: PropTypes__default.default.func,
-  onMouseEnter: PropTypes__default.default.func,
-  size: PropTypes__default.default.oneOf(size.default),
-  sizeDesktop: PropTypes__default.default.oneOf(size.default),
-  sizeMobile: PropTypes__default.default.oneOf(size.default),
-  sizeTablet: PropTypes__default.default.oneOf(size.default),
-  LinkComponent: PropTypes__default.default.any,
-  href: PropTypes__default.default.string,
-  link: PropTypes__default.default.string,
-  target: PropTypes__default.default.string,
   rel: PropTypes__default.default.string,
   shape: PropTypes__default.default.oneOf(shape.default),
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
-  labelColor: PropTypes__default.default.oneOf(textColor.default),
-  labelTextColorHover: PropTypes__default.default.oneOf(textColorHover.default),
-  labelColorActive: PropTypes__default.default.oneOf(textColorActive.default),
-  labelTextGradient: PropTypes__default.default.oneOf(textGradient.default),
-  labelTextSize: PropTypes__default.default.oneOf(size.default),
-  labelTextWrap: PropTypes__default.default.string,
-  labelTextStyle: PropTypes__default.default.oneOf(textStyle.default),
-  labelTextWeight: PropTypes__default.default.oneOf(textWeight.default),
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
+  target: PropTypes__default.default.string,
   type: PropTypes__default.default.oneOf(type.default),
   typeDesktop: PropTypes__default.default.oneOf(type.default),
   typeMobile: PropTypes__default.default.oneOf(type.default),
   typeTablet: PropTypes__default.default.oneOf(type.default),
-  underline: PropTypes__default.default.oneOf(underline.default)
+  underline: PropTypes__default.default.oneOf(underline.default),
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func
 };
 Tab.defaultProps = {
   size: 'normal',
@@ -328,71 +327,64 @@ Tab.__docgenInfo = {
       },
       "required": false
     },
-    "linkFill": {
+    "href": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
+        "name": "string"
       },
       "required": false
     },
-    "linkFillDesktop": {
+    "isActive": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
+        "name": "bool"
       },
       "required": false
     },
-    "linkFillMobile": {
+    "label": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
+        "name": "string"
       },
       "required": false
     },
-    "linkFillTablet": {
+    "labelColor": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "isActive": {
-      "description": "",
-      "type": {
-        "name": "bool"
+        "value": "textColorProps"
       },
       "required": false
     },
-    "label": {
+    "labelColorActive": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "textColorActiveProps"
       },
       "required": false
     },
-    "onClick": {
+    "labelTextColorHover": {
       "description": "",
       "type": {
-        "name": "func"
+        "name": "enum",
+        "computed": true,
+        "value": "textColorHoverProps"
       },
       "required": false
     },
-    "onMouseEnter": {
+    "labelTextGradient": {
       "description": "",
       "type": {
-        "name": "func"
+        "name": "enum",
+        "computed": true,
+        "value": "textGradientProps"
       },
       "required": false
     },
-    "sizeDesktop": {
+    "labelTextSize": {
       "description": "",
       "type": {
         "name": "enum",
@@ -401,25 +393,25 @@ Tab.__docgenInfo = {
       },
       "required": false
     },
-    "sizeMobile": {
+    "labelTextStyle": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textStyleProps"
       },
       "required": false
     },
-    "sizeTablet": {
+    "labelTextWeight": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textWeightProps"
       },
       "required": false
     },
-    "href": {
+    "labelTextWrap": {
       "description": "",
       "type": {
         "name": "string"
@@ -433,48 +425,50 @@ Tab.__docgenInfo = {
       },
       "required": false
     },
-    "target": {
+    "linkFill": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
       },
       "required": false
     },
-    "rel": {
+    "linkFillDesktop": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
       },
       "required": false
     },
-    "shape": {
+    "linkFillMobile": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "shapeProps"
+        "value": "fillProps"
       },
       "required": false
     },
-    "shapeDesktop": {
+    "linkFillTablet": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "shapeProps"
+        "value": "fillProps"
       },
       "required": false
     },
-    "shapeMobile": {
+    "rel": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
+        "name": "string"
       },
       "required": false
     },
-    "shapeTablet": {
+    "shape": {
       "description": "",
       "type": {
         "name": "enum",
@@ -483,43 +477,43 @@ Tab.__docgenInfo = {
       },
       "required": false
     },
-    "labelColor": {
+    "shapeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "textColorProps"
+        "value": "shapeProps"
       },
       "required": false
     },
-    "labelTextColorHover": {
+    "shapeMobile": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "textColorHoverProps"
+        "value": "shapeProps"
       },
       "required": false
     },
-    "labelColorActive": {
+    "shapeTablet": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "textColorActiveProps"
+        "value": "shapeProps"
       },
       "required": false
     },
-    "labelTextGradient": {
+    "sizeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "textGradientProps"
+        "value": "sizeProps"
       },
       "required": false
     },
-    "labelTextSize": {
+    "sizeMobile": {
       "description": "",
       "type": {
         "name": "enum",
@@ -528,28 +522,19 @@ Tab.__docgenInfo = {
       },
       "required": false
     },
-    "labelTextWrap": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "labelTextStyle": {
+    "sizeTablet": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "textStyleProps"
+        "value": "sizeProps"
       },
       "required": false
     },
-    "labelTextWeight": {
+    "target": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "textWeightProps"
+        "name": "string"
       },
       "required": false
     },
@@ -597,6 +582,20 @@ Tab.__docgenInfo = {
         "value": "underlineProps"
       },
       "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseEnter": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
     }
   }
 };

package/dist/constants/componentProps/borderColor.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const borderColorProps = [null, 'accentBorderPrimary', 'accentBorderSecondary', 'accentBorderTertiary', 'accentBorderQuaternary', 'accentBorderDisabled', 'primaryBorderPrimary', 'primaryBorderSecondary', 'primaryBorderTertiary', 'primaryBorderQuaternary', 'primaryBorderDisabled', 'secondaryBorderPrimary', 'secondaryBorderSecondary', 'secondaryBorderTertiary', 'secondaryBorderQuaternary', 'secondaryBorderDisabled', 'tertiaryBorderPrimary', 'tertiaryBorderSecondary', 'tertiaryBorderTertiary', 'tertiaryBorderQuaternary', 'tertiaryBorderDisabled', 'surfaceBorderPrimary', 'surfaceBorderSecondary', 'surfaceBorderTertiary', 'surfaceBorderQuaternary', 'surfaceBorderDisabled', 'errorBorderPrimary', 'errorBorderSecondary', 'errorBorderDisabled', 'successBorderPrimary', 'successBorderSecondary', 'successBorderDisabled'];
+const borderColorProps = [null, 'accentBorderPrimary', 'accentBorderSecondary', 'accentBorderTertiary', 'accentBorderQuaternary', 'accentBorderDisabled', 'primaryBorderPrimary', 'primaryBorderSecondary', 'primaryBorderTertiary', 'primaryBorderQuaternary', 'primaryBorderDisabled', 'secondaryBorderPrimary', 'secondaryBorderSecondary', 'secondaryBorderTertiary', 'secondaryBorderQuaternary', 'secondaryBorderDisabled', 'tertiaryBorderPrimary', 'tertiaryBorderSecondary', 'tertiaryBorderTertiary', 'tertiaryBorderQuaternary', 'tertiaryBorderDisabled', 'surfaceBorderPrimary', 'surfaceBorderSecondary', 'surfaceBorderTertiary', 'surfaceBorderQuaternary', 'surfaceBorderDisabled', 'surfaceBorderInvert', 'errorBorderPrimary', 'errorBorderSecondary', 'errorBorderDisabled', 'successBorderPrimary', 'successBorderSecondary', 'successBorderDisabled'];
 
 exports.default = borderColorProps;

package/dist/constants/componentProps/fill.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const fillProps = [null, 'accentPrimary', 'accentSecondary', 'accentTertiary', 'primaryPrimary', 'primarySecondary', 'primaryTertiary', 'secondaryPrimary', 'secondarySecondary', 'secondaryTertiary', 'tertiaryPrimary', 'tertiarySecondary', 'tertiaryTertiary', 'surfacePrimary', 'surfaceSecondary', 'surfaceTertiary', 'surfaceQuaternary', 'surfaceQuinary', 'errorPrimary', 'errorSecondary', 'successPrimary', 'successSecondary'];
+const fillProps = [null, 'accentPrimary', 'accentSecondary', 'accentTertiary', 'primaryPrimary', 'primarySecondary', 'primaryTertiary', 'secondaryPrimary', 'secondarySecondary', 'secondaryTertiary', 'tertiaryPrimary', 'tertiarySecondary', 'tertiaryTertiary', 'surfacePrimary', 'surfaceSecondary', 'surfaceTertiary', 'surfaceQuaternary', 'surfaceQuinary', 'errorPrimary', 'errorSecondary', 'successPrimary', 'successSecondary', 'gradientPrimary'];
 
 exports.default = fillProps;

package/dist/constants/componentProps/textColor.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const textColorProps = [null, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary'];
+const textColorProps = [null, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
 
 exports.default = textColorProps;

package/dist/constants/componentProps/textColorHover.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const textColorHoverProps = [null, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary'];
+const textColorHoverProps = [null, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
 
 exports.default = textColorHoverProps;

package/dist/css/components/Accordion/Accordion.css

@@ -30,14 +30,15 @@
   }
 }
 .accordion-item {
+  min-width: 170px;
+  padding: 10px 12px;
   display: flex;
   flex-flow: row wrap;
+  gap: 8px;
   &__title {
     flex: 1;
-    cursor: pointer;
   }
   &__icon {
-    margin: 0 0 0 40px;
     align-self: center;
     transform-origin: 50% 50%;
     transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
@@ -49,7 +50,7 @@
 .accordion-item {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--accordion-item-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;

package/dist/css/components/Avatar/Avatar.css

@@ -51,7 +51,7 @@
     &_rounded {
       ^^&__image,
       ^^&__wrapper {
-        border-radius: 10px;
+        border-radius: var(--avatar-shape-rounded, 10px);
       }
     }
   }

package/dist/css/components/Badge/Badge.css

@@ -15,22 +15,6 @@
     }
   }
 }
-.badge {
-  &&_type {
-    &_accent {
-      background: var(--color-accent-primary);
-      color: var(--color-accent-text-primary);
-    }
-  }
-}
-.badge {
-  &&_type {
-    &_primary {
-      color: var(--color-primary-text-primary);
-      background: var(--color-primary-primary);
-    }
-  }
-}
 .badge {
   &_type_status {
     &.badge_size {
@@ -48,7 +32,7 @@
 .badge {
   &_shape {
     &_rounded {
-      border-radius: var(--badge-shape-rounded-default);
+      border-radius: var(--badge-shape-rounded, 6px);
     }
     &_circular {
       border-radius: 50%;
@@ -70,5 +54,4 @@
   --badge-height-size-xl: 40px;
   --badge-width-size-xxl: 48px;
   --badge-height-size-xxl: 48px;
-  --badge-shape-rounded-default: 6px;
 }

package/dist/css/components/Button/Button.css

@@ -1,14 +1,13 @@
 .button {
   text-decoration: none;
   background: none;
+  padding: 0;
+  margin: 0;
   border: solid 0 #fff;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
   transition: var(--button-transition);
   &__loader {
     width: 100%;
@@ -34,7 +33,7 @@
 .button {
   &_shape {
     &_rounded {
-      border-radius: var(--button-shape-rounded-default);
+      border-radius: var(--button-shape-rounded-default, 6px);
       @each $size in xs, s, m, l, xl, xxl {
         &.button_size_$(size) {
           border-radius: var(--button-size-$(size)-shape-rounded);
@@ -329,43 +328,33 @@
   }
 }
 :root {
-  --button-shape-rounded-default: 6px;
   --button-transition: all 0.2s ease 0s;
-
   --button-size-xxs-padding: 4px 12px;
   --button-size-xxs-icon-padding: 0px;
   --button-size-xxs-gap: 6px;
   --button-size-xxs-shape-rounded: 6px;
-
   --button-size-xs-padding: 2px 8px;
   --button-size-xs-icon-padding: 0px;
   --button-size-xs-gap: 6px;
   --button-size-xs-shape-rounded: 6px;
-
   --button-size-s-padding: 4px 16px;
   --button-size-s-icon-padding: 0px;
   --button-size-s-gap: 6px;
   --button-size-s-shape-rounded: 6px;
-
   --button-size-m-padding: 8px 24px;
   --button-size-m-icon-padding: 10px;
   --button-size-m-gap: 6px;
   --button-size-m-shape-rounded: 6px;
-
   --button-size-l-padding: 12px 32px;
   --button-size-l-icon-padding: 0px;
   --button-size-l-gap: 6px;
   --button-size-l-shape-rounded: 6px;
-
   --button-size-xl-padding: 16px 32px;
   --button-size-xl-icon-padding: 0px;
   --button-size-xl-gap: 6px;
   --button-size-xl-shape-rounded: 6px;
-
   --button-size-xxl-padding: 24px 40px;
   --button-size-xxl-icon-padding: 0px;
   --button-size-xxl-gap: 6px;
   --button-size-xxl-shape-rounded: 6px;
 }
-
-

package/dist/css/components/Cell/Cell.css

@@ -2,36 +2,26 @@
   &__wrapper {
     ^&__data {
       display: flex;
-      flex-flow: column nowrap;
-      flex: 1;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 8px;
     }
     ^&__icon {
-      padding: 8px 0 0 0;
-      display: flex;
-      gap: 16px;
-      &-before {
-        display: flex;
-        padding: 0 16px 0 0;
-        align-items: center;
-      }
-      &-after {
-        display: flex;
-        padding: 0 0 0 16px;
-        align-items: center;
-      }
     }
   }
 }
 .cell {
-  &_direction {
-    &_vertical {
-      ^^&__data {
+  &__wrapper {
+    &_direction {
+      &_vertical {
+        display: flex;
+        flex-direction: column;
       }
-    }
-    &_horizontal {
-      ^^&__data {
-        flex-flow: row;
+      &_horizontal {
+        display: flex;
+        flex-direction: row;
         justify-content: space-between;
+        gap: 20px;
       }
     }
   }

package/dist/css/components/Chips/Chips.css

@@ -46,7 +46,7 @@
 .chips {
   &_shape {
     &_rounded {
-      border-radius: var(--chips-shape-rounded-default);
+      border-radius: var(--chips-shape-rounded-default, 6px);
       @each $size in xxs, xs, s, m, l, xl, xxl {
         &.chips_size_$(size) {
           border-radius: var(--chips-size-$(size)-shape-rounded);
@@ -60,7 +60,6 @@
 }
 
 :root {
-  --chips-shape-rounded-default: 6px;
   --chips-size-xxs-shape-rounded: 6px;
   --chips-size-xs-shape-rounded: 6px;
   --chips-size-s-shape-rounded: 6px;