@appquality/unguess-design-system 2.12.52 → 2.12.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/build/index.d.ts +2 -1
  3. package/build/index.js +291 -141
  4. package/build/stories/dropdowns/countermultiselect/_types.d.ts +15 -0
  5. package/build/stories/dropdowns/countermultiselect/index.d.ts +3 -0
  6. package/build/stories/dropdowns/countermultiselect/index.stories.d.ts +5 -0
  7. package/build/stories/modals/_types.d.ts +4 -0
  8. package/build/stories/multiselect/AddableItem.d.ts +4 -0
  9. package/build/stories/multiselect/Item.d.ts +11 -0
  10. package/build/stories/multiselect/_types.d.ts +20 -0
  11. package/build/stories/multiselect/index.d.ts +2 -0
  12. package/build/stories/multiselect/index.stories.d.ts +6 -0
  13. package/build/stories/multiselect/useOptions.d.ts +27 -0
  14. package/build/stories/theme/colors.d.ts +12 -0
  15. package/build/stories/theme/components.d.ts +16 -0
  16. package/build/stories/theme/index.d.ts +16 -0
  17. package/package.json +1 -1
  18. package/build/stories/dropdowns/multiselect/_types.d.ts +0 -17
  19. package/build/stories/dropdowns/multiselect/index.d.ts +0 -10
  20. package/build/stories/dropdowns/multiselect/index.stories.d.ts +0 -20
package/CHANGELOG.md CHANGED
@@ -1,3 +1,38 @@
1
+ # v2.12.54 (Fri Jan 13 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Fixes [#174](https://github.com/AppQuality/unguess-design-system/pull/174) ([@d-beezee](https://github.com/d-beezee) [@iacopolea](https://github.com/iacopolea))
6
+ - fix(counterselect): Reload selected options if option changes [#173](https://github.com/AppQuality/unguess-design-system/pull/173) ([@d-beezee](https://github.com/d-beezee))
7
+ - fix: Remove override hover background from custom menu item [#171](https://github.com/AppQuality/unguess-design-system/pull/171) ([@d-beezee](https://github.com/d-beezee))
8
+
9
+ #### Authors: 2
10
+
11
+ - [@d-beezee](https://github.com/d-beezee)
12
+ - Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
13
+
14
+ ---
15
+
16
+ # v2.12.53 (Thu Jan 12 2023)
17
+
18
+ #### 🐛 Bug Fix
19
+
20
+ - 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))
21
+ - chore: Remove wrong import [#170](https://github.com/AppQuality/unguess-design-system/pull/170) ([@d-beezee](https://github.com/d-beezee))
22
+ - fix: Fix import [#168](https://github.com/AppQuality/unguess-design-system/pull/168) ([@d-beezee](https://github.com/d-beezee))
23
+ - 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))
24
+ - fix(counter): Style autocomplete with selected item [#167](https://github.com/AppQuality/unguess-design-system/pull/167) ([@d-beezee](https://github.com/d-beezee))
25
+ - feat: Add counter multiselect component [#166](https://github.com/AppQuality/unguess-design-system/pull/166) ([@d-beezee](https://github.com/d-beezee))
26
+ - feat(modal): add extraLarge size [#163](https://github.com/AppQuality/unguess-design-system/pull/163) ([@cannarocks](https://github.com/cannarocks))
27
+
28
+ #### Authors: 3
29
+
30
+ - [@d-beezee](https://github.com/d-beezee)
31
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
32
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
33
+
34
+ ---
35
+
1
36
  # v2.12.52 (Thu Dec 15 2022)
2
37
 
3
38
  #### 🐛 Bug Fix
package/build/index.d.ts CHANGED
@@ -28,7 +28,7 @@ export * as DropdownField from "./stories/dropdowns/field";
28
28
  export * from "./stories/dropdowns/item";
29
29
  export * from "./stories/dropdowns/item-content";
30
30
  export * from "./stories/dropdowns/menu";
31
- export * from "./stories/dropdowns/multiselect";
31
+ export * from "./stories/dropdowns/countermultiselect";
32
32
  export * from "./stories/dropdowns/select";
33
33
  export * from "./stories/dropdowns/autocomplete";
34
34
  export * from "./stories/dropdowns/menuheader";
@@ -54,6 +54,7 @@ export * from "./stories/loaders/spinner";
54
54
  export * from "./stories/page/pageLoader";
55
55
  export * from "./stories/login-form";
56
56
  export * from "./stories/logo";
57
+ export * from "./stories/multiselect";
57
58
  export * from "./stories/modals";
58
59
  export * from "./stories/modals/fullscreen";
59
60
  export * from "./stories/navigation/body";
package/build/index.js CHANGED
@@ -232,8 +232,47 @@ const gradients = {
232
232
  dark: `linear-gradient(90.81deg, ${hex2rgba(palette.blue[800])} 0%, ${hex2rgba(palette.blue[600])} 100%);`,
233
233
  };
234
234
 
235
+ /******************************************************************************
236
+ Copyright (c) Microsoft Corporation.
237
+
238
+ Permission to use, copy, modify, and/or distribute this software for any
239
+ purpose with or without fee is hereby granted.
240
+
241
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
242
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
243
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
244
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
245
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
246
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
247
+ PERFORMANCE OF THIS SOFTWARE.
248
+ ***************************************************************************** */
249
+
250
+ function __rest(s, e) {
251
+ var t = {};
252
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
253
+ t[p] = s[p];
254
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
255
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
256
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
257
+ t[p[i]] = s[p[i]];
258
+ }
259
+ return t;
260
+ }
261
+
262
+ function __awaiter(thisArg, _arguments, P, generator) {
263
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
264
+ return new (P || (P = Promise))(function (resolve, reject) {
265
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
266
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
267
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
268
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
269
+ });
270
+ }
271
+
235
272
  const fontWeights = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 });
236
273
 
274
+ 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] });
275
+
237
276
  var _a, _b, _c, _d, _e, _f, _g$7, _h;
