@invoicebox/ui 0.1.0-alpha.313 → 0.1.0-alpha.315

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from 'react';
+type TPlacement = 'top' | 'bottom';
+export type TProps = {
+    overlay: ReactNode;
+    placement?: TPlacement;
+    gap?: number;
+};
+export declare const Tooltip: ({ overlay, placement, gap, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,60 @@
+"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.Tooltip = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _Typography = require("../Typography");
+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 && {}.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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var Tooltip = exports.Tooltip = function Tooltip(_ref) {
+  var overlay = _ref.overlay,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 8 : _ref$gap,
+    children = _ref.children;
+  var palette = (0, _palette.useComponentPalette)('tooltip');
+  var triggerRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    coords = _useState2[0],
+    setCoords = _useState2[1];
+  var show = (0, _react.useCallback)(function () {
+    var el = triggerRef.current;
+    if (!el || !overlay) return;
+    var rect = el.getBoundingClientRect();
+    setCoords({
+      top: placement === 'top' ? rect.top - gap : rect.bottom + gap,
+      left: rect.left + rect.width / 2
+    });
+  }, [overlay, placement, gap]);
+  var hide = (0, _react.useCallback)(function () {
+    return setCoords(null);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(S.Trigger, {
+    ref: triggerRef,
+    onMouseEnter: show,
+    onMouseLeave: hide,
+    onFocus: show,
+    onBlur: hide
+  }, children, coords && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(S.Overlay, {
+    $palette: palette,
+    $top: coords.top,
+    $left: coords.left,
+    $placement: placement
+  }, typeof overlay === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "captionRegular"
+  }, overlay) : overlay), document.body));
+};

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

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

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Top = exports.Bottom = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'common/Tooltip',
+  component: _.Tooltip,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Component = function Component(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: 80,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Tooltip, props, /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      border: '1px dashed #999',
+      padding: 8
+    }
+  }, "\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F")));
+};
+var Top = exports.Top = {
+  args: {
+    overlay: 'Подсказка сверху',
+    placement: 'top'
+  },
+  render: Component
+};
+var Bottom = exports.Bottom = {
+  args: {
+    overlay: 'Подсказка снизу',
+    placement: 'bottom'
+  },
+  render: Component
+};

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateTooltipPalette = void 0;
+var generateTooltipPalette = exports.generateTooltipPalette = function generateTooltipPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.base,
+    color: abstractPalette.primary,
+    shadow: '0px 8px 21px rgba(53, 63, 71, 0.16)'
+  };
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TTooltipPalette } from './palette';
+export declare const Trigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $palette: TTooltipPalette;
+    $top: number;
+    $left: number;
+    $placement: 'top' | 'bottom';
+}>> & string;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Trigger = exports.Overlay = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Trigger = exports.Trigger = _styledComponents["default"].span.withConfig({
+  displayName: "styles__Trigger",
+  componentId: "sc-153dwvc-0"
+})(["display:inline-flex;"]);
+var Overlay = exports.Overlay = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Overlay",
+  componentId: "sc-153dwvc-1"
+})(["position:fixed;z-index:9999;top:", "px;left:", "px;transform:", ";box-sizing:border-box;min-height:28px;padding:4px 6px;border-radius:10px;background-color:", ";color:", ";box-shadow:", ";pointer-events:none;max-width:240px;"], function (_ref) {
+  var $top = _ref.$top;
+  return $top;
+}, function (_ref2) {
+  var $left = _ref2.$left;
+  return $left;
+}, function (_ref3) {
+  var $placement = _ref3.$placement;
+  return $placement === 'top' ? 'translate(-50%, -100%)' : 'translate(-50%, 0)';
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.bg;
+}, function (_ref5) {
+  var $palette = _ref5.$palette;
+  return $palette.color;
+}, function (_ref6) {
+  var $palette = _ref6.$palette;
+  return $palette.shadow;
+});

package/dist/components/form/Checkbox/CheckIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/Checkbox/CheckIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 CheckIcon = exports.CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "12",
+    height: "11",
+    viewBox: "0 0 12 11",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.43158 10.0674C5.22406 10.3745 4.94736 10.5156 4.62744 10.5156C4.3075 10.5156 4.0481 10.3911 3.78006 10.0757L0.442444 6.19092C0.295471 6.0166 0.208984 5.79248 0.208984 5.58496C0.208984 5.14502 0.563507 4.82129 0.987183 4.82129C1.26389 4.82129 1.49734 4.9209 1.72217 5.19482L4.5842 8.63965L9.9624 0.430176C10.1526 0.147949 10.4034 0.00683594 10.6541 0.00683594C11.0778 0.00683594 11.4842 0.280762 11.4842 0.720703C11.4842 0.919922 11.3718 1.14404 11.2421 1.32666L5.43158 10.0674Z",
+    fill: "white"
+  }));
+};

