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

package/dist/esm/components/common/Dropdown/index.js

@@ -0,0 +1,171 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import * as S from './styles';
+import { DROPDOWN_PORTAL_ATTR } from '../../../hooks/useOutsideClick';
+import { useComponentPalette } from '../../../palette';
+export var Dropdown = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    isOpen = _ref.isOpen,
+    _ref$isAutoPosition = _ref.isAutoPosition,
+    isAutoPosition = _ref$isAutoPosition === void 0 ? false : _ref$isAutoPosition,
+    _ref$positionVertical = _ref.positionVertical,
+    positionVertical = _ref$positionVertical === void 0 ? 5 : _ref$positionVertical,
+    _ref$positionLeft = _ref.positionLeft,
+    positionLeft = _ref$positionLeft === void 0 ? '0px' : _ref$positionLeft,
+    _ref$positionRight = _ref.positionRight,
+    positionRight = _ref$positionRight === void 0 ? 'auto' : _ref$positionRight,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'auto' : _ref$width,
+    zIndex = _ref.zIndex,
+    onCloseTransitionEnd = _ref.onCloseTransitionEnd,
+    _ref$isTopPosition = _ref.isTopPosition,
+    isTopPosition = _ref$isTopPosition === void 0 ? false : _ref$isTopPosition,
+    _ref$usePadding = _ref.usePadding,
+    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding,
+    role = _ref.role;
+  var palette = useComponentPalette('dropdown');
+  var position = useRef({
+    isAbove: true,
+    translateY: '0px'
+  });
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    elRef = _useState2[0],
+    setElRef = _useState2[1];
+
+  // Якорь остаётся в потоке на месте поля-триггера; по его родителю (само поле) считаем,
+  // куда поставить вынесенный порталом дропдаун.
+  var anchorRef = useRef(null);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    layerRect = _useState4[0],
+    setLayerRect = _useState4[1];
+
+  // Дропдаун вынесён в body порталом и спозиционирован `fixed` → НЕ растит документ (баг с
+  // пустой полосой внизу) и не зависит от `overflow`/`transform` предков. Слой-обёртка
+  // (`PositionLayer`) `fixed` точно над полем: внутренний `Wrapper` остаётся `absolute`
+  // относительно него, поэтому ВСЯ старая логика позиционирования (top/bottom/left/right/
+  // translateY) и измерения работают без изменений. Пересчёт на скролл/resize, пока открыт.
+  useLayoutEffect(function () {
+    var updateRect = function updateRect() {
+      var _anchorRef$current;
+      var field = (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.parentElement;
+      if (!field) return;
+      var rect = field.getBoundingClientRect();
+      setLayerRect({
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    updateRect();
+    if (!isOpen) return undefined;
+    window.addEventListener('scroll', updateRect, true);
+    window.addEventListener('resize', updateRect);
+    return function () {
+      window.removeEventListener('scroll', updateRect, true);
+      window.removeEventListener('resize', updateRect);
+    };
+  }, [isOpen]);
+  var handleCloseTransitionEnd = useCallback(function (event) {
+    if (event.propertyName !== 'opacity') return;
+    if (isOpen) return;
+    if (onCloseTransitionEnd) onCloseTransitionEnd();
+  }, [isOpen, onCloseTransitionEnd]);
+  var getPosition = useCallback(function (_ref2) {
+    var dropdownHeight = _ref2.dropdownHeight,
+      belowHeight = _ref2.belowHeight,
+      aboveHeight = _ref2.aboveHeight,
+      dropdownIndent = _ref2.dropdownIndent;
+    var isEnoughSpaceBelow = belowHeight >= dropdownHeight + dropdownIndent;
+    if (isEnoughSpaceBelow) return {
+      isAbove: false,
+      translateY: '0px'
+    };
+    var isEnoghtSpaceAbove = aboveHeight >= dropdownHeight + dropdownIndent;
+    if (isEnoghtSpaceAbove) return {
+      isAbove: true,
+      translateY: '0px'
+    };
+    var isMoreSpaceBelowThanAbove = belowHeight >= aboveHeight;
+    if (isMoreSpaceBelowThanAbove) {
+      var _outOfViewPortHeight = dropdownHeight + dropdownIndent - belowHeight;
+      return {
+        isAbove: false,
+        translateY: "-".concat(_outOfViewPortHeight, "px")
+      };
+    }
+    var outOfViewPortHeight = dropdownHeight + dropdownIndent - aboveHeight;
+    return {
+      isAbove: true,
+      translateY: "".concat(outOfViewPortHeight, "px")
+    };
+  }, []);
+  var openFlagCache = useRef(null);
+  if (elRef) {
+    var isTriggeredByFlag = openFlagCache.current !== isOpen;
+    openFlagCache.current = isOpen;
+    if (isTriggeredByFlag && isOpen) {
+      var viewportHeight = window.innerHeight;
+      var parent = elRef.parentElement;
+      var _parent$getBoundingCl = parent.getBoundingClientRect(),
+        bottom = _parent$getBoundingCl.bottom,
+        aboveHeight = _parent$getBoundingCl.top;
+      var belowHeight = viewportHeight - bottom;
+      var dropdownHeight = elRef.scrollHeight;
+      position.current = isAutoPosition ? getPosition({
+        dropdownHeight: dropdownHeight,
+        aboveHeight: aboveHeight,
+        belowHeight: belowHeight,
+        dropdownIndent: positionVertical
+      }) : {
+        isAbove: isTopPosition,
+        translateY: '0px'
+      };
+    }
+  }
+  var setWrapperRef = useCallback(function (node) {
+    setElRef(node);
+    if (typeof forwardedRef === 'function') forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Anchor, {
+    ref: anchorRef
+  }), layerRect && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(S.PositionLayer, _extends({}, _defineProperty({}, DROPDOWN_PORTAL_ATTR, ''), {
+    style: {
+      top: layerRect.top,
+      left: layerRect.left,
+      width: layerRect.width,
+      height: layerRect.height
+    }
+  }), /*#__PURE__*/React.createElement(S.Wrapper, {
+    ref: setWrapperRef,
+    role: role,
+    $isVisible: isOpen,
+    $isAbove: position.current.isAbove,
+    $translateY: position.current.translateY,
+    $positionVertical: positionVertical,
+    $positionLeft: positionLeft,
+    $positionRight: positionRight,
+    $minWidth: minWidth,
+    $width: width,
+    $zIndex: zIndex,
+    onTransitionEnd: handleCloseTransitionEnd,
+    $palette: palette,
+    $usePadding: usePadding
+  }, children)), document.body));
+});
+Dropdown.displayName = 'Dropdown';

package/dist/esm/components/common/Dropdown/index.stories.js

@@ -0,0 +1,53 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Dropdown } from '.';
+var meta = {
+  title: 'common/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs']
+};
+export default meta;
+var args = {
+  isOpen: false,
+  positionVertical: 5,
+  positionLeft: '0px',
+  positionRight: 'auto',
+  minWidth: 'auto',
+  width: 'auto',
+  zIndex: 5,
+  onCloseTransitionEnd: action('closeTransitionEnd'),
+  children: Array(100).fill('children ').join(''),
+  isTopPosition: false
+};
+export var Default = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    isAutoPosition: false
+  }),
+  render: function render(props) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "parent"), /*#__PURE__*/React.createElement(Dropdown, props));
+  }
+};
+export var AutoPosition = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    isAutoPosition: true
+  }),
+  render: function render(props) {
+    return /*#__PURE__*/React.createElement("div", null, "\u0414\u0440\u043E\u043F\u0434\u0430\u0443\u043D \u043D\u0438\u0436\u0435 \u2193", /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative',
+        marginTop: '800px',
+        marginBottom: '800px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "parent"), /*#__PURE__*/React.createElement(Dropdown, props)));
+  }
+};

