@invoicebox/ui 0.1.0-alpha.31 → 0.1.0-alpha.311

package/dist/esm/components/common/Flag/components/UnknownFlag/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+export var UnknownFlag = function UnknownFlag() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "22",
+    height: "16",
+    viewBox: "0 0 22 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "22",
+    height: "16",
+    rx: "2",
+    fill: "#353F47",
+    fillOpacity: "0.4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.1816 9.59766H10.0918C10.0957 9.22266 10.1289 8.91602 10.1914 8.67773C10.2578 8.43555 10.3652 8.21484 10.5137 8.01562C10.6621 7.81641 10.8594 7.58984 11.1055 7.33594C11.2852 7.15234 11.4492 6.98047 11.5977 6.82031C11.75 6.65625 11.873 6.48047 11.9668 6.29297C12.0605 6.10156 12.1074 5.87305 12.1074 5.60742C12.1074 5.33789 12.0586 5.10547 11.9609 4.91016C11.8672 4.71484 11.7266 4.56445 11.5391 4.45898C11.3555 4.35352 11.127 4.30078 10.8535 4.30078C10.627 4.30078 10.4121 4.3418 10.209 4.42383C10.0059 4.50586 9.8418 4.63281 9.7168 4.80469C9.5918 4.97266 9.52734 5.19336 9.52344 5.4668H8.43945C8.44727 5.02539 8.55664 4.64648 8.76758 4.33008C8.98242 4.01367 9.27148 3.77148 9.63477 3.60352C9.99805 3.43555 10.4043 3.35156 10.8535 3.35156C11.3496 3.35156 11.7715 3.44141 12.1191 3.62109C12.4707 3.80078 12.7383 4.05859 12.9219 4.39453C13.1055 4.72656 13.1973 5.12109 13.1973 5.57812C13.1973 5.92969 13.125 6.25391 12.9805 6.55078C12.8398 6.84375 12.6582 7.11914 12.4355 7.37695C12.2129 7.63477 11.9766 7.88086 11.7266 8.11523C11.5117 8.31445 11.3672 8.53906 11.293 8.78906C11.2188 9.03906 11.1816 9.30859 11.1816 9.59766ZM10.0449 11.4551C10.0449 11.2793 10.0996 11.1309 10.209 11.0098C10.3184 10.8887 10.4766 10.8281 10.6836 10.8281C10.8945 10.8281 11.0547 10.8887 11.1641 11.0098C11.2734 11.1309 11.3281 11.2793 11.3281 11.4551C11.3281 11.623 11.2734 11.7676 11.1641 11.8887C11.0547 12.0098 10.8945 12.0703 10.6836 12.0703C10.4766 12.0703 10.3184 12.0098 10.209 11.8887C10.0996 11.7676 10.0449 11.623 10.0449 11.4551Z",
+    fill: "#FAFAFA"
+  }));
+};

package/dist/esm/components/common/Flag/components/UnknownFlag/index.stories.js

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

package/dist/esm/components/common/Flag/components/UzbFlag/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+export var UzbFlag = function UzbFlag() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "22",
+    height: "16",
+    viewBox: "0 0 22 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "22",
+    height: "16",
+    rx: "2",
+    fill: "#F93939"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 12H22V16H0V12Z",
+    fill: "#00B731"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0H22V4H0V0Z",
+    fill: "#03BCDB"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 5.44444H22V11H0V5.44444ZM5.2381 4.23889C5.07467 4.3 4.89762 4.33333 4.71429 4.33333C3.84686 4.33333 3.14286 3.58667 3.14286 2.66667C3.14286 1.74667 3.84686 1 4.71429 1C4.89762 1 5.07467 1.03333 5.2381 1.09444C4.62733 1.32333 4.19048 1.94111 4.19048 2.66667C4.19048 3.39222 4.62733 4.01111 5.2381 4.23889Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.5",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6 2H7.2V3H6V2ZM7.2 1H8.4V2H7.2V1ZM8.4 2H9.6V3H8.4V2ZM9.6 1H10.8V2H9.6V1ZM10.8 2H12V3H10.8V2ZM9.6 3H10.8V4H9.6V3ZM7.2 3H8.4V4H7.2V3Z",
+    fill: "#1A47B8"
+  }));
+};

