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

package/dist/upload-area/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFilesDescription = exports.UploadArea = void 0;
+var upload_area_1 = require("./upload-area");
+Object.defineProperty(exports, "UploadArea", { enumerable: true, get: function () { return upload_area_1.UploadArea; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getFilesDescription", { enumerable: true, get: function () { return utils_1.getFilesDescription; } });
+//# sourceMappingURL=index.js.map

package/dist/upload-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/upload-area/index.ts"],"names":[],"mappings":";;;AACA,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,iCAA8C;AAArC,4GAAA,mBAAmB,OAAA"}

package/dist/upload-area/types.d.ts

@@ -0,0 +1,35 @@
+import type { ChangeEvent, CSSProperties, DragEvent, HTMLAttributes, InputHTMLAttributes } from 'react';
+import type { WithTestId } from '../types';
+export type UploadAreaSize = 's' | 'm';
+export interface UploadAreaProps extends WithTestId {
+    /** Размер. */
+    size?: UploadAreaSize | 'unset';
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** Заголовок. */
+    title?: string;
+    /** Описание. */
+    description?: string;
+    /** Состояние с ошибками валидации. */
+    failed?: boolean;
+    /** Отключенное состояния. */
+    disabled?: boolean;
+    /** Ограничение на количество файлов. */
+    multiple?: boolean;
+    /** Сработает при выборе или перетаскивании файлов, получив список файлов и событие. */
+    onSelect?: (list: File[], event: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>) => void;
+    /** Свойства корневого элемента. */
+    rootProps?: HTMLAttributes<HTMLElement>;
+    /** Свойства элемента input. */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+export interface DescriptionPayload {
+    /** Ограничение на количество файлов. */
+    countLimit?: number;
+    /** Ограничение на размер. */
+    sizeLimit?: string;
+    /** Форматы файлов, выводятся пользователю. */
+    formats?: string;
+}

package/dist/upload-area/types.js

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

package/dist/upload-area/types.js.map

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

package/dist/upload-area/upload-area-util.scss

@@ -0,0 +1,19 @@
+@mixin size-s {
+  --padding-x: 16px;
+  --padding-y: 20px;
+  --justify-content: flex-start;
+  --icon-size: 0;
+  --icon-display: none;
+  --icon-gap: 0;
+  --min-height: calc(48px + (2 * var(--padding-y)));
+}
+
+@mixin size-m {
+  --padding-x: 60px;
+  --padding-y: 20px;
+  --justify-content: center;
+  --icon-size: 64px;
+  --icon-display: block;
+  --icon-gap: 24px;
+  --min-height: calc(var(--icon-size) + (2 * var(--padding-y)));
+}

package/dist/upload-area/upload-area.d.ts

@@ -0,0 +1,7 @@
+import { UploadAreaProps } from './types';
+/**
+ * Поля выбора файлов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function UploadArea({ title, description, className, style, size, multiple, disabled, failed, onSelect, rootProps, inputProps, 'data-testid': testId, }: UploadAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/upload-area/upload-area.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadArea = UploadArea;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = require("../link");
+const utils_1 = require("./utils");
+const Upload_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Stroked/Upload"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const upload_area_m_scss_1 = __importDefault(require("./upload-area.m.scss"));
+const cx = bind_1.default.bind(upload_area_m_scss_1.default);
+/**
+ * Поля выбора файлов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function UploadArea({ title, description, className, style, size = 'm', multiple, disabled, failed, onSelect, rootProps, inputProps, 'data-testid': testId = 'upload-area', }) {
+    const inputRef = (0, react_1.useRef)(null);
+    const filterFiles = (0, react_1.useCallback)((files) => {
+        const result = [...files];
+        multiple ? result : result.splice(1);
+        return result;
+    }, [multiple]);
+    const onInputChange = (0, react_1.useCallback)(event => {
+        onSelect?.(filterFiles(event.target.files || []), event);
+        // очищаем поле чтобы можно было выбрать тот же файл повторно
+        event.target.value = '';
+    }, [filterFiles, onSelect]);
+    const { active, bind } = (0, utils_1.useFilesDrop)(event => {
+        onSelect?.(filterFiles(event.dataTransfer.files), event);
+    });
+    const rootClassName = cx('root', size !== 'unset' && `size-${size}`, { active, failed, disabled }, className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rootProps, ...bind, "data-testid": testId, style: style, className: rootClassName, tabIndex: disabled ? -1 : 0, role: 'button', onFocus: event => {
+            if (!disabled) {
+                rootProps?.onFocus?.(event);
+            }
+        }, onClick: event => {
+            if (!disabled) {
+                inputRef.current?.click();
+                rootProps?.onClick?.(event);
+            }
+        }, onKeyDown: event => {
+            // имитируем поведение кнопки
+            if (!disabled && ['Enter', 'Space'].includes(event.code)) {
+                inputRef.current?.click();
+                rootProps?.onKeyDown?.(event);
+            }
+        }, onBlur: event => {
+            rootProps?.onBlur?.(event);
+        }, children: [(0, jsx_runtime_1.jsx)(Upload_1.default, { className: cx('icon') }), (0, jsx_runtime_1.jsxs)("div", { className: cx('info', { empty: !title && !description }), children: [(0, jsx_runtime_1.jsxs)("div", { className: cx('text', 'primary'), children: [(0, jsx_runtime_1.jsx)("input", { ...inputProps, ref: inputRef, type: 'file', multiple: multiple, className: cx('input', inputProps?.className), onChange: onInputChange, onClick: e => {
+                                    // ВАЖНО: для того чтобы при клике на корневом элементе не вызывался второй клик
+                                    e.stopPropagation();
+                                }, "data-testid": 'upload-area:input', disabled: disabled }), (0, jsx_runtime_1.jsx)(link_1.Link, { pseudo: true, "data-testid": 'upload-area:anchor', disabled: disabled, children: title })] }), description && (0, jsx_runtime_1.jsx)("div", { className: cx('text', 'secondary'), children: description })] })] }));
+}
+//# sourceMappingURL=upload-area.js.map

package/dist/upload-area/upload-area.js.map

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

package/dist/upload-area/upload-area.m.scss

@@ -0,0 +1,81 @@
+@use '../colors';
+@use './upload-area-util';
+
+.root {
+  --secondary-text-color: #{colors.$basic-gray38};
+  display: flex;
+  align-items: center;
+  justify-content: var(--justify-content);
+  padding: calc(var(--padding-y) - 1px) calc(var(--padding-x) - 1px);
+  min-height: var(--min-height);
+  border-radius: 8px;
+  border: 1px dashed colors.$basic-gray24;
+  max-width: 100%;
+  overflow: hidden;
+  outline: 0;
+  background: #fff;
+  &.size-s {
+    @include upload-area-util.size-s;
+  }
+  &.size-m {
+    @include upload-area-util.size-m;
+  }
+  &:not(.disabled):hover {
+    cursor: pointer;
+    border-color: colors.$basic-blue;
+  }
+  &:not(.disabled).active,
+  &:not(.disabled):focus-visible {
+    border-color: colors.$basic-blue;
+    border-style: solid;
+  }
+  &.disabled {
+    background: colors.$basic-gray4;
+    --secondary-text-color: #{colors.$basic-gray24};
+  }
+  &.failed {
+    --secondary-text-color: #{colors.$additional-deep-red};
+  }
+}
+
+.icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  display: var(--icon-display);
+  flex-shrink: 0;
+  fill: colors.$basic-gray24;
+}
+
+.icon + .info:not(.empty) {
+  margin-left: var(--icon-gap);
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  align-items: flex-start;
+  text-align: left;
+  .text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &.primary {
+      font-size: 16px;
+      line-height: 24px;
+    }
+    &.secondary {
+      margin-top: 4px;
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--secondary-text-color);
+    }
+  }
+}
+
+.input {
+  display: none;
+}

package/dist/upload-area/utils.d.ts

@@ -0,0 +1,24 @@
+import { DragEventHandler } from 'react';
+import { DescriptionPayload } from './types';
+type UseFilesDropResult<T> = {
+    active: boolean;
+    bind: {
+        onDragEnter: DragEventHandler<T>;
+        onDragOver: DragEventHandler<T>;
+        onDragLeave: DragEventHandler<T>;
+        onDrop: DragEventHandler<T>;
+    };
+};
+/**
+ * Хук обработки перетаскивания файлов на элемент.
+ * @param callback Опции.
+ * @return Данные.
+ */
+export declare function useFilesDrop<T extends HTMLElement = HTMLElement>(callback: DragEventHandler<T>): UseFilesDropResult<T>;
+/**
+ * Возвращает строку с описанием файлов для отправки по дизайн-гайдам.
+ * @param payload Информация о файлах.
+ * @return Строка.
+ */
+export declare function getFilesDescription({ countLimit, sizeLimit, formats, }: DescriptionPayload): string;
+export {};

package/dist/upload-area/utils.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilesDrop = useFilesDrop;
+exports.getFilesDescription = getFilesDescription;
+const react_1 = require("react");
+const use_identity_ref_1 = require("../hooks/use-identity-ref");
+const get_declination_1 = require("../helpers/get-declination");
+/**
+ * Хук обработки перетаскивания файлов на элемент.
+ * @param callback Опции.
+ * @return Данные.
+ */
+function useFilesDrop(callback) {
+    const [active, setActive] = (0, react_1.useState)(false);
+    const callbackRef = (0, use_identity_ref_1.useIdentityRef)(callback);
+    const onDragEnter = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(true);
+    }, []);
+    const onDragOver = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(true);
+    }, []);
+    const onDragLeave = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        const { currentTarget, relatedTarget } = event;
+        // игнорируем переход по дочерним элементам
+        if (!relatedTarget ||
+            (currentTarget instanceof Node &&
+                relatedTarget instanceof Node &&
+                !currentTarget.contains(relatedTarget))) {
+            setActive(false);
+        }
+    }, []);
+    const onDrop = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(false);
+        callbackRef.current(event);
+    }, []);
+    return {
+        active,
+        bind: {
+            onDragEnter,
+            onDragOver,
+            onDragLeave,
+            onDrop,
+        },
+    };
+}
+/**
+ * Возвращает строку с описанием файлов для отправки по дизайн-гайдам.
+ * @param payload Информация о файлах.
+ * @return Строка.
+ */
+function getFilesDescription({ countLimit, sizeLimit, formats, }) {
+    const description = [
+        typeof countLimit === 'number' && countLimit > 0
+            ? `${countLimit} ${(0, get_declination_1.getDeclination)(countLimit, ['файл', 'файла', 'файлов'])}`
+            : null,
+        formats ? `формат ${formats}` : null,
+        sizeLimit ? `до ${sizeLimit}` : null,
+    ]
+        .filter(Boolean)
+        .join(', ');
+    return description;
+}
+//# sourceMappingURL=utils.js.map

