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

package/checkbox-field/checkbox-field.module.scss

@@ -1,56 +0,0 @@
-@use '../colors';
-
-.root {
-  position: relative;
-  display: inline-flex;
-  .field-row {
-    display: flex;
-    align-items: flex-start;
-  }
-  .label {
-    display: block;
-    cursor: pointer;
-    color: colors.$basic-gray87;
-    font-size: 16px;
-    line-height: 24px;
-  }
-  .info {
-    display: block;
-    cursor: pointer;
-    color: colors.$basic-gray38;
-    font-size: 14px;
-    line-height: 20px;
-  }
-  &.field-checkbox {
-    .field-row {
-      padding-top: 4px;
-      margin-right: 8px;
-    }
-  }
-  &.field-toggle {
-    .field-row {
-      margin-right: 12px;
-    }
-    .label {
-      font-weight: 600;
-    }
-  }
-  &.field-checkbox.small-text {
-    .label {
-      padding-top: 2px;
-      font-size: 14px;
-      line-height: 20px;
-    }
-  }
-  &.failed:not(.disabled) {
-    .label {
-      color: colors.$additional-deep-red;
-    }
-  }
-  &.disabled {
-    .label,
-    .info {
-      color: colors.$basic-gray24;
-    }
-  }
-}

package/checkbox-field/index.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-export interface CheckboxFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    /** Содержимое ярлыка. */
-    label: string;
-    /** Содержимое описания. */
-    info?: string;
-    /** Нужно ли показывать наличие ошибки. */
-    failed?: boolean;
-    /** Нужно ли выводить текст для "checkbox" мелким. */
-    smallText?: boolean;
-    /** Отображаемое поле. */
-    fieldView?: 'checkbox' | 'toggle';
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * @deprecated Теперь можно использовать SwitcherRow.
- */
-export declare const CheckboxField: import("react").ForwardRefExoticComponent<CheckboxFieldProps & import("react").RefAttributes<HTMLInputElement | null>>;

package/checkbox-field/index.js

@@ -1,34 +0,0 @@
-"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.CheckboxField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const checkbox_1 = require("../checkbox");
-const toggle_1 = require("../toggle");
-const bind_1 = __importDefault(require("classnames/bind"));
-const checkbox_field_module_scss_1 = __importDefault(require("./checkbox-field.module.scss"));
-const cx = bind_1.default.bind(checkbox_field_module_scss_1.default);
-/**
- * @deprecated Теперь можно использовать SwitcherRow.
- */
-exports.CheckboxField = (0, react_1.forwardRef)(function CheckboxField(_a, ref) {
-    var { smallText, fieldView = 'checkbox', label, info, failed, 'data-testid': testId = 'checkbox-field', style, className, 
-    // input props
-    id, disabled } = _a, restProps = __rest(_a, ["smallText", "fieldView", "label", "info", "failed", 'data-testid', "style", "className", "id", "disabled"]);
-    const inputProps = Object.assign({ id, disabled }, restProps);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('root', `field-${fieldView}`, { failed, disabled, 'small-text': smallText }, className), style: style, "data-testid": testId }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('field-row') }, { children: [fieldView === 'checkbox' && (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, Object.assign({}, inputProps, { ref: ref })), fieldView === 'toggle' && (0, jsx_runtime_1.jsx)(toggle_1.Toggle, Object.assign({}, inputProps, { ref: ref }))] })), (0, jsx_runtime_1.jsxs)("label", Object.assign({ htmlFor: id }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: cx('label'), "data-testid": 'checkbox-field:label' }, { children: label })), info && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: cx('info') }, { children: info }))] }))] })));
-});

package/chips/chips.module.scss

