@cloud-ru/uikit-product-claudia 1.6.2 → 1.6.4

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.6.4 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-icons@15.1.3](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-dropdown@0.9.23](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-dropdown/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-fields@0.11.26](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-fields/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 1.6.3 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 1.6.2 (2025-11-12)
 
 ### Only dependencies have been changed

package/dist/cjs/components/ButtonClaudia/ButtonClaudia.d.ts

@@ -0,0 +1,6 @@
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { CommonButtonProps } from './types';
+export type ButtonClaudiaProps = WithSupportProps<Omit<CommonButtonProps, 'appearance' | 'iconPosition'>>;
+export declare const ButtonClaudia: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & Omit<CommonButtonProps, "iconPosition" | "appearance"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/cjs/components/ButtonClaudia/ButtonClaudia.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonClaudia = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const constants_1 = require("./constants");
+const helperComponents_1 = require("./helperComponents");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+exports.ButtonClaudia = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = constants_1.SIZE.S, target = constants_1.TARGET.Blank, type = constants_1.HTML_TYPE.Button, tabIndex, fullWidth = false } = _a, rest = __rest(_a, ["className", "size", "target", "type", "tabIndex", "fullWidth"]);
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.ButtonPrivate, Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), (0, utils_1.extractCommonButtonProps)(rest), { className: (0, classnames_1.default)(styles_module_scss_1.default.button, styles_module_scss_1.default.specificityX2, className), iconClassName: styles_module_scss_1.default.icon, labelClassName: styles_module_scss_1.default.label, size: size, fullWidth: fullWidth, target: target, type: type, tabIndex: tabIndex, ref: ref })));
+});

package/dist/cjs/components/ButtonClaudia/constants.d.ts

@@ -0,0 +1,25 @@
+export declare const APPEARANCE: {
+    readonly Tertiary: "tertiary";
+    readonly Secondary: "secondary";
+};
+export declare const HTML_TYPE: {
+    readonly Button: "button";
+    readonly Submit: "submit";
+    readonly Reset: "reset";
+};
+export declare const TARGET: {
+    readonly Blank: "_blank";
+    readonly Self: "_self";
+    readonly Parent: "_parent";
+    readonly Top: "_top";
+};
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const ICON_POSITION: {
+    readonly Before: "before";
+    readonly After: "after";
+};

package/dist/cjs/components/ButtonClaudia/constants.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_POSITION = exports.SIZE = exports.TARGET = exports.HTML_TYPE = exports.APPEARANCE = void 0;
+exports.APPEARANCE = {
+    Tertiary: 'tertiary',
+    Secondary: 'secondary',
+};
+exports.HTML_TYPE = {
+    Button: 'button',
+    Submit: 'submit',
+    Reset: 'reset',
+};
+exports.TARGET = {
+    Blank: '_blank',
+    Self: '_self',
+    Parent: '_parent',
+    Top: '_top',
+};
+exports.SIZE = {
+    Xs: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.ICON_POSITION = {
+    Before: 'before',
+    After: 'after',
+};

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/ButtonPrivate.d.ts

@@ -0,0 +1,14 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { CommonButtonProps } from '../../types';
+export type ButtonPrivateProps = WithSupportProps<CommonButtonProps & {
+    iconClassName: string;
+    labelClassName: string;
+    fullWidth?: boolean;
+}>;
+export declare const ButtonPrivate: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & import("../../types").AnchorButtonProps & import("../../types").BaseButtonProps & {
+    iconClassName: string;
+    labelClassName: string;
+    fullWidth?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/ButtonPrivate.js

@@ -0,0 +1,55 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonPrivate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+exports.ButtonPrivate = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, disabled, href, icon, iconClassName, iconPosition = constants_1.ICON_POSITION.After, label, labelClassName, loading, onClick, onKeyDown, onFocus, onBlur, size, target = constants_1.TARGET.Blank, type = constants_1.HTML_TYPE.Button, appearance = constants_1.APPEARANCE.Tertiary, tabIndex: tabIndexProp = 0, fullWidth } = _a, rest = __rest(_a, ["className", "disabled", "href", "icon", "iconClassName", "iconPosition", "label", "labelClassName", "loading", "onClick", "onKeyDown", "onFocus", "onBlur", "size", "target", "type", "appearance", "tabIndex", "fullWidth"]);
+    const variant = (0, utils_2.getVariant)({ label, iconPosition, icon });
+    const children = (0, utils_2.getChildren)({
+        icon,
+        iconClassName,
+        iconPosition,
+        label,
+        labelClassName,
+        loading,
+    });
+    const tabIndex = loading || disabled ? -1 : tabIndexProp;
+    const handleClick = (event) => {
+        if (disabled || loading) {
+            event.preventDefault();
+            return;
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    const buttonProps = Object.assign(Object.assign({}, (0, utils_1.extractSupportProps)(rest)), { className: (0, classnames_1.default)(styles_module_scss_1.default.button, className), 'data-disabled': disabled || undefined, 'aria-disabled': disabled || undefined, 'data-loading': loading || undefined, 'data-size': size, 'data-full-width': fullWidth || undefined, 'data-appearance': constants_2.APPEARANCE_TO_COLOR_MAP[appearance], 'data-variant': variant, onClick: handleClick, onKeyDown,
+        onFocus,
+        onBlur,
+        tabIndex });
+    if (href) {
+        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'button', href: href, target: target }, buttonProps, { ref: ref, children: children })));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { type: type, ref: ref, children: children })));
+});

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/constants.d.ts

