@ozen-ui/kit 0.37.2 → 0.39.0

package/__inner__/esm/components/IconButtonNext/IconButton.css

@@ -0,0 +1,348 @@
+.IconButtonNext {
+  --icon-button-bg-color: var(--color-background-action);
+  --icon-button-bg-color-hover: var(--color-background-action-hover);
+  --icon-button-bg-color-active: var(--color-background-action-pressed);
+  --icon-button-font-color: var(--color-content-action-on);
+  block-size: var(--icon-button-size);
+  inline-size: var(--icon-button-size);
+  padding: 0;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--border-radius-xs);
+  border: none;
+  color: var(--icon-button-font-color);
+  background-color: var(--icon-button-bg-color);
+  opacity: 1;
+  transition:
+    background-color var(--transition-default),
+    box-shadow var(--transition-default),
+    opacity var(--transition-default);
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+}
+
+  .IconButtonNext_size_2xs {
+    --icon-button-size: 32px;
+  }
+
+  .IconButtonNext_size_2xs.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
+    --icon-button-size: 24px;
+  }
+
+  .IconButtonNext_size_xs {
+    --icon-button-size: 40px;
+  }
+
+  .IconButtonNext_size_xs.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
+    --icon-button-size: 28px;
+  }
+
+  .IconButtonNext_size_s {
+    --icon-button-size: 48px;
+  }
+
+  .IconButtonNext_size_s.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
+    --icon-button-size: 32px;
+  }
+
+  .IconButtonNext_size_m {
+    --icon-button-size: 56px;
+  }
+
+  .IconButtonNext_size_m.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
+    --icon-button-size: 40px;
+  }
+
+  .IconButtonNext_size_l {
+    --icon-button-size: 64px;
+  }
+
+  .IconButtonNext_size_l.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
+    --icon-button-size: 48px;
+  }
+
+  /** contained */
+
+  .IconButtonNext_variant_contained.IconButtonNext_color_primary {
+    --icon-button-bg-color: var(--color-background-action);
+    --icon-button-bg-color-hover: var(--color-background-action-hover);
+    --icon-button-bg-color-active: var(--color-background-action-pressed);
+    --icon-button-font-color: var(--color-content-action-on);
+    --icon-button-font-color-hover: var(--color-content-action-on);
+    --icon-button-font-color-active: var(--color-content-action-on);
+    --icon-button-font-color-focus: var(--color-content-action-on);
+  }
+
+  .IconButtonNext_variant_contained.IconButtonNext_color_secondary {
+    --icon-button-bg-color: var(--color-content-action-secondary);
+    --icon-button-bg-color-hover: var(--color-content-action-secondary-hover);
+    --icon-button-bg-color-active: var(
+      --color-content-action-secondary-pressed
+    );
+    --icon-button-font-color: var(--color-content-action-on);
+    --icon-button-font-color-hover: var(--color-content-action-on);
+    --icon-button-font-color-active: var(--color-content-action-on);
+    --icon-button-font-color-focus: var(--color-content-action-on);
+  }
+
+  .IconButtonNext_variant_contained.IconButtonNext_color_tertiary {
+    --icon-button-bg-color: var(--color-background-tertiary);
+    --icon-button-bg-color-hover: var(--color-background-tertiary-hover);
+    --icon-button-bg-color-active: var(--color-background-tertiary-pressed);
+    --icon-button-font-color: var(--color-content-primary);
+    --icon-button-font-color-hover: var(--color-content-primary);
+    --icon-button-font-color-active: var(--color-content-primary);
+    --icon-button-font-color-focus: var(--color-content-primary);
+  }
+
+  .IconButtonNext_variant_contained.IconButtonNext_color_error {
+    --icon-button-bg-color: var(--color-background-error);
+    --icon-button-bg-color-hover: var(--color-background-error-hover);
+    --icon-button-bg-color-active: var(--color-background-error-pressed);
+    --icon-button-font-color: var(--color-content-action-on);
+    --icon-button-font-color-hover: var(--color-content-action-on);
+    --icon-button-font-color-active: var(--color-content-action-on);
+    --icon-button-font-color-focus: var(--color-content-action-on);
+  }
+
+  /** contained-additional */
+
+  .IconButtonNext_variant_contained-additional.IconButtonNext_color_primary {
+    --icon-button-bg-color: var(--color-background-action-light);
+    --icon-button-bg-color-hover: var(--color-background-action-light-hover);
+    --icon-button-bg-color-active: var(--color-background-action-light-pressed);
+    --icon-button-font-color: var(--color-content-action);
+    --icon-button-font-color-hover: var(--color-content-action);
+    --icon-button-font-color-active: var(--color-content-action);
+    --icon-button-font-color-focus: var(--color-content-action);
+  }
+
+  .IconButtonNext_variant_contained-additional.IconButtonNext_color_secondary {
+    --icon-button-bg-color: var(--color-background-secondary);
+    --icon-button-bg-color-hover: var(--color-background-secondary-hover);
+    --icon-button-bg-color-active: var(--color-background-secondary-pressed);
+    --icon-button-font-color: var(--color-content-primary);
+    --icon-button-font-color-hover: var(--color-content-primary);
+    --icon-button-font-color-active: var(--color-content-primary);
+    --icon-button-font-color-focus: var(--color-content-primary);
+  }
+
+  .IconButtonNext_variant_contained-additional.IconButtonNext_color_tertiary {
+    --icon-button-bg-color: var(--color-background-primary);
+    --icon-button-bg-color-hover: var(--color-background-primary-hover);
+    --icon-button-bg-color-active: var(--color-background-primary-pressed);
+    --icon-button-font-color: var(--color-content-secondary);
+    --icon-button-font-color-hover: var(--color-content-secondary);
+    --icon-button-font-color-active: var(--color-content-secondary);
+    --icon-button-font-color-focus: var(--color-content-secondary);
+  }
+
+  .IconButtonNext_variant_contained-additional.IconButtonNext_color_error {
+    --icon-button-bg-color: var(--color-background-error-light);
+    --icon-button-bg-color-hover: var(--color-background-error-light-hover);
+    --icon-button-bg-color-active: var(--color-background-error-light-pressed);
+    --icon-button-font-color: var(--color-content-error);
+    --icon-button-font-color-hover: var(--color-content-error);
+    --icon-button-font-color-active: var(--color-content-error);
+    --icon-button-font-color-focus: var(--color-content-error);
+  }
+
+  /** ghost */
+
+  .IconButtonNext_variant_ghost.IconButtonNext_color_primary {
+    --icon-button-bg-color: transparent;
+    --icon-button-bg-color-hover: var(--color-background-action-light-hover);
+    --icon-button-bg-color-active: var(--color-background-action-light-pressed);
+    --icon-button-font-color: var(--color-content-action);
+    --icon-button-font-color-hover: var(--color-content-action);
+    --icon-button-font-color-active: var(--color-content-action);
+    --icon-button-font-color-focus: var(--color-content-action);
+  }
+
+  .IconButtonNext_variant_ghost.IconButtonNext_color_secondary {
+    --icon-button-bg-color: transparent;
+    --icon-button-bg-color-hover: var(--color-background-secondary-hover);
+    --icon-button-bg-color-active: var(--color-background-secondary-pressed);
+    --icon-button-font-color: var(--color-content-primary);
+    --icon-button-font-color-hover: var(--color-content-primary);
+    --icon-button-font-color-active: var(--color-content-primary);
+    --icon-button-font-color-focus: var(--color-content-primary);
+  }
+
+  .IconButtonNext_variant_ghost.IconButtonNext_color_tertiary {
+    --icon-button-bg-color: transparent;
+    --icon-button-bg-color-hover: var(--color-background-primary-hover);
+    --icon-button-bg-color-active: var(--color-background-primary-pressed);
+    --icon-button-font-color: var(--color-content-secondary);
+    --icon-button-font-color-hover: var(--color-content-secondary);
+    --icon-button-font-color-active: var(--color-content-secondary);
+    --icon-button-font-color-focus: var(--color-content-secondary);
+  }
+
+  .IconButtonNext_variant_ghost.IconButtonNext_color_error {
+    --icon-button-bg-color: transparent;
+    --icon-button-bg-color-hover: var(--color-background-error-light-hover);
+    --icon-button-bg-color-active: var(--color-background-error-light-pressed);
+    --icon-button-font-color: var(--color-content-error);
+    --icon-button-font-color-hover: var(--color-content-error);
+    --icon-button-font-color-active: var(--color-content-error);
+    --icon-button-font-color-focus: var(--color-content-error);
+  }
+
+  /** function */
+
+  .IconButtonNext_variant_function {
+    --icon-button-size: auto;
+  }
+
+  .IconButtonNext_variant_function.IconButtonNext_color_primary,
+  .IconButtonNext_variant_function.IconButtonNext_color_secondary,
+  .IconButtonNext_variant_function.IconButtonNext_color_tertiary,
+  .IconButtonNext_variant_function.IconButtonNext_color_error {
+    --icon-button-bg-color: transparent;
+    --icon-button-bg-color-hover: transparent;
+    --icon-button-bg-color-active: transparent;
+  }
+
+  .IconButtonNext_variant_function.IconButtonNext_color_primary {
+    --icon-button-font-color: var(--color-content-action);
+    --icon-button-font-color-hover: var(--color-background-action-hover);
+    --icon-button-font-color-active: var(--color-background-action-pressed);
+    --icon-button-font-color-focus: var(--color-background-action-pressed);
+  }
+
+  .IconButtonNext_variant_function.IconButtonNext_color_secondary {
+    --icon-button-font-color: var(--color-content-action-secondary);
+    --icon-button-font-color-hover: var(--color-content-action-secondary-hover);
+    --icon-button-font-color-active: var(
+      --color-content-action-secondary-pressed
+    );
+    --icon-button-font-color-focus: var(
+      --color-content-action-secondary-pressed
+    );
+  }
+
+  .IconButtonNext_variant_function.IconButtonNext_color_tertiary {
+    --icon-button-font-color: var(--color-content-secondary);
+    --icon-button-font-color-hover: var(--color-content-secondary);
+    --icon-button-font-color-active: var(--color-content-secondary);
+    --icon-button-font-color-focus: var(--color-content-secondary);
+  }
+
+  .IconButtonNext_variant_function.IconButtonNext_color_error {
+    --icon-button-font-color: var(--color-content-error);
+    --icon-button-font-color-hover: var(--color-content-error-hover);
+    --icon-button-font-color-active: var(--color-content-error-pressed);
+    --icon-button-font-color-focus: var(--color-content-error-pressed);
+  }
+
+  /** floating */
+
+  .IconButtonNext_variant_floating {
+    --icon-button-bg-color: var(--color-background-main);
+    --icon-button-bg-color-hover: var(--color-background-main-hover);
+    --icon-button-bg-color-active: var(--color-background-main-pressed);
+    --icon-button-font-color: var(--color-content-primary);
+    --icon-button-font-color-active: var(--color-content-primary);
+    --icon-button-font-color-focus: var(--color-content-primary);
+  }
+
+  .IconButtonNext_variant_floating::after {
+      content: '';
+      inset: 0;
+      position: absolute;
+      inline-size: 100%;
+      border-radius: inherit;
+      box-shadow: 0 8px 32px rgb(0 0 0 / 8%);
+    }
+
+  /** rounded */
+
+  .IconButtonNext_variant_contained.IconButtonNext_rounded,
+  .IconButtonNext_variant_contained-additional.IconButtonNext_rounded,
+  .IconButtonNext_variant_ghost.IconButtonNext_rounded,
+  .IconButtonNext_variant_floating.IconButtonNext_rounded {
+    border-radius: 50%;
+  }
+
+  /** disabled */
+
+  .IconButtonNext_variant_contained.IconButtonNext_disabled,
+  .IconButtonNext_variant_contained.IconButtonNext_loading,
+  .IconButtonNext_variant_contained-additional.IconButtonNext_disabled,
+  .IconButtonNext_variant_contained-additional.IconButtonNext_loading,
+  .IconButtonNext_variant_ghost.IconButtonNext_disabled,
+  .IconButtonNext_variant_ghost.IconButtonNext_loading,
+  .IconButtonNext_variant_function.IconButtonNext_disabled,
+  .IconButtonNext_variant_function.IconButtonNext_loading,
+  .IconButtonNext_variant_floating.IconButtonNext_disabled,
+  .IconButtonNext_variant_floating.IconButtonNext_loading {
+    --icon-button-font-color: var(--color-content-disabled);
+  }
+
+  .IconButtonNext_variant_contained.IconButtonNext_disabled svg, .IconButtonNext_variant_contained.IconButtonNext_loading svg, .IconButtonNext_variant_contained-additional.IconButtonNext_disabled svg, .IconButtonNext_variant_contained-additional.IconButtonNext_loading svg, .IconButtonNext_variant_ghost.IconButtonNext_disabled svg, .IconButtonNext_variant_ghost.IconButtonNext_loading svg, .IconButtonNext_variant_function.IconButtonNext_disabled svg, .IconButtonNext_variant_function.IconButtonNext_loading svg, .IconButtonNext_variant_floating.IconButtonNext_disabled svg, .IconButtonNext_variant_floating.IconButtonNext_loading svg {
+      color: currentcolor;
+    }
+
+  .IconButtonNext_variant_contained.IconButtonNext_disabled,
+  .IconButtonNext_variant_contained.IconButtonNext_loading,
+  .IconButtonNext_variant_contained-additional.IconButtonNext_disabled,
+  .IconButtonNext_variant_contained-additional.IconButtonNext_loading,
+  .IconButtonNext_variant_floating.IconButtonNext_disabled,
+  .IconButtonNext_variant_floating.IconButtonNext_loading {
+    --icon-button-bg-color: var(--color-background-disabled);
+    --icon-button-bg-color-hover: var(--color-background-disabled);
+    --icon-button-bg-color-active: var(--color-background-disabled);
+  }
+
+  .IconButtonNext_variant_ghost.IconButtonNext_disabled,
+  .IconButtonNext_variant_ghost.IconButtonNext_loading,
+  .IconButtonNext_variant_function.IconButtonNext_disabled,
+  .IconButtonNext_variant_function.IconButtonNext_loading {
+    --icon-button-bg-color: transparent;
+    --icon-button-bg-color-hover: transparent;
+    --icon-button-bg-color-active: transparent;
+  }
+
+  /** focus */
+
+  .IconButtonNext:focus:not(:focus-visible, :active, :hover) {
+    box-shadow: none;
+    color: var(--icon-button-font-color);
+  }
+
+  .IconButtonNext:focus {
+    outline: 0;
+
+    /* the bug in outline property before chrome version 94 – doesn't repeat radius of an element */
+    box-shadow: var(--shadow-outline-focused);
+    color: var(--icon-button-font-color-focus);
+  }
+
+  .IconButtonNext:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+
+  /** hover */
+
+  .IconButtonNext:hover {
+    background-color: var(--icon-button-bg-color-hover);
+    color: var(--icon-button-font-color-hover);
+  }
+
+  /** active */
+
+  .IconButtonNext:active {
+    background-color: var(--icon-button-bg-color-active);
+    color: var(--icon-button-font-color-active);
+  }
+
+  .IconButtonNext_disabled,
+  .IconButtonNext_loading {
+    pointer-events: none;
+    cursor: auto;
+  }