package/dist/esm/components/common/Dropdown/palette.js

@@ -0,0 +1,7 @@
+import hexToRgba from '../../../utils/hexToRgba';
+export var generateDropdownPalette = function generateDropdownPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.base,
+    shadow: hexToRgba(abstractPalette.primary, 0.15)
+  };
+};

package/dist/esm/components/common/Dropdown/styles.js

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components';
+import { reducedMotion } from '../../../utils/reducedMotion';
+
+// Невидимый якорь в потоке: по его родителю (поле-триггер) считаем позицию портал-дропдауна.
+// display:none — не влияет на вёрстку, но parentElement (само поле) доступен для измерений.
+export var Anchor = styled.span.withConfig({
+  displayName: "styles__Anchor",
+  componentId: "sc-1f1enhf-0"
+})(["display:none;"]);
+
+// Слой-обёртка дропдауна: вынесена порталом в body и спозиционирована fixed точно над полем
+// (через inline top/left/width/height). pointer-events:none — сам слой не перехватывает клики
+// (его площадь = полю), кликабелен только внутренний Wrapper.
+export var PositionLayer = styled.div.withConfig({
+  displayName: "styles__PositionLayer",
+  componentId: "sc-1f1enhf-1"
+})(["position:fixed;z-index:1000;pointer-events:none;"]);
+var hidden = css(["visibility:hidden;opacity:0;transition:visibility 0ms 200ms,opacity 200ms 0ms ease;"]);
+var visible = css(["visibility:visible;opacity:1;transition:visibility 0ms 0ms,opacity 200ms 0ms ease;"]);
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1f1enhf-2"
+})(["pointer-events:auto;padding:", ";overflow:hidden;border-radius:20px;box-shadow:0 4px 50px 0 ", ";background:", ";outline:1px solid ", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";", ""], function (_ref) {
+  var $usePadding = _ref.$usePadding;
+  return $usePadding ? '8px 0;' : 'none';
+}, function (_ref2) {
+  var $palette = _ref2.$palette;
+  return $palette.shadow;
+}, function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.bg;
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.bg;
+}, function (_ref5) {
+  var $minWidth = _ref5.$minWidth;
+  return $minWidth;
+}, function (_ref6) {
+  var $width = _ref6.$width;
+  return $width;
+}, function (_ref7) {
+  var $positionLeft = _ref7.$positionLeft;
+  return $positionLeft;
+}, function (_ref8) {
+  var $positionRight = _ref8.$positionRight;
+  return $positionRight;
+}, function (_ref9) {
+  var $zIndex = _ref9.$zIndex;
+  return $zIndex !== null && $zIndex !== void 0 ? $zIndex : 5;
+}, function (_ref0) {
+  var $isVisible = _ref0.$isVisible;
+  return $isVisible ? visible : hidden;
+}, function (_ref1) {
+  var $isAbove = _ref1.$isAbove,
+    $positionVertical = _ref1.$positionVertical;
+  return $isAbove ? css(["bottom:calc(100% + ", "px);"], $positionVertical) : css(["top:calc(100% + ", "px);"], $positionVertical);
+}, function (_ref10) {
+  var $translateY = _ref10.$translateY;
+  return css(["transform:translateY(", ");"], $translateY);
+}, reducedMotion);