package/dist/components/form/Checkbox/index.d.ts

@@ -0,0 +1,11 @@
+import React, { FC, InputHTMLAttributes } from 'react';
+export type TProps = InputHTMLAttributes<HTMLInputElement> & {
+    className?: string;
+    checked: boolean;
+    label?: string | React.ReactNode;
+    disabled?: boolean;
+    disabledText?: string;
+};
+export declare const Checkbox: FC<TProps>;
+declare const _default: React.NamedExoticComponent<TProps>;
+export default _default;

package/dist/components/form/Checkbox/index.js

@@ -0,0 +1,47 @@
+"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["default"] = exports.Checkbox = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Typography = require("../../common/Typography");
+var _Tooltip = require("../../common/Tooltip");
+var _palette = require("../../../palette");
+var S = _interopRequireWildcard(require("./styles"));
+var _excluded = ["disabled", "className", "checked", "disabledText", "label"];
+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); }
+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 Checkbox = exports.Checkbox = function Checkbox(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    disabledText = _ref.disabledText,
+    label = _ref.label,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var palette = (0, _palette.useComponentPalette)('checkbox');
+  var content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(S.HiddenCheckbox, _extends({
+      type: "checkbox",
+      disabled: disabled,
+      checked: checked
+    }, props)), /*#__PURE__*/_react["default"].createElement(S.StyledCheckbox, null, /*#__PURE__*/_react["default"].createElement(S.CheckboxIcon, null)));
+  }, [checked, disabled, props]);
+  return /*#__PURE__*/_react["default"].createElement(S.CheckboxLabel, {
+    $checked: checked,
+    $disabled: disabled,
+    $palette: palette,
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement(S.CheckboxContainer, null, disabled && disabledText ? /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, {
+    overlay: disabledText
+  }, content) : content), label && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "bodyMRegular"
+  }, label));
+};
+var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(Checkbox);

package/dist/components/form/Checkbox/index.stories.d.ts

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

package/dist/components/form/Checkbox/index.stories.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["default"] = exports.DisabledChecked = exports.Disabled = exports.Default = exports.Checked = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = require(".");
+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); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var meta = {
+  title: 'form/Checkbox',
+  component: _.Checkbox,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Component = function Component(props) {
+  var _useState = (0, _react.useState)(props.checked),
+    _useState2 = _slicedToArray(_useState, 2),
+    checked = _useState2[0],
+    setChecked = _useState2[1];
+  return /*#__PURE__*/_react["default"].createElement(_.Checkbox, _extends({}, props, {
+    checked: checked,
+    onChange: function onChange() {
+      return setChecked(function (prev) {
+        return !prev;
+      });
+    }
+  }));
+};
+var Default = exports.Default = {
+  args: {
+    checked: false,
+    label: 'Label'
+  },
+  render: Component
+};
+var Checked = exports.Checked = {
+  args: {
+    checked: true,
+    label: 'Label'
+  },
+  render: Component
+};
+var Disabled = exports.Disabled = {
+  args: {
+    checked: false,
+    disabled: true,
+    label: 'Label',
+    disabledText: 'Недоступно'
+  },
+  render: Component
+};
+var DisabledChecked = exports.DisabledChecked = {
+  args: {
+    checked: true,
+    disabled: true,
+    label: 'Label'
+  },
+  render: Component
+};

package/dist/components/form/Checkbox/palette.d.ts

@@ -0,0 +1,12 @@
+import { TAbstractPalette } from '../../../palette';
+export type TCheckboxPalette = {
+    labelColor: string;
+    mark: string;
+    borderDefault: string;
+    borderHover: string;
+    checkedBg: string;
+    checkedHoverBg: string;
+    disabledBg: string;
+    disabledBorder: string;
+};
+export declare const generateCheckboxPalette: (abstractPalette: TAbstractPalette) => TCheckboxPalette;

package/dist/components/form/Checkbox/palette.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCheckboxPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generateCheckboxPalette = exports.generateCheckboxPalette = function generateCheckboxPalette(abstractPalette) {
+  return {
+    labelColor: abstractPalette.primary,
+    mark: abstractPalette.base,
+    borderDefault: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3),
+    borderHover: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5),
+    checkedBg: abstractPalette.secondary,
+    checkedHoverBg: '#EDC743',
+    disabledBg: (0, _hexToRgba["default"])(abstractPalette.neutralBrutal, 0.3),
+    disabledBorder: (0, _hexToRgba["default"])(abstractPalette.neutralBrutal, 0.3)
+  };
+};