@@ -0,0 +1,10 @@
+export declare enum Variant {
+    LabelOnly = "label-only",
+    IconOnly = "icon-only",
+    IconBefore = "icon-before",
+    IconAfter = "icon-after"
+}
+export declare const APPEARANCE_TO_COLOR_MAP: {
+    tertiary: string;
+    secondary: string;
+};

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APPEARANCE_TO_COLOR_MAP = exports.Variant = void 0;
+const constants_1 = require("../../constants");
+var Variant;
+(function (Variant) {
+    Variant["LabelOnly"] = "label-only";
+    Variant["IconOnly"] = "icon-only";
+    Variant["IconBefore"] = "icon-before";
+    Variant["IconAfter"] = "icon-after";
+})(Variant || (exports.Variant = Variant = {}));
+exports.APPEARANCE_TO_COLOR_MAP = {
+    [constants_1.APPEARANCE.Tertiary]: 'fluorescent-yellow',
+    [constants_1.APPEARANCE.Secondary]: 'graphite',
+};

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/index.d.ts

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

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonPrivate"), exports);

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/styles.module.css

@@ -0,0 +1,36 @@
+.button{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  color:transparent;
+  text-decoration:none;
+  text-transform:none;
+  background-color:transparent;
+  border:0 solid transparent;
+  outline:0;
+  outline-offset:0;
+}
+.button[data-full-width]{
+  flex-grow:1;
+  flex-shrink:1;
+  width:100%;
+}
+.button > *{
+  cursor:pointer;
+}
+.button:disabled, .button[data-disabled], .button[data-loading]{
+  cursor:not-allowed;
+}
+.button:disabled > *, .button[data-disabled] > *, .button[data-loading] > *{
+  cursor:not-allowed;
+}

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/utils.d.ts

@@ -0,0 +1,11 @@
+import { ButtonPrivateProps } from './ButtonPrivate';
+import { Variant } from './constants';
+type GetVariantProps = Pick<ButtonPrivateProps, 'label' | 'icon' | 'iconPosition'>;
+export declare function getVariant({ label, icon, iconPosition }: GetVariantProps): Variant;
+type GetWrappedIconProps = Pick<ButtonPrivateProps, 'icon' | 'iconClassName' | 'loading'>;
+export declare function getWrappedIcon({ icon, iconClassName, loading }: GetWrappedIconProps): import("react/jsx-runtime").JSX.Element | undefined;
+type GetWrappedLabelProps = Pick<ButtonPrivateProps, 'label' | 'labelClassName'>;
+export declare function getWrappedLabel({ label, labelClassName }: GetWrappedLabelProps): import("react/jsx-runtime").JSX.Element | undefined;
+type GetChildrenProps = Pick<ButtonPrivateProps, 'icon' | 'label' | 'iconPosition' | 'iconClassName' | 'labelClassName' | 'loading'>;
+export declare function getChildren({ icon, label, iconPosition, iconClassName, labelClassName, loading }: GetChildrenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/ButtonClaudia/helperComponents/ButtonPrivate/utils.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVariant = getVariant;
+exports.getWrappedIcon = getWrappedIcon;
+exports.getWrappedLabel = getWrappedLabel;
+exports.getChildren = getChildren;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const loaders_1 = require("@snack-uikit/loaders");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+function getVariant({ label, icon, iconPosition }) {
+    if (label && icon && iconPosition === constants_1.ICON_POSITION.After) {
+        return constants_2.Variant.IconAfter;
+    }
+    if (label && icon && iconPosition === constants_1.ICON_POSITION.Before) {
+        return constants_2.Variant.IconBefore;
+    }
+    if (label) {
+        return constants_2.Variant.LabelOnly;
+    }
+    return constants_2.Variant.IconOnly;
+}
+function getWrappedIcon({ icon, iconClassName, loading }) {
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("span", { "data-test-id": 'loading-icon', className: iconClassName, children: (0, jsx_runtime_1.jsx)(loaders_1.Sun, { size: 's' }) }));
+    }
+    if (icon) {
+        return ((0, jsx_runtime_1.jsx)("span", { "data-test-id": 'icon', className: iconClassName, children: icon }));
+    }
+    return undefined;
+}
+function getWrappedLabel({ label, labelClassName }) {
+    return label ? ((0, jsx_runtime_1.jsx)("span", { "data-test-id": 'label', className: labelClassName, children: label })) : undefined;
+}
+function getChildren({ icon, label, iconPosition, iconClassName, labelClassName, loading }) {
+    const wrappedIcon = getWrappedIcon({
+        icon,
+        iconClassName,
+        loading,
+    });
+    const wrappedLabel = getWrappedLabel({
+        label,
+        labelClassName,
+    });
+    switch (iconPosition) {
+        case constants_1.ICON_POSITION.Before: {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrappedIcon, wrappedLabel] }));
+        }
+        case constants_1.ICON_POSITION.After:
+        default: {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrappedLabel, wrappedIcon] }));
+        }
+    }
+}