package/dist/esm/components/common/EntityAutocompleteOptionsDrawer/index.js

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import * as S from './styles';
+import { Drawer } from '../Drawer';
+import { Scrollbar } from '../Scrollbar';
+import { Skeleton } from '../Skeleton';
+import { useComponentPalette } from '../../../palette';
+var loadingList = new Array(4).fill(Skeleton);
+export var EntityAutocompleteOptionsDrawer = function EntityAutocompleteOptionsDrawer(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    options = _ref.options,
+    renderOption = _ref.renderOption,
+    onChange = _ref.onChange,
+    isLoadingOptions = _ref.isLoadingOptions,
+    promptMessage = _ref.promptMessage,
+    searchInputField = _ref.searchInputField,
+    onOpenEnd = _ref.onOpenEnd;
+  var palette = useComponentPalette('entityAutocompleteOptionsDrawer');
+  var handleSelect = useCallback(function (event) {
+    var optionIndex = JSON.parse(event.currentTarget.dataset.index);
+    var option = options[optionIndex];
+    onChange(option.value, option);
+    onClose();
+  }, [onClose, onChange, options]);
+
+  // Скелетоны — только на первой загрузке (опций ещё нет). При повторных запросах держим прежние
+  // опции, иначе лоадер мерцает на каждый ввод символа.
+  var showSkeletons = isLoadingOptions && options.length === 0;
+  return /*#__PURE__*/React.createElement(Drawer, {
+    isOpen: isOpen,
+    onClose: onClose,
+    isPadding: false,
+    onOpenEnd: onOpenEnd
+  }, /*#__PURE__*/React.createElement(S.BodyWrapper, null, /*#__PURE__*/React.createElement(S.InputWrapper, null, searchInputField), /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement(Scrollbar, {
+    maxHeight: 380
+  }, promptMessage && /*#__PURE__*/React.createElement(S.Prompt, {
+    $color: palette.prompt,
+    variant: "bodyMRegular"
+  }, promptMessage), showSkeletons && /*#__PURE__*/React.createElement(S.SkeletonListWrapper, null, loadingList.map(function (ComponentSkeleton, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement(ComponentSkeleton, {
+        key: index,
+        height: "64px"
+      })
+    );
+  })), !showSkeletons && !promptMessage && options.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(S.OptionWrapper, {
+      // eslint-disable-next-line react/no-array-index-key
+      key: "".concat(option.value).concat(index),
+      tabIndex: -1,
+      type: "button",
+      disabled: option.isDisabled,
+      onClick: handleSelect,
+      "data-index": JSON.stringify(index)
+    }, renderOption(option));
+  })))));
+};