@@ -1,75 +0,0 @@
-@use '../colors';
-
-.list {
-  display: flex;
-  flex-wrap: wrap;
-  --chips-gutter: 8px;
-  margin-right: calc(-1 * var(--chips-gutter));
-  margin-bottom: calc(-1 * var(--chips-gutter));
-}
-
-.item {
-  flex-grow: 0;
-  flex-shrink: 0;
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-  height: 32px;
-
-  // по умолчанию 0 чтобы вне Chips отступов не было
-  margin-right: var(--chips-gutter, 0);
-  margin-bottom: var(--chips-gutter, 0);
-  overflow: hidden;
-  outline: 0;
-  border: 0;
-  padding: 0 12px;
-  background: colors.$basic-gray8;
-  color: colors.$basic-gray87;
-  border-radius: 4px;
-  box-sizing: border-box;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-  text-decoration: none;
-
-  // переопределяем стили монолита
-  &,
-  &:link,
-  &:visited {
-    background: colors.$basic-gray8;
-    color: colors.$basic-gray87;
-  }
-
-  // эффект при наведении определяем **после** переопределения стилей монолита
-  &:hover {
-    cursor: pointer;
-  }
-  &:hover,
-  &:active {
-    background: colors.$basic-gray12;
-    color: colors.$basic-gray87;
-  }
-  &.checked {
-    background: colors.$basic-gray76;
-    color: colors.$basic-white;
-    &:hover,
-    &:active {
-      background: colors.$basic-gray66;
-      color: colors.$basic-white;
-    }
-  }
-}
-
-.text {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.cross-svg {
-  display: block;
-  fill: currentColor;
-  margin-left: 8px;
-  flex-shrink: 0;
-}

package/chips/index.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-export interface ChipsProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Элементы списка. */
-    children: React.ReactNode;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Список "чипсов".
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Chips: {
-    ({ children, className, "data-testid": testId, ...restProps }: ChipsProps): JSX.Element;
-    Item: ({ href, children, withCross, target, onClick, checked, }: import("./item").ChipsItemProps) => JSX.Element;
-};

package/chips/index.js

@@ -1,34 +0,0 @@
-"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.Chips = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const item_1 = require("./item");
-const bind_1 = __importDefault(require("classnames/bind"));
-const chips_module_scss_1 = __importDefault(require("./chips.module.scss"));
-const cx = bind_1.default.bind(chips_module_scss_1.default);
-/**
- * Список "чипсов".
- * @param props Свойства.
- * @return Элемент.
- */
-const Chips = (_a) => {
-    var { children, className, 'data-testid': testId = 'chips' } = _a, restProps = __rest(_a, ["children", "className", 'data-testid']);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restProps, { className: cx('list', className), "data-testid": testId }, { children: react_1.Children.toArray(children).filter(c => (0, react_1.isValidElement)(c) && c.type === item_1.ChipsItem) })));
-};
-exports.Chips = Chips;
-exports.Chips.Item = item_1.ChipsItem;

package/chips/item.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface ChipsItemProps {
-    href?: string;
-    children?: React.ReactNode;
-    withCross?: boolean;
-    target?: string;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-    checked?: boolean;
-}
-/**
- * Элемент списка "чипсов".
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const ChipsItem: ({ href, children, withCross, target, onClick, checked, }: ChipsItemProps) => JSX.Element;

package/chips/item.js

@@ -1,18 +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.ChipsItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const bind_1 = __importDefault(require("classnames/bind"));
-const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Cross"));
-const chips_module_scss_1 = __importDefault(require("./chips.module.scss"));
-const cx = bind_1.default.bind(chips_module_scss_1.default);
-/**
- * Элемент списка "чипсов".
- * @param props Свойства.
- * @return Элемент.
- */
-const ChipsItem = ({ href, children, withCross, target, onClick, checked, }) => ((0, jsx_runtime_1.jsxs)("a", Object.assign({ href: href, role: href ? undefined : 'button', className: cx('item', { checked }), target: target, onClick: onClick, "data-testid": 'chips:item' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: chips_module_scss_1.default.text }, { children: children })), withCross && (0, jsx_runtime_1.jsx)(Cross_1.default, { className: cx('cross-svg') })] })));
-exports.ChipsItem = ChipsItem;

package/clean-buttons/clean-buttons.module.scss

