@invoicebox/ui 0.1.0-alpha.32 → 0.1.0-alpha.321

package/dist/components/common/PointsLoader/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PointsLoader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../palette");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var points = new Array(3).fill('').map(function (item, index) {
+  return index;
+});
+var PointsLoader = exports.PointsLoader = function PointsLoader() {
+  var palette = (0, _palette.useComponentPalette)('pointsLoader');
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, null, points.map(function (pointItem) {
+    return /*#__PURE__*/_react["default"].createElement(S.Point, {
+      key: pointItem,
+      $activeColor: palette.active,
+      $defaultColor: palette["default"]
+    });
+  }));
+};

package/dist/components/common/PointsLoader/index.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/react';
+import { PointsLoader } from '.';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof PointsLoader>;

package/dist/components/common/PointsLoader/index.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/PointsLoader',
+  component: _.PointsLoader,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {}
+};

package/dist/components/common/PointsLoader/palette.d.ts

@@ -0,0 +1,6 @@
+import { TAbstractPalette } from '../../../palette';
+export type TPointsLoaderPalette = {
+    active: string;
+    default: string;
+};
+export declare const generatePointsLoaderPalette: (abstractPalette: TAbstractPalette) => TPointsLoaderPalette;

package/dist/components/common/PointsLoader/palette.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatePointsLoaderPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generatePointsLoaderPalette = exports.generatePointsLoaderPalette = function generatePointsLoaderPalette(abstractPalette) {
+  return {
+    active: abstractPalette.primary,
+    "default": (0, _hexToRgba["default"])(abstractPalette.primary, 0.2)
+  };
+};

package/dist/components/common/PointsLoader/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Point: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $activeColor: string;
+    $defaultColor: string;
+}>> & string;

package/dist/components/common/PointsLoader/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Point = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-epi71s-0"
+})(["display:flex;align-items:center;gap:12px;height:18px;padding:6px;"]);
+var Point = exports.Point = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Point",
+  componentId: "sc-epi71s-1"
+})(["background-color:", ";@keyframes colorChange{0%,100%{background-color:", ";}33%{background-color:", ";}66%{background-color:", ";}}width:6px;height:6px;border-radius:50%;animation:colorChange 3s infinite;&:nth-child(2){animation-delay:1s;}&:nth-child(3){animation-delay:2s;}"], function (_ref) {
+  var $defaultColor = _ref.$defaultColor;
+  return $defaultColor;
+}, function (_ref2) {
+  var $defaultColor = _ref2.$defaultColor;
+  return $defaultColor;
+}, function (_ref3) {
+  var $activeColor = _ref3.$activeColor;
+  return $activeColor;
+}, function (_ref4) {
+  var $defaultColor = _ref4.$defaultColor;
+  return $defaultColor;
+});

package/dist/components/common/QRCode/index.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+export type TProps = {
+    value: string;
+    image?: string;
+    bgColor?: string;
+    fgColor?: string;
+    size?: number;
+    id?: string;
+    imageSettings?: {
+        src?: string;
+        height?: number;
+        width?: number;
+        excavate?: boolean;
+    };
+};
+export declare const QRCode: FC<TProps>;

package/dist/components/common/QRCode/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QRCode = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _qrcode = _interopRequireDefault(require("qrcode.react"));
+var _excluded = ["image"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var QRCode = exports.QRCode = function QRCode(_ref) {
+  var image = _ref.image,
+    others = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_qrcode["default"], _extends({}, others, {
+    renderAs: "canvas",
+    level: "M",
+    imageSettings: image ? _objectSpread({
+      src: image,
+      height: 39,
+      width: 39,
+      excavate: false
+    }, others.imageSettings) : undefined
+  }));
+};

package/dist/components/common/QRCode/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { QRCode, TProps } from '.';
+declare const meta: Meta<typeof QRCode>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/common/QRCode/index.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/QRCode',
+  component: _.QRCode,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    value: 'https://www.invoicebox.ru/ru/',
+    size: 132
+  }
+};

package/dist/components/common/ReadOnlyLabelValueField/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { TSizes } from '../../form/constants';
+export type TProps = {
+    label: string;
+    value?: string;
+    size?: TSizes;
+};
+export declare const ReadOnlyLabelValueField: FC<TProps>;

package/dist/components/common/ReadOnlyLabelValueField/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReadOnlyLabelValueField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _constants = require("../../form/constants");
+var _InputLabel = require("../../form/InputLabel");
+var _palette = require("../../../palette");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ReadOnlyLabelValueField = exports.ReadOnlyLabelValueField = function ReadOnlyLabelValueField(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'M' : _ref$size;
+  var _SIZE_PARAMS_MAP$size = _constants.SIZE_PARAMS_MAP[size],
+    paddingBottom = _SIZE_PARAMS_MAP$size.paddingBottom,
+    paddingTop = _SIZE_PARAMS_MAP$size.paddingTop,
+    variant = _SIZE_PARAMS_MAP$size.variant;
+  var palette = (0, _palette.useComponentPalette)('readOnlyLabelValueField');
+  return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
+    label: label
+  }, /*#__PURE__*/_react["default"].createElement(S.Value, {
+    $color: palette.value,
+    $paddingTop: paddingTop,
+    $paddingBottom: paddingBottom,
+    variant: variant
+  }, value));
+};