package/dist/components/form/Checkbox/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TCheckboxPalette } from './palette';
+export declare const CheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HiddenCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const CheckboxIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>> & string & Omit<(props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $checked: boolean;
+    $disabled: boolean;
+    $palette: TCheckboxPalette;
+}>> & string;

package/dist/components/form/Checkbox/styles.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCheckbox = exports.HiddenCheckbox = exports.CheckboxLabel = exports.CheckboxIcon = exports.CheckboxContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _CheckIcon = require("./CheckIcon");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var TRANSITION = 'all .2s ease-in-out';
+var BORDER_RADIUS_MIN = 4;
+var CheckboxContainer = exports.CheckboxContainer = _styledComponents["default"].div.withConfig({
+  displayName: "styles__CheckboxContainer",
+  componentId: "sc-11prdl0-0"
+})(["display:inline-block;vertical-align:middle;"]);
+var HiddenCheckbox = exports.HiddenCheckbox = _styledComponents["default"].input.withConfig({
+  displayName: "styles__HiddenCheckbox",
+  componentId: "sc-11prdl0-1"
+})(["display:none;"]);
+var CheckboxIcon = exports.CheckboxIcon = (0, _styledComponents["default"])(_CheckIcon.CheckIcon).withConfig({
+  displayName: "styles__CheckboxIcon",
+  componentId: "sc-11prdl0-2"
+})(["transition:", ";"], TRANSITION);
+var StyledCheckbox = exports.StyledCheckbox = _styledComponents["default"].div.withConfig({
+  displayName: "styles__StyledCheckbox",
+  componentId: "sc-11prdl0-3"
+})(["display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:", "px;transition:", ";"], BORDER_RADIUS_MIN, TRANSITION);
+var getStylesCheckbox = function getStylesCheckbox(palette, disabled, checked) {
+  if (disabled) {
+    if (checked) {
+      return "background-color: ".concat(palette.disabledBg, "; border: none");
+    }
+    return "border: 1px solid ".concat(palette.disabledBorder);
+  }
+  if (checked) {
+    return "background-color: ".concat(palette.checkedBg, "; border: none");
+  }
+  return "border: 1px solid ".concat(palette.borderDefault);
+};
+var getHoverStylesCheckbox = function getHoverStylesCheckbox(palette, disabled, checked) {
+  if (disabled) {
+    if (checked) {
+      return "background-color: ".concat(palette.disabledBg, "; border: none");
+    }
+    return "border: 1px solid ".concat(palette.disabledBg);
+  }
+  if (checked) {
+    return "background-color: ".concat(palette.checkedHoverBg, "; border: none");
+  }
+  return "border: 1px solid ".concat(palette.borderHover);
+};
+var CheckboxLabel = exports.CheckboxLabel = _styledComponents["default"].label.withConfig({
+  displayName: "styles__CheckboxLabel",
+  componentId: "sc-11prdl0-4"
+})(["display:flex;align-items:center;grid-column-gap:10px;user-select:none;width:fit-content;cursor:pointer;color:", ";", "{", ";", "{opacity:", ";}}&:hover{", "{", ";}}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.labelColor;
+}, StyledCheckbox, function (_ref2) {
+  var $checked = _ref2.$checked,
+    $disabled = _ref2.$disabled,
+    $palette = _ref2.$palette;
+  return getStylesCheckbox($palette, $disabled, $checked);
+}, CheckboxIcon, function (_ref3) {
+  var $checked = _ref3.$checked;
+  return $checked ? 1 : 0;
+}, StyledCheckbox, function (_ref4) {
+  var $checked = _ref4.$checked,
+    $disabled = _ref4.$disabled,
+    $palette = _ref4.$palette;
+  return getHoverStylesCheckbox($palette, $disabled, $checked);
+});

package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.js

