@appquality/unguess-design-system 2.10.1 → 2.10.2

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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v2.10.2 (Tue May 03 2022)
2
+
3
+ #### ⚠️ Pushed to `master`
4
+
5
+ - build(components): add full screen modal and radio card to main export ([@cannarocks](https://github.com/cannarocks))
6
+
7
+ #### Authors: 1
8
+
9
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
10
+
11
+ ---
12
+
1
13
  # v2.10.1 (Mon May 02 2022)
2
14
 
3
15
  #### 🐛 Bug Fix
package/build/index.d.ts CHANGED
@@ -25,6 +25,7 @@ export * as FormField from "./stories/forms/field";
25
25
  export * from "./stories/forms/input";
26
26
  export * from "./stories/forms/mediaInput";
27
27
  export * from "./stories/forms/radio";
28
+ export * from "./stories/forms/radio/cards";
28
29
  export * from "./stories/forms/textarea";
29
30
  export * from "./stories/forms/toggle";
30
31
  export * from "./stories/grid/col";
@@ -39,6 +40,7 @@ export * from "./stories/page/pageLoader";
39
40
  export * from "./stories/login-form";
40
41
  export * from "./stories/logo";
41
42
  export * from "./stories/modals";
43
+ export * from "./stories/modals/fullscreen";
42
44
  export * from "./stories/navigation/body";
43
45
  export * from "./stories/navigation/content";
44
46
  export * from "./stories/navigation/header";
package/build/index.js CHANGED
@@ -17,9 +17,9 @@ var React = require('react');
17
17
  var reactLoaders = require('@zendeskgarden/react-loaders');
18
18
  var reactModals = require('@zendeskgarden/react-modals');
19
19
  var reactDropdowns = require('@zendeskgarden/react-dropdowns');
20
+ var reactTypography = require('@zendeskgarden/react-typography');
20
21
  var reactGrid = require('@zendeskgarden/react-grid');
21
22
  var reactChrome = require('@zendeskgarden/react-chrome');
22
- var reactTypography = require('@zendeskgarden/react-typography');
23
23
  var formik = require('formik');
24
24
  var reactPagination = require('@zendeskgarden/react-pagination');
25
25
  var reactTables = require('@zendeskgarden/react-tables');
@@ -236,8 +236,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
236
236
 
237
237
  var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
238
238
 
239
- var GlobalStyle = styled.createGlobalStyle(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n \n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n \n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
240
- var templateObject_1$S;
239
+ var GlobalStyle = styled.createGlobalStyle(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n \n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n \n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
240
+ var templateObject_1$U;
241
241
 
242
242
  /**
243
243
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -253,7 +253,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
253
253
  Accordion.Panel = reactAccordions.Accordion.Panel;
254
254
 
255
255
  // import useWindowSize from "../../hooks/useWindowSize";
256
- var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
256
+ var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
257
257
  return props.avatarType &&
258
258
  props.avatarType !== "image" &&
259
259
  "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -278,7 +278,7 @@ var Avatar = function (props) {
278
278
  return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
279
279
  };
280
280
  Avatar.Text = UgAvatar.Text;
281
- var templateObject_1$R;
281
+ var templateObject_1$T;
282
282
 
283
283
  /**
284
284
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -299,7 +299,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
299
299
  */
300
300
  var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
301
301
 
302
- var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
302
+ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
303
303
  /**
304
304
  * Buttons let users take action quickly.
305
305
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -311,7 +311,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
311
311
  var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
312
312
  Button.StartIcon = UgButton.StartIcon;
313
313
  Button.EndIcon = UgButton.EndIcon;
314
- var templateObject_1$Q;
314
+ var templateObject_1$S;
315
315
 
316
316
  /**
317
317
  A Button group lets users make a selection from a set of options.
@@ -364,13 +364,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
364
364
  Tag.Avatar = reactTags.Tag.Avatar;
365
365
  Tag.Close = reactTags.Tag.Close;
366
366
 
367
- var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
367
+ var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
368
368
  /**
369
369
  * A Label is used to specify a title for an input.
370
370
  * <hr>
371
371
  **/
372
372
  var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
373
- var templateObject_1$P;
373
+ var templateObject_1$R;
374
374
 
375
375
  var _g$4, _path$p, _path2$7, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
376
376
 
@@ -577,7 +577,7 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
577
577
  })));
578
578
  };
579
579
 
580
- var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n"], ["\n background-color: ", ";\n border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
580
+ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n"], ["\n background-color: ", ";\n border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
581
581
  /**
582
582
  * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
583
583
  * <hr>
@@ -592,19 +592,19 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
592
592
  - To communicate a typing status, use Inline instead
593
593
  */
594
594
  var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
595
- var templateObject_1$O;
595
+ var templateObject_1$Q;
596
596
 
597
597
  var CampaignCardSkeleton = function () {
598
598
  return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), " ", jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
599
599
  };
600
600
 
601
- var flexCenter = styled.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
602
- var flexColumnCenter = styled.css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
603
- var flexStart = styled.css(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
601
+ var flexCenter = styled.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
602
+ var flexColumnCenter = styled.css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
603
+ var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
604
604
  var theme = _a.theme;
605
605
  return (theme.rtl ? "flex-end" : "flex-start");
606
606
  });
607
- var cardStyle = styled.css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
607
+ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
608
608
  var theme = _a.theme;
609
609
  return theme.borderRadii.lg;
610
610
  }, function (_a) {
@@ -617,7 +617,7 @@ var cardStyle = styled.css(templateObject_4$6 || (templateObject_4$6 = __makeTem
617
617
  var theme = _a.theme;
618
618
  return theme.shadows.boxShadow(theme);
619
619
  });
620
- var templateObject_1$N, templateObject_2$f, templateObject_3$a, templateObject_4$6;
620
+ var templateObject_1$P, templateObject_2$h, templateObject_3$c, templateObject_4$8;
621
621
 
622
622
  var getStatusIcon = function (status) {
623
623
  switch (status) {
@@ -641,12 +641,12 @@ var getTypeDataIcon = function (type) {
641
641
  return SvgFunctionalTestRoundIcon;
642
642
  }
643
643
  };
644
- var Wrapper$1 = styled__default["default"](Card)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), cardStyle);
645
- var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"], ["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"])), function (_a) {
644
+ var Wrapper$1 = styled__default["default"](Card)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), cardStyle);
645
+ var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"], ["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"])), function (_a) {
646
646
  var theme = _a.theme;
647
647
  return theme.palette.grey["700"];
648
648
  });