package/dist/components/common/ReadOnlyLabelValueField/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TProps } from '.';
+declare const meta: Meta<TProps>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/common/ReadOnlyLabelValueField/index.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/ReadOnlyLabelValueField',
+  component: _.ReadOnlyLabelValueField,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    label: 'Label',
+    value: 'Value',
+    size: 'L'
+  }
+};

package/dist/components/common/ReadOnlyLabelValueField/palette.d.ts

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TReadOnlyLabelValueFieldPalette = {
+    value: string;
+};
+export declare const generateReadOnlyLabelValueFieldPalette: (abstractPalette: TAbstractPalette) => TReadOnlyLabelValueFieldPalette;

package/dist/components/common/ReadOnlyLabelValueField/palette.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateReadOnlyLabelValueFieldPalette = void 0;
+var generateReadOnlyLabelValueFieldPalette = exports.generateReadOnlyLabelValueFieldPalette = function generateReadOnlyLabelValueFieldPalette(abstractPalette) {
+  return {
+    value: abstractPalette.primary
+  };
+};

package/dist/components/common/ReadOnlyLabelValueField/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Value: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
+    $paddingTop: number;
+    $paddingBottom: number;
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/ReadOnlyLabelValueField/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Value = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Value = exports.Value = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__Value",
+  componentId: "sc-630k3x-0"
+})(["padding-left:20px;padding-right:12px;padding-top:", "px;padding-bottom:", "px;color:", ";"], function (_ref) {
+  var $paddingTop = _ref.$paddingTop;
+  return $paddingTop;
+}, function (_ref2) {
+  var $paddingBottom = _ref2.$paddingBottom;
+  return $paddingBottom;
+}, function (_ref3) {
+  var $color = _ref3.$color;
+  return $color;
+});

package/dist/components/common/Scrollbar/index.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+export type TProps = {
+    children: ReactNode;
+    maxHeight?: number;
+    trackWidth?: number;
+    autoHeight?: boolean;
+};
+export declare const Scrollbar: FC<TProps>;

package/dist/components/common/Scrollbar/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Scrollbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _palette = require("../../../palette");
+var S = _interopRequireWildcard(require("./styles"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// CSS-скроллбар (убрали зависимость `react-custom-scrollbars-2`): нативный overflow + стилизованный
+// тонкий ползунок. Публичный API сохранён (maxHeight/trackWidth/autoHeight). autoHeight=true →
+// контейнер растёт по контенту до maxHeight, затем скроллится; autoHeight=false → высота 100% родителя.
+var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
+  var children = _ref.children,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? '100%' : _ref$maxHeight,
+    _ref$trackWidth = _ref.trackWidth,
+    trackWidth = _ref$trackWidth === void 0 ? 4 : _ref$trackWidth,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? true : _ref$autoHeight;
+  var palette = (0, _palette.useComponentPalette)('scrollbar');
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $maxHeight: maxHeight,
+    $trackWidth: trackWidth,
+    $thumb: palette.thumb,
+    $autoHeight: autoHeight
+  }, children);
+};

package/dist/components/common/Scrollbar/index.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { Scrollbar } from '.';
+declare const meta: {
+    title: string;
+    component: React.FC<import(".").TProps>;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof Scrollbar>;
+export declare const Horisontall: StoryObj<typeof Scrollbar>;
+export declare const Blocks: StoryObj<typeof Scrollbar>;
+export declare const ByContainer: StoryObj<typeof Scrollbar>;

package/dist/components/common/Scrollbar/index.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Horisontall = exports.Default = exports.ByContainer = exports.Blocks = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var meta = {
+  title: 'common/Scrollbar',
+  component: _.Scrollbar,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var longDummyText = Array(10).fill("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius\n    mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n    laborum.").join(' ');
+var Default = exports.Default = {
+  args: {
+    children: longDummyText,
+    maxHeight: 200
+  }
+};
+var Horisontall = exports.Horisontall = {
+  args: {
+    maxHeight: 200,
+    children: /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: 2000
+      }
+    }, longDummyText)
+  }
+};
+var Blocks = exports.Blocks = {
+  args: {
+    maxHeight: 200,
+    children: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"), /*#__PURE__*/_react["default"].createElement("div", null, "Some text"))
+  }
+};
+var ByContainer = exports.ByContainer = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: 200
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_.Scrollbar, _extends({
+      autoHeight: false
+    }, args), longDummyText));
+  }
+};

package/dist/components/common/Scrollbar/palette.d.ts

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TScrollbarPalette = {
+    thumb: string;
+};
+export declare const generateScrollbarPalette: (abstractPalette: TAbstractPalette) => TScrollbarPalette;

