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

package/base-input/base-input.js

@@ -1,59 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const fit_element_height_1 = require("../helpers/fit-element-height");
-const hooks_1 = require("../hooks");
-const utils_1 = require("./utils");
-const bind_1 = __importDefault(require("classnames/bind"));
-const base_input_module_scss_1 = __importDefault(require("./base-input.module.scss"));
-const cx = bind_1.default.bind(base_input_module_scss_1.default);
-/**
- * Поле ввода текста.
- * Позволяет выводить "остаточный placeholder".
- * Может выводиться в однострочном и многострочном режимах.
- * В многострочном режиме автоматически подстраивает высоту под введенный текст.
- * @param props Свойства.
- * @return Элемент.
- */
-function BaseInput({ inputRef, textareaRef, style, className, restPlaceholder: restPlaceholderProp, 'data-testid': testId = 'base-input', ...props }) {
-    var _a;
-    const textareaInnerRef = (0, react_1.useRef)(null);
-    const inputInnerRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(textareaRef, () => textareaInnerRef.current);
-    (0, react_1.useImperativeHandle)(inputRef, () => inputInnerRef.current);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        // ВАЖНО: после каждого render'а подгоняем высоту многострочного поля под содержимое
-        if (textareaInnerRef.current) {
-            (0, fit_element_height_1.fitElementHeight)({ target: textareaInnerRef.current });
-        }
-    });
-    let field;
-    if (props.multiline) {
-        field = ((0, jsx_runtime_1.jsx)("textarea", { ...(0, utils_1.omitMultiline)(props), ref: textareaInnerRef, rows: (_a = props.rows) !== null && _a !== void 0 ? _a : 1, "data-testid": 'base-input:field' // ВАЖНО: не даем переопределить data-test-id
-            , className: cx('field', 'reset', 'multiline'), onInput: e => {
-                var _a;
-                (_a = props.onInput) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                (0, fit_element_height_1.fitElementHeight)({ target: e.currentTarget });
-            } }));
-    }
-    else {
-        field = ((0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.omitMultiline)(props), ref: inputInnerRef, "data-testid": 'base-input:field' // ВАЖНО: не даем переопределить data-test-id
-            , className: cx('field', 'reset') }));
-    }
-    let restPlaceholder = null;
-    // скрываем rest placeholder для неконтролируемых полей
-    if (typeof props.value !== 'undefined') {
-        restPlaceholder =
-            typeof restPlaceholderProp === 'string'
-                ? { shiftValue: String(props.value), value: restPlaceholderProp }
-                : { shiftValue: String(props.value), value: '', ...restPlaceholderProp };
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: cx('reset', 'root', className), "data-testid": testId, children: [!props.multiline && restPlaceholder && restPlaceholder.value && ((0, jsx_runtime_1.jsxs)("span", { "aria-hidden": true, className: cx('rest-placeholder'), children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": 'rest-placeholder-shift', className: cx('shift-part'), children: restPlaceholder.shiftValue }), (0, jsx_runtime_1.jsx)("span", { "data-testid": 'rest-placeholder', className: cx('main-part'), children: restPlaceholder.value })] })), field] }));
-}
-exports.BaseInput = BaseInput;
-//# sourceMappingURL=base-input.js.map

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

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

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

@@ -1,66 +0,0 @@
-@use '../utils';
-
-.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;
-}
-
-.field {
-  width: 0;
-  flex-grow: 1;
-  display: block;
-  color: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  z-index: 1;
-  text-overflow: inherit;
-  background: inherit;
-  &::placeholder {
-    opacity: 1;
-    color: var(--placeholder-color);
-  }
-  &::-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: 0;
-  .shift-part {
-    color: transparent;
-  }
-  .main-part {
-    color: var(--placeholder-color);
-  }
-}

package/base-input/types.d.ts

@@ -1,31 +0,0 @@
-import { InputHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
-export interface RestPlaceholderDefinition {
-    /** Текст placeholder'а. */
-    value: string;
-    /** Значение, смещающее placeholder. По умолчанию используется значение в поле ввода. */
-    shiftValue?: string;
-}
-export interface BaseInputStyle extends React.CSSProperties {
-    '--placeholder-color'?: string;
-}
-export interface CommonProps {
-    /** Остаточный 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>;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-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/base-input/utils.js

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

package/base-input/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/base-input/utils.ts"],"names":[],"mappings":";;;AAAA;;;;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;AAND,sCAMC"}

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

@@ -1,66 +0,0 @@
-@use '../utils';
-
-.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;
-}
-
-.field {
-  width: 0;
-  flex-grow: 1;
-  display: block;
-  color: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  z-index: 1;
-  text-overflow: inherit;
-  background: inherit;
-  &::placeholder {
-    opacity: 1;
-    color: var(--placeholder-color);
-  }
-  &::-ms-clear {
-    // отключаем системный крестик в IE
-    display: none;
-    height: 0;
-    width: 0;
-  }
-  &.multiline {
-    resize: none;
-    @include utils.hidden-scrollbars;
-  }
-}
-
-.fake-text {
-  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: 0;
-  .invisible-value {
-    color: transparent;
-  }
-  .placeholder {
-    color: var(--placeholder-color);
-  }
-}

package/base-input-deprecated/index.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-interface RestPlaceholder {
-    value: string;
-    shiftValue?: string;
-}
-interface BaseInputStyle extends React.CSSProperties {
-    '--placeholder-color'?: string;
-}
-export interface CustomProps {
-    multiline?: boolean;
-    /** Остаточный placeholder (выводится после введенного значения). */
-    restPlaceholder?: string | RestPlaceholder;
-    /** Стили. */
-    style?: BaseInputStyle;
-}
-export type BaseInputProps = CustomProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLInputElement>;
-/**
- * Компонент поля ввода.
- * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/base-input".
- * @param props Свойства. Поддерживаются свойства элемента input.
- * @return Элемент.
- */
-export declare const BaseInput: import("react").ForwardRefExoticComponent<CustomProps & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement | undefined>>;
-export {};

package/base-input-deprecated/index.js

@@ -1,43 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const fit_element_height_1 = require("../helpers/fit-element-height");
-const bind_1 = __importDefault(require("classnames/bind"));
-const base_input_module_scss_1 = __importDefault(require("./base-input.module.scss"));
-const cx = bind_1.default.bind(base_input_module_scss_1.default);
-/**
- * Компонент поля ввода.
- * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/base-input".
- * @param props Свойства. Поддерживаются свойства элемента input.
- * @return Элемент.
- */
-exports.BaseInput = (0, react_1.forwardRef)(function BaseInput({ className, disabled, multiline, onInput, restPlaceholder: restPlaceholderProp, rows = 1, style, value, ...props }, ref) {
-    const Element = multiline
-        ? 'textarea'
-        : 'input';
-    const inputRef = (0, react_1.useRef)();
-    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
-    // при каждом рендере подгоняем высоту поля под содержимое
-    (0, react_1.useEffect)(() => {
-        multiline &&
-            inputRef.current &&
-            (0, fit_element_height_1.fitElementHeight)({
-                target: inputRef.current,
-            });
-    });
-    const restPlaceholder = typeof restPlaceholderProp === 'string'
-        ? { shiftValue: value, value: restPlaceholderProp }
-        : { shiftValue: value, ...restPlaceholderProp };
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": 'base-input:root', style: style, className: cx('reset', 'root', disabled && 'disabled', className), children: [!multiline && Boolean(restPlaceholder.value) && ((0, jsx_runtime_1.jsxs)("span", { "aria-hidden": true, className: cx('fake-text'), children: [(0, jsx_runtime_1.jsx)("span", { className: cx('invisible-value'), children: restPlaceholder.shiftValue }), (0, jsx_runtime_1.jsx)("span", { className: cx('placeholder'), children: restPlaceholder.value })] })), (0, jsx_runtime_1.jsx)(Element, { "data-testid": 'base-input:field', ...props, rows: multiline ? rows : undefined, ref: inputRef, disabled: disabled, 
-                // ВАЖНО: не даем возможности задать стили/классы именно для этого элемента
-                className: cx('field', 'reset', multiline && 'multiline'), value: value, onInput: (event) => {
-                    multiline && (0, fit_element_height_1.fitElementHeight)(event);
-                    onInput === null || onInput === void 0 ? void 0 : onInput(event);
-                } })] }));
-});
-//# sourceMappingURL=index.js.map