649
- var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
649
+ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
650
650
  var theme = _a.theme;
651
651
  return theme.space.base * 6;
652
652
  }, function (_a) {
@@ -659,14 +659,14 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$9 || (temp
659
659
  var theme = _a.theme;
660
660
  return theme.palette.white;
661
661
  });
662
- var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
662
+ var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
663
663
  var theme = _a.theme;
664
664
  return theme.fontSizes.sm;
665
665
  }, function (_a) {
666
666
  var theme = _a.theme;
667
667
  return theme.palette.grey["500"];
668
668
  });
669
- var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
669
+ var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
670
670
  var theme = _a.theme;
671
671
  return theme.palette.blue["600"];
672
672
  }, function (_a) {
@@ -703,9 +703,9 @@ var CampaignCard = function (props) {
703
703
  }
704
704
  return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
705
705
  };
706
- var templateObject_1$M, templateObject_2$e, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
706
+ var templateObject_1$O, templateObject_2$g, templateObject_3$b, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
707
707
 
708
- var Wrapper = styled__default["default"](Card)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
708
+ var Wrapper = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
709
709
  var theme = _a.theme;
710
710
  return theme.borderRadii.lg;
711
711
  }, function (_a) {
@@ -718,7 +718,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$L || (templateOb
718
718
  var theme = _a.theme;
719
719
  return theme.shadows.boxShadow(theme);
720
720
  });
721
- var StyledTagNew = styled__default["default"](Tag)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
721
+ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
722
722
  var theme = _a.theme;
723
723
  return theme.space.base * 6;
724
724
  }, function (_a) {
@@ -731,21 +731,21 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$d || (templa
731
731
  var theme = _a.theme;
732
732
  return theme.palette.white;
733
733
  });
734
- var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
734
+ var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
735
735
  var theme = _a.theme;
736
736
  return theme.fontSizes.sm;
737
737
  }, function (_a) {
738
738
  var theme = _a.theme;
739
739
  return theme.palette.grey["500"];
740
740
  });
741
- var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
741
+ var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
742
742
  var theme = _a.theme;
743
743
  return theme.palette.blue["600"];
744
744
  }, function (_a) {
745
745
  var theme = _a.theme;
746
746
  return theme.fontSizes.lg;
747
747
  });
748
- var Divider = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), function (_a) {
748
+ var Divider = styled__default["default"].div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), function (_a) {
749
749
  var theme = _a.theme;
750
750
  return theme.space.sm;
751
751
  }, function (_a) {
@@ -766,7 +766,7 @@ var ProductCard = function (props) {
766
766
  }
767
767
  return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, { children: [isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))), props.icon && jsxRuntime.jsx(IconContainer$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
768
768
  };
769
- var templateObject_1$L, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
769
+ var templateObject_1$N, templateObject_2$f, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
770
770
 
771
771
  var Drawer = function (props) { return jsxRuntime.jsx(reactModals.DrawerModal, __assign({}, props)); };
772
772
  Drawer.Header = reactModals.DrawerModal.Header;
@@ -979,7 +979,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
979
979
  })));
980
980
  };
981
981
 
982
- var StyledTag = styled__default["default"](Tag)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"])), function (_a) {
982
+ var StyledTag = styled__default["default"](Tag)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"])), function (_a) {
983
983
  var theme = _a.theme;
984
984
  return theme.fontWeights.regular;
985
985
  }, function (_a) {
@@ -1015,24 +1015,24 @@ var Counter = function (props) {
1015
1015
  return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), props.children, counter !== undefined && jsxRuntime.jsx("span", { children: counter.toString() })] })));
1016
1016
  };
1017
1017
  Counter.Avatar = StyledTag.Avatar;
1018
- var templateObject_1$K;
1018
+ var templateObject_1$M;
1019
1019
 
1020
- var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
1021
- var templateObject_1$J;
1020
+ var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
1021
+ var templateObject_1$L;
1022
1022
 
1023
1023
  var index$1 = /*#__PURE__*/Object.freeze({
1024
1024
  __proto__: null,
1025
1025
  Field: Field$1
1026
1026
  });
1027
1027
 
1028
- var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"], ["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
1028
+ var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"], ["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
1029
1029
  var theme = _a.theme;
1030
1030
  return theme.palette.blue[100];
1031
1031
  });
1032
1032
  var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
1033
- var templateObject_1$I;
1033
+ var templateObject_1$K;
1034
1034
 
1035
- var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n width: auto !important;\n min-width: 100%;\n"], ["\n width: auto !important;\n min-width: 100%;\n"])));
1035
+ var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n width: auto !important;\n min-width: 100%;\n"], ["\n width: auto !important;\n min-width: 100%;\n"])));
1036
1036
  /**
1037
1037
  * A Menu is a wrapper for items elements
1038
1038
  **/
@@ -1045,7 +1045,7 @@ var ItemMeta = function (props) { return jsxRuntime.jsx(reactDropdowns.ItemMeta,
1045
1045
  var MediaBody = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaBody, __assign({}, props)); };
1046
1046
  var MediaFigure = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaFigure, __assign({}, props)); };
1047
1047
  var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
1048
- var templateObject_1$H;
1048
+ var templateObject_1$J;
1049
1049
 
1050
1050
  /**
1051
1051
  * 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.
@@ -1056,7 +1056,7 @@ var templateObject_1$H;
1056
1056
  */
1057
1057
  var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
1058
1058
 
1059
- var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
1059
+ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
1060
1060
  return props.isPrimary &&
1061
1061
  "\n background-color: ".concat(props.theme.palette.blue[600], ";\n color: white;\n & svg[data-garden-id=\"forms.media_figure\"] {\n color: white;\n }\n ");
1062
1062
  });
@@ -1073,7 +1073,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
1073
1073
  var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
1074
1074
  var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
1075
1075
  var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
1076
- var templateObject_1$G;
1076
+ var templateObject_1$I;
1077
1077
 
1078
1078
  /**
1079
1079
  * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
@@ -1086,7 +1086,7 @@ var templateObject_1$G;
1086
1086
  */
1087
1087
  var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autocomplete, __assign({}, props)); };
1088
1088
 
1089
- var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
1089
+ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
1090
1090
  /**
1091
1091
  * A Checkbox lets users select and unselect options from a list.
1092
1092
  * <hr>
@@ -1098,24 +1098,24 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
1098
1098
  * - To let users activate an option that takes effect immediately, use a Toggle instead
1099
1099
  **/
1100
1100
  var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
1101
- var templateObject_1$F;
1101
+ var templateObject_1$H;
1102
1102
 
