@appquality/unguess-design-system 2.10.52 → 2.10.55
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 +39 -0
- package/build/index.d.ts +2 -1
- package/build/index.js +233 -173
- package/build/stories/navigation/page-header/_types.d.ts +10 -0
- package/build/stories/navigation/page-header/index.d.ts +17 -0
- package/build/stories/navigation/page-header/index.stories.d.ts +19 -0
- package/build/stories/navigation/page-header/styled/main.d.ts +2 -0
- package/build/stories/theme/components.d.ts +3 -0
- package/build/stories/theme/index.d.ts +3 -0
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -239,12 +239,14 @@ var gradients = {
|
|
|
239
239
|
};
|
|
240
240
|
|
|
241
241
|
var _a, _b, _c, _d, _e, _f, _g$3, _h;
|
|
242
|
-
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" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) })
|
|
242
|
+
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" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
|
|
243
|
+
imgMaxHeight: "214px",
|
|
244
|
+
} });
|
|
243
245
|
|
|
244
246
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400], accentHue: palette.water[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 }) });
|
|
245
247
|
|
|
246
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
247
|
-
var templateObject_1$
|
|
248
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$19 || (templateObject_1$19 = __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 html {\n overflow-y: auto;\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 html {\n overflow-y: auto;\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);
|
|
249
|
+
var templateObject_1$19;
|
|
248
250
|
|
|
249
251
|
/**
|
|
250
252
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -259,14 +261,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
259
261
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
260
262
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
261
263
|
|
|
262
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
264
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"], ["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"])), function (_a) {
|
|
263
265
|
var theme = _a.theme;
|
|
264
266
|
return theme.palette.grey[700];
|
|
265
267
|
}, function (_a) {
|
|
266
268
|
var theme = _a.theme;
|
|
267
269
|
return theme.fontSizes.sm;
|
|
268
270
|
});
|
|
269
|
-
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$
|
|
271
|
+
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (_a) {
|
|
270
272
|
var theme = _a.theme;
|
|
271
273
|
return theme.fontSizes.md;
|
|
272
274
|
});
|
|
@@ -280,9 +282,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
280
282
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
281
283
|
Alert.Title = UgAlertTitle;
|
|
282
284
|
Alert.Close = reactNotifications.Close;
|
|
283
|
-
var templateObject_1$
|
|
285
|
+
var templateObject_1$18, templateObject_2$s;
|
|
284
286
|
|
|
285
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
287
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
286
288
|
return props.avatarType &&
|
|
287
289
|
props.avatarType !== "image" &&
|
|
288
290
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -306,7 +308,7 @@ var Avatar = function (props) {
|
|
|
306
308
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
307
309
|
};
|
|
308
310
|
Avatar.Text = UgAvatar.Text;
|
|
309
|
-
var templateObject_1$
|
|
311
|
+
var templateObject_1$17;
|
|
310
312
|
|
|
311
313
|
/**
|
|
312
314
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -337,7 +339,7 @@ var getThemeStyle = function (props) {
|
|
|
337
339
|
}
|
|
338
340
|
return theme;
|
|
339
341
|
};
|
|
340
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
342
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject([""], [""])));
|
|
341
343
|
/**
|
|
342
344
|
* Buttons let users take action quickly.
|
|
343
345
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -355,7 +357,7 @@ var Button = function (props) {
|
|
|
355
357
|
};
|
|
356
358
|
Button.StartIcon = UgButton.StartIcon;
|
|
357
359
|
Button.EndIcon = UgButton.EndIcon;
|
|
358
|
-
var templateObject_1$
|
|
360
|
+
var templateObject_1$16;
|
|
359
361
|
|
|
360
362
|
/**
|
|
361
363
|
A Button group lets users make a selection from a set of options.
|
|
@@ -385,7 +387,7 @@ Used for this:
|
|
|
385
387
|
**/
|
|
386
388
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
387
389
|
|
|
388
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
390
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
389
391
|
var theme = _a.theme;
|
|
390
392
|
return theme.borderRadii.lg;
|
|
391
393
|
}, function (_a) {
|
|
@@ -406,7 +408,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
406
408
|
- To group related content
|
|
407
409
|
*/
|
|
408
410
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
409
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$
|
|
411
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
410
412
|
var theme = _a.theme;
|
|
411
413
|
return theme.borderRadii.xl;
|
|
412
414
|
}, function (_a) {
|
|
@@ -423,7 +425,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
423
425
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
424
426
|
});
|
|
425
427
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
426
|
-
var templateObject_1$
|
|
428
|
+
var templateObject_1$15, templateObject_2$r;
|
|
427
429
|
|
|
428
430
|
/**
|
|
429
431
|
* Tags let users categorize content using a keyword.
|
|
@@ -638,7 +640,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
638
640
|
})));
|
|
639
641
|
};
|
|
640
642
|
|
|
641
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
643
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
642
644
|
return props.isLight ?
|
|
643
645
|
"\n &:before {\n background-image: linear-gradient(45deg, transparent, ".concat(props.theme.palette.grey[200], ", transparent);\n }\n ") : "\n background-color: ".concat(props.theme.palette.grey[200], ";\n ");
|
|
644
646
|
});
|
|
@@ -656,22 +658,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
656
658
|
- To communicate a typing status, use Inline instead
|
|
657
659
|
*/
|
|
658
660
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
659
|
-
var templateObject_1$
|
|
661
|
+
var templateObject_1$14;
|
|
660
662
|
|
|
661
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
663
|
+
var CardMeta = styled__default["default"].div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
662
664
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
663
665
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n height: ").concat(theme.space.base * 6, "px;\n padding: ").concat(theme.space.xxs, " 0;\n margin-bottom: ").concat(theme.space.xs, ";\n ");
|
|
664
666
|
});
|
|
665
|
-
var templateObject_1$
|
|
667
|
+
var templateObject_1$13;
|
|
666
668
|
|
|
667
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
669
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
668
670
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
669
671
|
return "\n display: flex;\n\n ".concat(!isStretched ? "max-width: ".concat(theme.space.base * 16, "px") : "", ";\n max-height: ").concat(isStretched ? '150px' : "".concat(theme.space.base * 16, "px"), ";\n ").concat(align === "left" ? "margin-right: auto;" : '', "\n ").concat(align === "right" ? "margin-left: auto;" : '', "\n ").concat(align === "center" || isStretched ? "margin: auto;" : '', "\n\n padding: ").concat(theme.space.xxs, " 0;\n\n svg {\n width: 100%;\n height: auto;\n }\n ");
|
|
670
672
|
});
|
|
671
673
|
CardThumbnail.defaultProps = {
|
|
672
674
|
align: "left"
|
|
673
675
|
};
|
|
674
|
-
var templateObject_1$
|
|
676
|
+
var templateObject_1$12;
|
|
675
677
|
|
|
676
678
|
/**
|
|
677
679
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -683,11 +685,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
683
685
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
684
686
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
685
687
|
|
|
686
|
-
var Label$1 = styled__default["default"](SM)(templateObject_1
|
|
688
|
+
var Label$1 = styled__default["default"](SM)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
687
689
|
var theme = _a.theme;
|
|
688
690
|
return theme.palette.grey[500];
|
|
689
691
|
});
|
|
690
|
-
var Title$
|
|
692
|
+
var Title$2 = styled__default["default"](LG)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
691
693
|
var theme = _a.theme;
|
|
692
694
|
return theme.colors.primaryHue;
|
|
693
695
|
}, function (_a) {
|
|
@@ -697,24 +699,24 @@ var Title$1 = styled__default["default"](LG)(templateObject_2$o || (templateObje
|
|
|
697
699
|
var theme = _a.theme;
|
|
698
700
|
return theme.space.xxs;
|
|
699
701
|
});
|
|
700
|
-
var Description$
|
|
702
|
+
var Description$2 = styled__default["default"](MD)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
701
703
|
var theme = _a.theme;
|
|
702
704
|
return theme.palette.grey[700];
|
|
703
705
|
}, function (_a) {
|
|
704
706
|
var theme = _a.theme;
|
|
705
707
|
return theme.space.xxs;
|
|
706
708
|
});
|
|
707
|
-
var Container$1 = styled__default["default"].div(templateObject_4$
|
|
709
|
+
var Container$1 = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
708
710
|
var theme = _a.theme, align = _a.align;
|
|
709
711
|
return "\n display: flex;\n align-items: ".concat(align || "start", ";\n flex-direction: column;\n flex-grow: 1;\n justify-content: start;\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
710
712
|
});
|
|
711
713
|
var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign({}, props)); };
|
|
712
714
|
CardHeader.Label = Label$1;
|
|
713
|
-
CardHeader.Title = Title$
|
|
714
|
-
CardHeader.Text = Description$
|
|
715
|
-
var templateObject_1
|
|
715
|
+
CardHeader.Title = Title$2;
|
|
716
|
+
CardHeader.Text = Description$2;
|
|
717
|
+
var templateObject_1$11, templateObject_2$q, templateObject_3$i, templateObject_4$b;
|
|
716
718
|
|
|
717
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
719
|
+
var Divider = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
718
720
|
var theme = _a.theme;
|
|
719
721
|
return theme.space.base * 3;
|
|
720
722
|
}, function (_a) {
|
|
@@ -724,15 +726,15 @@ var Divider = styled__default["default"].div(templateObject_1$_ || (templateObje
|
|
|
724
726
|
var theme = _a.theme;
|
|
725
727
|
return theme.palette.grey["300"];
|
|
726
728
|
});
|
|
727
|
-
var Footer$1 = styled__default["default"].div(templateObject_2$
|
|
728
|
-
var Container = styled__default["default"].div(templateObject_3$
|
|
729
|
+
var Footer$1 = styled__default["default"].div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"])));
|
|
730
|
+
var Container = styled__default["default"].div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
729
731
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
730
732
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
|
|
731
733
|
});
|
|
732
734
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$1, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
733
|
-
var templateObject_1$
|
|
735
|
+
var templateObject_1$10, templateObject_2$p, templateObject_3$h;
|
|
734
736
|
|
|
735
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1
|
|
737
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
|
|
736
738
|
var theme = _a.theme;
|
|
737
739
|
return theme.borderRadii.lg;
|
|
738
740
|
}, function (_a) {
|
|
@@ -758,7 +760,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
758
760
|
SpecialCard.Thumb = CardThumbnail;
|
|
759
761
|
SpecialCard.Header = CardHeader;
|
|
760
762
|
SpecialCard.Footer = CardFooter;
|
|
761
|
-
var templateObject_1
|
|
763
|
+
var templateObject_1$$;
|
|
762
764
|
|
|
763
765
|
var CampaignCardSkeleton = function () {
|
|
764
766
|
return (jsxRuntime.jsxs(SpecialCard, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
@@ -791,11 +793,11 @@ var getTypeDataIcon = function (type) {
|
|
|
791
793
|
return SvgCampaignFunctional;
|
|
792
794
|
}
|
|
793
795
|
};
|
|
794
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
796
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
795
797
|
var theme = _a.theme;
|
|
796
798
|
return theme.palette.grey["700"];
|
|
797
799
|
});
|
|
798
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$
|
|
800
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$o || (templateObject_2$o = __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) {
|
|
799
801
|
var theme = _a.theme;
|
|
800
802
|
return theme.space.base * 6;
|
|
801
803
|
}, function (_a) {
|
|
@@ -808,7 +810,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$m || (temp
|
|
|
808
810
|
var theme = _a.theme;
|
|
809
811
|
return theme.palette.white;
|
|
810
812
|
});
|
|
811
|
-
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$
|
|
813
|
+
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
812
814
|
var theme = _a.theme;
|
|
813
815
|
return theme.palette.grey["500"];
|
|
814
816
|
});
|
|
@@ -818,9 +820,9 @@ var CampaignCard = function (_a) {
|
|
|
818
820
|
var PillIcon = getTypeDataIcon(type);
|
|
819
821
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$1, { 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(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
820
822
|
};
|
|
821
|
-
var templateObject_1$
|
|
823
|
+
var templateObject_1$_, templateObject_2$o, templateObject_3$g;
|
|
822
824
|
|
|
823
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
825
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
824
826
|
var theme = _a.theme;
|
|
825
827
|
return theme.space.base * 6;
|
|
826
828
|
}, function (_a) {
|
|
@@ -837,16 +839,16 @@ var ProductCard = function (props) {
|
|
|
837
839
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
838
840
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { 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(SpecialCard.Thumb, __assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, __assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
|
|
839
841
|
};
|
|
840
|
-
var templateObject_1$
|
|
842
|
+
var templateObject_1$Z;
|
|
841
843
|
|
|
842
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
844
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
843
845
|
var theme = _a.theme;
|
|
844
846
|
return theme.palette.grey[500];
|
|
845
847
|
}, function (_a) {
|
|
846
848
|
var theme = _a.theme;
|
|
847
849
|
return theme.space.base;
|
|
848
850
|
});
|
|
849
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$
|
|
851
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
850
852
|
var theme = _a.theme;
|
|
851
853
|
return theme.palette.blue[600];
|
|
852
854
|
}, function (_a) {
|
|
@@ -856,15 +858,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templat
|
|
|
856
858
|
var theme = _a.theme;
|
|
857
859
|
return theme.fontWeights.semibold;
|
|
858
860
|
});
|
|
859
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
861
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
860
862
|
var theme = _a.theme;
|
|
861
863
|
return theme.space.xs;
|
|
862
864
|
}, function (_a) {
|
|
863
865
|
var theme = _a.theme;
|
|
864
866
|
return theme.space.xs;
|
|
865
867
|
});
|
|
866
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
867
|
-
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$
|
|
868
|
+
var CardContent = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
869
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
868
870
|
var theme = _a.theme;
|
|
869
871
|
return theme.space.base;
|
|
870
872
|
}, function (_a) {
|
|
@@ -874,15 +876,15 @@ var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$4 || (templa
|
|
|
874
876
|
var theme = _a.theme;
|
|
875
877
|
return theme.space.base * 4;
|
|
876
878
|
});
|
|
877
|
-
var HoverBody = styled__default["default"].div(templateObject_6$
|
|
879
|
+
var HoverBody = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"])), function (_a) {
|
|
878
880
|
var theme = _a.theme;
|
|
879
881
|
return theme.components.notification.card.padding;
|
|
880
882
|
}, function (_a) {
|
|
881
883
|
var theme = _a.theme;
|
|
882
884
|
return theme.palette.white;
|
|
883
885
|
});
|
|
884
|
-
var HoverMetaContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
885
|
-
var StyledCard$1 = styled__default["default"](SpecialCard)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
886
|
+
var HoverMetaContainer = styled__default["default"].div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject([""], [""])));
|
|
887
|
+
var StyledCard$1 = styled__default["default"](SpecialCard)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
886
888
|
var isHoverable = _a.isHoverable;
|
|
887
889
|
return isHoverable &&
|
|
888
890
|
"\n &:hover {\n ".concat(HoverBody, " {\n top: 0;\n transition: all 0.3s ease-in-out;\n }\n\n ").concat(CardContent, " {\n opacity: 0;\n transition: all 0.3s ease-in-out;\n }\n }\n ");
|
|
@@ -891,15 +893,15 @@ var ServiceCard = function (props) {
|
|
|
891
893
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
892
894
|
return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start", wrap: true }, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })))] })] })));
|
|
893
895
|
};
|
|
894
|
-
var templateObject_1$
|
|
896
|
+
var templateObject_1$Y, templateObject_2$n, templateObject_3$f, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
895
897
|
|
|
896
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
898
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
897
899
|
var InfoCard = function (props) {
|
|
898
900
|
return (jsxRuntime.jsxs(SpecialCard, __assign({}, (props.infoTitle && { title: props.infoTitle }), props, { children: [props.infoImg && (jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.infoImg }))), jsxRuntime.jsxs(SpecialCard.Header, { children: [props.infoSubtitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(SpecialCard.Header.Title, { children: props.infoTitle }))] }), props.infoButtons && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button) { return button; }) }) })))] })));
|
|
899
901
|
};
|
|
900
|
-
var templateObject_1$
|
|
902
|
+
var templateObject_1$X;
|
|
901
903
|
|
|
902
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
904
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
903
905
|
var theme = _a.theme;
|
|
904
906
|
return theme.space.xl;
|
|
905
907
|
}, function (_a) {
|
|
@@ -910,7 +912,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
910
912
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
911
913
|
*/
|
|
912
914
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
913
|
-
var templateObject_1$
|
|
915
|
+
var templateObject_1$W;
|
|
914
916
|
|
|
915
917
|
/**
|
|
916
918
|
* Use Span to style and format inline text elements.
|
|
@@ -950,8 +952,8 @@ function useWindowSize() {
|
|
|
950
952
|
return size;
|
|
951
953
|
}
|
|
952
954
|
|
|
953
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
954
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
955
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject([""], [""])));
|
|
956
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"])), function (_a) {
|
|
955
957
|
var status = _a.status, theme = _a.theme;
|
|
956
958
|
switch (status) {
|
|
957
959
|
case "completed":
|
|
@@ -985,9 +987,9 @@ var Counter = function (props) {
|
|
|
985
987
|
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, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
|
|
986
988
|
};
|
|
987
989
|
Counter.Avatar = StyledTag.Avatar;
|
|
988
|
-
var templateObject_1$
|
|
990
|
+
var templateObject_1$V, templateObject_2$m;
|
|
989
991
|
|
|
990
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
992
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
991
993
|
var theme = _a.theme;
|
|
992
994
|
return theme.breakpoints.sm;
|
|
993
995
|
});
|
|
@@ -1004,22 +1006,22 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1004
1006
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1005
1007
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1006
1008
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1007
|
-
var templateObject_1$
|
|
1009
|
+
var templateObject_1$U;
|
|
1008
1010
|
|
|
1009
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1010
|
-
var templateObject_1$
|
|
1011
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
1012
|
+
var templateObject_1$T;
|
|
1011
1013
|
|
|
1012
1014
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1013
1015
|
__proto__: null,
|
|
1014
1016
|
Field: Field$1
|
|
1015
1017
|
});
|
|
1016
1018
|
|
|
1017
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1019
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$S || (templateObject_1$S = __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) {
|
|
1018
1020
|
var theme = _a.theme;
|
|
1019
1021
|
return theme.palette.blue[100];
|
|
1020
1022
|
});
|
|
1021
1023
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1022
|
-
var templateObject_1$
|
|
1024
|
+
var templateObject_1$S;
|
|
1023
1025
|
|
|
1024
1026
|
/**
|
|
1025
1027
|
* A Menu is a wrapper for items elements
|
|
@@ -1043,7 +1045,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1043
1045
|
*/
|
|
1044
1046
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1045
1047
|
|
|
1046
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1048
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1047
1049
|
return props.isPrimary &&
|
|
1048
1050
|
"\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 ");
|
|
1049
1051
|
});
|
|
@@ -1060,7 +1062,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1060
1062
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1061
1063
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1062
1064
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1063
|
-
var templateObject_1$
|
|
1065
|
+
var templateObject_1$R;
|
|
1064
1066
|
|
|
1065
1067
|
/**
|
|
1066
1068
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1075,7 +1077,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1075
1077
|
|
|
1076
1078
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1077
1079
|
|
|
1078
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1080
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
1079
1081
|
/**
|
|
1080
1082
|
* A Checkbox lets users select and unselect options from a list.
|
|
1081
1083
|
* <hr>
|
|
@@ -1087,23 +1089,23 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1087
1089
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1088
1090
|
**/
|
|
1089
1091
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1090
|
-
var templateObject_1$
|
|
1092
|
+
var templateObject_1$Q;
|
|
1091
1093
|
|
|
1092
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1094
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
1093
1095
|
/**
|
|
1094
1096
|
* A Label is used to specify a title for an input.
|
|
1095
1097
|
* <hr>
|
|
1096
1098
|
**/
|
|
1097
1099
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1098
|
-
var templateObject_1$
|
|
1100
|
+
var templateObject_1$P;
|
|
1099
1101
|
|
|
1100
|
-
var flexCenter = styled.css(templateObject_1$
|
|
1101
|
-
var flexColumnCenter = styled.css(templateObject_2$
|
|
1102
|
-
var flexStart = styled.css(templateObject_3$
|
|
1102
|
+
var flexCenter = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1103
|
+
var flexColumnCenter = styled.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1104
|
+
var flexStart = styled.css(templateObject_3$e || (templateObject_3$e = __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) {
|
|
1103
1105
|
var theme = _a.theme;
|
|
1104
1106
|
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1105
1107
|
});
|
|
1106
|
-
var cardStyle = styled.css(templateObject_4$
|
|
1108
|
+
var cardStyle = styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\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 position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
|
|
1107
1109
|
var theme = _a.theme;
|
|
1108
1110
|
return theme.borderRadii.lg;
|
|
1109
1111
|
}, function (_a) {
|
|
@@ -1116,24 +1118,24 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
|
|
|
1116
1118
|
var theme = _a.theme;
|
|
1117
1119
|
return theme.shadows.boxShadow(theme);
|
|
1118
1120
|
});
|
|
1119
|
-
var templateObject_1$
|
|
1121
|
+
var templateObject_1$O, templateObject_2$l, templateObject_3$e, templateObject_4$9;
|
|
1120
1122
|
|
|
1121
|
-
styled__default["default"](Card)(templateObject_1$
|
|
1123
|
+
styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __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) {
|
|
1122
1124
|
var theme = _a.theme;
|
|
1123
1125
|
return theme.palette.blue[300];
|
|
1124
1126
|
});
|
|
1125
|
-
styled__default["default"].div(templateObject_2$
|
|
1127
|
+
styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1126
1128
|
var theme = _a.theme;
|
|
1127
1129
|
return theme.space.base;
|
|
1128
1130
|
});
|
|
1129
|
-
styled__default["default"](Label)(templateObject_3$
|
|
1131
|
+
styled__default["default"](Label)(templateObject_3$d || (templateObject_3$d = __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) {
|
|
1130
1132
|
var theme = _a.theme;
|
|
1131
1133
|
return theme.space.base;
|
|
1132
1134
|
}, function (_a) {
|
|
1133
1135
|
var theme = _a.theme;
|
|
1134
1136
|
return theme.palette.grey[700];
|
|
1135
1137
|
});
|
|
1136
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_4$
|
|
1138
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1137
1139
|
var theme = _a.theme;
|
|
1138
1140
|
return theme.space.base;
|
|
1139
1141
|
});
|
|
@@ -1146,14 +1148,14 @@ var CheckboxCard = function (props) {
|
|
|
1146
1148
|
};
|
|
1147
1149
|
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, __assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1148
1150
|
};
|
|
1149
|
-
var templateObject_1$
|
|
1151
|
+
var templateObject_1$N, templateObject_2$k, templateObject_3$d, templateObject_4$8;
|
|
1150
1152
|
|
|
1151
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1153
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1152
1154
|
/**
|
|
1153
1155
|
* A Field is a wrapper for input elements
|
|
1154
1156
|
**/
|
|
1155
1157
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1156
|
-
var templateObject_1$
|
|
1158
|
+
var templateObject_1$M;
|
|
1157
1159
|
|
|
1158
1160
|
var index = /*#__PURE__*/Object.freeze({
|
|
1159
1161
|
__proto__: null,
|
|
@@ -1161,8 +1163,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1161
1163
|
Hint: reactForms.Hint
|
|
1162
1164
|
});
|
|
1163
1165
|
|
|
1164
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1165
|
-
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$
|
|
1166
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1167
|
+
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject([""], [""])));
|
|
1166
1168
|
/**
|
|
1167
1169
|
* An Input lets users enter text into a field.
|
|
1168
1170
|
* <hr>
|
|
@@ -1171,9 +1173,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (te
|
|
|
1171
1173
|
* - To enter multiline text, use a Textarea
|
|
1172
1174
|
**/
|
|
1173
1175
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1174
|
-
var templateObject_1$
|
|
1176
|
+
var templateObject_1$L, templateObject_2$j;
|
|
1175
1177
|
|
|
1176
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1178
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1177
1179
|
/**
|
|
1178
1180
|
* Media elements add even more context to an input.
|
|
1179
1181
|
* <hr>
|
|
@@ -1182,9 +1184,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1182
1184
|
* - To enter multiline text, use a Textarea
|
|
1183
1185
|
**/
|
|
1184
1186
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1185
|
-
var templateObject_1$
|
|
1187
|
+
var templateObject_1$K;
|
|
1186
1188
|
|
|
1187
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1189
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1188
1190
|
/**
|
|
1189
1191
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1190
1192
|
* <hr>
|
|
@@ -1196,7 +1198,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$H ||
|
|
|
1196
1198
|
* - To select from a long list of options, use Select instead
|
|
1197
1199
|
**/
|
|
1198
1200
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1199
|
-
var templateObject_1$
|
|
1201
|
+
var templateObject_1$J;
|
|
1200
1202
|
|
|
1201
1203
|
var _path$i;
|
|
1202
1204
|
|
|
@@ -1216,7 +1218,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1216
1218
|
})));
|
|
1217
1219
|
};
|
|
1218
1220
|
|
|
1219
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1221
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1220
1222
|
var theme = _a.theme;
|
|
1221
1223
|
return theme.space.base;
|
|
1222
1224
|
}, function (_a) {
|
|
@@ -1226,7 +1228,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1
|
|
|
1226
1228
|
var theme = _a.theme;
|
|
1227
1229
|
return theme.fontWeights.medium;
|
|
1228
1230
|
});
|
|
1229
|
-
var Circle = styled__default["default"].div(templateObject_2$
|
|
1231
|
+
var Circle = styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __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) {
|
|
1230
1232
|
var theme = _a.theme;
|
|
1231
1233
|
return theme.space.base * 6;
|
|
1232
1234
|
}, function (_a) {
|
|
@@ -1250,9 +1252,9 @@ var RadioCard = function (_a) {
|
|
|
1250
1252
|
props.onChecked && props.onChecked(props.value);
|
|
1251
1253
|
} }, { children: [jsxRuntime.jsx(SpecialCard.Meta, __assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, __assign({ style: props.checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }))] })));
|
|
1252
1254
|
};
|
|
1253
|
-
var templateObject_1$
|
|
1255
|
+
var templateObject_1$I, templateObject_2$i;
|
|
1254
1256
|
|
|
1255
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1257
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1256
1258
|
/**
|
|
1257
1259
|
* A Textarea is a form control for multi-line text.
|
|
1258
1260
|
* <hr>
|
|
@@ -1260,9 +1262,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1260
1262
|
* - To enter multi-line text
|
|
1261
1263
|
**/
|
|
1262
1264
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1263
|
-
var templateObject_1$
|
|
1265
|
+
var templateObject_1$H;
|
|
1264
1266
|
|
|
1265
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1267
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
1266
1268
|
/**
|
|
1267
1269
|
* 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.
|
|
1268
1270
|
* <hr>
|
|
@@ -1273,11 +1275,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$E
|
|
|
1273
1275
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1274
1276
|
**/
|
|
1275
1277
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1276
|
-
var templateObject_1$
|
|
1278
|
+
var templateObject_1$G;
|
|
1277
1279
|
|
|
1278
|
-
var StyledCol = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
1279
|
-
var Col = function (props) { return jsxRuntime.jsx(StyledCol, __assign({}, props)); };
|
|
1280
|
-
var templateObject_1$
|
|
1280
|
+
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"], ["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"])), theme.space.lg, theme.breakpoints.sm, theme.space.md);
|
|
1281
|
+
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
1282
|
+
var templateObject_1$F;
|
|
1281
1283
|
|
|
1282
1284
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1283
1285
|
|
|
@@ -1340,15 +1342,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1340
1342
|
})));
|
|
1341
1343
|
};
|
|
1342
1344
|
|
|
1343
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1345
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1344
1346
|
var Icon = function (props) {
|
|
1345
1347
|
var type = props.type, size = props.size;
|
|
1346
1348
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1347
1349
|
return (jsxRuntime.jsxs(StyledUgIcon$1, { children: [type === "square" && jsxRuntime.jsx(SvgUgSquare, { width: dim, height: dim }), type === "triangle" && jsxRuntime.jsx(SvgUgTriangle, { width: dim, height: dim }), type === "circle" && jsxRuntime.jsx(SvgUgCircle, { width: dim, height: dim })] }));
|
|
1348
1350
|
};
|
|
1349
|
-
var templateObject_1$
|
|
1351
|
+
var templateObject_1$E;
|
|
1350
1352
|
|
|
1351
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1353
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1352
1354
|
/**
|
|
1353
1355
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1354
1356
|
* <hr>
|
|
@@ -1360,9 +1362,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1360
1362
|
- When loading page content, use a Skeleton loader instead
|
|
1361
1363
|
*/
|
|
1362
1364
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1363
|
-
var templateObject_1$
|
|
1365
|
+
var templateObject_1$D;
|
|
1364
1366
|
|
|
1365
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1367
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1366
1368
|
/**
|
|
1367
1369
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1368
1370
|
* <hr>
|
|
@@ -1371,9 +1373,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1371
1373
|
- To provide a quick way to navigate to ancestor pages
|
|
1372
1374
|
*/
|
|
1373
1375
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1374
|
-
var templateObject_1$
|
|
1376
|
+
var templateObject_1$C;
|
|
1375
1377
|
|
|
1376
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1378
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1377
1379
|
var theme = _a.theme;
|
|
1378
1380
|
return theme.palette.white;
|
|
1379
1381
|
});
|
|
@@ -1381,7 +1383,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$z ||
|
|
|
1381
1383
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1382
1384
|
*/
|
|
1383
1385
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1384
|
-
var templateObject_1$
|
|
1386
|
+
var templateObject_1$B;
|
|
1385
1387
|
|
|
1386
1388
|
/**
|
|
1387
1389
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1405,23 +1407,23 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1405
1407
|
})));
|
|
1406
1408
|
};
|
|
1407
1409
|
|
|
1408
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1410
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1409
1411
|
var theme = _a.theme;
|
|
1410
1412
|
return theme.fonts.system;
|
|
1411
1413
|
});
|
|
1412
|
-
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$
|
|
1414
|
+
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1413
1415
|
var theme = _a.theme;
|
|
1414
1416
|
return theme.fonts.system;
|
|
1415
1417
|
});
|
|
1416
1418
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1417
|
-
var templateObject_1$
|
|
1419
|
+
var templateObject_1$A, templateObject_2$h;
|
|
1418
1420
|
|
|
1419
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1421
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1420
1422
|
var theme = _a.theme;
|
|
1421
1423
|
return theme.fonts.system;
|
|
1422
1424
|
});
|
|
1423
1425
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1424
|
-
var templateObject_1$
|
|
1426
|
+
var templateObject_1$z;
|
|
1425
1427
|
|
|
1426
1428
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1427
1429
|
|
|
@@ -1470,7 +1472,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1470
1472
|
})));
|
|
1471
1473
|
};
|
|
1472
1474
|
|
|
1473
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1475
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1474
1476
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1475
1477
|
return isCompact &&
|
|
1476
1478
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1486,13 +1488,13 @@ var WorkspacesDropdown = function (props) {
|
|
|
1486
1488
|
? selectedWorkspace.company + "'s workspace"
|
|
1487
1489
|
: "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })));
|
|
1488
1490
|
};
|
|
1489
|
-
var templateObject_1$
|
|
1491
|
+
var templateObject_1$y;
|
|
1490
1492
|
|
|
1491
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1493
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$x || (templateObject_1$x = __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) {
|
|
1492
1494
|
var theme = _a.theme;
|
|
1493
1495
|
return theme.breakpoints.md;
|
|
1494
1496
|
});
|
|
1495
|
-
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$
|
|
1497
|
+
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$g || (templateObject_2$g = __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) {
|
|
1496
1498
|
var theme = _a.theme;
|
|
1497
1499
|
return theme.palette.blue["600"];
|
|
1498
1500
|
}, function (_a) {
|
|
@@ -1502,7 +1504,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1502
1504
|
var theme = _a.theme;
|
|
1503
1505
|
return theme.breakpoints.md;
|
|
1504
1506
|
});
|
|
1505
|
-
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$
|
|
1507
|
+
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1506
1508
|
var theme = _a.theme;
|
|
1507
1509
|
return theme.palette.blue["600"];
|
|
1508
1510
|
}, function (_a) {
|
|
@@ -1512,7 +1514,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
|
|
|
1512
1514
|
var theme = _a.theme;
|
|
1513
1515
|
return theme.breakpoints.md;
|
|
1514
1516
|
});
|
|
1515
|
-
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$
|
|
1517
|
+
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$7 || (templateObject_4$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) {
|
|
1516
1518
|
var theme = _a.theme;
|
|
1517
1519
|
return theme.palette.blue["600"];
|
|
1518
1520
|
}, function (_a) {
|
|
@@ -1522,9 +1524,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1522
1524
|
var BrandItem = function (props) {
|
|
1523
1525
|
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.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
|
|
1524
1526
|
};
|
|
1525
|
-
var templateObject_1$
|
|
1527
|
+
var templateObject_1$x, templateObject_2$g, templateObject_3$c, templateObject_4$7;
|
|
1526
1528
|
|
|
1527
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1529
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1528
1530
|
/**
|
|
1529
1531
|
* An Header is a visual way to display general information.
|
|
1530
1532
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1533,13 +1535,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1533
1535
|
Header.HeaderItem = HeaderItem;
|
|
1534
1536
|
Header.HeaderItemText = HeaderItemText;
|
|
1535
1537
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1536
|
-
var templateObject_1$
|
|
1538
|
+
var templateObject_1$w;
|
|
1537
1539
|
|
|
1538
1540
|
var HeaderSkeleton = function () {
|
|
1539
1541
|
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: window.matchMedia("only screen and (min-width: 576px)").matches ? (jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm })) : (jsxRuntime.jsx(Skeleton, { width: "80px", height: theme.space.sm, style: { marginLeft: 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%" } }) }) }) }))] })));
|
|
1540
1542
|
};
|
|
1541
1543
|
|
|
1542
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1544
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1543
1545
|
var theme = _a.theme;
|
|
1544
1546
|
return theme.breakpoints.sm;
|
|
1545
1547
|
});
|
|
@@ -1551,9 +1553,9 @@ var AppHeader = function (_a) {
|
|
|
1551
1553
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1552
1554
|
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, {}) }))] }) }) }))] })));
|
|
1553
1555
|
};
|
|
1554
|
-
var templateObject_1$
|
|
1556
|
+
var templateObject_1$v;
|
|
1555
1557
|
|
|
1556
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1558
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
|
|
1557
1559
|
var theme = _a.theme;
|
|
1558
1560
|
return theme.borders.sm;
|
|
1559
1561
|
}, function (_a) {
|
|
@@ -1580,10 +1582,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$s || (t
|
|
|
1580
1582
|
- To give a consistent dashboard and navigation experience
|
|
1581
1583
|
*/
|
|
1582
1584
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1583
|
-
var templateObject_1$
|
|
1585
|
+
var templateObject_1$u;
|
|
1584
1586
|
|
|
1585
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1586
|
-
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$
|
|
1587
|
+
var SelectedItemStyle = styled.css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1588
|
+
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$f || (templateObject_2$f = __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) {
|
|
1587
1589
|
var theme = _a.theme;
|
|
1588
1590
|
return theme.fonts.system;
|
|
1589
1591
|
}, 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) {
|
|
@@ -1594,11 +1596,11 @@ var NavItem = function (props) {
|
|
|
1594
1596
|
// const { isExpanded } = props;
|
|
1595
1597
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1596
1598
|
};
|
|
1597
|
-
var templateObject_1$
|
|
1599
|
+
var templateObject_1$t, templateObject_2$f;
|
|
1598
1600
|
|
|
1599
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1601
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
|
|
1600
1602
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1601
|
-
var templateObject_1$
|
|
1603
|
+
var templateObject_1$s;
|
|
1602
1604
|
|
|
1603
1605
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1604
1606
|
|
|
@@ -1636,7 +1638,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
1636
1638
|
})));
|
|
1637
1639
|
};
|
|
1638
1640
|
|
|
1639
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
1641
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$r || (templateObject_1$r = __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) {
|
|
1640
1642
|
var theme = _a.theme;
|
|
1641
1643
|
return theme.space.base * 6;
|
|
1642
1644
|
}, function (_a) {
|
|
@@ -1661,18 +1663,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$p ||
|
|
|
1661
1663
|
var NavToggle = function (props) {
|
|
1662
1664
|
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%" } })) })));
|
|
1663
1665
|
};
|
|
1664
|
-
var templateObject_1$
|
|
1666
|
+
var templateObject_1$r;
|
|
1665
1667
|
|
|
1666
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
1668
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$q || (templateObject_1$q = __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;"; });
|
|
1667
1669
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1668
|
-
var templateObject_1$
|
|
1670
|
+
var templateObject_1$q;
|
|
1669
1671
|
|
|
1670
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1671
|
-
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$
|
|
1672
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$p || (templateObject_1$p = __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; });
|
|
1673
|
+
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
1672
1674
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1673
1675
|
NavItemProject.Title = NavItemText;
|
|
1674
1676
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1675
|
-
var templateObject_1$
|
|
1677
|
+
var templateObject_1$p, templateObject_2$e;
|
|
1676
1678
|
|
|
1677
1679
|
var _path$a;
|
|
1678
1680
|
|
|
@@ -1841,7 +1843,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
1841
1843
|
})))));
|
|
1842
1844
|
};
|
|
1843
1845
|
|
|
1844
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
1846
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
1845
1847
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
1846
1848
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
1847
1849
|
});
|
|
@@ -1849,13 +1851,13 @@ var LoadingSidebar = function (props) {
|
|
|
1849
1851
|
var isExpanded = props.isExpanded;
|
|
1850
1852
|
return (jsxRuntime.jsxs(StyledNav, __assign({}, props, { isExpanded: isExpanded }, { 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" })] }))] })));
|
|
1851
1853
|
};
|
|
1852
|
-
var templateObject_1$
|
|
1854
|
+
var templateObject_1$o;
|
|
1853
1855
|
|
|
1854
1856
|
var FEATURE_FLAG_CATALOG = 'catalog-pages';
|
|
1855
1857
|
|
|
1856
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
1857
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_2$
|
|
1858
|
-
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$
|
|
1858
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
1859
|
+
var ScrollingContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
1860
|
+
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
|
|
1859
1861
|
var isExpanded = _a.isExpanded;
|
|
1860
1862
|
return isExpanded &&
|
|
1861
1863
|
"\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
|
|
@@ -1892,9 +1894,9 @@ var Sidebar = function (props) {
|
|
|
1892
1894
|
features.find(function (feature) { return feature.slug === FEATURE_FLAG_CATALOG; }) && (jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? (jsxRuntime.jsx(SvgTemplatesActive, {})) : (jsxRuntime.jsx(SvgTemplates, {})) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] }))), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
|
|
1893
1895
|
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", 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" })] }))] })));
|
|
1894
1896
|
};
|
|
1895
|
-
var templateObject_1$
|
|
1897
|
+
var templateObject_1$n, templateObject_2$d, templateObject_3$b;
|
|
1896
1898
|
|
|
1897
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
1899
|
+
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 @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"])), function (_a) {
|
|
1898
1900
|
var theme = _a.theme;
|
|
1899
1901
|
return theme.breakpoints.sm;
|
|
1900
1902
|
}, function (_a) {
|
|
@@ -1904,22 +1906,22 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$k ||
|
|
|
1904
1906
|
/**
|
|
1905
1907
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
1906
1908
|
*/
|
|
1907
|
-
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1908
|
-
var templateObject_1$
|
|
1909
|
+
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1910
|
+
var templateObject_1$m;
|
|
1909
1911
|
|
|
1910
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
1912
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$l || (templateObject_1$l = __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]);
|
|
1911
1913
|
var PageLoader = function () {
|
|
1912
1914
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
1913
|
-
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, { isExpanded: isSidebarOpen, isLoading: true }), jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px", style: { marginTop: theme.space.sm, marginLeft: theme.space.sm } }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
|
|
1915
|
+
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, { isExpanded: isSidebarOpen, isLoading: true }), jsxRuntime.jsxs(Main$1, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px", style: { marginTop: theme.space.sm, marginLeft: theme.space.sm } }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
|
|
1914
1916
|
};
|
|
1915
|
-
var templateObject_1$
|
|
1917
|
+
var templateObject_1$l;
|
|
1916
1918
|
|
|
1917
1919
|
/**
|
|
1918
1920
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1919
1921
|
*/
|
|
1920
|
-
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1922
|
+
var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1921
1923
|
|
|
1922
|
-
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$
|
|
1924
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"], ["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"])), theme.breakpoints.sm);
|
|
1923
1925
|
/**
|
|
1924
1926
|
* Login Form
|
|
1925
1927
|
* <hr>
|
|
@@ -1929,7 +1931,7 @@ var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$i ||
|
|
|
1929
1931
|
var LoginForm = function (props) {
|
|
1930
1932
|
var width = useWindowSize().width;
|
|
1931
1933
|
var breakpointMd = parseInt(theme.breakpoints.md, 10);
|
|
1932
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, __assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
|
|
1934
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, __assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title$1, __assign({ style: {
|
|
1933
1935
|
textAlign: "center",
|
|
1934
1936
|
marginTop: theme.space.sm,
|
|
1935
1937
|
marginBottom: theme.space.lg,
|
|
@@ -1950,9 +1952,9 @@ var LoginForm = function (props) {
|
|
|
1950
1952
|
: false, isPrimary: true, isPill: true, themeColor: theme.colors.accentHue, 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 })) })))] })));
|
|
1951
1953
|
} }))] })), 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"] })))] }));
|
|
1952
1954
|
};
|
|
1953
|
-
var templateObject_1$
|
|
1955
|
+
var templateObject_1$k;
|
|
1954
1956
|
|
|
1955
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
1957
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1956
1958
|
var theme = _a.theme;
|
|
1957
1959
|
return theme.palette.grey["800"];
|
|
1958
1960
|
});
|
|
@@ -1961,35 +1963,35 @@ var FooterItem = reactModals.FooterItem;
|
|
|
1961
1963
|
Modal.Header = reactModals.Header;
|
|
1962
1964
|
Modal.Body = ugModalBody;
|
|
1963
1965
|
Modal.Footer = reactModals.Footer;
|
|
1964
|
-
var templateObject_1$
|
|
1966
|
+
var templateObject_1$j;
|
|
1965
1967
|
|
|
1966
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
1967
|
-
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$
|
|
1968
|
+
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
1969
|
+
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$c || (templateObject_2$c = __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) {
|
|
1968
1970
|
var theme = _a.theme;
|
|
1969
1971
|
return theme.space.base * 3;
|
|
1970
1972
|
}, function (_a) {
|
|
1971
1973
|
var theme = _a.theme;
|
|
1972
1974
|
return theme.space.base * 6;
|
|
1973
1975
|
});
|
|
1974
|
-
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$
|
|
1976
|
+
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1975
1977
|
var theme = _a.theme;
|
|
1976
1978
|
return theme.palette.grey["100"];
|
|
1977
1979
|
});
|
|
1978
|
-
var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$
|
|
1980
|
+
var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n padding: ", "px ", "px;\n"], ["\n padding: ", "px ", "px;\n"])), function (_a) {
|
|
1979
1981
|
var theme = _a.theme;
|
|
1980
1982
|
return theme.space.base * 4;
|
|
1981
1983
|
}, function (_a) {
|
|
1982
1984
|
var theme = _a.theme;
|
|
1983
1985
|
return theme.space.base * 6;
|
|
1984
1986
|
});
|
|
1985
|
-
var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$
|
|
1987
|
+
var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n position: relative;\n top: unset;\n right: unset;\n"], ["\n position: relative;\n top: unset;\n right: unset;\n"])));
|
|
1986
1988
|
var ModalFullScreen = function (props) { return jsxRuntime.jsx(StyledModal$1, __assign({}, props)); };
|
|
1987
1989
|
ModalFullScreen.Header = StyledHeader;
|
|
1988
1990
|
ModalFullScreen.Body = StyledBody$4;
|
|
1989
1991
|
ModalFullScreen.Footer = StyledFooter;
|
|
1990
1992
|
ModalFullScreen.Close = StyledModalClose;
|
|
1991
1993
|
ModalFullScreen.FooterItem = FooterItem;
|
|
1992
|
-
var templateObject_1$
|
|
1994
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4;
|
|
1993
1995
|
|
|
1994
1996
|
/**
|
|
1995
1997
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2010,7 +2012,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2010
2012
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2011
2013
|
var useToast = reactNotifications.useToast;
|
|
2012
2014
|
|
|
2013
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2015
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject([""], [""])));
|
|
2014
2016
|
/**
|
|
2015
2017
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2016
2018
|
|
|
@@ -2020,7 +2022,71 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2020
2022
|
*/
|
|
2021
2023
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2022
2024
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2023
|
-
var templateObject_1$
|
|
2025
|
+
var templateObject_1$h;
|
|
2026
|
+
|
|
2027
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject([""], [""])));
|
|
2028
|
+
/**
|
|
2029
|
+
* Use Paragraph to render blocks of text with Garden styling.
|
|
2030
|
+
*/
|
|
2031
|
+
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2032
|
+
var templateObject_1$g;
|
|
2033
|
+
|
|
2034
|
+
var MainContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2035
|
+
var InformationContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n padding: ", " 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n height: 100%;\n"], ["\n padding: ", " 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n height: 100%;\n"])), theme.space.xs);
|
|
2036
|
+
var MetaContainer = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n"])));
|
|
2037
|
+
var Overline = styled__default["default"](MD)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), theme.palette.grey[600], theme.space.md, theme.fontWeights.semibold, theme.lineHeights.md);
|
|
2038
|
+
var Title = styled__default["default"].h1(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), theme.colors.primaryHue, theme.fontSizes.xxxl, theme.fontWeights.semibold, theme.lineHeights.xxxl);
|
|
2039
|
+
var Description$1 = styled__default["default"](Paragraph)(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n color: ", ";\n margin: ", " 0;\n line-height: ", ";\n"], ["\n color: ", ";\n margin: ", " 0;\n line-height: ", ";\n"])), theme.palette.grey[600], theme.space.md, theme.lineHeights.lg);
|
|
2040
|
+
var Image = styled__default["default"].img(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: auto;\n height: 100%;\n max-height: ", ";\n"], ["\n width: auto;\n height: 100%;\n max-height: ", ";\n"])), theme.components.pageHeader.imgMaxHeight);
|
|
2041
|
+
var Counters = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: ", ";\n\n > *:first-child {\n padding-left: 0;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: ", ";\n\n > *:first-child {\n padding-left: 0;\n }\n"])), theme.space.md);
|
|
2042
|
+
var StyledCol = styled__default["default"](Col)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
2043
|
+
var Main = function (props) {
|
|
2044
|
+
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ orderXs: 2, orderSm: 1, xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && (jsxRuntime.jsx(Counters, { children: props.infoCounters.map(function (counter) { return (counter); }) }))] }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ orderXs: 1, orderSm: 2, xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage }) }) })))] }) }));
|
|
2045
|
+
};
|
|
2046
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2047
|
+
|
|
2048
|
+
var StyledPageHeader = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2049
|
+
var theme = _a.theme;
|
|
2050
|
+
return theme.palette.white;
|
|
2051
|
+
}, function (_a) {
|
|
2052
|
+
var theme = _a.theme;
|
|
2053
|
+
return "".concat(theme.space.xxl, " ").concat(theme.space.xxl, " ").concat(theme.space.md);
|
|
2054
|
+
}, function (_a) {
|
|
2055
|
+
var theme = _a.theme;
|
|
2056
|
+
return theme.palette.grey[200];
|
|
2057
|
+
}, function (_a) {
|
|
2058
|
+
var theme = _a.theme;
|
|
2059
|
+
return theme.breakpoints.sm;
|
|
2060
|
+
}, function (_a) {
|
|
2061
|
+
var theme = _a.theme;
|
|
2062
|
+
return "".concat(theme.space.md, " ").concat(theme.space.md, " ").concat(theme.space.xs);
|
|
2063
|
+
});
|
|
2064
|
+
var PullLeft = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: ", ";\n"])), function (_a) {
|
|
2065
|
+
var theme = _a.theme;
|
|
2066
|
+
return theme.space.sm;
|
|
2067
|
+
});
|
|
2068
|
+
var ButtonContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"])), function (_a) {
|
|
2069
|
+
var theme = _a.theme;
|
|
2070
|
+
return theme.space.md;
|
|
2071
|
+
});
|
|
2072
|
+
var StyledBreadcrumb = function (props) {
|
|
2073
|
+
return (jsxRuntime.jsx(PullLeft, { children: jsxRuntime.jsx(Breadcrumb, __assign({}, props)) }));
|
|
2074
|
+
};
|
|
2075
|
+
var Buttons = function (props) { return (jsxRuntime.jsx(ButtonContainer, __assign({}, props))); };
|
|
2076
|
+
/**
|
|
2077
|
+
* A PageHeader is a modular container used for pages with an opinionated set of default spaces and subcomponents order.
|
|
2078
|
+
* <hr>
|
|
2079
|
+
* Used for this:
|
|
2080
|
+
- Display page informations and meta data
|
|
2081
|
+
- As a container for the top part of the page
|
|
2082
|
+
*/
|
|
2083
|
+
var PageHeader = function (props) {
|
|
2084
|
+
return jsxRuntime.jsx(StyledPageHeader, __assign({}, props));
|
|
2085
|
+
};
|
|
2086
|
+
PageHeader.Breadcrumb = StyledBreadcrumb;
|
|
2087
|
+
PageHeader.Main = Main;
|
|
2088
|
+
PageHeader.Buttons = Buttons;
|
|
2089
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$8;
|
|
2024
2090
|
|
|
2025
2091
|
var _path$5;
|
|
2026
2092
|
|
|
@@ -2059,15 +2125,15 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2059
2125
|
})));
|
|
2060
2126
|
};
|
|
2061
2127
|
|
|
2062
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
2128
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isVisible ? "1" : "0"); }, function (props) { return (props.isDisabled ? "inherit" : theme.palette.grey[600]); }, function (props) { return props.theme.iconSizes.md; }, function (props) { return props.theme.iconSizes.md; });
|
|
2063
2129
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2064
|
-
var templateObject_1$
|
|
2130
|
+
var templateObject_1$d;
|
|
2065
2131
|
|
|
2066
2132
|
/**
|
|
2067
2133
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2068
2134
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2069
2135
|
**/
|
|
2070
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
2136
|
+
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) {
|
|
2071
2137
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2072
2138
|
}, function (props) {
|
|
2073
2139
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -2086,7 +2152,7 @@ var MenuItem = function (_a) {
|
|
|
2086
2152
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2087
2153
|
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));
|
|
2088
2154
|
};
|
|
2089
|
-
var templateObject_1$
|
|
2155
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2090
2156
|
|
|
2091
2157
|
var _path$3;
|
|
2092
2158
|
|
|
@@ -2143,15 +2209,8 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2143
2209
|
})));
|
|
2144
2210
|
};
|
|
2145
2211
|
|
|
2146
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
2212
|
+
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 }"); });
|
|
2147
2213
|
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] }))); };
|
|
2148
|
-
var templateObject_1$c;
|
|
2149
|
-
|
|
2150
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
|
|
2151
|
-
/**
|
|
2152
|
-
* Use Paragraph to render blocks of text with Garden styling.
|
|
2153
|
-
*/
|
|
2154
|
-
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2155
2214
|
var templateObject_1$b;
|
|
2156
2215
|
|
|
2157
2216
|
var getInitials = function (name) {
|
|
@@ -2558,7 +2617,7 @@ exports.Label = Label;
|
|
|
2558
2617
|
exports.LoginForm = LoginForm;
|
|
2559
2618
|
exports.Logo = Logo;
|
|
2560
2619
|
exports.MD = MD;
|
|
2561
|
-
exports.Main = Main;
|
|
2620
|
+
exports.Main = Main$1;
|
|
2562
2621
|
exports.MediaBody = MediaBody;
|
|
2563
2622
|
exports.MediaFigure = MediaFigure;
|
|
2564
2623
|
exports.MediaInput = MediaInput;
|
|
@@ -2579,6 +2638,7 @@ exports.NavToggle = NavToggle;
|
|
|
2579
2638
|
exports.NextItem = NextItem;
|
|
2580
2639
|
exports.Notification = Notification;
|
|
2581
2640
|
exports.OrderedList = OrderedList;
|
|
2641
|
+
exports.PageHeader = PageHeader;
|
|
2582
2642
|
exports.PageLoader = PageLoader;
|
|
2583
2643
|
exports.Pagination = Pagination;
|
|
2584
2644
|
exports.Paragraph = Paragraph;
|
|
@@ -2608,7 +2668,7 @@ exports.Tag = Tag;
|
|
|
2608
2668
|
exports.Textarea = Textarea;
|
|
2609
2669
|
exports.Tiles = Tiles;
|
|
2610
2670
|
exports.Timeline = Timeline;
|
|
2611
|
-
exports.Title = Title;
|
|
2671
|
+
exports.Title = Title$1;
|
|
2612
2672
|
exports.ToastProvider = ToastProvider;
|
|
2613
2673
|
exports.Toggle = Toggle;
|
|
2614
2674
|
exports.Trigger = Trigger;
|