package/base-input-deprecated/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/base-input-deprecated/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA2E;AAC3E,sEAAiE;AACjE,2DAAyC;AACzC,sFAA8C;AAE9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAyBnC;;;;;GAKG;AACU,QAAA,SAAS,GAAG,IAAA,kBAAU,EAGjC,SAAS,SAAS,CAClB,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,eAAe,EAAE,mBAAmB,EACpC,IAAI,GAAG,CAAC,EACR,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,OAAO,GAAG,SAAS;QACvB,CAAC,CAAC,UAAU;QACZ,CAAC,CAAE,OAAgE,CAAC;IACtE,MAAM,QAAQ,GAAG,IAAA,cAAM,GAA0C,CAAC;IAElE,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEjD,0DAA0D;IAC1D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,SAAS;YACP,QAAQ,CAAC,OAAO;YAChB,IAAA,qCAAgB,EAAC;gBACf,MAAM,EAAE,QAAQ,CAAC,OAAO;aACzB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GACnB,OAAO,mBAAmB,KAAK,QAAQ;QACrC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,mBAAmB,EAAE;QACnD,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,GAAI,mBAA2B,EAAE,CAAC;IAE7D,OAAO,CACL,gDACc,iBAAiB,EAC7B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,IAAI,UAAU,EAAE,SAAS,CAAC,aAEhE,CAAC,SAAS,IAAI,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAC/C,uDAAkB,SAAS,EAAE,EAAE,CAAC,WAAW,CAAC,aAC1C,iCAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,YAAG,eAAe,CAAC,UAAU,GAAQ,EAC3E,iCAAM,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,YAAG,eAAe,CAAC,KAAK,GAAQ,IAC7D,CACR,EACD,uBAAC,OAAO,mBACM,kBAAkB,KAC1B,KAAK,EACT,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAClC,GAAG,EAAE,QAAe,EACpB,QAAQ,EAAE,QAAQ;gBAClB,2EAA2E;gBAC3E,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,IAAI,WAAW,CAAC,EACzD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,KAAU,EAAE,EAAE;oBACtB,SAAS,IAAI,IAAA,qCAAgB,EAAC,KAAK,CAAC,CAAC;oBACrC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAY,CAAC,CAAC;gBAC1B,CAAC,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/bordered-layout/bordered-layout.module.scss