1103
- var StyledCard = styled__default["default"](Card)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"], ["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"])), cardStyle, function (_a) {
1103
+ var StyledCard$1 = styled__default["default"](Card)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"], ["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"])), cardStyle, function (_a) {
1104
1104
  var theme = _a.theme;
1105
1105
  return theme.palette.blue[300];
1106
1106
  });
1107
- var IconWrapper = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1107
+ var IconWrapper$1 = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1108
1108
  var theme = _a.theme;
1109
1109
  return theme.space.base;
1110
1110
  });
1111
- var LabelWrapper = styled__default["default"](Label)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1111
+ var LabelWrapper = styled__default["default"](Label)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1112
1112
  var theme = _a.theme;
1113
1113
  return theme.space.base;
1114
1114
  }, function (_a) {
1115
1115
  var theme = _a.theme;
1116
1116
  return theme.palette.grey[600];
1117
1117
  });
1118
- var StyledLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1118
+ var StyledLabel = styled__default["default"](Label)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1119
1119
  var theme = _a.theme;
1120
1120
  return theme.space.base;
1121
1121
  });
@@ -1124,16 +1124,16 @@ var CheckboxCard = function (props) {
1124
1124
  var handleToggle = function () {
1125
1125
  setChecked(!checked);
1126
1126
  };
1127
- return (jsxRuntime.jsxs(StyledCard, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
1127
+ return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper$1, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
1128
1128
  };
1129
- var templateObject_1$E, templateObject_2$c, templateObject_3$7, templateObject_4$3;
1129
+ var templateObject_1$G, templateObject_2$e, templateObject_3$9, templateObject_4$5;
1130
1130
 
1131
- var UgField = styled__default["default"](reactForms.Field)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
1131
+ var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
1132
1132
  /**
1133
1133
  * A Field is a wrapper for input elements
1134
1134
  **/
1135
1135
  var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
1136
- var templateObject_1$D;
1136
+ var templateObject_1$F;
1137
1137
 
1138
1138
  var index = /*#__PURE__*/Object.freeze({
1139
1139
  __proto__: null,
@@ -1141,7 +1141,7 @@ var index = /*#__PURE__*/Object.freeze({
1141
1141
  Hint: reactForms.Hint
1142
1142
  });
1143
1143
 
1144
- var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
1144
+ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
1145
1145
  /**
1146
1146
  * An Input lets users enter text into a field.
1147
1147
  * <hr>
@@ -1150,9 +1150,9 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$C ||
1150
1150
  * - To enter multiline text, use a Textarea
1151
1151
  **/
1152
1152
  var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
1153
- var templateObject_1$C;
1153
+ var templateObject_1$E;
1154
1154
 
1155
- var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
1155
+ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
1156
1156
  /**
1157
1157
  * Media elements add even more context to an input.
1158
1158
  * <hr>
@@ -1161,9 +1161,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
1161
1161
  * - To enter multiline text, use a Textarea
1162
1162
  **/
1163
1163
  var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
1164
- var templateObject_1$B;
1164
+ var templateObject_1$D;
1165
1165
 
1166
- var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
1166
+ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
1167
1167
  /**
1168
1168
  * Radio buttons let users choose a single option among two or more mutually exclusive options.
1169
1169
  * <hr>
@@ -1175,9 +1175,78 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$A ||
1175
1175
  * - To select from a long list of options, use Select instead
1176
1176
  **/
1177
1177
  var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
1178
- var templateObject_1$A;
1178
+ var templateObject_1$C;
1179
+
1180
+ var _path$f;
1181
+
1182
+ function _extends$h() { _extends$h = Object.assign || 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); }
1183
+
1184
+ var SvgCheckLg = function SvgCheckLg(props) {
1185
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
1186
+ width: 16,
1187
+ height: 16,
1188
+ viewBox: "0 0 16 16",
1189
+ fill: "#68737D",
1190
+ xmlns: "http://www.w3.org/2000/svg"
1191
+ }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
1192
+ fillRule: "evenodd",
1193
+ clipRule: "evenodd",
1194
+ 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"
1195
+ })));
1196
+ };
1179
1197
 
1180
- var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
1198
+ var StyledCard = styled__default["default"](Card)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"], ["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"])), cardStyle, function (_a) {
1199
+ var theme = _a.theme;
1200
+ return theme.palette.blue[300];
1201
+ });
1202
+ var IconWrapper = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1203
+ var theme = _a.theme;
1204
+ return theme.space.base;
1205
+ });
1206
+ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1207
+ var theme = _a.theme;
1208
+ return theme.space.base;
1209
+ }, function (_a) {
1210
+ var theme = _a.theme;
1211
+ return theme.palette.grey[600];
1212
+ }, function (_a) {
1213
+ var theme = _a.theme;
1214
+ return theme.fontWeights.medium;
1215
+ }, function (_a) {
1216
+ var theme = _a.theme;
1217
+ return theme.colors.primaryHue;
1218
+ });
1219
+ var Circle = styled__default["default"].div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
1220
+ var theme = _a.theme;
1221
+ return theme.space.base * 6;
1222
+ }, function (_a) {
1223
+ var theme = _a.theme;
1224
+ return theme.space.base * 6;
1225
+ }, function (_a) {
1226
+ var theme = _a.theme;
1227
+ return theme.space.base * 1.25;
1228
+ }, function (_a) {
1229
+ var theme = _a.theme;
1230
+ return theme.colors.primaryHue;
1231
+ }, function (_a) {
1232
+ var checked = _a.checked;
1233
+ return !checked && "\n opacity: 0;\n visibility: hidden;\n ";
1234
+ });
1235
+ var StyledDivider = styled__default["default"](Divider$1)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n background-color: ", ";\n margin: ", "px auto;\n"], ["\n background-color: ", ";\n margin: ", "px auto;\n"])), function (_a) {
1236
+ var theme = _a.theme;
1237
+ return theme.palette.blue[100];
1238
+ }, function (_a) {
1239
+ var theme = _a.theme;
1240
+ return theme.space.base * 4;
1241
+ });
1242
+ var RadioCard = function (_a) {
1243
+ var _b;
1244
+ var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
1245
+ return (jsxRuntime.jsxs(StyledCard, __assign({}, card, props, { className: props.checked ? "card-active" : "", onClick: function () { props.onChecked && props.onChecked(props.value); } }, { children: [jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })), jsxRuntime.jsx(IconWrapper, { children: (iconActive && props.checked) ? iconActive : icon }), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(StyledDivider, {}), jsxRuntime.jsx(StyledText, { children: props.label })] })));
1246
+ };
1247
+ var templateObject_1$B, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$2;
1248
+
1249
+ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
1181
1250
  /**
1182
1251
  * A Textarea is a form control for multi-line text.
1183
1252
  * <hr>
@@ -1185,9 +1254,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
1185
1254
  * - To enter multi-line text
1186
1255
  **/
