@ozen-ui/kit 0.38.0 → 0.40.0

package/README.md

@@ -21,9 +21,9 @@ pnpm add @ozen-ui/kit
 
 Разделы для знакомства с библиотекой:
 
-- [Быстрый старт](https://ozen-ui.netlify.app/?path=/docs/documentation-getting-started--docs)
+- [Быстрый старт](https://ozen-ui.netlify.app/?path=/docs/for-users-getting-started--docs)
 - [Дизайн-токены](https://ozen-ui.netlify.app/?path=/docs/foundations-design-tokens--docs)
-- [Обзор компонентов](https://ozen-ui.netlify.app/?path=/docs/documentation-overview--docs)
+- [Обзор компонентов](https://ozen-ui.netlify.app/?path=/docs/introduction-overview--docs)
 
 ## О нас
 

package/__inner__/cjs/components/Accordion/Accordion.css

@@ -10,9 +10,10 @@
   overflow: hidden;
 }
 .Accordion_size_s {
-      --accordion-summary-padding: var(--space-l);
-      --accordion-details-padding: var(--space-m) var(--space-l) var(--space-l);
-      --accordion-column-gap: var(--space-m);
+      --accordion-summary-padding: var(--spacing-s);
+      --accordion-details-padding: var(--spacing-xs) var(--spacing-s)
+        var(--spacing-s);
+      --accordion-column-gap: var(--spacing-xs);
     }
 .Accordion_size_s .AccordionSummary {
         font: var(--typography-text-s_1-font);
@@ -20,9 +21,9 @@
         text-transform: var(--typography-text-s_1-text_transform, none);
       }
 .Accordion_size_m {
-      --accordion-column-gap: var(--space-m);
-      --accordion-summary-padding: var(--space-l);
-      --accordion-details-padding: var(--space-l);
+      --accordion-column-gap: var(--spacing-xs);
+      --accordion-summary-padding: var(--spacing-s);
+      --accordion-details-padding: var(--spacing-s);
     }
 .Accordion_size_m .AccordionSummary {
         font: var(--typography-text-m_1-font);
@@ -30,10 +31,10 @@
         text-transform: var(--typography-text-m_1-text_transform, none);
       }
 .Accordion_size_l {
-      --accordion-column-gap: var(--space-l);
-      --accordion-summary-padding: var(--space-xl);
-      --accordion-details-padding: var(--space-l) var(--space-xl)
-        var(--space-xl);
+      --accordion-column-gap: var(--spacing-s);
+      --accordion-summary-padding: var(--spacing-m);
+      --accordion-details-padding: var(--spacing-s) var(--spacing-m)
+        var(--spacing-m);
     }
 .Accordion_size_l .AccordionSummary {
         font: var(--typography-text-l_1-font);
@@ -41,10 +42,10 @@
         text-transform: var(--typography-text-l_1-text_transform, none);
       }
 .Accordion_size_xl {
-      --accordion-column-gap: var(--space-xl);
-      --accordion-summary-padding: var(--space-2xl);
-      --accordion-details-padding: var(--space-l) var(--space-2xl)
-        var(--space-2xl);
+      --accordion-column-gap: var(--spacing-m);
+      --accordion-summary-padding: var(--spacing-l);
+      --accordion-details-padding: var(--spacing-s) var(--spacing-l)
+        var(--spacing-l);
     }
 .Accordion_size_xl .AccordionSummary {
         font: var(--typography-text-xl_1-font);
@@ -53,13 +54,13 @@
       }
 .Accordion_compressed.Accordion_size_s,
   .Accordion_compressed.Accordion_size_m {
-    --accordion-summary-padding: var(--space-s) var(--space-l);
+    --accordion-summary-padding: var(--spacing-2xs) var(--spacing-s);
   }
 .Accordion_compressed.Accordion_size_l {
-    --accordion-summary-padding: var(--space-m) var(--space-l);
+    --accordion-summary-padding: var(--spacing-xs) var(--spacing-s);
   }
 .Accordion_compressed.Accordion_size_xl {
-    --accordion-summary-padding: var(--space-l) var(--space-2xl);
+    --accordion-summary-padding: var(--spacing-s) var(--spacing-l);
   }
 .Accordion_variant_corner-primary {
       --accordion-background-color: var(--color-background-main);

package/__inner__/cjs/components/Alert/Alert.css

@@ -2,8 +2,8 @@
 .Alert {
   position: relative;
   display: flex;
-  -moz-column-gap: var(--space-s);
-       column-gap: var(--space-s);
+  -moz-column-gap: var(--spacing-2xs);
+       column-gap: var(--spacing-2xs);
   align-items: flex-start;
   inline-size: 100%;
   overflow: auto;
@@ -65,11 +65,11 @@
     text-transform: var(--typography-text-s_1-text_transform, none);
   }
 .Alert-Body {
-    margin-block-start: var(--space-xs);
+    margin-block-start: var(--spacing-3xs);
     color: var(--alert-body-text-color);
   }
 .Alert-Action {
-    margin-block-start: var(--space-s);
+    margin-block-start: var(--spacing-2xs);
   }
 .IconButton.Alert-CloseButton {
   color: var(--alert-close-button-color);

package/__inner__/cjs/components/Breadcrumbs/Breadcrumbs.css

@@ -12,7 +12,3 @@
   display: flex;
   align-items: center;
 }
-
-.Button.BreadcrumbItem {
-  color: var(--color-content-secondary);
-}

package/__inner__/cjs/components/Breadcrumbs/components/BreadcrumbItem.js

@@ -5,13 +5,13 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var classname_1 = require("../../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../../utils/polymorphicComponentWithRef");
-var Button_1 = require("../../Button");
+var ButtonNext_1 = require("../../ButtonNext");
 var BreadcrumbsContext_1 = require("../BreadcrumbsContext");
 var constants_1 = require("../constants");
 exports.cnBreadcrumbItem = (0, classname_1.cn)('BreadcrumbItem');
 exports.BreadcrumbItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
     var _b = _a.as, as = _b === void 0 ? constants_1.BREADCRUMB_ITEM_DEFAULT_TAG : _b, disabled = _a.disabled, IconLeftProp = _a.iconLeft, IconRightProp = _a.iconRight, children = _a.children, className = _a.className, other = tslib_1.__rest(_a, ["as", "disabled", "iconLeft", "iconRight", "children", "className"]);
     var size = (0, BreadcrumbsContext_1.useBreadcrumbsContext)().size;
-    return (react_1.default.createElement(Button_1.Button, tslib_1.__assign({}, other, { className: (0, exports.cnBreadcrumbItem)({}, [className]), as: as, variant: "function", disabled: disabled, size: size, iconLeft: IconLeftProp, iconRight: IconRightProp, ref: ref }), children));
+    return (react_1.default.createElement(ButtonNext_1.Button, tslib_1.__assign({}, other, { className: (0, exports.cnBreadcrumbItem)({}, [className]), as: as, variant: "function", color: "tertiary", disabled: disabled, size: size, iconLeft: IconLeftProp, iconRight: IconRightProp, ref: ref }), children));
 });
 exports.BreadcrumbItem.displayName = 'BreadcrumbItem';

package/__inner__/cjs/components/Button/Button.js

@@ -35,7 +35,7 @@ exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(
         name: 'Button',
     });
     if (process.env.NODE_ENV !== 'production') {
-        (0, logger_1.deprecate)('Компонент «%s» устарел. Для замены используйте компонент «%s».', 'Button', 'ButtonNext');
+        (0, logger_1.deprecate)('Компонент «Button» устарел. Для замены используйте компонент «ButtonNext».');
     }
     var _a = props.as, Tag = _a === void 0 ? constants_1.BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? constants_1.BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? constants_1.BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
     var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);

package/__inner__/cjs/components/ButtonNext/Button.css

@@ -80,11 +80,12 @@
 
       text-transform: var(--typography-text-l-text_transform, none);
     }