@@ -1,44 +0,0 @@
-@use '../colors';
-@use './clean-buttons-util';
-
-.group {
-  display: flex;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  width: 100%;
-  .button {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0;
-    + .button {
-      border-left: 1px solid colors.$basic-gray12;
-    }
-  }
-}
-
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: inherit;
-
-  // перебиваем стили Link (font-weight: inherit) чтобы не менять их так как компонент много где используется
-  font-weight: 600 !important;
-
-  font-size: 16px;
-  line-height: 24px;
-  overflow: hidden;
-  height: var(--clean-group-height);
-}
-
-.size-s {
-  @include clean-buttons-util.size-s;
-}
-
-.size-m {
-  @include clean-buttons-util.size-m;
-}
-
-.size-l {
-  @include clean-buttons-util.size-l;
-}

package/clean-buttons/index.d.ts

@@ -1,33 +0,0 @@
-import { ReactNode } from 'react';
-import { LinkProps } from '../link';
-import { CleanButtonSize } from './types';
-export interface CleanButtonProps extends LinkProps {
-    asLink?: boolean;
-    /** Размер (высота). */
-    size?: CleanButtonSize | 'unset';
-}
-export interface CleanGroupProps {
-    /** Размер (высота). */
-    size?: CleanButtonSize | 'unset';
-    /** Содержимое. */
-    children?: ReactNode;
-}
-/**
- * Компонент группы прозрачных кнопок.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function CleanGroup({ size: sizeFromProps, children }: CleanGroupProps): JSX.Element;
-/**
- * Компонент прозрачной кнопки.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function CleanButton({ size, href, asLink, 'data-testid': testId, children, className, ...rest }: CleanButtonProps): JSX.Element;
-/**
- * @deprecated Нужно использовать `import { CleanGroup, CleanButton }`.
- */
-export declare const Clean: {
-    Group: typeof CleanGroup;
-    Button: typeof CleanButton;
-};

package/clean-buttons/index.js

@@ -1,52 +0,0 @@
-"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.Clean = exports.CleanButton = exports.CleanGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const link_1 = require("../link");
-const utils_1 = require("./utils");
-const bind_1 = __importDefault(require("classnames/bind"));
-const clean_buttons_module_scss_1 = __importDefault(require("./clean-buttons.module.scss"));
-const cx = bind_1.default.bind(clean_buttons_module_scss_1.default);
-/**
- * Компонент группы прозрачных кнопок.
- * @param props Свойства.
- * @return Элемент.
- */
-function CleanGroup({ size: sizeFromProps, children }) {
-    const sizeFromContext = (0, react_1.useContext)(utils_1.CleanGroupSizeContext);
-    // значение из пропсов имеет приоритет
-    const size = sizeFromProps || sizeFromContext;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('group') }, { children: react_1.Children.toArray(children).map(item => (0, react_1.isValidElement)(item) && item.type === CleanButton
-            ? (0, react_1.cloneElement)(item, { size })
-            : null) })));
-}
-exports.CleanGroup = CleanGroup;
-/**
- * Компонент прозрачной кнопки.
- * @param props Свойства.
- * @return Элемент.
- */
-function CleanButton(_a) {
-    var { size = 's', href, asLink = Boolean(href), 'data-testid': testId = 'clean-button', children, className } = _a, rest = __rest(_a, ["size", "href", "asLink", 'data-testid', "children", "className"]);
-    return ((0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, rest, { className: cx('button', `size-${size}`, className), pseudo: !asLink, href: href, "data-testid": testId }, { children: children })));
-}
-exports.CleanButton = CleanButton;
-/**
- * @deprecated Нужно использовать `import { CleanGroup, CleanButton }`.
- */
-exports.Clean = { Group: CleanGroup, Button: CleanButton };

package/clean-buttons/types.d.ts

@@ -1,4 +0,0 @@
-/**
- * Размер прозрачных кнопок (высота) по дизайн-гайдам.
- */
-export type CleanButtonSize = 's' | 'm' | 'l';

package/clean-buttons/types.js

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

package/clean-buttons/utils.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { CleanButtonSize } from './types';
-/**
- * Контекст установки размера группы прозрачных кнопок CleanGroup.
- * Размер заданный непосредственно компоненту CleanGroup имеет приоритет над контекстом.
- */
-export declare const CleanGroupSizeContext: import("react").Context<"unset" | CleanButtonSize | undefined>;