1187
1256
  var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
1188
- var templateObject_1$z;
1257
+ var templateObject_1$A;
1189
1258
 
1190
- var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
1259
+ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
1191
1260
  /**
1192
1261
  * A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
1193
1262
  * <hr>
@@ -1198,7 +1267,7 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$y
1198
1267
  * - To let users select from a list of settings, use Checkboxes instead
1199
1268
  **/
1200
1269
  var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
1201
- var templateObject_1$y;
1270
+ var templateObject_1$z;
1202
1271
 
1203
1272
  var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
1204
1273
 
@@ -1212,58 +1281,58 @@ var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({},
1212
1281
  */
1213
1282
  var Grid = function (props) { return jsxRuntime.jsx(reactGrid.Grid, __assign({}, props)); };
1214
1283
 
1215
- var _path$f;
1284
+ var _path$e;
1216
1285
 
1217
- function _extends$h() { _extends$h = Object.assign || 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); }
1286
+ function _extends$g() { _extends$g = Object.assign || 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); }
1218
1287
 
1219
1288
  var SvgUgSquare = function SvgUgSquare(props) {
1220
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
1289
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
1221
1290
  width: 24,
1222
1291
  height: 24,
1223
1292
  viewBox: "0 0 24 24",
1224
1293
  fill: "none",
1225
1294
  xmlns: "http://www.w3.org/2000/svg"
1226
- }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
1295
+ }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
1227
1296
  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",
1228
1297
  fill: "#E80C7A"
1229
1298
  })));
1230
1299
  };
1231
1300
 
1232
- var _path$e;
1301
+ var _path$d;
1233
1302
 
1234
- function _extends$g() { _extends$g = Object.assign || 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); }
1303
+ function _extends$f() { _extends$f = Object.assign || 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); }
1235
1304
 
1236
1305
  var SvgUgCircle = function SvgUgCircle(props) {
1237
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
1306
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
1238
1307
  width: 24,
1239
1308
  height: 24,
1240
1309
  viewBox: "0 0 24 24",
1241
1310
  fill: "none",
1242
1311
  xmlns: "http://www.w3.org/2000/svg"
1243
- }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
1312
+ }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
1244
1313
  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",
1245
1314
  fill: "#FFCD1A"
1246
1315
  })));
1247
1316
  };
1248
1317
 
1249
- var _path$d;
1318
+ var _path$c;
1250
1319
 
1251
- function _extends$f() { _extends$f = Object.assign || 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); }
1320
+ function _extends$e() { _extends$e = Object.assign || 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); }
1252
1321
 
1253
1322
  var SvgUgTriangle = function SvgUgTriangle(props) {
1254
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
1323
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
1255
1324
  width: 24,
1256
1325
  height: 24,
1257
1326
  viewBox: "0 0 24 24",
1258
1327
  fill: "none",
1259
1328
  xmlns: "http://www.w3.org/2000/svg"
1260
- }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
1329
+ }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
1261
1330
  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",
1262
1331
  fill: "#7B0DFF"
1263
1332
  })));
1264
1333
  };
1265
1334
 
1266
- var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
1335
+ var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
1267
1336
  var Icon = function (props) {
1268
1337
  var children = function (type, size) {
1269
1338
  if (size === void 0) { size = 24; }
@@ -1276,9 +1345,9 @@ var Icon = function (props) {
1276
1345
  };
1277
1346
  return (jsxRuntime.jsx(StyledUgIcon$1, { children: children(props.type, props.size) }));
1278
1347
  };
1279
- var templateObject_1$x;
1348
+ var templateObject_1$y;
1280
1349
 
1281
- var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
1350
+ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
1282
1351
  /**
1283
1352
  * A Progress loader communicates progress when downloading or uploading content.
1284
1353
  * <hr>
@@ -1290,9 +1359,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
1290
1359
  - When loading page content, use a Skeleton loader instead
1291
1360
  */
1292
1361
  var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
1293
- var templateObject_1$w;
1362
+ var templateObject_1$x;
1294
1363
 
1295
- var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
1364
+ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
1296
1365
  /**
1297
1366
  * Breadcrumbs mark and communicate a user’s location in the product.
1298
1367
  * <hr>
@@ -1301,9 +1370,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
1301
1370
  - To provide a quick way to navigate to ancestor pages
1302
1371
  */
1303
1372
  var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
1304
- var templateObject_1$v;
1373
+ var templateObject_1$w;
1305
1374
 
1306
- var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1375
+ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1307
1376
  var theme = _a.theme;
1308
1377
  return theme.palette.white;
1309
1378
  });
@@ -1311,43 +1380,43 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$u ||
1311
1380
  * A Body defines the main content of an HTML document which displays on the browser
1312
1381
  */
1313
1382
  var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
1314
- var templateObject_1$u;
1383
+ var templateObject_1$v;
1315
1384
 
1316
1385
  /**
1317
1386
  * A Content defines the main content of an HTML document which displays on the browser
1318
1387
  */
1319
1388
  var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
1320
1389
 
1321
- var _path$c;
1390
+ var _path$b;
1322
1391
 
1323
- function _extends$e() { _extends$e = Object.assign || 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); }
1392
+ function _extends$d() { _extends$d = Object.assign || 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); }
1324
1393
 
1325
1394
  var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
1326
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
1395
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
1327
1396
  xmlns: "http://www.w3.org/2000/svg",
1328
1397
  width: 16,
1329
1398
  height: 16,
1330
1399
  focusable: "false",
1331
1400
  viewBox: "0 0 16 16"
1332
- }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
1401
+ }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
1333
1402
  fill: "currentColor",
1334
1403
  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"
1335
1404
  })));
1336
1405
  };
1337
1406
 
1338
- var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
1407
+ var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
1339
1408
  var theme = _a.theme;
1340
1409
  return theme.fonts.system;
1341
1410
  });
1342
1411
  var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
1343
- var templateObject_1$t;
1412
+ var templateObject_1$u;
1344
1413
 
1345
- var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1414
+ var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1346
1415
  var theme = _a.theme;
1347
1416
  return theme.fonts.system;
1348
1417
  });
1349
1418
  var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
1350
- var templateObject_1$s;
1419
+ var templateObject_1$t;
1351
1420
 
