@appquality/unguess-design-system 2.8.26 → 2.8.28
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 +31 -0
- package/build/index.d.ts +4 -1
- package/build/index.js +327 -183
- package/build/stories/{campaignCards → campaign-cards}/_types.d.ts +1 -0
- package/build/stories/campaign-cards/index.d.ts +9 -0
- package/build/stories/{campaignCards → campaign-cards}/index.stories.d.ts +0 -0
- package/build/stories/campaign-cards/skeleton.d.ts +2 -0
- package/build/stories/drawer/_types.d.ts +30 -0
- package/build/stories/drawer/index.d.ts +11 -0
- package/build/stories/drawer/index.stories.d.ts +13 -0
- package/build/stories/drawer/loremIpsum.d.ts +2 -0
- package/build/stories/drawers/_types.d.ts +30 -0
- package/build/stories/drawers/index.d.ts +11 -0
- package/build/stories/drawers/index.stories.d.ts +13 -0
- package/build/stories/drawers/loremIpsum.d.ts +2 -0
- package/build/stories/navigation/app-header/_types.d.ts +1 -0
- package/build/stories/navigation/app-header/index.d.ts +1 -1
- package/build/stories/navigation/app-header/index.stories.d.ts +1 -1
- package/build/stories/navigation/app-header/skeleton.d.ts +2 -0
- package/build/stories/navigation/header/header-item/brandItem.d.ts +1 -0
- package/build/stories/navigation/sidebar/_types.d.ts +1 -0
- package/build/stories/navigation/sidebar/skeleton.d.ts +2 -0
- package/build/stories/page/index.d.ts +1 -0
- package/build/stories/page/pageLoader.d.ts +2 -0
- package/build/stories/product-cards/_types.d.ts +36 -0
- package/build/stories/product-cards/index.d.ts +4 -0
- package/build/stories/product-cards/index.stories.d.ts +7 -0
- package/build/stories/theme/components.d.ts +4 -0
- package/build/stories/theme/index.d.ts +15 -12
- package/package.json +1 -1
- package/build/stories/campaignCards/index.d.ts +0 -4
package/build/index.js
CHANGED
|
@@ -13,13 +13,13 @@ var reactNotifications = require('@zendeskgarden/react-notifications');
|
|
|
13
13
|
var reactTags = require('@zendeskgarden/react-tags');
|
|
14
14
|
var reactForms = require('@zendeskgarden/react-forms');
|
|
15
15
|
var React = require('react');
|
|
16
|
-
var reactDropdowns = require('@zendeskgarden/react-dropdowns');
|
|
17
|
-
var reactGrid = require('@zendeskgarden/react-grid');
|
|
18
16
|
var reactLoaders = require('@zendeskgarden/react-loaders');
|
|
19
|
-
var formik = require('formik');
|
|
20
|
-
var reactTypography = require('@zendeskgarden/react-typography');
|
|
21
17
|
var reactModals = require('@zendeskgarden/react-modals');
|
|
18
|
+
var reactDropdowns = require('@zendeskgarden/react-dropdowns');
|
|
19
|
+
var reactGrid = require('@zendeskgarden/react-grid');
|
|
22
20
|
var reactChrome = require('@zendeskgarden/react-chrome');
|
|
21
|
+
var reactTypography = require('@zendeskgarden/react-typography');
|
|
22
|
+
var formik = require('formik');
|
|
23
23
|
var reactPagination = require('@zendeskgarden/react-pagination');
|
|
24
24
|
var reactTables = require('@zendeskgarden/react-tables');
|
|
25
25
|
var reactSpring = require('react-spring');
|
|
@@ -230,10 +230,13 @@ var gradients = {
|
|
|
230
230
|
dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
|
|
231
231
|
};
|
|
232
232
|
|
|
233
|
-
var
|
|
233
|
+
var _a, _b, _c, _d, _e, _f;
|
|
234
|
+
var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }) }), notification: __assign(__assign({}, (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.notification), { card: __assign(__assign({}, (_f = (_e = reactTheming.DEFAULT_THEME.components) === null || _e === void 0 ? void 0 : _e.notification) === null || _f === void 0 ? void 0 : _f.well), { padding: "16px" }) }) });
|
|
234
235
|
|
|
235
|
-
var
|
|
236
|
-
|
|
236
|
+
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' }), 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 }) });
|
|
237
|
+
|
|
238
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\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 -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\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 -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);
|
|
239
|
+
var templateObject_1$Q;
|
|
237
240
|
|
|
238
241
|
/**
|
|
239
242
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -249,7 +252,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
|
|
|
249
252
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
250
253
|
|
|
251
254
|
// import useWindowSize from "../../hooks/useWindowSize";
|
|
252
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
255
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
253
256
|
return "\n background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n ");
|
|
254
257
|
});
|
|
255
258
|
/**
|
|
@@ -272,7 +275,7 @@ var Avatar = function (props) {
|
|
|
272
275
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
273
276
|
};
|
|
274
277
|
Avatar.Text = UgAvatar.Text;
|
|
275
|
-
var templateObject_1$
|
|
278
|
+
var templateObject_1$P;
|
|
276
279
|
|
|
277
280
|
/**
|
|
278
281
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -293,7 +296,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
|
|
|
293
296
|
*/
|
|
294
297
|
var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
|
|
295
298
|
|
|
296
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
299
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
297
300
|
/**
|
|
298
301
|
* Buttons let users take action quickly.
|
|
299
302
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -305,7 +308,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
|
305
308
|
var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
|
|
306
309
|
Button.StartIcon = UgButton.StartIcon;
|
|
307
310
|
Button.EndIcon = UgButton.EndIcon;
|
|
308
|
-
var templateObject_1$
|
|
311
|
+
var templateObject_1$O;
|
|
309
312
|
|
|
310
313
|
/**
|
|
311
314
|
A Button group lets users make a selection from a set of options.
|
|
@@ -358,13 +361,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
358
361
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
359
362
|
Tag.Close = reactTags.Tag.Close;
|
|
360
363
|
|
|
361
|
-
var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
364
|
+
var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
362
365
|
/**
|
|
363
366
|
* A Label is used to specify a title for an input.
|
|
364
367
|
* <hr>
|
|
365
368
|
**/
|
|
366
369
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
|
|
367
|
-
var templateObject_1$
|
|
370
|
+
var templateObject_1$N;
|
|
368
371
|
|
|
369
372
|
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;
|
|
370
373
|
|
|
@@ -571,6 +574,27 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
|
|
|
571
574
|
})));
|
|
572
575
|
};
|
|
573
576
|
|
|
577
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$M || (templateObject_1$M = __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; });
|
|
578
|
+
/**
|
|
579
|
+
* 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.
|
|
580
|
+
* <hr>
|
|
581
|
+
* Used for this:
|
|
582
|
+
- Skeleton is the default loader, used whenever the system can predict the format of the loading content
|
|
583
|
+
- To progressively load different parts of a page
|
|
584
|
+
- To avoid large layout shifts
|
|
585
|
+
|
|
586
|
+
* Not for this:
|
|
587
|
+
- When the system doesn’t have control over the content that is loading, use a Spinner instead
|
|
588
|
+
- To indicate that a component (like a button or search input) is busy, use Dots instead
|
|
589
|
+
- To communicate a typing status, use Inline instead
|
|
590
|
+
*/
|
|
591
|
+
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
592
|
+
var templateObject_1$M;
|
|
593
|
+
|
|
594
|
+
var CampaignCardSkeleton = function () {
|
|
595
|
+
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%" } })] })] }));
|
|
596
|
+
};
|
|
597
|
+
|
|
574
598
|
var getStatusIcon = function (status) {
|
|
575
599
|
switch (status) {
|
|
576
600
|
case "COMPLETED":
|
|
@@ -593,21 +617,66 @@ var getTypeData = function (type) {
|
|
|
593
617
|
};
|
|
594
618
|
}
|
|
595
619
|
};
|
|
596
|
-
var Wrapper = styled__default["default"](Card)(templateObject_1$
|
|
597
|
-
var
|
|
598
|
-
|
|
620
|
+
var Wrapper$1 = styled__default["default"](Card)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n 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) {
|
|
621
|
+
var theme = _a.theme;
|
|
622
|
+
return theme.borderRadii.lg;
|
|
623
|
+
}, function (_a) {
|
|
624
|
+
var theme = _a.theme;
|
|
625
|
+
return theme.components.notification.card.padding;
|
|
626
|
+
}, function (_a) {
|
|
627
|
+
var theme = _a.theme;
|
|
628
|
+
return theme.palette.grey["200"];
|
|
629
|
+
}, function (_a) {
|
|
630
|
+
var theme = _a.theme;
|
|
631
|
+
return theme.shadows.boxShadow(theme);
|
|
632
|
+
});
|
|
633
|
+
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) {
|
|
634
|
+
var theme = _a.theme;
|
|
635
|
+
return theme.palette.grey["700"];
|
|
636
|
+
});
|
|
637
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$8 || (templateObject_3$8 = __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) {
|
|
599
638
|
var theme = _a.theme;
|
|
600
639
|
return theme.space.base * 6;
|
|
601
|
-
},
|
|
640
|
+
}, function (_a) {
|
|
641
|
+
var theme = _a.theme;
|
|
642
|
+
return theme.space.base;
|
|
643
|
+
}, function (_a) {
|
|
602
644
|
var theme = _a.theme;
|
|
603
645
|
return theme.space.base * 2;
|
|
604
|
-
},
|
|
605
|
-
var
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
var
|
|
609
|
-
var
|
|
610
|
-
|
|
646
|
+
}, function (_a) {
|
|
647
|
+
var theme = _a.theme;
|
|
648
|
+
return theme.palette.white;
|
|
649
|
+
});
|
|
650
|
+
var StyledLabel$1 = styled__default["default"](Label)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
651
|
+
var theme = _a.theme;
|
|
652
|
+
return theme.fontSizes.sm;
|
|
653
|
+
}, function (_a) {
|
|
654
|
+
var theme = _a.theme;
|
|
655
|
+
return theme.palette.grey["500"];
|
|
656
|
+
});
|
|
657
|
+
var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
|
|
658
|
+
var theme = _a.theme;
|
|
659
|
+
return theme.palette.blue["600"];
|
|
660
|
+
}, function (_a) {
|
|
661
|
+
var theme = _a.theme;
|
|
662
|
+
return theme.fontSizes.lg;
|
|
663
|
+
});
|
|
664
|
+
var Divider$1 = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __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) {
|
|
665
|
+
var theme = _a.theme;
|
|
666
|
+
return theme.space.lg;
|
|
667
|
+
}, function (_a) {
|
|
668
|
+
var theme = _a.theme;
|
|
669
|
+
return theme.palette.grey["300"];
|
|
670
|
+
});
|
|
671
|
+
var CardHeader = styled__default["default"].div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n height: ", "px;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n height: ", "px;\n"])), function (_a) {
|
|
672
|
+
var theme = _a.theme;
|
|
673
|
+
return theme.space.base * 6;
|
|
674
|
+
});
|
|
675
|
+
var CardBody$1 = styled__default["default"].div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n flex: 1;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n flex: 1;\n"])), function (_a) {
|
|
676
|
+
var theme = _a.theme;
|
|
677
|
+
return theme.space.xxl;
|
|
678
|
+
});
|
|
679
|
+
var CardFooter$1 = styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
611
680
|
var CampaignCard = function (props) {
|
|
612
681
|
var isNew = props.isNew, date = props.date, projectTitle = props.projectTitle, campaignTitle = props.campaignTitle, status = props.status, type = props.type, labelNew = props.labelNew;
|
|
613
682
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
@@ -621,10 +690,79 @@ var CampaignCard = function (props) {
|
|
|
621
690
|
if (campaignTitle.length > 29) {
|
|
622
691
|
campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
|
|
623
692
|
}
|
|
624
|
-
return jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
|
|
625
|
-
|
|
693
|
+
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$1, __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$1, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [typeData && (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, {})] })] })));
|
|
694
|
+
};
|
|
695
|
+
var templateObject_1$L, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
|
|
696
|
+
|
|
697
|
+
var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateObject_1$K = __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) {
|
|
698
|
+
var theme = _a.theme;
|
|
699
|
+
return theme.borderRadii.lg;
|
|
700
|
+
}, function (_a) {
|
|
701
|
+
var theme = _a.theme;
|
|
702
|
+
return theme.components.notification.card.padding;
|
|
703
|
+
}, function (_a) {
|
|
704
|
+
var theme = _a.theme;
|
|
705
|
+
return theme.palette.grey["200"];
|
|
706
|
+
}, function (_a) {
|
|
707
|
+
var theme = _a.theme;
|
|
708
|
+
return theme.shadows.boxShadow(theme);
|
|
709
|
+
});
|
|
710
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_2$c || (templateObject_2$c = __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) {
|
|
711
|
+
var theme = _a.theme;
|
|
712
|
+
return theme.space.base * 6;
|
|
713
|
+
}, function (_a) {
|
|
714
|
+
var theme = _a.theme;
|
|
715
|
+
return theme.space.base;
|
|
716
|
+
}, function (_a) {
|
|
717
|
+
var theme = _a.theme;
|
|
718
|
+
return theme.space.base * 2;
|
|
719
|
+
}, function (_a) {
|
|
720
|
+
var theme = _a.theme;
|
|
721
|
+
return theme.palette.white;
|
|
722
|
+
});
|
|
723
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
724
|
+
var theme = _a.theme;
|
|
725
|
+
return theme.fontSizes.sm;
|
|
726
|
+
}, function (_a) {
|
|
727
|
+
var theme = _a.theme;
|
|
728
|
+
return theme.palette.grey["500"];
|
|
729
|
+
});
|
|
730
|
+
var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __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) {
|
|
731
|
+
var theme = _a.theme;
|
|
732
|
+
return theme.palette.blue["600"];
|
|
733
|
+
}, function (_a) {
|
|
734
|
+
var theme = _a.theme;
|
|
735
|
+
return theme.fontSizes.lg;
|
|
736
|
+
});
|
|
737
|
+
var Divider = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), function (_a) {
|
|
738
|
+
var theme = _a.theme;
|
|
739
|
+
return theme.space.sm;
|
|
740
|
+
}, function (_a) {
|
|
741
|
+
var theme = _a.theme;
|
|
742
|
+
return theme.palette.grey["300"];
|
|
743
|
+
});
|
|
744
|
+
var IconContainer$1 = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n padding: ", ";\n margin: auto;\n svg {\n max-width: 42px;\n width: 100%;\n height: auto;\n }\n"], ["\n padding: ", ";\n margin: auto;\n svg {\n max-width: 42px;\n width: 100%;\n height: auto;\n }\n"])), function (_a) {
|
|
745
|
+
var theme = _a.theme;
|
|
746
|
+
return theme.components.notification.card.padding;
|
|
747
|
+
});
|
|
748
|
+
var CardBody = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n"])));
|
|
749
|
+
var CardFooter = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
750
|
+
var ProductCard = function (props) {
|
|
751
|
+
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
752
|
+
var productTitleCut = productTitle;
|
|
753
|
+
if (productTitle.length > 42) {
|
|
754
|
+
productTitleCut = "".concat(productTitle.substring(0, 39), "...");
|
|
755
|
+
}
|
|
756
|
+
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 })) })] })));
|
|
626
757
|
};
|
|
627
|
-
var templateObject_1$K, templateObject_2$c, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8
|
|
758
|
+
var templateObject_1$K, templateObject_2$c, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
|
|
759
|
+
|
|
760
|
+
var Drawer = function (props) { return jsxRuntime.jsx(reactModals.DrawerModal, __assign({}, props)); };
|
|
761
|
+
Drawer.Header = reactModals.DrawerModal.Header;
|
|
762
|
+
Drawer.Body = reactModals.DrawerModal.Body;
|
|
763
|
+
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
764
|
+
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
765
|
+
Drawer.Close = reactModals.DrawerModal.Close;
|
|
628
766
|
|
|
629
767
|
/**
|
|
630
768
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -1104,24 +1242,7 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1104
1242
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1105
1243
|
var templateObject_1$w;
|
|
1106
1244
|
|
|
1107
|
-
var
|
|
1108
|
-
/**
|
|
1109
|
-
* 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.
|
|
1110
|
-
* <hr>
|
|
1111
|
-
* Used for this:
|
|
1112
|
-
- Skeleton is the default loader, used whenever the system can predict the format of the loading content
|
|
1113
|
-
- To progressively load different parts of a page
|
|
1114
|
-
- To avoid large layout shifts
|
|
1115
|
-
|
|
1116
|
-
* Not for this:
|
|
1117
|
-
- When the system doesn’t have control over the content that is loading, use a Spinner instead
|
|
1118
|
-
- To indicate that a component (like a button or search input) is busy, use Dots instead
|
|
1119
|
-
- To communicate a typing status, use Inline instead
|
|
1120
|
-
*/
|
|
1121
|
-
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
1122
|
-
var templateObject_1$v;
|
|
1123
|
-
|
|
1124
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
|
|
1245
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
|
|
1125
1246
|
/**
|
|
1126
1247
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1127
1248
|
* <hr>
|
|
@@ -1130,28 +1251,28 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1130
1251
|
- To provide a quick way to navigate to ancestor pages
|
|
1131
1252
|
*/
|
|
1132
1253
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1133
|
-
var templateObject_1$
|
|
1254
|
+
var templateObject_1$v;
|
|
1134
1255
|
|
|
1256
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1257
|
+
var theme = _a.theme;
|
|
1258
|
+
return theme.palette.white;
|
|
1259
|
+
});
|
|
1135
1260
|
/**
|
|
1136
|
-
*
|
|
1261
|
+
* A Body defines the main content of an HTML document which displays on the browser
|
|
1137
1262
|
*/
|
|
1138
|
-
var
|
|
1263
|
+
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1264
|
+
var templateObject_1$u;
|
|
1139
1265
|
|
|
1140
1266
|
/**
|
|
1141
|
-
*
|
|
1267
|
+
* A Content defines the main content of an HTML document which displays on the browser
|
|
1142
1268
|
*/
|
|
1143
|
-
var
|
|
1144
|
-
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({}, props)); };
|
|
1145
|
-
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({}, props)); };
|
|
1146
|
-
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
1147
|
-
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
1148
|
-
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
1269
|
+
var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
|
|
1149
1270
|
|
|
1150
1271
|
var _path$c;
|
|
1151
1272
|
|
|
1152
1273
|
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); }
|
|
1153
1274
|
|
|
1154
|
-
var
|
|
1275
|
+
var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
1155
1276
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
|
|
1156
1277
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1157
1278
|
width: 16,
|
|
@@ -1160,40 +1281,25 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
1160
1281
|
viewBox: "0 0 16 16"
|
|
1161
1282
|
}, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1162
1283
|
fill: "currentColor",
|
|
1163
|
-
d: "
|
|
1284
|
+
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"
|
|
1164
1285
|
})));
|
|
1165
1286
|
};
|
|
1166
1287
|
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
? { validation: "error" }
|
|
1183
|
-
: touched.email
|
|
1184
|
-
? { validation: "success" }
|
|
1185
|
-
: ""))), errors.email ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ("")] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, (touched && values.password
|
|
1186
|
-
? (touched.password = true)
|
|
1187
|
-
: (touched.password = false)), (errors && errors.password
|
|
1188
|
-
? { validation: "error" }
|
|
1189
|
-
: touched.password
|
|
1190
|
-
? { validation: "success" }
|
|
1191
|
-
: ""))), errors.password && (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))), props.passwordForgotLink && (jsxRuntime.jsx(reactForms.Hint, __assign({ style: { textAlign: "right" } }, { children: jsxRuntime.jsx(Anchor, __assign({ href: props.passwordForgotLink, style: { color: theme.palette.grey[500] } }, { children: props.passwordForgotLabel || "Forgot Password?" })) })))] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length
|
|
1192
|
-
? true
|
|
1193
|
-
: isSubmitting
|
|
1194
|
-
? true
|
|
1195
|
-
: 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 })) })))] })));
|
|
1196
|
-
} }))] })), 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"] })))] })); };
|
|
1288
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1289
|
+
var theme = _a.theme;
|
|
1290
|
+
return theme.fonts.system;
|
|
1291
|
+
});
|
|
1292
|
+
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1293
|
+
var templateObject_1$t;
|
|
1294
|
+
|
|
1295
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1296
|
+
var theme = _a.theme;
|
|
1297
|
+
return theme.fonts.system;
|
|
1298
|
+
});
|
|
1299
|
+
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1300
|
+
var templateObject_1$s;
|
|
1301
|
+
|
|
1302
|
+
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1197
1303
|
|
|
1198
1304
|
var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5b %3c!ENTITY ns_extend 'http://ns.adobe.com/Extensibility/1.0/'%3e %3c!ENTITY ns_ai 'http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c!ENTITY ns_graphs 'http://ns.adobe.com/Graphs/1.0/'%3e %3c!ENTITY ns_vars 'http://ns.adobe.com/Variables/1.0/'%3e %3c!ENTITY ns_imrep 'http://ns.adobe.com/ImageReplacement/1.0/'%3e %3c!ENTITY ns_sfw 'http://ns.adobe.com/SaveForWeb/1.0/'%3e %3c!ENTITY ns_custom 'http://ns.adobe.com/GenericCustomNamespace/1.0/'%3e %3c!ENTITY ns_adobe_xpath 'http://ns.adobe.com/XPath/1.0/'%3e%5d%3e%3csvg enable-background='new 0 0 479.42 154.1' version='1.1' viewBox='0 0 479.42 154.1' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23003A57%3b%7d .st1%7bfill:%2354C38A%3b%7d .st2%7bfill:%23B2C4CD%3b%7d .st3%7bfill:%23809CAB%3b%7d .st4%7bfill:%23CCEDDC%3b%7d .st5%7bfill:%23CCD8DD%3b%7d .st6%7bfill:%23E5EBEE%3b%7d .st7%7bfill:%23A9E1C5%3b%7d%3c/style%3e%3cswitch%3e %3cforeignObject width='1' height='1' requiredExtensions='http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c/foreignObject%3e %3cg%3e %3cpath class='st0' d='m203.46 43.96c1.66 0 3.06 0.82 3.06 2.56 0 0.83-0.48 1.54-1.36 1.88 1.11 0.31 1.64 1.33 1.64 2.18 0 1.94-1.63 2.52-3.35 2.52h-3.99v-9.13h4zm-2.85 3.93h2.91c1.1 0 1.89-0.4 1.89-1.36 0-1.02-0.82-1.54-1.94-1.54h-2.86v2.9zm0 4.13h2.86c0.95 0 2.22-0.25 2.22-1.49-0.01-1.15-1.17-1.62-2.16-1.62h-2.91v3.11z'/%3e %3cpath class='st0' d='M212.75%2c43.96h6.41V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m235.85 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.16-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.45 1.66l-0.86 0.53c-0.48-0.79-1.54-1.15-2.55-1.17z'/%3e %3cpath class='st0' d='m250.07 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m265.37 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.22l4.09-9.13h1.28zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m278.31 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m287.15 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m313.34 43.96v1.08h-5.2v3.18h4.98v1.06h-4.98v3.82h-1.14v-9.14h6.34z'/%3e %3cpath class='st0' d='m322.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.76-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m341.26 48.55c-0.01 2.39-1.5 4.72-4.63 4.72s-4.64-2.32-4.64-4.72c0-2.65 1.77-4.75 4.65-4.75 3.1 0.02 4.64 2.34 4.62 4.75zm-4.61-3.7c-2.32 0-3.52 1.71-3.52 3.7 0 1.85 1.12 3.65 3.52 3.65s3.48-1.85 3.48-3.65c0.01-1.85-1.1-3.68-3.48-3.7z'/%3e %3cpath class='st0' d='m351.84 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m368.77 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m387.97 48.97h-5.22v4.12h-1.13v-9.13h1.13v3.95h5.22v-3.95h1.13v9.13h-1.13v-4.12z'/%3e %3cpath class='st0' d='M395.58%2c43.96H402V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m418.68 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.15-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.46 1.66l-0.86 0.53c-0.49-0.79-1.54-1.15-2.56-1.17z'/%3e %3cpath class='st0' d='m427.25 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m443.63 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.24l4.09-9.13h1.3zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m456.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m465.41 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m157.64 115.24v-24.59c0-6.81-3.65-10.72-10.03-10.72-6 0-9.44 3.91-9.44 10.72v24.59h-8.58v-24.59c0-11.51 6.93-18.66 18.08-18.66 11.26 0 18.54 7.32 18.54 18.66v24.59h-8.57z'/%3e %3cpath class='st0' d='m214.63 116.35c-16.55 0-22.44-11.2-22.44-21.67 0-15.87 11.27-22.98 22.44-22.98 5.93 0 11.53 2.3 15.77 6.49l0.34 0.34-5.54 5.67-0.35-0.33c-2.55-2.44-6.57-4.02-10.23-4.02-8.14 0-13.82 6.1-13.82 14.83 0 6.48 3.63 13.4 13.82 13.4 3.51 0 6.11-0.89 8.89-3.07v-6.64h-10.61v-7.97h19.29v17.55l-0.63 0.76c-4.49 5.14-10.03 7.64-16.93 7.64z'/%3e %3cpath class='st0' d='m277.01 115.24c-11.26 0-18.54-7.32-18.54-18.66v-24.59h8.58v24.59c0 6.81 3.65 10.72 10.02 10.72 6 0 9.44-3.91 9.44-10.72v-24.59h8.58v24.59c0 11.51-6.92 18.66-18.08 18.66z'/%3e %3cpolygon class='st0' points='321.07 115.24 321.07 72.25 354.94 72.25 354.94 80.65 329.64 80.65 329.64 90.13 350.81 90.13 350.81 98.24 329.64 98.24 329.64 106.72 354.94 106.72 354.94 115.24'/%3e %3cpath class='st0' d='m397.19 116.06c-9.41 0-15.35-3.37-18.16-10.29l-0.17-0.41 7.25-3.76 0.2 0.5c1.55 3.85 5.66 6.14 10.99 6.14 2.08 0 8.86-0.4 8.86-5.61 0-3.05-2.94-4.85-8.97-5.5-14.45-1.72-16.4-7.43-16.4-12.79 0-8.43 8.14-12.27 16.22-12.33 8.06 0 13.73 2.88 16.41 8.34l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.91-4.29-9.22-4.29-4.89 0-7.93 1.88-7.93 4.92 0 2.99 3.45 4.01 8.63 4.63 8.73 1.08 16.8 3.45 16.8 13.43-0.02 9.89-9.09 13.42-17.57 13.42z'/%3e %3cpath class='st0' d='m457.03 116.25c-9.4 0-15.33-3.36-18.14-10.28l-0.17-0.41 7.25-3.75 0.2 0.5c1.55 3.84 5.65 6.13 10.98 6.13 2.08 0 8.85-0.4 8.85-5.61 0-3.05-2.93-4.85-8.96-5.49-14.44-1.72-16.38-7.42-16.38-12.78 0-8.42 8.14-12.25 16.2-12.32 8.05 0 13.71 2.88 16.39 8.33l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.9-4.29-9.21-4.29-4.89 0-7.93 1.88-7.93 4.91 0 2.99 3.45 4.01 8.62 4.62 8.72 1.07 16.79 3.44 16.79 13.42-0.01 9.9-9.07 13.42-17.55 13.42z'/%3e %3cpath class='st0' d='m94.63 93.63v4.23h-0.03c-0.36 6.13-3.75 9.62-9.43 9.62-6.03 0-9.62-3.49-10.01-9.62h-0.03v-4.23h-8.58v4.23 0.01 0.05c0.49 10.69 7.66 17.52 18.55 17.52 10.79 0 17.63-6.68 18.09-17.52v-4.29h-8.56z'/%3e %3crect class='st1' x='66.55' y='72.02' width='8.6' height='8.6'/%3e %3crect class='st0' x='94.41' y='72.02' width='8.72' height='8.72'/%3e %3crect class='st2' transform='matrix(-1.837e-16 1 -1 -1.837e-16 103.01 7.8599)' x='43.27' y='51.13' width='8.6' height='8.6'/%3e %3crect class='st3' transform='matrix(-1.837e-16 1 -1 -1.837e-16 126.9 6.4839)' x='55.9' y='62.39' width='8.6' height='8.6'/%3e %3crect class='st4' transform='matrix(-1.837e-16 1 -1 -1.837e-16 94.995 31.397)' x='27.5' y='58.89' width='8.6' height='8.6'/%3e %3crect class='st5' transform='matrix(-1.837e-16 1 -1 -1.837e-16 64.365 27.091)' x='14.34' y='41.43' width='8.6' height='8.6'/%3e %3crect class='st6' transform='matrix(-1.837e-16 1 -1 -1.837e-16 138.08 66.268)' x='31.6' y='97.87' width='8.6' height='8.6'/%3e %3crect class='st7' transform='matrix(-1.837e-16 1 -1 -1.837e-16 137.84 35.856)' x='46.69' y='82.55' width='8.6' height='8.6'/%3e %3c/g%3e%3c/switch%3e%3c/svg%3e";
|
|
1199
1305
|
|
|
@@ -1221,48 +1327,6 @@ var Logo = function (props) {
|
|
|
1221
1327
|
}[props.type] })));
|
|
1222
1328
|
};
|
|
1223
1329
|
|
|
1224
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1225
|
-
var theme = _a.theme;
|
|
1226
|
-
return theme.palette.grey["800"];
|
|
1227
|
-
});
|
|
1228
|
-
var Modal = function (props) { return jsxRuntime.jsx(reactModals.Modal, __assign({}, props)); };
|
|
1229
|
-
var FooterItem = reactModals.FooterItem;
|
|
1230
|
-
Modal.Header = reactModals.Header;
|
|
1231
|
-
Modal.Body = ugModalBody;
|
|
1232
|
-
Modal.Footer = reactModals.Footer;
|
|
1233
|
-
var templateObject_1$t;
|
|
1234
|
-
|
|
1235
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1236
|
-
var theme = _a.theme;
|
|
1237
|
-
return theme.palette.white;
|
|
1238
|
-
});
|
|
1239
|
-
/**
|
|
1240
|
-
* A Body defines the main content of an HTML document which displays on the browser
|
|
1241
|
-
*/
|
|
1242
|
-
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1243
|
-
var templateObject_1$s;
|
|
1244
|
-
|
|
1245
|
-
/**
|
|
1246
|
-
* A Content defines the main content of an HTML document which displays on the browser
|
|
1247
|
-
*/
|
|
1248
|
-
var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
|
|
1249
|
-
|
|
1250
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1251
|
-
var theme = _a.theme;
|
|
1252
|
-
return theme.fonts.system;
|
|
1253
|
-
});
|
|
1254
|
-
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1255
|
-
var templateObject_1$r;
|
|
1256
|
-
|
|
1257
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1258
|
-
var theme = _a.theme;
|
|
1259
|
-
return theme.fonts.system;
|
|
1260
|
-
});
|
|
1261
|
-
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1262
|
-
var templateObject_1$q;
|
|
1263
|
-
|
|
1264
|
-
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1265
|
-
|
|
1266
1330
|
var _path$b;
|
|
1267
1331
|
|
|
1268
1332
|
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); }
|
|
@@ -1282,7 +1346,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1282
1346
|
})));
|
|
1283
1347
|
};
|
|
1284
1348
|
|
|
1285
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1349
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"], ["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"])), function (_a) {
|
|
1286
1350
|
var theme = _a.theme;
|
|
1287
1351
|
return theme.breakpoints.sm;
|
|
1288
1352
|
});
|
|
@@ -1306,9 +1370,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1306
1370
|
var BrandItem = function (props) {
|
|
1307
1371
|
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 }) })))] }));
|
|
1308
1372
|
};
|
|
1309
|
-
var templateObject_1$
|
|
1373
|
+
var templateObject_1$r, templateObject_2$b, templateObject_3$6;
|
|
1310
1374
|
|
|
1311
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1375
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1312
1376
|
/**
|
|
1313
1377
|
* An Header is a visual way to display general information.
|
|
1314
1378
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1317,26 +1381,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1317
1381
|
Header.HeaderItem = HeaderItem;
|
|
1318
1382
|
Header.HeaderItemText = HeaderItemText;
|
|
1319
1383
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1320
|
-
var templateObject_1$
|
|
1321
|
-
|
|
1322
|
-
var _path$a;
|
|
1323
|
-
|
|
1324
|
-
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); }
|
|
1384
|
+
var templateObject_1$q;
|
|
1325
1385
|
|
|
1326
|
-
var
|
|
1327
|
-
|
|
1328
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1329
|
-
width: 16,
|
|
1330
|
-
height: 16,
|
|
1331
|
-
focusable: "false",
|
|
1332
|
-
viewBox: "0 0 16 16"
|
|
1333
|
-
}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1334
|
-
fill: "currentColor",
|
|
1335
|
-
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"
|
|
1336
|
-
})));
|
|
1386
|
+
var HeaderSkeleton = function () {
|
|
1387
|
+
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%" } }) }) }) }))] })));
|
|
1337
1388
|
};
|
|
1338
1389
|
|
|
1339
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1390
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1340
1391
|
var theme = _a.theme;
|
|
1341
1392
|
return theme.breakpoints.sm;
|
|
1342
1393
|
});
|
|
@@ -1345,25 +1396,12 @@ var ChevronButton = styled__default["default"](IconButton)(templateObject_1$n ||
|
|
|
1345
1396
|
* This can include navList Items, modal, profile settings.
|
|
1346
1397
|
*/
|
|
1347
1398
|
var AppHeader = function (_a) {
|
|
1348
|
-
var brand = _a.brand, avatar = _a.avatar, args = __rest(_a, ["brand", "avatar"]);
|
|
1349
|
-
return (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.
|
|
1399
|
+
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1400
|
+
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, {}) }))] }) }) }))] })));
|
|
1350
1401
|
};
|
|
1351
|
-
var templateObject_1$
|
|
1352
|
-
|
|
1353
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$m || (templateObject_1$m = __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) {
|
|
1354
|
-
var theme = _a.theme;
|
|
1355
|
-
return theme.breakpoints.sm;
|
|
1356
|
-
}, function (_a) {
|
|
1357
|
-
var theme = _a.theme;
|
|
1358
|
-
return theme.space.xxl;
|
|
1359
|
-
});
|
|
1360
|
-
/**
|
|
1361
|
-
* A Main defines the main content of an HTML document which displays on the browser
|
|
1362
|
-
*/
|
|
1363
|
-
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1364
|
-
var templateObject_1$m;
|
|
1402
|
+
var templateObject_1$p;
|
|
1365
1403
|
|
|
1366
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1404
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n padding-left: ", ";\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n padding-left: ", ";\n"])), function (_a) {
|
|
1367
1405
|
var theme = _a.theme;
|
|
1368
1406
|
return theme.borders.sm;
|
|
1369
1407
|
}, function (_a) {
|
|
@@ -1385,9 +1423,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$l || (t
|
|
|
1385
1423
|
- To give a consistent dashboard and navigation experience
|
|
1386
1424
|
*/
|
|
1387
1425
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1388
|
-
var templateObject_1$
|
|
1426
|
+
var templateObject_1$o;
|
|
1389
1427
|
|
|
1390
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1428
|
+
var SelectedItemStyle = styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1391
1429
|
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
|
|
1392
1430
|
var theme = _a.theme;
|
|
1393
1431
|
return theme.fonts.system;
|
|
@@ -1399,11 +1437,11 @@ var NavItem = function (props) {
|
|
|
1399
1437
|
// const { isExpanded } = props;
|
|
1400
1438
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1401
1439
|
};
|
|
1402
|
-
var templateObject_1$
|
|
1440
|
+
var templateObject_1$n, templateObject_2$a;
|
|
1403
1441
|
|
|
1404
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1442
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject([""], [""])));
|
|
1405
1443
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1406
|
-
var templateObject_1$
|
|
1444
|
+
var templateObject_1$m;
|
|
1407
1445
|
|
|
1408
1446
|
/**
|
|
1409
1447
|
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
@@ -1412,11 +1450,28 @@ var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis
|
|
|
1412
1450
|
|
|
1413
1451
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1414
1452
|
|
|
1453
|
+
var _path$a;
|
|
1454
|
+
|
|
1455
|
+
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); }
|
|
1456
|
+
|
|
1457
|
+
var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
|
|
1458
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
|
|
1459
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1460
|
+
width: 16,
|
|
1461
|
+
height: 16,
|
|
1462
|
+
focusable: "false",
|
|
1463
|
+
viewBox: "0 0 16 16"
|
|
1464
|
+
}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1465
|
+
fill: "currentColor",
|
|
1466
|
+
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"
|
|
1467
|
+
})));
|
|
1468
|
+
};
|
|
1469
|
+
|
|
1415
1470
|
var _path$9;
|
|
1416
1471
|
|
|
1417
1472
|
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); }
|
|
1418
1473
|
|
|
1419
|
-
var
|
|
1474
|
+
var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
1420
1475
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
|
|
1421
1476
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1422
1477
|
width: 16,
|
|
@@ -1425,11 +1480,11 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
|
|
|
1425
1480
|
viewBox: "0 0 16 16"
|
|
1426
1481
|
}, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1427
1482
|
fill: "currentColor",
|
|
1428
|
-
d: "
|
|
1483
|
+
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"
|
|
1429
1484
|
})));
|
|
1430
1485
|
};
|
|
1431
1486
|
|
|
1432
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
1487
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1433
1488
|
var theme = _a.theme;
|
|
1434
1489
|
return theme.space.base * 6;
|
|
1435
1490
|
}, function (_a) {
|
|
@@ -1454,18 +1509,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$i ||
|
|
|
1454
1509
|
var NavToggle = function (props) {
|
|
1455
1510
|
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%" } })) })));
|
|
1456
1511
|
};
|
|
1457
|
-
var templateObject_1$
|
|
1512
|
+
var templateObject_1$l;
|
|
1458
1513
|
|
|
1459
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
1514
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"], ["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"])), function (props) { return props.theme.space.lg; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
|
|
1460
1515
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1461
|
-
var templateObject_1$
|
|
1516
|
+
var templateObject_1$k;
|
|
1462
1517
|
|
|
1463
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1518
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
|
|
1464
1519
|
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
1465
1520
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1466
1521
|
NavItemProject.Title = NavItemText;
|
|
1467
1522
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1468
|
-
var templateObject_1$
|
|
1523
|
+
var templateObject_1$j, templateObject_2$9;
|
|
1469
1524
|
|
|
1470
1525
|
var _path$8;
|
|
1471
1526
|
|
|
@@ -1563,7 +1618,12 @@ var SvgToken = function SvgToken(props) {
|
|
|
1563
1618
|
*/
|
|
1564
1619
|
var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
|
|
1565
1620
|
|
|
1566
|
-
var
|
|
1621
|
+
var LoadingSidebar = function () {
|
|
1622
|
+
var isExpanded = true;
|
|
1623
|
+
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" })] }))] })));
|
|
1624
|
+
};
|
|
1625
|
+
|
|
1626
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
1567
1627
|
var ScrollingContainer = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
|
|
1568
1628
|
/**
|
|
1569
1629
|
* The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
|
|
@@ -1580,10 +1640,86 @@ var Sidebar = function (props) {
|
|
|
1580
1640
|
props.onNavToggle && props.onNavToggle(route);
|
|
1581
1641
|
setNav(route);
|
|
1582
1642
|
};
|
|
1583
|
-
return (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 &&
|
|
1643
|
+
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 &&
|
|
1584
1644
|
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" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
1585
1645
|
};
|
|
1586
|
-
var templateObject_1$
|
|
1646
|
+
var templateObject_1$i, templateObject_2$8;
|
|
1647
|
+
|
|
1648
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"], ["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"])), function (_a) {
|
|
1649
|
+
var theme = _a.theme;
|
|
1650
|
+
return theme.breakpoints.sm;
|
|
1651
|
+
}, function (_a) {
|
|
1652
|
+
var theme = _a.theme;
|
|
1653
|
+
return theme.space.xxl;
|
|
1654
|
+
});
|
|
1655
|
+
/**
|
|
1656
|
+
* A Main defines the main content of an HTML document which displays on the browser
|
|
1657
|
+
*/
|
|
1658
|
+
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1659
|
+
var templateObject_1$h;
|
|
1660
|
+
|
|
1661
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"], ["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
|
|
1662
|
+
var PageLoader = function () {
|
|
1663
|
+
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: "" }) }))] })] })] })] }) })));
|
|
1664
|
+
};
|
|
1665
|
+
var templateObject_1$g;
|
|
1666
|
+
|
|
1667
|
+
/**
|
|
1668
|
+
* Title is a basic component used to display a title. Often used in card headers.
|
|
1669
|
+
*/
|
|
1670
|
+
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1671
|
+
|
|
1672
|
+
/**
|
|
1673
|
+
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
1674
|
+
*/
|
|
1675
|
+
var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({}, props)); };
|
|
1676
|
+
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({}, props)); };
|
|
1677
|
+
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({}, props)); };
|
|
1678
|
+
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
1679
|
+
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
1680
|
+
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
1681
|
+
|
|
1682
|
+
/**
|
|
1683
|
+
* Login Form
|
|
1684
|
+
* <hr>
|
|
1685
|
+
* Used for this:
|
|
1686
|
+
- Login user to the application
|
|
1687
|
+
*/
|
|
1688
|
+
var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Card, __assign({ isFloating: true }, props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
|
|
1689
|
+
textAlign: "center",
|
|
1690
|
+
marginTop: theme.space.sm,
|
|
1691
|
+
marginBottom: theme.space.lg,
|
|
1692
|
+
} }, { children: jsxRuntime.jsx(XL, __assign({ style: { color: theme.palette.blue[600] } }, { children: props.title })) })), jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
|
|
1693
|
+
var values = _a.values, status = _a.status, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
|
|
1694
|
+
return (jsxRuntime.jsxs(formik.Form, __assign({ onSubmit: handleSubmit }, { children: [jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, (touched && values.email
|
|
1695
|
+
? (touched.email = true)
|
|
1696
|
+
: (touched.email = false)), (errors && errors.email
|
|
1697
|
+
? { validation: "error" }
|
|
1698
|
+
: touched.email
|
|
1699
|
+
? { validation: "success" }
|
|
1700
|
+
: ""))), errors.email ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ("")] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, (touched && values.password
|
|
1701
|
+
? (touched.password = true)
|
|
1702
|
+
: (touched.password = false)), (errors && errors.password
|
|
1703
|
+
? { validation: "error" }
|
|
1704
|
+
: touched.password
|
|
1705
|
+
? { validation: "success" }
|
|
1706
|
+
: ""))), errors.password && (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))), props.passwordForgotLink && (jsxRuntime.jsx(reactForms.Hint, __assign({ style: { textAlign: "right" } }, { children: jsxRuntime.jsx(Anchor, __assign({ href: props.passwordForgotLink, style: { color: theme.palette.grey[500] } }, { children: props.passwordForgotLabel || "Forgot Password?" })) })))] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length
|
|
1707
|
+
? true
|
|
1708
|
+
: isSubmitting
|
|
1709
|
+
? true
|
|
1710
|
+
: 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 })) })))] })));
|
|
1711
|
+
} }))] })), 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"] })))] })); };
|
|
1712
|
+
|
|
1713
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1714
|
+
var theme = _a.theme;
|
|
1715
|
+
return theme.palette.grey["800"];
|
|
1716
|
+
});
|
|
1717
|
+
var Modal = function (props) { return jsxRuntime.jsx(reactModals.Modal, __assign({}, props)); };
|
|
1718
|
+
var FooterItem = reactModals.FooterItem;
|
|
1719
|
+
Modal.Header = reactModals.Header;
|
|
1720
|
+
Modal.Body = ugModalBody;
|
|
1721
|
+
Modal.Footer = reactModals.Footer;
|
|
1722
|
+
var templateObject_1$f;
|
|
1587
1723
|
|
|
1588
1724
|
/**
|
|
1589
1725
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -1932,7 +2068,7 @@ var StyledModal = styled__default["default"](Modal)(templateObject_1$4 || (templ
|
|
|
1932
2068
|
return theme.breakpoints.sm;
|
|
1933
2069
|
}, function (_a) {
|
|
1934
2070
|
var theme = _a.theme;
|
|
1935
|
-
return "".concat(theme.components.
|
|
2071
|
+
return "".concat(theme.components.chrome.header.height, " - ").concat(theme.space.xs);
|
|
1936
2072
|
}, function (_a) {
|
|
1937
2073
|
var theme = _a.theme;
|
|
1938
2074
|
return theme.space.base * 3;
|
|
@@ -2083,6 +2219,9 @@ exports.ButtonGroup = ButtonGroup;
|
|
|
2083
2219
|
exports.CampaignCard = CampaignCard;
|
|
2084
2220
|
exports.Caption = Caption;
|
|
2085
2221
|
exports.Card = Card;
|
|
2222
|
+
exports.CardBody = CardBody$1;
|
|
2223
|
+
exports.CardFooter = CardFooter$1;
|
|
2224
|
+
exports.CardHeader = CardHeader;
|
|
2086
2225
|
exports.Checkbox = Checkbox;
|
|
2087
2226
|
exports.Chrome = Chrome;
|
|
2088
2227
|
exports.Close = Close;
|
|
@@ -2091,6 +2230,8 @@ exports.Col = Col;
|
|
|
2091
2230
|
exports.Content = Content;
|
|
2092
2231
|
exports.Counter = Counter;
|
|
2093
2232
|
exports.CursorPagination = CursorPagination;
|
|
2233
|
+
exports.Divider = Divider$1;
|
|
2234
|
+
exports.Drawer = Drawer;
|
|
2094
2235
|
exports.Dropdown = Dropdown;
|
|
2095
2236
|
exports.DropdownField = index$1;
|
|
2096
2237
|
exports.Ellipsis = Ellipsis;
|
|
@@ -2135,9 +2276,11 @@ exports.NavToggle = NavToggle;
|
|
|
2135
2276
|
exports.NextItem = NextItem;
|
|
2136
2277
|
exports.Notification = Notification;
|
|
2137
2278
|
exports.OrderedList = OrderedList;
|
|
2279
|
+
exports.PageLoader = PageLoader;
|
|
2138
2280
|
exports.Pagination = Pagination;
|
|
2139
2281
|
exports.Paragraph = Paragraph;
|
|
2140
2282
|
exports.PreviousItem = PreviousItem;
|
|
2283
|
+
exports.ProductCard = ProductCard;
|
|
2141
2284
|
exports.ProfileModal = ProfileModal;
|
|
2142
2285
|
exports.Progress = Progress;
|
|
2143
2286
|
exports.Radio = Radio;
|
|
@@ -2163,6 +2306,7 @@ exports.ToastProvider = ToastProvider;
|
|
|
2163
2306
|
exports.Toggle = Toggle;
|
|
2164
2307
|
exports.Trigger = Trigger;
|
|
2165
2308
|
exports.UnorderedList = UnorderedList;
|
|
2309
|
+
exports.Wrapper = Wrapper$1;
|
|
2166
2310
|
exports.XL = XL;
|
|
2167
2311
|
exports.XXL = XXL;
|
|
2168
2312
|
exports.XXXL = XXXL;
|