@@ -1,7 +0,0 @@
-@use '../breakpoints';
-
-.inner {
-  @include breakpoints.down('mm') {
-    padding: 0 var(--l-gutter);
-  }
-}

package/bordered-layout/index.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-export interface BorderedLayoutProps {
-    /** Флаг добавления рамки сверху. */
-    top?: boolean;
-    /** Флаг добавления рамки снизу. */
-    bottom?: boolean;
-    /** Содержимое. */
-    children?: React.ReactNode;
-}
-/**
- * Выводит содержимое по мобильному layout'у с вертикальными полосками.
- * @deprecated Можно использовать комбинацию Layout, пример есть в Storybook.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-export declare const BorderedLayout: ({ top, bottom, children }: BorderedLayoutProps) => JSX.Element;

package/bordered-layout/index.js

@@ -1,33 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderedLayout = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const bind_1 = __importDefault(require("classnames/bind"));
-const layout_1 = require("../layout");
-const borders_1 = require("../styling/borders");
-const bordered_layout_module_scss_1 = __importDefault(require("./bordered-layout.module.scss"));
-const cx = bind_1.default.bind(bordered_layout_module_scss_1.default);
-/**
- * Выводит содержимое по мобильному layout'у с вертикальными полосками.
- * @deprecated Можно использовать комбинацию Layout, пример есть в Storybook.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-const BorderedLayout = ({ top, bottom, children }) => {
-    let borderClass;
-    if (top && bottom) {
-        borderClass = borders_1.InnerBorder.y;
-    }
-    else if (top) {
-        borderClass = borders_1.InnerBorder.top;
-    }
-    else if (bottom) {
-        borderClass = borders_1.InnerBorder.bottom;
-    }
-    return ((0, jsx_runtime_1.jsx)(layout_1.MobileLayout, { disabledOn: ['mxs', 'ms'], children: (0, jsx_runtime_1.jsx)("div", { className: cx('inner', borderClass), children: children }) }));
-};
-exports.BorderedLayout = BorderedLayout;
-//# sourceMappingURL=index.js.map

package/bordered-layout/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/bordered-layout/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,2DAAyC;AACzC,sCAAyC;AACzC,gDAAiD;AACjD,gGAAmD;AAanD,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,qCAAM,CAAC,CAAC;AAEnC;;;;;GAKG;AACI,MAAM,cAAc,GAAG,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAuB,EAAE,EAAE;IAC/E,IAAI,WAAW,CAAC;IAEhB,IAAI,GAAG,IAAI,MAAM,EAAE;QACjB,WAAW,GAAG,qBAAW,CAAC,CAAC,CAAC;KAC7B;SAAM,IAAI,GAAG,EAAE;QACd,WAAW,GAAG,qBAAW,CAAC,GAAG,CAAC;KAC/B;SAAM,IAAI,MAAM,EAAE;QACjB,WAAW,GAAG,qBAAW,CAAC,MAAM,CAAC;KAClC;IAED,OAAO,CACL,uBAAC,qBAAY,IAAC,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,YACrC,gCAAK,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,YAAG,QAAQ,GAAO,GAC7C,CAChB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,cAAc,kBAgBzB"}

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { BottomBarProps, type BottomBarSize } from './types';
-export declare const BOTTOM_BAR_HEIGHT: Record<BottomBarSize, number>;
-export declare const BOTTOM_BAR_DEFAULTS: {
-    readonly size: "m";
-};
-/**
- * Боттом бар.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function BottomBar({ size, divided, children, className, 'data-testid': testId, ...rest }: BottomBarProps): JSX.Element;

package/bottom-bar/bottom-bar.js

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomBar = exports.BOTTOM_BAR_DEFAULTS = exports.BOTTOM_BAR_HEIGHT = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const shapes_1 = require("../styling/shapes");
-const utils_1 = require("../clean-buttons/utils");
-const bind_1 = __importDefault(require("classnames/bind"));
-const bottom_bar_module_scss_1 = __importDefault(require("./bottom-bar.module.scss"));
-const cx = bind_1.default.bind(bottom_bar_module_scss_1.default);
-// некоторым компонентам нужно знать конкретную высоту, делаем единый источник
-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, 'data-testid': testId = 'bottom-bar', ...rest }) {
-    const rooClassName = cx('root', size !== 'unset' && `size-${size}`, { divided }, shapes_1.MediumRounds.bottom, className);
-    return (
-    // чтобы CleanButton автоматически брали размер, соответствующий размеру BottomBar
-    (0, jsx_runtime_1.jsx)(utils_1.CleanGroupSizeContext.Provider, { value: size, children: (0, jsx_runtime_1.jsx)("div", { ...rest, className: rooClassName, "data-testid": testId, children: children }) }));
-}
-exports.BottomBar = BottomBar;
-//# sourceMappingURL=bottom-bar.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"bottom-bar.js","sourceRoot":"","sources":["../../src/bottom-bar/bottom-bar.tsx"],"names":[],"mappings":";;;;;;;AAAA,8CAAiD;AACjD,kDAA+D;AAE/D,2DAAyC;AACzC,sFAA8C;AAE9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAEnC,8EAA8E;AACjE,QAAA,iBAAiB,GAAkC;IAC9D,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;CACG,CAAC;AAEX,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,aAAa,EAAE,MAAM,GAAG,YAAY,EACpC,GAAG,IAAI,EACQ;IACf,MAAM,YAAY,GAAG,EAAE,CACrB,MAAM,EACN,IAAI,KAAK,OAAO,IAAI,QAAQ,IAAI,EAAE,EAClC,EAAE,OAAO,EAAE,EACX,qBAAY,CAAC,MAAM,EACnB,SAAS,CACV,CAAC;IAEF,OAAO;IACL,kFAAkF;IAClF,uBAAC,6BAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YACzC,mCAAS,IAAI,EAAE,SAAS,EAAE,YAAY,iBAAe,MAAM,YACxD,QAAQ,GACL,GACyB,CAClC,CAAC;AACJ,CAAC;AAxBD,8BAwBC"}

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

@@ -1,35 +0,0 @@
-@use './bottom-bar-util';
-@import '../styling/borders.module';
-
-.root {
-  display: flex;
-  align-items: center;
-  position: relative;
-  background: #fff;
-  overflow: hidden;
-  height: var(--bottom-bar-height);
-
-  // чтобы разделитель был над контентом делаем через pseudo-элемент
-  &.divided::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    @extend .inner-border-top;
-  }
-}
-
-.size-s {
-  @include bottom-bar-util.size-s;
-}
-
-.size-m {
-  @include bottom-bar-util.size-m;
-}
-
-.size-l {
-  @include bottom-bar-util.size-l;
-}

package/bottom-bar/index.d.ts

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

package/bottom-bar/types.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type BottomBarSize = 's' | 'm' | 'l';
-export interface BottomBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size'> {
-    /** Размер (высота). */
-    size?: BottomBarSize | 'unset';
-    /** Нужна ли разделительная черта сверху. */
-    divided?: boolean;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}

package/box/box.module.scss

@@ -1,76 +0,0 @@
-$axis: (
-  x: (
-    'right',
-    'left',
-  ),
-  y: (
-    'top',
-    'bottom',
-  ),
-);
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-// display
-$displayValues: (block, none, flex, inline, inline-block);
-
-@each $key in $displayValues {
-  .display-#{$key} {
-    display: $key;
-  }
-}
-
-// flex
-$flexValues: (
-  shrink: 0 1 auto,
-  grow: 1 1 auto,
-  none: 0 0 auto,
-);
-
-@each $key, $value in $flexValues {
-  .flex-#{$key} {
-    flex: $value;
-  }
-}
-
-// direction
-$directionValues: (row, column);
-
-@each $key in $directionValues {
-  .direction-#{$key} {
-    flex-direction: $key;
-  }
-}
-
-// align-items
-$alignItemsValues: (
-  start: flex-start,
-  end: flex-end,
-  center: center,
-  baseline: baseline,
-  stretch: stretch,
-);
-
-@each $key, $value in $alignItemsValues {
-  .align-items-#{$key} {
-    align-items: $value;
-  }
-}
-
-// justify-content
-$justifyContentValues: (
-  start: flex-start,
-  end: flex-end,
-  center: center,
-  between: space-between,
-  around: space-around,
-  evenly: evenly,
-);
-
-@each $key, $value in $justifyContentValues {
-  .justify-content-#{$key} {
-    justify-content: $value;
-  }
-}

package/box/index.d.ts

@@ -1,66 +0,0 @@
-/// <reference types="react" />
-import { Token } from '../colors';
-type CustomElement = {
-    className: string;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-} & React.RefAttributes<any>;
-export interface BoxProps {
-    /** Значение свойства "alignItems". */
-    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-    /** Содержимое блока. */
-    children?: React.ReactNode;
-    /** Название цвета из дизайн-системы. */
-    color?: Token;
-    /** Объект для указания inline-стилей. */
-    dangerouslySetInlineStyle?: {
-        __style: React.CSSProperties;
-    };
-    /** Значение css-свойства "direction". */
-    direction?: 'row' | 'column';
-    /** Значение css-свойства "display". */
-    display?: 'block' | 'none' | 'flex' | 'inline' | 'inline-block';
-    /** Элемент, который будет использован как блок. */
-    element?: string | React.ComponentType<CustomElement>;
-    /** Формирует значение css-свойства "flex". */
-    flex?: 'shrink' | 'grow' | 'none';
-    /** Значение свойства "justifyContent". */
-    justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around';
-    /** Внешние отступы. */
-    margin?: number;
-    /** Внешний отступ снизу. */
-    marginBottom?: number;
-    /** Внешний отступ слева. */
-    marginLeft?: number;
-    /** Внешний отступ справа. */
-    marginRight?: number;
-    /** Внешний отступ сверху. */
-    marginTop?: number;
-    /** Внешний отступ по вертикали. */
-    marginX?: number;
-    /** Внешний отступ по горизонтали. */
-    marginY?: number;
-    /** Внутренние отступы. */
-    padding?: number;
-    /** Внутренний отступ снизу. */
-    paddingBottom?: number;
-    /** Внутренний отступ слева. */
-    paddingLeft?: number;
-    /** Внутренний отступ справа. */
-    paddingRight?: number;
-    /** Внутренний отступ сверху. */
-    paddingTop?: number;
-    /** Внутренний отступ по вертикали. */
-    paddingX?: number;
-    /** Внутренний отступ по горизонтали. */
-    paddingY?: number;
-    /** Формирует значение css-свойства "flex-wrap". */
-    wrap?: boolean;
-}
-/**
- * Компонент блока, реализующего оформление в соответствии с дизайн-системой.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Box: ({ element: Container, children, display, flex, wrap, direction, alignItems, justifyContent, dangerouslySetInlineStyle, margin, marginTop, marginRight, marginBottom, marginLeft, marginX, marginY, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX, paddingY, color, }: BoxProps) => JSX.Element;
-export {};