@appquality/unguess-design-system 2.9.0 → 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 +41 -0
- package/build/index.d.ts +4 -0
- package/build/index.js +356 -214
- package/build/stories/forms/checkbox/cards/_types.d.ts +9 -0
- package/build/stories/forms/checkbox/cards/index.d.ts +4 -0
- package/build/stories/forms/checkbox/cards/index.stories.d.ts +13 -0
- package/build/stories/forms/radio/cards/_types.d.ts +11 -0
- package/build/stories/forms/radio/cards/index.d.ts +4 -0
- package/build/stories/forms/radio/cards/index.stories.d.ts +13 -0
- package/build/stories/stepper/_types.d.ts +14 -0
- package/build/stories/stepper/index.d.ts +15 -0
- package/build/stories/stepper/index.stories.d.ts +15 -0
- package/build/stories/theme/mixins.d.ts +1 -0
- package/package.json +1 -1
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$
|
|
240
|
-
var templateObject_1$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
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
|
-
var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
|
|
373
|
-
var templateObject_1$
|
|
372
|
+
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
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$
|
|
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,12 +592,33 @@ 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$
|
|
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$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
|
+
var theme = _a.theme;
|
|
605
|
+
return (theme.rtl ? "flex-end" : "flex-start");
|
|
606
|
+
});
|
|
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
|
+
var theme = _a.theme;
|
|
609
|
+
return theme.borderRadii.lg;
|
|
610
|
+
}, function (_a) {
|
|
611
|
+
var theme = _a.theme;
|
|
612
|
+
return theme.components.notification.card.padding;
|
|
613
|
+
}, function (_a) {
|
|
614
|
+
var theme = _a.theme;
|
|
615
|
+
return theme.palette.grey["200"];
|
|
616
|
+
}, function (_a) {
|
|
617
|
+
var theme = _a.theme;
|
|
618
|
+
return theme.shadows.boxShadow(theme);
|
|
619
|
+
});
|
|
620
|
+
var templateObject_1$P, templateObject_2$h, templateObject_3$c, templateObject_4$8;
|
|
621
|
+
|
|
601
622
|
var getStatusIcon = function (status) {
|
|
602
623
|
switch (status) {
|
|
603
624
|
case "COMPLETED":
|
|
@@ -620,24 +641,12 @@ var getTypeDataIcon = function (type) {
|
|
|
620
641
|
return SvgFunctionalTestRoundIcon;
|
|
621
642
|
}
|
|
622
643
|
};
|
|
623
|
-
var Wrapper$1 = styled__default["default"](Card)(templateObject_1$
|
|
624
|
-
|
|
625
|
-
return theme.borderRadii.lg;
|
|
626
|
-
}, function (_a) {
|
|
627
|
-
var theme = _a.theme;
|
|
628
|
-
return theme.components.notification.card.padding;
|
|
629
|
-
}, function (_a) {
|
|
630
|
-
var theme = _a.theme;
|
|
631
|
-
return theme.palette.grey["200"];
|
|
632
|
-
}, function (_a) {
|
|
633
|
-
var theme = _a.theme;
|
|
634
|
-
return theme.shadows.boxShadow(theme);
|
|
635
|
-
});
|
|
636
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$d || (templateObject_2$d = __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) {
|
|
637
646
|
var theme = _a.theme;
|
|
638
647
|
return theme.palette.grey["700"];
|
|
639
648
|
});
|
|
640
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$
|
|
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) {
|
|
641
650
|
var theme = _a.theme;
|
|
642
651
|
return theme.space.base * 6;
|
|
643
652
|
}, function (_a) {
|
|
@@ -650,14 +659,14 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$8 || (temp
|
|
|
650
659
|
var theme = _a.theme;
|
|
651
660
|
return theme.palette.white;
|
|
652
661
|
});
|
|
653
|
-
var StyledLabel$
|
|
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) {
|
|
654
663
|
var theme = _a.theme;
|
|
655
664
|
return theme.fontSizes.sm;
|
|
656
665
|
}, function (_a) {
|
|
657
666
|
var theme = _a.theme;
|
|
658
667
|
return theme.palette.grey["500"];
|
|
659
668
|
});
|
|
660
|
-
var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$
|
|
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) {
|
|
661
670
|
var theme = _a.theme;
|
|
662
671
|
return theme.palette.blue["600"];
|
|
663
672
|
}, function (_a) {
|
|
@@ -692,11 +701,11 @@ var CampaignCard = function (props) {
|
|
|
692
701
|
if (campaignTitle.length > 29) {
|
|
693
702
|
campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
|
|
694
703
|
}
|
|
695
|
-
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$
|
|
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, {})] })] })));
|
|
696
705
|
};
|
|
697
|
-
var templateObject_1$
|
|
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;
|
|
698
707
|
|
|
699
|
-
var Wrapper = styled__default["default"](Card)(templateObject_1$
|
|
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) {
|
|
700
709
|
var theme = _a.theme;
|
|
701
710
|
return theme.borderRadii.lg;
|
|
702
711
|
}, function (_a) {
|
|
@@ -709,7 +718,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateOb
|
|
|
709
718
|
var theme = _a.theme;
|
|
710
719
|
return theme.shadows.boxShadow(theme);
|
|
711
720
|
});
|
|
712
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_2$
|
|
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) {
|
|
713
722
|
var theme = _a.theme;
|
|
714
723
|
return theme.space.base * 6;
|
|
715
724
|
}, function (_a) {
|
|
@@ -722,21 +731,21 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$c || (templa
|
|
|
722
731
|
var theme = _a.theme;
|
|
723
732
|
return theme.palette.white;
|
|
724
733
|
});
|
|
725
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_3$
|
|
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) {
|
|
726
735
|
var theme = _a.theme;
|
|
727
736
|
return theme.fontSizes.sm;
|
|
728
737
|
}, function (_a) {
|
|
729
738
|
var theme = _a.theme;
|
|
730
739
|
return theme.palette.grey["500"];
|
|
731
740
|
});
|
|
732
|
-
var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$
|
|
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) {
|
|
733
742
|
var theme = _a.theme;
|
|
734
743
|
return theme.palette.blue["600"];
|
|
735
744
|
}, function (_a) {
|
|
736
745
|
var theme = _a.theme;
|
|
737
746
|
return theme.fontSizes.lg;
|
|
738
747
|
});
|
|
739
|
-
var Divider = styled__default["default"].div(templateObject_5$
|
|
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) {
|
|
740
749
|
var theme = _a.theme;
|
|
741
750
|
return theme.space.sm;
|
|
742
751
|
}, function (_a) {
|
|
@@ -755,9 +764,9 @@ var ProductCard = function (props) {
|
|
|
755
764
|
if (productTitle.length > 42) {
|
|
756
765
|
productTitleCut = "".concat(productTitle.substring(0, 39), "...");
|
|
757
766
|
}
|
|
758
|
-
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, __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 })) })] })));
|
|
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 })) })] })));
|
|
759
768
|
};
|
|
760
|
-
var templateObject_1$
|
|
769
|
+
var templateObject_1$N, templateObject_2$f, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
761
770
|
|
|
762
771
|
var Drawer = function (props) { return jsxRuntime.jsx(reactModals.DrawerModal, __assign({}, props)); };
|
|
763
772
|
Drawer.Header = reactModals.DrawerModal.Header;
|
|
@@ -970,7 +979,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
970
979
|
})));
|
|
971
980
|
};
|
|
972
981
|
|
|
973
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_1$
|
|
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) {
|
|
974
983
|
var theme = _a.theme;
|
|
975
984
|
return theme.fontWeights.regular;
|
|
976
985
|
}, function (_a) {
|
|
@@ -1006,24 +1015,24 @@ var Counter = function (props) {
|
|
|
1006
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() })] })));
|
|
1007
1016
|
};
|
|
1008
1017
|
Counter.Avatar = StyledTag.Avatar;
|
|
1009
|
-
var templateObject_1$
|
|
1018
|
+
var templateObject_1$M;
|
|
1010
1019
|
|
|
1011
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1012
|
-
var templateObject_1$
|
|
1020
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1021
|
+
var templateObject_1$L;
|
|
1013
1022
|
|
|
1014
1023
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1015
1024
|
__proto__: null,
|
|
1016
1025
|
Field: Field$1
|
|
1017
1026
|
});
|
|
1018
1027
|
|
|
1019
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
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) {
|
|
1020
1029
|
var theme = _a.theme;
|
|
1021
1030
|
return theme.palette.blue[100];
|
|
1022
1031
|
});
|
|
1023
1032
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1024
|
-
var templateObject_1$
|
|
1033
|
+
var templateObject_1$K;
|
|
1025
1034
|
|
|
1026
|
-
var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$
|
|
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"])));
|
|
1027
1036
|
/**
|
|
1028
1037
|
* A Menu is a wrapper for items elements
|
|
1029
1038
|
**/
|
|
@@ -1036,7 +1045,7 @@ var ItemMeta = function (props) { return jsxRuntime.jsx(reactDropdowns.ItemMeta,
|
|
|
1036
1045
|
var MediaBody = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaBody, __assign({}, props)); };
|
|
1037
1046
|
var MediaFigure = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaFigure, __assign({}, props)); };
|
|
1038
1047
|
var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
|
|
1039
|
-
var templateObject_1$
|
|
1048
|
+
var templateObject_1$J;
|
|
1040
1049
|
|
|
1041
1050
|
/**
|
|
1042
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.
|
|
@@ -1047,7 +1056,7 @@ var templateObject_1$G;
|
|
|
1047
1056
|
*/
|
|
1048
1057
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1049
1058
|
|
|
1050
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1059
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1051
1060
|
return props.isPrimary &&
|
|
1052
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 ");
|
|
1053
1062
|
});
|
|
@@ -1064,7 +1073,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1064
1073
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1065
1074
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1066
1075
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1067
|
-
var templateObject_1$
|
|
1076
|
+
var templateObject_1$I;
|
|
1068
1077
|
|
|
1069
1078
|
/**
|
|
1070
1079
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1077,7 +1086,7 @@ var templateObject_1$F;
|
|
|
1077
1086
|
*/
|
|
1078
1087
|
var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autocomplete, __assign({}, props)); };
|
|
1079
1088
|
|
|
1080
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1089
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1081
1090
|
/**
|
|
1082
1091
|
* A Checkbox lets users select and unselect options from a list.
|
|
1083
1092
|
* <hr>
|
|
@@ -1089,14 +1098,42 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1089
1098
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1090
1099
|
**/
|
|
1091
1100
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1092
|
-
var templateObject_1$
|
|
1101
|
+
var templateObject_1$H;
|
|
1102
|
+
|
|
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
|
+
var theme = _a.theme;
|
|
1105
|
+
return theme.palette.blue[300];
|
|
1106
|
+
});
|
|
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
|
+
var theme = _a.theme;
|
|
1109
|
+
return theme.space.base;
|
|
1110
|
+
});
|
|
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
|
+
var theme = _a.theme;
|
|
1113
|
+
return theme.space.base;
|
|
1114
|
+
}, function (_a) {
|
|
1115
|
+
var theme = _a.theme;
|
|
1116
|
+
return theme.palette.grey[600];
|
|
1117
|
+
});
|
|
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
|
+
var theme = _a.theme;
|
|
1120
|
+
return theme.space.base;
|
|
1121
|
+
});
|
|
1122
|
+
var CheckboxCard = function (props) {
|
|
1123
|
+
var _a = React.useState(props.defaultChecked || false), checked = _a[0], setChecked = _a[1];
|
|
1124
|
+
var handleToggle = function () {
|
|
1125
|
+
setChecked(!checked);
|
|
1126
|
+
};
|
|
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
|
+
};
|
|
1129
|
+
var templateObject_1$G, templateObject_2$e, templateObject_3$9, templateObject_4$5;
|
|
1093
1130
|
|
|
1094
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1131
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1095
1132
|
/**
|
|
1096
1133
|
* A Field is a wrapper for input elements
|
|
1097
1134
|
**/
|
|
1098
1135
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1099
|
-
var templateObject_1$
|
|
1136
|
+
var templateObject_1$F;
|
|
1100
1137
|
|
|
1101
1138
|
var index = /*#__PURE__*/Object.freeze({
|
|
1102
1139
|
__proto__: null,
|
|
@@ -1104,7 +1141,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1104
1141
|
Hint: reactForms.Hint
|
|
1105
1142
|
});
|
|
1106
1143
|
|
|
1107
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1144
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1108
1145
|
/**
|
|
1109
1146
|
* An Input lets users enter text into a field.
|
|
1110
1147
|
* <hr>
|
|
@@ -1113,9 +1150,9 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$C ||
|
|
|
1113
1150
|
* - To enter multiline text, use a Textarea
|
|
1114
1151
|
**/
|
|
1115
1152
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1116
|
-
var templateObject_1$
|
|
1153
|
+
var templateObject_1$E;
|
|
1117
1154
|
|
|
1118
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1155
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1119
1156
|
/**
|
|
1120
1157
|
* Media elements add even more context to an input.
|
|
1121
1158
|
* <hr>
|
|
@@ -1124,9 +1161,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1124
1161
|
* - To enter multiline text, use a Textarea
|
|
1125
1162
|
**/
|
|
1126
1163
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1127
|
-
var templateObject_1$
|
|
1164
|
+
var templateObject_1$D;
|
|
1128
1165
|
|
|
1129
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1166
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1130
1167
|
/**
|
|
1131
1168
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1132
1169
|
* <hr>
|
|
@@ -1138,9 +1175,78 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$A ||
|
|
|
1138
1175
|
* - To select from a long list of options, use Select instead
|
|
1139
1176
|
**/
|
|
1140
1177
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1141
|
-
var templateObject_1$
|
|
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
|
+
};
|
|
1142
1197
|
|
|
1143
|
-
var
|
|
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([""], [""])));
|
|
1144
1250
|
/**
|
|
1145
1251
|
* A Textarea is a form control for multi-line text.
|
|
1146
1252
|
* <hr>
|
|
@@ -1148,9 +1254,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1148
1254
|
* - To enter multi-line text
|
|
1149
1255
|
**/
|
|
1150
1256
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1151
|
-
var templateObject_1$
|
|
1257
|
+
var templateObject_1$A;
|
|
1152
1258
|
|
|
1153
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1259
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
|
|
1154
1260
|
/**
|
|
1155
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.
|
|
1156
1262
|
* <hr>
|
|
@@ -1161,7 +1267,7 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$y
|
|
|
1161
1267
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1162
1268
|
**/
|
|
1163
1269
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1164
|
-
var templateObject_1$
|
|
1270
|
+
var templateObject_1$z;
|
|
1165
1271
|
|
|
1166
1272
|
var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
|
|
1167
1273
|
|
|
@@ -1175,58 +1281,58 @@ var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({},
|
|
|
1175
1281
|
*/
|
|
1176
1282
|
var Grid = function (props) { return jsxRuntime.jsx(reactGrid.Grid, __assign({}, props)); };
|
|
1177
1283
|
|
|
1178
|
-
var _path$
|
|
1284
|
+
var _path$e;
|
|
1179
1285
|
|
|
1180
|
-
function _extends$
|
|
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); }
|
|
1181
1287
|
|
|
1182
1288
|
var SvgUgSquare = function SvgUgSquare(props) {
|
|
1183
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1289
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
|
|
1184
1290
|
width: 24,
|
|
1185
1291
|
height: 24,
|
|
1186
1292
|
viewBox: "0 0 24 24",
|
|
1187
1293
|
fill: "none",
|
|
1188
1294
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1189
|
-
}, props), _path$
|
|
1295
|
+
}, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1190
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",
|
|
1191
1297
|
fill: "#E80C7A"
|
|
1192
1298
|
})));
|
|
1193
1299
|
};
|
|
1194
1300
|
|
|
1195
|
-
var _path$
|
|
1301
|
+
var _path$d;
|
|
1196
1302
|
|
|
1197
|
-
function _extends$
|
|
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); }
|
|
1198
1304
|
|
|
1199
1305
|
var SvgUgCircle = function SvgUgCircle(props) {
|
|
1200
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1306
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
|
|
1201
1307
|
width: 24,
|
|
1202
1308
|
height: 24,
|
|
1203
1309
|
viewBox: "0 0 24 24",
|
|
1204
1310
|
fill: "none",
|
|
1205
1311
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1206
|
-
}, props), _path$
|
|
1312
|
+
}, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1207
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",
|
|
1208
1314
|
fill: "#FFCD1A"
|
|
1209
1315
|
})));
|
|
1210
1316
|
};
|
|
1211
1317
|
|
|
1212
|
-
var _path$
|
|
1318
|
+
var _path$c;
|
|
1213
1319
|
|
|
1214
|
-
function _extends$
|
|
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); }
|
|
1215
1321
|
|
|
1216
1322
|
var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
1217
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1323
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
|
|
1218
1324
|
width: 24,
|
|
1219
1325
|
height: 24,
|
|
1220
1326
|
viewBox: "0 0 24 24",
|
|
1221
1327
|
fill: "none",
|
|
1222
1328
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1223
|
-
}, props), _path$
|
|
1329
|
+
}, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1224
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",
|
|
1225
1331
|
fill: "#7B0DFF"
|
|
1226
1332
|
})));
|
|
1227
1333
|
};
|
|
1228
1334
|
|
|
1229
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1335
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
|
|
1230
1336
|
var Icon = function (props) {
|
|
1231
1337
|
var children = function (type, size) {
|
|
1232
1338
|
if (size === void 0) { size = 24; }
|
|
@@ -1239,9 +1345,9 @@ var Icon = function (props) {
|
|
|
1239
1345
|
};
|
|
1240
1346
|
return (jsxRuntime.jsx(StyledUgIcon$1, { children: children(props.type, props.size) }));
|
|
1241
1347
|
};
|
|
1242
|
-
var templateObject_1$
|
|
1348
|
+
var templateObject_1$y;
|
|
1243
1349
|
|
|
1244
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1350
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
|
|
1245
1351
|
/**
|
|
1246
1352
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1247
1353
|
* <hr>
|
|
@@ -1253,9 +1359,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1253
1359
|
- When loading page content, use a Skeleton loader instead
|
|
1254
1360
|
*/
|
|
1255
1361
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1256
|
-
var templateObject_1$
|
|
1362
|
+
var templateObject_1$x;
|
|
1257
1363
|
|
|
1258
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1364
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
|
|
1259
1365
|
/**
|
|
1260
1366
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1261
1367
|
* <hr>
|
|
@@ -1264,9 +1370,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1264
1370
|
- To provide a quick way to navigate to ancestor pages
|
|
1265
1371
|
*/
|
|
1266
1372
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1267
|
-
var templateObject_1$
|
|
1373
|
+
var templateObject_1$w;
|
|
1268
1374
|
|
|
1269
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
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) {
|
|
1270
1376
|
var theme = _a.theme;
|
|
1271
1377
|
return theme.palette.white;
|
|
1272
1378
|
});
|
|
@@ -1274,43 +1380,43 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$u ||
|
|
|
1274
1380
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1275
1381
|
*/
|
|
1276
1382
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1277
|
-
var templateObject_1$
|
|
1383
|
+
var templateObject_1$v;
|
|
1278
1384
|
|
|
1279
1385
|
/**
|
|
1280
1386
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
1281
1387
|
*/
|
|
1282
1388
|
var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
|
|
1283
1389
|
|
|
1284
|
-
var _path$
|
|
1390
|
+
var _path$b;
|
|
1285
1391
|
|
|
1286
|
-
function _extends$
|
|
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); }
|
|
1287
1393
|
|
|
1288
1394
|
var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
1289
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1395
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
|
|
1290
1396
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1291
1397
|
width: 16,
|
|
1292
1398
|
height: 16,
|
|
1293
1399
|
focusable: "false",
|
|
1294
1400
|
viewBox: "0 0 16 16"
|
|
1295
|
-
}, props), _path$
|
|
1401
|
+
}, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1296
1402
|
fill: "currentColor",
|
|
1297
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"
|
|
1298
1404
|
})));
|
|
1299
1405
|
};
|
|
1300
1406
|
|
|
1301
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
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) {
|
|
1302
1408
|
var theme = _a.theme;
|
|
1303
1409
|
return theme.fonts.system;
|
|
1304
1410
|
});
|
|
1305
1411
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1306
|
-
var templateObject_1$
|
|
1412
|
+
var templateObject_1$u;
|
|
1307
1413
|
|
|
1308
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
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) {
|
|
1309
1415
|
var theme = _a.theme;
|
|
1310
1416
|
return theme.fonts.system;
|
|
1311
1417
|
});
|
|
1312
1418
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1313
|
-
var templateObject_1$
|
|
1419
|
+
var templateObject_1$t;
|
|
1314
1420
|
|
|
1315
1421
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1316
1422
|
|
|
@@ -1340,18 +1446,18 @@ var Logo = function (props) {
|
|
|
1340
1446
|
}[props.type] })));
|
|
1341
1447
|
};
|
|
1342
1448
|
|
|
1343
|
-
var _path$
|
|
1449
|
+
var _path$a;
|
|
1344
1450
|
|
|
1345
|
-
function _extends$
|
|
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); }
|
|
1346
1452
|
|
|
1347
1453
|
var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
1348
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1454
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
|
|
1349
1455
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1350
1456
|
width: 16,
|
|
1351
1457
|
height: 16,
|
|
1352
1458
|
focusable: "false",
|
|
1353
1459
|
viewBox: "0 0 16 16"
|
|
1354
|
-
}, props), _path$
|
|
1460
|
+
}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1355
1461
|
fill: "none",
|
|
1356
1462
|
stroke: "currentColor",
|
|
1357
1463
|
strokeLinecap: "round",
|
|
@@ -1359,11 +1465,11 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1359
1465
|
})));
|
|
1360
1466
|
};
|
|
1361
1467
|
|
|
1362
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
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) {
|
|
1363
1469
|
var theme = _a.theme;
|
|
1364
1470
|
return theme.breakpoints.sm;
|
|
1365
1471
|
});
|
|
1366
|
-
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$
|
|
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) {
|
|
1367
1473
|
var theme = _a.theme;
|
|
1368
1474
|
return theme.palette.blue["600"];
|
|
1369
1475
|
}, function (_a) {
|
|
@@ -1373,7 +1479,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1373
1479
|
var theme = _a.theme;
|
|
1374
1480
|
return theme.breakpoints.sm;
|
|
1375
1481
|
});
|
|
1376
|
-
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$
|
|
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) {
|
|
1377
1483
|
var theme = _a.theme;
|
|
1378
1484
|
return theme.palette.blue["600"];
|
|
1379
1485
|
}, function (_a) {
|
|
@@ -1383,9 +1489,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1383
1489
|
var BrandItem = function (props) {
|
|
1384
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 }) })))] }));
|
|
1385
1491
|
};
|
|
1386
|
-
var templateObject_1$
|
|
1492
|
+
var templateObject_1$s, templateObject_2$c, templateObject_3$7;
|
|
1387
1493
|
|
|
1388
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
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);
|
|
1389
1495
|
/**
|
|
1390
1496
|
* An Header is a visual way to display general information.
|
|
1391
1497
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1394,13 +1500,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1394
1500
|
Header.HeaderItem = HeaderItem;
|
|
1395
1501
|
Header.HeaderItemText = HeaderItemText;
|
|
1396
1502
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1397
|
-
var templateObject_1$
|
|
1503
|
+
var templateObject_1$r;
|
|
1398
1504
|
|
|
1399
1505
|
var HeaderSkeleton = function () {
|
|
1400
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%" } }) }) }) }))] })));
|
|
1401
1507
|
};
|
|
1402
1508
|
|
|
1403
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
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) {
|
|
1404
1510
|
var theme = _a.theme;
|
|
1405
1511
|
return theme.breakpoints.sm;
|
|
1406
1512
|
});
|
|
@@ -1412,9 +1518,9 @@ var AppHeader = function (_a) {
|
|
|
1412
1518
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1413
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, {}) }))] }) }) }))] })));
|
|
1414
1520
|
};
|
|
1415
|
-
var templateObject_1$
|
|
1521
|
+
var templateObject_1$q;
|
|
1416
1522
|
|
|
1417
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
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) {
|
|
1418
1524
|
var theme = _a.theme;
|
|
1419
1525
|
return theme.borders.sm;
|
|
1420
1526
|
}, function (_a) {
|
|
@@ -1436,10 +1542,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$o || (t
|
|
|
1436
1542
|
- To give a consistent dashboard and navigation experience
|
|
1437
1543
|
*/
|
|
1438
1544
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1439
|
-
var templateObject_1$
|
|
1545
|
+
var templateObject_1$p;
|
|
1440
1546
|
|
|
1441
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1442
|
-
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$
|
|
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) {
|
|
1443
1549
|
var theme = _a.theme;
|
|
1444
1550
|
return theme.fonts.system;
|
|
1445
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) {
|
|
@@ -1450,11 +1556,11 @@ var NavItem = function (props) {
|
|
|
1450
1556
|
// const { isExpanded } = props;
|
|
1451
1557
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1452
1558
|
};
|
|
1453
|
-
var templateObject_1$
|
|
1559
|
+
var templateObject_1$o, templateObject_2$b;
|
|
1454
1560
|
|
|
1455
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1561
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
|
|
1456
1562
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1457
|
-
var templateObject_1$
|
|
1563
|
+
var templateObject_1$n;
|
|
1458
1564
|
|
|
1459
1565
|
/**
|
|
1460
1566
|
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
@@ -1463,41 +1569,41 @@ var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis
|
|
|
1463
1569
|
|
|
1464
1570
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1465
1571
|
|
|
1466
|
-
var _path$
|
|
1572
|
+
var _path$9;
|
|
1467
1573
|
|
|
1468
|
-
function _extends$
|
|
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); }
|
|
1469
1575
|
|
|
1470
1576
|
var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
|
|
1471
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1577
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
|
|
1472
1578
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1473
1579
|
width: 16,
|
|
1474
1580
|
height: 16,
|
|
1475
1581
|
focusable: "false",
|
|
1476
1582
|
viewBox: "0 0 16 16"
|
|
1477
|
-
}, props), _path$
|
|
1583
|
+
}, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1478
1584
|
fill: "currentColor",
|
|
1479
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"
|
|
1480
1586
|
})));
|
|
1481
1587
|
};
|
|
1482
1588
|
|
|
1483
|
-
var _path$
|
|
1589
|
+
var _path$8;
|
|
1484
1590
|
|
|
1485
|
-
function _extends$
|
|
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); }
|
|
1486
1592
|
|
|
1487
1593
|
var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
1488
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1594
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
|
|
1489
1595
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1490
1596
|
width: 16,
|
|
1491
1597
|
height: 16,
|
|
1492
1598
|
focusable: "false",
|
|
1493
1599
|
viewBox: "0 0 16 16"
|
|
1494
|
-
}, props), _path$
|
|
1600
|
+
}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1495
1601
|
fill: "currentColor",
|
|
1496
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"
|
|
1497
1603
|
})));
|
|
1498
1604
|
};
|
|
1499
1605
|
|
|
1500
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
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) {
|
|
1501
1607
|
var theme = _a.theme;
|
|
1502
1608
|
return theme.space.base * 6;
|
|
1503
1609
|
}, function (_a) {
|
|
@@ -1522,42 +1628,42 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$l ||
|
|
|
1522
1628
|
var NavToggle = function (props) {
|
|
1523
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%" } })) })));
|
|
1524
1630
|
};
|
|
1525
|
-
var templateObject_1$
|
|
1631
|
+
var templateObject_1$m;
|
|
1526
1632
|
|
|
1527
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
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;"; });
|
|
1528
1634
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1529
|
-
var templateObject_1$
|
|
1635
|
+
var templateObject_1$l;
|
|
1530
1636
|
|
|
1531
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1532
|
-
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$
|
|
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"])));
|
|
1533
1639
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1534
1640
|
NavItemProject.Title = NavItemText;
|
|
1535
1641
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1536
|
-
var templateObject_1$
|
|
1642
|
+
var templateObject_1$k, templateObject_2$a;
|
|
1537
1643
|
|
|
1538
|
-
var _path$
|
|
1644
|
+
var _path$7;
|
|
1539
1645
|
|
|
1540
|
-
function _extends$
|
|
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); }
|
|
1541
1647
|
|
|
1542
1648
|
var SvgHomeFill = function SvgHomeFill(props) {
|
|
1543
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1649
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
|
|
1544
1650
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1545
1651
|
width: 26,
|
|
1546
1652
|
height: 26,
|
|
1547
1653
|
focusable: "false",
|
|
1548
1654
|
viewBox: "0 0 26 26"
|
|
1549
|
-
}, props), _path$
|
|
1655
|
+
}, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1550
1656
|
fill: "currentColor",
|
|
1551
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"
|
|
1552
1658
|
})));
|
|
1553
1659
|
};
|
|
1554
1660
|
|
|
1555
|
-
var _linearGradient, _path$
|
|
1661
|
+
var _linearGradient, _path$6;
|
|
1556
1662
|
|
|
1557
|
-
function _extends$
|
|
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); }
|
|
1558
1664
|
|
|
1559
1665
|
var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
|
|
1560
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1666
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
|
|
1561
1667
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1562
1668
|
width: 26,
|
|
1563
1669
|
height: 26,
|
|
@@ -1573,7 +1679,7 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
|
|
|
1573
1679
|
className: "stop3",
|
|
1574
1680
|
offset: "100%",
|
|
1575
1681
|
stopColor: "#001825"
|
|
1576
|
-
}))), _path$
|
|
1682
|
+
}))), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1577
1683
|
fill: "url(#unguessIconGradient)",
|
|
1578
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"
|
|
1579
1685
|
})));
|
|
@@ -1581,10 +1687,10 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
|
|
|
1581
1687
|
|
|
1582
1688
|
var _g, _defs;
|
|
1583
1689
|
|
|
1584
|
-
function _extends$
|
|
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); }
|
|
1585
1691
|
|
|
1586
1692
|
var SvgToken = function SvgToken(props) {
|
|
1587
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1693
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
|
|
1588
1694
|
fill: "none",
|
|
1589
1695
|
viewBox: "0 0 32 32",
|
|
1590
1696
|
xmlns: "http://www.w3.org/2000/svg"
|
|
@@ -1636,8 +1742,8 @@ var LoadingSidebar = function () {
|
|
|
1636
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" })] }))] })));
|
|
1637
1743
|
};
|
|
1638
1744
|
|
|
1639
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
1640
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_2$
|
|
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"])));
|
|
1641
1747
|
/**
|
|
1642
1748
|
* The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
|
|
1643
1749
|
* <br>
|
|
@@ -1656,9 +1762,9 @@ var Sidebar = function (props) {
|
|
|
1656
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 &&
|
|
1657
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" })] }))] })));
|
|
1658
1764
|
};
|
|
1659
|
-
var templateObject_1$
|
|
1765
|
+
var templateObject_1$j, templateObject_2$9;
|
|
1660
1766
|
|
|
1661
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
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) {
|
|
1662
1768
|
var theme = _a.theme;
|
|
1663
1769
|
return theme.breakpoints.sm;
|
|
1664
1770
|
}, function (_a) {
|
|
@@ -1669,13 +1775,13 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$h ||
|
|
|
1669
1775
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
1670
1776
|
*/
|
|
1671
1777
|
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1672
|
-
var templateObject_1$
|
|
1778
|
+
var templateObject_1$i;
|
|
1673
1779
|
|
|
1674
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
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]);
|
|
1675
1781
|
var PageLoader = function () {
|
|
1676
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: "" }) }))] })] })] })] }) })));
|
|
1677
1783
|
};
|
|
1678
|
-
var templateObject_1$
|
|
1784
|
+
var templateObject_1$h;
|
|
1679
1785
|
|
|
1680
1786
|
/**
|
|
1681
1787
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -1723,7 +1829,7 @@ var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment,
|
|
|
1723
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 })) })))] })));
|
|
1724
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"] })))] })); };
|
|
1725
1831
|
|
|
1726
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
1832
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1727
1833
|
var theme = _a.theme;
|
|
1728
1834
|
return theme.palette.grey["800"];
|
|
1729
1835
|
});
|
|
@@ -1732,7 +1838,35 @@ var FooterItem = reactModals.FooterItem;
|
|
|
1732
1838
|
Modal.Header = reactModals.Header;
|
|
1733
1839
|
Modal.Body = ugModalBody;
|
|
1734
1840
|
Modal.Footer = reactModals.Footer;
|
|
1735
|
-
var templateObject_1$
|
|
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;
|
|
1736
1870
|
|
|
1737
1871
|
/**
|
|
1738
1872
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -1765,36 +1899,36 @@ var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign
|
|
|
1765
1899
|
var CursorPagination = reactPagination.CursorPagination;
|
|
1766
1900
|
var templateObject_1$e;
|
|
1767
1901
|
|
|
1768
|
-
var _path$
|
|
1902
|
+
var _path$5;
|
|
1769
1903
|
|
|
1770
|
-
function _extends$
|
|
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); }
|
|
1771
1905
|
|
|
1772
1906
|
var SvgExit = function SvgExit(props) {
|
|
1773
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1907
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
1774
1908
|
width: 12,
|
|
1775
1909
|
height: 13,
|
|
1776
1910
|
viewBox: "0 0 12 13",
|
|
1777
1911
|
fill: "#68737D",
|
|
1778
1912
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1779
|
-
}, props), _path$
|
|
1913
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1780
1914
|
fillRule: "evenodd",
|
|
1781
1915
|
clipRule: "evenodd",
|
|
1782
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"
|
|
1783
1917
|
})));
|
|
1784
1918
|
};
|
|
1785
1919
|
|
|
1786
|
-
var _path$
|
|
1920
|
+
var _path$4;
|
|
1787
1921
|
|
|
1788
|
-
function _extends$
|
|
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); }
|
|
1789
1923
|
|
|
1790
1924
|
var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
1791
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1925
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
1792
1926
|
width: 16,
|
|
1793
1927
|
height: 16,
|
|
1794
1928
|
viewBox: "0 0 16 16",
|
|
1795
1929
|
fill: "none",
|
|
1796
1930
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1797
|
-
}, props), _path$
|
|
1931
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1798
1932
|
fillRule: "evenodd",
|
|
1799
1933
|
clipRule: "evenodd",
|
|
1800
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",
|
|
@@ -1806,25 +1940,17 @@ var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$d || (t
|
|
|
1806
1940
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
1807
1941
|
var templateObject_1$d;
|
|
1808
1942
|
|
|
1809
|
-
var flexCenter = styled.css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1810
|
-
var flexColumnCenter = styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1811
|
-
var flexStart = styled.css(templateObject_3$5 || (templateObject_3$5 = __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) {
|
|
1812
|
-
var theme = _a.theme;
|
|
1813
|
-
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1814
|
-
});
|
|
1815
|
-
var templateObject_1$c, templateObject_2$7, templateObject_3$5;
|
|
1816
|
-
|
|
1817
1943
|
/**
|
|
1818
1944
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
1819
1945
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
1820
1946
|
**/
|
|
1821
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
1947
|
+
var StyledItem = styled__default["default"].li(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"], ["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n }"); }, StyledMenuItemIcon, function (props) {
|
|
1822
1948
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
1823
1949
|
}, function (props) {
|
|
1824
1950
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
1825
1951
|
});
|
|
1826
|
-
var StyledBody$3 = styled__default["default"].li(templateObject_2$
|
|
1827
|
-
var IconContainer = styled__default["default"].div(templateObject_3$
|
|
1952
|
+
var StyledBody$3 = styled__default["default"].li(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
1953
|
+
var IconContainer = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
|
|
1828
1954
|
var theme = _a.theme;
|
|
1829
1955
|
return theme.space.sm;
|
|
1830
1956
|
});
|
|
@@ -1837,38 +1963,38 @@ var MenuItem = function (_a) {
|
|
|
1837
1963
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
1838
1964
|
return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
|
|
1839
1965
|
};
|
|
1840
|
-
var templateObject_1$
|
|
1966
|
+
var templateObject_1$c, templateObject_2$7, templateObject_3$5, templateObject_4$2;
|
|
1841
1967
|
|
|
1842
|
-
var _path$
|
|
1968
|
+
var _path$3;
|
|
1843
1969
|
|
|
1844
|
-
function _extends$
|
|
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); }
|
|
1845
1971
|
|
|
1846
1972
|
var SvgQuestionMark = function SvgQuestionMark(props) {
|
|
1847
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1973
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
1848
1974
|
width: 16,
|
|
1849
1975
|
height: 16,
|
|
1850
1976
|
viewBox: "0 0 16 16",
|
|
1851
1977
|
fill: "#68737D",
|
|
1852
1978
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1853
|
-
}, props), _path$
|
|
1979
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1854
1980
|
fillRule: "evenodd",
|
|
1855
1981
|
clipRule: "evenodd",
|
|
1856
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"
|
|
1857
1983
|
})));
|
|
1858
1984
|
};
|
|
1859
1985
|
|
|
1860
|
-
var _path$
|
|
1986
|
+
var _path$2;
|
|
1861
1987
|
|
|
1862
|
-
function _extends$
|
|
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); }
|
|
1863
1989
|
|
|
1864
1990
|
var SvgCopy = function SvgCopy(props) {
|
|
1865
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1991
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
1866
1992
|
width: 12,
|
|
1867
1993
|
height: 16,
|
|
1868
1994
|
viewBox: "0 0 12 16",
|
|
1869
1995
|
fill: "none",
|
|
1870
1996
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1871
|
-
}, props), _path$
|
|
1997
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1872
1998
|
fillRule: "evenodd",
|
|
1873
1999
|
clipRule: "evenodd",
|
|
1874
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",
|
|
@@ -1876,34 +2002,34 @@ var SvgCopy = function SvgCopy(props) {
|
|
|
1876
2002
|
})));
|
|
1877
2003
|
};
|
|
1878
2004
|
|
|
1879
|
-
var _path$
|
|
2005
|
+
var _path$1;
|
|
1880
2006
|
|
|
1881
|
-
function _extends$
|
|
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); }
|
|
1882
2008
|
|
|
1883
2009
|
var SvgInfoFill = function SvgInfoFill(props) {
|
|
1884
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
2010
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
1885
2011
|
width: 16,
|
|
1886
2012
|
height: 16,
|
|
1887
2013
|
viewBox: "0 0 16 16",
|
|
1888
2014
|
fill: "#68737D",
|
|
1889
2015
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1890
|
-
}, props), _path$
|
|
2016
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1891
2017
|
fillRule: "evenodd",
|
|
1892
2018
|
clipRule: "evenodd",
|
|
1893
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"
|
|
1894
2020
|
})));
|
|
1895
2021
|
};
|
|
1896
2022
|
|
|
1897
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
2023
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
1898
2024
|
var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$2, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
|
|
1899
|
-
var templateObject_1$
|
|
2025
|
+
var templateObject_1$b;
|
|
1900
2026
|
|
|
1901
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
2027
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject([""], [""])));
|
|
1902
2028
|
/**
|
|
1903
2029
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
1904
2030
|
*/
|
|
1905
2031
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
1906
|
-
var templateObject_1$
|
|
2032
|
+
var templateObject_1$a;
|
|
1907
2033
|
|
|
1908
2034
|
var getInitials = function (name) {
|
|
1909
2035
|
var names = name.split(" ");
|
|
@@ -1911,9 +2037,9 @@ var getInitials = function (name) {
|
|
|
1911
2037
|
return initials;
|
|
1912
2038
|
};
|
|
1913
2039
|
|
|
1914
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
1915
|
-
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$
|
|
1916
|
-
var StyledBody$2 = styled__default["default"].div(templateObject_3$
|
|
2040
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2041
|
+
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
|
|
2042
|
+
var StyledBody$2 = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
1917
2043
|
var theme = _a.theme;
|
|
1918
2044
|
return theme.space.base * 6;
|
|
1919
2045
|
}, function (_a) {
|
|
@@ -1940,25 +2066,7 @@ var HelpItem = function (props) {
|
|
|
1940
2066
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
|
|
1941
2067
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
|
|
1942
2068
|
};
|
|
1943
|
-
var templateObject_1$
|
|
1944
|
-
|
|
1945
|
-
var _path$1;
|
|
1946
|
-
|
|
1947
|
-
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); }
|
|
1948
|
-
|
|
1949
|
-
var SvgCheckLg = function SvgCheckLg(props) {
|
|
1950
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
1951
|
-
width: 16,
|
|
1952
|
-
height: 16,
|
|
1953
|
-
viewBox: "0 0 16 16",
|
|
1954
|
-
fill: "#68737D",
|
|
1955
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
1956
|
-
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1957
|
-
fillRule: "evenodd",
|
|
1958
|
-
clipRule: "evenodd",
|
|
1959
|
-
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"
|
|
1960
|
-
})));
|
|
1961
|
-
};
|
|
2069
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$4, templateObject_4$1, templateObject_5, templateObject_6;
|
|
1962
2070
|
|
|
1963
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); }
|
|
1964
2072
|
|
|
@@ -1990,30 +2098,30 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
1990
2098
|
})));
|
|
1991
2099
|
};
|
|
1992
2100
|
|
|
1993
|
-
var StyledBody$1 = styled__default["default"].div(templateObject_1$
|
|
2101
|
+
var StyledBody$1 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
1994
2102
|
var theme = _a.theme;
|
|
1995
2103
|
return theme.space.base * 6;
|
|
1996
2104
|
}, function (_a) {
|
|
1997
2105
|
var theme = _a.theme;
|
|
1998
2106
|
return theme.space.base * 4;
|
|
1999
2107
|
});
|
|
2000
|
-
var StyledButtonContainer = styled__default["default"].div(templateObject_2$
|
|
2001
|
-
var StyledButton = styled__default["default"](Button)(templateObject_3$
|
|
2108
|
+
var StyledButtonContainer = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n & button { \n justify-content: flex-start;\n }\n"], ["\n ", "\n & button { \n justify-content: flex-start;\n }\n"])), flexStart);
|
|
2109
|
+
var StyledButton = styled__default["default"](Button)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2002
2110
|
var LanguageItem = function (props) {
|
|
2003
2111
|
var _a;
|
|
2004
2112
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(StyledButton, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
|
|
2005
2113
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
|
|
2006
2114
|
};
|
|
2007
|
-
var templateObject_1$
|
|
2115
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$3;
|
|
2008
2116
|
|
|
2009
|
-
var ProfileContainer = styled__default["default"].div(templateObject_1$
|
|
2117
|
+
var ProfileContainer = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
2010
2118
|
var theme = _a.theme;
|
|
2011
2119
|
return theme.space.base * 2;
|
|
2012
2120
|
}, function (_a) {
|
|
2013
2121
|
var theme = _a.theme;
|
|
2014
2122
|
return theme.space.base * 6;
|
|
2015
2123
|
});
|
|
2016
|
-
var CompanyHolder = styled__default["default"](SM)(templateObject_2$
|
|
2124
|
+
var CompanyHolder = styled__default["default"](SM)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"], ["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"])), function (_a) {
|
|
2017
2125
|
var theme = _a.theme;
|
|
2018
2126
|
return theme.space.base * 2;
|
|
2019
2127
|
}, function (_a) {
|
|
@@ -2023,7 +2131,7 @@ var CompanyHolder = styled__default["default"](SM)(templateObject_2$3 || (templa
|
|
|
2023
2131
|
var theme = _a.theme;
|
|
2024
2132
|
return theme.palette.blue["600"];
|
|
2025
2133
|
});
|
|
2026
|
-
var UserDetails = styled__default["default"].div(templateObject_3$
|
|
2134
|
+
var UserDetails = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"])), function (_a) {
|
|
2027
2135
|
var theme = _a.theme;
|
|
2028
2136
|
return theme.space.base * 4;
|
|
2029
2137
|
}, function (_a) {
|
|
@@ -2034,9 +2142,9 @@ var UserContainer = function (props) {
|
|
|
2034
2142
|
var _a;
|
|
2035
2143
|
return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, __assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
|
|
2036
2144
|
};
|
|
2037
|
-
var templateObject_1$
|
|
2145
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$2;
|
|
2038
2146
|
|
|
2039
|
-
var StyledList = styled__default["default"].ul(templateObject_1$
|
|
2147
|
+
var StyledList = styled__default["default"].ul(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
|
|
2040
2148
|
var UserMenu = function (props) {
|
|
2041
2149
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
2042
2150
|
var toggleItem = function (item) {
|
|
@@ -2044,7 +2152,7 @@ var UserMenu = function (props) {
|
|
|
2044
2152
|
};
|
|
2045
2153
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && props.onFeedbackClick && jsxRuntime.jsx(Separator, {}), props.onFeedbackClick && (jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick ? props.onFeedbackClick() : console.log("feedback fired"); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) }))), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat, chatSupportLabel: props === null || props === void 0 ? void 0 : props.chatSupportLabel, copyLabel: props === null || props === void 0 ? void 0 : props.copyLabel }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
|
|
2046
2154
|
};
|
|
2047
|
-
var templateObject_1$
|
|
2155
|
+
var templateObject_1$6;
|
|
2048
2156
|
|
|
2049
2157
|
function debounce(callback, wait) {
|
|
2050
2158
|
var timer;
|
|
@@ -2073,7 +2181,7 @@ function useWindowSize() {
|
|
|
2073
2181
|
return size;
|
|
2074
2182
|
}
|
|
2075
2183
|
|
|
2076
|
-
var StyledModal = styled__default["default"](Modal)(templateObject_1$
|
|
2184
|
+
var StyledModal = styled__default["default"](Modal)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"], ["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"])), function (_a) {
|
|
2077
2185
|
var theme = _a.theme;
|
|
2078
2186
|
return theme.space.xxl;
|
|
2079
2187
|
}, function (_a) {
|
|
@@ -2086,7 +2194,7 @@ var StyledModal = styled__default["default"](Modal)(templateObject_1$4 || (templ
|
|
|
2086
2194
|
var theme = _a.theme;
|
|
2087
2195
|
return theme.space.base * 3;
|
|
2088
2196
|
});
|
|
2089
|
-
var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$
|
|
2197
|
+
var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n margin: ", ";\n padding: 0;\n"], ["\n margin: ", ";\n padding: 0;\n"])), function (_a) {
|
|
2090
2198
|
var theme = _a.theme;
|
|
2091
2199
|
return theme.space.xxs + " " + theme.space.xs;
|
|
2092
2200
|
});
|
|
@@ -2111,7 +2219,37 @@ var ProfileModal = function (_a) {
|
|
|
2111
2219
|
};
|
|
2112
2220
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
2113
2221
|
};
|
|
2114
|
-
var templateObject_1$
|
|
2222
|
+
var templateObject_1$5, templateObject_2$3;
|
|
2223
|
+
|
|
2224
|
+
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n svg {\n color: ", ";\n }\n"], ["\n svg {\n color: ", ";\n }\n"])), function (_a) {
|
|
2225
|
+
var theme = _a.theme;
|
|
2226
|
+
return theme.palette.green[700];
|
|
2227
|
+
});
|
|
2228
|
+
var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
2229
|
+
var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n ", "\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"], ["\n ", "\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"])), function (props) {
|
|
2230
|
+
console.log("Active index: ", props.activeIndex);
|
|
2231
|
+
return "";
|
|
2232
|
+
}, function (_a) {
|
|
2233
|
+
var theme = _a.theme;
|
|
2234
|
+
return theme.palette.grey[200];
|
|
2235
|
+
}, function (_a) {
|
|
2236
|
+
var theme = _a.theme;
|
|
2237
|
+
return theme.palette.grey[800];
|
|
2238
|
+
}, function (props) {
|
|
2239
|
+
return props.activeIndex !== undefined &&
|
|
2240
|
+
"\n ".concat(UgStep, ":nth-child(").concat(props.activeIndex + 1, ") {\n \n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ").concat(props.theme.palette.blue[600], ";\n color: white;\n }\n\n ").concat(UgLabel, " {\n font-weight: 500;\n color: ").concat(props.theme.palette.blue[600], ";\n }\n }\n ");
|
|
2241
|
+
});
|
|
2242
|
+
/**
|
|
2243
|
+
* A Stepper guides users through steps of a task in sequential order.
|
|
2244
|
+
|
|
2245
|
+
* Used for this:
|
|
2246
|
+
- For multi-step flows that must be completed in order
|
|
2247
|
+
*/
|
|
2248
|
+
var Stepper = function (props) { return jsxRuntime.jsx(UgStepper, __assign({}, props)); };
|
|
2249
|
+
Stepper.Step = UgStep;
|
|
2250
|
+
Stepper.Label = UgLabel;
|
|
2251
|
+
Stepper.Content = UgStepper.Content;
|
|
2252
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|
|
2115
2253
|
|
|
2116
2254
|
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
2117
2255
|
/**
|
|
@@ -2237,6 +2375,7 @@ exports.CardBody = CardBody$1;
|
|
|
2237
2375
|
exports.CardFooter = CardFooter$1;
|
|
2238
2376
|
exports.CardHeader = CardHeader;
|
|
2239
2377
|
exports.Checkbox = Checkbox;
|
|
2378
|
+
exports.CheckboxCard = CheckboxCard;
|
|
2240
2379
|
exports.Chrome = Chrome;
|
|
2241
2380
|
exports.Close = Close;
|
|
2242
2381
|
exports.Code = Code;
|
|
@@ -2279,6 +2418,7 @@ exports.MediaItem = MediaItem;
|
|
|
2279
2418
|
exports.Menu = Menu;
|
|
2280
2419
|
exports.Message = Message;
|
|
2281
2420
|
exports.Modal = Modal;
|
|
2421
|
+
exports.ModalFullScreen = ModalFullScreen;
|
|
2282
2422
|
exports.Multiselect = Multiselect;
|
|
2283
2423
|
exports.Nav = Nav;
|
|
2284
2424
|
exports.NavDivider = NavDivider;
|
|
@@ -2298,6 +2438,7 @@ exports.ProductCard = ProductCard;
|
|
|
2298
2438
|
exports.ProfileModal = ProfileModal;
|
|
2299
2439
|
exports.Progress = Progress;
|
|
2300
2440
|
exports.Radio = Radio;
|
|
2441
|
+
exports.RadioCard = RadioCard;
|
|
2301
2442
|
exports.Row = Row$1;
|
|
2302
2443
|
exports.SM = SM;
|
|
2303
2444
|
exports.Select = Select;
|
|
@@ -2307,6 +2448,7 @@ exports.Skeleton = Skeleton;
|
|
|
2307
2448
|
exports.Span = Span;
|
|
2308
2449
|
exports.Spinner = Spinner;
|
|
2309
2450
|
exports.SplitButton = SplitButton;
|
|
2451
|
+
exports.Stepper = Stepper;
|
|
2310
2452
|
exports.Table = Table;
|
|
2311
2453
|
exports.TableBody = Body;
|
|
2312
2454
|
exports.TableCell = Cell;
|