package/__inner__/esm/components/IconButtonNext/IconButton.d.ts

@@ -0,0 +1,41 @@
+import './IconButton.css';
+import type { ElementType } from 'react';
+import type { IconSize, IconProps } from '@ozen-ui/icons';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
+import { ICON_BUTTON_DEFAULT_TAG } from './constants';
+export declare const iconButtonColorVariant: readonly ["primary", "secondary", "tertiary", "error"];
+export declare const iconButtonVariant: readonly ["contained", "contained-additional", "ghost", "function", "floating"];
+export type IconButtonVariant = (typeof iconButtonVariant)[number];
+export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
+export type IconButtonIcon = RenderContentType<IconProps & {
+    size?: IconSize;
+}>['content'];
+type IconButtonBaseProps = {
+    /** Иконка */
+    icon: IconButtonIcon;
+    /** Вариант представления компонента */
+    variant?: IconButtonVariant;
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Основной цвет компонента */
+    color?: IconButtonColorVariant;
+    /** Цвет иконки кнопки */
+    iconColor?: string;
+    /** Если {true} уменьшает размер компонента */
+    compressed?: boolean;
+    /** Если {true} делает компонент заблокированным */
+    disabled?: boolean;
+    /** Если {true} переводит компонент в состояние загрузки  */
+    loading?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Если {true} делает компонент круглым  */
+    rounded?: boolean;
+    children?: never;
+};
+export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
+export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button">;
+export {};

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