@@ -58,7 +58,7 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     size: fieldSize
   }, /*#__PURE__*/_react["default"].createElement(_styles.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_styles.StyledCurrencyInputFromLibrary, {
     $palette: palette,
-    $hasBorder: !useModernStyles,
+    $hasBorder: !useModernStyles || hasError,
     $paddingLeft: 18,
     $paddingRight: 18,
     $borderRadius: 10,

package/dist/components/form/Select/components/MultipleValue/index.d.ts

@@ -0,0 +1,9 @@
+import { TOption } from '../..';
+import { TProps as TChipProps } from '../../../../common/Chip';
+export type TProps<TValue> = {
+    selectedOptions: TOption<TValue>[];
+    onRemove: (value: TValue) => void;
+    collapse?: boolean;
+    chipProps?: Partial<Omit<TChipProps, 'label'>>;
+};
+export declare const MultipleValue: <TValue extends string | number>({ selectedOptions, onRemove, collapse, chipProps, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/Select/components/MultipleValue/index.js

@@ -0,0 +1,129 @@
+"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.MultipleValue = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../../../palette");
+var _Chip = require("../../../../common/Chip");
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var CHIP_SIZE = 'xs';
+var MultipleValue = exports.MultipleValue = function MultipleValue(_ref) {
+  var _chipProps$color, _chipProps$bgColor, _chipProps$size;
+  var selectedOptions = _ref.selectedOptions,
+    onRemove = _ref.onRemove,
+    _ref$collapse = _ref.collapse,
+    collapse = _ref$collapse === void 0 ? false : _ref$collapse,
+    chipProps = _ref.chipProps;
+  var palette = (0, _palette.useComponentPalette)('select');
+  var chipColor = (_chipProps$color = chipProps === null || chipProps === void 0 ? void 0 : chipProps.color) !== null && _chipProps$color !== void 0 ? _chipProps$color : palette.tagColor;
+  var chipBgColor = (_chipProps$bgColor = chipProps === null || chipProps === void 0 ? void 0 : chipProps.bgColor) !== null && _chipProps$bgColor !== void 0 ? _chipProps$bgColor : palette.tagBg;
+  var chipSize = (_chipProps$size = chipProps === null || chipProps === void 0 ? void 0 : chipProps.size) !== null && _chipProps$size !== void 0 ? _chipProps$size : CHIP_SIZE;
+  var wrapperRef = (0, _react.useRef)(null);
+  var tagRefs = (0, _react.useRef)([]);
+  var counterRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(selectedOptions.length),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
+  var handleRemove = (0, _react.useCallback)(function (event, value) {
+    event.preventDefault();
+    event.stopPropagation();
+    onRemove(value);
+  }, [onRemove]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!collapse) {
+      setVisibleCount(selectedOptions.length);
+      return undefined;
+    }
+    var wrapper = wrapperRef.current;
+    if (!wrapper) return undefined;
+    var recalculate = function recalculate() {
+      var _counterRef$current;
+      var total = selectedOptions.length;
+      var containerWidth = wrapper.clientWidth;
+      var widths = tagRefs.current.slice(0, total).map(function (el) {
+        return (el === null || el === void 0 ? void 0 : el.offsetWidth) || 0;
+      });
+      var counterWidth = ((_counterRef$current = counterRef.current) === null || _counterRef$current === void 0 ? void 0 : _counterRef$current.offsetWidth) || 0;
+      var countFitting = function countFitting(reserve) {
+        var used = 0;
+        var count = 0;
+        for (var i = 0; i < total; i += 1) {
+          var width = widths[i] + (count > 0 ? S.TAGS_GAP : 0);
+          if (used + width <= containerWidth - reserve) {
+            used += width;
+            count += 1;
+          } else {
+            break;
+          }
+        }
+        return count;
+      };
+      var count = countFitting(0);
+      // если влезли не все теги, оставляем место под счётчик "+N"
+      if (count < total) {
+        count = Math.max(countFitting(counterWidth + S.TAGS_GAP), 1);
+      }
+      setVisibleCount(count);
+    };
+    recalculate();
+    var observer = new ResizeObserver(recalculate);
+    observer.observe(wrapper);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [collapse, selectedOptions]);
+  var safeVisibleCount = collapse ? visibleCount : selectedOptions.length;
+  var hiddenCount = selectedOptions.length - safeVisibleCount;
+  var hiddenStyle = {
+    position: 'absolute',
+    visibility: 'hidden',
+    pointerEvents: 'none'
+  };
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    ref: wrapperRef,
+    $collapse: collapse
+  }, selectedOptions.map(function (option, index) {
+    return /*#__PURE__*/_react["default"].createElement(S.ItemWrapper, {
+      key: option.value,
+      ref: function ref(el) {
+        tagRefs.current[index] = el;
+      },
+      style: collapse && index >= safeVisibleCount ? hiddenStyle : undefined
+    }, /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
+      size: chipSize,
+      color: chipColor,
+      bgColor: chipBgColor,
+      label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(S.TagLabel, {
+        variant: "smallMedium"
+      }, option.label), /*#__PURE__*/_react["default"].createElement(S.TagRemove, {
+        type: "button",
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        },
+        onClick: function onClick(event) {
+          return handleRemove(event, option.value);
+        }
+      }, "\xD7"))
+    }));
+  }), collapse && /*#__PURE__*/_react["default"].createElement(S.ItemWrapper, {
+    ref: counterRef,
+    style: hiddenCount > 0 ? undefined : hiddenStyle
+  }, /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
+    size: chipSize,
+    color: chipColor,
+    bgColor: chipBgColor,
+    label: "+".concat(hiddenCount)
+  })));
+};