package/dist/upload-area/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/upload-area/utils.ts"],"names":[],"mappings":";;AAoBA,oCA+CC;AAOD,kDAkBC;AA5FD,iCAAgE;AAChE,gEAA2D;AAC3D,gEAA4D;AAa5D;;;;GAIG;AACH,SAAgB,YAAY,CAC1B,QAA6B;IAE7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,IAAA,iCAAc,EAAC,QAAQ,CAAC,CAAC;IAE7C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;QAE/C,2CAA2C;QAC3C,IACE,CAAC,aAAa;YACd,CAAC,aAAa,YAAY,IAAI;gBAC5B,aAAa,YAAY,IAAI;gBAC7B,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EACzC,CAAC;YACD,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QACtD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,MAAM;QAEN,IAAI,EAAE;YACJ,WAAW;YACX,UAAU;YACV,WAAW;YACX,MAAM;SACP;KACF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,EAClC,UAAU,EACV,SAAS,EACT,OAAO,GACY;IACnB,MAAM,WAAW,GAAW;QAC1B,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,GAAG,CAAC;YAC9C,CAAC,CAAC,GAAG,UAAU,IAAI,IAAA,gCAAc,EAAC,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5E,CAAC,CAAC,IAAI;QAER,OAAO,CAAC,CAAC,CAAC,UAAU,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI;QAEpC,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI;KACrC;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/package.json

