@invoicebox/ui 0.1.0-alpha.6 → 0.1.0-alpha.61

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TInvoiceboxSpinnerPalette } from './palette';
+export type TProps = {
+    width?: string;
+    palette?: Partial<TInvoiceboxSpinnerPalette>;
+};
+export declare const InvoiceboxSpinner: FC<TProps>;

package/dist/components/common/InvoiceboxSpinner/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.InvoiceboxSpinner = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _palette = require("../../../palette");
+var S = _interopRequireWildcard(require("./styles"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && 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 }; }
+var InvoiceboxSpinner = exports.InvoiceboxSpinner = function InvoiceboxSpinner(_ref) {
+  var palette = _ref.palette,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width;
+  var mergedPalette = (0, _palette.useComponentPalette)('invoiceboxSpinner', palette);
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $width: width
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "100%",
+    viewBox: "0 0 99 51",
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].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["default"].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["default"].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/components/common/InvoiceboxSpinner/index.stories.d.ts

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

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

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

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

@@ -0,0 +1,6 @@
+import { TAbstractPalette } from '../../../palette';
+export type TInvoiceboxSpinnerPalette = {
+    leftEye: string;
+    rightEye: string;
+};
+export declare const generateInvoiceboxSpinnerPalette: (abstractPalette: TAbstractPalette) => TInvoiceboxSpinnerPalette;

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width: string;
+}>>;

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

@@ -0,0 +1,19 @@
+"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 && 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; }
+var leftEyeKeyframe = (0, _styledComponents.keyframes)(["from{transform:scale(1);}to{transform:scale(1.42);}"]);
+var rightEyeKeyframe = (0, _styledComponents.keyframes)(["from{transform:scale(1);}to{transform:scale(0.78);}"]);
+var Wrapper = exports.Wrapper = _styledComponents["default"].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/components/common/Scrollbar/index.d.ts

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

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

@@ -0,0 +1,69 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Scrollbar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactScrollbarsCustom = require("react-scrollbars-custom");
+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 _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); }
+var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
+  var children = _ref.children,
+    maxHeight = _ref.maxHeight;
+  var palette = (0, _palette.useComponentPalette)('scrollbar');
+  var props = (0, _react.useMemo)(function () {
+    return {
+      style: {
+        maxHeight: maxHeight,
+        minWidth: '100%',
+        maxWidth: '100%'
+      },
+      wrapperProps: {
+        style: {
+          right: '0px',
+          bottom: '0px'
+        }
+      },
+      contentProps: {
+        style: {
+          display: 'block'
+        }
+      },
+      thumbYProps: {
+        style: {
+          backgroundColor: palette.thumb
+        }
+      },
+      trackYProps: {
+        style: {
+          backgroundColor: 'transparent',
+          width: '6px',
+          height: 'calc(100% - 4px)',
+          top: '2px',
+          right: '2px'
+        }
+      },
+      thumbXProps: {
+        style: {
+          backgroundColor: palette.thumb
+        }
+      },
+      trackXProps: {
+        style: {
+          backgroundColor: 'transparent',
+          height: '6px',
+          width: 'calc(100% - 12px)',
+          left: '2px',
+          bottom: '2px'
+        }
+      }
+    };
+  }, [maxHeight, palette]);
+  return /*#__PURE__*/_react["default"].createElement(_reactScrollbarsCustom.Scrollbar, _extends({
+    translateContentSizesToHolder: true
+  }, props), children);
+};

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.InnerBlock = exports.Horisontall = exports.Default = void 0;
+var _ = require(".");
+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.createElement("div", {
+      style: {
+        width: 2000
+      }
+    }, longDummyText)
+  }
+};
+var InnerBlock = exports.InnerBlock = {
+  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"))
+  }
+};

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.neutralFoggy
+  };
+};

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