1352
1421
  var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
1353
1422
 
@@ -1377,18 +1446,18 @@ var Logo = function (props) {
1377
1446
  }[props.type] })));
1378
1447
  };
1379
1448
 
1380
- var _path$b;
1449
+ var _path$a;
1381
1450
 
1382
- function _extends$d() { _extends$d = Object.assign || 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); }
1451
+ function _extends$c() { _extends$c = Object.assign || 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); }
1383
1452
 
1384
1453
  var SvgMenuStroke = function SvgMenuStroke(props) {
1385
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
1454
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
1386
1455
  xmlns: "http://www.w3.org/2000/svg",
1387
1456
  width: 16,
1388
1457
  height: 16,
1389
1458
  focusable: "false",
1390
1459
  viewBox: "0 0 16 16"
1391
- }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
1460
+ }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
1392
1461
  fill: "none",
1393
1462
  stroke: "currentColor",
1394
1463
  strokeLinecap: "round",
@@ -1396,11 +1465,11 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
1396
1465
  })));
1397
1466
  };
1398
1467
 
1399
- var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"], ["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"])), function (_a) {
1468
+ var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"], ["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"])), function (_a) {
1400
1469
  var theme = _a.theme;
1401
1470
  return theme.breakpoints.sm;
1402
1471
  });
1403
- var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1472
+ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1404
1473
  var theme = _a.theme;
1405
1474
  return theme.palette.blue["600"];
1406
1475
  }, function (_a) {
@@ -1410,7 +1479,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
1410
1479
  var theme = _a.theme;
1411
1480
  return theme.breakpoints.sm;
1412
1481
  });
1413
- var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1482
+ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1414
1483
  var theme = _a.theme;
1415
1484
  return theme.palette.blue["600"];
1416
1485
  }, function (_a) {
@@ -1420,9 +1489,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
1420
1489
  var BrandItem = function (props) {
1421
1490
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) })))] }));
1422
1491
  };
1423
- var templateObject_1$r, templateObject_2$b, templateObject_3$6;
1492
+ var templateObject_1$s, templateObject_2$c, templateObject_3$7;
1424
1493
 
1425
- var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
1494
+ var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
1426
1495
  /**
1427
1496
  * An Header is a visual way to display general information.
1428
1497
  * This can include navList Items, modal, profile settings.
@@ -1431,13 +1500,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
1431
1500
  Header.HeaderItem = HeaderItem;
1432
1501
  Header.HeaderItemText = HeaderItemText;
1433
1502
  Header.HeaderItemIcon = HeaderItemIcon;
1434
- var templateObject_1$q;
1503
+ var templateObject_1$r;
1435
1504
 
1436
1505
  var HeaderSkeleton = function () {
1437
1506
  return (jsxRuntime.jsxs(Header, __assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, __assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm }) })), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
1438
1507
  };
1439
1508
 
1440
- var ChevronButton = styled__default["default"](IconButton)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1509
+ var ChevronButton = styled__default["default"](IconButton)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1441
1510
  var theme = _a.theme;
1442
1511
  return theme.breakpoints.sm;
1443
1512
  });
@@ -1449,9 +1518,9 @@ var AppHeader = function (_a) {
1449
1518
  var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
1450
1519
  return isLoading ? jsxRuntime.jsx(HeaderSkeleton, {}) : (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
1451
1520
  };
1452
- var templateObject_1$p;
1521
+ var templateObject_1$q;
1453
1522
 
1454
- var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n padding-left: ", ";\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n padding-left: ", ";\n"])), function (_a) {
1523
+ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n padding-left: ", ";\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n padding-left: ", ";\n"])), function (_a) {
1455
1524
  var theme = _a.theme;
1456
1525
  return theme.borders.sm;
1457
1526
  }, function (_a) {
@@ -1473,10 +1542,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$o || (t
1473
1542
  - To give a consistent dashboard and navigation experience
1474
1543
  */
1475
1544
  var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
1476
- var templateObject_1$o;
1545
+ var templateObject_1$p;
1477
1546
 
1478
- var SelectedItemStyle = styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
1479
- var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
1547
+ var SelectedItemStyle = styled.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
1548
+ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
1480
1549
  var theme = _a.theme;
1481
1550
  return theme.fonts.system;
1482
1551
  }, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
@@ -1487,11 +1556,11 @@ var NavItem = function (props) {
1487
1556
  // const { isExpanded } = props;
1488
1557
  return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
1489
1558
  };
1490
- var templateObject_1$n, templateObject_2$a;
1559
+ var templateObject_1$o, templateObject_2$b;
1491
1560
 
1492
- var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject([""], [""])));
1561
+ var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
1493
1562
  var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
1494
- var templateObject_1$m;
1563
+ var templateObject_1$n;
1495
1564
 