package/dist/components/common/Scrollbar/palette.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateScrollbarPalette = void 0;
+var generateScrollbarPalette = exports.generateScrollbarPalette = function generateScrollbarPalette(abstractPalette) {
+  return {
+    thumb: abstractPalette.neutralUsual
+  };
+};

package/dist/components/common/Scrollbar/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxHeight: number | string;
+    $trackWidth: number;
+    $thumb: string;
+    $autoHeight: boolean;
+}>> & string;

package/dist/components/common/Scrollbar/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1pl0pr3-0"
+})(["overflow-y:auto;overflow-x:hidden;", " scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar{width:", "px;height:", "px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;}"], function (_ref) {
+  var $autoHeight = _ref.$autoHeight,
+    $maxHeight = _ref.$maxHeight;
+  return $autoHeight ? (0, _styledComponents.css)(["max-height:", ";"], typeof $maxHeight === 'number' ? "".concat($maxHeight, "px") : $maxHeight) : (0, _styledComponents.css)(["height:100%;"]);
+}, function (_ref2) {
+  var $thumb = _ref2.$thumb;
+  return $thumb;
+}, function (_ref3) {
+  var $trackWidth = _ref3.$trackWidth;
+  return $trackWidth;
+}, function (_ref4) {
+  var $trackWidth = _ref4.$trackWidth;
+  return $trackWidth;
+}, function (_ref5) {
+  var $thumb = _ref5.$thumb;
+  return $thumb;
+});

package/dist/components/common/SecondaryButton/index.d.ts

@@ -1,6 +1,4 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
-import { TProps as TInvoiceboxSpinnerProps } from '../InvoiceboxSpinner';
-import { TSecondaryButtonPalette } from './palette';
 type TButtonProps = {
     element?: 'button';
 } & ButtonHTMLAttributes<HTMLButtonElement>;
@@ -12,8 +10,8 @@ export type TProps = (TButtonProps | TAnchorProps) & {
     fullWidth?: boolean;
     disabled?: boolean;
     className?: never;
-    palette?: Partial<TSecondaryButtonPalette>;
-    invoiceboxSpinnerProps?: Pick<TInvoiceboxSpinnerProps, 'palette'>;
+    borderRadius?: string;
+    padding?: string;
 };
 export declare const SecondaryButton: FC<TProps>;
 export {};

package/dist/components/common/SecondaryButton/index.js

@@ -9,13 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _InvoiceboxSpinner = require("../InvoiceboxSpinner");
 var _palette = require("../../../palette");
-var _excluded = ["element", "isLoading", "fullWidth", "disabled", "className", "palette", "invoiceboxSpinnerProps", "children"];
+var _excluded = ["element", "isLoading", "fullWidth", "disabled", "borderRadius", "padding", "className", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
   var _ref$element = _ref.element,
     element = _ref$element === void 0 ? 'button' : _ref$element,
@@ -25,12 +25,14 @@ var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? '10px' : _ref$borderRadius,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? '13px 24px' : _ref$padding,
     className = _ref.className,
-    palette = _ref.palette,
-    invoiceboxSpinnerProps = _ref.invoiceboxSpinnerProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var mergedPalette = (0, _palette.useComponentPalette)('secondaryButton', palette);
+  var palette = (0, _palette.useComponentPalette)('secondaryButton');
   var isDisabled = disabled || isLoading;
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
     as: element
@@ -38,12 +40,13 @@ var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
     $disabled: isDisabled
     /* отправляет аргумент, для чистоты на уровне html атрибутов, на логику не влияет */,
     disabled: element === 'button' ? isDisabled : undefined,
-    $palette: mergedPalette,
-    $fullWidth: fullWidth
-  }, rest), isLoading && /*#__PURE__*/_react["default"].createElement(S.LoaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_InvoiceboxSpinner.InvoiceboxSpinner, _extends({}, invoiceboxSpinnerProps, {
-    isSecondary: true,
+    $palette: palette,
+    $fullWidth: fullWidth,
+    $borderRadius: borderRadius,
+    $padding: padding
+  }, rest), isLoading && /*#__PURE__*/_react["default"].createElement(S.LoaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_InvoiceboxSpinner.InvoiceboxSpinner, {
     width: "32px"
-  }))), /*#__PURE__*/_react["default"].createElement(S.Inner, {
+  })), /*#__PURE__*/_react["default"].createElement(S.Inner, {
     element: "span",
     variant: "buttonM",
     $isLoading: isLoading

package/dist/components/common/SecondaryButton/index.stories.js

@@ -9,8 +9,8 @@ var _addonActions = require("@storybook/addon-actions");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var meta = {
   title: 'common/SecondaryButton',
@@ -23,7 +23,8 @@ var args = {
   isLoading: false,
   fullWidth: false,
   onClick: (0, _addonActions.action)('click'),
-  children: 'Button'
+  children: 'Button',
+  size: 'small'
 };
 var Default = exports.Default = {
   args: _objectSpread(_objectSpread({}, args), {}, {