@@ -0,0 +1,15 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
+type TButtonProps = {
+    element?: 'button';
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+type TAnchorProps = {
+    element: 'a';
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export type TProps = (TButtonProps | TAnchorProps) & {
+    isLoading?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    className?: never;
+};
+export declare const SecondaryButton: FC<TProps>;
+export {};

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

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

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Link = exports.Default = void 0;
+var _ = require(".");
+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 _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',
+  component: _.SecondaryButton,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var args = {
+  disabled: false,
+  isLoading: false,
+  fullWidth: false,
+  onClick: (0, _addonActions.action)('click'),
+  children: 'Button'
+};
+var Default = exports.Default = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    element: 'button'
+  })
+};
+var Link = exports.Link = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    element: 'a',
+    href: 'https://google.com'
+  })
+};

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

@@ -0,0 +1,8 @@
+import { TAbstractPalette } from '../../../palette';
+export type TSecondaryButtonPalette = {
+    text: string;
+    bg: string;
+    bgHover: string;
+    bgActive: string;
+};
+export declare const generateSecondaryButtonPalette: (abstractPalette: TAbstractPalette) => TSecondaryButtonPalette;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateSecondaryButtonPalette = void 0;
+var generateSecondaryButtonPalette = exports.generateSecondaryButtonPalette = function generateSecondaryButtonPalette(abstractPalette) {
+  return {
+    text: abstractPalette.primary,
+    bg: abstractPalette.neutralUsual,
+    bgHover: abstractPalette.neutralHeavy,
+    bgActive: abstractPalette.neutralMassive
+  };
+};

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

@@ -0,0 +1,11 @@
+/// <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 & import("react").RefAttributes<HTMLInputElement>, {
+    $isLoading?: boolean | undefined;
+}>> & Omit<import("react").ForwardRefExoticComponent<import("../Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, 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>, {
+    $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>>;

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

@@ -0,0 +1,46 @@
+"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 = 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; }
+var Inner = exports.Inner = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__Inner",
+  componentId: "sc-ln4oiu-0"
+})(["visibility:", ";"], function (_ref) {
+  var $isLoading = _ref.$isLoading;
+  return $isLoading ? 'hidden' : 'visible';
+});
+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;
+}, function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.bg;
+}, function (_ref4) {
+  var $fullWidth = _ref4.$fullWidth;
+  return $fullWidth && (0, _styledComponents.css)(["width:100%;"]);
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled,
+    $palette = _ref5.$palette;
+  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgHover);
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled,
+    $palette = _ref6.$palette;
+  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgActive);
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled;
+  return $disabled && (0, _styledComponents.css)(["pointer-events:none;", "{opacity:0.5;}"], Inner);
+});
+var LoaderWrapper = exports.LoaderWrapper = _styledComponents["default"].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/components/common/Skeleton/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { TSkeletonPalette } from './palette';
+export type TProps = {
+    width?: string;
+    height?: string;
+    palette?: Partial<TSkeletonPalette>;
+};
+export declare const Skeleton: FC<TProps>;

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

@@ -0,0 +1,28 @@
+"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.Skeleton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../palette");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && 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 }; }
+var Skeleton = exports.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 = (0, _palette.useComponentPalette)('skeleton', palette);
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $width: width,
+    $height: height,
+    $palette: mergedPalette
+  }, /*#__PURE__*/_react["default"].createElement(S.Inner, {
+    $palette: mergedPalette
+  }));
+};

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ByOwnSize = exports.ByContainer = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/Skeleton',
+  component: _.Skeleton,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var ByContainer = exports.ByContainer = {
+  render: function render(props) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 200,
+        height: 100
+      }
+    }, /*#__PURE__*/React.createElement(_.Skeleton, props));
+  }
+};
+var ByOwnSize = exports.ByOwnSize = {
+  args: {
+    width: '200px',
+    height: '100px'
+  }
+};

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

@@ -0,0 +1,6 @@
+import { TAbstractPalette } from '../../../palette';
+export type TSkeletonPalette = {
+    bg: string;
+    flicker: string;
+};
+export declare const generateSkeletonPalette: (abstractPalette: TAbstractPalette) => TSkeletonPalette;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateSkeletonPalette = void 0;
+var generateSkeletonPalette = exports.generateSkeletonPalette = function generateSkeletonPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.neutralUsual,
+    flicker: abstractPalette.neutralLight
+  };
+};

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

@@ -0,0 +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>, {
+    $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>, {
+    $palette: TSkeletonPalette;
+}>>;