+/** contained */
 .ButtonNext_variant_contained.ButtonNext_color_primary {
     --button-bg-color: var(--color-background-action);
     --button-bg-color-hover: var(--color-background-action-hover);
     --button-bg-color-active: var(--color-background-action-pressed);
-    --button-bg-color-focus: var(--color-background-action);
+    --button-bg-color-focus: var(--color-background-action-hover);
     --button-font-color: var(--color-content-action-on);
     --button-font-color-hover: var(--color-content-action-on);
     --button-font-color-active: var(--color-content-action-on);
@@ -94,7 +95,7 @@
     --button-bg-color: var(--color-background-action-secondary);
     --button-bg-color-hover: var(--color-background-action-secondary-hover);
     --button-bg-color-active: var(--color-background-action-secondary-pressed);
-    --button-bg-color-focus: var(--color-background-action-secondary);
+    --button-bg-color-focus: var(--color-background-action-secondary-hover);
     --button-font-color: var(--color-content-action-on);
     --button-font-color-hover: var(--color-content-action-on);
     --button-font-color-active: var(--color-content-action-on);
@@ -104,7 +105,7 @@
     --button-bg-color: var(--color-background-tertiary);
     --button-bg-color-hover: var(--color-background-tertiary-hover);
     --button-bg-color-active: var(--color-background-tertiary-pressed);
-    --button-bg-color-focus: var(--color-background-tertiary);
+    --button-bg-color-focus: var(--color-background-tertiary-hover);
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
@@ -114,17 +115,18 @@
     --button-bg-color: var(--color-background-error);
     --button-bg-color-hover: var(--color-background-error-hover);
     --button-bg-color-active: var(--color-background-error-pressed);
-    --button-bg-color-focus: var(--color-background-error);
+    --button-bg-color-focus: var(--color-background-error-hover);
     --button-font-color: var(--color-content-action-on);
     --button-font-color-hover: var(--color-content-action-on);
     --button-font-color-active: var(--color-content-action-on);
     --button-font-color-focus: var(--color-content-action-on);
   }
