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

package/dist/esm/components/common/InvoiceboxLogo/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import LogoDarkRu from './components/LogoDarkRu';
+export var InvoiceboxLogo = function InvoiceboxLogo(_ref) {
+  var height = _ref.height;
+  return /*#__PURE__*/React.createElement(LogoDarkRu, {
+    height: height
+  });
+};

package/dist/esm/components/common/InvoiceboxLogo/index.stories.js

@@ -0,0 +1,12 @@
+import { InvoiceboxLogo } from '.';
+var meta = {
+  title: 'common/InvoiceboxLogo',
+  component: InvoiceboxLogo,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    height: 30
+  }
+};

package/dist/esm/components/common/InvoiceboxSpinner/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useComponentPalette } from '../../../palette';
+import * as S from './styles';
+export var InvoiceboxSpinner = function InvoiceboxSpinner(_ref) {
+  var palette = _ref.palette,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width;
+  var mergedPalette = useComponentPalette('invoiceboxSpinner', palette);
+  return /*#__PURE__*/React.createElement(S.Wrapper, {
+    $width: width
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    viewBox: "0 0 99 51",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M57.7133 46.2284C53.4996 49.6836 47.955 51.3595 42.7575 50.9354C37.5451 50.5665 32.6961 48.0942 29.5896 44.4627C28.6805 43.4002 28.8405 41.8302 29.9467 40.9575C30.9185 40.1909 32.3196 40.2339 33.2567 40.971C38.8952 45.3988 47.1298 43.815 50.4422 39.1834C52.0805 36.8927 55.3418 36.3112 57.7268 37.8848C60.1117 39.4584 60.7172 42.5909 59.0788 44.8817C58.818 45.2465 58.5158 45.5678 58.1832 45.8437L57.7133 46.2284Z",
+    fill: mergedPalette.rightEye
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M94 22.5C94 32.062 86.0453 40 76 40C65.9547 40 58 32.062 58 22.5C58 12.938 65.9547 5 76 5C86.0453 5 94 12.938 94 22.5Z",
+    stroke: mergedPalette.rightEye,
+    strokeWidth: "10",
+    id: "right-eye"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M26 27.5C26 32.0754 22.0922 36 17 36C11.9078 36 8 32.0754 8 27.5C8 22.9246 11.9078 19 17 19C22.0922 19 26 22.9246 26 27.5Z",
+    stroke: mergedPalette.leftEye,
+    strokeWidth: "6",
+    id: "left-eye"
+  })));
+};

package/dist/esm/components/common/InvoiceboxSpinner/index.stories.js

@@ -0,0 +1,12 @@
+import { InvoiceboxSpinner } from '.';
+var meta = {
+  title: 'common/InvoiceboxSpinner',
+  component: InvoiceboxSpinner,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    width: '32px'
+  }
+};

package/dist/esm/components/common/InvoiceboxSpinner/palette.js

@@ -0,0 +1,6 @@
+export var generateInvoiceboxSpinnerPalette = function generateInvoiceboxSpinnerPalette(abstractPalette) {
+  return {
+    leftEye: abstractPalette.primary,
+    rightEye: abstractPalette.secondary
+  };
+};

package/dist/esm/components/common/InvoiceboxSpinner/styles.js

@@ -0,0 +1,10 @@
+import styled, { keyframes } from 'styled-components';
+var leftEyeKeyframe = keyframes(["from{transform:scale(1);}to{transform:scale(1.42);}"]);
+var rightEyeKeyframe = keyframes(["from{transform:scale(1);}to{transform:scale(0.78);}"]);
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-jawbt1-0"
+})(["width:", ";& #left-eye{animation:0.5s ease-in-out infinite alternate ", ";transform-origin:17px 28px;}& #right-eye{animation:0.5s ease-in-out infinite alternate ", ";transform-origin:76px 18px;}"], function (_ref) {
+  var $width = _ref.$width;
+  return $width;
+}, leftEyeKeyframe, rightEyeKeyframe);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as S from './styles';
+import { useComponentPalette } from '../../../palette';
+var points = new Array(3).fill('').map(function (item, index) {
+  return index;
+});
+export var PointsLoader = function PointsLoader() {
+  var palette = useComponentPalette('pointsLoader');
+  return /*#__PURE__*/React.createElement(S.Wrapper, null, points.map(function (pointItem) {
+    return /*#__PURE__*/React.createElement(S.Point, {
+      key: pointItem,
+      $activeColor: palette.active,
+      $defaultColor: palette["default"]
+    });
+  }));
+};

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