package/dist/esm/components/common/EntityAutocompleteOptionsDrawer/index.stories.js

@@ -0,0 +1,92 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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, { useState } from 'react';
+import { EntityAutocompleteOptionsDrawer } from '.';
+var meta = {
+  title: 'common/EntityAutocompleteOptionsDrawer',
+  component: EntityAutocompleteOptionsDrawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    onChange: {
+      action: 'onChange'
+    }
+  }
+};
+export default meta;
+function Render(props) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var close = function close() {
+    return setIsOpen(false);
+  };
+  var open = function open() {
+    return setIsOpen(true);
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    type: 'button',
+    onClick: open
+  }, "Open"), /*#__PURE__*/React.createElement(EntityAutocompleteOptionsDrawer, _extends({}, props, {
+    isOpen: isOpen,
+    onClose: close
+  })));
+}
+var commonArgs = {
+  isLoadingOptions: false,
+  searchValue: '1234',
+  searchInputField: /*#__PURE__*/React.createElement("div", null, " Input here "),
+  renderOption: function renderOption(option) {
+    return /*#__PURE__*/React.createElement("div", null, " ", option.entity.name, " ");
+  },
+  options: [{
+    value: '1',
+    entity: {
+      id: '1',
+      name: 'Name one'
+    }
+  }, {
+    value: '2',
+    entity: {
+      id: '2',
+      name: 'Name two'
+    },
+    isDisabled: true
+  }, {
+    value: '3',
+    entity: {
+      id: '3',
+      name: 'Name three'
+    }
+  }]
+};
+export var Default = {
+  args: commonArgs,
+  render: Render
+};
+export var Loading = {
+  args: _objectSpread(_objectSpread({}, commonArgs), {}, {
+    isLoadingOptions: true
+  }),
+  render: Render
+};
+export var PromptMessage = {
+  args: _objectSpread(_objectSpread({}, commonArgs), {}, {
+    promptMessage: 'PromptMessage'
+  }),
+  render: Render
+};

package/dist/esm/components/common/EntityAutocompleteOptionsDrawer/palette.js

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