+/** contained-additional */
 .ButtonNext_variant_contained-additional.ButtonNext_color_primary {
     --button-bg-color: var(--color-background-action-light);
     --button-bg-color-hover: var(--color-background-action-light-hover);
     --button-bg-color-active: var(--color-background-action-light-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-action-light-hover);
     --button-font-color: var(--color-content-action);
     --button-font-color-hover: var(--color-content-action);
     --button-font-color-active: var(--color-content-action);
@@ -134,7 +136,7 @@
     --button-bg-color: var(--color-background-secondary);
     --button-bg-color-hover: var(--color-background-secondary-hover);
     --button-bg-color-active: var(--color-background-secondary-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-secondary-hover);
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
@@ -144,7 +146,7 @@
     --button-bg-color: var(--color-background-primary);
     --button-bg-color-hover: var(--color-background-primary-hover);
     --button-bg-color-active: var(--color-background-primary-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-primary-hover);
     --button-font-color: var(--color-content-secondary);
     --button-font-color-hover: var(--color-content-secondary);
     --button-font-color-active: var(--color-content-secondary);
@@ -154,52 +156,54 @@
     --button-bg-color: var(--color-background-error-light);
     --button-bg-color-hover: var(--color-background-error-light-hover);
     --button-bg-color-active: var(--color-background-error-light-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-error-light-hover);
     --button-font-color: var(--color-content-error);
     --button-font-color-hover: var(--color-content-error);
     --button-font-color-active: var(--color-content-error);
     --button-font-color-focus: var(--color-content-error);
   }
+/** ghost */
 .ButtonNext_variant_ghost.ButtonNext_color_primary {
-    --button-bg-color: unset;
-    --button-bg-color-hover: var(--color-background-success-light-hover);
-    --button-bg-color-active: var(--color-background-success-light-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color: transparent;
+    --button-bg-color-hover: var(--color-background-action-light-hover);
+    --button-bg-color-active: var(--color-background-action-light-pressed);
+    --button-bg-color-focus: var(--color-background-action-light-hover);
     --button-font-color: var(--color-content-action);
     --button-font-color-hover: var(--color-content-action);
     --button-font-color-active: var(--color-content-action);
     --button-font-color-focus: var(--color-content-action);
   }
 .ButtonNext_variant_ghost.ButtonNext_color_secondary {
-    --button-bg-color: unset;
+    --button-bg-color: transparent;
     --button-bg-color-hover: var(--color-background-secondary-hover);
     --button-bg-color-active: var(--color-background-secondary-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-secondary-hover);
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
     --button-font-color-focus: var(--color-content-primary);
   }
 .ButtonNext_variant_ghost.ButtonNext_color_tertiary {
-    --button-bg-color: unset;
+    --button-bg-color: transparent;
     --button-bg-color-hover: var(--color-background-primary-hover);
     --button-bg-color-active: var(--color-background-primary-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-primary-hover);
     --button-font-color: var(--color-content-secondary);
     --button-font-color-hover: var(--color-content-secondary);
     --button-font-color-active: var(--color-content-secondary);
     --button-font-color-focus: var(--color-content-secondary);
   }
 .ButtonNext_variant_ghost.ButtonNext_color_error {
-    --button-bg-color: unset;
+    --button-bg-color: transparent;
     --button-bg-color-hover: var(--color-background-error-light-hover);
     --button-bg-color-active: var(--color-background-error-light-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-error-light-hover);
     --button-font-color: var(--color-content-error);
     --button-font-color-hover: var(--color-content-error);
     --button-font-color-active: var(--color-content-error);
     --button-font-color-focus: var(--color-content-error);
   }
+/** function */
 .ButtonNext_variant_function {
     --button-height: auto;
     --button-min-width: auto;
@@ -209,10 +213,10 @@
   .ButtonNext_variant_function.ButtonNext_color_secondary,
   .ButtonNext_variant_function.ButtonNext_color_tertiary,
   .ButtonNext_variant_function.ButtonNext_color_error {
-    --button-bg-color: unset;
-    --button-bg-color-hover: unset;
-    --button-bg-color-active: unset;
-    --button-bg-color-focus: unset;
+    --button-bg-color: transparent;
+    --button-bg-color-hover: transparent;
+    --button-bg-color-active: transparent;
+    --button-bg-color-focus: transparent;
   }
 .ButtonNext_variant_function.ButtonNext_color_primary {
     --button-font-color: var(--color-content-action);
@@ -238,6 +242,7 @@
     --button-font-color-active: var(--color-content-error-pressed);
     --button-font-color-focus: var(--color-content-error-pressed);
   }
+/** disabled & loading */
 .ButtonNext_variant_contained.ButtonNext_disabled,
   .ButtonNext_variant_contained.ButtonNext_loading,
   .ButtonNext_variant_contained-additional.ButtonNext_disabled,
@@ -260,13 +265,15 @@
   .ButtonNext_variant_ghost.ButtonNext_loading,
   .ButtonNext_variant_function.ButtonNext_disabled,
   .ButtonNext_variant_function.ButtonNext_loading {
-    --button-bg-color: unset;
-    --button-bg-color-hover: unset;
-    --button-bg-color-active: unset;
+    --button-bg-color: transparent;
+    --button-bg-color-hover: transparent;
+    --button-bg-color-active: transparent;
   }
+/** focus */
 .ButtonNext:focus:not(:focus-visible, :active, :hover) {
     box-shadow: none;
     color: var(--button-font-color);
+    background-color: var(--button-bg-color);
   }
 .ButtonNext:focus:not(:focus-visible) {
     box-shadow: none;

package/__inner__/cjs/components/Card/Card.css

@@ -14,15 +14,15 @@
   }
 
   .Card_size_s {
-      --card-padding: var(--space-l);
+      --card-padding: var(--spacing-s);
     }
 
   .Card_size_m {
-      --card-padding: var(--space-xl);
+      --card-padding: var(--spacing-m);
     }
 
   .Card_size_l {
-      --card-padding: var(--space-2xl);
+      --card-padding: var(--spacing-l);
     }
 
   .Card_interactive {

package/__inner__/cjs/components/Chip/Chip.css

@@ -10,8 +10,8 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
 
       --chip-min-width: 64px;
-      --chip-height: var(--space-xl);
-      --chip-padding-x: var(--space-m);
+      --chip-height: var(--spacing-m);
+      --chip-padding-x: var(--spacing-xs);
     }
 .Chip_size_s {
       font: var(--typography-text-s-font);
@@ -19,8 +19,8 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --chip-min-width: 72px;
-      --chip-height: var(--space-2xl);
-      --chip-padding-x: var(--space-l);
+      --chip-height: var(--spacing-l);
+      --chip-padding-x: var(--spacing-s);
     }
 .Chip_size_m {
       font: var(--typography-text-m-font);
@@ -28,7 +28,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
 
       --chip-min-width: 80px;
-      --chip-height: var(--space-3xl);
+      --chip-height: var(--spacing-xl);
       --chip-padding-x: 20px;
     }
 .Chip_size_l {
@@ -37,8 +37,8 @@
       text-transform: var(--typography-text-l-text_transform, none);
 
       --chip-min-width: 88px;
-      --chip-height: var(--space-4xl);
-      --chip-padding-x: var(--space-xl);
+      --chip-height: var(--spacing-2xl);
+      --chip-padding-x: var(--spacing-m);
     }
 .Chip_color_primary {
       --chip-bg-color: var(--color-background-action-light);
@@ -59,8 +59,9 @@
     color: var(--chip-text-color);
     padding: 0 var(--chip-padding-x);
     border-radius: var(--chip-border-radius);
-    gap: var(--space-s);
-    transition: border-color var(--transition-default),
+    gap: var(--spacing-2xs);
+    transition:
+      border-color var(--transition-default),
       color var(--transition-default),
       background-color var(--transition-default),
       box-shadow var(--transition-default);

package/__inner__/cjs/components/ChipNext/Chip.css

@@ -8,7 +8,7 @@
   padding: 0 var(--chip-padding-x);
   min-inline-size: var(--chip-min-width);
   color: var(--chip-text-color);
-  gap: var(--space-s);
+  gap: var(--spacing-2xs);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -41,8 +41,8 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
 
       --chip-min-width: 64px;
-      --chip-height: var(--space-xl);
-      --chip-padding-x: var(--space-m);
+      --chip-height: var(--spacing-m);
+      --chip-padding-x: var(--spacing-xs);
     }
 .ChipNext_size_s {
       font: var(--typography-text-s-font);
@@ -50,8 +50,8 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --chip-min-width: 72px;
-      --chip-height: var(--space-2xl);
-      --chip-padding-x: var(--space-l);
+      --chip-height: var(--spacing-l);
+      --chip-padding-x: var(--spacing-s);
     }
 .ChipNext_size_m {
       font: var(--typography-text-m-font);
@@ -59,7 +59,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
 
       --chip-min-width: 80px;
-      --chip-height: var(--space-3xl);
+      --chip-height: var(--spacing-xl);
       --chip-padding-x: 20px;
     }
 .ChipNext_size_l {
@@ -68,8 +68,8 @@
       text-transform: var(--typography-text-l-text_transform, none);
 
       --chip-min-width: 88px;
-      --chip-height: var(--space-4xl);
-      --chip-padding-x: var(--space-xl);
+      --chip-height: var(--spacing-2xl);
+      --chip-padding-x: var(--spacing-m);
     }
 .ChipNext_color_primary {
       --chip-bg-color: var(--color-background-action-light);

package/__inner__/cjs/components/Container/Container.css

@@ -25,41 +25,41 @@
     max-inline-size: 100%;
   }
 .Container_gutters_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
 .Container_gutters_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
 .Container_gutters_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
 .Container_gutters_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
 .Container_gutters_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
 .Container_gutters_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
 @media (min-width: 0) {
       .Container_gutters_xs_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
       .Container_gutters_xs_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
       .Container_gutters_xs_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
       .Container_gutters_xs_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
       .Container_gutters_xs_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
       .Container_gutters_xs_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
       .Container_maxWidth_xs_s {
     max-inline-size: var(--breakpoint-s);
@@ -76,22 +76,22 @@
   }
 @media (min-width: 640px) {
       .Container_gutters_s_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
       .Container_gutters_s_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
       .Container_gutters_s_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
       .Container_gutters_s_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
       .Container_gutters_s_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
       .Container_gutters_s_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
       .Container_maxWidth_s_s {
     max-inline-size: var(--breakpoint-s);
@@ -108,22 +108,22 @@
   }
 @media (min-width: 1024px) {
       .Container_gutters_m_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
       .Container_gutters_m_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
       .Container_gutters_m_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
       .Container_gutters_m_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
       .Container_gutters_m_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
       .Container_gutters_m_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
       .Container_maxWidth_m_s {
     max-inline-size: var(--breakpoint-s);
@@ -140,22 +140,22 @@
   }
 @media (min-width: 1280px) {
       .Container_gutters_l_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
       .Container_gutters_l_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
       .Container_gutters_l_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
       .Container_gutters_l_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
       .Container_gutters_l_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
       .Container_gutters_l_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
       .Container_maxWidth_l_s {
     max-inline-size: var(--breakpoint-s);

package/__inner__/cjs/components/DataList/DataList.css

@@ -32,7 +32,7 @@
 }
 .DataList-animation-enter {
     opacity: 0;
-    transform: translate(0, calc(var(--space-s) * -1));
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
     pointer-events: none;
   }
 .DataList-animation-enter-active {
@@ -57,11 +57,11 @@
     transition:
       opacity var(--transition-default),
       transform var(--transition-default);
-    transform: translate(0, calc(var(--space-s) * -1));
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
     pointer-events: none;
   }
 .DataList-animation-exit-done {
     opacity: 0;
-    transform: translate(0, calc(var(--space-s) * -1));
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
     pointer-events: none;
   }

package/__inner__/cjs/components/Drawer/Drawer.css

@@ -39,7 +39,7 @@
   }
 .Drawer-Subtitle {
     color: var(--color-content-secondary);
-    margin-block-start: var(--space-s);
+    margin-block-start: var(--spacing-2xs);
     padding-inline-end: var(--drawer-header-item-padding-right);
   }
 .Drawer-Body {
@@ -59,7 +59,7 @@
     display: flex;
     justify-content: flex-end;
     margin-block-start: auto;
-    gap: var(--space-s);
+    gap: var(--spacing-2xs);
   }
 .Drawer_variant_medium {
       --drawer-width: 480px;