@sima-land/ui-nucleons 45.0.0-alpha.7 → 45.0.0-alpha.71

package/dist/base-input/base-input.module.scss

@@ -0,0 +1,78 @@
+@use '../utils';
+@use '../colors';
+
+.reset {
+  border: 0;
+  box-sizing: border-box;
+  font: inherit;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+}
+
+.root {
+  position: relative;
+  background-color: transparent;
+  width: 0;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+  background: var(--base-input-background);
+}
+
+.field {
+  width: 0;
+  flex-grow: 1;
+  display: block;
+  background: var(--base-input-background, inherit);
+  color: var(--base-input-color, inherit);
+  font-size: inherit;
+  line-height: inherit;
+  z-index: 0;
+  text-overflow: inherit;
+  &::placeholder {
+    color: var(--base-input-placeholder-color);
+    -webkit-text-fill-color: var(--base-input-placeholder-color);
+    opacity: 1;
+  }
+  &:disabled {
+    background: var(--base-input-background);
+    color: var(--base-input-color);
+  }
+  &:disabled::placeholder {
+    color: var(--base-input-placeholder-color);
+    -webkit-text-fill-color: var(--base-input-placeholder-color);
+    opacity: 1;
+  }
+  &::-ms-clear {
+    // отключаем системный крестик в IE
+    display: none;
+    height: 0;
+    width: 0;
+  }
+  &.multiline {
+    resize: none;
+    @include utils.hidden-scrollbars;
+  }
+}
+
+.rest-placeholder {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: hidden;
+  z-index: 1;
+  .shift-part {
+    color: transparent;
+  }
+  .main-part {
+    color: var(--base-input-placeholder-color);
+  }
+}

package/dist/base-input/types.d.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties, InputHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import type { WithTestId } from '../types';
+export interface RestPlaceholderDefinition {
+    /** Текст placeholder'а. */
+    value: string;
+    /** Значение, смещающее placeholder. По умолчанию используется значение в поле ввода. */
+    shiftValue?: string;
+}
+export interface BaseInputStyle extends CSSProperties {
+    '--base-input-background'?: string;
+    '--base-input-color'?: string;
+    '--base-input-placeholder-color'?: string;
+}
+export interface CommonProps extends WithTestId {
+    /** Остаточный placeholder (выводится после введенного значения). */
+    restPlaceholder?: string | RestPlaceholderDefinition;
+    /** Стили корневого элемента. */
+    style?: BaseInputStyle;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Ref элемента input. Будет заполнен только при multiline=false. */
+    inputRef?: Ref<HTMLInputElement | null>;
+    /** Ref элемента textarea. Будет заполнен только при multiline=true. */
+    textareaRef?: Ref<HTMLTextAreaElement | null>;
+}
+export type BaseInputAsInputProps = CommonProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof CommonProps> & {
+    multiline?: false;
+};
+export type BaseInputAsTextareaProps = CommonProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof CommonProps> & {
+    multiline: true;
+};
+export type BaseInputProps = BaseInputAsInputProps | BaseInputAsTextareaProps;

package/dist/base-input/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.omitMultiline = omitMultiline;
+/**
+ * Получив объект, вернет его копию но без свойства multiline.
+ * @param source Объект.
+ * @return Копия без свойства multiline.
+ */
+function omitMultiline(source) {
+    const next = { ...source };
+    delete next.multiline;
+    return next;
+}
+//# sourceMappingURL=utils.js.map

package/dist/base-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/base-input/utils.ts"],"names":[],"mappings":";;AAKA,sCAMC;AAXD;;;;GAIG;AACH,SAAgB,aAAa,CAAgC,MAAS;IACpE,MAAM,IAAI,GAAG,EAAE,GAAG,MAAM,EAAE,CAAC;IAE3B,OAAO,IAAI,CAAC,SAAS,CAAC;IAEtB,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/bottom-bar/bottom-bar.d.ts

