@appquality/unguess-design-system 2.10.54 → 2.10.57
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 +230 -172
- package/build/stories/navigation/page-header/_types.d.ts +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -245,8 +245,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
245
245
|
|
|
246
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 }) });
|
|
247
247
|
|
|
248
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
249
|
-
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;
|
|
250
250
|
|
|
251
251
|
/**
|
|
252
252
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -261,14 +261,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
261
261
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
262
262
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
263
263
|
|
|
264
|
-
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) {
|
|
265
265
|
var theme = _a.theme;
|
|
266
266
|
return theme.palette.grey[700];
|
|
267
267
|
}, function (_a) {
|
|
268
268
|
var theme = _a.theme;
|
|
269
269
|
return theme.fontSizes.sm;
|
|
270
270
|
});
|
|
271
|
-
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) {
|
|
272
272
|
var theme = _a.theme;
|
|
273
273
|
return theme.fontSizes.md;
|
|
274
274
|
});
|
|
@@ -282,9 +282,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
282
282
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
283
283
|
Alert.Title = UgAlertTitle;
|
|
284
284
|
Alert.Close = reactNotifications.Close;
|
|
285
|
-
var templateObject_1$
|
|
285
|
+
var templateObject_1$18, templateObject_2$s;
|
|
286
286
|
|
|
287
|
-
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) {
|
|
288
288
|
return props.avatarType &&
|
|
289
289
|
props.avatarType !== "image" &&
|
|
290
290
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -308,7 +308,7 @@ var Avatar = function (props) {
|
|
|
308
308
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
309
309
|
};
|
|
310
310
|
Avatar.Text = UgAvatar.Text;
|
|
311
|
-
var templateObject_1$
|
|
311
|
+
var templateObject_1$17;
|
|
312
312
|
|
|
313
313
|
/**
|
|
314
314
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -339,7 +339,7 @@ var getThemeStyle = function (props) {
|
|
|
339
339
|
}
|
|
340
340
|
return theme;
|
|
341
341
|
};
|
|
342
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
342
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject([""], [""])));
|
|
343
343
|
/**
|
|
344
344
|
* Buttons let users take action quickly.
|
|
345
345
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -357,7 +357,7 @@ var Button = function (props) {
|
|
|
357
357
|
};
|
|
358
358
|
Button.StartIcon = UgButton.StartIcon;
|
|
359
359
|
Button.EndIcon = UgButton.EndIcon;
|
|
360
|
-
var templateObject_1$
|
|
360
|
+
var templateObject_1$16;
|
|
361
361
|
|
|
362
362
|
/**
|
|
363
363
|
A Button group lets users make a selection from a set of options.
|
|
@@ -387,7 +387,7 @@ Used for this:
|
|
|
387
387
|
**/
|
|
388
388
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
389
389
|
|
|
390
|
-
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) {
|
|
391
391
|
var theme = _a.theme;
|
|
392
392
|
return theme.borderRadii.lg;
|
|
393
393
|
}, function (_a) {
|
|
@@ -408,7 +408,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
408
408
|
- To group related content
|
|
409
409
|
*/
|
|
410
410
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
411
|
-
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) {
|
|
412
412
|
var theme = _a.theme;
|
|
413
413
|
return theme.borderRadii.xl;
|
|
414
414
|
}, function (_a) {
|
|
@@ -425,7 +425,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
425
425
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
426
426
|
});
|
|
427
427
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
428
|
-
var templateObject_1$
|
|
428
|
+
var templateObject_1$15, templateObject_2$r;
|
|
429
429
|
|
|
430
430
|
/**
|
|
431
431
|
* Tags let users categorize content using a keyword.
|
|
@@ -640,7 +640,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
640
640
|
})));
|
|
641
641
|
};
|
|
642
642
|
|
|
643
|
-
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) {
|
|
644
644
|
return props.isLight ?
|
|
645
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 ");
|
|
646
646
|
});
|
|
@@ -658,22 +658,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
658
658
|
- To communicate a typing status, use Inline instead
|
|
659
659
|
*/
|
|
660
660
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
661
|
-
var templateObject_1$
|
|
661
|
+
var templateObject_1$14;
|
|
662
662
|
|
|
663
|
-
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) {
|
|
664
664
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
665
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 ");
|
|
666
666
|
});
|
|
667
|
-
var templateObject_1$
|
|
667
|
+
var templateObject_1$13;
|
|
668
668
|
|
|
669
|
-
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) {
|
|
670
670
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
671
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 ");
|
|
672
672
|
});
|
|
673
673
|
CardThumbnail.defaultProps = {
|
|
674
674
|
align: "left"
|
|
675
675
|
};
|
|
676
|
-
var templateObject_1$
|
|
676
|
+
var templateObject_1$12;
|
|
677
677
|
|
|
678
678
|
/**
|
|
679
679
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -685,11 +685,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
685
685
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
686
686
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
687
687
|
|
|
688
|
-
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) {
|
|
689
689
|
var theme = _a.theme;
|
|
690
690
|
return theme.palette.grey[500];
|
|
691
691
|
});
|
|
692
|
-
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) {
|
|
693
693
|
var theme = _a.theme;
|
|
694
694
|
return theme.colors.primaryHue;
|
|
695
695
|
}, function (_a) {
|
|
@@ -699,24 +699,24 @@ var Title$1 = styled__default["default"](LG)(templateObject_2$o || (templateObje
|
|
|
699
699
|
var theme = _a.theme;
|
|
700
700
|
return theme.space.xxs;
|
|
701
701
|
});
|
|
702
|
-
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) {
|
|
703
703
|
var theme = _a.theme;
|
|
704
704
|
return theme.palette.grey[700];
|
|
705
705
|
}, function (_a) {
|
|
706
706
|
var theme = _a.theme;
|
|
707
707
|
return theme.space.xxs;
|
|
708
708
|
});
|
|
709
|
-
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) {
|
|
710
710
|
var theme = _a.theme, align = _a.align;
|
|
711
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 ");
|
|
712
712
|
});
|
|
713
713
|
var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign({}, props)); };
|
|
714
714
|
CardHeader.Label = Label$1;
|
|
715
|
-
CardHeader.Title = Title$
|
|
716
|
-
CardHeader.Text = Description$
|
|
717
|
-
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;
|
|
718
718
|
|
|
719
|
-
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) {
|
|
720
720
|
var theme = _a.theme;
|
|
721
721
|
return theme.space.base * 3;
|
|
722
722
|
}, function (_a) {
|
|
@@ -726,15 +726,15 @@ var Divider = styled__default["default"].div(templateObject_1$_ || (templateObje
|
|
|
726
726
|
var theme = _a.theme;
|
|
727
727
|
return theme.palette.grey["300"];
|
|
728
728
|
});
|
|
729
|
-
var Footer$1 = styled__default["default"].div(templateObject_2$
|
|
730
|
-
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) {
|
|
731
731
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
732
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 ");
|
|
733
733
|
});
|
|
734
734
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$1, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
735
|
-
var templateObject_1$
|
|
735
|
+
var templateObject_1$10, templateObject_2$p, templateObject_3$h;
|
|
736
736
|
|
|
737
|
-
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) {
|
|
738
738
|
var theme = _a.theme;
|
|
739
739
|
return theme.borderRadii.lg;
|
|
740
740
|
}, function (_a) {
|
|
@@ -760,7 +760,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
760
760
|
SpecialCard.Thumb = CardThumbnail;
|
|
761
761
|
SpecialCard.Header = CardHeader;
|
|
762
762
|
SpecialCard.Footer = CardFooter;
|
|
763
|
-
var templateObject_1
|
|
763
|
+
var templateObject_1$$;
|
|
764
764
|
|
|
765
765
|
var CampaignCardSkeleton = function () {
|
|
766
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%" } })] })] }));
|
|
@@ -793,11 +793,11 @@ var getTypeDataIcon = function (type) {
|
|
|
793
793
|
return SvgCampaignFunctional;
|
|
794
794
|
}
|
|
795
795
|
};
|
|
796
|
-
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) {
|
|
797
797
|
var theme = _a.theme;
|
|
798
798
|
return theme.palette.grey["700"];
|
|
799
799
|
});
|
|
800
|
-
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) {
|
|
801
801
|
var theme = _a.theme;
|
|
802
802
|
return theme.space.base * 6;
|
|
803
803
|
}, function (_a) {
|
|
@@ -810,7 +810,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$m || (temp
|
|
|
810
810
|
var theme = _a.theme;
|
|
811
811
|
return theme.palette.white;
|
|
812
812
|
});
|
|
813
|
-
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) {
|
|
814
814
|
var theme = _a.theme;
|
|
815
815
|
return theme.palette.grey["500"];
|
|
816
816
|
});
|
|
@@ -820,9 +820,9 @@ var CampaignCard = function (_a) {
|
|
|
820
820
|
var PillIcon = getTypeDataIcon(type);
|
|
821
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, {})] })] })));
|
|
822
822
|
};
|
|
823
|
-
var templateObject_1$
|
|
823
|
+
var templateObject_1$_, templateObject_2$o, templateObject_3$g;
|
|
824
824
|
|
|
825
|
-
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) {
|
|
826
826
|
var theme = _a.theme;
|
|
827
827
|
return theme.space.base * 6;
|
|
828
828
|
}, function (_a) {
|
|
@@ -839,16 +839,16 @@ var ProductCard = function (props) {
|
|
|
839
839
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
840
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 })) }))] })));
|
|
841
841
|
};
|
|
842
|
-
var templateObject_1$
|
|
842
|
+
var templateObject_1$Z;
|
|
843
843
|
|
|
844
|
-
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) {
|
|
845
845
|
var theme = _a.theme;
|
|
846
846
|
return theme.palette.grey[500];
|
|
847
847
|
}, function (_a) {
|
|
848
848
|
var theme = _a.theme;
|
|
849
849
|
return theme.space.base;
|
|
850
850
|
});
|
|
851
|
-
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) {
|
|
852
852
|
var theme = _a.theme;
|
|
853
853
|
return theme.palette.blue[600];
|
|
854
854
|
}, function (_a) {
|
|
@@ -858,15 +858,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templat
|
|
|
858
858
|
var theme = _a.theme;
|
|
859
859
|
return theme.fontWeights.semibold;
|
|
860
860
|
});
|
|
861
|
-
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) {
|
|
862
862
|
var theme = _a.theme;
|
|
863
863
|
return theme.space.xs;
|
|
864
864
|
}, function (_a) {
|
|
865
865
|
var theme = _a.theme;
|
|
866
866
|
return theme.space.xs;
|
|
867
867
|
});
|
|
868
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
869
|
-
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) {
|
|
870
870
|
var theme = _a.theme;
|
|
871
871
|
return theme.space.base;
|
|
872
872
|
}, function (_a) {
|
|
@@ -876,15 +876,15 @@ var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$4 || (templa
|
|
|
876
876
|
var theme = _a.theme;
|
|
877
877
|
return theme.space.base * 4;
|
|
878
878
|
});
|
|
879
|
-
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) {
|
|
880
880
|
var theme = _a.theme;
|
|
881
881
|
return theme.components.notification.card.padding;
|
|
882
882
|
}, function (_a) {
|
|
883
883
|
var theme = _a.theme;
|
|
884
884
|
return theme.palette.white;
|
|
885
885
|
});
|
|
886
|
-
var HoverMetaContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
887
|
-
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) {
|
|
888
888
|
var isHoverable = _a.isHoverable;
|
|
889
889
|
return isHoverable &&
|
|
890
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 ");
|
|
@@ -893,15 +893,15 @@ var ServiceCard = function (props) {
|
|
|
893
893
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
894
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)); }) })))] })] })));
|
|
895
895
|
};
|
|
896
|
-
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;
|
|
897
897
|
|
|
898
|
-
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"])));
|
|
899
899
|
var InfoCard = function (props) {
|
|
900
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; }) }) })))] })));
|
|
901
901
|
};
|
|
902
|
-
var templateObject_1$
|
|
902
|
+
var templateObject_1$X;
|
|
903
903
|
|
|
904
|
-
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) {
|
|
905
905
|
var theme = _a.theme;
|
|
906
906
|
return theme.space.xl;
|
|
907
907
|
}, function (_a) {
|
|
@@ -912,7 +912,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
912
912
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
913
913
|
*/
|
|
914
914
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
915
|
-
var templateObject_1$
|
|
915
|
+
var templateObject_1$W;
|
|
916
916
|
|
|
917
917
|
/**
|
|
918
918
|
* Use Span to style and format inline text elements.
|
|
@@ -952,8 +952,8 @@ function useWindowSize() {
|
|
|
952
952
|
return size;
|
|
953
953
|
}
|
|
954
954
|
|
|
955
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
956
|
-
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) {
|
|
957
957
|
var status = _a.status, theme = _a.theme;
|
|
958
958
|
switch (status) {
|
|
959
959
|
case "completed":
|
|
@@ -987,9 +987,9 @@ var Counter = function (props) {
|
|
|
987
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() })] })));
|
|
988
988
|
};
|
|
989
989
|
Counter.Avatar = StyledTag.Avatar;
|
|
990
|
-
var templateObject_1$
|
|
990
|
+
var templateObject_1$V, templateObject_2$m;
|
|
991
991
|
|
|
992
|
-
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) {
|
|
993
993
|
var theme = _a.theme;
|
|
994
994
|
return theme.breakpoints.sm;
|
|
995
995
|
});
|
|
@@ -1006,22 +1006,22 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1006
1006
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1007
1007
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1008
1008
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1009
|
-
var templateObject_1$
|
|
1009
|
+
var templateObject_1$U;
|
|
1010
1010
|
|
|
1011
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1012
|
-
var templateObject_1$
|
|
1011
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
1012
|
+
var templateObject_1$T;
|
|
1013
1013
|
|
|
1014
1014
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1015
1015
|
__proto__: null,
|
|
1016
1016
|
Field: Field$1
|
|
1017
1017
|
});
|
|
1018
1018
|
|
|
1019
|
-
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) {
|
|
1020
1020
|
var theme = _a.theme;
|
|
1021
1021
|
return theme.palette.blue[100];
|
|
1022
1022
|
});
|
|
1023
1023
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1024
|
-
var templateObject_1$
|
|
1024
|
+
var templateObject_1$S;
|
|
1025
1025
|
|
|
1026
1026
|
/**
|
|
1027
1027
|
* A Menu is a wrapper for items elements
|
|
@@ -1045,7 +1045,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1045
1045
|
*/
|
|
1046
1046
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1047
1047
|
|
|
1048
|
-
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) {
|
|
1049
1049
|
return props.isPrimary &&
|
|
1050
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 ");
|
|
1051
1051
|
});
|
|
@@ -1062,7 +1062,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1062
1062
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1063
1063
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1064
1064
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1065
|
-
var templateObject_1$
|
|
1065
|
+
var templateObject_1$R;
|
|
1066
1066
|
|
|
1067
1067
|
/**
|
|
1068
1068
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1077,7 +1077,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1077
1077
|
|
|
1078
1078
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1079
1079
|
|
|
1080
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1080
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
1081
1081
|
/**
|
|
1082
1082
|
* A Checkbox lets users select and unselect options from a list.
|
|
1083
1083
|
* <hr>
|
|
@@ -1089,23 +1089,23 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1089
1089
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1090
1090
|
**/
|
|
1091
1091
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1092
|
-
var templateObject_1$
|
|
1092
|
+
var templateObject_1$Q;
|
|
1093
1093
|
|
|
1094
|
-
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([""], [""])));
|
|
1095
1095
|
/**
|
|
1096
1096
|
* A Label is used to specify a title for an input.
|
|
1097
1097
|
* <hr>
|
|
1098
1098
|
**/
|
|
1099
1099
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1100
|
-
var templateObject_1$
|
|
1100
|
+
var templateObject_1$P;
|
|
1101
1101
|
|
|
1102
|
-
var flexCenter = styled.css(templateObject_1$
|
|
1103
|
-
var flexColumnCenter = styled.css(templateObject_2$
|
|
1104
|
-
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) {
|
|
1105
1105
|
var theme = _a.theme;
|
|
1106
1106
|
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1107
1107
|
});
|
|
1108
|
-
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) {
|
|
1109
1109
|
var theme = _a.theme;
|
|
1110
1110
|
return theme.borderRadii.lg;
|
|
1111
1111
|
}, function (_a) {
|
|
@@ -1118,24 +1118,24 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
|
|
|
1118
1118
|
var theme = _a.theme;
|
|
1119
1119
|
return theme.shadows.boxShadow(theme);
|
|
1120
1120
|
});
|
|
1121
|
-
var templateObject_1$
|
|
1121
|
+
var templateObject_1$O, templateObject_2$l, templateObject_3$e, templateObject_4$9;
|
|
1122
1122
|
|
|
1123
|
-
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) {
|
|
1124
1124
|
var theme = _a.theme;
|
|
1125
1125
|
return theme.palette.blue[300];
|
|
1126
1126
|
});
|
|
1127
|
-
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) {
|
|
1128
1128
|
var theme = _a.theme;
|
|
1129
1129
|
return theme.space.base;
|
|
1130
1130
|
});
|
|
1131
|
-
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) {
|
|
1132
1132
|
var theme = _a.theme;
|
|
1133
1133
|
return theme.space.base;
|
|
1134
1134
|
}, function (_a) {
|
|
1135
1135
|
var theme = _a.theme;
|
|
1136
1136
|
return theme.palette.grey[700];
|
|
1137
1137
|
});
|
|
1138
|
-
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) {
|
|
1139
1139
|
var theme = _a.theme;
|
|
1140
1140
|
return theme.space.base;
|
|
1141
1141
|
});
|
|
@@ -1148,14 +1148,14 @@ var CheckboxCard = function (props) {
|
|
|
1148
1148
|
};
|
|
1149
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 })) })) }))] })));
|
|
1150
1150
|
};
|
|
1151
|
-
var templateObject_1$
|
|
1151
|
+
var templateObject_1$N, templateObject_2$k, templateObject_3$d, templateObject_4$8;
|
|
1152
1152
|
|
|
1153
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1153
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1154
1154
|
/**
|
|
1155
1155
|
* A Field is a wrapper for input elements
|
|
1156
1156
|
**/
|
|
1157
1157
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1158
|
-
var templateObject_1$
|
|
1158
|
+
var templateObject_1$M;
|
|
1159
1159
|
|
|
1160
1160
|
var index = /*#__PURE__*/Object.freeze({
|
|
1161
1161
|
__proto__: null,
|
|
@@ -1163,8 +1163,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1163
1163
|
Hint: reactForms.Hint
|
|
1164
1164
|
});
|
|
1165
1165
|
|
|
1166
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1167
|
-
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([""], [""])));
|
|
1168
1168
|
/**
|
|
1169
1169
|
* An Input lets users enter text into a field.
|
|
1170
1170
|
* <hr>
|
|
@@ -1173,9 +1173,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (te
|
|
|
1173
1173
|
* - To enter multiline text, use a Textarea
|
|
1174
1174
|
**/
|
|
1175
1175
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1176
|
-
var templateObject_1$
|
|
1176
|
+
var templateObject_1$L, templateObject_2$j;
|
|
1177
1177
|
|
|
1178
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1178
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1179
1179
|
/**
|
|
1180
1180
|
* Media elements add even more context to an input.
|
|
1181
1181
|
* <hr>
|
|
@@ -1184,9 +1184,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1184
1184
|
* - To enter multiline text, use a Textarea
|
|
1185
1185
|
**/
|
|
1186
1186
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1187
|
-
var templateObject_1$
|
|
1187
|
+
var templateObject_1$K;
|
|
1188
1188
|
|
|
1189
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1189
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1190
1190
|
/**
|
|
1191
1191
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1192
1192
|
* <hr>
|
|
@@ -1198,7 +1198,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$H ||
|
|
|
1198
1198
|
* - To select from a long list of options, use Select instead
|
|
1199
1199
|
**/
|
|
1200
1200
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1201
|
-
var templateObject_1$
|
|
1201
|
+
var templateObject_1$J;
|
|
1202
1202
|
|
|
1203
1203
|
var _path$i;
|
|
1204
1204
|
|
|
@@ -1218,7 +1218,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1218
1218
|
})));
|
|
1219
1219
|
};
|
|
1220
1220
|
|
|
1221
|
-
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) {
|
|
1222
1222
|
var theme = _a.theme;
|
|
1223
1223
|
return theme.space.base;
|
|
1224
1224
|
}, function (_a) {
|
|
@@ -1228,7 +1228,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1
|
|
|
1228
1228
|
var theme = _a.theme;
|
|
1229
1229
|
return theme.fontWeights.medium;
|
|
1230
1230
|
});
|
|
1231
|
-
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) {
|
|
1232
1232
|
var theme = _a.theme;
|
|
1233
1233
|
return theme.space.base * 6;
|
|
1234
1234
|
}, function (_a) {
|
|
@@ -1252,9 +1252,9 @@ var RadioCard = function (_a) {
|
|
|
1252
1252
|
props.onChecked && props.onChecked(props.value);
|
|
1253
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 })) }))] })));
|
|
1254
1254
|
};
|
|
1255
|
-
var templateObject_1$
|
|
1255
|
+
var templateObject_1$I, templateObject_2$i;
|
|
1256
1256
|
|
|
1257
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1257
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1258
1258
|
/**
|
|
1259
1259
|
* A Textarea is a form control for multi-line text.
|
|
1260
1260
|
* <hr>
|
|
@@ -1262,9 +1262,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1262
1262
|
* - To enter multi-line text
|
|
1263
1263
|
**/
|
|
1264
1264
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1265
|
-
var templateObject_1$
|
|
1265
|
+
var templateObject_1$H;
|
|
1266
1266
|
|
|
1267
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1267
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
1268
1268
|
/**
|
|
1269
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.
|
|
1270
1270
|
* <hr>
|
|
@@ -1275,11 +1275,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$E
|
|
|
1275
1275
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1276
1276
|
**/
|
|
1277
1277
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1278
|
-
var templateObject_1$
|
|
1278
|
+
var templateObject_1$G;
|
|
1279
1279
|
|
|
1280
|
-
var StyledCol = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
1281
|
-
var Col = function (props) { return jsxRuntime.jsx(StyledCol, __assign({}, props)); };
|
|
1282
|
-
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;
|
|
1283
1283
|
|
|
1284
1284
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1285
1285
|
|
|
@@ -1342,15 +1342,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1342
1342
|
})));
|
|
1343
1343
|
};
|
|
1344
1344
|
|
|
1345
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1345
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1346
1346
|
var Icon = function (props) {
|
|
1347
1347
|
var type = props.type, size = props.size;
|
|
1348
1348
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1349
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 })] }));
|
|
1350
1350
|
};
|
|
1351
|
-
var templateObject_1$
|
|
1351
|
+
var templateObject_1$E;
|
|
1352
1352
|
|
|
1353
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1353
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1354
1354
|
/**
|
|
1355
1355
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1356
1356
|
* <hr>
|
|
@@ -1362,9 +1362,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1362
1362
|
- When loading page content, use a Skeleton loader instead
|
|
1363
1363
|
*/
|
|
1364
1364
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1365
|
-
var templateObject_1$
|
|
1365
|
+
var templateObject_1$D;
|
|
1366
1366
|
|
|
1367
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1367
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1368
1368
|
/**
|
|
1369
1369
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1370
1370
|
* <hr>
|
|
@@ -1373,9 +1373,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1373
1373
|
- To provide a quick way to navigate to ancestor pages
|
|
1374
1374
|
*/
|
|
1375
1375
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1376
|
-
var templateObject_1$
|
|
1376
|
+
var templateObject_1$C;
|
|
1377
1377
|
|
|
1378
|
-
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) {
|
|
1379
1379
|
var theme = _a.theme;
|
|
1380
1380
|
return theme.palette.white;
|
|
1381
1381
|
});
|
|
@@ -1383,7 +1383,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$z ||
|
|
|
1383
1383
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1384
1384
|
*/
|
|
1385
1385
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1386
|
-
var templateObject_1$
|
|
1386
|
+
var templateObject_1$B;
|
|
1387
1387
|
|
|
1388
1388
|
/**
|
|
1389
1389
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1407,23 +1407,23 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1407
1407
|
})));
|
|
1408
1408
|
};
|
|
1409
1409
|
|
|
1410
|
-
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) {
|
|
1411
1411
|
var theme = _a.theme;
|
|
1412
1412
|
return theme.fonts.system;
|
|
1413
1413
|
});
|
|
1414
|
-
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) {
|
|
1415
1415
|
var theme = _a.theme;
|
|
1416
1416
|
return theme.fonts.system;
|
|
1417
1417
|
});
|
|
1418
1418
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1419
|
-
var templateObject_1$
|
|
1419
|
+
var templateObject_1$A, templateObject_2$h;
|
|
1420
1420
|
|
|
1421
|
-
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) {
|
|
1422
1422
|
var theme = _a.theme;
|
|
1423
1423
|
return theme.fonts.system;
|
|
1424
1424
|
});
|
|
1425
1425
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1426
|
-
var templateObject_1$
|
|
1426
|
+
var templateObject_1$z;
|
|
1427
1427
|
|
|
1428
1428
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1429
1429
|
|
|
@@ -1472,7 +1472,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1472
1472
|
})));
|
|
1473
1473
|
};
|
|
1474
1474
|
|
|
1475
|
-
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) {
|
|
1476
1476
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1477
1477
|
return isCompact &&
|
|
1478
1478
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1488,13 +1488,13 @@ var WorkspacesDropdown = function (props) {
|
|
|
1488
1488
|
? selectedWorkspace.company + "'s workspace"
|
|
1489
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 }))); })] })] })));
|
|
1490
1490
|
};
|
|
1491
|
-
var templateObject_1$
|
|
1491
|
+
var templateObject_1$y;
|
|
1492
1492
|
|
|
1493
|
-
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) {
|
|
1494
1494
|
var theme = _a.theme;
|
|
1495
1495
|
return theme.breakpoints.md;
|
|
1496
1496
|
});
|
|
1497
|
-
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) {
|
|
1498
1498
|
var theme = _a.theme;
|
|
1499
1499
|
return theme.palette.blue["600"];
|
|
1500
1500
|
}, function (_a) {
|
|
@@ -1504,7 +1504,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1504
1504
|
var theme = _a.theme;
|
|
1505
1505
|
return theme.breakpoints.md;
|
|
1506
1506
|
});
|
|
1507
|
-
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) {
|
|
1508
1508
|
var theme = _a.theme;
|
|
1509
1509
|
return theme.palette.blue["600"];
|
|
1510
1510
|
}, function (_a) {
|
|
@@ -1514,7 +1514,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
|
|
|
1514
1514
|
var theme = _a.theme;
|
|
1515
1515
|
return theme.breakpoints.md;
|
|
1516
1516
|
});
|
|
1517
|
-
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) {
|
|
1518
1518
|
var theme = _a.theme;
|
|
1519
1519
|
return theme.palette.blue["600"];
|
|
1520
1520
|
}, function (_a) {
|
|
@@ -1524,9 +1524,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1524
1524
|
var BrandItem = function (props) {
|
|
1525
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 }) }))) }))] }));
|
|
1526
1526
|
};
|
|
1527
|
-
var templateObject_1$
|
|
1527
|
+
var templateObject_1$x, templateObject_2$g, templateObject_3$c, templateObject_4$7;
|
|
1528
1528
|
|
|
1529
|
-
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);
|
|
1530
1530
|
/**
|
|
1531
1531
|
* An Header is a visual way to display general information.
|
|
1532
1532
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1535,13 +1535,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1535
1535
|
Header.HeaderItem = HeaderItem;
|
|
1536
1536
|
Header.HeaderItemText = HeaderItemText;
|
|
1537
1537
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1538
|
-
var templateObject_1$
|
|
1538
|
+
var templateObject_1$w;
|
|
1539
1539
|
|
|
1540
1540
|
var HeaderSkeleton = function () {
|
|
1541
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%" } }) }) }) }))] })));
|
|
1542
1542
|
};
|
|
1543
1543
|
|
|
1544
|
-
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) {
|
|
1545
1545
|
var theme = _a.theme;
|
|
1546
1546
|
return theme.breakpoints.sm;
|
|
1547
1547
|
});
|
|
@@ -1553,9 +1553,9 @@ var AppHeader = function (_a) {
|
|
|
1553
1553
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1554
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, {}) }))] }) }) }))] })));
|
|
1555
1555
|
};
|
|
1556
|
-
var templateObject_1$
|
|
1556
|
+
var templateObject_1$v;
|
|
1557
1557
|
|
|
1558
|
-
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) {
|
|
1559
1559
|
var theme = _a.theme;
|
|
1560
1560
|
return theme.borders.sm;
|
|
1561
1561
|
}, function (_a) {
|
|
@@ -1582,10 +1582,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$s || (t
|
|
|
1582
1582
|
- To give a consistent dashboard and navigation experience
|
|
1583
1583
|
*/
|
|
1584
1584
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1585
|
-
var templateObject_1$
|
|
1585
|
+
var templateObject_1$u;
|
|
1586
1586
|
|
|
1587
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1588
|
-
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) {
|
|
1589
1589
|
var theme = _a.theme;
|
|
1590
1590
|
return theme.fonts.system;
|
|
1591
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) {
|
|
@@ -1596,11 +1596,11 @@ var NavItem = function (props) {
|
|
|
1596
1596
|
// const { isExpanded } = props;
|
|
1597
1597
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1598
1598
|
};
|
|
1599
|
-
var templateObject_1$
|
|
1599
|
+
var templateObject_1$t, templateObject_2$f;
|
|
1600
1600
|
|
|
1601
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1601
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
|
|
1602
1602
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1603
|
-
var templateObject_1$
|
|
1603
|
+
var templateObject_1$s;
|
|
1604
1604
|
|
|
1605
1605
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1606
1606
|
|
|
@@ -1638,7 +1638,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
1638
1638
|
})));
|
|
1639
1639
|
};
|
|
1640
1640
|
|
|
1641
|
-
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) {
|
|
1642
1642
|
var theme = _a.theme;
|
|
1643
1643
|
return theme.space.base * 6;
|
|
1644
1644
|
}, function (_a) {
|
|
@@ -1663,18 +1663,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$p ||
|
|
|
1663
1663
|
var NavToggle = function (props) {
|
|
1664
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%" } })) })));
|
|
1665
1665
|
};
|
|
1666
|
-
var templateObject_1$
|
|
1666
|
+
var templateObject_1$r;
|
|
1667
1667
|
|
|
1668
|
-
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;"; });
|
|
1669
1669
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1670
|
-
var templateObject_1$
|
|
1670
|
+
var templateObject_1$q;
|
|
1671
1671
|
|
|
1672
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1673
|
-
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"])));
|
|
1674
1674
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1675
1675
|
NavItemProject.Title = NavItemText;
|
|
1676
1676
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1677
|
-
var templateObject_1$
|
|
1677
|
+
var templateObject_1$p, templateObject_2$e;
|
|
1678
1678
|
|
|
1679
1679
|
var _path$a;
|
|
1680
1680
|
|
|
@@ -1843,7 +1843,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
1843
1843
|
})))));
|
|
1844
1844
|
};
|
|
1845
1845
|
|
|
1846
|
-
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) {
|
|
1847
1847
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
1848
1848
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
1849
1849
|
});
|
|
@@ -1851,13 +1851,13 @@ var LoadingSidebar = function (props) {
|
|
|
1851
1851
|
var isExpanded = props.isExpanded;
|
|
1852
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" })] }))] })));
|
|
1853
1853
|
};
|
|
1854
|
-
var templateObject_1$
|
|
1854
|
+
var templateObject_1$o;
|
|
1855
1855
|
|
|
1856
1856
|
var FEATURE_FLAG_CATALOG = 'catalog-pages';
|
|
1857
1857
|
|
|
1858
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
1859
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_2$
|
|
1860
|
-
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) {
|
|
1861
1861
|
var isExpanded = _a.isExpanded;
|
|
1862
1862
|
return isExpanded &&
|
|
1863
1863
|
"\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
|
|
@@ -1894,9 +1894,9 @@ var Sidebar = function (props) {
|
|
|
1894
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 &&
|
|
1895
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" })] }))] })));
|
|
1896
1896
|
};
|
|
1897
|
-
var templateObject_1$
|
|
1897
|
+
var templateObject_1$n, templateObject_2$d, templateObject_3$b;
|
|
1898
1898
|
|
|
1899
|
-
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) {
|
|
1900
1900
|
var theme = _a.theme;
|
|
1901
1901
|
return theme.breakpoints.sm;
|
|
1902
1902
|
}, function (_a) {
|
|
@@ -1906,22 +1906,22 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$k ||
|
|
|
1906
1906
|
/**
|
|
1907
1907
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
1908
1908
|
*/
|
|
1909
|
-
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1910
|
-
var templateObject_1$
|
|
1909
|
+
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1910
|
+
var templateObject_1$m;
|
|
1911
1911
|
|
|
1912
|
-
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]);
|
|
1913
1913
|
var PageLoader = function () {
|
|
1914
1914
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
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, { 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: "" }) }))] })] })] })] }) })));
|
|
1916
1916
|
};
|
|
1917
|
-
var templateObject_1$
|
|
1917
|
+
var templateObject_1$l;
|
|
1918
1918
|
|
|
1919
1919
|
/**
|
|
1920
1920
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1921
1921
|
*/
|
|
1922
|
-
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1922
|
+
var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1923
1923
|
|
|
1924
|
-
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);
|
|
1925
1925
|
/**
|
|
1926
1926
|
* Login Form
|
|
1927
1927
|
* <hr>
|
|
@@ -1931,7 +1931,7 @@ var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$i ||
|
|
|
1931
1931
|
var LoginForm = function (props) {
|
|
1932
1932
|
var width = useWindowSize().width;
|
|
1933
1933
|
var breakpointMd = parseInt(theme.breakpoints.md, 10);
|
|
1934
|
-
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: {
|
|
1935
1935
|
textAlign: "center",
|
|
1936
1936
|
marginTop: theme.space.sm,
|
|
1937
1937
|
marginBottom: theme.space.lg,
|
|
@@ -1952,9 +1952,9 @@ var LoginForm = function (props) {
|
|
|
1952
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 })) })))] })));
|
|
1953
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"] })))] }));
|
|
1954
1954
|
};
|
|
1955
|
-
var templateObject_1$
|
|
1955
|
+
var templateObject_1$k;
|
|
1956
1956
|
|
|
1957
|
-
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) {
|
|
1958
1958
|
var theme = _a.theme;
|
|
1959
1959
|
return theme.palette.grey["800"];
|
|
1960
1960
|
});
|
|
@@ -1963,35 +1963,35 @@ var FooterItem = reactModals.FooterItem;
|
|
|
1963
1963
|
Modal.Header = reactModals.Header;
|
|
1964
1964
|
Modal.Body = ugModalBody;
|
|
1965
1965
|
Modal.Footer = reactModals.Footer;
|
|
1966
|
-
var templateObject_1$
|
|
1966
|
+
var templateObject_1$j;
|
|
1967
1967
|
|
|
1968
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
1969
|
-
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) {
|
|
1970
1970
|
var theme = _a.theme;
|
|
1971
1971
|
return theme.space.base * 3;
|
|
1972
1972
|
}, function (_a) {
|
|
1973
1973
|
var theme = _a.theme;
|
|
1974
1974
|
return theme.space.base * 6;
|
|
1975
1975
|
});
|
|
1976
|
-
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) {
|
|
1977
1977
|
var theme = _a.theme;
|
|
1978
1978
|
return theme.palette.grey["100"];
|
|
1979
1979
|
});
|
|
1980
|
-
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) {
|
|
1981
1981
|
var theme = _a.theme;
|
|
1982
1982
|
return theme.space.base * 4;
|
|
1983
1983
|
}, function (_a) {
|
|
1984
1984
|
var theme = _a.theme;
|
|
1985
1985
|
return theme.space.base * 6;
|
|
1986
1986
|
});
|
|
1987
|
-
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"])));
|
|
1988
1988
|
var ModalFullScreen = function (props) { return jsxRuntime.jsx(StyledModal$1, __assign({}, props)); };
|
|
1989
1989
|
ModalFullScreen.Header = StyledHeader;
|
|
1990
1990
|
ModalFullScreen.Body = StyledBody$4;
|
|
1991
1991
|
ModalFullScreen.Footer = StyledFooter;
|
|
1992
1992
|
ModalFullScreen.Close = StyledModalClose;
|
|
1993
1993
|
ModalFullScreen.FooterItem = FooterItem;
|
|
1994
|
-
var templateObject_1$
|
|
1994
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4;
|
|
1995
1995
|
|
|
1996
1996
|
/**
|
|
1997
1997
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2012,7 +2012,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2012
2012
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2013
2013
|
var useToast = reactNotifications.useToast;
|
|
2014
2014
|
|
|
2015
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2015
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject([""], [""])));
|
|
2016
2016
|
/**
|
|
2017
2017
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2018
2018
|
|
|
@@ -2022,7 +2022,71 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2022
2022
|
*/
|
|
2023
2023
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2024
2024
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2025
|
-
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 }))] }) })), 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;
|
|
2026
2090
|
|
|
2027
2091
|
var _path$5;
|
|
2028
2092
|
|
|
@@ -2061,15 +2125,15 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2061
2125
|
})));
|
|
2062
2126
|
};
|
|
2063
2127
|
|
|
2064
|
-
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; });
|
|
2065
2129
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2066
|
-
var templateObject_1$
|
|
2130
|
+
var templateObject_1$d;
|
|
2067
2131
|
|
|
2068
2132
|
/**
|
|
2069
2133
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2070
2134
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2071
2135
|
**/
|
|
2072
|
-
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) {
|
|
2073
2137
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2074
2138
|
}, function (props) {
|
|
2075
2139
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -2088,7 +2152,7 @@ var MenuItem = function (_a) {
|
|
|
2088
2152
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2089
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));
|
|
2090
2154
|
};
|
|
2091
|
-
var templateObject_1$
|
|
2155
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2092
2156
|
|
|
2093
2157
|
var _path$3;
|
|
2094
2158
|
|
|
@@ -2145,15 +2209,8 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2145
2209
|
})));
|
|
2146
2210
|
};
|
|
2147
2211
|
|
|
2148
|
-
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 }"); });
|
|
2149
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] }))); };
|
|
2150
|
-
var templateObject_1$c;
|
|
2151
|
-
|
|
2152
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
|
|
2153
|
-
/**
|
|
2154
|
-
* Use Paragraph to render blocks of text with Garden styling.
|
|
2155
|
-
*/
|
|
2156
|
-
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2157
2214
|
var templateObject_1$b;
|
|
2158
2215
|
|
|
2159
2216
|
var getInitials = function (name) {
|
|
@@ -2560,7 +2617,7 @@ exports.Label = Label;
|
|
|
2560
2617
|
exports.LoginForm = LoginForm;
|
|
2561
2618
|
exports.Logo = Logo;
|
|
2562
2619
|
exports.MD = MD;
|
|
2563
|
-
exports.Main = Main;
|
|
2620
|
+
exports.Main = Main$1;
|
|
2564
2621
|
exports.MediaBody = MediaBody;
|
|
2565
2622
|
exports.MediaFigure = MediaFigure;
|
|
2566
2623
|
exports.MediaInput = MediaInput;
|
|
@@ -2581,6 +2638,7 @@ exports.NavToggle = NavToggle;
|
|
|
2581
2638
|
exports.NextItem = NextItem;
|
|
2582
2639
|
exports.Notification = Notification;
|
|
2583
2640
|
exports.OrderedList = OrderedList;
|
|
2641
|
+
exports.PageHeader = PageHeader;
|
|
2584
2642
|
exports.PageLoader = PageLoader;
|
|
2585
2643
|
exports.Pagination = Pagination;
|
|
2586
2644
|
exports.Paragraph = Paragraph;
|
|
@@ -2610,7 +2668,7 @@ exports.Tag = Tag;
|
|
|
2610
2668
|
exports.Textarea = Textarea;
|
|
2611
2669
|
exports.Tiles = Tiles;
|
|
2612
2670
|
exports.Timeline = Timeline;
|
|
2613
|
-
exports.Title = Title;
|
|
2671
|
+
exports.Title = Title$1;
|
|
2614
2672
|
exports.ToastProvider = ToastProvider;
|
|
2615
2673
|
exports.Toggle = Toggle;
|
|
2616
2674
|
exports.Trigger = Trigger;
|