@ozen-ui/kit 0.37.2 → 0.39.0

package/ButtonBase/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/ButtonBase/index.js",
+	"module": "../__inner__/esm/components/ButtonBase/index.js",
+	"types": "../__inner__/esm/components/ButtonBase/index.d.ts"
+}

package/ButtonNext/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/ButtonNext/index.js",
+	"module": "../__inner__/esm/components/ButtonNext/index.js",
+	"types": "../__inner__/esm/components/ButtonNext/index.d.ts"
+}

package/IconButtonNext/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/IconButtonNext/index.js",
+	"module": "../__inner__/esm/components/IconButtonNext/index.js",
+	"types": "../__inner__/esm/components/IconButtonNext/index.d.ts"
+}

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;
 }
-
-.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.d.ts

@@ -47,5 +47,8 @@ type ButtonBaseProps = {
 };
 export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;
 export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ButtonNext
+ */
 export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button">;
 export {};

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

@@ -4,6 +4,7 @@ exports.Button = exports.cnButton = exports.buttonColorVariant = exports.buttonV
 var tslib_1 = require("tslib");
 require("./Button.css");
 var react_1 = tslib_1.__importDefault(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var react_transition_group_1 = require("react-transition-group");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
@@ -25,13 +26,17 @@ exports.buttonColorVariant = [
     'error',
 ];
 exports.cnButton = (0, classname_1.cn)('Button');
-// TODO: стандартизировать стили кнопки для состояния загрузки
-// TODO: реализовать базовую кнопку
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ButtonNext
+ */
 exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Button',
     });
+    if (process.env.NODE_ENV !== 'production') {
+        (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);
     var handleClick = function (event) {
@@ -62,6 +67,6 @@ exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(
             loading: loading,
             color: color,
             fullWidth: fullWidth,
-        }, [className]) }, other, { ref: ref }), childContent));
+        }, [className]) }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), childContent));
 });
 exports.Button.displayName = 'Button';

package/__inner__/cjs/components/ButtonBase/ButtonBase.css

@@ -0,0 +1,10 @@
+.ButtonBase_unstyled {
+    background-color: transparent;
+    text-decoration: none;
+    cursor: pointer;
+    outline: 0;
+    border: 0;
+    margin: 0;
+    border-radius: 0;
+    padding: 0;
+  }

package/__inner__/cjs/components/ButtonBase/ButtonBase.d.ts

@@ -0,0 +1,20 @@
+import './ButtonBase.css';
+import type { ReactNode, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { BUTTON_BASE_DEFAULT_TAG } from './constants';
+type ButtonBaseBaseProps = {
+    /** Содержимое кнопки */
+    children?: ReactNode;
+    /** Если {true} делает кнопку заблокированной */
+    disabled?: boolean;
+    /** Если {true} переводит кнопку в состояние загрузки  */
+    loading?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Если {true} делает кнопку не стилизованной */
+    unstyled?: boolean;
+};
+export type ButtonBaseProps<As extends ElementType = typeof BUTTON_BASE_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseBaseProps, As>;
+export declare const cnButtonBase: import("@bem-react/classname").ClassNameFormatter;
+export declare const ButtonBase: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseBaseProps, "button">;
+export {};

package/__inner__/cjs/components/ButtonBase/ButtonBase.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonBase = exports.cnButtonBase = void 0;
+var tslib_1 = require("tslib");
+require("./ButtonBase.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var constants_1 = require("./constants");
+exports.cnButtonBase = (0, classname_1.cn)('ButtonBase');
+exports.ButtonBase = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Button',
+    });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.BUTTON_BASE_DEFAULT_TAG : _a, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, unstyled = props.unstyled, other = tslib_1.__rest(props, ["as", "loading", "children", "disabled", "className", "onClick", "unstyled"]);
+    var handleClick = function (event) {
+        if (onClick && !disabled && !loading) {
+            onClick(event);
+        }
+    };
+    var isInteractionPrevented = disabled || loading;
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: (0, exports.cnButtonBase)({
+            disabled: disabled,
+            loading: loading,
+            unstyled: unstyled,
+        }, [className]) }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), children));
+});
+exports.ButtonBase.displayName = 'ButtonBase';

package/__inner__/cjs/components/ButtonBase/constants.d.ts

@@ -0,0 +1 @@
+export declare const BUTTON_BASE_DEFAULT_TAG = "button";

package/__inner__/cjs/components/ButtonBase/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUTTON_BASE_DEFAULT_TAG = void 0;
+exports.BUTTON_BASE_DEFAULT_TAG = 'button';

package/__inner__/cjs/components/ButtonBase/index.d.ts

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

package/__inner__/cjs/components/ButtonBase/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ButtonBase"), exports);

package/__inner__/cjs/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);
+  }