package/dist/esm/components/common/Flag/components/UzbFlag/index.stories.js

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

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import * as S from './styles';
+import { RusFlag } from './components/RusFlag';
+import { KazFlag } from './components/KazFlag';
+import { BlrFlag } from './components/BlrFlag';
+import { AzeFlag } from './components/AzeFlag';
+import { ArmFlag } from './components/ArmFlag';
+import { KgzFlag } from './components/KgzFlag';
+import { MdaFlag } from './components/MdaFlag';
+import { TjkFlag } from './components/TjkFlag';
+import { UzbFlag } from './components/UzbFlag';
+import { ChnFlag } from './components/ChnFlag';
+import { EngFlag } from './components/EngFlag';
+import { EspFlag } from './components/EspFlag';
+import { UnknownFlag } from './components/UnknownFlag';
+var flagKeys = ['RUS', 'BLR', 'KAZ', 'AZE', 'ARM', 'KGZ', 'MDA', 'TJK', 'UZB', 'CHN', 'ENG', 'ESP', 'UNKNOWN'];
+var map = {
+  RUS: /*#__PURE__*/React.createElement(RusFlag, null),
+  KAZ: /*#__PURE__*/React.createElement(KazFlag, null),
+  BLR: /*#__PURE__*/React.createElement(BlrFlag, null),
+  AZE: /*#__PURE__*/React.createElement(AzeFlag, null),
+  ARM: /*#__PURE__*/React.createElement(ArmFlag, null),
+  KGZ: /*#__PURE__*/React.createElement(KgzFlag, null),
+  MDA: /*#__PURE__*/React.createElement(MdaFlag, null),
+  TJK: /*#__PURE__*/React.createElement(TjkFlag, null),
+  UZB: /*#__PURE__*/React.createElement(UzbFlag, null),
+  CHN: /*#__PURE__*/React.createElement(ChnFlag, null),
+  ENG: /*#__PURE__*/React.createElement(EngFlag, null),
+  ESP: /*#__PURE__*/React.createElement(EspFlag, null),
+  UNKNOWN: /*#__PURE__*/React.createElement(UnknownFlag, null)
+};
+export var Flag = function Flag(_ref) {
+  var flag = _ref.flag,
+    isSmall = _ref.isSmall;
+  return /*#__PURE__*/React.createElement(S.FlagWrapper, {
+    $isSmall: isSmall
+  }, map[flag]);
+};
+Flag.flags = flagKeys;

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

@@ -0,0 +1,16 @@
+import { Flag } from '.';
+var meta = {
+  title: 'common/Flag',
+  component: Flag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  }
+};
+export default meta;
+export var Default = {
+  args: {
+    flag: 'RUS',
+    isSmall: false
+  }
+};

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

@@ -0,0 +1,10 @@
+import styled, { css } from 'styled-components';
+var selectedFlagStyles = css(["height:16px;width:22px;border-radius:3px;"]);
+var listFlagStyles = css(["height:12px;width:17px;border-radius:2px;img{transform:scale(0.8);transform-origin:left top;}"]);
+export var FlagWrapper = styled.div.withConfig({
+  displayName: "styles__FlagWrapper",
+  componentId: "sc-1te2h7u-0"
+})(["box-shadow:0 1px 5px rgba(53,63,71,0.2);display:flex;justify-content:center;align-items:center;overflow:hidden;", ";"], function (_ref) {
+  var $isSmall = _ref.$isSmall;
+  return $isSmall ? listFlagStyles : selectedFlagStyles;
+});

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

