@invoicebox/ui 0.1.0-alpha.13 → 0.1.0-alpha.131

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export type TProps = {
+    value: string;
+    image?: string;
+    bgColor?: string;
+    size?: number;
+    id?: string;
+};
+export declare const QRCode: FC<TProps>;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QRCode = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _qrcode = _interopRequireDefault(require("qrcode.react"));
+var _excluded = ["image"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var QRCode = exports.QRCode = function QRCode(_ref) {
+  var image = _ref.image,
+    others = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_qrcode["default"], _extends({}, others, {
+    renderAs: "canvas",
+    level: "M",
+    imageSettings: image ? {
+      src: image,
+      height: 39,
+      width: 39,
+      excavate: false
+    } : undefined
+  }));
+};

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

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

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

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

package/dist/components/common/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,70 @@
+"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 && {}.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() { 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 Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
+  var children = _ref.children,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? '100%' : _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,13 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { Scrollbar } from '.';
+declare const meta: {
+    title: string;
+    component: React.FC<import(".").TProps>;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof Scrollbar>;
+export declare const Horisontall: StoryObj<typeof Scrollbar>;
+export declare const Blocks: StoryObj<typeof Scrollbar>;
+export declare const ByContainer: StoryObj<typeof Scrollbar>;

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

@@ -0,0 +1,47 @@
+"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 }; }
+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, 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.neutralFoggy
+  };
+};

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

@@ -0,0 +1,17 @@
+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;
+    borderRadius?: string;
+    padding?: string;
+};
+export declare const SecondaryButton: FC<TProps>;
+export {};

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

@@ -0,0 +1,54 @@
+"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", "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 && {}.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,
+    _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 = (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,
+    $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, {
+    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,39 @@
+"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(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',
+  component: _.SecondaryButton,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var args = {
+  disabled: false,
+  isLoading: false,
+  fullWidth: false,
+  onClick: (0, _addonActions.action)('click'),
+  children: 'Button',
+  size: 'small'
+};
+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,49 @@
+/// <reference types="react" />
+import { TSecondaryButtonPalette } from './palette';
+export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element?: "div" | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "p";
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "span";
+} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "button";
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "input";
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}), {
+    $isLoading?: boolean | undefined;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, 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;
+    $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

@@ -0,0 +1,52 @@
+"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 && {}.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:", ";cursor:pointer;padding:", ";color:", ";background-color:", ";transition:background-color 0.2s ease-in-out 0s;box-sizing:border-box;", " &:hover{", "}&:active{", "}", ""], function (_ref2) {
+  var $borderRadius = _ref2.$borderRadius;
+  return $borderRadius;
+}, function (_ref3) {
+  var $padding = _ref3.$padding;
+  return $padding;
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.text;
+}, function (_ref5) {
+  var $palette = _ref5.$palette;
+  return $palette.bg;
+}, function (_ref6) {
+  var $fullWidth = _ref6.$fullWidth;
+  return $fullWidth && (0, _styledComponents.css)(["width:100%;"]);
+}, function (_ref7) {
+  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({
+  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

@@ -1,6 +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

@@ -7,16 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 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 }; }
+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,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '100%' : _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
-  }, /*#__PURE__*/_react["default"].createElement(S.Inner, null));
+    $height: height,
+    $palette: mergedPalette
+  }, /*#__PURE__*/_react["default"].createElement(S.Inner, {
+    $palette: mergedPalette
+  }));
 };

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/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

@@ -1,6 +1,10 @@
 /// <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>, {
+import { TSkeletonPalette } from './palette';
+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;
-}>>;
-export declare const Inner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+    $palette: TSkeletonPalette;
+}>> & 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;