@invoicebox/ui 0.1.0-alpha.32 → 0.1.0-alpha.321

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

@@ -0,0 +1,270 @@
+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; }
+import React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from 'react';
+import * as S from './styles';
+import { AutocompleteDefaultOption } from '../AutocompleteDefaultOption';
+import { Skeleton } from '../../../../common/Skeleton';
+import { useMobile } from '../../../../../hooks/useMedia';
+import { useInputFocus } from '../../../../../hooks/useInputFocus';
+import { useOutsideClick } from '../../../../../hooks/useOutsideClick';
+import { ErrorBoundary } from '../../../../common/ErrorBoundary';
+import { InputLabel } from '../../../InputLabel';
+import { PureInput } from '../../../PureInput';
+import { Dropdown } from '../../../../common/Dropdown';
+import { Scrollbar } from '../../../../common/Scrollbar';
+import { MODERN_STYLE_SIZE_PARAMS_MAP } from '../../../constants';
+import { useComponentPalette } from '../../../../../palette';
+import { LABEL_PADDING } from '../../../InputLabel/constants';
+import { useInputStyles } from '../../../_hooks/useInputStyles';
+import { ModernPlaceholder } from '../../../ModernPlaceholder';
+var DefaultSkeletonItem = function DefaultSkeletonItem() {
+  return /*#__PURE__*/React.createElement(S.DefaultSkeletonWrapper, null, /*#__PURE__*/React.createElement(Skeleton, {
+    height: "20px"
+  }));
+};
+var MAX_LIST_HEIGHT = 294;
+var AutocompleteInner = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var options = _ref.options,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    name = _ref.name,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    renderOption = _ref.renderOption,
+    children = _ref.children,
+    inputPaddingLeft = _ref.inputPaddingLeft,
+    _ref$listHeight = _ref.listHeight,
+    listHeight = _ref$listHeight === void 0 ? MAX_LIST_HEIGHT : _ref$listHeight,
+    hasError = _ref.hasError,
+    isLoading = _ref.isLoading,
+    optionsLoader = _ref.optionsLoader,
+    inputMaxLength = _ref.inputMaxLength,
+    _ref$isInputOnlyNumbe = _ref.isInputOnlyNumbers,
+    isInputOnlyNumbers = _ref$isInputOnlyNumbe === void 0 ? false : _ref$isInputOnlyNumbe,
+    size = _ref.size,
+    autoFocus = _ref.autoFocus,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    readOnly = _ref.readOnly,
+    _ref$usePadding = _ref.usePadding,
+    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding,
+    dropdownWidth = _ref.dropdownWidth,
+    _ref$useModernStyles = _ref.useModernStyles,
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    _ref$isDropdownDisabl = _ref.isDropdownDisabled,
+    isDropdownDisabled = _ref$isDropdownDisabl === void 0 ? false : _ref$isDropdownDisabl;
+  var isMobile = useMobile();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  // Активная (подсвеченная клавиатурой) опция для combobox-навигации ↑/↓/Enter/Esc.
+  var _useState3 = useState(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+  var baseId = useId();
+  var listboxId = "".concat(baseId, "-listbox");
+  var inputId = "".concat(baseId, "-input");
+  var activeOptionRef = useRef(null);
+  var palette = useComponentPalette('autocompleteDefaultOption');
+  var _useInputFocus = useInputFocus({
+      onFocus: onFocus,
+      onBlur: onBlur
+    }),
+    inFocus = _useInputFocus.inFocus,
+    handleFocus = _useInputFocus.handleFocus,
+    handleBlur = _useInputFocus.handleBlur;
+  var _useInputStyles = useInputStyles({
+      isHaveValue: !!value,
+      useModernStyles: useModernStyles,
+      size: size,
+      label: label,
+      inFocus: inFocus,
+      placeholder: placeholder,
+      required: required
+    }),
+    inputLabel = _useInputStyles.inputLabel,
+    paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
+    isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
+    modernInputPlaceholder = _useInputStyles.modernInputPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
+  var handleOpen = useCallback(function () {
+    return setIsOpen(true);
+  }, []);
+  var handleClose = useCallback(function () {
+    setIsOpen(false);
+    setActiveIndex(-1);
+  }, []);
+  var dropdownRef = useRef(null);
+  var wrapperRef = useOutsideClick(handleClose, [dropdownRef]);
+  var handleChange = useCallback(function (event) {
+    // Ввод нового запроса сбрасывает клавиатурную подсветку (результаты сменятся).
+    setActiveIndex(-1);
+    onChange(event.target.value);
+  }, [onChange]);
+  var handleSelect = useCallback(function (event) {
+    var optionIndex = JSON.parse(event.currentTarget.dataset.index);
+    var option = options[optionIndex];
+    onChange(option.value, option);
+    handleClose();
+  }, [handleClose, onChange, options]);
+  var handleInputFocus = useCallback(function (event) {
+    handleOpen();
+    handleFocus(event);
+  }, [handleOpen, handleFocus]);
+  var isDropdownOpen = !isDropdownDisabled && isOpen && (!!options.length || !!isLoading);
+  // Скелетоны показываем ТОЛЬКО когда опций ещё нет (первая загрузка). При повторных запросах
+  // (ввод символов) держим прежние опции — иначе лоадер мерцает на каждое изменение.
+  var showSkeletons = !!isLoading && options.length === 0;
+  var getOptionId = function getOptionId(index) {
+    return "".concat(baseId, "-option-").concat(index);
+  };
+
+  // Активная опция всегда видна в прокручиваемом списке.
+  useEffect(function () {
+    var _activeOptionRef$curr;
+    (_activeOptionRef$curr = activeOptionRef.current) === null || _activeOptionRef$curr === void 0 || _activeOptionRef$curr.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [activeIndex]);
+  var handleKeyDown = function handleKeyDown(event) {
+    if (disabled || readOnly) return;
+    var count = options.length;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!isOpen) {
+          handleOpen();
+        } else if (count) {
+          setActiveIndex(function (prev) {
+            return (prev + 1) % count;
+          });
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (count) setActiveIndex(function (prev) {
+          return prev <= 0 ? count - 1 : prev - 1;
+        });
+        break;
+      case 'Enter':
+        if (isDropdownOpen && activeIndex >= 0 && activeIndex < count && !options[activeIndex].isDisabled) {
+          event.preventDefault();
+          onChange(options[activeIndex].value, options[activeIndex]);
+          handleClose();
+        }
+        break;
+      case 'Escape':
+        if (isDropdownOpen) {
+          event.preventDefault();
+          handleClose();
+        }
+        break;
+      default:
+        break;
+    }
+  };
+  return /*#__PURE__*/React.createElement(S.Wrapper, {
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    inFocus: inFocus,
+    label: inputLabel,
+    disabled: disabled,
+    required: required,
+    useModernStyles: useModernStyles,
+    size: fieldSize,
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined,
+    htmlFor: inputId
+  }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
+    visible: !isHideModernPlaceholder,
+    paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
+    paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
+    size: fieldSize,
+    required: required
+  }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
+    ref: ref,
+    hasError: hasError,
+    inFocus: inFocus,
+    value: value,
+    onChange: handleChange,
+    onFocus: handleInputFocus,
+    onBlur: handleBlur,
+    name: name,
+    placeholder: useModernStyles ? undefined : placeholder,
+    disabled: disabled,
+    paddingLeft: inputPaddingLeft,
+    maxLength: inputMaxLength,
+    isOnlyNumbers: isInputOnlyNumbers
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- проп прокидывается потребителю, решение об автофокусе за ним
+    ,
+    autoFocus: autoFocus,
+    readOnly: readOnly,
+    useModernStyles: useModernStyles,
+    onKeyDown: handleKeyDown,
+    role: "combobox",
+    "aria-expanded": isDropdownOpen,
+    "aria-controls": isDropdownOpen ? listboxId : undefined,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": isDropdownOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined
+  }, paddingAndVariantOptions)))), /*#__PURE__*/React.createElement(Dropdown, {
+    ref: dropdownRef,
+    isOpen: isOpen && (!!options.length || !!isLoading),
+    isAutoPosition: true,
+    width: dropdownWidth || '100%',
+    minWidth: isMobile ? '100%' : '340px',
+    usePadding: usePadding
+  }, showSkeletons ? /*#__PURE__*/React.createElement(Scrollbar, {
+    maxHeight: listHeight
+  }, optionsLoader || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DefaultSkeletonItem, null), /*#__PURE__*/React.createElement(DefaultSkeletonItem, null), /*#__PURE__*/React.createElement(DefaultSkeletonItem, null))) : /*#__PURE__*/React.createElement(Scrollbar, {
+    maxHeight: listHeight
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "listbox",
+    id: listboxId
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(S.OptionWrapperWithPadding, {
+      $usePadding: usePadding,
+      key: "".concat(option.value).concat(index)
+    }, /*#__PURE__*/React.createElement(S.OptionContainer, {
+      $hoverBg: palette.hoverBg,
+      $usePadding: usePadding,
+      $active: index === activeIndex
+    }, /*#__PURE__*/React.createElement(S.OptionWrapper, {
+      ref: index === activeIndex ? activeOptionRef : undefined,
+      id: getOptionId(index),
+      role: "option",
+      "aria-selected": index === activeIndex,
+      tabIndex: -1,
+      type: "button",
+      disabled: option.isDisabled,
+      onClick: handleSelect,
+      onMouseEnter: function onMouseEnter() {
+        return setActiveIndex(index);
+      },
+      "data-index": JSON.stringify(index)
+    }, renderOption ? renderOption(option) : /*#__PURE__*/React.createElement(AutocompleteDefaultOption, {
+      usePadding: usePadding
+    }, option.value))));
+  })))));
+});
+AutocompleteInner.displayName = 'AutocompleteInner';
+
+// Граница ошибок снаружи: renderOption/optionsLoader потребителя вызываются в
+// рендере AutocompleteInner — исключение колбэка иначе валило бы всё дерево
+// приложения (RES-001). Fallback — null: поле исчезает, страница живёт.
+export var Autocomplete = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(AutocompleteInner, _extends({}, props, {
+    ref: ref
+  })));
+});
+Autocomplete.displayName = 'Autocomplete';

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

