@appquality/unguess-design-system 2.12.52 → 2.12.53

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# v2.12.53 (Thu Jan 12 2023)
+
+#### 🐛 Bug Fix
+
+- Add extra large modal size, counter select and creatable multiselect [#169](https://github.com/AppQuality/unguess-design-system/pull/169) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon) [@d-beezee](https://github.com/d-beezee))
+- chore: Remove wrong import [#170](https://github.com/AppQuality/unguess-design-system/pull/170) ([@d-beezee](https://github.com/d-beezee))
+- fix: Fix import [#168](https://github.com/AppQuality/unguess-design-system/pull/168) ([@d-beezee](https://github.com/d-beezee))
+- Un 296 creatable multiselect [#165](https://github.com/AppQuality/unguess-design-system/pull/165) ([@d-beezee](https://github.com/d-beezee) [@cannarocks](https://github.com/cannarocks))
+- fix(counter): Style autocomplete with selected item [#167](https://github.com/AppQuality/unguess-design-system/pull/167) ([@d-beezee](https://github.com/d-beezee))
+- feat: Add counter multiselect component [#166](https://github.com/AppQuality/unguess-design-system/pull/166) ([@d-beezee](https://github.com/d-beezee))
+- feat(modal): add extraLarge size [#163](https://github.com/AppQuality/unguess-design-system/pull/163) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 3
+
+- [@d-beezee](https://github.com/d-beezee)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.52 (Thu Dec 15 2022)
 
 #### 🐛 Bug Fix

package/build/index.d.ts

@@ -28,7 +28,7 @@ export * as DropdownField from "./stories/dropdowns/field";
 export * from "./stories/dropdowns/item";
 export * from "./stories/dropdowns/item-content";
 export * from "./stories/dropdowns/menu";
-export * from "./stories/dropdowns/multiselect";
+export * from "./stories/dropdowns/countermultiselect";
 export * from "./stories/dropdowns/select";
 export * from "./stories/dropdowns/autocomplete";
 export * from "./stories/dropdowns/menuheader";
@@ -54,6 +54,7 @@ export * from "./stories/loaders/spinner";
 export * from "./stories/page/pageLoader";
 export * from "./stories/login-form";
 export * from "./stories/logo";
+export * from "./stories/multiselect";
 export * from "./stories/modals";
 export * from "./stories/modals/fullscreen";
 export * from "./stories/navigation/body";

package/build/index.js

@@ -232,8 +232,47 @@ const gradients = {
     dark: `linear-gradient(90.81deg, ${hex2rgba(palette.blue[800])} 0%, ${hex2rgba(palette.blue[600])} 100%);`,
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 const fontWeights = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 });
 
+const colors = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] });
+
 var _a, _b, _c, _d, _e, _f, _g$7, _h;
 const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$7 = reactTheming.DEFAULT_THEME.components) === null || _g$7 === void 0 ? void 0 : _g$7.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
         imgMaxHeight: "214px",
@@ -241,9 +280,29 @@ const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.co
         thumbSize: "60px",
     }, "tabs.tab": ({ isSelected }) => {
         return isSelected ? { fontWeight: fontWeights.semibold } : undefined;
+    }, "forms.input": ({ isFocused }) => {
+        return isFocused
+            ? {
+                boxShadow: `0 0 0 3px ${palette.kale[200]}}`,
+            }
+            : undefined;
+    }, "dropdowns.item": (_a) => {
+        var { addable, checked } = _a; __rest(_a, ["addable", "checked"]);
+        return Object.assign(Object.assign(Object.assign({}, (addable
+            ? {
+                color: colors.primaryHue,
+                cursor: "pointer",
+            }
+            : {})), (checked
+            ? {
+                fontWeight: fontWeights.semibold,
+            }
+            : {})), { "&:hover": {
+                backgroundColor: palette.kale[100],
+            } });
     } });
 
-const theme = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME), { breakpoints: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }), levels: {
+const theme = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME), { breakpoints: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors, palette: palette, fonts: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }), levels: {
         back: -1,
         base: 0,
         front: 100,
@@ -354,33 +413,6 @@ const Avatar = (props) => {
 };
 Avatar.Text = UgAvatar.Text;
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
  * <hr>
@@ -533,10 +565,10 @@ const Tag = (props) => jsxRuntime.jsx(reactTags.Tag, Object.assign({}, props));
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
-var _g$6, _path$q;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+var _g$6, _path$r;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -548,16 +580,16 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
     opacity: 0.3,
     d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
     fill: "#003A57"
-  }))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
     fill: "#003A57"
   })));
 };
 