package/dist/cjs/components/ButtonClaudia/helperComponents/index.d.ts

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

package/dist/cjs/components/ButtonClaudia/helperComponents/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonPrivate"), exports);

package/dist/cjs/components/ButtonClaudia/index.d.ts

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

package/dist/cjs/components/ButtonClaudia/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonClaudia"), exports);

package/dist/cjs/components/ButtonClaudia/styles.module.css

@@ -0,0 +1,232 @@
+.button.specificityX2{
+  background-color:var(--sys-claudia-accent-default, #2a2a36);
+}
+.button.specificityX2[data-size=xs] .label{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.button.specificityX2[data-size=xs] .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.button.specificityX2[data-size=xs] .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.button.specificityX2[data-size=xs][data-variant=label-only]{
+  border-radius:var(--radius-button-xs, 0px);
+  height:var(--size-button-xs, 24px);
+  padding-right:var(--space-button-xs-from-label, 8px);
+  padding-left:var(--space-button-xs-from-label, 8px);
+  min-width:var(--size-button-mininal-width-xs, 0px);
+}
+.button.specificityX2[data-size=xs][data-variant=icon-only]{
+  border-radius:var(--radius-button-xs, 0px);
+  height:var(--size-button-xs, 24px);
+  width:var(--size-button-xs, 24px);
+}
+.button.specificityX2[data-size=xs][data-variant=icon-after]{
+  border-radius:var(--radius-button-xs, 0px);
+  height:var(--size-button-xs, 24px);
+  gap:var(--space-button-xs-gap, 2px);
+  padding-right:var(--space-button-xs-from-icon, 4px);
+  padding-left:var(--space-button-xs-from-label, 8px);
+  min-width:var(--size-button-mininal-width-xs, 0px);
+}
+.button.specificityX2[data-size=s] .label{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.button.specificityX2[data-size=s] .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.button.specificityX2[data-size=s] .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.button.specificityX2[data-size=s][data-variant=label-only]{
+  border-radius:var(--radius-button-s, 0px);
+  height:var(--size-button-s, 32px);
+  padding-right:var(--space-button-s-from-label, 16px);
+  padding-left:var(--space-button-s-from-label, 16px);
+  min-width:var(--size-button-mininal-width-s, 0px);
+}
+.button.specificityX2[data-size=s][data-variant=icon-only]{
+  border-radius:var(--radius-button-s, 0px);
+  height:var(--size-button-s, 32px);
+  width:var(--size-button-s, 32px);
+}
+.button.specificityX2[data-size=s][data-variant=icon-after]{
+  border-radius:var(--radius-button-s, 0px);
+  height:var(--size-button-s, 32px);
+  gap:var(--space-button-s-gap, 4px);
+  padding-right:var(--space-button-s-from-icon, 8px);
+  padding-left:var(--space-button-s-from-label, 16px);
+  min-width:var(--size-button-mininal-width-s, 0px);
+}
+.button.specificityX2[data-size=m] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.button.specificityX2[data-size=m] .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.button.specificityX2[data-size=m] .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.button.specificityX2[data-size=m][data-variant=label-only]{
+  border-radius:var(--radius-button-m, 0px);
+  height:var(--size-button-m, 40px);
+  padding-right:var(--space-button-m-from-label, 24px);
+  padding-left:var(--space-button-m-from-label, 24px);
+  min-width:var(--size-button-mininal-width-m, 0px);
+}
+.button.specificityX2[data-size=m][data-variant=icon-only]{
+  border-radius:var(--radius-button-m, 0px);
+  height:var(--size-button-m, 40px);
+  width:var(--size-button-m, 40px);
+}
+.button.specificityX2[data-size=m][data-variant=icon-after]{
+  border-radius:var(--radius-button-m, 0px);
+  height:var(--size-button-m, 40px);
+  gap:var(--space-button-m-gap, 4px);
+  padding-right:var(--space-button-m-from-icon, 16px);
+  padding-left:var(--space-button-m-from-label, 24px);
+  min-width:var(--size-button-mininal-width-m, 0px);
+}
+.button.specificityX2[data-size=l] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.button.specificityX2[data-size=l] .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.button.specificityX2[data-size=l] .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.button.specificityX2[data-size=l][data-variant=label-only]{
+  border-radius:var(--radius-button-l, 0px);
+  height:var(--size-button-l, 48px);
+  padding-right:var(--space-button-l-from-label, 32px);
+  padding-left:var(--space-button-l-from-label, 32px);
+  min-width:var(--size-button-mininal-width-l, 0px);
+}
+.button.specificityX2[data-size=l][data-variant=icon-only]{
+  border-radius:var(--radius-button-l, 0px);
+  height:var(--size-button-l, 48px);
+  width:var(--size-button-l, 48px);
+}
+.button.specificityX2[data-size=l][data-variant=icon-after]{
+  border-radius:var(--radius-button-l, 0px);
+  height:var(--size-button-l, 48px);
+  gap:var(--space-button-l-gap, 4px);
+  padding-right:var(--space-button-l-from-icon, 24px);
+  padding-left:var(--space-button-l-from-label, 32px);
+  min-width:var(--size-button-mininal-width-l, 0px);
+}
+.button.specificityX2[data-loading][data-variant=label-only] .icon{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+}
+.button.specificityX2[data-loading][data-variant=label-only] .label{
+  opacity:var(--opacity-a0, 0);
+}
+.button.specificityX2 .label{
+  color:var(--sys-claudia-on-accent, #ffffff);
+}
+.button.specificityX2 .icon{
+  color:var(--sys-claudia-on-accent, #ffffff);
+}
+@media (hover: hover){
+  .button.specificityX2:hover{
+    background-color:var(--sys-claudia-accent-hovered, #393a46);
+  }
+  .button.specificityX2:hover .label{
+    color:var(--sys-claudia-on-accent, #ffffff);
+  }
+  .button.specificityX2:hover .icon{
+    color:var(--sys-claudia-on-accent, #ffffff);
+  }
+}
+@media (hover: none) or (hover: hover){
+  .button.specificityX2:focus-visible{
+    background-color:var(--sys-claudia-accent-hovered, #393a46);
+  }
+  .button.specificityX2:focus-visible .label{
+    color:var(--sys-claudia-on-accent, #ffffff);
+  }
+  .button.specificityX2:focus-visible .icon{
+    color:var(--sys-claudia-on-accent, #ffffff);
+  }
+  .button.specificityX2:active{
+    background-color:var(--sys-claudia-accent-pressed, #51525d);
+  }
+  .button.specificityX2:active .label{
+    color:var(--sys-claudia-on-accent, #ffffff);
+  }
+  .button.specificityX2:active .icon{
+    color:var(--sys-claudia-on-accent, #ffffff);
+  }
+  .button.specificityX2[data-loading]{
+    background-color:var(--sys-claudia-accent-pressed, #51525d);
+  }
+  .button.specificityX2[data-loading] .label{
+    color:var(--sys-claudia-on-accent, #ffffff);
+  }
+  .button.specificityX2[data-loading] .icon{
+    color:var(--sys-claudia-on-accent, #ffffff);
+  }
+  .button.specificityX2:disabled, .button.specificityX2[data-disabled]{
+    background-color:var(--sys-claudia-decor-disabled, #e6e8ef);
+  }
+  .button.specificityX2:disabled .label, .button.specificityX2[data-disabled] .label{
+    color:var(--sys-claudia-text-light, #8b8e9b);
+  }
+  .button.specificityX2:disabled .icon, .button.specificityX2[data-disabled] .icon{
+    color:var(--sys-claudia-text-light, #8b8e9b);
+  }
+}
+.button.specificityX2:focus-visible{
+  outline-color:var(--sys-available-complementary, #1c1c24) !important;
+}
+.button.specificityX2:focus-visible:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}