@@ -0,0 +1,56 @@
+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; }
+import React, { useCallback, useMemo, useState } from 'react';
+import { Autocomplete } from '.';
+import { selectOptions } from '../../../../common/_helpers/selectOptions';
+var meta = {
+  title: 'form/Autocomplete/components/Autocomplete',
+  component: Autocomplete,
+  tags: ['autodocs']
+};
+export default meta;
+var Component = function Component(props) {
+  var isCustomOptionRender = props.isCustomOptionRender;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var filtredOptions = useMemo(function () {
+    return selectOptions.filter(function (option) {
+      return option.value.includes(value);
+    });
+  }, [value]);
+  var customRender = useCallback(function (option) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'left',
+        background: '#cfc',
+        padding: 5
+      }
+    }, "custom ", option.value);
+  }, []);
+  return /*#__PURE__*/React.createElement(Autocomplete, _extends({}, props, {
+    value: value,
+    onChange: setValue,
+    options: filtredOptions,
+    renderOption: isCustomOptionRender ? customRender : undefined
+  }));
+};
+export var Default = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    disabled: false,
+    isCustomOptionRender: false,
+    children: 'children',
+    inputPaddingLeft: 60,
+    readOnly: false,
+    useModernStyles: true
+  },
+  render: Component
+};

package/dist/esm/components/form/Autocomplete/components/Autocomplete/styles.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1fp3ia8-0"
+})(["position:relative;box-sizing:border-box;width:100%;"]);
+export var OptionContainer = styled.div.withConfig({
+  displayName: "styles__OptionContainer",
+  componentId: "sc-1fp3ia8-1"
+})(["width:100%;border-radius:", ";background-color:", ";&:hover{background-color:", ";}"], function (_ref) {
+  var $usePadding = _ref.$usePadding;
+  return $usePadding ? '12px' : 'none';
+}, function (_ref2) {
+  var $active = _ref2.$active,
+    $hoverBg = _ref2.$hoverBg;
+  return $active ? $hoverBg : 'transparent';
+}, function (_ref3) {
+  var $hoverBg = _ref3.$hoverBg;
+  return $hoverBg;
+});
+export var OptionWrapperWithPadding = styled.div.withConfig({
+  displayName: "styles__OptionWrapperWithPadding",
+  componentId: "sc-1fp3ia8-2"
+})(["padding:", ";"], function (_ref4) {
+  var $usePadding = _ref4.$usePadding;
+  return $usePadding ? '0 8px' : 'none';
+});
+export var OptionWrapper = styled.button.withConfig({
+  displayName: "styles__OptionWrapper",
+  componentId: "sc-1fp3ia8-3"
+})(["width:100%;background:transparent;border:none;cursor:pointer;outline:none;color:inherit;padding:0;&:disabled{opacity:0.7;cursor:not-allowed;}"]);
+export var ChildrenWrapper = styled.div.withConfig({
+  displayName: "styles__ChildrenWrapper",
+  componentId: "sc-1fp3ia8-4"
+})(["position:absolute;height:100%;width:100%;pointer-events:none;display:flex;align-items:center;"]);
+export var InputLabelContent = styled.div.withConfig({
+  displayName: "styles__InputLabelContent",
+  componentId: "sc-1fp3ia8-5"
+})(["position:relative;"]);
+export var DefaultSkeletonWrapper = styled.div.withConfig({
+  displayName: "styles__DefaultSkeletonWrapper",
+  componentId: "sc-1fp3ia8-6"
+})(["padding:6px 12px;"]);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+import { typography } from '../../../../common/Typography/typography';
+import { Typography } from '../../../../common/Typography';
+import { reducedMotion } from '../../../../../utils/reducedMotion';
+export var AutocompleteDefaultOption = function AutocompleteDefaultOption(_ref) {
+  var children = _ref.children,
+    _ref$usePadding = _ref.usePadding,
+    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    $usePadding: usePadding,
+    variant: 'bodyMRegular',
+    element: 'div'
+  }, children);
+};
+var Wrapper = styled(Typography).withConfig({
+  displayName: "AutocompleteDefaultOption__Wrapper",
+  componentId: "sc-1a61mvs-0"
+})(["overflow:hidden;display:flex;width:100%;text-align:left;flex-direction:column;padding:", ";transition:all 0.2s ease-in-out;", " box-sizing:border-box;", ""], function (_ref2) {
+  var $usePadding = _ref2.$usePadding;
+  return $usePadding ? '12px' : '12px 20px';
+}, typography.bodyMRegular, reducedMotion);