@@ -0,0 +1,10 @@
+import { PointsLoader } from '.';
+var meta = {
+  title: 'common/PointsLoader',
+  component: PointsLoader,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {}
+};

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

@@ -0,0 +1,7 @@
+import hexToRgba from '../../../utils/hexToRgba';
+export var generatePointsLoaderPalette = function generatePointsLoaderPalette(abstractPalette) {
+  return {
+    active: abstractPalette.primary,
+    "default": hexToRgba(abstractPalette.primary, 0.2)
+  };
+};

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-epi71s-0"
+})(["display:flex;align-items:center;gap:12px;height:18px;padding:6px;"]);
+export var Point = styled.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/esm/components/common/QRCode/index.js

@@ -0,0 +1,26 @@
+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); }
+var _excluded = ["image"];
+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; }
+import React from 'react';
+import QRCodeFromLibrary from 'qrcode.react';
+export var QRCode = function QRCode(_ref) {
+  var image = _ref.image,
+    others = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(QRCodeFromLibrary, _extends({}, others, {
+    renderAs: "canvas",
+    level: "M",
+    imageSettings: image ? _objectSpread({
+      src: image,
+      height: 39,
+      width: 39,
+      excavate: false
+    }, others.imageSettings) : undefined
+  }));
+};

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

@@ -0,0 +1,13 @@
+import { QRCode } from '.';
+var meta = {
+  title: 'common/QRCode',
+  component: QRCode,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    value: 'https://www.invoicebox.ru/ru/',
+    size: 132
+  }
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import * as S from './styles';
+import { SIZE_PARAMS_MAP } from '../../form/constants';
+import { InputLabel } from '../../form/InputLabel';
+import { useComponentPalette } from '../../../palette';
+export var 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 = SIZE_PARAMS_MAP[size],
+    paddingBottom = _SIZE_PARAMS_MAP$size.paddingBottom,
+    paddingTop = _SIZE_PARAMS_MAP$size.paddingTop,
+    variant = _SIZE_PARAMS_MAP$size.variant;
+  var palette = useComponentPalette('readOnlyLabelValueField');
+  return /*#__PURE__*/React.createElement(InputLabel, {
+    label: label
+  }, /*#__PURE__*/React.createElement(S.Value, {
+    $color: palette.value,
+    $paddingTop: paddingTop,
+    $paddingBottom: paddingBottom,
+    variant: variant
+  }, value));
+};

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

@@ -0,0 +1,14 @@
+import { ReadOnlyLabelValueField } from '.';
+var meta = {
+  title: 'common/ReadOnlyLabelValueField',
+  component: ReadOnlyLabelValueField,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    label: 'Label',
+    value: 'Value',
+    size: 'L'
+  }
+};

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

@@ -0,0 +1,5 @@
+export var generateReadOnlyLabelValueFieldPalette = function generateReadOnlyLabelValueFieldPalette(abstractPalette) {
+  return {
+    value: abstractPalette.primary
+  };
+};

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Typography } from '../Typography';
+export var Value = styled(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/esm/components/common/Scrollbar/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useComponentPalette } from '../../../palette';
+import * as S from './styles';
+// CSS-скроллбар (убрали зависимость `react-custom-scrollbars-2`): нативный overflow + стилизованный
+// тонкий ползунок. Публичный API сохранён (maxHeight/trackWidth/autoHeight). autoHeight=true →
+// контейнер растёт по контенту до maxHeight, затем скроллится; autoHeight=false → высота 100% родителя.
+export var 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 = useComponentPalette('scrollbar');
+  return /*#__PURE__*/React.createElement(S.Wrapper, {
+    $maxHeight: maxHeight,
+    $trackWidth: trackWidth,
+    $thumb: palette.thumb,
+    $autoHeight: autoHeight
+  }, children);
+};

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

@@ -0,0 +1,43 @@
+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); }
+import React from 'react';
+import { Scrollbar } from '.';
+var meta = {
+  title: 'common/Scrollbar',
+  component: Scrollbar,
+  tags: ['autodocs']
+};
+export 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(' ');
+export var Default = {
+  args: {
+    children: longDummyText,
+    maxHeight: 200
+  }
+};
+export var Horisontall = {
+  args: {
+    maxHeight: 200,
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 2000
+      }
+    }, longDummyText)
+  }
+};
+export var Blocks = {
+  args: {
+    maxHeight: 200,
+    children: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"), /*#__PURE__*/React.createElement("div", null, "Some text"))
+  }
+};
+export var ByContainer = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 200
+      }
+    }, /*#__PURE__*/React.createElement(Scrollbar, _extends({
+      autoHeight: false
+    }, args), longDummyText));
+  }
+};

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

@@ -0,0 +1,5 @@
+export var generateScrollbarPalette = function generateScrollbarPalette(abstractPalette) {
+  return {
+    thumb: abstractPalette.neutralUsual
+  };
+};

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

@@ -0,0 +1,21 @@
+import styled, { css } from 'styled-components';
+export var Wrapper = styled.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 ? css(["max-height:", ";"], typeof $maxHeight === 'number' ? "".concat($maxHeight, "px") : $maxHeight) : 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/esm/components/common/SecondaryButton/index.js

@@ -0,0 +1,44 @@
+var _excluded = ["element", "isLoading", "fullWidth", "disabled", "borderRadius", "padding", "className", "children"];
+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; }
+import React from 'react';
+import * as S from './styles';
+import { InvoiceboxSpinner } from '../InvoiceboxSpinner';
+import { useComponentPalette } from '../../../palette';
+export var SecondaryButton = function SecondaryButton(_ref) {
+  var _ref$element = _ref.element,
+    element = _ref$element === void 0 ? 'button' : _ref$element,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$fullWidth = _ref.fullWidth,
+    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,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var palette = useComponentPalette('secondaryButton');
+  var isDisabled = disabled || isLoading;
+  return /*#__PURE__*/React.createElement(S.Wrapper, _extends({
+    as: element
+    /* реализует disabled логику компонента */,
+    $disabled: isDisabled
+    /* отправляет аргумент, для чистоты на уровне html атрибутов, на логику не влияет */,
+    disabled: element === 'button' ? isDisabled : undefined,
+    $palette: palette,
+    $fullWidth: fullWidth,
+    $borderRadius: borderRadius,
+    $padding: padding
+  }, rest), isLoading && /*#__PURE__*/React.createElement(S.LoaderWrapper, null, /*#__PURE__*/React.createElement(InvoiceboxSpinner, {
+    width: "32px"
+  })), /*#__PURE__*/React.createElement(S.Inner, {
+    element: "span",
+    variant: "buttonM",
+    $isLoading: isLoading
+  }, children));
+};

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

@@ -0,0 +1,33 @@
+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(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); }
+import { SecondaryButton } from '.';
+import { action } from '@storybook/addon-actions';
+var meta = {
+  title: 'common/SecondaryButton',
+  component: SecondaryButton,
+  tags: ['autodocs']
+};
+export default meta;
+var args = {
+  disabled: false,
+  isLoading: false,
+  fullWidth: false,
+  onClick: action('click'),
+  children: 'Button',
+  size: 'small'
+};
+export var Default = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    element: 'button'
+  })
+};
+export var Link = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    element: 'a',
+    href: 'https://google.com'
+  })
+};