@@ -1,41 +1,37 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.5",
-  "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
+  "type": "commonjs",
+  "version": "45.0.0-alpha.50",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
-  "private": false,
   "engines": {
-    "node": ">=16.15.1"
+    "node": ">=22.0.0"
   },
   "scripts": {
     "export:colors": "node .template/build.mjs",
-    "build:before": "rimraf build",
-    "build:main": "tsc --project tsconfig.build.json",
-    "build:after": "node dist.mjs",
-    "build": "npm run build:before && npm run build:main && npm run build:after",
-    "test": "BROWSERSLIST_ENV=\"test\" npx jest",
-    "coverage": "jest --clearCache && BROWSERSLIST_ENV=\"test\" npx jest --coverage",
-    "type-check": "tsc -p . --noEmit",
+    "build": "npm run build:clean && npm run build:scripts && npm run build:assets",
+    "build:clean": "rm -rf dist",
+    "build:scripts": "tsc --project tsconfig.build.json",
+    "build:assets": "node scripts/build-assets.mjs",
+    "typecheck": "tsc -p . --noEmit",
     "lint": "npm run lint:scripts && npm run lint:styles",
-    "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
+    "lint:scripts": "eslint './src/**/*.{js,jsx,ts,tsx}'",
     "lint:styles": "stylelint 'src/**/*.{css,scss}'",
-    "storybook": "BROWSERSLIST_ENV=\"storybook\" npx start-storybook -p 9009 -c .storybook",
-    "storybook:build": "BROWSERSLIST_ENV=\"storybook\" npx build-storybook --quiet --loglevel error -o build-storybook",
+    "test": "BROWSERSLIST_ENV=\"test\" npx jest",
+    "test:coverage": "jest --clearCache && BROWSERSLIST_ENV=\"test\" npx jest --coverage",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss}\"",
     "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\""
   },
   "dependencies": {
-    "@floating-ui/react": "^0.17.0",
-    "@krutoo/input-mask": "^0.0.9",
-    "body-scroll-lock": "3.1.5",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.28.0",
+    "@floating-ui/react": "^0.27.8",
+    "@krutoo/input-mask": "^0.1.0",
+    "body-scroll-lock-upgrade": "^1.1.0",
+    "classnames": "^2.3.2",
+    "date-fns": "^3.3.1",
     "focus-trap": "^7.2.0",
-    "lodash": "^4.17.21",
-    "overlayscrollbars": "^1.13.3",
-    "overlayscrollbars-react": "^0.3.0",
-    "react-transition-group": "^4.4.2",
+    "overlayscrollbars": "^2.8.0",
+    "overlayscrollbars-react": "^0.5.6",
+    "react-transition-state": "^2.1.2",
     "redux": "^4.2.0"
   },
   "devDependencies": {
@@ -43,62 +39,127 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.27.1",
-    "@rushstack/eslint-patch": "^1.1.1",
-    "@sima-land/linters": "^3.0.0",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-backgrounds": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-storysource": "^6.5.14",
-    "@storybook/addons": "^6.5.14",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.14",
-    "@storybook/theming": "^6.5.14",
-    "@testing-library/react": "^12.1.4",
+    "@playwright/test": "^1.57.0",
+    "@sima-land/linters": "^5.0.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/body-scroll-lock": "^3.1.0",
-    "@types/enzyme": "^3.10.11",
     "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.180",
     "@types/overlayscrollbars": "^1.12.1",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
-    "@types/react-transition-group": "^4.4.4",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "babel-jest": "^27.5.1",
-    "clipboard": "^2.0.11",
     "copyfiles": "^2.4.1",
-    "css-loader": "^6.7.1",
-    "enzyme": "^3.9.0",
-    "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.11.0",
-    "eslint-plugin-storybook": "^0.6.4",
-    "file-loader": "^6.2.0",
+    "eslint": "^9.8.0",
     "handlebars": "^4.7.7",
     "husky": "^7.0.4",
     "jest": "^29.3.1",
     "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^12.3.5",
-    "lorem-ipsum": "^2.0.8",
     "postcss": "^8.4.24",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "sass": "^1.63.6",
-    "sass-loader": "^12.6.0",
-    "style-loader": "^3.3.1",
+    "prettier": "^3.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.83.4",
     "stylelint": "^15.9.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
-    "webpack": "^5.75.0"
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
-    "@sima-land/ui-quarks": "^4.2.0",
-    "react": ">=17",
-    "react-dom": ">=17"
+    "@sima-land/ui-quarks": "^5.0.0",
+    "react": "^17.0 || ^18.0",
+    "react-dom": "^17.0 || ^18.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./breakpoints.scss": "./dist/breakpoints.scss",
+    "./colors.scss": "./dist/colors.scss",
+    "./gradients.scss": "./dist/gradients.scss",
+    "./shadows.scss": "./dist/shadows.scss",
+    "./utils.scss": "./dist/utils.scss",
+    "./_internal/custom-scrollbar": "./dist/_internal/custom-scrollbar/index.js",
+    "./_internal/lifecycle": "./dist/_internal/lifecycle/index.js",
+    "./_internal/page-scroll-lock": "./dist/_internal/page-scroll-lock/index.js",
+    "./alert": "./dist/alert/index.js",
+    "./arrow-button": "./dist/arrow-button/index.js",
+    "./autocomplete": "./dist/autocomplete/index.js",
+    "./avatar": "./dist/avatar/index.js",
+    "./accordion": "./dist/accordion/index.js",
+    "./base-input": "./dist/base-input/index.js",
+    "./bottom-bar": "./dist/bottom-bar/index.js",
+    "./bottom-bar/bottom-bar-util.scss": "./dist/bottom-bar/bottom-bar-util.scss",
+    "./box": "./dist/box/index.js",
+    "./button": "./dist/button/index.js",
+    "./button/button-util.scss": "./dist/button/button-util.scss",
+    "./carousel": "./dist/carousel/index.js",
+    "./checkbox": "./dist/checkbox/index.js",
+    "./chip": "./dist/chip/index.js",
+    "./chip/chip-util.scss": "./dist/chip/chip-util.scss",
+    "./clean-buttons": "./dist/clean-buttons/index.js",
+    "./clean-buttons/clean-buttons-util.scss": "./dist/clean-buttons/clean-buttons-util.scss",
+    "./colors": "./dist/colors/index.js",
+    "./context": "./dist/context/index.js",
+    "./dot-nav": "./dist/dot-nav/index.js",
+    "./dropdown-item": "./dist/dropdown-item/index.js",
+    "./dropdown": "./dist/dropdown/index.js",
+    "./expandable": "./dist/expandable/index.js",
+    "./field-block": "./dist/field-block/index.js",
+    "./file-icon": "./dist/file-icon/index.js",
+    "./gradients": "./dist/gradients/index.js",
+    "./group-overflow": "./dist/group-overflow/index.js",
+    "./helpers": "./dist/helpers/index.js",
+    "./hint": "./dist/hint/index.js",
+    "./hooks": "./dist/hooks/index.js",
+    "./hooks/use-intersection/test-utils": "./dist/hooks/use-intersection/test-utils.js",
+    "./info-text": "./dist/info-text/index.js",
+    "./input": "./dist/input/index.js",
+    "./layout": "./dist/layout/index.js",
+    "./link": "./dist/link/index.js",
+    "./link/link-util.scss": "./dist/link/link-util.scss",
+    "./masked-input": "./dist/masked-input/index.js",
+    "./modal-overlay": "./dist/modal-overlay/index.js",
+    "./modal-overlay/modal-overlay-util.scss": "./dist/modal-overlay/modal-overlay-util.scss",
+    "./modal": "./dist/modal/index.js",
+    "./modal/modal-util.scss": "./dist/modal/modal-util.scss",
+    "./no-index": "./dist/no-index/index.js",
+    "./pagination": "./dist/pagination/index.js",
+    "./panel": "./dist/panel/index.js",
+    "./phone-input": "./dist/phone-input/index.js",
+    "./plate": "./dist/plate/index.js",
+    "./popup": "./dist/popup/index.js",
+    "./portal": "./dist/portal/index.js",
+    "./price": "./dist/price/index.js",
+    "./radio-button": "./dist/radio-button/index.js",
+    "./range": "./dist/range/index.js",
+    "./rating": "./dist/rating/index.js",
+    "./select": "./dist/select/index.js",
+    "./side-page": "./dist/side-page/index.js",
+    "./side-page/side-page-util.scss": "./dist/side-page/side-page-util.scss",
+    "./skeleton": "./dist/skeleton/index.js",
+    "./snack-bar": "./dist/snack-bar/index.js",
+    "./spinner": "./dist/spinner/index.js",
+    "./stepper": "./dist/stepper/index.js",
+    "./stroked-svg": "./dist/stroked-svg/index.js",
+    "./styling": "./dist/styling/index.js",
+    "./super-ellipse-clip-path": "./dist/super-ellipse-clip-path/index.js",
+    "./switcher-row": "./dist/switcher-row/index.js",
+    "./tabs": "./dist/tabs/index.js",
+    "./test-utils": "./dist/test-utils/index.js",
+    "./text-button": "./dist/text-button/index.js",
+    "./text": "./dist/text/index.js",
+    "./textarea": "./dist/textarea/index.js",
+    "./timer": "./dist/timer/index.js",
+    "./toggle": "./dist/toggle/index.js",
+    "./top-bar": "./dist/top-bar/index.js",
+    "./top-bar/top-bar-util.scss": "./dist/top-bar/top-bar-util.scss",
+    "./touch-slider": "./dist/touch-slider/index.js",
+    "./types": "./dist/types/index.js",
+    "./unknown-content": "./dist/unknown-content/index.js",
+    "./upload-area": "./dist/upload-area/index.js",
+    "./upload-area/upload-area-util.scss": "./dist/upload-area/upload-area-util.scss"
   }
 }