@@ -0,0 +1,44 @@
+import React from 'react';
+var LogoDarkRu = function LogoDarkRu(_ref) {
+  var height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: height,
+    viewBox: "0 0 123 26",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M87.9 17.0945C82.4976 22.3368 75.0504 25.2916 67.6464 25.1547C60.2382 25.0884 52.9751 21.8905 47.9438 16.5518C47.6458 16.2393 47.6556 15.7427 47.9658 15.4419C48.2687 15.1484 48.7508 15.1558 49.05 15.4468C53.985 20.3072 60.8416 22.99 67.6391 22.8003C74.4421 22.6702 81.0519 19.7234 85.7059 14.8654C86.3032 14.2416 87.2899 14.2238 87.9092 14.8261C88.5284 15.4284 88.5461 16.4217 87.9482 17.046C87.9366 17.0583 87.9244 17.07 87.9122 17.0817L87.9 17.0945Z",
+    fill: "#FAD247"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M93.4352 5.32919C95.3636 5.32919 96.9324 6.90943 96.9324 8.85188C96.9324 10.7943 95.3636 12.3746 93.4352 12.3746C91.5068 12.3746 89.938 10.7943 89.938 8.85188C89.938 6.90943 91.5068 5.32919 93.4352 5.32919ZM93.4352 2.60645C90.0105 2.60645 87.2344 5.40287 87.2344 8.8525C87.2344 12.3021 90.0105 15.0986 93.4352 15.0986C96.8599 15.0986 99.636 12.3021 99.636 8.8525C99.636 5.40287 96.8599 2.60645 93.4352 2.60645Z",
+    fill: "#FAD247"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M0.855469 1.67725H3.86629V10.2648L10.111 1.67725H12.953V14.86H9.96168V6.29149L3.71575 14.86H0.855469V1.67725Z",
+    fill: "#353F47"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15.7734 4.72729H18.6721V8.68219H23.0463V4.72729H25.9633V14.8595H23.0463V11.074H18.6721V14.8595H15.7734V4.72729Z",
+    fill: "#353F47"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M38.125 11.9783C38.125 12.8949 37.7812 13.6046 37.0962 14.1062C36.4117 14.6084 35.389 14.8595 34.0305 14.8595H28.6641V4.72729H33.8068C35.0636 4.72729 36.0497 4.95629 36.7604 5.41489C37.471 5.87288 37.8257 6.51688 37.8257 7.34506C37.8257 7.84787 37.6977 8.28989 37.4436 8.67298C37.1882 9.05607 36.8225 9.35443 36.3484 9.56746C37.5314 9.96958 38.125 10.7726 38.125 11.9783ZM31.3391 8.88908H33.5454C34.5662 8.88908 35.0776 8.52502 35.0776 7.79691C35.0776 7.08108 34.5662 6.72316 33.5454 6.72316H31.3391V8.88908ZM35.3951 11.7524C35.3951 11.3632 35.2702 11.0771 35.0209 10.8954C34.7716 10.713 34.3791 10.6216 33.8434 10.6216H31.3391V12.863H33.7873C34.8594 12.8636 35.3951 12.4934 35.3951 11.7524Z",
+    fill: "#353F47"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M50.9844 4.72671H53.8831V10.753L58.7808 4.72671H61.4558V14.8589H58.5571V8.83262L53.6777 14.8589H50.9844V4.72671ZM52.725 0.715332H54.6315C54.6437 1.1549 54.7637 1.49686 54.9953 1.74243C55.2263 1.98677 55.5658 2.10955 56.015 2.10955C56.4642 2.10955 56.8092 1.98677 57.0529 1.74243C57.2961 1.49747 57.418 1.15551 57.418 0.715332H59.3623C59.3501 2.66147 58.2396 3.63515 56.0333 3.63515C53.8386 3.63454 52.7372 2.66147 52.725 0.715332Z",
+    fill: "#353F47"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M66.181 14.341C65.3259 13.8959 64.6598 13.2771 64.1789 12.4857C63.6999 11.695 63.4609 10.7974 63.4609 9.79304C63.4609 8.78866 63.6999 7.89111 64.1789 7.10037C64.6598 6.30903 65.3259 5.69142 66.181 5.2451C67.0331 4.8 67.9961 4.57715 69.0687 4.57715C70.128 4.57715 71.0526 4.8 71.8443 5.2451C72.6354 5.69081 73.2138 6.32806 73.574 7.15624L71.3116 8.38102C70.7881 7.45215 70.0336 6.9868 69.0505 6.9868C68.2898 6.9868 67.6596 7.23789 67.1605 7.74008C66.6613 8.24288 66.4133 8.9268 66.4133 9.79304C66.4133 10.6599 66.6613 11.3438 67.1605 11.846C67.6596 12.3482 68.2892 12.5993 69.0505 12.5993C70.047 12.5993 70.8003 12.1352 71.3116 11.2051L73.574 12.4483C73.2132 13.2519 72.6354 13.8799 71.8443 14.3318C71.0532 14.7836 70.128 15.0102 69.0687 15.0102C67.9961 15.0102 67.0331 14.7873 66.181 14.341Z",
+    fill: "#353F47"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M83.7876 6.01754C84.5086 6.41291 85.0687 6.96851 85.4612 7.68434C85.8537 8.39956 86.0487 9.22836 86.0487 10.1701C86.0487 11.1364 85.8159 11.9941 85.349 12.7406C84.8804 13.4878 84.2294 14.0655 83.3957 14.4731C82.5589 14.8807 81.6123 15.0852 80.5537 15.0852C78.7947 15.0852 77.4161 14.5173 76.4123 13.3809C75.4085 12.2446 74.9062 10.5778 74.9062 8.38053C74.9062 6.3466 75.3475 4.72339 76.2252 3.51212C77.1028 2.30085 78.4528 1.50643 80.2739 1.12948L85.0583 0.169922L85.4508 2.69315L81.2253 3.54097C80.0783 3.7669 79.2274 4.14323 78.6734 4.67059C78.1182 5.19857 77.7909 5.9451 77.6922 6.91203C78.1273 6.43439 78.6509 6.06727 79.2622 5.81003C79.8723 5.55341 80.5403 5.42388 81.2613 5.42388C82.2236 5.42388 83.0635 5.62156 83.7876 6.01754ZM82.376 12.0721C82.8295 11.5821 83.0574 10.9609 83.0574 10.2076C83.0574 9.442 82.8295 8.83299 82.376 8.38053C81.9195 7.92868 81.3198 7.70215 80.5713 7.70215C79.8107 7.70215 79.2006 7.92807 78.7393 8.38053C78.2767 8.83238 78.0469 9.442 78.0469 10.2076C78.0469 10.9731 78.2828 11.5987 78.7575 12.0813C79.2323 12.565 79.8345 12.8063 80.5713 12.8063C81.3198 12.8063 81.9195 12.562 82.376 12.0721Z",
+    fill: "#353F47"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M105.624 11.0176H104.108V14.8601H101.191V4.72729H104.108V8.66316H105.678L108.408 4.72729H111.512L107.997 9.5865L111.755 14.8595H108.316L105.624 11.0176Z",
+    fill: "#353F47"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M114.748 14.341C113.894 13.8959 113.228 13.2771 112.747 12.4857C112.266 11.695 112.027 10.7974 112.027 9.79304C112.027 8.78866 112.266 7.89111 112.747 7.10037C113.228 6.30903 113.894 5.69142 114.748 5.2451C115.602 4.8 116.563 4.57715 117.638 4.57715C118.697 4.57715 119.621 4.8 120.413 5.2451C121.204 5.69081 121.781 6.32806 122.142 7.15624L119.88 8.38102C119.357 7.45215 118.602 6.9868 117.618 6.9868C116.859 6.9868 116.229 7.23789 115.73 7.74008C115.231 8.24288 114.981 8.9268 114.981 9.79304C114.981 10.6599 115.231 11.3438 115.73 11.846C116.229 12.3482 116.859 12.5993 117.618 12.5993C118.615 12.5993 119.369 12.1352 119.88 11.2051L122.141 12.4483C121.78 13.2519 121.204 13.8799 120.413 14.3318C119.621 14.7836 118.696 15.0102 117.637 15.0102C116.563 15.0102 115.601 14.7873 114.748 14.341Z",
+    fill: "#353F47"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M44.3188 8.13887C45.5627 8.13887 46.5744 9.15799 46.5744 10.411C46.5744 11.664 45.5627 12.6831 44.3188 12.6831C43.0748 12.6831 42.0631 11.664 42.0631 10.411C42.0631 9.15799 43.0748 8.13887 44.3188 8.13887ZM44.3188 5.62793C41.6962 5.62793 39.5703 7.76929 39.5703 10.4116C39.5703 13.0539 41.6962 15.1953 44.3188 15.1953C46.9413 15.1953 49.0672 13.0539 49.0672 10.4116C49.0672 7.76929 46.9413 5.62793 44.3188 5.62793Z",
+    fill: "#353F47"
+  }));
+};
+export default LogoDarkRu;

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'
+  })
+};