@ozen-ui/kit 0.37.2 → 0.39.0

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

@@ -0,0 +1,333 @@
+/* stylelint-disable */
+.ButtonNext {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  color: var(--button-font-color);
+  block-size: var(--button-height);
+  min-inline-size: var(--button-min-width);
+  padding: 0 var(--button-padding-x);
+  background-color: var(--button-bg-color);
+  border-radius: var(--border-radius-xs);
+  transition:
+    background-color var(--transition-default),
+    border-color var(--transition-default),
+    box-shadow var(--transition-default),
+    opacity var(--transition-default);
+  -webkit-tap-highlight-color: unset;
+  position: relative;
+}
+.ButtonNext > svg {
+    flex-shrink: 0;
+  }
+.ButtonNext_size_2xs {
+      --button-height: var(--control-height-2xs);
+      --button-padding-x: var(--control-padding-xs);
+      --button-min-width: 56px;
+
+      font: var(--typography-text-2xs-font);
+
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+
+      text-transform: var(--typography-text-2xs-text_transform, none);
+    }
+.ButtonNext_size_xs {
+      --button-height: var(--control-height-xs);
+      --button-padding-x: var(--control-padding-xs);
+      --button-min-width: 64px;
+
+      font: var(--typography-text-xs-font);
+
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+
+      text-transform: var(--typography-text-xs-text_transform, none);
+    }
+.ButtonNext_size_s {
+      --button-height: var(--control-height-s);
+      --button-padding-x: var(--control-padding-s);
+      --button-min-width: 72px;
+
+      font: var(--typography-text-s-font);
+
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+
+      text-transform: var(--typography-text-s-text_transform, none);
+    }
+.ButtonNext_size_m {
+      --button-height: var(--control-height-m);
+      --button-padding-x: var(--control-padding-m);
+      --button-min-width: 80px;
+
+      font: var(--typography-text-m-font);
+
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+
+      text-transform: var(--typography-text-m-text_transform, none);
+    }
+.ButtonNext_size_l {
+      --button-height: var(--control-height-l);
+      --button-padding-x: var(--control-padding-l);
+      --button-min-width: 88px;
+
+      font: var(--typography-text-l-font);
+
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+
+      text-transform: var(--typography-text-l-text_transform, none);
+    }
+.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-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);
+  }
+.ButtonNext_variant_contained.ButtonNext_color_secondary {
+    --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-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);
+  }
+.ButtonNext_variant_contained.ButtonNext_color_tertiary {
+    --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-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_contained.ButtonNext_color_error {
+    --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-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);
+  }
+.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-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_contained-additional.ButtonNext_color_secondary {
+    --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-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_contained-additional.ButtonNext_color_tertiary {
+    --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-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_contained-additional.ButtonNext_color_error {
+    --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-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);
+  }
+.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-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-hover: var(--color-background-secondary-hover);
+    --button-bg-color-active: var(--color-background-secondary-pressed);
+    --button-bg-color-focus: unset;
+    --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-hover: var(--color-background-primary-hover);
+    --button-bg-color-active: var(--color-background-primary-pressed);
+    --button-bg-color-focus: unset;
+    --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-hover: var(--color-background-error-light-hover);
+    --button-bg-color-active: var(--color-background-error-light-pressed);
+    --button-bg-color-focus: unset;
+    --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);
+  }
+.ButtonNext_variant_function {
+    --button-height: auto;
+    --button-min-width: auto;
+    --button-padding-x: 0;
+  }
+.ButtonNext_variant_function.ButtonNext_color_primary,
+  .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;
+  }
+.ButtonNext_variant_function.ButtonNext_color_primary {
+    --button-font-color: var(--color-content-action);
+    --button-font-color-hover: var(--color-background-action-hover);
+    --button-font-color-active: var(--color-background-action-pressed);
+    --button-font-color-focus: var(--color-background-action-pressed);
+  }
+.ButtonNext_variant_function.ButtonNext_color_secondary {
+    --button-font-color: var(--color-content-action-secondary);
+    --button-font-color-hover: var(--color-content-action-secondary-hover);
+    --button-font-color-active: var(--color-content-action-secondary-pressed);
+    --button-font-color-focus: var(--color-content-action-secondary-pressed);
+  }
+.ButtonNext_variant_function.ButtonNext_color_tertiary {
+    --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_function.ButtonNext_color_error {
+    --button-font-color: var(--color-content-error);
+    --button-font-color-hover: var(--color-content-error-hover);
+    --button-font-color-active: var(--color-content-error-pressed);
+    --button-font-color-focus: var(--color-content-error-pressed);
+  }
+.ButtonNext_variant_contained.ButtonNext_disabled,
+  .ButtonNext_variant_contained.ButtonNext_loading,
+  .ButtonNext_variant_contained-additional.ButtonNext_disabled,
+  .ButtonNext_variant_contained-additional.ButtonNext_loading,
+  .ButtonNext_variant_ghost.ButtonNext_disabled,
+  .ButtonNext_variant_ghost.ButtonNext_loading,
+  .ButtonNext_variant_function.ButtonNext_disabled,
+  .ButtonNext_variant_function.ButtonNext_loading {
+    --button-font-color: var(--color-content-disabled);
+  }
+.ButtonNext_variant_contained.ButtonNext_disabled,
+  .ButtonNext_variant_contained.ButtonNext_loading,
+  .ButtonNext_variant_contained-additional.ButtonNext_disabled,
+  .ButtonNext_variant_contained-additional.ButtonNext_loading {
+    --button-bg-color: var(--color-background-disabled);
+    --button-bg-color-hover: var(--color-background-disabled);
+    --button-bg-color-active: var(--color-background-disabled);
+  }
+.ButtonNext_variant_ghost.ButtonNext_disabled,
+  .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;
+  }
+.ButtonNext:focus:not(:focus-visible, :active, :hover) {
+    box-shadow: none;
+    color: var(--button-font-color);
+  }
+.ButtonNext:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+.ButtonNext:focus {
+    outline: 0;
+    box-shadow: var(--shadow-outline-focused);
+    background-color: var(--button-bg-color-focus);
+    color: var(--button-font-color-focus);
+  }
+.ButtonNext:hover {
+    background-color: var(--button-bg-color-hover);
+    color: var(--button-font-color-hover);
+  }
+.ButtonNext:active {
+    background-color: var(--button-bg-color-active);
+    color: var(--button-font-color-active);
+  }
+.ButtonNext_fullWidth {
+    inline-size: 100%;
+  }
+.ButtonNext_disabled,
+  .ButtonNext_loading {
+    pointer-events: none;
+    cursor: auto;
+  }
+.ButtonNext_loading .ButtonNext-Content {
+      visibility: hidden;
+    }
+.ButtonNext-Content {
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    text-align: center;
+    place-content: center;
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--spacing-2xs);
+  }
+.ButtonNext-Label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+.ButtonNext-Loader {
+    position: absolute;
+  }
+.ButtonNext-Loader_animation-enter {
+        opacity: 0;
+      }
+.ButtonNext-Loader_animation-enter-active {
+        opacity: 1;
+        transition: opacity var(--transition-default);
+      }
+.ButtonNext-Loader_animation-exit {
+        opacity: 1;
+      }
+.ButtonNext-Loader_animation-exit-active {
+        opacity: 0;
+        transition: opacity var(--transition-default);
+      }
+.ButtonNext .Loader {
+    color: var(--color-content-disabled);
+  }

