@invoicebox/ui 0.1.0-alpha.292 → 0.1.0-alpha.295

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

@@ -0,0 +1,163 @@
+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 { 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;
+  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, {
+    style: {
+      top: layerRect.top,
+      left: layerRect.left,
+      width: layerRect.width,
+      height: layerRect.height
+    }
+  }, /*#__PURE__*/React.createElement(S.Wrapper, {
+    ref: setWrapperRef,
+    $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,58 @@
+import styled, { css } from 'styled-components';
+// Невидимый якорь в потоке: по его родителю (поле-триггер) считаем позицию портал-дропдауна.
+// 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 (_ref10) {
+  var $isVisible = _ref10.$isVisible;
+  return $isVisible ? visible : hidden;
+}, function (_ref11) {
+  var $isAbove = _ref11.$isAbove,
+    $positionVertical = _ref11.$positionVertical;
+  return $isAbove ? css(["bottom:calc(100% + ", "px);"], $positionVertical) : css(["top:calc(100% + ", "px);"], $positionVertical);
+}, function (_ref12) {
+  var $translateY = _ref12.$translateY;
+  return css(["transform:translateY(", ");"], $translateY);
+});

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/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 = {};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+export var AzeFlag = function AzeFlag() {
+  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: "#F93939"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 11H22V16H0V11Z",
+    fill: "#249F58"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0H22V5H0V0Z",
+    fill: "#3ECBF8"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.5713 7.4668H13.6189V8.53346H12.5713V7.4668Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.0951 9.60016C12.6174 10.2476 11.8569 10.6668 10.9999 10.6668C9.55419 10.6668 8.38086 9.47216 8.38086 8.00016C8.38086 6.52816 9.55419 5.3335 10.9999 5.3335C11.8569 5.3335 12.6174 5.7527 13.0951 6.40016H11.5237C10.6563 6.40016 9.95229 7.11696 9.95229 8.00016C9.95229 8.88336 10.6563 9.60016 11.5237 9.60016H13.0951Z",
+    fill: "white"
+  }));
+};

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

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+export var BlrFlag = function BlrFlag() {
+  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: "#F93939"
+  }), /*#__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: "#F93939"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.14286 0L5.2381 1.6L3.14286 3.2V0ZM3.14286 3.2L5.2381 4.8L3.14286 6.4V3.2ZM3.14286 6.4L5.2381 8L3.14286 9.6V6.4ZM3.14286 9.6L5.2381 11.2L3.14286 12.8V9.6ZM3.14286 12.8L5.2381 14.4L3.14286 16V12.8ZM2.09524 0L0 1.6L2.09524 3.2V0ZM2.09524 3.2L0 4.8L2.09524 6.4V3.2ZM2.09524 6.4L0 8L2.09524 9.6V6.4ZM2.09524 9.6L0 11.2L2.09524 12.8V9.6ZM2.09524 12.8L0 14.4L2.09524 16V12.8ZM2.09524 0H3.14286V2.13333H2.09524V0ZM2.09524 13.8667H3.14286V16H2.09524V13.8667ZM2.09524 5.33333H3.14286V7.46667H2.09524V5.33333ZM2.09524 3.2H3.14286V4.26667H2.09524V3.2ZM2.09524 11.7333H3.14286V12.8H2.09524V11.7333ZM2.09524 8.53333H3.14286V10.6667H2.09524V8.53333Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 12H22V16H5V12Z",
+    fill: "#249F58"
+  }));
+};

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+export var ChnFlag = function ChnFlag() {
+  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: "#F93939"
+  }), /*#__PURE__*/React.createElement("path", {
+    id: "vector",
+    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: "#F93939"
+  }), /*#__PURE__*/React.createElement("path", {
+    id: "vector_2",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.75979 7.7122L4.21979 8.53673L4.51313 6.7906L3.26855 5.55326L4.98979 5.30046L5.75979 3.71113L6.52875 5.30046L8.24998 5.55326L7.00332 6.7906L7.29875 8.53566L5.75979 7.7122ZM9.42856 3.2002H10.4762V4.26686H9.42856V3.2002ZM10.4762 5.33353H11.5238V6.4002H10.4762V5.33353ZM10.4762 7.46686H11.5238V8.53353H10.4762V7.46686ZM9.42856 9.6002H10.4762V10.6669H9.42856V9.6002Z",
+    fill: "#FFDA2C"
+  }));
+};

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

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