238
277
  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: {
239
278
  imgMaxHeight: "214px",
@@ -241,9 +280,29 @@ const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.co
241
280
  thumbSize: "60px",
242
281
  }, "tabs.tab": ({ isSelected }) => {
243
282
  return isSelected ? { fontWeight: fontWeights.semibold } : undefined;
283
+ }, "forms.input": ({ isFocused }) => {
284
+ return isFocused
285
+ ? {
286
+ boxShadow: `0 0 0 3px ${palette.kale[200]}}`,
287
+ }
288
+ : undefined;
289
+ }, "dropdowns.item": (_a) => {
290
+ var { addable, checked } = _a; __rest(_a, ["addable", "checked"]);
291
+ return Object.assign(Object.assign(Object.assign({}, (addable
292
+ ? {
293
+ color: colors.primaryHue,
294
+ cursor: "pointer",
295
+ }
296
+ : {})), (checked
297
+ ? {
298
+ fontWeight: fontWeights.semibold,
299
+ }
300
+ : {})), { "&:hover": {
301
+ backgroundColor: palette.kale[100],
302
+ } });
244
303
  } });
245
304
 
246
- 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: {
305
+ 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: {
247
306
  back: -1,
248
307
  base: 0,
249
308
  front: 100,
@@ -354,33 +413,6 @@ const Avatar = (props) => {
354
413
  };
355
414
  Avatar.Text = UgAvatar.Text;
356
415
 
357
- /******************************************************************************
358
- Copyright (c) Microsoft Corporation.
359
-
360
- Permission to use, copy, modify, and/or distribute this software for any
361
- purpose with or without fee is hereby granted.
362
-
363
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
364
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
365
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
366
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
367
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
368
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
369
- PERFORMANCE OF THIS SOFTWARE.
370
- ***************************************************************************** */
371
-
372
- function __rest(s, e) {
373
- var t = {};
374
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
375
- t[p] = s[p];
376
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
377
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
378
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
379
- t[p[i]] = s[p[i]];
380
- }
381
- return t;
382
- }
383
-
384
416
  /**
385
417
  * Breadcrumbs mark and communicate a user’s location in the product.
386
418
  * <hr>
@@ -533,10 +565,10 @@ const Tag = (props) => jsxRuntime.jsx(reactTags.Tag, Object.assign({}, props));
533
565
  Tag.Avatar = reactTags.Tag.Avatar;
534
566
  Tag.Close = reactTags.Tag.Close;
535
567
 
536
- var _g$6, _path$q;
537
- 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); }
568
+ var _g$6, _path$r;
569
+ 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); }
538
570
  var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
539
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
571
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
540
572
  width: 24,
541
573
  height: 24,
542
574
  viewBox: "0 0 24 24",
@@ -548,16 +580,16 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
548
580
  opacity: 0.3,
549
581
  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",
550
582
  fill: "#003A57"
551
- }))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
583
+ }))), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
552
584
  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",
553
585
  fill: "#003A57"
554
586
  })));
555
587
  };
556
588
 
557
- 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;
558
- 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); }
589
+ 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;
590
+ 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); }
559
591
  var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
560
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
592
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
561
593
  width: 25,
562
594
  height: 24,
563
595
  viewBox: "0 0 25 24",
@@ -568,7 +600,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
568
600
  }, /*#__PURE__*/React__namespace.createElement("path", {
569
601
  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",
570
602
  fill: "#D3ECDB"
571
- }))), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
603
+ }))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
572
604
  opacity: 0.8,
573
605
  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",
574
606
  fill: "#70C38A"
@@ -625,16 +657,16 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
625
657
  })));
626
658
  };
627
659
 
628
- var _path$o, _path2$3, _path3$2, _path4$1;
629
- 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); }
660
+ var _path$p, _path2$3, _path3$2, _path4$1;
661
+ 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); }
630
662
  var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
631
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
663
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
632
664
  width: 24,
633
665
  height: 24,
634
666
  viewBox: "0 0 24 24",
635
667
  fill: "none",
636
668
  xmlns: "http://www.w3.org/2000/svg"
637
- }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
669
+ }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
638
670
  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",
639
671
  fill: "#F8F9F9"
640
672
  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -649,16 +681,16 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
649
681
  })));
650
682
  };
651
683
 
652
- var _path$n, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
653
- 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); }
684
+ var _path$o, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
685
+ 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); }
654
686
  var SvgCampaignProgress = function SvgCampaignProgress(props) {
655
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
687
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
656
688
  width: 24,
657
689
  height: 24,
658
690
  viewBox: "0 0 24 24",
659
691
  fill: "none",
660
692
  xmlns: "http://www.w3.org/2000/svg"
661
- }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
693
+ }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
662
694
  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",
663
695
  fill: "#F8F9F9"
664
696
  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -694,16 +726,16 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
694
726
  })));
695
727
  };
696
728
 
697
- var _path$m, _path2$1, _path3;
698
- 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); }
729
+ var _path$n, _path2$1, _path3;
730
+ 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); }
699
731
  var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
700
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
732
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
701
733
  width: 24,
702
734
  height: 24,
703
735
  viewBox: "0 0 24 24",
704
736
  fill: "none",
705
737
  xmlns: "http://www.w3.org/2000/svg"
706
- }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
738
+ }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
707
739
  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",
708
740
  fill: "#F8F9F9"
