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

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), {}, {

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

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { TSecondaryButtonPalette } from './palette';
-export declare const Inner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../Typography").TProps, {
+export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $isLoading?: boolean | undefined;
-}>> & Omit<import("react").FC<import("../Typography").TProps>, keyof import("react").Component<any, {}, any>>;
-export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+}>> & string & Omit<import("react").FC<import("../Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $palette: TSecondaryButtonPalette;
     $fullWidth: boolean;
     $disabled: boolean;
-}>>;
-export declare const LoaderWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+    $borderRadius: string;
+    $padding: string;
+}>> & string;
+export declare const LoaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -8,7 +8,7 @@ exports.Wrapper = exports.LoaderWrapper = exports.Inner = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../Typography");
 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 _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 Inner = exports.Inner = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Inner",
   componentId: "sc-ln4oiu-0"
@@ -19,25 +19,31 @@ var Inner = exports.Inner = (0, _styledComponents["default"])(_Typography.Typogr
 var Wrapper = exports.Wrapper = _styledComponents["default"].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:10px;cursor:pointer;padding:13px 24px;color:", ";background-color:", ";transition:background-color 0.2s ease-in-out 0s;box-sizing:border-box;", " &:hover{", "}&:active{", "}", ""], function (_ref2) {
-  var $palette = _ref2.$palette;
-  return $palette.text;
+})(["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 $palette = _ref3.$palette;
-  return $palette.bg;
+  var $padding = _ref3.$padding;
+  return $padding;
 }, function (_ref4) {
-  var $fullWidth = _ref4.$fullWidth;
-  return $fullWidth && (0, _styledComponents.css)(["width:100%;"]);
+  var $palette = _ref4.$palette;
+  return $palette.text;
 }, function (_ref5) {
-  var $disabled = _ref5.$disabled,
-    $palette = _ref5.$palette;
-  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgHover);
+  var $palette = _ref5.$palette;
+  return $palette.bg;
 }, function (_ref6) {
-  var $disabled = _ref6.$disabled,
-    $palette = _ref6.$palette;
-  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgActive);
+  var $fullWidth = _ref6.$fullWidth;
+  return $fullWidth && (0, _styledComponents.css)(["width:100%;"]);
 }, function (_ref7) {
-  var $disabled = _ref7.$disabled;
+  var $disabled = _ref7.$disabled,
+    $palette = _ref7.$palette;
+  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgHover);
+}, function (_ref8) {
+  var $disabled = _ref8.$disabled,
+    $palette = _ref8.$palette;
+  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgActive);
+}, function (_ref9) {
+  var $disabled = _ref9.$disabled;
   return $disabled && (0, _styledComponents.css)(["pointer-events:none;", "{opacity:0.5;}"], Inner);
 });
 var LoaderWrapper = exports.LoaderWrapper = _styledComponents["default"].div.withConfig({

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

@@ -9,8 +9,8 @@ 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 && 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 _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 Skeleton = exports.Skeleton = function Skeleton(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width,

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import type { StoryObj } from '@storybook/react';
 import { Skeleton } from '.';
 declare const meta: {
     title: string;
-    component: import("react").FC<import(".").TProps>;
+    component: React.FC<import(".").TProps>;
     tags: string[];
 };
 export default meta;

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

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ByOwnSize = exports.ByContainer = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var meta = {
   title: 'common/Skeleton',
   component: _.Skeleton,
@@ -13,12 +15,12 @@ var meta = {
 var _default = exports["default"] = meta;
 var ByContainer = exports.ByContainer = {
   render: function render(props) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         width: 200,
         height: 100
       }
-    }, /*#__PURE__*/React.createElement(_.Skeleton, props));
+    }, /*#__PURE__*/_react["default"].createElement(_.Skeleton, props));
   }
 };
 var ByOwnSize = exports.ByOwnSize = {

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { TSkeletonPalette } from './palette';
-export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+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>, {
     $width: string;
     $height: string;
     $palette: TSkeletonPalette;
-}>>;
-export declare const Inner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}>> & string;
+export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $palette: TSkeletonPalette;
-}>>;
+}>> & string;

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.Inner = 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 && 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 _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 shine = (0, _styledComponents.keyframes)(["0%{left:calc(0% - 200px);}100%{left:calc(100% + 200px);}"]);
 var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__Wrapper",

package/dist/components/common/Toast/docs.stories.d.ts

@@ -0,0 +1,6 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+export declare const Installation: StoryObj;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Installation = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
+var _Typography = require("../Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'common/Toast'
+};
+var _default = exports["default"] = meta;
+var Installation = exports.Installation = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      variant: "bodyL"
+    }, /*#__PURE__*/_react["default"].createElement(_markdownToJsx["default"], 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/components/common/Toast/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const toast: {
+    error: (message: string) => void;
+    success: (message: string) => void;
+};
+export declare const ToastContainer: FC;

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

@@ -0,0 +1,39 @@
+"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.toast = exports.ToastContainer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../palette");
+var _reactToastify = require("react-toastify");
+var _Typography = require("../Typography");
+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 toast = exports.toast = {
+  error: function error(message) {
+    _reactToastify.toast.error(function () {
+      return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+        variant: "bodyMRegular"
+      }, message);
+    });
+  },
+  success: function success(message) {
+    _reactToastify.toast.success(function () {
+      return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+        variant: "bodyMRegular"
+      }, message);
+    });
+  }
+};
+var ToastContainer = exports.ToastContainer = function ToastContainer() {
+  var palette = (0, _palette.useComponentPalette)('toast');
+  return /*#__PURE__*/_react["default"].createElement(S.Container, {
+    autoClose: 3000,
+    position: "bottom-right",
+    $palette: palette
+  });
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { ToastContainer } from '.';
+import 'react-toastify/dist/ReactToastify.css';
+declare const meta: {
+    title: string;
+    component: React.FC<{}>;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof ToastContainer>;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+require("react-toastify/dist/ReactToastify.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'common/Toast',
+  component: _.ToastContainer,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_.ToastContainer, null), /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        _.toast.success('Success');
+      }
+    }, "Success"), /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        _.toast.error('Error');
+      }
+    }, "Error"));
+  }
+};

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

@@ -0,0 +1,7 @@
+import { TAbstractPalette } from '../../../palette';
+export type TToastPalette = {
+    bg: string;
+    text: string;
+    shadow: string;
+};
+export declare const generateToastPalette: (abstractPalette: TAbstractPalette) => TToastPalette;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateToastPalette = void 0;
+var generateToastPalette = exports.generateToastPalette = function generateToastPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.base,
+    text: abstractPalette.primary,
+    shadow: abstractPalette.primary
+  };
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TToastPalette } from './palette';
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    $palette: TToastPalette;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+var _reactToastify = require("react-toastify");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _breakpoints = require("../../../breakpoints");
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Container = exports.Container = (0, _styledComponents["default"])(_reactToastify.ToastContainer).withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-dzgrj6-0"
+})(["width:auto;max-width:407px;z-index:999999999;.Toastify__toast{padding:0;border-radius:10px;background-color:", ";box-shadow:0px 10px 30px ", ";color:", ";min-height:54px;@media ", "{min-height:38px;}}.Toastify__toast-body{padding:17px 30px;@media ", "{padding:10px;}}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.bg;
+}, function (_ref2) {
+  var $palette = _ref2.$palette;
+  return (0, _hexToRgba["default"])($palette.shadow, 0.1);
+}, function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.text;
+}, _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm);

package/dist/components/common/Typography/docs.stories.js

@@ -4,17 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Installation = void 0;
-var _ = require(".");
+var _react = _interopRequireDefault(require("react"));
 var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _index = require("./index");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var meta = {
   title: 'common/Typography'
 };
 var _default = exports["default"] = meta;
 var Installation = exports.Installation = {
   render: function render() {
-    return /*#__PURE__*/React.createElement(_.Typography, {
+    return /*#__PURE__*/_react["default"].createElement(_index.Typography, {
       variant: "bodyL"
-    }, /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n### \u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043E\u0432\n\n\u0427\u0442\u043E\u0431\u044B \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u044B\u0435 \u0444\u0430\u0439\u043B\u044B \u0448\u0440\u0438\u0444\u0442\u043E\u0432, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 `TypographyGlobalStyle`. \n\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0434\u043E\u043B\u0436\u0435\u043D \u0432\u044B\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043E\u0434\u0438\u043D \u0440\u0430\u0437. \u042D\u043B\u0435\u043C\u0435\u043D\u0442 \u0434\u043E\u043B\u0436\u0435\u043D \u043D\u0430\u0445\u043E\u0434\u0438\u0442\u044C\u0441\u044F \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u0432\u0441\u0435 \u0432\u0440\u0435\u043C\u044F, \n\u043F\u043E\u044D\u0442\u043E\u043C\u0443 \u0446\u0435\u043B\u0435\u0441\u043E\u043E\u0431\u0440\u0430\u0437\u043D\u043E \u0435\u0433\u043E \u0440\u0430\u0441\u043F\u043E\u043B\u043E\u0436\u0438\u0442\u044C \u043D\u0430 \u0441\u0430\u043C\u043E\u043C \u0432\u0435\u0440\u0445\u043D\u0435\u043C \u0443\u0440\u043E\u0432\u043D\u0435. \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440 \u0432 \u043A\u043E\u0440\u043D\u0435\u0432\u043E\u043C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435, \n\u043A\u043E\u0442\u043E\u0440\u044B\u0439, \u043A\u0430\u043A \u043F\u0440\u0430\u0432\u0438\u043B\u043E, \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442\u0441\u044F `App`.\n\n```ts\n<TypographyGlobalStyle />\n```\n"));
+    }, /*#__PURE__*/_react["default"].createElement(_markdownToJsx["default"], null, "\n### \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430\n\n\u0414\u043B\u044F \u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u044B \u043D\u0443\u0436\u043D\u043E \u043B\u043E\u043A\u0430\u043B\u044C\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0448\u0440\u0438\u0444\u0442 Roboto \u0436\u0438\u0440\u043D\u043E\u0441\u0442\u044C\u044E 400, 500, 700\n\n"));
   }
 };