-var _g$5, _path$p, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+var _g$5, _path$q, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     width: 25,
     height: 24,
     viewBox: "0 0 25 24",
@@ -568,7 +600,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.1641 24C18.7915 24 24.1641 18.6274 24.1641 12C24.1641 5.37258 18.7915 0 12.1641 0C5.53665 0 0.164062 5.37258 0.164062 12C0.164062 18.6274 5.53665 24 12.1641 24Z",
     fill: "#D3ECDB"
-  }))), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.8,
     d: "M12.653 3.1964C8.84605 3.1964 5.76496 6.27748 5.76496 10.0844C5.76496 10.2596 5.76496 10.4347 5.7904 10.5854C5.46458 11.1861 4.98908 12.0129 4.41279 12.5138C3.98719 12.8896 4.08697 13.2907 4.13687 13.4404C4.26211 13.7662 4.61237 14.0411 5.18866 14.2417C5.38924 14.3171 5.61427 14.367 5.81485 14.4169L5.84028 16.8463C5.84028 17.7983 6.6416 18.625 7.61905 18.625L9.09645 18.1495L9.24713 19.0262C9.34693 19.6025 9.84787 20.0281 10.4496 20.0281C10.5249 20.0281 10.6003 20.0281 10.6746 20.0026L15.3084 19.1769C15.9845 19.0516 16.4101 18.4254 16.3103 17.7494L15.9845 16.1213C18.1634 14.9188 19.541 12.5891 19.541 10.0843C19.541 6.30267 16.4356 3.19629 12.6529 3.19629L12.653 3.1964Z",
     fill: "#70C38A"
@@ -625,16 +657,16 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var _path$o, _path2$3, _path3$2, _path4$1;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+var _path$p, _path2$3, _path3$2, _path4$1;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -649,16 +681,16 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
   })));
 };
 
-var _path$n, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+var _path$o, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -694,16 +726,16 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
   })));
 };
 
-var _path$m, _path2$1, _path3;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+var _path$n, _path2$1, _path3;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -1721,7 +1753,7 @@ const UgItem = styled__default["default"](reactDropdowns.Item) `
     background-color: transparent;
   }
 `;
-const Item = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
+const Item$1 = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
 
 const Container = styled__default["default"].div `
   display: flex;
@@ -1777,14 +1809,43 @@ const MediaBody = (props) => jsxRuntime.jsx(reactDropdowns.MediaBody, Object.ass
 const MediaFigure = (props) => jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props));
 const MediaItem = (props) => jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props));
 
-/**
- * Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
- * <hr>
- * Used for this:
-    - To choose multiple items from a list of options
-    - To filter through a set of data by typing
- */
-const Multiselect = (props) => (jsxRuntime.jsx(reactDropdowns.Multiselect, Object.assign({}, props)));
+const StyledAutocomplete = styled__default["default"](reactDropdowns.Autocomplete) `
+  ${(props) => props.hasSelectedItems &&
+    `
+    border-color: ${props.theme.colors.primaryHue};
+    background-color: ${props.theme.colors.primaryHue};
+    color: white;
+    & > input, & > svg {
+      color: white;
+    }
+  `}
+`;
+const CounterMultiselect = ({ options, label, i18n, onChange, }) => {
+    var _a, _b;
+    const [selectedItems, setSelectedItems] = React.useState(options.filter((o) => o.selected));
+    const [inputValue, setInputValue] = React.useState("");
+    const [matchingOptions, setMatchingOptions] = React.useState(options);
+    React.useEffect(() => {
+        setMatchingOptions(options.filter((option) => option.label
+            .trim()
+            .toLowerCase()
+            .indexOf(inputValue.trim().toLowerCase()) !== -1));
+    }, [inputValue, options]);
+    const hasSelectedItems = selectedItems.length > 0;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: selectedItems, onSelect: (items) => {
+                if (items) {
+                    setSelectedItems(items);
+                    if (onChange)
+                        onChange(items);
+                }
+            }, downshiftProps: {
+                itemToString: (item) => item && item.id,
+            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(reactDropdowns.Field, { children: [label && jsxRuntime.jsx(reactDropdowns.Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
+                                ? (i18n === null || i18n === void 0 ? void 0 : i18n.counterText)
+                                    ? i18n.counterText(selectedItems.length)
+                                    : `Items (${selectedItems.length})`
+                                : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(reactDropdowns.Menu, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ disabled: true }, { children: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _b !== void 0 ? _b : "No matches found" }))) : (matchingOptions.map((option) => (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ value: option }, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.id)))) })] })) }));
+};
 
 const UgSelect = styled__default["default"](reactDropdowns.Select) `
   ${(props) => props.isPrimary &&
@@ -2077,31 +2138,31 @@ const editorStyle = styled.css `
   }
 `;
 
-var _path$l;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+var _path$m;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgBoldFill = function SvgBoldFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
   })));
 };
 
-var _path$k;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+var _path$l;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 var SvgItalicFill = function SvgItalicFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2110,16 +2171,16 @@ var SvgItalicFill = function SvgItalicFill(props) {
   })));
 };
 
-var _path$j, _path2;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var _path$k, _path2;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgQuoteFill = function SvgQuoteFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
   })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2132,9 +2193,9 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
 };
 
 var _g$4;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 var SvgH1Fill = function SvgH1Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2162,9 +2223,9 @@ var SvgH1Fill = function SvgH1Fill(props) {
 };
 
 var _g$3;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 var SvgH2Fill = function SvgH2Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2192,9 +2253,9 @@ var SvgH2Fill = function SvgH2Fill(props) {
 };
 
 var _g$2;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgH3Fill = function SvgH3Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2443,9 +2504,9 @@ const Hint = styled__default["default"](reactForms.Hint) ``;
 const Input = React.forwardRef((props, ref) => jsxRuntime.jsx(UgInput, Object.assign({ ref: ref }, props)));
 
 var _g$1;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgNotesStroke = function SvgNotesStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2564,16 +2625,16 @@ const UgRadio = styled__default["default"](reactForms.Radio) ``;
    **/
 const Radio = (props) => jsxRuntime.jsx(UgRadio, Object.assign({}, props));
 
-var _path$i;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$j;
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgCheckLg = function SvgCheckLg(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     fill: "#68737D",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M14.6464 2.64645C14.8417 2.45118 15.1583 2.45118 15.3536 2.64645C15.5488 2.84171 15.5488 3.15829 15.3536 3.35355L5.35355 13.3536C5.15829 13.5488 4.84171 13.5488 4.64645 13.3536L0.646447 9.35355C0.451184 9.15829 0.451184 8.84171 0.646447 8.64645C0.841709 8.45118 1.15829 8.45118 1.35355 8.64645L5 12.2929L14.6464 2.64645Z"
@@ -2655,46 +2716,46 @@ const Row$1 = (props) => jsxRuntime.jsx(reactGrid.Row, Object.assign({}, props))
  */
 const Grid = (props) => jsxRuntime.jsx(reactGrid.Grid, Object.assign({}, props));
 
-var _path$h;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$i;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgUgSquare = function SvgUgSquare(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19Z",
     fill: "#E80C7A"
   })));
 };
 
-var _path$g;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+var _path$h;
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgUgCircle = function SvgUgCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
     fill: "#FFCD1A"
   })));
 };
 
-var _path$f;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+var _path$g;
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgUgTriangle = function SvgUgTriangle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11.9993 7.32625L18.3893 17.5563H5.60929L11.9993 7.32625ZM11.1493 4.91625L2.94929 18.0262C2.53929 18.6962 3.01929 19.5563 3.79929 19.5563H20.1993C20.9893 19.5563 21.4593 18.6962 21.0493 18.0262L12.8493 4.91625C12.4593 4.28625 11.5393 4.28625 11.1493 4.91625Z",
     fill: "#7B0DFF"
   })));
@@ -2743,16 +2804,16 @@ const Body$1 = (props) => jsxRuntime.jsx(UgBody, Object.assign({}, props));
  */
 const Content = (props) => jsxRuntime.jsx(reactChrome.Content, Object.assign({}, props));
 
-var _path$e;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var _path$f;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
   })));
@@ -2800,16 +2861,16 @@ const Logo = (props) => {
         }[props.type] })));
 };
 
-var _path$d;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+var _path$e;
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 var SvgMenuStroke = function SvgMenuStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2832,7 +2893,7 @@ const WorkspacesDropdown = (props) => {
             itemToString: (item) => item && item.company,
         } }, { children: [jsxRuntime.jsx(reactDropdowns.Field, { children: jsxRuntime.jsx(Select, Object.assign({ style: { color: theme.colors.primaryHue } }, { children: jsxRuntime.jsx(StyledEllipsis, Object.assign({ isCompact: props.isCompact }, { children: selectedWorkspace
                             ? selectedWorkspace.company + "'s workspace"
-                            : "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map((item) => (jsxRuntime.jsx(Item, Object.assign({ value: item }, { children: item.company }))))] })] })));
+                            : "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map((item) => (jsxRuntime.jsx(Item$1, Object.assign({ value: item }, { children: item.company }))))] })] })));
 };
 
 const LogoIconContainer = styled__default["default"](reactChrome.HeaderItem) `
@@ -2973,31 +3034,31 @@ const NavItemIcon = (props) => jsxRuntime.jsx(UgNavIcon, Object.assign({}, props
 
 const NavItemText = (props) => (jsxRuntime.jsx(reactChrome.NavItemText, Object.assign({}, props, { children: jsxRuntime.jsx(Ellipsis, Object.assign({ style: { width: "158px" } }, { children: props.children })) })));
 
-var _path$c;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+var _path$d;
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
   })));
 };
 
-var _path$b;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+var _path$c;
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
   })));
@@ -3065,25 +3126,25 @@ const NavItemProject = NavItemComponent;
 NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
 
-var _path$a;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+var _path$b;
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var SvgHomeFill = function SvgHomeFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
     focusable: "false",
     viewBox: "0 0 26 26"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
   })));
 };
 
-var _linearGradient, _path$9;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+var _linearGradient, _path$a;
+function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
@@ -3099,16 +3160,16 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
     className: "stop3",
     offset: "100%",
     stopColor: "#001825"
-  }))), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "url(#unguessIconGradient)",
     d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
   })));
 };
 
 var _g, _defs$2;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 var SvgToken = function SvgToken(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     fill: "none",
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg"
@@ -3144,15 +3205,15 @@ var SvgToken = function SvgToken(props) {
   })))));
 };
 
-var _path$8;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+var _path$9;
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var SvgFolderIcon = function SvgFolderIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9.99976 4H6.99976V3.5C6.99976 2.62386 6.3759 2 5.49976 2H2.49976C1.62362 2 0.999758 2.62386 0.999758 3.5V6H0.499758C0.174472 6 -0.0642066 6.30569 0.0146868 6.62127L1.01469 10.6213C1.07033 10.8439 1.27032 11 1.49976 11H10.4998C10.7292 11 10.9292 10.8439 10.9848 10.6213L11.9848 6.62127C12.0637 6.30569 11.825 6 11.4998 6H10.9998V5C10.9998 4.42386 10.5759 4 9.99976 4ZM10.8594 7H1.14015L1.89015 10H10.1094L10.8594 7ZM1.99976 6H9.99976V5H5.99976V3.5C5.99976 3.17614 5.82362 3 5.49976 3H2.49976C2.1759 3 1.99976 3.17614 1.99976 3.5V6Z",
@@ -3160,16 +3221,16 @@ var SvgFolderIcon = function SvgFolderIcon(props) {
   })));
 };
 
-var _path$7, _defs$1;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var _path$8, _defs$1;
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 var SvgTemplates = function SvgTemplates(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     width: 26,
     height: 26,
     viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 5H3.5C3.2 5 3 5.2 3 5.5V18.5C3 18.8 3.2 19 3.5 19H7C10 19 11 21 11 21H12V7C12 6.9 11 5 8 5ZM9 15H6C5.5 15 5 14.5 5 14C5 13.5 5.5 13 6 13H9C9.5 13 10 13.5 10 14C10 14.5 9.5 15 9 15ZM9 11H6C5.5 11 5 10.5 5 10C5 9.5 5.5 9 6 9H9C9.5 9 10 9.5 10 10C10 10.5 9.5 11 9 11ZM14 7V21H15C15 21 16 19 19 19H22.5C22.8 19 23 18.8 23 18.5V5.5C23 5.2 22.8 5 22.5 5H18C15 5 14 6.9 14 7ZM16 14C16 13.5 16.5 13 17 13H20C20.5 13 21 13.5 21 14C21 14.5 20.5 15 20 15H17C16.5 15 16 14.5 16 14ZM16 10C16 9.5 16.5 9 17 9H20C20.5 9 21 9.5 21 10C21 10.5 20.5 11 20 11H17C16.5 11 16 10.5 16 10Z",
@@ -3189,16 +3250,16 @@ var SvgTemplates = function SvgTemplates(props) {
   })))));
 };
 
-var _path$6, _defs;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var _path$7, _defs;
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 var SvgTemplatesActive = function SvgTemplatesActive(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     width: 26,
     height: 26,
     viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 5H3.5C3.2 5 3 5.2 3 5.5V18.5C3 18.8 3.2 19 3.5 19H7C10 19 11 21 11 21H12V7C12 6.9 11 5 8 5ZM9 15H6C5.5 15 5 14.5 5 14C5 13.5 5.5 13 6 13H9C9.5 13 10 13.5 10 14C10 14.5 9.5 15 9 15ZM9 11H6C5.5 11 5 10.5 5 10C5 9.5 5.5 9 6 9H9C9.5 9 10 9.5 10 10C10 10.5 9.5 11 9 11ZM14 7V21H15C15 21 16 19 19 19H22.5C22.8 19 23 18.8 23 18.5V5.5C23 5.2 22.8 5 22.5 5H18C15 5 14 6.9 14 7ZM16 14C16 13.5 16.5 13 17 13H20C20.5 13 21 13.5 21 14C21 14.5 20.5 15 20 15H17C16.5 15 16 14.5 16 14ZM16 10C16 9.5 16.5 9 17 9H20C20.5 9 21 9.5 21 10C21 10.5 20.5 11 20 11H17C16.5 11 16 10.5 16 10Z",
@@ -3415,13 +3476,102 @@ const LoginForm = (props) => {
                         } }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, Object.assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] }));
 };
 
-const ugModalBody = styled__default["default"](reactModals.Body) `
+var _path$6;
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var SvgPlus = function SvgPlus(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.5 2C7.22386 2 7 2.22386 7 2.5V8H1.5C1.22386 8 1 8.22386 1 8.5C1 8.77614 1.22386 9 1.5 9H7V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V9H13.5C13.7761 9 14 8.77614 14 8.5C14 8.22386 13.7761 8 13.5 8H8V2.5C8 2.22386 7.77614 2 7.5 2Z",
+    fill: "#68737D"
+  })));
+};
+
+const CustomItem$1 = reactDropdowns.Item;
+const AddableItem = (props) => {
+    return (jsxRuntime.jsxs(CustomItem$1, Object.assign({ onClick: props.onClick, addable: true, disabled: true }, { children: [jsxRuntime.jsx(SvgPlus, { style: {
+                    position: "absolute",
+                    left: "0.6%",
+                    top: "calc(50% - 8px)",
+                } }), props.label] })));
+};
+
+const CustomItem = reactDropdowns.Item;
+const Item = ({ option, checked, }) => {
+    return (jsxRuntime.jsx(CustomItem, Object.assign({ value: option, checked: checked }, { children: jsxRuntime.jsx("span", { children: option.label }) }), `${option.label}-${option.id}`));
+};
+
+const useOptions = ({ options, selectedItems, onChange, }) => {
+    const [currentOptions, setCurrentOptions] = React.useState(options);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [currentSelectedItems, setSelectedItems] = React.useState(selectedItems || []);
+    const [inputValue, setInputValue] = React.useState("");
+    const [matchingOptions, setMatchingOptions] = React.useState(options);
+    const selectItems = (selection, newLabel) => __awaiter(void 0, void 0, void 0, function* () {
+        setIsLoading(true);
+        const unselectedItems = currentOptions.filter((option) => !selection.find((selectedItem) => selectedItem.id === option.id));
+        let newSelectedItems = selection;
+        if (onChange) {
+            newSelectedItems = yield onChange(selection, newLabel);
+        }
+        setCurrentOptions([...unselectedItems, ...newSelectedItems]);
+        setSelectedItems(newSelectedItems);
+        setInputValue("");
+        setIsLoading(false);
+    });
+    React.useEffect(() => {
+        const matchedOptions = currentOptions.filter((option) => {
+            return (option.label
+                .trim()
+                .toLowerCase()
+                .indexOf(inputValue.trim().toLowerCase()) !== -1);
+        });
+        setMatchingOptions(matchedOptions);
+    }, [inputValue]);
+    return {
+        currentOptions,
+        currentSelectedItems,
+        matchingOptions,
+        inputValue,
+        setInputValue,
+        selectItems,
+        isLoading,
+    };
+};
+
+const DisabledItem = ({ label }) => (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ disabled: true }, { children: label })));
+const MultiSelect = ({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }) => {
+    var _a, _b, _c;
+    const { isLoading, currentSelectedItems, matchingOptions, inputValue, setInputValue, selectItems, } = useOptions({ options, selectedItems, onChange });
+    const itemToString = (item) => (item ? item.id : "");
+    return (jsxRuntime.jsx("div", Object.assign({ style: isLoading ? { pointerEvents: "none", opacity: "0.3" } : {} }, { children: jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: currentSelectedItems, onSelect: (items) => selectItems(items), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(reactDropdowns.Field, { children: [jsxRuntime.jsx(reactDropdowns.Label, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => {
+                                            selectItems(currentSelectedItems.filter((item) => item.id !== value.id));
+                                        } })] }))) })] }), jsxRuntime.jsxs(reactDropdowns.Menu, { children: [jsxRuntime.jsxs("div", Object.assign({ style: { maxHeight: menuHeight !== null && menuHeight !== void 0 ? menuHeight : "200px" } }, { children: [matchingOptions.map((option) => {
+                                    const items = currentSelectedItems.map((item) => itemToString(item));
+                                    return (jsxRuntime.jsx(Item, { option: option, checked: items.includes(itemToString(option)) }));
+                                }), matchingOptions.length === 0 && (jsxRuntime.jsx(DisabledItem, { label: (_c = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _c !== void 0 ? _c : "No matches found" }))] })), creatable &&
+                            inputValue.length > 0 &&
+                            !matchingOptions.find((item) => item.label.toLowerCase() === inputValue.toLowerCase()) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(AddableItem, { onClick: () => selectItems(currentSelectedItems, inputValue), label: (i18n === null || i18n === void 0 ? void 0 : i18n.addNew)
+                                        ? i18n.addNew(inputValue)
+                                        : `Want to add ${inputValue}?` })] })) : null] })] })) })));
+};
+
+const UgModalBody = styled__default["default"](reactModals.Body) `
   color: ${({ theme }) => theme.palette.grey["800"]};
 `;
-const Modal = (props) => jsxRuntime.jsx(reactModals.Modal, Object.assign({}, props));
+const UgModal = styled__default["default"](reactModals.Modal) `
+  ${({ isExtraLarge }) => isExtraLarge && "height: 90%; width: 90%;"}
+`;
+const Modal = (props) => jsxRuntime.jsx(UgModal, Object.assign({}, props));
 const FooterItem = reactModals.FooterItem;
 Modal.Header = reactModals.Header;
-Modal.Body = ugModalBody;
+Modal.Body = UgModalBody;
 Modal.Footer = reactModals.Footer;
 
 const StyledModal$1 = styled__default["default"](Modal) `
@@ -4424,6 +4574,7 @@ exports.Col = Col;
 exports.ContainerCard = ContainerCard;
 exports.Content = Content;
 exports.Counter = Counter;
+exports.CounterMultiselect = CounterMultiselect;
 exports.CursorPagination = CursorPagination;
 exports.Drawer = Drawer;
 exports.Dropdown = Dropdown;
@@ -4449,7 +4600,7 @@ exports.IconButton = IconButton;
 exports.InfoCard = InfoCard;
 exports.Input = Input;
 exports.InputToggle = InputToggle;
-exports.Item = Item;
+exports.Item = Item$1;
 exports.ItemContent = ItemContent;
 exports.ItemMeta = ItemMeta;
 exports.LG = LG;
@@ -4467,7 +4618,7 @@ exports.MenuHeaderItem = MenuHeaderItem;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.ModalFullScreen = ModalFullScreen;
-exports.Multiselect = Multiselect;
+exports.MultiSelect = MultiSelect;
 exports.Nav = Nav;
 exports.NavDivider = NavDivider;
 exports.NavItem = NavItem;

package/build/stories/dropdowns/countermultiselect/_types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface CounterMultiselectArgs {
+    options: {
+        id: number;
+        label: string;
+        selected?: boolean;
+    }[];
+    label?: React.ReactNode;
+    onChange?: (selectedItems: CounterMultiselectArgs["options"]) => void;
+    i18n?: {
+        counterText?: (count: number) => string;
+        noItems?: string;
+        noMatches?: string;
+    };
+}

package/build/stories/dropdowns/countermultiselect/index.d.ts

@@ -0,0 +1,3 @@
+import { CounterMultiselectArgs } from "./_types";
+declare const CounterMultiselect: ({ options, label, i18n, onChange, }: CounterMultiselectArgs) => JSX.Element;
+export { CounterMultiselect };

package/build/stories/dropdowns/countermultiselect/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentMeta, Story } from "@storybook/react";
+import { CounterMultiselectArgs } from "./_types";
+export declare const Default: Story<CounterMultiselectArgs>;
+declare const _default: ComponentMeta<({ options, label, i18n, onChange, }: CounterMultiselectArgs) => JSX.Element>;
+export default _default;

package/build/stories/modals/_types.d.ts

@@ -23,6 +23,10 @@ export interface ModalArgs extends IModalProps {
      * Applies large styling
      */
     isLarge?: boolean;
+    /**
+     * Applies Extra-large styling
+     */
+    isExtraLarge?: boolean;
     /**
      * Directs keyboard focus to the modal on mount
      */

package/build/stories/multiselect/AddableItem.d.ts

@@ -0,0 +1,4 @@
+import { IItemProps as ZenDeskIItemProps } from "@zendeskgarden/react-dropdowns";
+export declare const AddableItem: (props: ZenDeskIItemProps & {
+    label: string;
+}) => JSX.Element;

package/build/stories/multiselect/Item.d.ts

@@ -0,0 +1,11 @@
+import { IItemProps as ZenDeskIItemProps } from "@zendeskgarden/react-dropdowns";
+import { MultiSelectProps } from "./_types";
+export declare type IItemProps = ZenDeskIItemProps & {
+    checked?: boolean;
+};
+export declare const Item: ({ option, checked, }: ZenDeskIItemProps & {
+    checked?: boolean | undefined;
+} & {
+    checked: boolean;
+    option: MultiSelectProps["options"][number];
+}) => JSX.Element;

package/build/stories/multiselect/_types.d.ts

@@ -0,0 +1,20 @@
+declare type Item = {
+    id: string | number;
+    label: string;
+};
+export declare type MultiSelectProps = {
+    maxItems?: number;
+    options: Item[];
+    selectedItems?: Item[];
+    onChange?: (selectedItems: Item[], newItem?: string) => Promise<Item[]>;
+    creatable?: boolean;
+    size: "small" | "medium";
+    menuHeight?: string;
+    i18n: {
+        placeholder?: string;
+        label?: string;
+        noMatches?: string;
+        addNew?: (value: string) => string;
+    };
+};
+export {};

package/build/stories/multiselect/index.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectProps } from "./_types";
+export declare const MultiSelect: ({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }: MultiSelectProps) => JSX.Element;

package/build/stories/multiselect/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { ComponentMeta, Story } from "@storybook/react";
+import { MultiSelectProps } from "./_types";
+export declare const Default: Story<MultiSelectProps>;
+export declare const WithTagCreation: Story<MultiSelectProps>;
+declare const _default: ComponentMeta<({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }: MultiSelectProps) => JSX.Element>;
+export default _default;

package/build/stories/multiselect/useOptions.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { MultiSelectProps } from "./_types";
+export declare const useOptions: ({ options, selectedItems, onChange, }: {
+    options: MultiSelectProps["options"];
+    selectedItems: MultiSelectProps["selectedItems"];
+    onChange: MultiSelectProps["onChange"];
+}) => {
+    currentOptions: {
+        id: string | number;
+        label: string;
+    }[];
+    currentSelectedItems: {
+        id: string | number;
+        label: string;
+    }[];
+    matchingOptions: {
+        id: string | number;
+        label: string;
+    }[];
+    inputValue: string;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    selectItems: (selection: {
+        id: string | number;
+        label: string;
+    }[], newLabel?: string) => Promise<void>;
+    isLoading: boolean;
+};

package/build/stories/theme/colors.d.ts

@@ -0,0 +1,12 @@
+export declare const colors: {
+    primaryHue: string;
+    warningHue: string;
+    successHue: string;
+    dangerHue: string;
+    accentHue: string;
+    base: "light" | "dark";
+    background: string;
+    foreground: string;
+    neutralHue: string;
+    chromeHue: string;
+};

package/build/stories/theme/components.d.ts

@@ -12,4 +12,20 @@ export declare const components: {
     }) => {
         fontWeight: number;
     } | undefined;
+    "forms.input": ({ isFocused }: {
+        isFocused: boolean;
+    }) => {
+        boxShadow: string;
+    } | undefined;
+    "dropdowns.item": ({ addable, checked, ...rest }: {
+        addable: boolean;
+        checked: boolean;
+    }) => {
+        "&:hover": {
+            backgroundColor: string;
+        };
+        fontWeight?: number | undefined;
+        color?: string | undefined;
+        cursor?: string | undefined;
+    };
 };

package/build/stories/theme/index.d.ts

@@ -217,6 +217,22 @@ declare const theme: {
         }) => {
             fontWeight: number;
         } | undefined;
+        "forms.input": ({ isFocused }: {
+            isFocused: boolean;
+        }) => {
+            boxShadow: string;
+        } | undefined;
+        "dropdowns.item": ({ addable, checked, ...rest }: {
+            addable: boolean;
+            checked: boolean;
+        }) => {
+            "&:hover": {
+                backgroundColor: string;
+            };
+            fontWeight?: number | undefined;
+            color?: string | undefined;
+            cursor?: string | undefined;
+        };
     };
     shadows: {
         boxShadow: (theme: import("@zendeskgarden/react-theming").IGardenTheme) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.52",
+  "version": "2.12.53",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",

package/build/stories/dropdowns/multiselect/_types.d.ts

@@ -1,17 +0,0 @@
-import { IMultiselectProps } from "@zendeskgarden/react-dropdowns";
-export interface MultiselectArgs extends IMultiselectProps {
-    /** Applies compact styling */
-    isCompact?: boolean;
-    /** Removes borders and padding */
-    isBare?: boolean;
-    /** Indicates that the element is not interactive */
-    disabled?: boolean;
-    /** Applies inset `box-shadow` styling on focus */
-    focusInset?: boolean;
-    /** Defines text that appears in the element when no items are selected */
-    placeholder?: string;
-    /** Defines the element's validation state */
-    validation?: "success" | "warning" | "error";
-    /** Determines the maximum number of items displayed while collapsed */
-    maxItems?: number;
-}

package/build/stories/dropdowns/multiselect/index.d.ts

@@ -1,10 +0,0 @@
-import { MultiselectArgs } from "./_types";
-/**
- * Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
- * <hr>
- * Used for this:
-    - To choose multiple items from a list of options
-    - To filter through a set of data by typing
- */
-declare const Multiselect: (props: MultiselectArgs) => JSX.Element;
-export { Multiselect };

package/build/stories/dropdowns/multiselect/index.stories.d.ts

@@ -1,20 +0,0 @@
-import { ComponentMeta, Story } from "@storybook/react";
-import { MultiselectArgs } from "./_types";
-import { MenuArgs } from "../menu/_types";
-import { DropdownArgs } from "../select/_types";
-interface IItem {
-    label: string;
-    value: string;
-}
-interface MenuStoryArgs {
-    dropdown: DropdownArgs;
-    menu: MenuArgs;
-    items: Array<IItem>;
-    select: MultiselectArgs;
-    validation?: "success" | "warning" | "error";
-    hasHelpText?: boolean;
-}
-export declare const Default: Story<MenuStoryArgs>;
-export declare const Validation: Story<MenuStoryArgs>;
-declare const _default: ComponentMeta<(props: MultiselectArgs) => JSX.Element>;
-export default _default;