package/dist/esm/components/form/Autocomplete/components/AutocompleteDefaultOption/index.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AutocompleteDefaultOption } from '.';
+import { StoryBorderWrapper } from '../../../../_helpers/StoryBorderWrapper';
+var meta = {
+  title: 'form/Autocomplete/components/AutocompleteDefaultOption',
+  component: AutocompleteDefaultOption,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "children"), /*#__PURE__*/React.createElement("div", null, "children"))
+  },
+  render: function render(props) {
+    return /*#__PURE__*/React.createElement(StoryBorderWrapper, null, /*#__PURE__*/React.createElement(AutocompleteDefaultOption, props));
+  }
+};

package/dist/esm/components/form/Autocomplete/components/AutocompleteDefaultOption/palette.js

@@ -0,0 +1,6 @@
+import hexToRgba from '../../../../../utils/hexToRgba';
+export var generateAutocompleteDefaultOptionPalette = function generateAutocompleteDefaultOptionPalette(abstractPalette) {
+  return {
+    hoverBg: hexToRgba(abstractPalette.neutralUsual, 0.5)
+  };
+};

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import * as S from './styles';
+import { AutocompleteDefaultOption } from '../AutocompleteDefaultOption';
+import { useComponentPalette } from '../../../../../palette';
+export var OrganizationAutocompleteItem = function OrganizationAutocompleteItem(_ref) {
+  var name = _ref.name,
+    registrationAddress = _ref.registrationAddress,
+    vatNumber = _ref.vatNumber,
+    taxRegistrationReasonCode = _ref.taxRegistrationReasonCode,
+    tags = _ref.tags,
+    vatNumberLabel = _ref.vatNumberLabel,
+    taxRegistrationReasonCodeLabel = _ref.taxRegistrationReasonCodeLabel;
+  var palette = useComponentPalette('organizationAutocompleteItem');
+  return /*#__PURE__*/React.createElement(S.OptionContainer, {
+    $hoverBg: palette.hoverBg
+  }, /*#__PURE__*/React.createElement(AutocompleteDefaultOption, null, /*#__PURE__*/React.createElement(S.OrganizationWrapper, null, /*#__PURE__*/React.createElement(S.OrganizationName, {
+    $color: palette.title,
+    variant: "bodyMRegular"
+  }, name), /*#__PURE__*/React.createElement(S.OrganizationDescription, {
+    $color: palette.description,
+    variant: "captionRegular"
+  }, registrationAddress), /*#__PURE__*/React.createElement(S.OrganizationDescription, {
+    $color: palette.description,
+    variant: "captionRegular"
+  }, /*#__PURE__*/React.createElement(S.OrganizationVatNumber, null, /*#__PURE__*/React.createElement(S.OrganizationLabel, {
+    $color: palette.label,
+    variant: "captionRegular"
+  }, vatNumberLabel), ' ', vatNumber), taxRegistrationReasonCode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.OrganizationLabel, {
+    $color: palette.label,
+    variant: "captionRegular"
+  }, taxRegistrationReasonCodeLabel), ' ', taxRegistrationReasonCode)), tags && /*#__PURE__*/React.createElement(S.OrganizationProperties, null, tags.map(function (feature, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement(S.Feature, {
+        key: index
+      }, " ", feature, " ")
+    );
+  })))));
+};