package/dist/esm/components/common/SecondaryButton/palette.js

@@ -0,0 +1,8 @@
+export var generateSecondaryButtonPalette = function generateSecondaryButtonPalette(abstractPalette) {
+  return {
+    text: abstractPalette.primary,
+    bg: abstractPalette.neutralUsual,
+    bgHover: abstractPalette.neutralHeavy,
+    bgActive: abstractPalette.neutralMassive
+  };
+};

package/dist/esm/components/common/SecondaryButton/styles.js

@@ -0,0 +1,44 @@
+import styled, { css } from 'styled-components';
+import { Typography } from '../Typography';
+import { reducedMotion } from '../../../utils/reducedMotion';
+export var Inner = styled(Typography).withConfig({
+  displayName: "styles__Inner",
+  componentId: "sc-ln4oiu-0"
+})(["visibility:", ";"], function (_ref) {
+  var $isLoading = _ref.$isLoading;
+  return $isLoading ? 'hidden' : 'visible';
+});
+export var Wrapper = styled.button.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-ln4oiu-1"
+})(["appearance:none;display:inline-block;text-decoration:none;text-align:center;position:relative;border:none;border-radius:", ";cursor:pointer;padding:", ";color:", ";background-color:", ";transition:background-color 0.2s ease-in-out 0s;box-sizing:border-box;", " &:hover{", "}&:active{", "}", " ", ""], function (_ref2) {
+  var $borderRadius = _ref2.$borderRadius;
+  return $borderRadius;
+}, function (_ref3) {
+  var $padding = _ref3.$padding;
+  return $padding;
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.text;
+}, function (_ref5) {
+  var $palette = _ref5.$palette;
+  return $palette.bg;
+}, function (_ref6) {
+  var $fullWidth = _ref6.$fullWidth;
+  return $fullWidth && css(["width:100%;"]);
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled,
+    $palette = _ref7.$palette;
+  return !$disabled && css(["background-color:", ";"], $palette.bgHover);
+}, function (_ref8) {
+  var $disabled = _ref8.$disabled,
+    $palette = _ref8.$palette;
+  return !$disabled && css(["background-color:", ";"], $palette.bgActive);
+}, function (_ref9) {
+  var $disabled = _ref9.$disabled;
+  return $disabled && css(["pointer-events:none;", "{opacity:0.5;}"], Inner);
+}, reducedMotion);
+export var LoaderWrapper = styled.div.withConfig({
+  displayName: "styles__LoaderWrapper",
+  componentId: "sc-ln4oiu-2"
+})(["position:absolute;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;"]);

package/dist/esm/components/common/Skeleton/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import * as S from './styles';
+import { useComponentPalette } from '../../../palette';
+export var Skeleton = function Skeleton(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '100%' : _ref$height,
+    palette = _ref.palette;
+  var mergedPalette = useComponentPalette('skeleton', palette);
+  return /*#__PURE__*/React.createElement(S.Wrapper, {
+    $width: width,
+    $height: height,
+    $palette: mergedPalette
+  }, /*#__PURE__*/React.createElement(S.Inner, {
+    $palette: mergedPalette
+  }));
+};

package/dist/esm/components/common/Skeleton/index.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Skeleton } from '.';
+var meta = {
+  title: 'common/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs']
+};
+export default meta;
+export var ByContainer = {
+  render: function render(props) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 200,
+        height: 100
+      }
+    }, /*#__PURE__*/React.createElement(Skeleton, props));
+  }
+};
+export var ByOwnSize = {
+  args: {
+    width: '200px',
+    height: '100px'
+  }
+};

package/dist/esm/components/common/Skeleton/palette.js

@@ -0,0 +1,6 @@
+export var generateSkeletonPalette = function generateSkeletonPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.neutralUsual,
+    flicker: abstractPalette.neutralLight
+  };
+};