package/_internal/custom-scrollbar/custom-scrollbar.module.scss

@@ -1,54 +0,0 @@
-@use '../../colors';
-
-// important используется здесь так как в storybook оригинальные стили почему-то не перекрываются
-$track-bound: 16px;
-
-.custom-scrollbar {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.custom-scrollbar :global(.os-scrollbar-handle) {
-  border-radius: 2px !important;
-  background: colors.$basic-gray12 !important;
-  &:hover,
-  &:global(.active) {
-    background: colors.$basic-gray24 !important;
-  }
-}
-
-.custom-scrollbar,
-.custom-scrollbar:global(.os-host-scrollbar-horizontal-hidden) {
-  > :global(.os-scrollbar-vertical) {
-    width: 12px !important;
-    padding: 0 !important;
-    top: $track-bound !important;
-    bottom: $track-bound !important;
-    :global(.os-scrollbar-handle) {
-      left: 4px !important;
-      width: 4px !important;
-      &::before {
-        left: -4px !important;
-        right: -4px !important;
-      }
-    }
-  }
-}
-
-.custom-scrollbar,
-.custom-scrollbar:global(.os-host-scrollbar-vertical-hidden) {
-  > :global(.os-scrollbar-horizontal) {
-    height: 12px !important;
-    padding: 0 !important;
-    left: $track-bound !important;
-    right: $track-bound !important;
-    :global(.os-scrollbar-handle) {
-      top: 4px !important;
-      bottom: 4px !important;
-      &::before {
-        top: -4px !important;
-        bottom: -4px !important;
-      }
-    }
-  }
-}