package/dist/esm/components/form/Autocomplete/components/OrganizationAutocompleteItem/index.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { OrganizationAutocompleteItem } from '.';
+var meta = {
+  title: 'form/Autocomplete/components/OrganizationAutocompleteItem',
+  component: OrganizationAutocompleteItem,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    name: 'ООО «Название организации»',
+    registrationAddress: 'Санкт-Петербург дом 30',
+    vatNumber: '2323232323',
+    vatNumberLabel: 'ИНН',
+    taxRegistrationReasonCodeLabel: 'КПП',
+    taxRegistrationReasonCode: '111111111',
+    // eslint-disable-next-line react/jsx-key
+    tags: [/*#__PURE__*/React.createElement("div", null, "Tag1"), /*#__PURE__*/React.createElement("div", null, "Tag2")]
+  }
+};

package/dist/esm/components/form/Autocomplete/components/OrganizationAutocompleteItem/palette.js

@@ -0,0 +1,9 @@
+import hexToRgba from '../../../../../utils/hexToRgba';
+export var generateOrganizationAutocompleteItemPalette = function generateOrganizationAutocompleteItemPalette(abstractPalette) {
+  return {
+    title: abstractPalette.primary,
+    description: hexToRgba(abstractPalette.primary, 0.5),
+    label: hexToRgba(abstractPalette.primary, 0.3),
+    hoverBg: hexToRgba(abstractPalette.neutralUsual, 0.5)
+  };
+};

