@ozen-ui/kit 0.38.0 → 0.39.0

package/__inner__/esm/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__/esm/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__/esm/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__/esm/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;

package/__inner__/esm/components/FieldControl/FieldControl.css

@@ -16,7 +16,7 @@
       --textfield-gutter-x: 12px;
       --textfield-input-height: 32px;
       --textfield-input-padding: 8px 0;
-      --textfield-input-gap: var(--space-s);
+      --textfield-input-gap: var(--spacing-2xs);
 
       font: var(--typography-text-2xs-font);
 
@@ -28,7 +28,7 @@
       --textfield-gutter-x: 12px;
       --textfield-input-height: 40px;
       --textfield-input-padding: 12px 0;
-      --textfield-input-gap: var(--space-s);
+      --textfield-input-gap: var(--spacing-2xs);
 
       font: var(--typography-text-xs-font);
 
@@ -40,7 +40,7 @@
       --textfield-gutter-x: 16px;
       --textfield-input-height: 48px;
       --textfield-input-padding: 14px 0;
-      --textfield-input-gap: var(--space-m);
+      --textfield-input-gap: var(--spacing-xs);
 
       font: var(--typography-text-s-font);
 
@@ -52,7 +52,7 @@
       --textfield-gutter-x: 20px;
       --textfield-input-height: 56px;
       --textfield-input-padding: 16px 0;
-      --textfield-input-gap: var(--space-m);
+      --textfield-input-gap: var(--spacing-xs);
 
       font: var(--typography-text-m-font);
 
@@ -64,7 +64,7 @@
       --textfield-gutter-x: 24px;
       --textfield-input-height: 64px;
       --textfield-input-padding: 18px 0;
-      --textfield-input-gap: var(--space-l);
+      --textfield-input-gap: var(--spacing-s);
 
       font: var(--typography-text-l-font);
 

package/__inner__/esm/components/File/File.css

@@ -3,8 +3,8 @@
   font: var(--typography-text-s_1-font);
   letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
   text-transform: var(--typography-text-s_1-text_transform, none);
-  inline-size: var(--space-3xl);
-  block-size: var(--space-3xl);
+  inline-size: var(--spacing-xl);
+  block-size: var(--spacing-xl);
   display: flex;
   align-items: center;
   justify-content: center;

package/__inner__/esm/components/FilePicker/FilePicker.css

@@ -62,35 +62,35 @@
       --textfield-input-height: 32px;
       --textfield-input-font: var(--typography-text-2xs-font);
       --textfield-input-padding: 8px 0 8px;