package/clean-buttons/utils.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CleanGroupSizeContext = void 0;
-const react_1 = require("react");
-/**
- * Контекст установки размера группы прозрачных кнопок CleanGroup.
- * Размер заданный непосредственно компоненту CleanGroup имеет приоритет над контекстом.
- */
-exports.CleanGroupSizeContext = (0, react_1.createContext)(undefined);

package/colors/index.d.ts

@@ -1,41 +0,0 @@
-declare const collection: {
-    readonly 'basic-blue': "#1f84db";
-    readonly 'basic-gray87': "#212121";
-    readonly 'basic-gray76': "#3a3a3b";
-    readonly 'basic-gray66': "#545455";
-    readonly 'basic-gray54': "#757575";
-    readonly 'basic-gray38': "#9e9e9e";
-    readonly 'basic-gray24': "#c2c2c2";
-    readonly 'basic-gray12': "#e0e0e0";
-    readonly 'basic-gray8': "#ebebeb";
-    readonly 'basic-gray4': "#f5f5f5";
-    readonly 'basic-gray2': "#fafafa";
-    readonly 'basic-white': "#fff";
-    readonly 'additional-deep-red': "#d50000";
-    readonly 'additional-red': "#fb3a2f";
-    readonly 'additional-light-red': "#feebea";
-    readonly 'additional-teal': "#09ab8b";
-    readonly 'additional-green': "#00c853";
-    readonly 'additional-light-green': "#64dd17";
-    readonly 'additional-lime': "#aeea00";
-    readonly 'additional-faded-green': "#eff9ea";
-    readonly 'additional-pink': "#e82e5c";
-    readonly 'additional-purple': "#b52ea8";
-    readonly 'additional-violet': "#902bd0";
-    readonly 'additional-deep-purple': "#634bdf";
-    readonly 'additional-electric-blue': "#2962ff";
-    readonly 'additional-light-blue': "#0091ea";
-    readonly 'additional-cyan': "#00b8d4";
-    readonly 'additional-sky': "#e4f1f9";
-    readonly 'additional-deep-orange': "#ff7200";
-    readonly 'additional-amber': "#ffab00";
-    readonly 'additional-yellow': "#ffd600";
-    readonly 'additional-gold': "#d5a43b";
-    readonly 'additional-brown': "#795548";
-    readonly 'additional-blue-gray': "#607d8b";
-    readonly 'additional-deep-blue': "#00599d";
-    readonly 'additional-dark-blue': "#002b41";
-};
-export type Token = keyof typeof collection;
-export declare const COLORS: Map<"basic-blue" | "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-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", string>;
-export {};

package/colors/index.js

@@ -1,45 +0,0 @@
-"use strict";
-// GENERATED FILE - DO NOT CHANGE IT MANUALLY
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLORS = void 0;
-const collection = {
-    // basic
-    'basic-blue': '#1f84db',
-    'basic-gray87': '#212121',
-    'basic-gray76': '#3a3a3b',
-    'basic-gray66': '#545455',
-    'basic-gray54': '#757575',
-    'basic-gray38': '#9e9e9e',
-    'basic-gray24': '#c2c2c2',
-    'basic-gray12': '#e0e0e0',
-    'basic-gray8': '#ebebeb',
-    'basic-gray4': '#f5f5f5',
-    'basic-gray2': '#fafafa',
-    'basic-white': '#fff',
-    // additional
-    'additional-deep-red': '#d50000',
-    'additional-red': '#fb3a2f',
-    'additional-light-red': '#feebea',
-    'additional-teal': '#09ab8b',
-    'additional-green': '#00c853',
-    'additional-light-green': '#64dd17',
-    'additional-lime': '#aeea00',
-    'additional-faded-green': '#eff9ea',
-    'additional-pink': '#e82e5c',
-    'additional-purple': '#b52ea8',
-    'additional-violet': '#902bd0',
-    'additional-deep-purple': '#634bdf',
-    'additional-electric-blue': '#2962ff',
-    'additional-light-blue': '#0091ea',
-    'additional-cyan': '#00b8d4',
-    'additional-sky': '#e4f1f9',
-    'additional-deep-orange': '#ff7200',
-    'additional-amber': '#ffab00',
-    'additional-yellow': '#ffd600',
-    'additional-gold': '#d5a43b',
-    'additional-brown': '#795548',
-    'additional-blue-gray': '#607d8b',
-    'additional-deep-blue': '#00599d',
-    'additional-dark-blue': '#002b41',
-};
-exports.COLORS = new Map(Object.entries(collection));