package/dist/esm/components/form/Autocomplete/components/OrganizationAutocompleteItem/styles.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { Typography } from '../../../../common/Typography';
+export var OrganizationWrapper = styled.div.withConfig({
+  displayName: "styles__OrganizationWrapper",
+  componentId: "sc-1pujz54-0"
+})(["display:flex;align-items:start;flex-direction:column;gap:4px;"]);
+export var OptionContainer = styled.div.withConfig({
+  displayName: "styles__OptionContainer",
+  componentId: "sc-1pujz54-1"
+})(["width:", ";border-radius:", ";&:hover{background-color:", ";}"], function (_ref) {
+  var $recalculateWidthAndBorder = _ref.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? 'calc(100% - 14px)' : '100%';
+}, function (_ref2) {
+  var $recalculateWidthAndBorder = _ref2.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? '12px' : 'none';
+}, function (_ref3) {
+  var $hoverBg = _ref3.$hoverBg;
+  return $hoverBg;
+});
+export var OrganizationName = styled(Typography).attrs({
+  element: 'span'
+}).withConfig({
+  displayName: "styles__OrganizationName",
+  componentId: "sc-1pujz54-2"
+})(["color:", ";"], function (_ref4) {
+  var $color = _ref4.$color;
+  return $color;
+});
+export var OrganizationDescription = styled(Typography).attrs({
+  element: 'span'
+}).withConfig({
+  displayName: "styles__OrganizationDescription",
+  componentId: "sc-1pujz54-3"
+})(["color:", ";"], function (_ref5) {
+  var $color = _ref5.$color;
+  return $color;
+});
+export var OrganizationLabel = styled(Typography).attrs({
+  element: 'span'
+}).withConfig({
+  displayName: "styles__OrganizationLabel",
+  componentId: "sc-1pujz54-4"
+})(["color:", ";"], function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+});
+export var OrganizationVatNumber = styled.span.withConfig({
+  displayName: "styles__OrganizationVatNumber",
+  componentId: "sc-1pujz54-5"
+})(["margin-right:20px;"]);
+export var OrganizationProperties = styled.div.withConfig({
+  displayName: "styles__OrganizationProperties",
+  componentId: "sc-1pujz54-6"
+})(["display:flex;align-items:center;gap:10px;margin-top:3px;"]);
+export var Feature = styled.div.withConfig({
+  displayName: "styles__Feature",
+  componentId: "sc-1pujz54-7"
+})(["display:contents;"]);

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