@@ -0,0 +1,15 @@
+import { BottomBarProps } from './types';
+export declare const BOTTOM_BAR_HEIGHT: {
+    readonly s: 64;
+    readonly m: 72;
+    readonly l: 80;
+};
+export declare const BOTTOM_BAR_DEFAULTS: {
+    readonly size: "m";
+};
+/**
+ * Боттом-бар - блок для вывода содержимого в нижней части карточек, модальных окон и других сложных элементов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function BottomBar({ size, divided, children, className, rounds, 'data-testid': testId, ...rest }: BottomBarProps): import("react").JSX.Element;

package/dist/bottom-bar/bottom-bar.js

@@ -0,0 +1,64 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BOTTOM_BAR_DEFAULTS = exports.BOTTOM_BAR_HEIGHT = void 0;
+exports.BottomBar = BottomBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../clean-buttons/utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./bottom-bar.module.scss"));
+// некоторым компонентам нужно знать конкретную высоту, делаем единый источник
+exports.BOTTOM_BAR_HEIGHT = {
+    s: 64,
+    m: 72,
+    l: 80,
+};
+// некоторым компонентам нужно знать значения по умолчанию, делаем единый источник
+exports.BOTTOM_BAR_DEFAULTS = {
+    size: 'm',
+};
+/**
+ * Боттом-бар - блок для вывода содержимого в нижней части карточек, модальных окон и других сложных элементов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BottomBar({ size = exports.BOTTOM_BAR_DEFAULTS.size, divided, children, className, rounds = 'm', 'data-testid': testId = 'bottom-bar', ...rest }) {
+    const rootClassName = (0, classnames_1.default)(styles.root, size !== 'unset' && styles[`size-${size}`], divided && styles.divided, rounds !== 'unset' && styles[`rounds-${rounds}`], className);
+    return ((0, jsx_runtime_1.jsx)(utils_1.CleanButtonContext.Provider, { value: { size }, children: (0, jsx_runtime_1.jsx)("div", { ...rest, className: rootClassName, "data-testid": testId, children: children }) }));
+}
+//# sourceMappingURL=bottom-bar.js.map

package/dist/bottom-bar/bottom-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-bar.js","sourceRoot":"","sources":["../../src/bottom-bar/bottom-bar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,8BAyBC;;AA/CD,kDAA4D;AAE5D,4DAA4B;AAC5B,iEAAmD;AAEnD,8EAA8E;AACjE,QAAA,iBAAiB,GAAG;IAC/B,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;CAC2C,CAAC;AAEnD,kFAAkF;AACrE,QAAA,mBAAmB,GAAG;IACjC,IAAI,EAAE,GAAG;CACD,CAAC;AAEX;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EACxB,IAAI,GAAG,2BAAmB,CAAC,IAAI,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,GAAG,EACZ,aAAa,EAAE,MAAM,GAAG,YAAY,EACpC,GAAG,IAAI,EACQ;IACf,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,MAAM,CAAC,IAAI,EACX,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAC1C,OAAO,IAAI,MAAM,CAAC,OAAO,EACzB,MAAM,KAAK,OAAO,IAAI,MAAM,CAAC,UAAU,MAAM,EAAE,CAAC,EAChD,SAAS,CACV,CAAC;IAEF,OAAO,CAEL,uBAAC,0BAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAC1C,mCAAS,IAAI,EAAE,SAAS,EAAE,aAAa,iBAAe,MAAM,YACzD,QAAQ,GACL,GACsB,CAC/B,CAAC;AACJ,CAAC"}

package/dist/bottom-bar/bottom-bar.module.scss

@@ -0,0 +1,46 @@
+@use './bottom-bar-util';
+@use '../colors';
+
+.root {
+  display: flex;
+  align-items: center;
+  position: relative;
+  background: colors.$basic-white;
+  overflow: hidden;
+  height: var(--bottom-bar-height);
+  flex-shrink: 0; // ВАЖНО: для использования в Modal
+
+  // чтобы разделитель был над контентом делаем через pseudo-элемент
+  &.divided::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    box-shadow: inset 0 1px 0 colors.$basic-gray12;
+  }
+}
+
+.size-s {
+  @include bottom-bar-util.size-s;
+}
+
+.size-m {
+  @include bottom-bar-util.size-m;
+}
+
+.size-l {
+  @include bottom-bar-util.size-l;
+}
+
+.rounds-s {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.rounds-m {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}

package/dist/bottom-bar/index.d.ts

@@ -0,0 +1,2 @@
+export type { BottomBarSize, BottomBarStyle, BottomBarProps } from './types';
+export { BottomBar, BOTTOM_BAR_DEFAULTS, BOTTOM_BAR_HEIGHT } from './bottom-bar';

package/dist/bottom-bar/types.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, HTMLAttributes } from 'react';
+import type { WithTestId } from '../types';
+export type BottomBarSize = 's' | 'm' | 'l';
+export interface BottomBarStyle extends CSSProperties {
+    '--bottom-bar-height'?: string;
+}
+export interface BottomBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'>, WithTestId {
+    /** Размер (высота). */
+    size?: BottomBarSize | 'unset';
+    /** Нужна ли разделительная черта сверху. */
+    divided?: boolean;
+    /** Скругления углов. */
+    rounds?: 's' | 'm' | 'unset';
+    /** Стили. */
+    style?: BottomBarStyle;
+}

package/dist/breakpoints.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+
+/* stylelint-disable length-zero-no-unit */
+$map: (
+  // ВАЖНО: тут именно 0px а не 0 - в Safari нельзя использовать @media (min-width: 0)
+  mxs: 0px,
+
+  ms: 480px,
+  mm: 720px,
+  ml: 840px,
+  xs: 1024px,
+  s: 1280px,
+  m: 1440px,
+  l: 1600px,
+  xl: 1920px
+) !default;
+/* stylelint-enable length-zero-no-unit */
+
+/**
+ * ВАЖНО: здесь должны быть только утилиты позволяющие применить стили ">=" либо "<" начала диапазона (breakpoint range).
+ * Не должно возникать ситуаций в которых нужно применить стили "<=" или ">" начала диапазона.
+ */
+
+@mixin greaterThanOrEqual($breakpoint) {
+  @if map.has-key($map, $breakpoint) {
+    @media (min-width: map.get($map, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map.keys($map)}.';
+  }
+}
+
+@mixin lessThan($breakpoint) {
+  @if map.has-key($map, $breakpoint) {
+    @media (max-width: (map.get($map, $breakpoint) - 1px)) {
+      @content;
+    }
+  } @else {
+    @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map.keys($map)}.';
+  }
+}
+
+@mixin gte($args...) {
+  @include greaterThanOrEqual($args...) {
+    @content;
+  }
+}
+
+@mixin lt($args...) {
+  @include lessThan($args...) {
+    @content;
+  }
+}

package/dist/button/button-util.scss

@@ -0,0 +1,55 @@
+@use '../colors';
+
+@mixin size-xs {
+  --button-min-size: 32px;
+  --button-font-size: 14px;
+  --button-line-height: 20px;
+  --button-gutter: 12px;
+}
+
+@mixin size-s {
+  --button-min-size: 40px;
+  --button-font-size: 16px;
+  --button-line-height: 24px;
+  --button-gutter: 20px;
+}
+
+@mixin size-m {
+  --button-min-size: 48px;
+  --button-font-size: 16px;
+  --button-line-height: 24px;
+  --button-gutter: 24px;
+}
+
+@mixin color-primary {
+  --button-color: #{colors.$basic-white};
+  --button-background: #{colors.$basic-blue};
+  --button-hover-background: #{colors.$additional-unlit-blue};
+  --button-disabled-color: #{colors.$basic-gray24};
+  --button-disabled-background: #{colors.$basic-gray8};
+}
+
+@mixin color-secondary {
+  --button-color: #{colors.$basic-gray87};
+  --button-background: #{colors.$basic-gray8};
+  --button-hover-background: #{colors.$basic-gray12};
+  --button-disabled-color: #{colors.$basic-gray24};
+  --button-disabled-background: #{colors.$basic-gray8};
+}
+
+@mixin color-success {
+  --button-color: #{colors.$basic-white};
+  --button-background: #{colors.$additional-teal};
+  --button-hover-background: #{colors.$additional-dark-teal};
+  --button-disabled-color: #{colors.$basic-gray24};
+  --button-disabled-background: #{colors.$basic-gray8};
+}
+
+@mixin color-info {
+  --button-color: #{colors.$additional-deep-blue};
+  --button-background: #{colors.$additional-sky};
+  --button-hover-color: #{colors.$additional-light-blue};
+  --button-hover-background: #{colors.$additional-sky};
+  --button-disabled-color: #{colors.$basic-gray24};
+  --button-disabled-background: #{colors.$basic-gray8};
+}

package/dist/button/button.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonProps } from './types';
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<any>>;

package/dist/button/button.js

@@ -0,0 +1,88 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const spinner_1 = require("../spinner");
+const classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./button.module.scss"));
+/**
+ * Кнопка - запускает действие.
+ * @param props Свойства.
+ * @param ref Реф для DOM-элемента кнопки.
+ * @return Элемент.
+ */
+function PureButton({ viewType = 'primary', theme = 'light', icon: Icon, iconPosition = 'start', size = 'm', loading, disabled, className, children, 'data-testid': testId = 'button', ...restProps }, ref) {
+    const hasIcon = Boolean(Icon);
+    const hasText = Boolean(children);
+    const rootClassName = (0, classnames_1.default)(styles.root, styles[`size-${size}`], viewType !== 'unset' && styles[`view-${viewType}`], theme !== 'unset' && styles[`theme-${theme}`], loading && styles.loading, disabled && styles.disabled, hasIcon && !hasText && styles['icon-only'], hasText && hasIcon && iconPosition === 'start' && styles['icon-start'], hasText && hasIcon && iconPosition === 'end' && styles['icon-end'], className);
+    const spinnerColor = (0, react_1.useMemo)(() => {
+        if (disabled) {
+            return 'basic-gray38';
+        }
+        switch (viewType) {
+            case 'primary': {
+                return 'basic-white';
+            }
+            case 'secondary': {
+                return 'basic-gray38';
+            }
+            case 'success': {
+                return 'basic-white';
+            }
+            case 'info': {
+                return 'additional-deep-blue';
+            }
+        }
+    }, [disabled, viewType]);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Icon && iconPosition === 'start' && (0, jsx_runtime_1.jsx)(Icon, { className: styles.icon }), children, Icon && iconPosition === 'end' && (0, jsx_runtime_1.jsx)(Icon, { className: styles.icon }), loading && (0, jsx_runtime_1.jsx)(spinner_1.SpinnerSVG, { size: 's', color: spinnerColor, className: styles.spinner })] }));
+    let result = null;
+    if (restProps.appearance === 'container') {
+        result = ((0, jsx_runtime_1.jsx)("div", { ...restProps, ref: ref, className: rootClassName, role: 'button', "data-testid": testId, children: content }));
+    }
+    else if (restProps.appearance === 'link') {
+        result = ((0, jsx_runtime_1.jsx)("a", { ...restProps, ref: ref, className: rootClassName, "data-testid": testId, children: content }));
+    }
+    else {
+        result = ((0, jsx_runtime_1.jsx)("button", { ...restProps, ref: ref, className: rootClassName, disabled: disabled, "data-testid": testId, children: content }));
+    }
+    return result;
+}
+exports.Button = (0, react_1.forwardRef)(PureButton);
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"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"}

package/dist/button/button.module.scss

@@ -0,0 +1,138 @@
+@use '../colors';
+@use './button-util';
+
+.root {
+  position: relative;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  border-radius: 4px;
+  font-family: inherit;
+  font-weight: 600;
+  box-sizing: border-box;
+  padding: 0;
+  padding-left: var(--button-left-gutter, var(--button-gutter));
+  padding-right: var(--button-right-gutter, var(--button-gutter));
+  border: 0;
+  outline: 0;
+  text-decoration: none;
+  overflow: hidden;
+  font-size: var(--button-font-size);
+  background: var(--button-background);
+  color: var(--button-color);
+  min-width: var(--button-min-size);
+  height: var(--button-min-size);
+  --button-icon-gutter: 12px;
+  transition:
+    background 0.2s ease-in-out,
+    transform 0.1s ease-in-out;
+  &::-moz-focus-inner {
+    border: 0;
+  }
+  // @todo disabled для ссылок?
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    color: var(--button-disabled-color, var(--button-color));
+    background: var(--button-disabled-background, var(--button-background));
+  }
+  &.loading {
+    color: transparent;
+    > :not(.spinner) {
+      opacity: 0;
+      pointer-events: 0;
+    }
+  }
+  &:not(:disabled):hover {
+    cursor: pointer;
+    background: var(--button-hover-background, var(--button-background));
+  }
+  &:not(:disabled):not(.loading):hover {
+    color: var(--button-hover-color, var(--button-color));
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+}
+
+// sizes
+.size-xs {
+  @include button-util.size-xs;
+}
+
+.size-s {
+  @include button-util.size-s;
+}
+
+.size-m {
+  @include button-util.size-m;
+}
+
+// content
+.icon-only {
+  --button-left-gutter: 0;
+  --button-right-gutter: 0;
+  --button-icon-gutter: 0;
+}
+
+.icon-start {
+  --button-left-gutter: 0;
+}
+
+.icon-end {
+  --button-right-gutter: 0;
+}
+
+// view variants
+.view-primary {
+  @include button-util.color-primary;
+  &.theme-dark {
+    --button-hover-background: #{colors.$additional-deep-blue};
+    --button-disabled-background: #{colors.$basic-gray76};
+    --button-disabled-color: #{colors.$basic-gray54};
+  }
+}
+
+.view-secondary {
+  @include button-util.color-secondary;
+  &.theme-dark {
+    --button-color: #{colors.$basic-white};
+    --button-background: #{colors.$basic-gray76};
+    --button-hover-background: #{colors.$basic-gray66};
+    --button-disabled-background: #{colors.$basic-gray76};
+    --button-disabled-color: #{colors.$basic-gray54};
+  }
+}
+
+.view-success {
+  @include button-util.color-success;
+  &.theme-dark {
+    --button-disabled-background: #{colors.$basic-gray76};
+    --button-disabled-color: #{colors.$basic-gray54};
+  }
+}
+
+.view-info {
+  @include button-util.color-info;
+  &.theme-dark {
+    --button-disabled-background: #{colors.$basic-gray76};
+    --button-disabled-color: #{colors.$basic-gray54};
+  }
+}
+
+// icons
+.icon {
+  margin: 0 var(--button-icon-gutter);
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+// spinner
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonSize, ButtonViewType, ButtonAppearance, ButtonStyle, ButtonProps, ButtonIconPosition, } from './types';
+export { Button } from './button';

package/dist/button/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+//# sourceMappingURL=index.js.map

package/dist/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/button/index.ts"],"names":[],"mappings":";;;AAQA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}