package/__inner__/esm/components/ButtonNext/Button.d.ts

@@ -0,0 +1,51 @@
+import './Button.css';
+import type { ReactNode, ElementType, ComponentPropsWithRef } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
+import { BUTTON_DEFAULT_TAG } from './constants';
+export declare const buttonVariant: readonly ["contained", "contained-additional", "ghost", "function"];
+export declare const buttonColorVariant: readonly ["primary", "secondary", "tertiary", "error"];
+export type ButtonVariant = (typeof buttonVariant)[number];
+export type ButtonColorVariant = (typeof buttonColorVariant)[number];
+export type ButtonIcon = RenderContentType<IconProps & {
+    size?: IconSize;
+}>['content'];
+type ButtonBaseProps = {
+    /**
+     * Вариант отображения кнопки
+     * @default contained
+     * */
+    variant?: ButtonVariant;
+    /**
+     * Размер
+     * @default m
+     * */
+    size?: FormElementSizeVariant;
+    /**
+     * Цвет
+     * @default primary
+     * */
+    color?: ButtonColorVariant;
+    /** Содержимое кнопки */
+    children?: ReactNode;
+    /** Если {true} делает кнопку заблокированной */
+    disabled?: boolean;
+    /** Если {true} переводит кнопку в состояние загрузки  */
+    loading?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Иконка слева */
+    iconLeft?: ButtonIcon;
+    /** Иконка справа */
+    iconRight?: ButtonIcon;
+    /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
+    fullWidth?: boolean;
+    /** Свойства лейбла кнопки */
+    labelProps?: ComponentPropsWithRef<'span'>;
+};
+export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;
+export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button">;
+export {};

package/__inner__/esm/components/ButtonNext/Button.js

@@ -0,0 +1,57 @@
+import { __assign, __rest } from "tslib";
+import './Button.css';
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+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 { BUTTON_DEFAULT_SIZE, BUTTON_DEFAULT_VARIANT, BUTTON_DEFAULT_COLOR, BUTTON_DEFAULT_TAG, } from './constants';
+export var buttonVariant = [
+    'contained',
+    'contained-additional',
+    'ghost',
+    'function',
+];
+export var buttonColorVariant = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'error',
+];
+export var cnButton = cn('ButtonNext');
+export var Button = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'ButtonNext',
+    });
+    var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? 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 = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
+    var iconSize = getIconSizeToFormElement(size);
+    var renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+            },
+        });
+    };
+    var childContent = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: cnButton('Content') },
+            renderIcon(iconLeft),
+            React.createElement("span", __assign({}, labelProps, { className: cnButton('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
+            renderIcon(iconRight)),
+        React.createElement(CSSTransition, { in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
+            React.createElement(Loader, { size: iconSize, className: cnButton('Loader') }))));
+    return (React.createElement(ButtonBase, __assign({ as: Tag, disabled: disabled, loading: loading, onClick: onClick, className: cnButton({
+            variant: variant,
+            size: size,
+            disabled: disabled,
+            loading: loading,
+            color: color,
+            fullWidth: fullWidth,
+        }, [className]) }, other, { ref: ref }), childContent));
+});
+Button.displayName = 'Button';

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

@@ -0,0 +1,4 @@
+export declare const BUTTON_DEFAULT_SIZE = "m";
+export declare const BUTTON_DEFAULT_VARIANT = "contained";
+export declare const BUTTON_DEFAULT_COLOR = "primary";
+export declare const BUTTON_DEFAULT_TAG = "button";

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

@@ -0,0 +1,4 @@
+export var BUTTON_DEFAULT_SIZE = 'm';
+export var BUTTON_DEFAULT_VARIANT = 'contained';
+export var BUTTON_DEFAULT_COLOR = 'primary';
+export var BUTTON_DEFAULT_TAG = 'button';

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

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

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

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

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