@@ -0,0 +1,3 @@
+export { Autocomplete } from './components/Autocomplete';
+export { AutocompleteDefaultOption } from './components/AutocompleteDefaultOption';
+export { OrganizationAutocompleteItem } from './components/OrganizationAutocompleteItem';

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

@@ -0,0 +1,16 @@
+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); }
+import React from 'react';
+export var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "12",
+    height: "11",
+    viewBox: "0 0 12 11",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.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/esm/components/form/Checkbox/index.js

@@ -0,0 +1,38 @@
+var _excluded = ["disabled", "className", "checked", "disabledText", "label"];
+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; }
+import React, { useMemo } from 'react';
+import { Typography } from '../../common/Typography';
+import { Tooltip } from '../../common/Tooltip';
+import { useComponentPalette } from '../../../palette';
+import * as S from './styles';
+export var 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 = useComponentPalette('checkbox');
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.HiddenCheckbox, _extends({
+      type: "checkbox",
+      disabled: disabled,
+      checked: checked
+    }, props)), /*#__PURE__*/React.createElement(S.StyledCheckbox, null, /*#__PURE__*/React.createElement(S.CheckboxIcon, null)));
+  }, [checked, disabled, props]);
+  return /*#__PURE__*/React.createElement(S.CheckboxLabel, {
+    $checked: checked,
+    $disabled: disabled,
+    $palette: palette,
+    className: className
+  }, /*#__PURE__*/React.createElement(S.CheckboxContainer, null, disabled && disabledText ? /*#__PURE__*/React.createElement(Tooltip, {
+    overlay: disabledText
+  }, content) : content), label && /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyMRegular"
+  }, label));
+};
+export default /*#__PURE__*/React.memo(Checkbox);