package/dist/esm/components/common/Skeleton/styles.js

@@ -0,0 +1,29 @@
+import styled, { keyframes } from 'styled-components';
+import { reducedMotion } from '../../../utils/reducedMotion';
+var shine = keyframes(["0%{left:calc(0% - 200px);}100%{left:calc(100% + 200px);}"]);
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-mb3gd0-0"
+})(["width:", ";height:", ";border-radius:10px;overflow:hidden;position:relative;background:", ";"], function (_ref) {
+  var $width = _ref.$width;
+  return $width;
+}, function (_ref2) {
+  var $height = _ref2.$height;
+  return $height;
+}, function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.bg;
+});
+export var Inner = styled.div.withConfig({
+  displayName: "styles__Inner",
+  componentId: "sc-mb3gd0-1"
+})(["position:absolute;top:0;bottom:0;width:100px;background-image:linear-gradient( 90deg,", " 0px,", " 50px,", " 100px );animation:", " 3s infinite linear;", ""], function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.bg;
+}, function (_ref5) {
+  var $palette = _ref5.$palette;
+  return $palette.flicker;
+}, function (_ref6) {
+  var $palette = _ref6.$palette;
+  return $palette.bg;
+}, shine, reducedMotion);

package/dist/esm/components/common/Toast/docs.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import { Typography } from '../Typography';
+var meta = {
+  title: 'common/Toast'
+};
+export default meta;
+export var Installation = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Typography, {
+      variant: "bodyL"
+    }, /*#__PURE__*/React.createElement(Markdown, null, "\n### \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430\n\n\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430 [react-toastify](https://github.com/fkhadra/react-toastify).\n\u0414\u043B\u044F \u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u044B \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0441\u0442\u0438\u043B\u0438, \u0438 \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ToastContainer \u0432 \u0434\u0435\u0440\u0435\u0432\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432.\n\n```ts\nimport { ToastContainer, toast } from '@invoicebox/ui';\nimport 'react-toastify/dist/ReactToastify.css';\n\nconst App = () => {\n    return (\n        <div>\n            <ToastContainer />\n            <button\n                onClick={() => {\n                    toast.success('Success');\n                }}\n            >\n                Success\n            </button>\n            <button\n                onClick={() => {\n                    toast.error('Success');\n                }}\n            >\n                Error\n            </button>\n        </div>\n    );\n}\n```\n"));
+  }
+};

package/dist/esm/components/common/Toast/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import * as S from './styles';
+import { useComponentPalette } from '../../../palette';
+import { toast as libToast } from 'react-toastify';
+import { Typography } from '../Typography';
+// toastId по умолчанию выводится из текста: пока тост с таким id виден,
+// повторные вызовы с тем же сообщением игнорируются react-toastify —
+// одинаковые ошибки не стекаются в «бурю тостов»
+export var toast = {
+  error: function error(message, options) {
+    var _options$toastId;
+    libToast.error(function () {
+      return /*#__PURE__*/React.createElement(Typography, {
+        variant: "bodyMRegular"
+      }, message);
+    }, {
+      toastId: (_options$toastId = options === null || options === void 0 ? void 0 : options.toastId) !== null && _options$toastId !== void 0 ? _options$toastId : "error:".concat(message)
+    });
+  },
+  success: function success(message, options) {
+    var _options$toastId2;
+    libToast.success(function () {
+      return /*#__PURE__*/React.createElement(Typography, {
+        variant: "bodyMRegular"
+      }, message);
+    }, {
+      toastId: (_options$toastId2 = options === null || options === void 0 ? void 0 : options.toastId) !== null && _options$toastId2 !== void 0 ? _options$toastId2 : "success:".concat(message)
+    });
+  }
+};
+export var ToastContainer = function ToastContainer() {
+  var palette = useComponentPalette('toast');
+  return /*#__PURE__*/React.createElement(S.Container, {
+    autoClose: 3000,
+    position: "bottom-right",
+    $palette: palette
+  });
+};