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

package/dist/cjs/components/ButtonGiga/ButtonGigaMama/styles.module.css

@@ -0,0 +1,131 @@
+.button.specificity{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  gap:4px;
+  width:304px;
+  max-height:72px;
+  padding:24px 0px;
+  border-radius:12px;
+  background-color:color-mix(in srgb, transparent, var(--sys-primary-decor-default, #dee0ef) 30%);
+  border:none;
+}
+.button.specificity[data-full-width]{
+  width:100%;
+}
+.button.specificity .label{
+  color:var(--sys-primary-text-support, #5b5d69);
+}
+.button.specificity .label{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+}
+.button.specificity .icon{
+  color:var(--sys-primary-text-support, #5b5d69);
+  height:24px;
+}
+.button.specificity::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  padding:1px;
+  border-radius:inherit;
+  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
+  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite:xor;
+  mask-composite:exclude;
+  pointer-events:none;
+}
+.button.specificity:disabled, .button.specificity[data-disabled]{
+  background-color:transparent;
+}
+.button.specificity:disabled .label, .button.specificity[data-disabled] .label{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.button.specificity:disabled .icon, .button.specificity[data-disabled] .icon{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.button.specificity:disabled::before, .button.specificity[data-disabled]::before{
+  background:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.button.specificity:disabled .icon svg path, .button.specificity[data-disabled] .icon svg path{
+  fill:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.button.specificity:hover:not(:disabled):not([data-disabled]){
+  box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.1490196078) inset;
+}
+.button.specificity:hover:not(:disabled):not([data-disabled]) .label{
+  color:var(--sys-primary-text-support, #5b5d69);
+}
+.button.specificity:hover:not(:disabled):not([data-disabled]) .icon{
+  color:var(--sys-primary-text-support, #5b5d69);
+}
+.button.specificity:hover:not(:disabled):not([data-disabled])::before{
+  filter:brightness(0.9);
+}
+.button.specificity:hover:not(:disabled):not([data-disabled]) .icon{
+  filter:brightness(0.9);
+}
+.button.specificity:hover:not(:disabled):not([data-disabled]) .label{
+  filter:brightness(0.9);
+}
+.button.specificity:active:not(:disabled):not([data-disabled]){
+  box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.3019607843) inset;
+}
+.button.specificity:active:not(:disabled):not([data-disabled]) .label{
+  color:var(--sys-primary-text-support, #5b5d69);
+}
+.button.specificity:active:not(:disabled):not([data-disabled]) .icon{
+  color:var(--sys-primary-text-support, #5b5d69);
+}
+.button.specificity:active:not(:disabled):not([data-disabled])::before{
+  filter:brightness(0.7);
+}
+.button.specificity:active:not(:disabled):not([data-disabled]) .label{
+  filter:brightness(0.7);
+}
+.button.specificity:active:not(:disabled):not([data-disabled]) .icon{
+  filter:brightness(0.7);
+}
+.button.specificity:focus-visible:not(:disabled):not([data-disabled]){
+  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);
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+.button.specificity:focus-visible:not(:disabled):not([data-disabled]) .label{
+  color:var(--sys-primary-text-support, #5b5d69);
+}
+.button.specificity:focus-visible:not(:disabled):not([data-disabled]) .icon{
+  color:var(--sys-primary-text-support, #5b5d69);
+}
+.button.specificity:focus-visible:not(:disabled):not([data-disabled]) .label{
+  filter:brightness(0.9);
+}
+.button.specificity:focus-visible:not(:disabled):not([data-disabled]) .icon{
+  filter:brightness(0.9);
+}
+.button.specificity[data-loading]:not(:disabled):not([data-disabled]){
+  box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.3019607843) inset;
+}
+.button.specificity[data-loading]:not(:disabled):not([data-disabled]) .label{
+  color:var(--sys-primary-text-support, #5b5d69);
+}
+.button.specificity[data-loading]:not(:disabled):not([data-disabled]) .icon{
+  color:var(--sys-primary-accent-pressed, #5b5d69);
+}
+.button.specificity[data-loading]:not(:disabled):not([data-disabled])::before{
+  filter:brightness(0.7);
+}
+.button.specificity[data-loading]:not(:disabled):not([data-disabled]) .label{
+  filter:brightness(0.7);
+}
+.button.specificity[data-loading]:not(:disabled):not([data-disabled]) .icon{
+  filter:brightness(0.7);
+}

package/dist/cjs/components/ButtonGiga/ButtonGigaMama/utils.d.ts

@@ -0,0 +1,12 @@
+import { CommonButtonProps } from '../helperComponents/ButtonPrivate/types';
+export declare function extractCommonButtonProps({ disabled, href, icon, label, loading, onClick, onFocus, onBlur, onKeyDown, }: Omit<CommonButtonProps, 'iconPosition'>): {
+    disabled: boolean | undefined;
+    href: string | undefined;
+    icon: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label: string | undefined;
+    loading: boolean | undefined;
+    onClick: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onKeyDown: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onFocus: import("react").FocusEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
+    onBlur: import("react").FocusEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
+};

package/dist/cjs/components/ButtonGiga/ButtonGigaMama/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractCommonButtonProps = extractCommonButtonProps;
+function extractCommonButtonProps({ disabled, href, icon, label, loading, onClick, onFocus, onBlur, onKeyDown, }) {
+    return { disabled, href, icon, label, loading, onClick, onKeyDown, onFocus, onBlur };
+}

package/dist/cjs/components/ButtonGiga/ButtonGigaOutline/ButtonGigaOutline.d.ts

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

package/dist/cjs/components/ButtonGiga/ButtonGigaOutline/ButtonGigaOutline.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.ButtonGigaOutline = 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.ButtonGigaOutline = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = constants_1.SIZE.S, target = constants_1.TARGET.Blank, type = constants_1.HTML_TYPE.Button, iconPosition = constants_1.ICON_POSITION.Before, tabIndex, fullWidth = false } = _a, rest = __rest(_a, ["className", "size", "target", "type", "iconPosition", "tabIndex", "fullWidth"]);
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.ButtonPrivate, Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), (0, utils_1.extractCommonButtonProps)(Object.assign(Object.assign({}, rest), { iconPosition })), { 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, iconPosition: iconPosition, size: size, fullWidth: fullWidth, target: target, type: type, tabIndex: tabIndex, ref: ref })));
+});

package/dist/cjs/components/ButtonGiga/ButtonGigaOutline/index.d.ts

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

package/dist/cjs/components/ButtonGiga/ButtonGigaOutline/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("./ButtonGigaOutline"), exports);

package/dist/cjs/components/ButtonGiga/ButtonGigaOutline/styles.module.css

@@ -0,0 +1,417 @@
+.button.specificityX2{
+  display:inline-flex;
+}
+.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, 4px);
+  height:var(--size-button-xs, 24px);
+  padding-right:var(--space-button-xs-from-label, 8px);
+  padding-left:var(--space-button-xs-from-label, 8px);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-xs, 72px);
+}
+.button.specificityX2[data-size=xs][data-variant=icon-only]{
+  border-radius:var(--radius-button-xs, 4px);
+  height:var(--size-button-xs, 24px);
+  width:var(--size-button-xs, 24px);
+  border-width:var(--border-width-button-outline-single, 1px);
+}
+.button.specificityX2[data-size=xs][data-variant=icon-after]{
+  border-radius:var(--radius-button-xs, 4px);
+  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);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-xs, 72px);
+}
+.button.specificityX2[data-size=xs][data-variant=icon-before]{
+  border-radius:var(--radius-button-xs, 4px);
+  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);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-xs, 72px);
+  padding-left:var(--space-button-xs-from-icon, 4px);
+  padding-right:var(--space-button-xs-from-label, 8px);
+}
+.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, 4px);
+  height:var(--size-button-s, 32px);
+  padding-right:var(--space-button-s-from-label, 16px);
+  padding-left:var(--space-button-s-from-label, 16px);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-s, 96px);
+}
+.button.specificityX2[data-size=s][data-variant=icon-only]{
+  border-radius:var(--radius-button-s, 4px);
+  height:var(--size-button-s, 32px);
+  width:var(--size-button-s, 32px);
+  border-width:var(--border-width-button-outline-single, 1px);
+}
+.button.specificityX2[data-size=s][data-variant=icon-after]{
+  border-radius:var(--radius-button-s, 4px);
+  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);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-s, 96px);
+}
+.button.specificityX2[data-size=s][data-variant=icon-before]{
+  border-radius:var(--radius-button-s, 4px);
+  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);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-s, 96px);
+  padding-left:var(--space-button-s-from-icon, 8px);
+  padding-right:var(--space-button-s-from-label, 16px);
+}
+.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, 4px);
+  height:var(--size-button-m, 40px);
+  padding-right:var(--space-button-m-from-label, 16px);
+  padding-left:var(--space-button-m-from-label, 16px);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-m, 120px);
+}
+.button.specificityX2[data-size=m][data-variant=icon-only]{
+  border-radius:var(--radius-button-m, 4px);
+  height:var(--size-button-m, 40px);
+  width:var(--size-button-m, 40px);
+  border-width:var(--border-width-button-outline-single, 1px);
+}
+.button.specificityX2[data-size=m][data-variant=icon-after]{
+  border-radius:var(--radius-button-m, 4px);
+  height:var(--size-button-m, 40px);
+  gap:var(--space-button-m-gap, 4px);
+  padding-right:var(--space-button-m-from-icon, 8px);
+  padding-left:var(--space-button-m-from-label, 16px);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-m, 120px);
+}
+.button.specificityX2[data-size=m][data-variant=icon-before]{
+  border-radius:var(--radius-button-m, 4px);
+  height:var(--size-button-m, 40px);
+  gap:var(--space-button-m-gap, 4px);
+  padding-right:var(--space-button-m-from-icon, 8px);
+  padding-left:var(--space-button-m-from-label, 16px);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-m, 120px);
+  padding-left:var(--space-button-m-from-icon, 8px);
+  padding-right:var(--space-button-m-from-label, 16px);
+}
+.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, 4px);
+  height:var(--size-button-l, 48px);
+  padding-right:var(--space-button-l-from-label, 24px);
+  padding-left:var(--space-button-l-from-label, 24px);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-l, 144px);
+}
+.button.specificityX2[data-size=l][data-variant=icon-only]{
+  border-radius:var(--radius-button-l, 4px);
+  height:var(--size-button-l, 48px);
+  width:var(--size-button-l, 48px);
+  border-width:var(--border-width-button-outline-single, 1px);
+}
+.button.specificityX2[data-size=l][data-variant=icon-after]{
+  border-radius:var(--radius-button-l, 4px);
+  height:var(--size-button-l, 48px);
+  gap:var(--space-button-l-gap, 4px);
+  padding-right:var(--space-button-l-from-icon, 16px);
+  padding-left:var(--space-button-l-from-label, 24px);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-l, 144px);
+}
+.button.specificityX2[data-size=l][data-variant=icon-before]{
+  border-radius:var(--radius-button-l, 4px);
+  height:var(--size-button-l, 48px);
+  gap:var(--space-button-l-gap, 4px);
+  padding-right:var(--space-button-l-from-icon, 16px);
+  padding-left:var(--space-button-l-from-label, 24px);
+  border-width:var(--border-width-button-outline-single, 1px);
+  min-width:var(--size-button-mininal-width-l, 144px);
+  padding-left:var(--space-button-l-from-icon, 16px);
+  padding-right:var(--space-button-l-from-label, 24px);
+}
+.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[data-appearance=primary]{
+  background-color:transparent;
+  border:none;
+}
+.button.specificityX2[data-appearance=primary] .label{
+  color:var(--sys-primary-accent-default, #393a45);
+}
+.button.specificityX2[data-appearance=primary] .icon{
+  color:var(--sys-primary-accent-default, #393a45);
+}
+.button.specificityX2[data-appearance=primary]::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  padding:1px;
+  border-radius:inherit;
+  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
+  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite:xor;
+  mask-composite:exclude;
+  pointer-events:none;
+}
+@media (hover: hover){
+  .button.specificityX2[data-appearance=primary]:hover{
+    box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.1490196078) inset;
+  }
+  .button.specificityX2[data-appearance=primary]:hover .label{
+    color:var(--sys-primary-accent-hovered, #31323d);
+  }
+  .button.specificityX2[data-appearance=primary]:hover .icon{
+    color:var(--sys-primary-accent-hovered, #31323d);
+  }
+  .button.specificityX2[data-appearance=primary]:hover::before{
+    filter:brightness(0.9);
+  }
+  .button.specificityX2[data-appearance=primary]:hover .icon{
+    filter:brightness(0.9);
+  }
+}
+@media (hover: none) or (hover: hover){
+  .button.specificityX2[data-appearance=primary]:focus-visible .label{
+    color:var(--sys-primary-accent-hovered, #31323d);
+  }
+  .button.specificityX2[data-appearance=primary]:focus-visible .icon{
+    color:var(--sys-primary-accent-hovered, #31323d);
+  }
+  .button.specificityX2[data-appearance=primary]:active{
+    box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.3019607843) inset;
+  }
+  .button.specificityX2[data-appearance=primary]:active .label{
+    color:var(--sys-primary-accent-pressed, #5b5d69);
+  }
+  .button.specificityX2[data-appearance=primary]:active .icon{
+    color:var(--sys-primary-accent-pressed, #5b5d69);
+  }
+  .button.specificityX2[data-appearance=primary]:active::before{
+    filter:brightness(0.7);
+  }
+  .button.specificityX2[data-appearance=primary]:active .icon{
+    filter:brightness(0.7);
+  }
+  .button.specificityX2[data-appearance=primary][data-loading]{
+    box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.3019607843) inset;
+  }
+  .button.specificityX2[data-appearance=primary][data-loading] .label{
+    color:var(--sys-primary-accent-pressed, #5b5d69);
+  }
+  .button.specificityX2[data-appearance=primary][data-loading] .icon{
+    color:var(--sys-primary-accent-pressed, #5b5d69);
+  }
+  .button.specificityX2[data-appearance=primary][data-loading]::before{
+    filter:brightness(0.7);
+  }
+  .button.specificityX2[data-appearance=primary][data-loading] .icon{
+    filter:brightness(0.7);
+  }
+  .button.specificityX2[data-appearance=primary]:disabled, .button.specificityX2[data-appearance=primary][data-disabled]{
+    background-color:transparent;
+  }
+  .button.specificityX2[data-appearance=primary]:disabled .label, .button.specificityX2[data-appearance=primary][data-disabled] .label{
+    color:var(--sys-neutral-text-disabled, #aaaebd);
+  }
+  .button.specificityX2[data-appearance=primary]:disabled .icon, .button.specificityX2[data-appearance=primary][data-disabled] .icon{
+    color:var(--sys-neutral-text-disabled, #aaaebd);
+  }
+  .button.specificityX2[data-appearance=primary]:disabled::before, .button.specificityX2[data-appearance=primary][data-disabled]::before{
+    background:var(--sys-neutral-text-disabled, #aaaebd);
+  }
+  .button.specificityX2[data-appearance=primary]:disabled .icon svg path, .button.specificityX2[data-appearance=primary][data-disabled] .icon svg path{
+    fill:currentColor;
+  }
+}
+.button.specificityX2[data-appearance=neutral]{
+  background-color:transparent;
+  border:none;
+}
+.button.specificityX2[data-appearance=neutral] .label{
+  color:var(--sys-neutral-accent-default, #787b8a);
+}
+.button.specificityX2[data-appearance=neutral] .icon{
+  color:var(--sys-neutral-accent-default, #787b8a);
+}
+.button.specificityX2[data-appearance=neutral]::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  padding:1px;
+  border-radius:inherit;
+  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
+  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite:xor;
+  mask-composite:exclude;
+  pointer-events:none;
+}
+@media (hover: hover){
+  .button.specificityX2[data-appearance=neutral]:hover{
+    box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.1490196078) inset;
+  }
+  .button.specificityX2[data-appearance=neutral]:hover .label{
+    color:var(--sys-neutral-accent-hovered, #6d707f);
+  }
+  .button.specificityX2[data-appearance=neutral]:hover .icon{
+    color:var(--sys-neutral-accent-hovered, #6d707f);
+  }
+  .button.specificityX2[data-appearance=neutral]:hover::before{
+    filter:brightness(0.9);
+  }
+  .button.specificityX2[data-appearance=neutral]:hover .icon{
+    filter:brightness(0.9);
+  }
+}
+@media (hover: none) or (hover: hover){
+  .button.specificityX2[data-appearance=neutral]:focus-visible .label{
+    color:var(--sys-neutral-accent-hovered, #6d707f);
+  }
+  .button.specificityX2[data-appearance=neutral]:focus-visible .icon{
+    color:var(--sys-neutral-accent-hovered, #6d707f);
+  }
+  .button.specificityX2[data-appearance=neutral]:active{
+    box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.3019607843) inset;
+  }
+  .button.specificityX2[data-appearance=neutral]:active .label{
+    color:var(--sys-neutral-accent-pressed, #656774);
+  }
+  .button.specificityX2[data-appearance=neutral]:active .icon{
+    color:var(--sys-neutral-accent-pressed, #656774);
+  }
+  .button.specificityX2[data-appearance=neutral]:active::before{
+    filter:brightness(0.7);
+  }
+  .button.specificityX2[data-appearance=neutral]:active .icon{
+    filter:brightness(0.7);
+  }
+  .button.specificityX2[data-appearance=neutral][data-loading]{
+    box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.3019607843) inset;
+  }
+  .button.specificityX2[data-appearance=neutral][data-loading] .label{
+    color:var(--sys-neutral-accent-pressed, #656774);
+  }
+  .button.specificityX2[data-appearance=neutral][data-loading] .icon{
+    color:var(--sys-neutral-accent-pressed, #656774);
+  }
+  .button.specificityX2[data-appearance=neutral][data-loading]::before{
+    filter:brightness(0.7);
+  }
+  .button.specificityX2[data-appearance=neutral][data-loading] .icon{
+    filter:brightness(0.7);
+  }
+  .button.specificityX2[data-appearance=neutral]:disabled, .button.specificityX2[data-appearance=neutral][data-disabled]{
+    background-color:transparent;
+  }
+  .button.specificityX2[data-appearance=neutral]:disabled .label, .button.specificityX2[data-appearance=neutral][data-disabled] .label{
+    color:var(--sys-neutral-text-disabled, #aaaebd);
+  }
+  .button.specificityX2[data-appearance=neutral]:disabled .icon, .button.specificityX2[data-appearance=neutral][data-disabled] .icon{
+    color:var(--sys-neutral-text-disabled, #aaaebd);
+  }
+  .button.specificityX2[data-appearance=neutral]:disabled::before, .button.specificityX2[data-appearance=neutral][data-disabled]::before{
+    background:var(--sys-neutral-text-disabled, #aaaebd);
+  }
+  .button.specificityX2[data-appearance=neutral]:disabled .icon svg path, .button.specificityX2[data-appearance=neutral][data-disabled] .icon svg path{
+    fill:currentColor;
+  }
+}
+.button.specificityX2: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);
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}

package/dist/cjs/components/ButtonGiga/ButtonGigaOutline/types.d.ts

@@ -0,0 +1,48 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactElement } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, ICON_POSITION, SIZE } from '../constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type IconPosition = ValueOf<typeof ICON_POSITION>;
+export type Size = ValueOf<typeof SIZE>;
+export type BaseButtonProps = {
+    /** CSS-класс */
+    className?: string;
+    /** Флаг неактивности компонента */
+    disabled?: boolean;
+    /**
+     * Иконка
+     * @type ReactElement
+     */
+    icon?: ReactElement;
+    /** Позиция иконки */
+    iconPosition?: IconPosition;
+    /** Текст кнопки */
+    label?: string;
+    /** Флаг состояния загрузки */
+    loading?: boolean;
+    /** Колбек обработки клика */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** Колбек обработки нажатия клавиши */
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    /** Колбек обработки фокуса */
+    onFocus?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    /** Колбек обработки блюра */
+    onBlur?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    /** Размер */
+    size?: Size;
+    /** Внешний вид кнопки */
+    appearance?: Appearance;
+    /** HTML-аттрибут type */
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    /** HTML-аттрибут tab-index */
+    tabIndex?: number;
+    /** Сделать кнопку во всю ширину */
+    fullWidth?: boolean;
+};
+export type AnchorButtonProps = {
+    /** Ссылка */
+    href?: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};
+export type CommonButtonProps = AnchorButtonProps & BaseButtonProps;

package/dist/cjs/components/ButtonGiga/ButtonGigaOutline/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });