@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.50

package/dist/spinner/spinner.m.scss

@@ -0,0 +1,87 @@
+@use 'sass:map';
+
+$pi: 3.141592653589793;
+$sizes: (
+  s: 20,
+  m: 48,
+  l: 80,
+  // legacy, @todo удалить со временем:
+  small: 20,
+  medium: 48,
+  large: 80,
+);
+$durations: (
+  s: 600ms,
+  m: 750ms,
+  l: 950ms,
+  // legacy, @todo удалить со временем:
+  small: 600ms,
+  medium: 750ms,
+  large: 950ms,
+);
+
+.spinner {
+  display: block;
+  .circle {
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+  }
+  @each $sizeKey, $size in $sizes {
+    $diameter: $size - 2;
+    $perimeter: $diameter * $pi;
+    &.size-#{$sizeKey} {
+      width: #{$diameter}px;
+      height: #{$diameter}px;
+      .circle {
+        animation: dash-#{$sizeKey} map.get($durations, $sizeKey) linear infinite;
+      }
+      @keyframes dash-#{$sizeKey} {
+        0% {
+          stroke-dasharray:
+            $perimeter * 0.125,
+            $perimeter * 0.875;
+          stroke-dashoffset: $perimeter * 0.25;
+        }
+        50% {
+          stroke-dasharray:
+            $perimeter * 0.5,
+            $perimeter * 0.5;
+        }
+        100% {
+          stroke-dasharray:
+            $perimeter * 0.125,
+            $perimeter * 0.875;
+          stroke-dashoffset: -$perimeter + ($perimeter * 0.25);
+        }
+      }
+    }
+  }
+}
+
+// fallback (в IE не поддерживается CSS-анимация SVG)
+@media all and (-ms-high-contrast: none) {
+  @each $sizeKey, $size in $sizes {
+    $diameter: $size - 2;
+    $perimeter: $diameter * $pi;
+
+    // IE11 only
+    *::-ms-backdrop,
+    .spinner {
+      animation: rotate 2s linear infinite;
+    }
+    *::-ms-backdrop,
+    .spinner.size-#{$sizeKey} .circle {
+      stroke-dasharray:
+        $perimeter * 0.75,
+        $perimeter * 0.25;
+      stroke-dashoffset: $perimeter * 0.25;
+    }
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/spinner/types.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+import type { Token } from '../colors';
+export type SpinnerSize = 's' | 'm' | 'l';
+export interface SpinnerProps {
+    /** Размер. */
+    size?: SpinnerSize;
+    /** Цвет. */
+    color?: Token;
+    /** Класс. */
+    className?: string;
+    /** Стили. */
+    style?: CSSProperties;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string | null;
+}

package/dist/spinner/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/spinner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/spinner/types.ts"],"names":[],"mappings":""}

package/dist/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export type { StepperSize, StepperStyle, StepperProps } from './types';
+export { Stepper } from './stepper';

package/dist/stepper/index.js

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

package/dist/stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/stepper/index.ts"],"names":[],"mappings":";;;AACA,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

package/dist/stepper/stepper.d.ts

@@ -0,0 +1,7 @@
+import type { StepperProps } from './types';
+/**
+ * Степпер - поле ввода количества.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/stepper/stepper.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stepper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Plus_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Plus"));
+const Minus_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Minus"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const stepper_m_scss_1 = __importDefault(require("./stepper.m.scss"));
+const cx = bind_1.default.bind(stepper_m_scss_1.default);
+/**
+ * Степпер - поле ввода количества.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+exports.Stepper = (0, react_1.forwardRef)(function Stepper({ buttonClickBehavior, canAdd = true, canSubtract = true, className, disabled, plusDisabled = disabled, minusDisabled = disabled, readOnly, onAdd, onBlur, onChange, onFocus, onSubtract, size = 'm', style, value, failed, 'data-testid': testId = 'stepper', ...inputProps }, forwardedRef) {
+    const ref = (0, react_1.useRef)(null);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    (0, react_1.useImperativeHandle)(forwardedRef, () => ref.current);
+    const noBlurOnMousedown = (0, react_1.useCallback)(event => {
+        if (focused && event.target !== ref.current && buttonClickBehavior === 'prevent-input-blur') {
+            event.preventDefault();
+        }
+    }, [focused, buttonClickBehavior]);
+    const rootClassName = cx('root', `size-${size}`, { disabled, focused, failed }, className);
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": testId, style: style, className: rootClassName, onMouseDown: noBlurOnMousedown, children: [(0, jsx_runtime_1.jsx)("button", { tabIndex: -1, hidden: !canSubtract, disabled: minusDisabled ?? disabled ?? readOnly, className: cx('button'), "data-testid": 'stepper:minus', "aria-label": '\u0423\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: noBlurOnMousedown, onClick: canSubtract && !minusDisabled && !disabled && !readOnly ? onSubtract : undefined, children: (0, jsx_runtime_1.jsx)(Minus_1.default, { className: stepper_m_scss_1.default.svg }) }), (0, jsx_runtime_1.jsx)("input", { ...inputProps, ref: ref, readOnly: readOnly, "data-testid": 'stepper:input', className: cx('input'), value: value, disabled: disabled, onChange: onChange, onFocus: e => {
+                    setFocused(true);
+                    onFocus?.(e);
+                }, onBlur: e => {
+                    setFocused(false);
+                    onBlur?.(e);
+                } }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, hidden: !canAdd, disabled: plusDisabled ?? disabled ?? readOnly, className: cx('button'), "data-testid": 'stepper:plus', "aria-label": '\u0423\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: noBlurOnMousedown, onClick: canAdd && !plusDisabled && !disabled && !readOnly ? onAdd : undefined, children: (0, jsx_runtime_1.jsx)(Plus_1.default, { className: stepper_m_scss_1.default.svg }) })] }));
+});
+//# sourceMappingURL=stepper.js.map

package/dist/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../src/stepper/stepper.tsx"],"names":[],"mappings":";;;;;;;AACA,iCAOe;AACf,yFAAoE;AACpE,2FAAsE;AACtE,2DAAyC;AACzC,sEAAsC;AAEtC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,wBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACU,QAAA,OAAO,GAAG,IAAA,kBAAU,EAAiC,SAAS,OAAO,CAChF,EACE,mBAAmB,EACnB,MAAM,GAAG,IAAI,EACb,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,QAAQ,EACR,YAAY,GAAG,QAAQ,EACvB,aAAa,GAAG,QAAQ,EACxB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,UAAU,EACV,IAAI,GAAG,GAAG,EACV,KAAK,EACL,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,GAAG,UAAU,EACd,EACD,YAAY;IAEZ,MAAM,GAAG,GAAG,IAAA,cAAM,EAA0B,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,IAAA,2BAAmB,EACjB,YAAY,EACZ,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAClB,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,KAAK,CAAC,EAAE;QACN,IAAI,OAAO,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,IAAI,mBAAmB,KAAK,oBAAoB,EAAE,CAAC;YAC5F,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAC/B,CAAC;IAEF,MAAM,aAAa,GAAG,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,CAAC;IAE3F,OAAO,CACL,gDACe,MAAM,EACnB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,iBAAiB,aAE9B,mCACE,QAAQ,EAAE,CAAC,CAAC,EACZ,MAAM,EAAE,CAAC,WAAW,EACpB,QAAQ,EAAE,aAAa,IAAI,QAAQ,IAAI,QAAQ,EAC/C,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,iBACX,eAAe,gBAChB,wDAAW,EACtB,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,WAAW,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,YAEzF,uBAAC,eAAQ,IAAC,SAAS,EAAE,wBAAM,CAAC,GAAG,GAAI,GAC5B,EACT,qCACM,UAAU,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,iBACN,eAAe,EAC3B,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,UAAU,CAAC,IAAI,CAAC,CAAC;oBACjB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;gBACf,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE;oBACV,UAAU,CAAC,KAAK,CAAC,CAAC;oBAClB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;gBACd,CAAC,GACD,EACF,mCACE,QAAQ,EAAE,CAAC,CAAC,EACZ,MAAM,EAAE,CAAC,MAAM,EACf,QAAQ,EAAE,YAAY,IAAI,QAAQ,IAAI,QAAQ,EAC9C,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,iBACX,cAAc,gBACf,wDAAW,EACtB,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,YAE9E,uBAAC,cAAO,IAAC,SAAS,EAAE,wBAAM,CAAC,GAAG,GAAI,GAC3B,IACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/stepper/stepper.m.scss

@@ -0,0 +1,91 @@
+@use '../colors';
+
+.root {
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: colors.$basic-gray87;
+  background: colors.$basic-gray8;
+  &.focused {
+    border-color: colors.$basic-blue;
+  }
+  &.disabled {
+    color: colors.$basic-gray24;
+    border-color: colors.$basic-gray4;
+    background: colors.$basic-gray4;
+  }
+  &.failed {
+    color: colors.$additional-deep-red;
+  }
+  &.size-xs {
+    --stepper-button-width: 24px;
+    width: var(--stepper-width, 122px);
+    height: 32px;
+    .input {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+  &.size-s {
+    --stepper-button-width: 24px;
+    width: var(--stepper-width, 122px);
+    height: 40px;
+  }
+  &.size-m {
+    --stepper-button-width: 32px;
+    width: var(--stepper-width, 160px);
+    height: 48px;
+  }
+}
+
+.input {
+  border: 0;
+  padding: 0;
+
+  // не надо делать transparent: https://stackoverflow.com/q/43483363/13166471
+  background: inherit;
+  outline: 0;
+  width: 0;
+  flex-grow: 1;
+  text-align: center;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  height: 100%;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  width: var(--stepper-button-width);
+  height: 100%;
+  color: colors.$basic-gray87;
+  flex-shrink: 0;
+  &:first-child {
+    justify-content: flex-end;
+  }
+  &:last-child {
+    justify-content: flex-start;
+  }
+  &:not(.hidden):not(:disabled) {
+    cursor: pointer;
+  }
+  &:disabled {
+    color: colors.$basic-gray24;
+    pointer-events: none;
+  }
+  &[hidden] {
+    pointer-events: none;
+    opacity: 0;
+  }
+}
+
+.svg {
+  fill: currentColor;
+}

package/dist/stepper/types.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties, InputHTMLAttributes, MouseEventHandler } from 'react';
+import type { WithTestId } from '../types';
+/** Размер Stepper (влияет на высоту и минимальную ширину). */
+export type StepperSize = 'xs' | 's' | 'm';
+/** Стили Stepper. */
+export interface StepperStyle extends CSSProperties {
+    /** Ширина. */
+    '--stepper-width'?: string;
+}
+export interface StepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'style'>, WithTestId {
+    /** Нужно ли выводить кнопку добавления. */
+    canAdd?: boolean;
+    /** Нужно ли выводить кнопку вычитания. */
+    canSubtract?: boolean;
+    /** Делает кнопку "+" отключенной. */
+    plusDisabled?: boolean;
+    /** Делает кнопку "-" отключенной. */
+    minusDisabled?: boolean;
+    /** Нужно ли предотвращать blur на поле при нажатии "+/-". */
+    buttonClickBehavior?: 'prevent-input-blur';
+    /** Сработает при добавлении. */
+    onAdd?: MouseEventHandler;
+    /** Сработает при вычитании. */
+    onSubtract?: MouseEventHandler;
+    /** Размер. */
+    size?: StepperSize;
+    /** Стили корневого элемента. */
+    style?: StepperStyle;
+    /** Нужно ли показывать состояние ошибки. */
+    failed?: boolean;
+}

package/dist/stepper/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/stepper/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/stepper/types.ts"],"names":[],"mappings":""}

package/dist/stroked-svg/index.d.ts

@@ -0,0 +1,2 @@
+export type { StrokedSVGProps } from './types';
+export { StrokedSVG } from './stroked-svg';

package/dist/stroked-svg/index.js

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

package/dist/stroked-svg/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/stroked-svg/index.ts"],"names":[],"mappings":";;;AACA,6CAA2C;AAAlC,yGAAA,UAAU,OAAA"}

package/dist/stroked-svg/stroked-svg.d.ts

@@ -0,0 +1,7 @@
+import type { StrokedSVGProps } from './types';
+/**
+ * Выводит иконку с внешней обводкой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const StrokedSVG: import("react").ForwardRefExoticComponent<StrokedSVGProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/stroked-svg/stroked-svg.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StrokedSVG = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../colors");
+const classnames_1 = __importDefault(require("classnames"));
+const stroked_svg_m_scss_1 = __importDefault(require("./stroked-svg.m.scss"));
+/**
+ * Выводит иконку с внешней обводкой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+exports.StrokedSVG = (0, react_1.forwardRef)(({ component: Tag, fill, stroke = colors_1.COLORS.get('basic-gray4'), strokeWidth = 1, className, 'data-testid': testId, ...restProps }, ref) => ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, classnames_1.default)(stroked_svg_m_scss_1.default.root, className), "data-testid": testId, ...restProps, children: [strokeWidth > 0 && ((0, jsx_runtime_1.jsx)(Tag, { stroke: stroke, strokeWidth: `${strokeWidth * 2}px`, className: stroked_svg_m_scss_1.default.stroke })), (0, jsx_runtime_1.jsx)(Tag, { fill: fill, className: stroked_svg_m_scss_1.default.svg })] })));
+exports.StrokedSVG.displayName = 'StrokedSVG';
+//# sourceMappingURL=stroked-svg.js.map

package/dist/stroked-svg/stroked-svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stroked-svg.js","sourceRoot":"","sources":["../../src/stroked-svg/stroked-svg.tsx"],"names":[],"mappings":";;;;;;;AACA,iCAAmC;AACnC,sCAAmC;AACnC,4DAAoC;AACpC,8EAA0C;AAE1C;;;;GAIG;AACU,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,SAAS,EAAE,GAAG,EACd,IAAI,EACJ,MAAM,GAAG,eAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAClC,WAAW,GAAG,CAAC,EACf,SAAS,EACT,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EACD,GAAG,EACH,EAAE,CAAC,CACH,iCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,4BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,iBAChC,MAAM,KACf,SAAS,aAEZ,WAAW,GAAG,CAAC,IAAI,CAClB,uBAAC,GAAG,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,WAAW,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,4BAAM,CAAC,MAAM,GAAI,CACvF,EAED,uBAAC,GAAG,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,4BAAM,CAAC,GAAG,GAAI,IACtC,CACP,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/stroked-svg/types.d.ts

@@ -0,0 +1,12 @@
+import type { ElementType, HTMLAttributes, SVGAttributes } from 'react';
+import type { WithTestId } from '../types';
+export interface StrokedSVGProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, WithTestId {
+    /** Компонент, выводящий svg-элемент. */
+    component: ElementType<SVGAttributes<SVGSVGElement>>;
+    /** Цвет внешней обводки. */
+    stroke?: string;
+    /** Ширина внешней обводки. */
+    strokeWidth?: number;
+    /** Цвет заливки. */
+    fill?: string;
+}

package/dist/stroked-svg/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/stroked-svg/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/stroked-svg/types.ts"],"names":[],"mappings":""}

package/dist/styling/borders.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InnerBorder = void 0;
+const bind_1 = __importDefault(require("classnames/bind"));
+const borders_m_scss_1 = __importDefault(require("./borders.m.scss"));
+const cx = bind_1.default.bind(borders_m_scss_1.default);
+/** @deprecated */
+exports.InnerBorder = {
+    y: cx('inner-border-y'),
+    top: cx('inner-border-top'),
+    bottom: cx('inner-border-bottom'),
+};
+//# sourceMappingURL=borders.js.map

package/dist/styling/borders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borders.js","sourceRoot":"","sources":["../../src/styling/borders.ts"],"names":[],"mappings":";;;;;;AAAA,2DAAyC;AACzC,sEAAuC;AAEvC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,wBAAO,CAAC,CAAC;AAEpC,kBAAkB;AACL,QAAA,WAAW,GAAG;IACzB,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC;IACvB,GAAG,EAAE,EAAE,CAAC,kBAAkB,CAAC;IAC3B,MAAM,EAAE,EAAE,CAAC,qBAAqB,CAAC;CAClC,CAAC"}

package/dist/styling/borders.m.scss

@@ -0,0 +1,15 @@
+@use '../colors';
+
+.inner-border-top {
+  box-shadow: inset 0 1px 0 colors.$basic-gray12;
+}
+
+.inner-border-bottom {
+  box-shadow: inset 0 -1px 0 colors.$basic-gray12;
+}
+
+.inner-border-y {
+  box-shadow:
+    inset 0 1px 0 colors.$basic-gray12,
+    inset 0 -1px 0 colors.$basic-gray12;
+}

package/dist/styling/colors.d.ts

@@ -0,0 +1,10 @@
+/** @deprecated */
+export declare const color: (value: "basic-blue" | "basic-black" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue" | "additional-crimson") => string | undefined;
+/** @deprecated */
+export declare const hoverColor: (value: "basic-blue" | "basic-black" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue" | "additional-crimson") => string | undefined;
+/** @deprecated */
+export declare const bgColor: (value: "basic-blue" | "basic-black" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue" | "additional-crimson") => string | undefined;
+/** @deprecated */
+export declare const stroke: (value: "basic-blue" | "basic-black" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue" | "additional-crimson") => string | undefined;
+/** @deprecated */
+export declare const fill: (value: "basic-blue" | "basic-black" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue" | "additional-crimson") => string | undefined;

package/dist/styling/colors.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fill = exports.stroke = exports.bgColor = exports.hoverColor = exports.color = void 0;
+const utils_1 = require("./utils");
+const colors_1 = require("../colors");
+const colors_m_scss_1 = __importDefault(require("./colors.m.scss"));
+const isColorKey = colors_1.COLORS.has.bind(colors_1.COLORS);
+/** @deprecated */
+exports.color = (0, utils_1.ClassGetter)(colors_m_scss_1.default, isColorKey, 'color__');
+/** @deprecated */
+exports.hoverColor = (0, utils_1.ClassGetter)(colors_m_scss_1.default, isColorKey, 'hover-color__');
+/** @deprecated */
+exports.bgColor = (0, utils_1.ClassGetter)(colors_m_scss_1.default, isColorKey, 'bg-color__');
+/** @deprecated */
+exports.stroke = (0, utils_1.ClassGetter)(colors_m_scss_1.default, isColorKey, 'stroke__');
+/** @deprecated */
+exports.fill = (0, utils_1.ClassGetter)(colors_m_scss_1.default, isColorKey, 'fill__');
+//# sourceMappingURL=colors.js.map

package/dist/styling/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/styling/colors.ts"],"names":[],"mappings":";;;;;;AAAA,mCAAsC;AACtC,sCAA0C;AAC1C,oEAAsC;AAEtC,MAAM,UAAU,GAAG,eAAM,CAAC,GAAG,CAAC,IAAI,CAAC,eAAM,CAAC,CAAC;AAE3C,kBAAkB;AACL,QAAA,KAAK,GAAG,IAAA,mBAAW,EAAQ,uBAAO,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;AAExE,kBAAkB;AACL,QAAA,UAAU,GAAG,IAAA,mBAAW,EAAQ,uBAAO,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC;AAEnF,kBAAkB;AACL,QAAA,OAAO,GAAG,IAAA,mBAAW,EAAQ,uBAAO,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;AAE7E,kBAAkB;AACL,QAAA,MAAM,GAAG,IAAA,mBAAW,EAAQ,uBAAO,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;AAE1E,kBAAkB;AACL,QAAA,IAAI,GAAG,IAAA,mBAAW,EAAQ,uBAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC"}

package/dist/styling/colors.m.scss

@@ -0,0 +1,20 @@
+@use '../colors';
+@use 'sass:meta';
+
+@each $key, $color in meta.module-variables(colors) {
+  .color__#{$key} {
+    color: $color;
+  }
+  .hover-color__#{$key}:hover {
+    color: $color;
+  }
+  .bg-color__#{$key} {
+    background-color: $color;
+  }
+  .stroke__#{$key} {
+    stroke: $color;
+  }
+  .fill__#{$key} {
+    fill: $color;
+  }
+}

package/dist/styling/fonts.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.weight = exports.lineHeight = exports.size = exports.WEIGHTS = exports.LINE_HEIGHTS = exports.SIZES = void 0;
+const utils_1 = require("./utils");
+const fonts_m_scss_1 = __importDefault(require("./fonts.m.scss"));
+exports.SIZES = new Set([12, 14, 16, 20, 24, 32, 48, 64]);
+exports.LINE_HEIGHTS = new Set([16, 20, 24, 28, 32, 40, 60, 80]);
+exports.WEIGHTS = new Set([400, 600, 700]);
+/** @deprecated */
+exports.size = (0, utils_1.ClassGetter)(fonts_m_scss_1.default, exports.SIZES.has.bind(exports.SIZES), 'size-');
+/** @deprecated */
+exports.lineHeight = (0, utils_1.ClassGetter)(fonts_m_scss_1.default, exports.LINE_HEIGHTS.has.bind(exports.LINE_HEIGHTS), 'line-height-');
+/** @deprecated */
+exports.weight = (0, utils_1.ClassGetter)(fonts_m_scss_1.default, exports.WEIGHTS.has.bind(exports.WEIGHTS), 'weight-');
+//# sourceMappingURL=fonts.js.map

package/dist/styling/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../src/styling/fonts.ts"],"names":[],"mappings":";;;;;;AAAA,mCAAsC;AACtC,kEAAqC;AAQxB,QAAA,KAAK,GAAG,IAAI,GAAG,CAAO,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;AAExD,QAAA,YAAY,GAAG,IAAI,GAAG,CAAa,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;AAErE,QAAA,OAAO,GAAG,IAAI,GAAG,CAAS,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAExD,kBAAkB;AACL,QAAA,IAAI,GAAG,IAAA,mBAAW,EAAC,sBAAO,EAAE,aAAK,CAAC,GAAG,CAAC,IAAI,CAAC,aAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAEzE,kBAAkB;AACL,QAAA,UAAU,GAAG,IAAA,mBAAW,EAAC,sBAAO,EAAE,oBAAY,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAY,CAAC,EAAE,cAAc,CAAC,CAAC;AAEpG,kBAAkB;AACL,QAAA,MAAM,GAAG,IAAA,mBAAW,EAAC,sBAAO,EAAE,eAAO,CAAC,GAAG,CAAC,IAAI,CAAC,eAAO,CAAC,EAAE,SAAS,CAAC,CAAC"}

package/dist/styling/index.d.ts

@@ -0,0 +1,6 @@
+export { InnerBorder } from './borders';
+export { color, hoverColor, bgColor } from './colors';
+export { type Size, type LineHeight, type Weight, SIZES, LINE_HEIGHTS, WEIGHTS, size, lineHeight, weight, } from './fonts';
+export { BoxShadow } from './shadows';
+export { SmallRounds, MediumRounds } from './shapes';
+export { marginBottom, marginTop, marginLeft, marginRight, paddingBottom, paddingLeft, paddingRight, paddingTop, } from './sizes';

package/dist/styling/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paddingTop = exports.paddingRight = exports.paddingLeft = exports.paddingBottom = exports.marginRight = exports.marginLeft = exports.marginTop = exports.marginBottom = exports.MediumRounds = exports.SmallRounds = exports.BoxShadow = exports.weight = exports.lineHeight = exports.size = exports.WEIGHTS = exports.LINE_HEIGHTS = exports.SIZES = exports.bgColor = exports.hoverColor = exports.color = exports.InnerBorder = void 0;
+var borders_1 = require("./borders");
+Object.defineProperty(exports, "InnerBorder", { enumerable: true, get: function () { return borders_1.InnerBorder; } });
+var colors_1 = require("./colors");
+Object.defineProperty(exports, "color", { enumerable: true, get: function () { return colors_1.color; } });
+Object.defineProperty(exports, "hoverColor", { enumerable: true, get: function () { return colors_1.hoverColor; } });
+Object.defineProperty(exports, "bgColor", { enumerable: true, get: function () { return colors_1.bgColor; } });
+var fonts_1 = require("./fonts");
+Object.defineProperty(exports, "SIZES", { enumerable: true, get: function () { return fonts_1.SIZES; } });
+Object.defineProperty(exports, "LINE_HEIGHTS", { enumerable: true, get: function () { return fonts_1.LINE_HEIGHTS; } });
+Object.defineProperty(exports, "WEIGHTS", { enumerable: true, get: function () { return fonts_1.WEIGHTS; } });
+Object.defineProperty(exports, "size", { enumerable: true, get: function () { return fonts_1.size; } });
+Object.defineProperty(exports, "lineHeight", { enumerable: true, get: function () { return fonts_1.lineHeight; } });
+Object.defineProperty(exports, "weight", { enumerable: true, get: function () { return fonts_1.weight; } });
+var shadows_1 = require("./shadows");
+Object.defineProperty(exports, "BoxShadow", { enumerable: true, get: function () { return shadows_1.BoxShadow; } });
+var shapes_1 = require("./shapes");
+Object.defineProperty(exports, "SmallRounds", { enumerable: true, get: function () { return shapes_1.SmallRounds; } });
+Object.defineProperty(exports, "MediumRounds", { enumerable: true, get: function () { return shapes_1.MediumRounds; } });
+var sizes_1 = require("./sizes");
+Object.defineProperty(exports, "marginBottom", { enumerable: true, get: function () { return sizes_1.marginBottom; } });
+Object.defineProperty(exports, "marginTop", { enumerable: true, get: function () { return sizes_1.marginTop; } });
+Object.defineProperty(exports, "marginLeft", { enumerable: true, get: function () { return sizes_1.marginLeft; } });
+Object.defineProperty(exports, "marginRight", { enumerable: true, get: function () { return sizes_1.marginRight; } });
+Object.defineProperty(exports, "paddingBottom", { enumerable: true, get: function () { return sizes_1.paddingBottom; } });
+Object.defineProperty(exports, "paddingLeft", { enumerable: true, get: function () { return sizes_1.paddingLeft; } });
+Object.defineProperty(exports, "paddingRight", { enumerable: true, get: function () { return sizes_1.paddingRight; } });
+Object.defineProperty(exports, "paddingTop", { enumerable: true, get: function () { return sizes_1.paddingTop; } });
+//# sourceMappingURL=index.js.map