1496
1565
  /**
1497
1566
  * Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
@@ -1500,41 +1569,41 @@ var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis
1500
1569
 
1501
1570
  var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
1502
1571
 
1503
- var _path$a;
1572
+ var _path$9;
1504
1573
 
1505
- function _extends$c() { _extends$c = Object.assign || 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); }
1574
+ function _extends$b() { _extends$b = Object.assign || 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); }
1506
1575
 
1507
1576
  var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
1508
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
1577
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
1509
1578
  xmlns: "http://www.w3.org/2000/svg",
1510
1579
  width: 16,
1511
1580
  height: 16,
1512
1581
  focusable: "false",
1513
1582
  viewBox: "0 0 16 16"
1514
- }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
1583
+ }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
1515
1584
  fill: "currentColor",
1516
1585
  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"
1517
1586
  })));
1518
1587
  };
1519
1588
 
1520
- var _path$9;
1589
+ var _path$8;
1521
1590
 
1522
- function _extends$b() { _extends$b = Object.assign || 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); }
1591
+ function _extends$a() { _extends$a = Object.assign || 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); }
1523
1592
 
1524
1593
  var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
1525
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
1594
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
1526
1595
  xmlns: "http://www.w3.org/2000/svg",
1527
1596
  width: 16,
1528
1597
  height: 16,
1529
1598
  focusable: "false",
1530
1599
  viewBox: "0 0 16 16"
1531
- }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
1600
+ }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
1532
1601
  fill: "currentColor",
1533
1602
  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"
1534
1603
  })));
1535
1604
  };
1536
1605
 
1537
- var StyledToggle = styled__default["default"](IconButton)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1606
+ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1538
1607
  var theme = _a.theme;
1539
1608
  return theme.space.base * 6;
1540
1609
  }, function (_a) {
@@ -1559,42 +1628,42 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$l ||
1559
1628
  var NavToggle = function (props) {
1560
1629
  return (jsxRuntime.jsx(StyledToggle, __assign({}, props, { isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, { style: { width: "100%" } })) : (jsxRuntime.jsx(SvgChevronRightStroke, { style: { width: "100%" } })) })));
1561
1630
  };
1562
- var templateObject_1$l;
1631
+ var templateObject_1$m;
1563
1632
 
1564
- var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"], ["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"])), function (props) { return props.theme.space.lg; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
1633
+ var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"], ["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"])), function (props) { return props.theme.space.lg; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
1565
1634
  var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
1566
- var templateObject_1$k;
1635
+ var templateObject_1$l;
1567
1636
 
1568
- var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
1569
- var UgNavItem = styled__default["default"](NavItem)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
1637
+ var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
1638
+ var UgNavItem = styled__default["default"](NavItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
1570
1639
  var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
1571
1640
  NavItemProject.Title = NavItemText;
1572
1641
  NavItemProject.SubTitle = UgProjectSubtitle;
1573
- var templateObject_1$j, templateObject_2$9;
1642
+ var templateObject_1$k, templateObject_2$a;
1574
1643
 
1575
- var _path$8;
1644
+ var _path$7;
1576
1645
 
1577
- function _extends$a() { _extends$a = Object.assign || 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); }
1646
+ function _extends$9() { _extends$9 = Object.assign || 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); }
1578
1647
 
1579
1648
  var SvgHomeFill = function SvgHomeFill(props) {
1580
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
1649
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
1581
1650
  xmlns: "http://www.w3.org/2000/svg",
1582
1651
  width: 26,
1583
1652
  height: 26,
1584
1653
  focusable: "false",
1585
1654
  viewBox: "0 0 26 26"
1586
- }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
1655
+ }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
1587
1656
  fill: "currentColor",
1588
1657
  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"
1589
1658
  })));
1590
1659
  };
1591
1660
 
1592
- var _linearGradient, _path$7;
1661
+ var _linearGradient, _path$6;
1593
1662
 
1594
- function _extends$9() { _extends$9 = Object.assign || 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); }
1663
+ function _extends$8() { _extends$8 = Object.assign || 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); }
1595
1664
 
1596
1665
  var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
1597
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
1666
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
1598
1667
  xmlns: "http://www.w3.org/2000/svg",
1599
1668
  width: 26,
1600
1669
  height: 26,
@@ -1610,7 +1679,7 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
1610
1679
  className: "stop3",
1611
1680
  offset: "100%",
1612
1681
  stopColor: "#001825"
1613
- }))), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
1682
+ }))), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
1614
1683
  fill: "url(#unguessIconGradient)",
1615
1684
  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"
1616
1685
  })));
@@ -1618,10 +1687,10 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
1618
1687
 
1619
1688
  var _g, _defs;
1620
1689
 
1621
- function _extends$8() { _extends$8 = Object.assign || 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); }
1690
+ function _extends$7() { _extends$7 = Object.assign || 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); }
1622
1691
 
1623
1692
  var SvgToken = function SvgToken(props) {
1624
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
1693
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
1625
1694
  fill: "none",
1626
1695
  viewBox: "0 0 32 32",
1627
1696
  xmlns: "http://www.w3.org/2000/svg"
@@ -1673,8 +1742,8 @@ var LoadingSidebar = function () {
1673
1742
  return (jsxRuntime.jsxs(Nav, __assign({ style: { width: "250px" } }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
1674
1743
  };
1675
1744
 
1676
- var TokenContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
1677
- var ScrollingContainer = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
1745
+ var TokenContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
1746
+ var ScrollingContainer = styled__default["default"].div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
1678
1747
  /**
1679
1748
  * The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
1680
1749
  * <br>
@@ -1693,9 +1762,9 @@ var Sidebar = function (props) {
1693
1762
  return props.isLoading ? jsxRuntime.jsx(LoadingSidebar, {}) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
1694
1763
  props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return navigate(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
1695
1764
  };
1696
- var templateObject_1$i, templateObject_2$8;
1765
+ var templateObject_1$j, templateObject_2$9;
1697
1766
 
1698
- var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"], ["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"])), function (_a) {
1767
+ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"], ["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"])), function (_a) {
1699
1768
  var theme = _a.theme;
1700
1769
  return theme.breakpoints.sm;
1701
1770
  }, function (_a) {
@@ -1706,13 +1775,13 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$h ||
1706
1775
  * A Main defines the main content of an HTML document which displays on the browser
1707
1776
  */
1708
1777
  var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
1709
- var templateObject_1$h;
1778
+ var templateObject_1$i;
1710
1779
 
1711
- var StyledHr = styled__default["default"].hr(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"], ["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
1780
+ var StyledHr = styled__default["default"].hr(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"], ["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
1712
1781
  var PageLoader = function () {
1713
1782
  return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isLoading: true }), jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px" }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
1714
1783
  };
1715
- var templateObject_1$g;
1784
+ var templateObject_1$h;
1716
1785
 