-      --textfield-input-gap: var(--space-s);
+      --textfield-input-gap: var(--spacing-2xs);
     }
 .FilePicker_size_xs {
       --textfield-gutter-x: 12px;
       --textfield-input-height: 40px;
       --textfield-input-font: var(--typography-text-xs-font);
       --textfield-input-padding: 19px 0 4px;
-      --textfield-input-gap: var(--space-s);
+      --textfield-input-gap: var(--spacing-2xs);
     }
 .FilePicker_size_s {
       --textfield-gutter-x: 16px;
       --textfield-input-height: 48px;
       --textfield-input-font: var(--typography-text-s-font);
       --textfield-input-padding: 21px 0 6px;
-      --textfield-input-gap: var(--space-m);
+      --textfield-input-gap: var(--spacing-xs);
     }
 .FilePicker_size_m {
       --textfield-gutter-x: 20px;
       --textfield-input-height: 56px;
       --textfield-input-font: var(--typography-text-m-font);
       --textfield-input-padding: 24px 0 6px;
-      --textfield-input-gap: var(--space-m);
+      --textfield-input-gap: var(--spacing-xs);
     }
 .FilePicker_size_l {
       --textfield-gutter-x: 24px;
       --textfield-input-height: 64px;
       --textfield-input-font: var(--typography-text-l-font);
       --textfield-input-padding: 26px 0 6px;
-      --textfield-input-gap: var(--space-l);
+      --textfield-input-gap: var(--spacing-s);
     }
 .FilePicker_fullWidth {
     inline-size: 100%;

package/__inner__/esm/components/FormControlLabel/FormControlLabel.css

@@ -19,35 +19,35 @@
       letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
       text-transform: var(--typography-text-3xs-text_transform, none);
 
-      --form-control-label-gap: var(--space-s);
+      --form-control-label-gap: var(--spacing-2xs);
     }
 .FormControlLabel_size_xs {
       font: var(--typography-text-xs-font);
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
       text-transform: var(--typography-text-xs-text_transform, none);
 
-      --form-control-label-gap: var(--space-s);
+      --form-control-label-gap: var(--spacing-2xs);
     }
 .FormControlLabel_size_s {
       font: var(--typography-text-s-font);
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
 
-      --form-control-label-gap: var(--space-s);
+      --form-control-label-gap: var(--spacing-2xs);
     }
 .FormControlLabel_size_m {
       font: var(--typography-text-m-font);
       letter-spacing: var(--typography-text-m-letter_spacing, 0);
       text-transform: var(--typography-text-m-text_transform, none);
 
-      --form-control-label-gap: var(--space-l);
+      --form-control-label-gap: var(--spacing-s);
     }
 .FormControlLabel_size_l {
       font: var(--typography-text-l-font);
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
-      --form-control-label-gap: var(--space-l);
+      --form-control-label-gap: var(--spacing-s);
     }
 .FormControlLabel_align_top {
       align-items: flex-start;

package/__inner__/esm/components/FormGroup/FormGroup.css

@@ -22,10 +22,10 @@
   .FormGroup_size_2xs,
     .FormGroup_size_xs,
     .FormGroup_size_s {
-      --form-group-gap: var(--space-m) var(--space-xl);
+      --form-group-gap: var(--spacing-xs) var(--spacing-m);
     }
 
   .FormGroup_size_m,
     .FormGroup_size_l {
-      --form-group-gap: var(--space-l) var(--space-2xl);
+      --form-group-gap: var(--spacing-s) var(--spacing-l);
     }

package/__inner__/esm/components/FormTitle/FormTitle.css

@@ -3,29 +3,29 @@
       font: var(--typography-text-2xs_1-font);
       letter-spacing: var(--typography-text-2xs_1-letter_spacing, 0);
       text-transform: var(--typography-text-2xs_1-text_transform, none);
-      margin-block-end: var(--space-m);
+      margin-block-end: var(--spacing-xs);
     }
 .FormTitle_size_xs {
       font: var(--typography-text-xs_1-font);
       letter-spacing: var(--typography-text-xs_1-letter_spacing, 0);
       text-transform: var(--typography-text-xs_1-text_transform, none);
-      margin-block-end: var(--space-m);
+      margin-block-end: var(--spacing-xs);
     }
 .FormTitle_size_s {
       font: var(--typography-text-s_1-font);
       letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
       text-transform: var(--typography-text-s_1-text_transform, none);
-      margin-block-end: var(--space-m);
+      margin-block-end: var(--spacing-xs);
     }
 .FormTitle_size_m {
       font: var(--typography-text-m_1-font);
       letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
       text-transform: var(--typography-text-m_1-text_transform, none);
-      margin-block-end: var(--space-l);
+      margin-block-end: var(--spacing-s);
     }
 .FormTitle_size_l {
       font: var(--typography-text-l_1-font);
       letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
       text-transform: var(--typography-text-l_1-text_transform, none);
-      margin-block-end: var(--space-l);
+      margin-block-end: var(--spacing-s);
     }

package/__inner__/esm/components/IconButton/IconButton.js

@@ -34,7 +34,7 @@ export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
         name: 'IconButton',
     });
     if (process.env.NODE_ENV !== 'production') {
-        deprecate('Компонент «%s» устарел. Для замены используйте компонент «%s».', 'IconButton', 'IconButtonNext');
+        deprecate('Компонент «IconButton» устарел. Для замены используйте компонент «IconButtonNext».');
     }
     var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var isInteractionPrevented = disabled || loading;

package/__inner__/esm/components/List/List.css