package/dist/styling/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styling/index.ts"],"names":[],"mappings":";;;AAAA,qCAAwC;AAA/B,sGAAA,WAAW,OAAA;AAEpB,mCAAsD;AAA7C,+FAAA,KAAK,OAAA;AAAE,oGAAA,UAAU,OAAA;AAAE,iGAAA,OAAO,OAAA;AAEnC,iCAUiB;AANf,8FAAA,KAAK,OAAA;AACL,qGAAA,YAAY,OAAA;AACZ,gGAAA,OAAO,OAAA;AACP,6FAAA,IAAI,OAAA;AACJ,mGAAA,UAAU,OAAA;AACV,+FAAA,MAAM,OAAA;AAGR,qCAAsC;AAA7B,oGAAA,SAAS,OAAA;AAElB,mCAAqD;AAA5C,qGAAA,WAAW,OAAA;AAAE,sGAAA,YAAY,OAAA;AAElC,iCASiB;AARf,qGAAA,YAAY,OAAA;AACZ,kGAAA,SAAS,OAAA;AACT,mGAAA,UAAU,OAAA;AACV,oGAAA,WAAW,OAAA;AACX,sGAAA,aAAa,OAAA;AACb,oGAAA,WAAW,OAAA;AACX,qGAAA,YAAY,OAAA;AACZ,mGAAA,UAAU,OAAA"}

package/dist/styling/shadows.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoxShadow = void 0;
+const shadows_m_scss_1 = __importDefault(require("./shadows.m.scss"));
+/** @deprecated */
+exports.BoxShadow = {
+    z1: shadows_m_scss_1.default['shadow-z1'],
+    z2: shadows_m_scss_1.default['shadow-z2'],
+    z2straight: shadows_m_scss_1.default['shadow-z2-straight'],
+    z3: shadows_m_scss_1.default['shadow-z3'],
+    z4: shadows_m_scss_1.default['shadow-z4'],
+};
+//# sourceMappingURL=shadows.js.map

package/dist/styling/shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.js","sourceRoot":"","sources":["../../src/styling/shadows.ts"],"names":[],"mappings":";;;;;;AAAA,sEAAuC;AAEvC,kBAAkB;AACL,QAAA,SAAS,GAAG;IACvB,EAAE,EAAE,wBAAO,CAAC,WAAW,CAAC;IACxB,EAAE,EAAE,wBAAO,CAAC,WAAW,CAAC;IACxB,UAAU,EAAE,wBAAO,CAAC,oBAAoB,CAAC;IACzC,EAAE,EAAE,wBAAO,CAAC,WAAW,CAAC;IACxB,EAAE,EAAE,wBAAO,CAAC,WAAW,CAAC;CACzB,CAAC"}

package/dist/styling/shadows.m.scss

@@ -0,0 +1,27 @@
+.shadow-z1 {
+  box-shadow:
+    0 0 4px rgba(0, 0, 0, 0.04),
+    0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.shadow-z2 {
+  box-shadow:
+    0 0 4px rgba(0, 0, 0, 0.04),
+    0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-z2-straight {
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
+}
+
+.shadow-z3 {
+  box-shadow:
+    0 8px 16px rgba(0, 0, 0, 0.08),
+    0 0 4px rgba(0, 0, 0, 0.04);
+}
+
+.shadow-z4 {
+  box-shadow:
+    0 0 4px rgba(0, 0, 0, 0.04),
+    0 12px 30px rgba(0, 0, 0, 0.1);
+}