709
741
  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -1713,15 +1745,11 @@ const UgItem = styled__default["default"](reactDropdowns.Item) `
1713
1745
  opacity: 0.5;
1714
1746
  }
1715
1747
 
1716
- &:hover {
1717
- background-color: ${({ theme }) => theme.palette.blue[100]};
1718
- }
1719
-
1720
1748
  &[disabled]:hover {
1721
1749
  background-color: transparent;
1722
1750
  }
1723
1751
  `;
1724
- const Item = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
1752
+ const Item$1 = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
1725
1753
 
1726
1754
  const Container = styled__default["default"].div `
1727
1755
  display: flex;
@@ -1777,14 +1805,46 @@ const MediaBody = (props) => jsxRuntime.jsx(reactDropdowns.MediaBody, Object.ass
1777
1805
  const MediaFigure = (props) => jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props));
1778
1806
  const MediaItem = (props) => jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props));
1779
1807
 
1780
- /**
1781
- * 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.
1782
- * <hr>
1783
- * Used for this:
1784
- - To choose multiple items from a list of options
1785
- - To filter through a set of data by typing
1786
- */
1787
- const Multiselect = (props) => (jsxRuntime.jsx(reactDropdowns.Multiselect, Object.assign({}, props)));
1808
+ const StyledAutocomplete = styled__default["default"](reactDropdowns.Autocomplete) `
1809
+ ${(props) => props.hasSelectedItems &&
1810
+ `
1811
+ border-color: ${props.theme.colors.primaryHue};
1812
+ background-color: ${props.theme.colors.primaryHue};
1813
+ color: white;
1814
+ & > input, & > svg {
1815
+ color: white;
1816
+ }
1817
+ `}
1818
+ `;
1819
+ const CounterMultiselect = ({ options, label, i18n, onChange, }) => {
1820
+ var _a, _b;
1821
+ const [selectedItems, setSelectedItems] = React.useState(options.filter((o) => o.selected));
1822
+ const [inputValue, setInputValue] = React.useState("");
1823
+ const [matchingOptions, setMatchingOptions] = React.useState(options);
1824
+ React.useEffect(() => {
1825
+ setMatchingOptions(options.filter((option) => option.label
1826
+ .trim()
1827
+ .toLowerCase()
1828
+ .indexOf(inputValue.trim().toLowerCase()) !== -1));
1829
+ }, [inputValue, options]);
1830
+ React.useEffect(() => {
1831
+ setSelectedItems(options.filter((o) => o.selected));
1832
+ }, [options]);
1833
+ const hasSelectedItems = selectedItems.length > 0;
1834
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: selectedItems, onSelect: (items) => {
1835
+ if (items) {
1836
+ setSelectedItems(items);
1837
+ if (onChange)
1838
+ onChange(items);
1839
+ }
1840
+ }, downshiftProps: {
1841
+ itemToString: (item) => item && item.id,
1842
+ }, 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
1843
+ ? (i18n === null || i18n === void 0 ? void 0 : i18n.counterText)
1844
+ ? i18n.counterText(selectedItems.length)
1845
+ : `Items (${selectedItems.length})`
1846
+ : (_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)))) })] })) }));
1847
+ };
1788
1848
 
1789
1849
  const UgSelect = styled__default["default"](reactDropdowns.Select) `
1790
1850
  ${(props) => props.isPrimary &&
@@ -2077,31 +2137,31 @@ const editorStyle = styled.css `
2077
2137
  }
2078
2138
  `;
2079
2139
 
2080
- var _path$l;
2081
- 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); }
2140
+ var _path$m;
2141
+ 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); }
2082
2142
  var SvgBoldFill = function SvgBoldFill(props) {
2083
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
2143
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
2084
2144
  xmlns: "http://www.w3.org/2000/svg",
2085
2145
  width: 16,
2086
2146
  height: 16,
2087
2147
  focusable: "false",
2088
2148
  viewBox: "0 0 16 16"
2089
- }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
2149
+ }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
2090
2150
  fill: "currentColor",
2091
2151
  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"
2092
2152
  })));
2093
2153
  };
2094
2154
 
2095
- var _path$k;
2096
- 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); }
2155
+ var _path$l;
2156
+ 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); }
2097
2157
  var SvgItalicFill = function SvgItalicFill(props) {
2098
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
2158
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
2099
2159
  xmlns: "http://www.w3.org/2000/svg",
2100
2160
  width: 16,
2101
2161
  height: 16,
2102
2162
  focusable: "false",
2103
2163
  viewBox: "0 0 16 16"
2104
- }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
2164
+ }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
2105
2165
  fill: "none",
2106
2166
  stroke: "currentColor",
2107
2167
  strokeLinecap: "round",
@@ -2110,16 +2170,16 @@ var SvgItalicFill = function SvgItalicFill(props) {
2110
2170
  })));
2111
2171
  };
2112
2172
 
2113
- var _path$j, _path2;
2114
- 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); }
2173
+ var _path$k, _path2;
2174
+ 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); }
2115
2175
  var SvgQuoteFill = function SvgQuoteFill(props) {
2116
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
2176
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
2117
2177
  xmlns: "http://www.w3.org/2000/svg",
2118
2178
  width: 16,
2119
2179
  height: 16,
2120
2180
  focusable: "false",
2121
2181
  viewBox: "0 0 16 16"
2122
- }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
2182
+ }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
2123
2183
  fill: "currentColor",
2124
2184
  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"
2125
2185
  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2132,9 +2192,9 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
2132
2192
  };
2133
2193
 
2134
2194
  var _g$4;
2135
- 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); }
2195
+ 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); }
2136
2196
  var SvgH1Fill = function SvgH1Fill(props) {
2137
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
2197
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
2138
2198
  xmlns: "http://www.w3.org/2000/svg",
2139
2199
  width: 16,
2140
2200
  height: 16,
@@ -2162,9 +2222,9 @@ var SvgH1Fill = function SvgH1Fill(props) {
2162
2222
  };
2163
2223
 
2164
2224
  var _g$3;
2165
- 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); }
2225
+ 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); }
2166
2226
  var SvgH2Fill = function SvgH2Fill(props) {
2167
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
2227
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
2168
2228
  xmlns: "http://www.w3.org/2000/svg",
2169
2229
  width: 16,
2170
2230
  height: 16,
@@ -2192,9 +2252,9 @@ var SvgH2Fill = function SvgH2Fill(props) {
2192
2252
  };
2193
2253
 
2194
2254
  var _g$2;
2195
- 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); }
2255
+ 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); }
2196
2256
  var SvgH3Fill = function SvgH3Fill(props) {
2197
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
2257
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
2198
2258
  xmlns: "http://www.w3.org/2000/svg",
2199
2259
  width: 16,
2200
2260
  height: 16,
@@ -2443,9 +2503,9 @@ const Hint = styled__default["default"](reactForms.Hint) ``;
2443
2503
  const Input = React.forwardRef((props, ref) => jsxRuntime.jsx(UgInput, Object.assign({ ref: ref }, props)));
2444
2504
 
2445
2505
  var _g$1;
2446
- 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); }
2506
+ 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); }
2447
2507
  var SvgNotesStroke = function SvgNotesStroke(props) {
2448
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
2508
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
2449
2509
  xmlns: "http://www.w3.org/2000/svg",
2450
2510
  width: 16,
2451
2511
  height: 16,
@@ -2564,16 +2624,16 @@ const UgRadio = styled__default["default"](reactForms.Radio) ``;
2564
2624
  **/
2565
2625
  const Radio = (props) => jsxRuntime.jsx(UgRadio, Object.assign({}, props));
2566
2626
 
2567
- var _path$i;
2568
- 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); }
2627
+ var _path$j;
2628
+ 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); }
2569
2629
  var SvgCheckLg = function SvgCheckLg(props) {
2570
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
2630
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
2571
2631
  width: 16,
2572
2632
  height: 16,
2573
2633
  viewBox: "0 0 16 16",
2574
2634
  fill: "#68737D",
2575
2635
  xmlns: "http://www.w3.org/2000/svg"
2576
- }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
2636
+ }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
2577
2637
  fillRule: "evenodd",
2578
2638
  clipRule: "evenodd",
2579
2639
  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 +2715,46 @@ const Row$1 = (props) => jsxRuntime.jsx(reactGrid.Row, Object.assign({}, props))
2655
2715
  */
2656
2716
  const Grid = (props) => jsxRuntime.jsx(reactGrid.Grid, Object.assign({}, props));
2657
2717
 
2658
- var _path$h;
2659
- 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); }
2718
+ var _path$i;
2719
+ 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); }
2660
2720
  var SvgUgSquare = function SvgUgSquare(props) {
2661
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
2721
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
2662
2722
  width: 24,
2663
2723
  height: 24,
2664
2724
  viewBox: "0 0 24 24",
2665
2725
  fill: "none",
2666
2726
  xmlns: "http://www.w3.org/2000/svg"
2667
- }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
2727
+ }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
2668
2728
  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",
2669
2729
  fill: "#E80C7A"
2670
2730
  })));
2671
2731
  };
2672
2732
 
2673
- var _path$g;
2674
- 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); }
2733
+ var _path$h;
2734
+ 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); }
2675
2735
  var SvgUgCircle = function SvgUgCircle(props) {
2676
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
2736
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
2677
2737
  width: 24,
2678
2738
  height: 24,
2679
2739
  viewBox: "0 0 24 24",
2680
2740
  fill: "none",
2681
2741
  xmlns: "http://www.w3.org/2000/svg"
2682
- }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
2742
+ }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
2683
2743
  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",
2684
2744
  fill: "#FFCD1A"
2685
2745
  })));
2686
2746
  };
2687
2747
 
2688
- var _path$f;
2689
- 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); }
2748
+ var _path$g;
2749
+ 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); }
2690
2750
  var SvgUgTriangle = function SvgUgTriangle(props) {
2691
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
2751
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
2692
2752
  width: 24,
2693
2753
  height: 24,
2694
2754
  viewBox: "0 0 24 24",
2695
2755
  fill: "none",
2696
2756
  xmlns: "http://www.w3.org/2000/svg"
2697
- }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
2757
+ }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
2698
2758
  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",
2699
2759
  fill: "#7B0DFF"
2700
2760
  })));
@@ -2743,16 +2803,16 @@ const Body$1 = (props) => jsxRuntime.jsx(UgBody, Object.assign({}, props));
2743
2803
  */
2744
2804
  const Content = (props) => jsxRuntime.jsx(reactChrome.Content, Object.assign({}, props));
2745
2805
 
2746
- var _path$e;
2747
- 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); }
2806
+ var _path$f;
2807
+ 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); }
2748
2808
  var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
2749
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
2809
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
2750
2810
  xmlns: "http://www.w3.org/2000/svg",
2751
2811
  width: 16,
2752
2812
  height: 16,
2753
2813
  focusable: "false",
2754
2814
  viewBox: "0 0 16 16"
2755
- }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
2815
+ }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
2756
2816
  fill: "currentColor",
2757
2817
  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"
2758
2818
  })));
@@ -2800,16 +2860,16 @@ const Logo = (props) => {
2800
2860
  }[props.type] })));
2801
2861
  };
2802
2862
 
2803
- var _path$d;
2804
- 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); }
2863
+ var _path$e;
2864
+ 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); }
2805
2865
  var SvgMenuStroke = function SvgMenuStroke(props) {
2806
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
2866
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
2807
2867
  xmlns: "http://www.w3.org/2000/svg",
2808
2868
  width: 16,
2809
2869
  height: 16,
2810
2870
  focusable: "false",
2811
2871
  viewBox: "0 0 16 16"
2812
- }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
2872
+ }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
2813
2873
  fill: "none",
2814
2874
  stroke: "currentColor",
2815
2875
  strokeLinecap: "round",
@@ -2832,7 +2892,7 @@ const WorkspacesDropdown = (props) => {
2832
2892
  itemToString: (item) => item && item.company,
2833
2893
  } }, { 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
2834
2894
  ? selectedWorkspace.company + "'s workspace"
2835
- : "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 }))))] })] })));
2895
+ : "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 }))))] })] })));
2836
2896
  };
2837
2897
 
2838
2898
  const LogoIconContainer = styled__default["default"](reactChrome.HeaderItem) `
@@ -2973,31 +3033,31 @@ const NavItemIcon = (props) => jsxRuntime.jsx(UgNavIcon, Object.assign({}, props
2973
3033
 
2974
3034
  const NavItemText = (props) => (jsxRuntime.jsx(reactChrome.NavItemText, Object.assign({}, props, { children: jsxRuntime.jsx(Ellipsis, Object.assign({ style: { width: "158px" } }, { children: props.children })) })));
2975
3035
 
2976
- var _path$c;
2977
- 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); }
3036
+ var _path$d;
3037
+ 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); }
2978
3038
  var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
2979
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
3039
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
2980
3040
  xmlns: "http://www.w3.org/2000/svg",
2981
3041
  width: 16,
2982
3042
  height: 16,
2983
3043
  focusable: "false",
2984
3044
  viewBox: "0 0 16 16"
2985
- }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
3045
+ }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
2986
3046
  fill: "currentColor",
2987
3047
  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"
2988
3048
  })));
2989
3049
  };
2990
3050
 
2991
- var _path$b;
2992
- 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); }
3051
+ var _path$c;
3052
+ 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); }
2993
3053
  var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
2994
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
3054
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
2995
3055
  xmlns: "http://www.w3.org/2000/svg",
2996
3056
  width: 16,
2997
3057
  height: 16,
2998
3058
  focusable: "false",
2999
3059
  viewBox: "0 0 16 16"
3000
- }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
3060
+ }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
3001
3061
  fill: "currentColor",
3002
3062
  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"
3003
3063
  })));
@@ -3065,25 +3125,25 @@ const NavItemProject = NavItemComponent;
3065
3125
  NavItemProject.Title = NavItemText;
3066
3126
  NavItemProject.SubTitle = UgProjectSubtitle;
3067
3127
 
3068
- var _path$a;
3069
- 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); }
3128
+ var _path$b;
3129
+ 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); }
3070
3130
  var SvgHomeFill = function SvgHomeFill(props) {
3071
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
3131
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
3072
3132
  xmlns: "http://www.w3.org/2000/svg",
3073
3133
  width: 26,
3074
3134
  height: 26,
3075
3135
  focusable: "false",
3076
3136
  viewBox: "0 0 26 26"
3077
- }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
3137
+ }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
3078
3138
  fill: "currentColor",
3079
3139
  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"
3080
3140
  })));
3081
3141
  };
3082
3142
 
3083
- var _linearGradient, _path$9;
3084
- 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); }
3143
+ var _linearGradient, _path$a;
3144
+ 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); }
3085
3145
  var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
3086
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
3146
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
3087
3147
  xmlns: "http://www.w3.org/2000/svg",
3088
3148
  width: 26,
3089
3149
  height: 26,
@@ -3099,16 +3159,16 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
3099
3159
  className: "stop3",
3100
3160
  offset: "100%",
3101
3161
  stopColor: "#001825"
3102
- }))), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
3162
+ }))), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
3103
3163
  fill: "url(#unguessIconGradient)",
3104
3164
  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"
3105
3165
  })));
3106
3166
  };
3107
3167
 
3108
3168
  var _g, _defs$2;
3109
- 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); }
3169
+ 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); }
3110
3170
  var SvgToken = function SvgToken(props) {
3111
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
3171
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
3112
3172
  fill: "none",
3113
3173
  viewBox: "0 0 32 32",
3114
3174
  xmlns: "http://www.w3.org/2000/svg"
@@ -3144,15 +3204,15 @@ var SvgToken = function SvgToken(props) {
3144
3204
  })))));
3145
3205
  };
3146
3206
 
3147
- var _path$8;
3148
- 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); }
3207
+ var _path$9;
3208
+ 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); }
3149
3209
  var SvgFolderIcon = function SvgFolderIcon(props) {
3150
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
3210
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
3151
3211
  width: 12,
3152
3212
  height: 12,
3153
3213
  viewBox: "0 0 12 12",
3154
3214
  xmlns: "http://www.w3.org/2000/svg"
3155
- }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
3215
+ }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
3156
3216
  fillRule: "evenodd",
3157
3217
  clipRule: "evenodd",
3158
3218
  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 +3220,16 @@ var SvgFolderIcon = function SvgFolderIcon(props) {
3160
3220
  })));
3161
3221
  };
3162
3222
 
3163
- var _path$7, _defs$1;
3164
- 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); }
3223
+ var _path$8, _defs$1;
3224
+ 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); }
3165
3225
  var SvgTemplates = function SvgTemplates(props) {
3166
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
3226
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
3167
3227
  width: 26,
3168
3228
  height: 26,
3169
3229
  viewBox: "0 0 26 26",
3170
3230
  fill: "none",
3171
3231
  xmlns: "http://www.w3.org/2000/svg"
3172
- }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
3232
+ }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
3173
3233
  fillRule: "evenodd",
3174
3234
  clipRule: "evenodd",
3175
3235
  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 +3249,16 @@ var SvgTemplates = function SvgTemplates(props) {
3189
3249
  })))));
3190
3250
  };
3191
3251
 
3192
- var _path$6, _defs;
3193
- 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); }
3252
+ var _path$7, _defs;
3253
+ 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); }
3194
3254
  var SvgTemplatesActive = function SvgTemplatesActive(props) {
3195
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
3255
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
3196
3256
  width: 26,
3197
3257
  height: 26,
3198
3258
  viewBox: "0 0 26 26",
3199
3259
  fill: "none",
3200
3260
  xmlns: "http://www.w3.org/2000/svg"
3201
- }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
3261
+ }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
3202
3262
  fillRule: "evenodd",
3203
3263
  clipRule: "evenodd",
3204
3264
  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 +3475,102 @@ const LoginForm = (props) => {
3415
3475
  } }))] })), 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"] })))] }));
3416
3476
  };
3417
3477
 
3418
- const ugModalBody = styled__default["default"](reactModals.Body) `
3478
+ var _path$6;
3479
+ 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); }
3480
+ var SvgPlus = function SvgPlus(props) {
3481
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
3482
+ width: 16,
3483
+ height: 16,
3484
+ viewBox: "0 0 16 16",
3485
+ fill: "none",
3486
+ xmlns: "http://www.w3.org/2000/svg"
3487
+ }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
3488
+ fillRule: "evenodd",
3489
+ clipRule: "evenodd",
3490
+ 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",
3491
+ fill: "#68737D"
3492
+ })));
3493
+ };
3494
+
3495
+ const CustomItem$1 = reactDropdowns.Item;
3496
+ const AddableItem = (props) => {
3497
+ return (jsxRuntime.jsxs(CustomItem$1, Object.assign({ onClick: props.onClick, addable: true, disabled: true }, { children: [jsxRuntime.jsx(SvgPlus, { style: {
3498
+ position: "absolute",
3499
+ left: "0.6%",
3500
+ top: "calc(50% - 8px)",
3501
+ } }), props.label] })));
3502
+ };
3503
+
3504
+ const CustomItem = reactDropdowns.Item;
3505
+ const Item = ({ option, checked, }) => {
3506
+ return (jsxRuntime.jsx(CustomItem, Object.assign({ value: option, checked: checked }, { children: jsxRuntime.jsx("span", { children: option.label }) }), `${option.label}-${option.id}`));
3507
+ };
3508
+
3509
+ const useOptions = ({ options, selectedItems, onChange, }) => {
3510
+ const [currentOptions, setCurrentOptions] = React.useState(options);
3511
+ const [isLoading, setIsLoading] = React.useState(false);
3512
+ const [currentSelectedItems, setSelectedItems] = React.useState(selectedItems || []);
3513
+ const [inputValue, setInputValue] = React.useState("");
3514
+ const [matchingOptions, setMatchingOptions] = React.useState(options);
3515
+ const selectItems = (selection, newLabel) => __awaiter(void 0, void 0, void 0, function* () {
3516
+ setIsLoading(true);
3517
+ const unselectedItems = currentOptions.filter((option) => !selection.find((selectedItem) => selectedItem.id === option.id));
3518
+ let newSelectedItems = selection;
3519
+ if (onChange) {
3520
+ newSelectedItems = yield onChange(selection, newLabel);
3521
+ }
3522
+ setCurrentOptions([...unselectedItems, ...newSelectedItems]);
3523
+ setSelectedItems(newSelectedItems);
3524
+ setInputValue("");
3525
+ setIsLoading(false);
3526
+ });
3527
+ React.useEffect(() => {
3528
+ const matchedOptions = currentOptions.filter((option) => {
3529
+ return (option.label
3530
+ .trim()
3531
+ .toLowerCase()
3532
+ .indexOf(inputValue.trim().toLowerCase()) !== -1);
3533
+ });
3534
+ setMatchingOptions(matchedOptions);
3535
+ }, [inputValue]);
3536
+ return {
3537
+ currentOptions,
3538
+ currentSelectedItems,
3539
+ matchingOptions,
3540
+ inputValue,
3541
+ setInputValue,
3542
+ selectItems,
3543
+ isLoading,
3544
+ };
3545
+ };
3546
+
3547
+ const DisabledItem = ({ label }) => (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ disabled: true }, { children: label })));
3548
+ const MultiSelect = ({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }) => {
3549
+ var _a, _b, _c;
3550
+ const { isLoading, currentSelectedItems, matchingOptions, inputValue, setInputValue, selectItems, } = useOptions({ options, selectedItems, onChange });
3551
+ const itemToString = (item) => (item ? item.id : "");
3552
+ 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: () => {
3553
+ selectItems(currentSelectedItems.filter((item) => item.id !== value.id));
3554
+ } })] }))) })] }), jsxRuntime.jsxs(reactDropdowns.Menu, { children: [jsxRuntime.jsxs("div", Object.assign({ style: { maxHeight: menuHeight !== null && menuHeight !== void 0 ? menuHeight : "200px" } }, { children: [matchingOptions.map((option) => {
3555
+ const items = currentSelectedItems.map((item) => itemToString(item));
3556
+ return (jsxRuntime.jsx(Item, { option: option, checked: items.includes(itemToString(option)) }));
3557
+ }), 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 &&
3558
+ inputValue.length > 0 &&
3559
+ !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)
3560
+ ? i18n.addNew(inputValue)
3561
+ : `Want to add ${inputValue}?` })] })) : null] })] })) })));
3562
+ };
3563
+
3564
+ const UgModalBody = styled__default["default"](reactModals.Body) `
3419
3565
  color: ${({ theme }) => theme.palette.grey["800"]};
3420
3566
  `;
3421
- const Modal = (props) => jsxRuntime.jsx(reactModals.Modal, Object.assign({}, props));
3567
+ const UgModal = styled__default["default"](reactModals.Modal) `
3568
+ ${({ isExtraLarge }) => isExtraLarge && "height: 90%; width: 90%;"}
3569
+ `;
3570
+ const Modal = (props) => jsxRuntime.jsx(UgModal, Object.assign({}, props));
3422
3571
  const FooterItem = reactModals.FooterItem;
3423
3572
  Modal.Header = reactModals.Header;
3424
- Modal.Body = ugModalBody;
3573
+ Modal.Body = UgModalBody;
3425
3574
  Modal.Footer = reactModals.Footer;
3426
3575
 
3427
3576
  const StyledModal$1 = styled__default["default"](Modal) `
@@ -4424,6 +4573,7 @@ exports.Col = Col;
4424
4573
  exports.ContainerCard = ContainerCard;
4425
4574
  exports.Content = Content;
4426
4575
  exports.Counter = Counter;
4576
+ exports.CounterMultiselect = CounterMultiselect;
4427
4577
  exports.CursorPagination = CursorPagination;
4428
4578
  exports.Drawer = Drawer;
4429
4579
  exports.Dropdown = Dropdown;
@@ -4449,7 +4599,7 @@ exports.IconButton = IconButton;
4449
4599
  exports.InfoCard = InfoCard;
4450
4600
  exports.Input = Input;
4451
4601
  exports.InputToggle = InputToggle;
4452
- exports.Item = Item;
4602
+ exports.Item = Item$1;
4453
4603
  exports.ItemContent = ItemContent;
4454
4604
  exports.ItemMeta = ItemMeta;
4455
4605
  exports.LG = LG;
@@ -4467,7 +4617,7 @@ exports.MenuHeaderItem = MenuHeaderItem;
4467
4617
  exports.Message = Message;
4468
4618
  exports.Modal = Modal;
4469
4619
  exports.ModalFullScreen = ModalFullScreen;
4470
- exports.Multiselect = Multiselect;
4620
+ exports.MultiSelect = MultiSelect;
4471
4621
  exports.Nav = Nav;
4472
4622
  exports.NavDivider = NavDivider;
4473
4623
  exports.NavItem = NavItem;
package/build/stories/dropdowns/countermultiselect/_types.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ export interface CounterMultiselectArgs {
3
+ options: {
4
+ id: number;
5
+ label: string;
6
+ selected?: boolean;
7
+ }[];
8
+ label?: React.ReactNode;
9
+ onChange?: (selectedItems: CounterMultiselectArgs["options"]) => void;
10
+ i18n?: {
11
+ counterText?: (count: number) => string;
12
+ noItems?: string;
13
+ noMatches?: string;
14
+ };
15
+ }
package/build/stories/dropdowns/countermultiselect/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { CounterMultiselectArgs } from "./_types";
2
+ declare const CounterMultiselect: ({ options, label, i18n, onChange, }: CounterMultiselectArgs) => JSX.Element;
3
+ export { CounterMultiselect };
package/build/stories/dropdowns/countermultiselect/index.stories.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { ComponentMeta, Story } from "@storybook/react";
2
+ import { CounterMultiselectArgs } from "./_types";
3
+ export declare const Default: Story<CounterMultiselectArgs>;
4
+ declare const _default: ComponentMeta<({ options, label, i18n, onChange, }: CounterMultiselectArgs) => JSX.Element>;
5
+ export default _default;
package/build/stories/modals/_types.d.ts CHANGED
@@ -23,6 +23,10 @@ export interface ModalArgs extends IModalProps {
23
23
  * Applies large styling
24
24
  */
25
25
  isLarge?: boolean;
26
+ /**
27
+ * Applies Extra-large styling
28
+ */
29
+ isExtraLarge?: boolean;
26
30
  /**
27
31
  * Directs keyboard focus to the modal on mount
28
32
  */
package/build/stories/multiselect/AddableItem.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { IItemProps as ZenDeskIItemProps } from "@zendeskgarden/react-dropdowns";
2
+ export declare const AddableItem: (props: ZenDeskIItemProps & {
3
+ label: string;
4
+ }) => JSX.Element;
package/build/stories/multiselect/Item.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { IItemProps as ZenDeskIItemProps } from "@zendeskgarden/react-dropdowns";
2
+ import { MultiSelectProps } from "./_types";
3
+ export declare type IItemProps = ZenDeskIItemProps & {
4
+ checked?: boolean;
5
+ };
6
+ export declare const Item: ({ option, checked, }: ZenDeskIItemProps & {
7
+ checked?: boolean | undefined;
8
+ } & {
9
+ checked: boolean;
10
+ option: MultiSelectProps["options"][number];
11
+ }) => JSX.Element;
package/build/stories/multiselect/_types.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ declare type Item = {
2
+ id: string | number;
3
+ label: string;
4
+ };
5
+ export declare type MultiSelectProps = {
6
+ maxItems?: number;
7
+ options: Item[];
8
+ selectedItems?: Item[];
9
+ onChange?: (selectedItems: Item[], newItem?: string) => Promise<Item[]>;
10
+ creatable?: boolean;
11
+ size: "small" | "medium";
12
+ menuHeight?: string;
13
+ i18n: {
14
+ placeholder?: string;
15
+ label?: string;
16
+ noMatches?: string;
17
+ addNew?: (value: string) => string;
18
+ };
19
+ };
20
+ export {};
package/build/stories/multiselect/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { MultiSelectProps } from "./_types";
2
+ export declare const MultiSelect: ({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }: MultiSelectProps) => JSX.Element;
package/build/stories/multiselect/index.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ComponentMeta, Story } from "@storybook/react";
2
+ import { MultiSelectProps } from "./_types";
3
+ export declare const Default: Story<MultiSelectProps>;
4
+ export declare const WithTagCreation: Story<MultiSelectProps>;
5
+ declare const _default: ComponentMeta<({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }: MultiSelectProps) => JSX.Element>;
6
+ export default _default;
package/build/stories/multiselect/useOptions.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ /// <reference types="react" />
2
+ import { MultiSelectProps } from "./_types";
3
+ export declare const useOptions: ({ options, selectedItems, onChange, }: {
4
+ options: MultiSelectProps["options"];
5
+ selectedItems: MultiSelectProps["selectedItems"];
6
+ onChange: MultiSelectProps["onChange"];
7
+ }) => {
8
+ currentOptions: {
9
+ id: string | number;
10
+ label: string;
11
+ }[];
12
+ currentSelectedItems: {
13
+ id: string | number;
14
+ label: string;
15
+ }[];
16
+ matchingOptions: {
17
+ id: string | number;
18
+ label: string;
19
+ }[];
20
+ inputValue: string;
21
+ setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
22
+ selectItems: (selection: {
23
+ id: string | number;
24
+ label: string;
25
+ }[], newLabel?: string) => Promise<void>;
26
+ isLoading: boolean;
27
+ };
package/build/stories/theme/colors.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const colors: {
2
+ primaryHue: string;
3
+ warningHue: string;
4
+ successHue: string;
5
+ dangerHue: string;
6
+ accentHue: string;
7
+ base: "light" | "dark";
8
+ background: string;
9
+ foreground: string;
10
+ neutralHue: string;
11
+ chromeHue: string;
12
+ };
package/build/stories/theme/components.d.ts CHANGED
@@ -12,4 +12,20 @@ export declare const components: {
12
12
  }) => {
13
13
  fontWeight: number;
14
14
  } | undefined;
15
+ "forms.input": ({ isFocused }: {
16
+ isFocused: boolean;
17
+ }) => {
18
+ boxShadow: string;
19
+ } | undefined;
20
+ "dropdowns.item": ({ addable, checked, ...rest }: {
21
+ addable: boolean;
22
+ checked: boolean;
23
+ }) => {
24
+ "&:hover": {
25
+ backgroundColor: string;
26
+ };
27
+ fontWeight?: number | undefined;
28
+ color?: string | undefined;
29
+ cursor?: string | undefined;
30
+ };
15
31
  };
package/build/stories/theme/index.d.ts CHANGED
@@ -217,6 +217,22 @@ declare const theme: {
217
217
  }) => {
218
218
  fontWeight: number;
219
219
  } | undefined;
220
+ "forms.input": ({ isFocused }: {
221
+ isFocused: boolean;
222
+ }) => {
223
+ boxShadow: string;
224
+ } | undefined;
225
+ "dropdowns.item": ({ addable, checked, ...rest }: {
226
+ addable: boolean;
227
+ checked: boolean;
228
+ }) => {
229
+ "&:hover": {
230
+ backgroundColor: string;
231
+ };
232
+ fontWeight?: number | undefined;
233
+ color?: string | undefined;
234
+ cursor?: string | undefined;
235
+ };
220
236
  };
221
237
  shadows: {
222
238
  boxShadow: (theme: import("@zendeskgarden/react-theming").IGardenTheme) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.12.52",
3
+ "version": "2.12.54",
4
4
  "dependencies": {
5
5
  "@nivo/bar": "^0.80.0",
6
6
  "@nivo/bullet": "^0.80.0",
package/build/stories/dropdowns/multiselect/_types.d.ts DELETED
@@ -1,17 +0,0 @@
1
- import { IMultiselectProps } from "@zendeskgarden/react-dropdowns";
2
- export interface MultiselectArgs extends IMultiselectProps {
3
- /** Applies compact styling */
4
- isCompact?: boolean;
5
- /** Removes borders and padding */
6
- isBare?: boolean;
7
- /** Indicates that the element is not interactive */
8
- disabled?: boolean;
9
- /** Applies inset `box-shadow` styling on focus */
10
- focusInset?: boolean;
11
- /** Defines text that appears in the element when no items are selected */
12
- placeholder?: string;
13
- /** Defines the element's validation state */
14
- validation?: "success" | "warning" | "error";
15
- /** Determines the maximum number of items displayed while collapsed */
16
- maxItems?: number;
17
- }
package/build/stories/dropdowns/multiselect/index.d.ts DELETED
@@ -1,10 +0,0 @@
1
- import { MultiselectArgs } from "./_types";
2
- /**
3
- * 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.
4
- * <hr>
5
- * Used for this:
6
- - To choose multiple items from a list of options
7
- - To filter through a set of data by typing
8
- */
9
- declare const Multiselect: (props: MultiselectArgs) => JSX.Element;
10
- export { Multiselect };
package/build/stories/dropdowns/multiselect/index.stories.d.ts DELETED
@@ -1,20 +0,0 @@
1
- import { ComponentMeta, Story } from "@storybook/react";
2
- import { MultiselectArgs } from "./_types";
3
- import { MenuArgs } from "../menu/_types";
4
- import { DropdownArgs } from "../select/_types";
5
- interface IItem {
6
- label: string;
7
- value: string;
8
- }
9
- interface MenuStoryArgs {
10
- dropdown: DropdownArgs;
11
- menu: MenuArgs;
12
- items: Array<IItem>;
13
- select: MultiselectArgs;
14
- validation?: "success" | "warning" | "error";
15
- hasHelpText?: boolean;
16
- }
17
- export declare const Default: Story<MenuStoryArgs>;
18
- export declare const Validation: Story<MenuStoryArgs>;
19
- declare const _default: ComponentMeta<(props: MultiselectArgs) => JSX.Element>;
20
- export default _default;