@@ -29,7 +29,7 @@
     }
 
   .List_size_2xs {
-      --list-gutter: var(--space-xs);
+      --list-gutter: var(--spacing-3xs);
       --list-item-min-height: 32px;
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 16px;
@@ -40,7 +40,7 @@
     }
 
   .List_size_xs {
-      --list-gutter: var(--space-xs);
+      --list-gutter: var(--spacing-3xs);
       --list-item-min-height: 40px;
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 24px;
@@ -51,7 +51,7 @@
     }
 
   .List_size_s {
-      --list-gutter: var(--space-xs);
+      --list-gutter: var(--spacing-3xs);
       --list-item-min-height: 48px;
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 32px;
@@ -62,7 +62,7 @@
     }
 
   .List_size_m {
-      --list-gutter: var(--space-s);
+      --list-gutter: var(--spacing-2xs);
       --list-item-min-height: 56px;
       --list-item-icon-min-width: 24px;
       --list-item-avatar-min-width: 40px;
@@ -73,7 +73,7 @@
     }
 
   .List_size_l {
-      --list-gutter: var(--space-s);
+      --list-gutter: var(--spacing-2xs);
       --list-item-min-height: 64px;
       --list-item-icon-min-width: 24px;
       --list-item-avatar-min-width: 48px;

package/__inner__/esm/components/Modal/Modal.css

@@ -20,7 +20,7 @@
     inline-size: 400px;
     box-sizing: border-box;
     border: 2px solid black;
-    padding: var(--space-2xl);
+    padding: var(--spacing-l);
   }
 
   .Modal_hidden {

package/__inner__/esm/components/SectionMessage/SectionMessage.css

@@ -44,7 +44,7 @@
     }
 .SectionMessage_size_xs {
       --section-message-padding: 12px;
-      --section-message-column-gap: var(--space-s);
+      --section-message-column-gap: var(--spacing-2xs);
       --section-message-icon-padding: 0;
 
       font: var(--typography-text-xs-font);
@@ -60,7 +60,7 @@
       }
 .SectionMessage_size_s {
       --section-message-padding: 14px 16px;
-      --section-message-column-gap: var(--space-m);
+      --section-message-column-gap: var(--spacing-xs);
 
       font: var(--typography-text-s-font);
 
@@ -75,7 +75,7 @@
       }
 .SectionMessage_size_m {
       --section-message-padding: 16px 20px;
-      --section-message-column-gap: var(--space-m);
+      --section-message-column-gap: var(--spacing-xs);
       --section-message-icon-padding: 0;
 
       font: var(--typography-text-m-font);
@@ -91,7 +91,7 @@
       }
 .SectionMessage_size_l {
       --section-message-padding: 18px 24px;
-      --section-message-column-gap: var(--space-l);
+      --section-message-column-gap: var(--spacing-s);
 
       font: var(--typography-text-l-font);
 
@@ -114,7 +114,7 @@
     align-items: center;
   }
 .SectionMessage-Action {
-    margin-block-start: var(--space-s);
+    margin-block-start: var(--spacing-2xs);
   }
 .SectionMessage-Button.Button {
     color: var(--section-message-button-color);

package/__inner__/esm/components/Segment/components/SegmentItem.css

@@ -4,15 +4,17 @@
   --segment-item-border-radius: var(--border-radius-xs);
   --segment-item-text-color: var(--color-content-primary);
   --segment-item-text-color-hover: var(--color-content-secondary);
-  --segment-item-gap: var(--space-s);
+  --segment-item-gap: var(--spacing-2xs);
   gap: var(--segment-item-gap);
   padding: var(--segment-item-padding-vertical)
     var(--segment-item-padding-horizontal);
   background-color: var(--segment-item-background-color);
   border-radius: var(--segment-item-border-radius);
   color: var(--segment-item-text-color);
-  transition: background-color var(--transition-default),
-    color var(--transition-default), box-shadow var(--transition-default);
+  transition:
+    background-color var(--transition-default),
+    color var(--transition-default),
+    box-shadow var(--transition-default);
   display: flex;
   align-items: center;
   position: relative;

package/__inner__/esm/components/Slider/Slider.css

@@ -16,7 +16,7 @@
     --slider-inner-rail-background-color: var(--color-border-disabled);
   }
 .Slider_hasMarks .Slider-Container {
-      margin-block-end: var(--space-xl);
+      margin-block-end: var(--spacing-m);
     }
 .Slider-Container {
     position: relative;

package/__inner__/esm/components/Snackbar/components/Snackbar/Snackbar.css

@@ -6,8 +6,8 @@
   display: flex;
   flex-direction: column;
   z-index: var(--z-index-snackbar);
-  margin: var(--space-m);
-  gap: var(--space-s);
+  margin: var(--spacing-xs);
+  gap: var(--spacing-2xs);
 
   /* workaround for a removed scroll bar on the body */
   border-inline-end: var(--removed-body-scroll-bar-size) solid transparent;

package/__inner__/esm/components/Tabs/components/Tab/Tab.css

@@ -14,7 +14,7 @@
   white-space: nowrap;
   background: transparent;
   transition: var(--transition-default);
-  gap: var(--space-s);
+  gap: var(--spacing-2xs);
   border: none;
 }
 .Tab:focus {

package/__inner__/esm/components/Tag/Tag.css

@@ -4,7 +4,7 @@
   align-items: center;
   border-radius: var(--border-radius-xs);
   padding: var(--tag-padding);
-  gap: var(--space-xs);
+  gap: var(--spacing-3xs);
   outline: none;
   border: none;
   text-decoration: none;

package/__inner__/esm/components/Textarea/Textarea.css

@@ -83,7 +83,7 @@
 
   .Textarea-Counter {
     float: right;
-    margin-inline-start: var(--space-l);
+    margin-inline-start: var(--spacing-s);
     color: var(--color-content-secondary);
   }
 

package/__inner__/esm/components/Tooltip/Tooltip.css

@@ -3,7 +3,7 @@
   max-inline-size: 300px;
 }
 .Tooltip_size_xs {
-      padding: var(--space-s) var(--space-m);
+      padding: var(--spacing-2xs) var(--spacing-xs);
 
       font: var(--typography-text-xs-font);
 
@@ -12,7 +12,7 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Tooltip_size_s {
-      padding: var(--space-m) var(--space-l);
+      padding: var(--spacing-xs) var(--spacing-s);
 
       font: var(--typography-text-s-font);