@@ -0,0 +1,67 @@
+import { __assign, __rest } from "tslib";
+import './IconButton.css';
+import React, { useMemo } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { renderContent } from '../../utils/renderContent';
+import { ButtonBase } from '../ButtonBase';
+import { Loader } from '../Loader';
+import { ICON_BUTTON_DEFAULT_SIZE, ICON_BUTTON_DEFAULT_VARIANT, ICON_BUTTON_DEFAULT_COLOR, ICON_BUTTON_DEFAULT_TAG, } from './constants';
+export var iconButtonColorVariant = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'error',
+];
+export var iconButtonVariant = [
+    'contained',
+    'contained-additional',
+    'ghost',
+    'function',
+    'floating',
+];
+export var cnIconButton = cn('IconButtonNext');
+var loaderSizeMapper = {
+    '2xs': 's',
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'l',
+};
+export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: '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 renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+                color: iconColor,
+            },
+        });
+    };
+    var resolvedChildren = useMemo(function () {
+        if (loading) {
+            return (React.createElement(Loader, { className: cnIconButton('Loader'), color: "var(--color-content-disabled)", size: loaderSizeMapper[size] }));
+        }
+        if (icon) {
+            return renderIcon(icon);
+        }
+        return null;
+    }, [loading, size, iconColor, icon, renderIcon]);
+    return (React.createElement(ButtonBase, __assign({ as: Tag, disabled: disabled, loading: loading, onClick: onClick, className: cnIconButton({
+            variant: variant,
+            size: size,
+            color: color,
+            disabled: disabled,
+            loading: loading,
+            compressed: compressed,
+            rounded: rounded,
+        }, [className]) }, other, { ref: ref }), resolvedChildren));
+});
+IconButton.displayName = 'IconButton';

package/__inner__/esm/components/IconButtonNext/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ICON_BUTTON_DEFAULT_SIZE = "m";
+export declare const ICON_BUTTON_DEFAULT_VARIANT = "ghost";
+export declare const ICON_BUTTON_DEFAULT_COLOR = "secondary";
+export declare const ICON_BUTTON_DEFAULT_TAG = "button";

package/__inner__/esm/components/IconButtonNext/constants.js

@@ -0,0 +1,4 @@
+export var ICON_BUTTON_DEFAULT_SIZE = 'm';
+export var ICON_BUTTON_DEFAULT_VARIANT = 'ghost';
+export var ICON_BUTTON_DEFAULT_COLOR = 'secondary';
+export var ICON_BUTTON_DEFAULT_TAG = 'button';

package/__inner__/esm/components/IconButtonNext/index.d.ts

@@ -0,0 +1 @@
+export * from './IconButton';

package/__inner__/esm/components/IconButtonNext/index.js

@@ -0,0 +1 @@
+export * from './IconButton';

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);
   }