package/dist/esm/components/common/EntityAutocompleteOptionsDrawer/styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { Typography } from '../Typography';
+export var BodyWrapper = styled.div.withConfig({
+  displayName: "styles__BodyWrapper",
+  componentId: "sc-r0dl76-0"
+})(["padding:32px 0 36px;"]);
+export var InputWrapper = styled.div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "sc-r0dl76-1"
+})(["padding:8px 16px;"]);
+export var OptionWrapper = styled.button.withConfig({
+  displayName: "styles__OptionWrapper",
+  componentId: "sc-r0dl76-2"
+})(["width:100%;background:transparent;border:none;cursor:pointer;outline:none;color:inherit;&:disabled{opacity:0.7;cursor:not-allowed;}"]);
+export var ContentWrapper = styled.div.withConfig({
+  displayName: "styles__ContentWrapper",
+  componentId: "sc-r0dl76-3"
+})(["height:380px;"]);
+export var SkeletonListWrapper = styled.div.withConfig({
+  displayName: "styles__SkeletonListWrapper",
+  componentId: "sc-r0dl76-4"
+})(["display:flex;flex-direction:column;gap:16px;padding:8px 16px;"]);
+export var Prompt = styled(Typography).withConfig({
+  displayName: "styles__Prompt",
+  componentId: "sc-r0dl76-5"
+})(["padding:8px 16px 0 16px;text-align:center;color:", ";"], function (_ref) {
+  var $color = _ref.$color;
+  return $color;
+});

package/dist/esm/components/common/ErrorBoundary/index.js

@@ -0,0 +1,58 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Component } from 'react';
+// Локальная граница ошибок: исключение в пользовательском render-контенте
+// (renderOption/renderValue/children) ломает один виджет, а не всё
+// React-дерево приложения-потребителя. Класс — единственный способ
+// реализовать границу ошибок в React 18.
+// Не экспортируется из пакета: внутренняя страховка, а не публичный API.
+export var ErrorBoundary = /*#__PURE__*/function (_Component) {
+  function ErrorBoundary() {
+    var _this;
+    _classCallCheck(this, ErrorBoundary);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ErrorBoundary, [].concat(args));
+    _defineProperty(_this, "state", {
+      hasError: false
+    });
+    return _this;
+  }
+  _inherits(ErrorBoundary, _Component);
+  return _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // Библиотека намеренно не навязывает трекер ошибок;
+      // опциональный onError-контракт — задача 3.7 аудита
+      // eslint-disable-next-line no-console
+      console.error('[@invoicebox/ui] render error:', error, errorInfo.componentStack);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props$fallback;
+      if (this.state.hasError) return (_this$props$fallback = this.props.fallback) !== null && _this$props$fallback !== void 0 ? _this$props$fallback : null;
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+  }]);
+}(Component);

package/dist/esm/components/common/Flag/components/AreFlag/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+export var AreFlag = function AreFlag() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "22",
+    height: "16",
+    viewBox: "0 0 22 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "22",
+    height: "16",
+    rx: "2",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0H22V5.33333H0V0Z",
+    fill: "#249F58"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 10.6667H22V16.0001H0V10.6667Z",
+    fill: "#151515"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2.13333C0 0.955126 0.93807 0 2.09524 0H6.28571V16H2.09524C0.93807 16 0 15.0449 0 13.8667V2.13333Z",
+    fill: "#F93939"
+  }));
+};

package/dist/esm/components/common/Flag/components/AreFlag/index.stories.js

@@ -0,0 +1,8 @@
+import { AreFlag } from '.';
+var meta = {
+  title: 'common/Flag/_components/AreFlag',
+  component: AreFlag,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {};

package/dist/esm/components/common/Flag/components/ArmFlag/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+export var ArmFlag = function ArmFlag() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "22",
+    height: "16",
+    viewBox: "0 0 22 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.9048 0H2.09524C0.93807 0 0 0.955126 0 2.13333V13.8667C0 15.0449 0.93807 16 2.09524 16H19.9048C21.0619 16 22 15.0449 22 13.8667V2.13333C22 0.955126 21.0619 0 19.9048 0Z",
+    fill: "#1A47B8"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 11H22V16H0V11Z",
+    fill: "#FFDA2C"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0H22V5H0V0Z",
+    fill: "#F93939"
+  }));
+};

package/dist/esm/components/common/Flag/components/ArmFlag/index.stories.js

@@ -0,0 +1,8 @@
+import { ArmFlag } from '.';
+var meta = {
+  title: 'common/Flag/_components/ArmFlag',
+  component: ArmFlag,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {};