@invoicebox/ui 0.1.0-alpha.314 → 0.1.0-alpha.316

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/common/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, FC, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import React, { ButtonHTMLAttributes, FC, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { typography } from './typography';
 type TDivProps = {
     element?: 'div';
@@ -15,6 +15,9 @@ type THeadingProps = {
 type TButtonProps = {
     element: 'button';
 } & ButtonHTMLAttributes<HTMLButtonElement>;
+type TLabelProps = {
+    element: 'label';
+} & LabelHTMLAttributes<HTMLLabelElement>;
 type TInputProps = {
     element: 'input';
 } & InputHTMLAttributes<HTMLInputElement>;
@@ -24,7 +27,7 @@ type TTextAreaProps = {
 type TGeneralProps = {
     variant: keyof typeof typography;
 };
-export type TTypographyProps = TGeneralProps & (TDivProps | TParagraphProps | TSpanProps | THeadingProps | TButtonProps | TInputProps | TTextAreaProps);
+export type TTypographyProps = TGeneralProps & (TDivProps | TParagraphProps | TSpanProps | THeadingProps | TButtonProps | TLabelProps | TInputProps | TTextAreaProps);
 export declare const Typography: FC<TTypographyProps>;
 export type TInputWithTypographyProps = TGeneralProps & (TInputProps | TTextAreaProps);
 export declare const InputWithTypography: React.ForwardRefExoticComponent<TInputWithTypographyProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -81,6 +81,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     setActiveIndex = _useState4[1];
   var baseId = (0, _react.useId)();
   var listboxId = "".concat(baseId, "-listbox");
+  var inputId = "".concat(baseId, "-input");
   var activeOptionRef = (0, _react.useRef)(null);
   var palette = (0, _palette.useComponentPalette)('autocompleteDefaultOption');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
@@ -189,7 +190,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     required: required,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - _constants2.LABEL_PADDING : undefined
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - _constants2.LABEL_PADDING : undefined,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
@@ -197,6 +199,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     size: fieldSize,
     required: required
   }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

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.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { TProps as TInputLabelProps } from '../../InputLabel';
 import { TSizes } from '../../constants';
 import { CurrencyInputProps } from 'react-currency-input-field';
-export type TProps = Pick<CurrencyInputProps, 'allowNegativeValue' | 'onValueChange' | 'value' | 'defaultValue' | 'allowDecimals' | 'onBlur'> & Pick<TInputLabelProps, 'label' | 'disabled'> & {
+export type TProps = Pick<CurrencyInputProps, 'allowNegativeValue' | 'onValueChange' | 'value' | 'defaultValue' | 'allowDecimals' | 'onBlur' | 'id'> & Pick<TInputLabelProps, 'label' | 'disabled'> & {
     hasError?: boolean;
     required?: boolean;
 } & {

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

@@ -1,16 +1,18 @@
 "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.CoreCurrencyInput = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _InputLabel = require("../../InputLabel");
 var _useInputFocus2 = require("../../../../hooks/useInputFocus");
 var _styles = require("./styles");
 var _palette = require("../../../../palette");
 var _useInputStyles2 = require("../../_hooks/useInputStyles");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_ref) {
   var label = _ref.label,
     size = _ref.size,
@@ -28,7 +30,8 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     required = _ref$required === void 0 ? false : _ref$required,
     onBlur = _ref.onBlur,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onBlur: onBlur
     }),
@@ -36,6 +39,8 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
   var palette = (0, _palette.useComponentPalette)('pureInput');
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
       isHaveValue: !!value || typeof defaultValue === 'number',
       useModernStyles: useModernStyles,
@@ -55,8 +60,11 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(_styles.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_styles.StyledCurrencyInputFromLibrary, {
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     $palette: palette,
     $hasBorder: !useModernStyles || hasError,
     $paddingLeft: 18,

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

@@ -11,7 +11,7 @@ export type TProps = {
     dropdownProps?: Pick<TDropdownProps, 'isAutoPosition' | 'positionLeft' | 'positionRight' | 'positionVertical'>;
     useModernStyles?: boolean;
     required?: boolean;
-} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
+} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus' | 'id'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
     size?: TSizes;
 };
 export declare const DateInput: FC<TProps>;