@invoicebox/ui 0.1.0-alpha.128 → 0.1.0-alpha.129

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

@@ -0,0 +1,14 @@
+import React, { FC, ReactNode } from 'react';
+type TDialogCommonProps = {
+    children: ReactNode;
+    onClose: () => void;
+    title?: string;
+    isErrorBorder?: boolean;
+    isOpen: boolean;
+    isPadding?: boolean;
+};
+export type TProps = TDialogCommonProps & {
+    initialFocusRef?: React.RefObject<HTMLElement> | false;
+};
+export declare const Drawer: FC<TProps>;
+export {};

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

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Drawer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _Typography = require("../Typography");
+var _palette = require("../../../palette");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Drawer = exports.Drawer = function Drawer(_ref) {
+  var isOpen = _ref.isOpen,
+    children = _ref.children,
+    title = _ref.title,
+    isErrorBorder = _ref.isErrorBorder,
+    onClose = _ref.onClose,
+    _ref$isPadding = _ref.isPadding,
+    isPadding = _ref$isPadding === void 0 ? true : _ref$isPadding,
+    initialFocusRef = _ref.initialFocusRef;
+  var palette = (0, _palette.useComponentPalette)('drawer');
+  return /*#__PURE__*/_react["default"].createElement(S.BottomSheet, {
+    open: isOpen,
+    onDismiss: onClose,
+    expandOnContentDrag: false,
+    initialFocusRef: initialFocusRef,
+    scrollLocking: false,
+    header: !title ? undefined : /*#__PURE__*/_react["default"].createElement(S.Title, {
+      $bg: palette.titleBg
+    }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      variant: "headline4"
+    }, title)),
+    $isHaveHeader: !!title,
+    $palette: palette
+  }, /*#__PURE__*/_react["default"].createElement(S.Body, {
+    $isPadding: isPadding,
+    $isErrorBorder: isErrorBorder,
+    $errorColor: palette.error
+  }, children));
+};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Drawer, TProps } from '.';
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+export declare const Default: StoryObj<TProps>;
+export declare const WithTitle: StoryObj<TProps>;
+export declare const Error: StoryObj<TProps>;

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

@@ -0,0 +1,69 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithTitle = exports.Error = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _ = require(".");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function 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; }
+var meta = {
+  title: 'common/Drawer',
+  component: _.Drawer,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+function Render(args) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_.Drawer, _extends({}, args, {
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    isOpen: isOpen
+  })), /*#__PURE__*/_react["default"].createElement("button", {
+    type: 'button',
+    onClick: function onClick() {
+      return setIsOpen(true);
+    }
+  }, "Open"));
+}
+var commonArgs = {
+  children: 'Children',
+  isErrorBorder: false,
+  onClose: (0, _addonActions.action)('close'),
+  isPadding: false
+};
+var Default = exports.Default = {
+  args: commonArgs,
+  render: Render
+};
+var WithTitle = exports.WithTitle = {
+  args: _objectSpread(_objectSpread({}, commonArgs), {}, {
+    title: 'Title'
+  }),
+  render: Render
+};
+var Error = exports.Error = {
+  args: _objectSpread(_objectSpread({}, commonArgs), {}, {
+    isErrorBorder: true
+  }),
+  render: Render
+};

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

@@ -0,0 +1,8 @@
+import { TAbstractPalette } from '../../../palette';
+export type TDrawerPalette = {
+    error: string;
+    bg: string;
+    backdropBg: string;
+    titleBg: string;
+};
+export declare const generateDrawerPalette: (abstractPalette: TAbstractPalette) => TDrawerPalette;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDrawerPalette = void 0;
+var _transformColorByHsl = require("../../../utils/transformColorByHsl");
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generateDrawerPalette = exports.generateDrawerPalette = function generateDrawerPalette(abstractPalette) {
+  return {
+    error: abstractPalette.error,
+    bg: abstractPalette.base,
+    backdropBg: (0, _hexToRgba["default"])((0, _transformColorByHsl.transformColorByHsl)(abstractPalette.primary, {
+      hue: -3.3333333333333144,
+      saturation: -0.07435090479937062,
+      lightness: 0.08235294117647063
+    }), 0.5),
+    titleBg: abstractPalette.neutralUsual
+  };
+};

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

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import 'react-spring-bottom-sheet/dist/style.css';
+import { TDrawerPalette } from './palette';
+export declare const BottomSheet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
+    children: import("react").ReactNode;
+    sibling?: import("react").ReactNode;
+    onSpringStart?: ((event: import("react-spring-bottom-sheet/dist/types").SpringEvent) => void) | undefined;
+    onSpringCancel?: ((event: import("react-spring-bottom-sheet/dist/types").SpringEvent) => void) | undefined;
+    onSpringEnd?: ((event: import("react-spring-bottom-sheet/dist/types").SpringEvent) => void) | undefined;
+    open: boolean;
+    className?: string | undefined;
+    footer?: import("react").ReactNode;
+    header?: import("react").ReactNode;
+    initialFocusRef?: false | import("react").RefObject<HTMLElement> | undefined;
+    onDismiss?: (() => void) | undefined;
+    blocking?: boolean | undefined;
+    maxHeight?: number | undefined;
+    scrollLocking?: boolean | undefined;
+    snapPoints?: import("react-spring-bottom-sheet/dist/types").snapPoints | undefined;
+    defaultSnap?: number | ((props: import("react-spring-bottom-sheet/dist/types").defaultSnapProps) => number) | undefined;
+    reserveScrollBarGap?: boolean | undefined;
+    skipInitialTransition?: boolean | undefined;
+    expandOnContentDrag?: boolean | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children"> & import("react").RefAttributes<import("react-spring-bottom-sheet").BottomSheetRef>, "ref"> & {
+    ref?: ((instance: import("react-spring-bottom-sheet").BottomSheetRef | null) => void) | import("react").RefObject<import("react-spring-bottom-sheet").BottomSheetRef> | null | undefined;
+}, {
+    $isHaveHeader: boolean;
+    $palette: TDrawerPalette;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    sibling?: import("react").ReactNode;
+    onSpringStart?: ((event: import("react-spring-bottom-sheet/dist/types").SpringEvent) => void) | undefined;
+    onSpringCancel?: ((event: import("react-spring-bottom-sheet/dist/types").SpringEvent) => void) | undefined;
+    onSpringEnd?: ((event: import("react-spring-bottom-sheet/dist/types").SpringEvent) => void) | undefined;
+    open: boolean;
+    className?: string | undefined;
+    footer?: import("react").ReactNode;
+    header?: import("react").ReactNode;
+    initialFocusRef?: false | import("react").RefObject<HTMLElement> | undefined;
+    onDismiss?: (() => void) | undefined;
+    blocking?: boolean | undefined;
+    maxHeight?: number | undefined;
+    scrollLocking?: boolean | undefined;
+    snapPoints?: import("react-spring-bottom-sheet/dist/types").snapPoints | undefined;
+    defaultSnap?: number | ((props: import("react-spring-bottom-sheet/dist/types").defaultSnapProps) => number) | undefined;
+    reserveScrollBarGap?: boolean | undefined;
+    skipInitialTransition?: boolean | undefined;
+    expandOnContentDrag?: boolean | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children"> & import("react").RefAttributes<import("react-spring-bottom-sheet").BottomSheetRef>>, keyof import("react").Component<any, {}, any>>;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $bg: string;
+}>> & string;
+export declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isErrorBorder?: boolean | undefined;
+    $isPadding: boolean;
+    $errorColor: string;
+}>> & string;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.BottomSheet = exports.Body = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactSpringBottomSheet = require("react-spring-bottom-sheet");
+require("react-spring-bottom-sheet/dist/style.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var BottomSheet = exports.BottomSheet = (0, _styledComponents["default"])(_reactSpringBottomSheet.BottomSheet).withConfig({
+  displayName: "styles__BottomSheet",
+  componentId: "sc-1kysg49-0"
+})(["--rsbs-backdrop-bg:", ";--rsbs-bg:", ";--rsbs-overlay-rounded:10px;& [data-rsbs-overlay],[data-rsbs-backdrop]{z-index:9999;}&::after{z-index:9999;}[data-rsbs-header]{", " padding:0;border-top-left-radius:10px;border-top-right-radius:10px;}[data-rsbs-overlay]{", "}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.backdropBg;
+}, function (_ref2) {
+  var $palette = _ref2.$palette;
+  return $palette.bg;
+}, function (_ref3) {
+  var $isHaveHeader = _ref3.$isHaveHeader;
+  return !$isHaveHeader && "\n            position: absolute;\n            height: 20px;\n            width: 100%;\n        ";
+}, function (_ref4) {
+  var $isHaveHeader = _ref4.$isHaveHeader;
+  return !$isHaveHeader && "\n            margin-bottom: -20px;\n        ";
+});
+var Title = exports.Title = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Title",
+  componentId: "sc-1kysg49-1"
+})(["padding:30px;background-color:", ";border-radius:inherit;"], function (_ref5) {
+  var $bg = _ref5.$bg;
+  return $bg;
+});
+var Body = exports.Body = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Body",
+  componentId: "sc-1kysg49-2"
+})(["position:relative;overflow:auto;flex:1;border-radius:10px 10px 0 0;", " ", ";"], function (_ref6) {
+  var $isErrorBorder = _ref6.$isErrorBorder,
+    $errorColor = _ref6.$errorColor;
+  return $isErrorBorder && "border-top: 2px solid ".concat($errorColor, ";");
+}, function (_ref7) {
+  var $isPadding = _ref7.$isPadding;
+  return $isPadding && 'padding: 32px 16px 36px';
+});

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+type TOption<TEntity> = {
+    value: string;
+    entity: TEntity;
+};
+export type TProps<TEntity> = {
+    isOpen: boolean;
+    onClose: () => void;
+    options: Array<TOption<TEntity>>;
+    renderOption: (option: TOption<TEntity>) => ReactNode;
+    onChange: (value: string, option?: TOption<TEntity>) => void;
+    isLoadingOptions: boolean;
+    promptMessage: string;
+    searchInputField: ReactNode;
+};
+export declare const EntityAutocompleteOptionsDrawer: <TEntity>({ isOpen, onClose, options, renderOption, onChange, isLoadingOptions, promptMessage, searchInputField, }: TProps<TEntity>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,62 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EntityAutocompleteOptionsDrawer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _Drawer = require("../Drawer");
+var _Scrollbar = require("../Scrollbar");
+var _Skeleton = require("../Skeleton");
+var _palette = require("../../../palette");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var loadingList = new Array(4).fill(_Skeleton.Skeleton);
+var EntityAutocompleteOptionsDrawer = exports.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;
+  var palette = (0, _palette.useComponentPalette)('entityAutocompleteOptionsDrawer');
+  var handleSelect = (0, _react.useCallback)(function (event) {
+    var optionIndex = JSON.parse(event.currentTarget.dataset.index);
+    var option = options[optionIndex];
+    onChange(option.value, option);
+    onClose();
+  }, [onClose, onChange, options]);
+  return /*#__PURE__*/_react["default"].createElement(_Drawer.Drawer, {
+    isOpen: isOpen,
+    onClose: onClose,
+    isPadding: false,
+    initialFocusRef: false
+  }, /*#__PURE__*/_react["default"].createElement(S.BodyWrapper, null, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, searchInputField), /*#__PURE__*/_react["default"].createElement(S.ContentWrapper, null, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+    maxHeight: 380
+  }, promptMessage && /*#__PURE__*/_react["default"].createElement(S.Prompt, {
+    $color: palette.prompt,
+    variant: "bodyMRegular"
+  }, promptMessage), isLoadingOptions && /*#__PURE__*/_react["default"].createElement(S.SkeletonListWrapper, null, loadingList.map(function (ComponentSkeleton, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react["default"].createElement(ComponentSkeleton, {
+        key: index,
+        height: "64px"
+      })
+    );
+  })), !isLoadingOptions && !promptMessage && options.map(function (option, index) {
+    return /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
+      // eslint-disable-next-line react/no-array-index-key
+      key: "".concat(option.value).concat(index),
+      tabIndex: -1,
+      type: "button",
+      onClick: handleSelect,
+      "data-index": JSON.stringify(index)
+    }, renderOption(option));
+  })))));
+};

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EntityAutocompleteOptionsDrawer, TProps } from '.';
+declare const meta: Meta<typeof EntityAutocompleteOptionsDrawer>;
+type TOption = {
+    id: string;
+    name: string;
+};
+export default meta;
+type TStory = StoryObj<TProps<TOption>>;
+export declare const Default: TStory;
+export declare const Loading: TStory;
+export declare const PromptMessage: TStory;

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

@@ -0,0 +1,99 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PromptMessage = exports.Loading = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = require(".");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function 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; }
+var meta = {
+  title: 'common/EntityAutocompleteOptionsDrawer',
+  component: _.EntityAutocompleteOptionsDrawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    onChange: {
+      action: 'onChange'
+    }
+  }
+};
+var _default = exports["default"] = meta;
+function Render(props) {
+  var _useState = (0, _react.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["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: 'button',
+    onClick: open
+  }, "Open"), /*#__PURE__*/_react["default"].createElement(_.EntityAutocompleteOptionsDrawer, _extends({}, props, {
+    isOpen: isOpen,
+    onClose: close
+  })));
+}
+var commonArgs = {
+  isLoadingOptions: false,
+  searchValue: '1234',
+  searchInputField: /*#__PURE__*/_react["default"].createElement("div", null, " Input here "),
+  renderOption: function renderOption(option) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, " ", option.entity.name, " ");
+  },
+  options: [{
+    value: '1',
+    entity: {
+      id: '1',
+      name: 'Name one'
+    }
+  }, {
+    value: '2',
+    entity: {
+      id: '2',
+      name: 'Name two'
+    }
+  }, {
+    value: '3',
+    entity: {
+      id: '3',
+      name: 'Name three'
+    }
+  }]
+};
+var Default = exports.Default = {
+  args: commonArgs,
+  render: Render
+};
+var Loading = exports.Loading = {
+  args: _objectSpread(_objectSpread({}, commonArgs), {}, {
+    isLoadingOptions: true
+  }),
+  render: Render
+};
+var PromptMessage = exports.PromptMessage = {
+  args: _objectSpread(_objectSpread({}, commonArgs), {}, {
+    promptMessage: 'PromptMessage'
+  }),
+  render: Render
+};

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

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TEntityAutocompleteOptionsDrawerPalette = {
+    prompt: string;
+};
+export declare const generateEntityAutocompleteOptionsDrawerPalette: (abstractPalette: TAbstractPalette) => TEntityAutocompleteOptionsDrawerPalette;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateEntityAutocompleteOptionsDrawerPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generateEntityAutocompleteOptionsDrawerPalette = exports.generateEntityAutocompleteOptionsDrawerPalette = function generateEntityAutocompleteOptionsDrawerPalette(abstractPalette) {
+  return {
+    prompt: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5)
+  };
+};

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+export declare const BodyWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SkeletonListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Prompt: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element?: "div" | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "p";
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "span";
+} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "button";
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<{
+    variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
+} & {
+    element: "input";
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}), {
+    $color: string;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonListWrapper = exports.Prompt = exports.OptionWrapper = exports.InputWrapper = exports.ContentWrapper = exports.BodyWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var BodyWrapper = exports.BodyWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__BodyWrapper",
+  componentId: "sc-r0dl76-0"
+})(["padding:32px 0 36px;"]);
+var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "sc-r0dl76-1"
+})(["padding:8px 16px;"]);
+var OptionWrapper = exports.OptionWrapper = _styledComponents["default"].button.withConfig({
+  displayName: "styles__OptionWrapper",
+  componentId: "sc-r0dl76-2"
+})(["width:100%;background:transparent;border:none;cursor:pointer;outline:none;color:inherit;"]);
+var ContentWrapper = exports.ContentWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__ContentWrapper",
+  componentId: "sc-r0dl76-3"
+})(["height:380px;"]);
+var SkeletonListWrapper = exports.SkeletonListWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__SkeletonListWrapper",
+  componentId: "sc-r0dl76-4"
+})(["display:flex;flex-direction:column;gap:16px;padding:8px 16px;"]);
+var Prompt = exports.Prompt = (0, _styledComponents["default"])(_Typography.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/index.d.ts

@@ -12,6 +12,8 @@ export { TextInput } from './components/form/TextInput';
 export type { TProps as TTextInputProps } from './components/form/TextInput';
 export { Dropdown } from './components/common/Dropdown';
 export type { TProps as TDropdownProps } from './components/common/Dropdown';
+export { Drawer } from './components/common/Drawer';
+export type { TProps as TDrawerProps } from './components/common/Drawer';
 export { Scrollbar } from './components/common/Scrollbar';
 export { Select } from './components/form/Select';
 export type { TProps as TSelectProps } from './components/form/Select';

package/dist/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "Divider", {
     return _Divider.Divider;
   }
 });
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.Drawer;
+  }
+});
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
   get: function get() {
@@ -266,6 +272,7 @@ var _PureInput = require("./components/form/PureInput");
 var _PositiveIntegerInput = require("./components/form/PositiveIntegerInput");
 var _TextInput = require("./components/form/TextInput");
 var _Dropdown = require("./components/common/Dropdown");
+var _Drawer = require("./components/common/Drawer");
 var _Scrollbar = require("./components/common/Scrollbar");
 var _Select = require("./components/form/Select");
 var _Calendar = require("./components/common/Calendar");

package/dist/palette/context.d.ts

@@ -19,6 +19,8 @@ import { TToastPalette } from '../components/common/Toast/palette';
 import { TPaymentCardPalette } from '../components/payment/PaymentCard/palette';
 import { TAutocompleteDefaultOptionPalette } from '../components/form/Autocomplete/components/AutocompleteDefaultOption/palette';
 import { TOrganizationAutocompleteItemPalette } from '../components/form/Autocomplete/components/OrganizationAutocompleteItem/palette';
+import { TDrawerPalette } from '../components/common/Drawer/palette';
+import { TEntityAutocompleteOptionsDrawerPalette } from '../components/common/EntityAutocompleteOptionsDrawer/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -40,6 +42,8 @@ type TContext = {
     paymentCard: TPaymentCardPalette;
     autocompleteDefaultOption: TAutocompleteDefaultOptionPalette;
     organizationAutocompleteItem: TOrganizationAutocompleteItemPalette;
+    drawer: TDrawerPalette;
+    entityAutocompleteOptionsDrawer: TEntityAutocompleteOptionsDrawerPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -26,6 +26,8 @@ var _palette17 = require("../components/common/Toast/palette");
 var _palette18 = require("../components/payment/PaymentCard/palette");
 var _palette19 = require("../components/form/Autocomplete/components/AutocompleteDefaultOption/palette");
 var _palette20 = require("../components/form/Autocomplete/components/OrganizationAutocompleteItem/palette");
+var _palette21 = require("../components/common/Drawer/palette");
+var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
@@ -46,5 +48,7 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   toast: (0, _palette17.generateToastPalette)(_constants.defaultAbstractPalette),
   paymentCard: (0, _palette18.generatePaymentCardPalette)(_constants.defaultAbstractPalette),
   autocompleteDefaultOption: (0, _palette19.generateAutocompleteDefaultOptionPalette)(_constants.defaultAbstractPalette),
-  organizationAutocompleteItem: (0, _palette20.generateOrganizationAutocompleteItemPalette)(_constants.defaultAbstractPalette)
+  organizationAutocompleteItem: (0, _palette20.generateOrganizationAutocompleteItemPalette)(_constants.defaultAbstractPalette),
+  drawer: (0, _palette21.generateDrawerPalette)(_constants.defaultAbstractPalette),
+  entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -27,6 +27,8 @@ var _palette17 = require("../components/common/Toast/palette");
 var _palette18 = require("../components/payment/PaymentCard/palette");
 var _palette19 = require("../components/form/Autocomplete/components/AutocompleteDefaultOption/palette");
 var _palette20 = require("../components/form/Autocomplete/components/OrganizationAutocompleteItem/palette");
+var _palette21 = require("../components/common/Drawer/palette");
+var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/palette");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _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); }
@@ -66,7 +68,9 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       toast: (0, _palette17.generateToastPalette)(mergedAbstractPalette),
       paymentCard: (0, _palette18.generatePaymentCardPalette)(mergedAbstractPalette),
       autocompleteDefaultOption: (0, _palette19.generateAutocompleteDefaultOptionPalette)(mergedAbstractPalette),
-      organizationAutocompleteItem: (0, _palette20.generateOrganizationAutocompleteItemPalette)(mergedAbstractPalette)
+      organizationAutocompleteItem: (0, _palette20.generateOrganizationAutocompleteItemPalette)(mergedAbstractPalette),
+      drawer: (0, _palette21.generateDrawerPalette)(mergedAbstractPalette),
+      entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

package/dist/palette/usePalette.d.ts

@@ -19,4 +19,6 @@ export declare const usePalette: () => {
     paymentCard: import("../components/payment/PaymentCard/palette").TPaymentCardPalette;
     autocompleteDefaultOption: import("../components/form/Autocomplete/components/AutocompleteDefaultOption/palette").TAutocompleteDefaultOptionPalette;
     organizationAutocompleteItem: import("../components/form/Autocomplete/components/OrganizationAutocompleteItem/palette").TOrganizationAutocompleteItemPalette;
+    drawer: import("../components/common/Drawer/palette").TDrawerPalette;
+    entityAutocompleteOptionsDrawer: import("../components/common/EntityAutocompleteOptionsDrawer/palette").TEntityAutocompleteOptionsDrawerPalette;
 };

package/dist/utils/transformColorByHsl.d.ts

@@ -0,0 +1,7 @@
+type Hsl = {
+    hue: number;
+    saturation: number;
+    lightness: number;
+};
+export declare const transformColorByHsl: (base: string, diff: Hsl) => string;
+export {};

package/dist/utils/transformColorByHsl.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformColorByHsl = void 0;
+var _polished = require("polished");
+var transformColorByHsl = exports.transformColorByHsl = function transformColorByHsl(base, diff) {
+  var hslBase = (0, _polished.parseToHsl)(base);
+  var hue = hslBase.hue - diff.hue;
+  var saturation = hslBase.saturation - diff.saturation;
+  var lightness = hslBase.lightness - diff.lightness;
+  return (0, _polished.hslToColorString)({
+    hue: Math.min(Math.max(hue, 0), 360),
+    saturation: Math.min(Math.max(saturation, 0), 1),
+    lightness: Math.min(Math.max(lightness, 0), 1)
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.128",
+    "version": "0.1.0-alpha.129",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {
@@ -58,6 +58,7 @@
         "react-calendar": "^4.8.0",
         "react-responsive": "^9.0.2",
         "react-scrollbars-custom": "^4.1.1",
+        "react-spring-bottom-sheet": "^3.4.1",
         "react-toastify": "^9.1.3"
     },
     "peerDependencies": {