1717
1786
  /**
1718
1787
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1760,7 +1829,7 @@ var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment,
1760
1829
  : false, isPrimary: true, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
1761
1830
  } }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __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"] })))] })); };
1762
1831
 
1763
- var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
1832
+ var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
1764
1833
  var theme = _a.theme;
1765
1834
  return theme.palette.grey["800"];
1766
1835
  });
@@ -1769,7 +1838,35 @@ var FooterItem = reactModals.FooterItem;
1769
1838
  Modal.Header = reactModals.Header;
1770
1839
  Modal.Body = ugModalBody;
1771
1840
  Modal.Footer = reactModals.Footer;
1772
- var templateObject_1$f;
1841
+ var templateObject_1$g;
1842
+
1843
+ var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
1844
+ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"])), function (_a) {
1845
+ var theme = _a.theme;
1846
+ return theme.space.base * 3;
1847
+ }, function (_a) {
1848
+ var theme = _a.theme;
1849
+ return theme.space.base * 6;
1850
+ });
1851
+ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1852
+ var theme = _a.theme;
1853
+ return theme.palette.grey["100"];
1854
+ });
1855
+ var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n padding: ", "px ", "px;\n"], ["\n padding: ", "px ", "px;\n"])), function (_a) {
1856
+ var theme = _a.theme;
1857
+ return theme.space.base * 4;
1858
+ }, function (_a) {
1859
+ var theme = _a.theme;
1860
+ return theme.space.base * 6;
1861
+ });
1862
+ var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: relative;\n top: unset;\n right: unset;\n"], ["\n position: relative;\n top: unset;\n right: unset;\n"])));
1863
+ var ModalFullScreen = function (props) { return jsxRuntime.jsx(StyledModal$1, __assign({}, props)); };
1864
+ ModalFullScreen.Header = StyledHeader;
1865
+ ModalFullScreen.Body = StyledBody$4;
1866
+ ModalFullScreen.Footer = StyledFooter;
1867
+ ModalFullScreen.Close = StyledModalClose;
1868
+ ModalFullScreen.FooterItem = FooterItem;
1869
+ var templateObject_1$f, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$1;
1773
1870
 
1774
1871
  /**
1775
1872
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -1802,36 +1899,36 @@ var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign
1802
1899
  var CursorPagination = reactPagination.CursorPagination;
1803
1900
  var templateObject_1$e;
1804
1901
 
1805
- var _path$6;
1902
+ var _path$5;
1806
1903
 
1807
- function _extends$7() { _extends$7 = Object.assign || 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); }
1904
+ function _extends$6() { _extends$6 = Object.assign || 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$6.apply(this, arguments); }
1808
1905
 
1809
1906
  var SvgExit = function SvgExit(props) {
1810
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
1907
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
1811
1908
  width: 12,
1812
1909
  height: 13,
1813
1910
  viewBox: "0 0 12 13",
1814
1911
  fill: "#68737D",
1815
1912
  xmlns: "http://www.w3.org/2000/svg"
1816
- }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
1913
+ }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
1817
1914
  fillRule: "evenodd",
1818
1915
  clipRule: "evenodd",
1819
1916
  d: "M2.5 12.9992C2.37 12.9992 2.25 12.9492 2.15 12.8592L0.15 10.9292C0.0580183 10.8314 0.0047128 10.7034 0 10.5692V3.42923C0 3.29923 0.06 3.16923 0.15 3.06923L2.15 1.13923C2.3 0.999232 2.51 0.959232 2.7 1.03923C2.88 1.11923 3 1.29923 3 1.49923V2.99923H6C6.55614 2.99923 7 3.44309 7 3.99923V4.99923C7 5.27537 6.77614 5.49923 6.5 5.49923C6.22386 5.49923 6 5.27537 6 4.99923V3.99923H3V9.99923H6V8.99923C6 8.72309 6.22386 8.49923 6.5 8.49923C6.77614 8.49923 7 8.72309 7 8.99923V9.99923C7 10.5554 6.55614 10.9992 6 10.9992H3V12.4992C3 12.6992 2.88 12.8792 2.7 12.9592C2.63 12.9892 2.57 12.9992 2.5 12.9992ZM9.5 9.49923C9.44 9.49923 9.37 9.48923 9.31 9.45923C9.12311 9.38275 9.00074 9.20117 9 8.99923L8.99631 7.49923H5C4.72386 7.49923 4.5 7.27537 4.5 6.99923C4.5 6.72309 4.72386 6.49923 5 6.49923H8.99384L8.99 4.93923C8.99 4.73923 9.11 4.54923 9.3 4.47923C9.49 4.39923 9.7 4.44923 9.84 4.58923L11.51 6.28923C11.89 6.67923 11.89 7.30923 11.5 7.69923L9.85 9.34923C9.75972 9.44637 9.6326 9.50085 9.5 9.49923Z"
1820
1917
  })));
1821
1918
  };
1822
1919
 
1823
- var _path$5;
1920
+ var _path$4;
1824
1921
 
1825
- function _extends$6() { _extends$6 = Object.assign || 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$6.apply(this, arguments); }
1922
+ function _extends$5() { _extends$5 = Object.assign || 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$5.apply(this, arguments); }
1826
1923
 
1827
1924
  var SvgThumbsUp = function SvgThumbsUp(props) {
1828
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
1925
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
1829
1926
  width: 16,
1830
1927
  height: 16,
1831
1928
  viewBox: "0 0 16 16",
1832
1929
  fill: "none",
1833
1930
  xmlns: "http://www.w3.org/2000/svg"
1834
- }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
1931
+ }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
1835
1932
  fillRule: "evenodd",
1836
1933
  clipRule: "evenodd",
1837
1934
  d: "M13.5 15C14.2828 15 14.8192 11.8284 15 7.5C15 7.22386 14.7761 7 14.5 7H9.5C9.22386 7 9 6.77614 9 6.5V2C9 1.44772 8.55229 1 8 1C7.44772 1 7 1.44772 7 2C7 4.97341 6.19918 6.46065 5.02719 6.8454C5.01015 6.85409 4.99957 6.87174 5 6.9L4.99891 15C4.99927 15 13.5 15 13.5 15ZM10 6H14.5C15.3284 6 16 6.67157 15.9996 7.52082C15.7692 13.0486 15.2701 16 13.5 16L5.03301 15.9989C4.75408 16.0174 4.48075 15.9146 4.28308 15.7169C4.08542 15.5193 3.98264 15.2459 4 15L4.00008 6.90914C3.99274 6.50762 4.21507 6.13707 4.64189 5.92566C5.41645 5.66747 6 4.58373 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2V6ZM1 7V15H2V7H1ZM1 6H2C2.55228 6 3 6.44772 3 7V15C3 15.5523 2.55228 16 2 16H1C0.447715 16 0 15.5523 0 15V7C0 6.44772 0.447715 6 1 6Z",
@@ -1868,36 +1965,36 @@ var MenuItem = function (_a) {
1868
1965
  };
1869
1966
  var templateObject_1$c, templateObject_2$7, templateObject_3$5, templateObject_4$2;
1870
1967
 
1871
- var _path$4;
1968
+ var _path$3;
1872
1969
 
1873
- function _extends$5() { _extends$5 = Object.assign || 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$5.apply(this, arguments); }
1970
+ function _extends$4() { _extends$4 = Object.assign || 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$4.apply(this, arguments); }
1874
1971
 
1875
1972
  var SvgQuestionMark = function SvgQuestionMark(props) {
1876
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
1973
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
1877
1974
  width: 16,
1878
1975
  height: 16,
1879
1976
  viewBox: "0 0 16 16",
1880
1977
  fill: "#68737D",
1881
1978
  xmlns: "http://www.w3.org/2000/svg"
1882
- }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
1979
+ }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
1883
1980
  fillRule: "evenodd",
1884
1981
  clipRule: "evenodd",
1885
1982
  d: "M7.99997 11.5C8.55226 11.5 8.99997 11.0523 8.99997 10.5V9.4C8.99997 8.83787 9.33361 8.32072 9.92997 7.948C11.3791 7.15957 12.2479 5.53522 11.9883 3.84794C11.7161 2.21413 10.3858 0.883851 8.76437 0.613605C6.74482 0.234732 4.81137 1.36258 4.24419 3.20591C4.08177 3.73378 4.37802 4.29336 4.90589 4.45578C5.43375 4.6182 5.99333 4.32195 6.15575 3.79409C6.41982 2.93586 7.36323 2.38554 8.41568 2.58287C9.2141 2.71615 9.88382 3.38587 10.0136 4.1644C10.139 4.98036 9.70294 5.79565 8.92112 6.2221C7.72579 6.96712 6.99997 8.09213 6.99997 9.4V10.5C6.99997 11.0523 7.44769 11.5 7.99997 11.5ZM7.99997 15.5C8.8284 15.5 9.49997 14.8284 9.49997 14C9.49997 13.1716 8.8284 12.5 7.99997 12.5C7.17155 12.5 6.49997 13.1716 6.49997 14C6.49997 14.8284 7.17155 15.5 7.99997 15.5Z"
1886
1983
  })));
1887
1984
  };
1888
1985
 
1889
- var _path$3;
1986
+ var _path$2;
1890
1987
 
1891
- function _extends$4() { _extends$4 = Object.assign || 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$4.apply(this, arguments); }
1988
+ function _extends$3() { _extends$3 = Object.assign || 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$3.apply(this, arguments); }
1892
1989
 
1893
1990
  var SvgCopy = function SvgCopy(props) {
1894
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
1991
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
1895
1992
  width: 12,
1896
1993
  height: 16,
1897
1994
  viewBox: "0 0 12 16",
1898
1995
  fill: "none",
1899
1996
  xmlns: "http://www.w3.org/2000/svg"
1900
- }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
1997
+ }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
1901
1998
  fillRule: "evenodd",
1902
1999
  clipRule: "evenodd",
1903
2000
  d: "M2.625 10C2.83211 10 3 10.2239 3 10.5C3 10.7761 2.83211 11 2.625 11H0.75C0.335786 11 0 10.5523 0 10V1C0 0.447715 0.335786 0 0.75 0H7.5C7.91421 0 8.25 0.447715 8.25 1V3.5C8.25 3.77614 8.08211 4 7.875 4C7.66789 4 7.5 3.77614 7.5 3.5V1H0.75V10H2.625ZM4.5 6V15H11.25V6H4.5ZM4.5 5H11.25C11.6642 5 12 5.44772 12 6V15C12 15.5523 11.6642 16 11.25 16H4.5C4.08579 16 3.75 15.5523 3.75 15V6C3.75 5.44772 4.08579 5 4.5 5Z",
@@ -1905,18 +2002,18 @@ var SvgCopy = function SvgCopy(props) {
1905
2002
  })));
1906
2003
  };
1907
2004
 
1908
- var _path$2;
2005
+ var _path$1;
1909
2006
 
1910
- function _extends$3() { _extends$3 = Object.assign || 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$3.apply(this, arguments); }
2007
+ function _extends$2() { _extends$2 = Object.assign || 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$2.apply(this, arguments); }
1911
2008
 
1912
2009
  var SvgInfoFill = function SvgInfoFill(props) {
1913
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
2010
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
1914
2011
  width: 16,
1915
2012
  height: 16,
1916
2013
  viewBox: "0 0 16 16",
1917
2014
  fill: "#68737D",
1918
2015
  xmlns: "http://www.w3.org/2000/svg"
1919
- }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
2016
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
1920
2017
  fillRule: "evenodd",
1921
2018
  clipRule: "evenodd",
1922
2019
  d: "M7.5 16C3.36 16 0 12.64 0 8.5C0 4.36 3.36 1 7.5 1C11.64 1 15 4.36 15 8.5C15 12.64 11.64 16 7.5 16ZM7 12.5C7 12.78 7.22 13 7.5 13C7.78 13 8 12.78 8 12.5V8C8 7.72 7.78 7.5 7.5 7.5C7.22 7.5 7 7.72 7 8V12.5ZM7.5 4C6.95 4 6.5 4.45 6.5 5C6.5 5.55 6.95 6 7.5 6C8.05 6 8.5 5.55 8.5 5C8.5 4.45 8.05 4 7.5 4Z"
@@ -1971,24 +2068,6 @@ var HelpItem = function (props) {
1971
2068
  };
1972
2069
  var templateObject_1$9, templateObject_2$6, templateObject_3$4, templateObject_4$1, templateObject_5, templateObject_6;
1973
2070
 
1974
- var _path$1;
1975
-
1976
- function _extends$2() { _extends$2 = Object.assign || 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$2.apply(this, arguments); }
1977
-
1978
- var SvgCheckLg = function SvgCheckLg(props) {
1979
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
1980
- width: 16,
1981
- height: 16,
1982
- viewBox: "0 0 16 16",
1983
- fill: "#68737D",
1984
- xmlns: "http://www.w3.org/2000/svg"
1985
- }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
1986
- fillRule: "evenodd",
1987
- clipRule: "evenodd",
1988
- 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"
1989
- })));
1990
- };
1991
-
1992
2071
  function _extends$1() { _extends$1 = Object.assign || 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$1.apply(this, arguments); }
1993
2072
 
1994
2073
  var SvgEmpty = function SvgEmpty(props) {
@@ -2339,6 +2418,7 @@ exports.MediaItem = MediaItem;
2339
2418
  exports.Menu = Menu;
2340
2419
  exports.Message = Message;
2341
2420
  exports.Modal = Modal;
2421
+ exports.ModalFullScreen = ModalFullScreen;
2342
2422
  exports.Multiselect = Multiselect;
2343
2423
  exports.Nav = Nav;
2344
2424
  exports.NavDivider = NavDivider;
@@ -2358,6 +2438,7 @@ exports.ProductCard = ProductCard;
2358
2438
  exports.ProfileModal = ProfileModal;
2359
2439
  exports.Progress = Progress;
2360
2440
  exports.Radio = Radio;
2441
+ exports.RadioCard = RadioCard;
2361
2442
  exports.Row = Row$1;
2362
2443
  exports.SM = SM;
2363
2444
  exports.Select = Select;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.10.1",
3
+ "version": "2.10.2",
4
4
  "dependencies": {
5
5
  "@zendeskgarden/css-bedrock": "^9.0.0",
6
6
  "@zendeskgarden/react-accordions": "^8.49.0",