package/colors.scss

@@ -1,41 +0,0 @@
-// GENERATED FILE - DO NOT CHANGE IT MANUALLY
-
-// basic
-$basic-blue: #1f84db;
-$basic-gray87: #212121;
-$basic-gray76: #3a3a3b;
-$basic-gray66: #545455;
-$basic-gray54: #757575;
-$basic-gray38: #9e9e9e;
-$basic-gray24: #c2c2c2;
-$basic-gray12: #e0e0e0;
-$basic-gray8: #ebebeb;
-$basic-gray4: #f5f5f5;
-$basic-gray2: #fafafa;
-$basic-white: #fff;
-
-// additional
-$additional-deep-red: #d50000;
-$additional-red: #fb3a2f;
-$additional-light-red: #feebea;
-$additional-teal: #09ab8b;
-$additional-green: #00c853;
-$additional-light-green: #64dd17;
-$additional-lime: #aeea00;
-$additional-faded-green: #eff9ea;
-$additional-pink: #e82e5c;
-$additional-purple: #b52ea8;
-$additional-violet: #902bd0;
-$additional-deep-purple: #634bdf;
-$additional-electric-blue: #2962ff;
-$additional-light-blue: #0091ea;
-$additional-cyan: #00b8d4;
-$additional-sky: #e4f1f9;
-$additional-deep-orange: #ff7200;
-$additional-amber: #ffab00;
-$additional-yellow: #ffd600;
-$additional-gold: #d5a43b;
-$additional-brown: #795548;
-$additional-blue-gray: #607d8b;
-$additional-deep-blue: #00599d;
-$additional-dark-blue: #002b41;

package/context/viewport.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewportContext = void 0;
-const react_1 = require("react");
-/**
- * Контекст необходимый для правильного позиционирования выпадающих элементов (например Tooltip)
- * внутри компонентов формирующих свою область видимости (например Modal).
- */
-exports.ViewportContext = (0, react_1.createContext)((0, react_1.createRef)());

package/dot-nav/dot-nav.module.scss

@@ -1,54 +0,0 @@
-@use '../colors';
-
-.root {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  &.size-s {
-    --dot-regular-size: 6;
-    --dot-active-size: 6;
-    --dot-distant-size: 4;
-  }
-  &.size-l {
-    --dot-regular-size: 8;
-    --dot-active-size: 12;
-    --dot-distant-size: 4;
-  }
-}
-
-.item {
-  position: absolute;
-  top: 0;
-  width: 14px;
-  height: 14px;
-  transition: left 0.3s;
-  --dot-size: var(--dot-regular-size);
-  cursor: pointer;
-  &.active {
-    --dot-size: var(--dot-active-size);
-  }
-  &.distant {
-    --dot-size: var(--dot-distant-size);
-  }
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: 50%;
-    background: colors.$basic-gray12;
-
-    // используем 10 чтобы проще считать коэффициенты масштабирования
-    // ВАЖНО: не надо использовать здесь число больше чем размер родителя с overflow:hidden - моргает в Safari
-    width: 10px;
-    height: 10px;
-
-    // используем scale() чтобы плавное изменение размера выглядело нормально
-    transform: translate3d(-50%, -50%, 0) scale(calc(var(--dot-size) / 10));
-    transition: transform 0.3s, background 0.3s;
-  }
-  &.active::after {
-    background: colors.$basic-gray38;
-  }
-}

package/dot-nav/index.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-export type DotNavSize = 's' | 'l';
-export interface DotNavProps {
-    /** Индекс выбранной точки. */
-    current?: number;
-    /** Количество точек. */
-    total?: number;
-    /** Сработает при выборе точки. */
-    onSelect?: (index: number) => void;
-    /** Размер. */
-    size?: DotNavSize;
-}
-/**
- * Компонент точек навигации для каруселей и слайдеров.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function DotNav({ size, current, total, onSelect }: DotNavProps): JSX.Element;