@appquality/unguess-design-system 2.12.39 → 2.12.41
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 +33 -0
- package/build/index.js +412 -294
- package/build/stories/charts/Legend.d.ts +6 -0
- package/build/stories/charts/_types.d.ts +2 -1
- package/build/stories/charts/pie/_types.d.ts +13 -4
- package/build/stories/charts/pie/index.d.ts +1 -1
- package/build/stories/charts/pie/index.stories.d.ts +2 -1
- package/build/stories/charts/sunburst/_types.d.ts +7 -1
- package/build/stories/charts/sunburst/getChildrenValue.d.ts +3 -0
- package/build/stories/charts/sunburst/index.d.ts +1 -1
- package/build/stories/charts/sunburst/index.stories.d.ts +2 -1
- package/build/stories/tabs/_types.d.ts +17 -10
- package/build/stories/tabs/index.d.ts +4 -8
- package/build/stories/tabs/index.stories.d.ts +12 -7
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -36,7 +36,6 @@ var formik = require('formik');
|
|
|
36
36
|
var reactPagination = require('@zendeskgarden/react-pagination');
|
|
37
37
|
var reactTables = require('@zendeskgarden/react-tables');
|
|
38
38
|
var reactSpring = require('react-spring');
|
|
39
|
-
var reactTabs = require('@zendeskgarden/react-tabs');
|
|
40
39
|
var reactTooltips = require('@zendeskgarden/react-tooltips');
|
|
41
40
|
|
|
42
41
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -62,6 +61,7 @@ function _interopNamespace(e) {
|
|
|
62
61
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
63
62
|
var UAParser__default = /*#__PURE__*/_interopDefaultLegacy(UAParser);
|
|
64
63
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
64
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
65
65
|
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
|
|
66
66
|
var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
|
|
67
67
|
var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
|
|
@@ -266,10 +266,10 @@ var isMac = function () {
|
|
|
266
266
|
var os = parser.getOS().name;
|
|
267
267
|
return os && /Mac OS|iOS/.test(os);
|
|
268
268
|
};
|
|
269
|
-
styled.css(templateObject_1$
|
|
270
|
-
var sidebarNavItemExpanded = styled.css(templateObject_2$
|
|
271
|
-
var sidebarNavItemHidden = styled.css(templateObject_3$
|
|
272
|
-
var templateObject_1$
|
|
269
|
+
styled.css(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n transition: opacity 0.2s ease;\n"], ["\n transition: opacity 0.2s ease;\n"])));
|
|
270
|
+
var sidebarNavItemExpanded = styled.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n visibility: visible;\n opacity: 1;\n // transition: opacity 0.2s ease;\n"], ["\n visibility: visible;\n opacity: 1;\n // transition: opacity 0.2s ease;\n"])));
|
|
271
|
+
var sidebarNavItemHidden = styled.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"], ["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"])));
|
|
272
|
+
var templateObject_1$1q, templateObject_2$A, templateObject_3$n;
|
|
273
273
|
|
|
274
274
|
var gradients = {
|
|
275
275
|
horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
|
|
@@ -290,8 +290,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
290
290
|
|
|
291
291
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
292
292
|
|
|
293
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
294
|
-
var templateObject_1$
|
|
293
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$1p || (templateObject_1$1p = __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);
|
|
294
|
+
var templateObject_1$1p;
|
|
295
295
|
|
|
296
296
|
/**
|
|
297
297
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -307,14 +307,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
307
307
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
308
308
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
309
309
|
|
|
310
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
310
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1o || (templateObject_1$1o = __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) {
|
|
311
311
|
var theme = _a.theme;
|
|
312
312
|
return theme.palette.grey[700];
|
|
313
313
|
}, function (_a) {
|
|
314
314
|
var theme = _a.theme;
|
|
315
315
|
return theme.fontSizes.sm;
|
|
316
316
|
});
|
|
317
|
-
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$
|
|
317
|
+
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (_a) {
|
|
318
318
|
var theme = _a.theme;
|
|
319
319
|
return theme.fontSizes.md;
|
|
320
320
|
});
|
|
@@ -328,9 +328,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
328
328
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
329
329
|
Alert.Title = UgAlertTitle;
|
|
330
330
|
Alert.Close = reactNotifications.Close;
|
|
331
|
-
var templateObject_1$
|
|
331
|
+
var templateObject_1$1o, templateObject_2$z;
|
|
332
332
|
|
|
333
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
333
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
334
334
|
return props.avatarType &&
|
|
335
335
|
props.avatarType !== "image" &&
|
|
336
336
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -354,7 +354,7 @@ var Avatar = function (props) {
|
|
|
354
354
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
355
355
|
};
|
|
356
356
|
Avatar.Text = UgAvatar.Text;
|
|
357
|
-
var templateObject_1$
|
|
357
|
+
var templateObject_1$1n;
|
|
358
358
|
|
|
359
359
|
/**
|
|
360
360
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -385,7 +385,7 @@ var getThemeStyle = function (props) {
|
|
|
385
385
|
}
|
|
386
386
|
return theme;
|
|
387
387
|
};
|
|
388
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
388
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject([""], [""])));
|
|
389
389
|
/**
|
|
390
390
|
* Buttons let users take action quickly.
|
|
391
391
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -404,7 +404,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
|
|
|
404
404
|
var Button = ButtonComponent;
|
|
405
405
|
Button.StartIcon = UgButton.StartIcon;
|
|
406
406
|
Button.EndIcon = UgButton.EndIcon;
|
|
407
|
-
var templateObject_1$
|
|
407
|
+
var templateObject_1$1m;
|
|
408
408
|
|
|
409
409
|
/**
|
|
410
410
|
A Button group lets users make a selection from a set of options.
|
|
@@ -434,7 +434,7 @@ Used for this:
|
|
|
434
434
|
**/
|
|
435
435
|
var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
|
|
436
436
|
|
|
437
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
437
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n cursor: pointer;\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n cursor: pointer;\n\n ", "\n"])), function (_a) {
|
|
438
438
|
var theme = _a.theme;
|
|
439
439
|
return theme.borderRadii.lg;
|
|
440
440
|
}, function (_a) {
|
|
@@ -455,7 +455,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
455
455
|
- To group related content
|
|
456
456
|
*/
|
|
457
457
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
458
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$
|
|
458
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n cursor: default;\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n cursor: default;\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
459
459
|
var theme = _a.theme;
|
|
460
460
|
return theme.borderRadii.xl;
|
|
461
461
|
}, function (_a) {
|
|
@@ -472,7 +472,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
472
472
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
473
473
|
});
|
|
474
474
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
475
|
-
var templateObject_1$
|
|
475
|
+
var templateObject_1$1l, templateObject_2$y;
|
|
476
476
|
|
|
477
477
|
/**
|
|
478
478
|
* Tags let users categorize content using a keyword.
|
|
@@ -677,7 +677,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
677
677
|
})));
|
|
678
678
|
};
|
|
679
679
|
|
|
680
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
680
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
681
681
|
return props.isLight ?
|
|
682
682
|
"\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 ");
|
|
683
683
|
});
|
|
@@ -695,22 +695,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
695
695
|
- To communicate a typing status, use Inline instead
|
|
696
696
|
*/
|
|
697
697
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
698
|
-
var templateObject_1$
|
|
698
|
+
var templateObject_1$1k;
|
|
699
699
|
|
|
700
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
700
|
+
var CardMeta = styled__default["default"].div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
701
701
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
702
702
|
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 ");
|
|
703
703
|
});
|
|
704
|
-
var templateObject_1$
|
|
704
|
+
var templateObject_1$1j;
|
|
705
705
|
|
|
706
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
706
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
707
707
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
708
708
|
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 ");
|
|
709
709
|
});
|
|
710
710
|
CardThumbnail.defaultProps = {
|
|
711
711
|
align: "left"
|
|
712
712
|
};
|
|
713
|
-
var templateObject_1$
|
|
713
|
+
var templateObject_1$1i;
|
|
714
714
|
|
|
715
715
|
/**
|
|
716
716
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -722,11 +722,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
722
722
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
723
723
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
724
724
|
|
|
725
|
-
var Label$2 = styled__default["default"](SM)(templateObject_1$
|
|
725
|
+
var Label$2 = styled__default["default"](SM)(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
726
726
|
var theme = _a.theme;
|
|
727
727
|
return theme.palette.grey[500];
|
|
728
728
|
});
|
|
729
|
-
var Title$2 = styled__default["default"](LG)(templateObject_2$
|
|
729
|
+
var Title$2 = styled__default["default"](LG)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
730
730
|
var theme = _a.theme;
|
|
731
731
|
return theme.colors.primaryHue;
|
|
732
732
|
}, function (_a) {
|
|
@@ -736,14 +736,14 @@ var Title$2 = styled__default["default"](LG)(templateObject_2$v || (templateObje
|
|
|
736
736
|
var theme = _a.theme;
|
|
737
737
|
return theme.space.xxs;
|
|
738
738
|
});
|
|
739
|
-
var Description$2 = styled__default["default"](MD)(templateObject_3$
|
|
739
|
+
var Description$2 = styled__default["default"](MD)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
740
740
|
var theme = _a.theme;
|
|
741
741
|
return theme.palette.grey[700];
|
|
742
742
|
}, function (_a) {
|
|
743
743
|
var theme = _a.theme;
|
|
744
744
|
return theme.space.xxs;
|
|
745
745
|
});
|
|
746
|
-
var Container$2 = styled__default["default"].div(templateObject_4$
|
|
746
|
+
var Container$2 = styled__default["default"].div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
747
747
|
var theme = _a.theme, align = _a.align;
|
|
748
748
|
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 ");
|
|
749
749
|
});
|
|
@@ -751,9 +751,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
751
751
|
CardHeader.Label = Label$2;
|
|
752
752
|
CardHeader.Title = Title$2;
|
|
753
753
|
CardHeader.Text = Description$2;
|
|
754
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$1h, templateObject_2$x, templateObject_3$m, templateObject_4$g;
|
|
755
755
|
|
|
756
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
756
|
+
var Divider = styled__default["default"].div(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
757
757
|
var theme = _a.theme;
|
|
758
758
|
return theme.space.base * 3;
|
|
759
759
|
}, function (_a) {
|
|
@@ -763,15 +763,15 @@ var Divider = styled__default["default"].div(templateObject_1$1e || (templateObj
|
|
|
763
763
|
var theme = _a.theme;
|
|
764
764
|
return theme.palette.grey["300"];
|
|
765
765
|
});
|
|
766
|
-
var Footer$2 = styled__default["default"].div(templateObject_2$
|
|
767
|
-
var Container$1 = styled__default["default"].div(templateObject_3$
|
|
766
|
+
var Footer$2 = styled__default["default"].div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
767
|
+
var Container$1 = styled__default["default"].div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
768
768
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
769
769
|
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 ");
|
|
770
770
|
});
|
|
771
771
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
772
|
-
var templateObject_1$
|
|
772
|
+
var templateObject_1$1g, templateObject_2$w, templateObject_3$l;
|
|
773
773
|
|
|
774
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
774
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n\n ", "\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
775
775
|
var theme = _a.theme;
|
|
776
776
|
return theme.borderRadii.lg;
|
|
777
777
|
}, function (_a) {
|
|
@@ -801,7 +801,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
801
801
|
SpecialCard.Thumb = CardThumbnail;
|
|
802
802
|
SpecialCard.Header = CardHeader;
|
|
803
803
|
SpecialCard.Footer = CardFooter;
|
|
804
|
-
var templateObject_1$
|
|
804
|
+
var templateObject_1$1f;
|
|
805
805
|
|
|
806
806
|
var CampaignCardSkeleton = function () {
|
|
807
807
|
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%" } })] })] }));
|
|
@@ -834,11 +834,11 @@ var getTypeDataIcon = function (type) {
|
|
|
834
834
|
return SvgCampaignFunctional;
|
|
835
835
|
}
|
|
836
836
|
};
|
|
837
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
837
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
838
838
|
var theme = _a.theme;
|
|
839
839
|
return theme.palette.grey["700"];
|
|
840
840
|
});
|
|
841
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$
|
|
841
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$v || (templateObject_2$v = __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) {
|
|
842
842
|
var theme = _a.theme;
|
|
843
843
|
return theme.space.base * 6;
|
|
844
844
|
}, function (_a) {
|
|
@@ -851,7 +851,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$t || (temp
|
|
|
851
851
|
var theme = _a.theme;
|
|
852
852
|
return theme.palette.white;
|
|
853
853
|
});
|
|
854
|
-
var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$
|
|
854
|
+
var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
855
855
|
var theme = _a.theme;
|
|
856
856
|
return theme.palette.grey["500"];
|
|
857
857
|
});
|
|
@@ -861,9 +861,9 @@ var CampaignCard = function (_a) {
|
|
|
861
861
|
var PillIcon = getTypeDataIcon(type);
|
|
862
862
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { 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, {})] })] })));
|
|
863
863
|
};
|
|
864
|
-
var templateObject_1$
|
|
864
|
+
var templateObject_1$1e, templateObject_2$v, templateObject_3$k;
|
|
865
865
|
|
|
866
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
866
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
867
867
|
var theme = _a.theme;
|
|
868
868
|
return theme.space.base * 6;
|
|
869
869
|
}, function (_a) {
|
|
@@ -880,16 +880,16 @@ var ProductCard = function (props) {
|
|
|
880
880
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
881
881
|
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 })) }))] })));
|
|
882
882
|
};
|
|
883
|
-
var templateObject_1$
|
|
883
|
+
var templateObject_1$1d;
|
|
884
884
|
|
|
885
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
885
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
886
886
|
var theme = _a.theme;
|
|
887
887
|
return theme.palette.grey[500];
|
|
888
888
|
}, function (_a) {
|
|
889
889
|
var theme = _a.theme;
|
|
890
890
|
return theme.space.base;
|
|
891
891
|
});
|
|
892
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$
|
|
892
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
893
893
|
var theme = _a.theme;
|
|
894
894
|
return theme.palette.blue[600];
|
|
895
895
|
}, function (_a) {
|
|
@@ -899,15 +899,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$s || (templat
|
|
|
899
899
|
var theme = _a.theme;
|
|
900
900
|
return theme.fontWeights.semibold;
|
|
901
901
|
});
|
|
902
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
902
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
903
903
|
var theme = _a.theme;
|
|
904
904
|
return theme.space.xs;
|
|
905
905
|
}, function (_a) {
|
|
906
906
|
var theme = _a.theme;
|
|
907
907
|
return theme.space.xs;
|
|
908
908
|
});
|
|
909
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
910
|
-
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$
|
|
909
|
+
var CardContent = styled__default["default"].div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
910
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$7 || (templateObject_5$7 = __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) {
|
|
911
911
|
var theme = _a.theme;
|
|
912
912
|
return theme.space.base;
|
|
913
913
|
}, function (_a) {
|
|
@@ -934,13 +934,13 @@ var ServiceCard = function (props) {
|
|
|
934
934
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
935
935
|
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)); }) })))] })] })));
|
|
936
936
|
};
|
|
937
|
-
var templateObject_1$
|
|
937
|
+
var templateObject_1$1c, templateObject_2$u, templateObject_3$j, templateObject_4$f, templateObject_5$7, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
938
938
|
|
|
939
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
939
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
940
940
|
var InfoCard = function (props) {
|
|
941
941
|
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; }) }) })))] })));
|
|
942
942
|
};
|
|
943
|
-
var templateObject_1$
|
|
943
|
+
var templateObject_1$1b;
|
|
944
944
|
|
|
945
945
|
var DEFAULT_CHARTS_THEME = {
|
|
946
946
|
background: theme.palette.white,
|
|
@@ -1132,14 +1132,14 @@ var CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
|
|
|
1132
1132
|
CHARTS_COLOR_PALETTE.mattone, // Mattone 900
|
|
1133
1133
|
];
|
|
1134
1134
|
|
|
1135
|
-
var ChartContainer = styled__default["default"].div(templateObject_1$
|
|
1135
|
+
var ChartContainer = styled__default["default"].div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n"], ["\n height: ", ";\n width: ", ";\n"])), function (_a) {
|
|
1136
1136
|
var height = _a.height;
|
|
1137
1137
|
return height || "300px";
|
|
1138
1138
|
}, function (_a) {
|
|
1139
1139
|
var width = _a.width;
|
|
1140
1140
|
return width || "100%";
|
|
1141
1141
|
});
|
|
1142
|
-
var templateObject_1$
|
|
1142
|
+
var templateObject_1$1a;
|
|
1143
1143
|
|
|
1144
1144
|
var CustomBulletChartMarkers = function (_a) {
|
|
1145
1145
|
var x = _a.x, y = _a.y, size = _a.size, _b = _a.animatedProps, color = _b.color, transform = _b.transform;
|
|
@@ -1156,7 +1156,7 @@ var CustomTooltip = function (_a) {
|
|
|
1156
1156
|
return (jsxRuntime.jsx(tooltip.BasicTooltip, { id: v1 ? (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx("strong", { children: v0 }), "-", jsxRuntime.jsx("strong", { children: v1 }), "%"] })) : (jsxRuntime.jsx("strong", { children: v0 })), enableChip: true, color: color }));
|
|
1157
1157
|
};
|
|
1158
1158
|
|
|
1159
|
-
var UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$
|
|
1159
|
+
var UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
1160
1160
|
var BulletChart = function (_a) {
|
|
1161
1161
|
var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values;
|
|
1162
1162
|
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
|
|
@@ -1172,7 +1172,7 @@ var BulletChart = function (_a) {
|
|
|
1172
1172
|
return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
|
|
1173
1173
|
}, tooltip: CustomTooltip, rangeColors: CHARTS_COLOR_PALETTE.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })));
|
|
1174
1174
|
};
|
|
1175
|
-
var templateObject_1$
|
|
1175
|
+
var templateObject_1$19;
|
|
1176
1176
|
|
|
1177
1177
|
var CenteredItem = function (_a) {
|
|
1178
1178
|
var centerX = _a.centerX, centerY = _a.centerY, theme = _a.theme, radius = _a.radius, label = _a.label, value = _a.value, fontSizeMultiplier = _a.fontSizeMultiplier;
|
|
@@ -1190,22 +1190,77 @@ var CenteredItem = function (_a) {
|
|
|
1190
1190
|
} }, { children: value })) })))] }));
|
|
1191
1191
|
};
|
|
1192
1192
|
|
|
1193
|
+
var StyledEllipsis$1 = styled__default["default"](Ellipsis)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n max-width: 100%;\n"], ["\n max-width: 100%;\n"])));
|
|
1194
|
+
var LegendColoredSquare = styled__default["default"].div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n background: ", ";\n width: ", "px;\n height: ", "px;\n border-radius: ", ";\n margin-right: ", "px;\n"], ["\n background: ", ";\n width: ", "px;\n height: ", "px;\n border-radius: ", ";\n margin-right: ", "px;\n"])), function (_a) {
|
|
1195
|
+
var color = _a.color;
|
|
1196
|
+
return color;
|
|
1197
|
+
}, function (_a) {
|
|
1198
|
+
var size = _a.size;
|
|
1199
|
+
return size;
|
|
1200
|
+
}, function (_a) {
|
|
1201
|
+
var size = _a.size;
|
|
1202
|
+
return size;
|
|
1203
|
+
}, function (_a) {
|
|
1204
|
+
var theme = _a.theme;
|
|
1205
|
+
return theme.borderRadii.sm;
|
|
1206
|
+
}, function (_a) {
|
|
1207
|
+
var marginRight = _a.marginRight;
|
|
1208
|
+
return marginRight;
|
|
1209
|
+
});
|
|
1210
|
+
var LegendItemWrapper = styled__default["default"].div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", "px;\n flex: 0 0 auto;\n overflow: hidden;\n"], ["\n display: flex;\n align-items: center;\n margin: ", "px;\n flex: 0 0 auto;\n overflow: hidden;\n"])), function (_a) {
|
|
1211
|
+
var theme = _a.theme;
|
|
1212
|
+
return theme.space.base * 1.5;
|
|
1213
|
+
});
|
|
1214
|
+
var StyledSM = styled__default["default"](SM)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n max-width: calc(100% - ", "px);\n color: ", ";\n"], ["\n max-width: calc(100% - ", "px);\n color: ", ";\n"])), function (_a) {
|
|
1215
|
+
var squareSize = _a.squareSize;
|
|
1216
|
+
return squareSize;
|
|
1217
|
+
}, function (_a) {
|
|
1218
|
+
var theme = _a.theme;
|
|
1219
|
+
return theme.palette.grey[600];
|
|
1220
|
+
});
|
|
1221
|
+
var LegendItem = function (_a) {
|
|
1222
|
+
var color = _a.color, value = _a.value;
|
|
1223
|
+
var theme = React.useContext(styled.ThemeContext);
|
|
1224
|
+
var squareSide = theme.space.base * 3;
|
|
1225
|
+
var marginRight = theme.space.base * 2;
|
|
1226
|
+
return (jsxRuntime.jsxs(LegendItemWrapper, { children: [jsxRuntime.jsx(LegendColoredSquare, { color: color, size: squareSide, marginRight: marginRight }), jsxRuntime.jsx(StyledSM, __assign({ isBold: true, squareSize: squareSide + marginRight }, { children: jsxRuntime.jsx(StyledEllipsis$1, { children: value }) }))] }));
|
|
1227
|
+
};
|
|
1228
|
+
var LegendWrapper = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n width: 75%;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n"], ["\n width: 75%;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n"])), function (_a) {
|
|
1229
|
+
var columns = _a.columns;
|
|
1230
|
+
return columns;
|
|
1231
|
+
});
|
|
1232
|
+
var Legend = function (_a) {
|
|
1233
|
+
var colors = _a.colors, data = _a.data, _b = _a.columns, columns = _b === void 0 ? 2 : _b;
|
|
1234
|
+
var colorScheme = data.map(function (d, index) {
|
|
1235
|
+
return { value: d, color: colors[index % colors.length] };
|
|
1236
|
+
});
|
|
1237
|
+
return (jsxRuntime.jsx(LegendWrapper, __assign({ columns: columns }, { children: colorScheme.map(function (item) { return (jsxRuntime.jsx(LegendItem, __assign({}, item), item.value)); }) })));
|
|
1238
|
+
};
|
|
1239
|
+
var templateObject_1$18, templateObject_2$t, templateObject_3$i, templateObject_4$e, templateObject_5$6;
|
|
1240
|
+
|
|
1193
1241
|
var PieChart = function (_a) {
|
|
1194
1242
|
var _b;
|
|
1195
|
-
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin;
|
|
1243
|
+
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin, tooltip = _a.tooltip, legend = _a.legend;
|
|
1196
1244
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
1197
|
-
return (jsxRuntime.jsx("div", { children: jsxRuntime.
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1245
|
+
return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(ChartContainer, __assign({ width: width, height: height }, { children: [jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign({}, __assign(__assign(__assign({}, DEFAULT_CHARTS_THEME), theme), { labels: __assign(__assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: __assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_b = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _b === void 0 ? void 0 : _b.text) }) })), arcLinkLabel: function (d) { return (d.label || d.id).toString(); }, colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 2, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
|
|
1246
|
+
? function (node) {
|
|
1247
|
+
var data = node.datum.data;
|
|
1248
|
+
var label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
|
|
1249
|
+
var value = data.value;
|
|
1250
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({ label: label, value: value, data: data }) });
|
|
1251
|
+
}
|
|
1252
|
+
: undefined, cornerRadius: 3, innerRadius: 0.8, arcLinkLabelsThickness: 2, layers: __spreadArray([
|
|
1253
|
+
"arcs",
|
|
1254
|
+
"arcLabels",
|
|
1255
|
+
"arcLinkLabels"
|
|
1256
|
+
], (centerItem
|
|
1257
|
+
? [
|
|
1258
|
+
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))); },
|
|
1259
|
+
]
|
|
1260
|
+
: []), true), activeOuterRadiusOffset: 12 }), legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.map(function (d) { return d.id; }), columns: typeof legend === "object" ? legend.columns : undefined })) : undefined] })) }));
|
|
1206
1261
|
};
|
|
1207
1262
|
|
|
1208
|
-
var AbsoluteChartContainer = styled__default["default"](ChartContainer)(templateObject_1$
|
|
1263
|
+
var AbsoluteChartContainer = styled__default["default"](ChartContainer)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n ", ";\n ", ";\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n ", ";\n ", ";\n"])), function (_a) {
|
|
1209
1264
|
var mode = _a.mode;
|
|
1210
1265
|
return (mode === "front" ? "z-index: 1;" : "");
|
|
1211
1266
|
}, function (_a) {
|
|
@@ -1221,7 +1276,7 @@ var HalfPieChartComponent = function (_a) {
|
|
|
1221
1276
|
? ["arcLabels", "arcLinkLabels"]
|
|
1222
1277
|
: []), true), startAngle: -90, endAngle: 90, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, animate: false }) })));
|
|
1223
1278
|
};
|
|
1224
|
-
var templateObject_1$
|
|
1279
|
+
var templateObject_1$17;
|
|
1225
1280
|
|
|
1226
1281
|
var HalfPieChart = function (_a) {
|
|
1227
1282
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, margin = _a.margin, showArcLinks = _a.showArcLinks;
|
|
@@ -1262,7 +1317,19 @@ var findChildrenByName = function (data, name) {
|
|
|
1262
1317
|
return flatten(data.children).find(function (searchedName) { return searchedName.name === name; });
|
|
1263
1318
|
};
|
|
1264
1319
|
|
|
1265
|
-
var
|
|
1320
|
+
var getChildrenValue = function (data) {
|
|
1321
|
+
if (data.value) {
|
|
1322
|
+
return data.value;
|
|
1323
|
+
}
|
|
1324
|
+
if (data.children) {
|
|
1325
|
+
return data.children.reduce(function (acc, item) {
|
|
1326
|
+
return acc + getChildrenValue(item);
|
|
1327
|
+
}, 0);
|
|
1328
|
+
}
|
|
1329
|
+
return 0;
|
|
1330
|
+
};
|
|
1331
|
+
|
|
1332
|
+
var ResetText = styled__default["default"].text(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n font-size: ", "px;\n cursor: pointer;\n\n fill: ", ";\n &:hover {\n fill: ", ";\n }\n"], ["\n font-size: ", "px;\n cursor: pointer;\n\n fill: ", ";\n &:hover {\n fill: ", ";\n }\n"])), function (_a) {
|
|
1266
1333
|
var radius = _a.radius, theme = _a.theme;
|
|
1267
1334
|
return (parseInt(theme.fontSizes.md.replace("px", "")) * radius) / 130;
|
|
1268
1335
|
}, function (_a) {
|
|
@@ -1276,10 +1343,10 @@ var ResetButton = function (_a) {
|
|
|
1276
1343
|
var centerX = _a.centerX, centerY = _a.centerY, radius = _a.radius; _a.theme; var onClick = _a.onClick;
|
|
1277
1344
|
return (jsxRuntime.jsx("g", __assign({ transform: "translate(".concat(centerX - radius, ",").concat(centerY - radius, ")") }, { children: jsxRuntime.jsx(ResetText, __assign({ onClick: onClick, radius: radius }, { children: "< Reset" })) })));
|
|
1278
1345
|
};
|
|
1279
|
-
var templateObject_1$
|
|
1346
|
+
var templateObject_1$16;
|
|
1280
1347
|
|
|
1281
1348
|
var SunburstChart = function (_a) {
|
|
1282
|
-
var
|
|
1349
|
+
var colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin, onChange = _a.onChange, tooltip = _a.tooltip, legend = _a.legend;
|
|
1283
1350
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
1284
1351
|
var _b = React.useState(data), currentData = _b[0], setCurrentData = _b[1];
|
|
1285
1352
|
var _c = React.useState(), currentColor = _c[0], setCurrentColor = _c[1];
|
|
@@ -1293,39 +1360,47 @@ var SunburstChart = function (_a) {
|
|
|
1293
1360
|
};
|
|
1294
1361
|
if (!data.children)
|
|
1295
1362
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
|
|
1296
|
-
return (jsxRuntime.
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
}
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
function (
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
} })); },
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1363
|
+
return (jsxRuntime.jsxs(ChartContainer, __assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: [jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
|
|
1364
|
+
? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
|
|
1365
|
+
padding: 0,
|
|
1366
|
+
} }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
|
|
1367
|
+
? function () { return currentColor; }
|
|
1368
|
+
: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 3, onMouseEnter: function (node) {
|
|
1369
|
+
if (node.data.children) {
|
|
1370
|
+
setIsHovering(true);
|
|
1371
|
+
}
|
|
1372
|
+
}, onMouseLeave: function (node) {
|
|
1373
|
+
if (node.data.children) {
|
|
1374
|
+
setIsHovering(false);
|
|
1375
|
+
}
|
|
1376
|
+
}, tooltip: tooltip
|
|
1377
|
+
? function (node) { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
|
|
1378
|
+
label: node.data.label || node.data.name,
|
|
1379
|
+
value: getChildrenValue(node.data),
|
|
1380
|
+
}) })); }
|
|
1381
|
+
: undefined, layers: __spreadArray(__spreadArray([
|
|
1382
|
+
"arcs"
|
|
1383
|
+
], (centerItem
|
|
1384
|
+
? [
|
|
1385
|
+
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
|
|
1386
|
+
]
|
|
1387
|
+
: []), true), (currentColor
|
|
1388
|
+
? [
|
|
1389
|
+
function (props) { return (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: function () {
|
|
1390
|
+
changeDataSlice({
|
|
1391
|
+
data: data,
|
|
1392
|
+
});
|
|
1393
|
+
} })); },
|
|
1394
|
+
]
|
|
1395
|
+
: []), true), id: "name", value: "value", margin: __assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.5]] }, onClick: function (clickedData) {
|
|
1396
|
+
var foundObject = findChildrenByName(currentData, clickedData.id.toString());
|
|
1397
|
+
if (foundObject && foundObject.children) {
|
|
1398
|
+
changeDataSlice({
|
|
1399
|
+
data: foundObject,
|
|
1400
|
+
color: clickedData.color,
|
|
1401
|
+
});
|
|
1402
|
+
}
|
|
1403
|
+
} }), legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.children.map(function (d) { return d.name; }), columns: typeof legend === "object" ? legend.columns : undefined })) : undefined] })));
|
|
1329
1404
|
};
|
|
1330
1405
|
|
|
1331
1406
|
var CustomCell = function (_a) {
|
|
@@ -1338,7 +1413,7 @@ var CustomCell = function (_a) {
|
|
|
1338
1413
|
var WaffleChart = function (_a) {
|
|
1339
1414
|
var height = _a.height, width = _a.width, data = _a.data, total = _a.total, tooltip = _a.tooltip;
|
|
1340
1415
|
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, { theme: tooltip
|
|
1341
|
-
? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, tooltip), { container: {
|
|
1416
|
+
? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
|
|
1342
1417
|
padding: 0,
|
|
1343
1418
|
} }) }) : DEFAULT_CHARTS_THEME, data: [
|
|
1344
1419
|
{
|
|
@@ -1362,7 +1437,7 @@ var WaffleChart = function (_a) {
|
|
|
1362
1437
|
} }) })));
|
|
1363
1438
|
};
|
|
1364
1439
|
|
|
1365
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
1440
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
1366
1441
|
var theme = _a.theme;
|
|
1367
1442
|
return theme.space.xl;
|
|
1368
1443
|
}, function (_a) {
|
|
@@ -1373,7 +1448,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
1373
1448
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1374
1449
|
*/
|
|
1375
1450
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
1376
|
-
var templateObject_1$
|
|
1451
|
+
var templateObject_1$15;
|
|
1377
1452
|
|
|
1378
1453
|
/**
|
|
1379
1454
|
* Use Span to style and format inline text elements.
|
|
@@ -1413,8 +1488,8 @@ function useWindowSize() {
|
|
|
1413
1488
|
return size;
|
|
1414
1489
|
}
|
|
1415
1490
|
|
|
1416
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1417
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
1491
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject([""], [""])));
|
|
1492
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$s || (templateObject_2$s = __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) {
|
|
1418
1493
|
var status = _a.status, theme = _a.theme;
|
|
1419
1494
|
switch (status) {
|
|
1420
1495
|
case "completed":
|
|
@@ -1448,9 +1523,9 @@ var Counter = function (props) {
|
|
|
1448
1523
|
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() })] })));
|
|
1449
1524
|
};
|
|
1450
1525
|
Counter.Avatar = StyledTag.Avatar;
|
|
1451
|
-
var templateObject_1$
|
|
1526
|
+
var templateObject_1$14, templateObject_2$s;
|
|
1452
1527
|
|
|
1453
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
1528
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
1454
1529
|
var theme = _a.theme;
|
|
1455
1530
|
return theme.breakpoints.sm;
|
|
1456
1531
|
});
|
|
@@ -1467,26 +1542,26 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1467
1542
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1468
1543
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1469
1544
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1470
|
-
var templateObject_1$
|
|
1545
|
+
var templateObject_1$13;
|
|
1471
1546
|
|
|
1472
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1473
|
-
var templateObject_1$
|
|
1547
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject([""], [""])));
|
|
1548
|
+
var templateObject_1$12;
|
|
1474
1549
|
|
|
1475
1550
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1476
1551
|
__proto__: null,
|
|
1477
1552
|
Field: Field$1
|
|
1478
1553
|
});
|
|
1479
1554
|
|
|
1480
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1555
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n\n > div {\n height: 100%;\n }\n\n &[disabled] * {\n opacity: 0.85;\n }\n\n &[disabled] svg {\n opacity: 0.5;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &[disabled]:hover {\n background-color: transparent;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n\n > div {\n height: 100%;\n }\n\n &[disabled] * {\n opacity: 0.85;\n }\n\n &[disabled] svg {\n opacity: 0.5;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &[disabled]:hover {\n background-color: transparent;\n }\n"])), function (_a) {
|
|
1481
1556
|
var theme = _a.theme;
|
|
1482
1557
|
return theme.palette.blue[100];
|
|
1483
1558
|
});
|
|
1484
1559
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1485
|
-
var templateObject_1$
|
|
1560
|
+
var templateObject_1$11;
|
|
1486
1561
|
|
|
1487
|
-
var Container = styled__default["default"].div(templateObject_1
|
|
1488
|
-
var MetaContainer$1 = styled__default["default"].div(templateObject_2$
|
|
1489
|
-
var ThumbContainer = styled__default["default"].div(templateObject_3$
|
|
1562
|
+
var Container = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
1563
|
+
var MetaContainer$1 = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"])));
|
|
1564
|
+
var ThumbContainer = styled__default["default"].div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
|
|
1490
1565
|
var theme = _a.theme;
|
|
1491
1566
|
return theme.space.sm;
|
|
1492
1567
|
}, function (_a) {
|
|
@@ -1512,7 +1587,7 @@ var ItemContent = function (props) {
|
|
|
1512
1587
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1513
1588
|
return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
|
|
1514
1589
|
};
|
|
1515
|
-
var templateObject_1
|
|
1590
|
+
var templateObject_1$10, templateObject_2$r, templateObject_3$h, templateObject_4$d, templateObject_5$5;
|
|
1516
1591
|
|
|
1517
1592
|
/**
|
|
1518
1593
|
* A Menu is a wrapper for items elements
|
|
@@ -1536,7 +1611,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1536
1611
|
*/
|
|
1537
1612
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1538
1613
|
|
|
1539
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1
|
|
1614
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1540
1615
|
return props.isPrimary &&
|
|
1541
1616
|
"\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 ");
|
|
1542
1617
|
});
|
|
@@ -1553,7 +1628,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1553
1628
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1554
1629
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1555
1630
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1556
|
-
var templateObject_1
|
|
1631
|
+
var templateObject_1$$;
|
|
1557
1632
|
|
|
1558
1633
|
/**
|
|
1559
1634
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1568,7 +1643,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1568
1643
|
|
|
1569
1644
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1570
1645
|
|
|
1571
|
-
var editorStyle = styled.css(templateObject_1$
|
|
1646
|
+
var editorStyle = styled.css(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n > * + * {\n margin-top: 0.75em;\n }\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n line-height: 1.1;\n font-weight: 500;\n color: ", ";\n }\n\n h1 {\n font-size: 2.617924em;\n }\n\n h2 {\n font-size: 1.618em;\n }\n\n h3 {\n font-size: 1.5rem;\n }\n\n h4 {\n font-size: 1.3rem;\n }\n\n h5 {\n font-size: 1.2rem;\n }\n\n h6 {\n font-size: 1.1rem;\n }\n\n /*=====\n #Lists\n =====*/\n ul,\n ol,\n dl {\n padding: 0.618em 0.618rem;\n margin-left: 1rem;\n }\n\n ul {\n list-style: disc;\n }\n\n ol {\n list-style: decimal;\n }\n\n li {\n padding: 0 0.618rem;\n line-height: 1.618;\n }\n\n dt {\n text-indent: -0.618rem;\n }\n\n dd {\n margin: 0;\n padding: 0 0.618rem 0 0.618rem;\n }\n\n hr {\n border: none;\n border-top: 2px solid rgba(#0d0d0d, 0.1);\n margin: 2rem 0;\n }\n\n p,\n blockquote {\n line-height: 1.618;\n }\n\n p {\n font-size: 1rem;\n margin-bottom: 0.618em;\n }\n\n blockquote {\n border-left: 3px solid;\n border-color: ", ";\n margin: 1.618em 0.618rem;\n padding-left: 0.618em;\n }\n\n em,\n i,\n cite {\n font-style: italic;\n }\n\n strong,\n b {\n font-weight: 500;\n }\n\n cite {\n display: block;\n text-align: right;\n }\n\n u {\n text-decoration: none;\n border-bottom: 1px dotted red;\n }\n\n small,\n sub,\n sup {\n font-size: 0.618rem;\n line-height: 1;\n }\n\n sub {\n vertical-align: sub;\n }\n\n sup {\n vertical-align: super;\n }\n\n s,\n strike,\n del {\n text-decoration: strikethrough;\n }\n\n ins,\n del {\n background-color: rgba(220, 220, 220, 0.25);\n }\n\n ins {\n text-decoration: none;\n }\n\n /*\n mark and selection should be different, so user knows which one they've selected.\n \n mark and selections:\n saturation: 44%\n lightness: 75%\n Hue is different\n */\n mark {\n background-color: rgba(165, 220, 165, 0.9);\n }\n\n ::selection {\n background-color: rgba(165, 220, 220, 0.9);\n }\n\n /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */\n mark::selection {\n background-color: rgba(165, 220, 110, 0.9);\n }\n\n /* dfn and dt both do the same thing: denote a term to be defined */\n dfn,\n dt {\n font-style: oblique;\n font-weight: 700;\n text-transform: capitalize;\n }\n\n code {\n background-color: ", ";\n color: ", ";\n padding: 0.2rem 0.3rem;\n border-radius: 4px;\n }\n\n pre {\n background: #0d0d0d;\n color: #fff;\n font-family: \"JetBrainsMono\", monospace;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n\n code {\n color: inherit;\n padding: 0;\n background: none;\n font-size: 0.8rem;\n }\n }\n\n kbd,\n samp,\n data {\n background-color: rgba(165, 165, 165, 0.2);\n }\n\n kbd {\n font-size: 0.75rem;\n padding: 0.25ex 0.5ex;\n border: 1px solid rgb(193, 193, 193);\n border-radius: 3px;\n }\n\n /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/\n samp,\n data {\n padding: 0 10px;\n }\n\n var,\n data {\n font-style: italic;\n }\n\n samp {\n border-left: 5px solid rgb(193, 193, 193);\n }\n\n data {\n padding: 0 10px;\n }\n\n /* Placeholder (at the top) */\n /*p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }*/\n\n /* Placeholder (on every new line) */\n .is-empty::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }\n"], ["\n > * + * {\n margin-top: 0.75em;\n }\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n line-height: 1.1;\n font-weight: 500;\n color: ", ";\n }\n\n h1 {\n font-size: 2.617924em;\n }\n\n h2 {\n font-size: 1.618em;\n }\n\n h3 {\n font-size: 1.5rem;\n }\n\n h4 {\n font-size: 1.3rem;\n }\n\n h5 {\n font-size: 1.2rem;\n }\n\n h6 {\n font-size: 1.1rem;\n }\n\n /*=====\n #Lists\n =====*/\n ul,\n ol,\n dl {\n padding: 0.618em 0.618rem;\n margin-left: 1rem;\n }\n\n ul {\n list-style: disc;\n }\n\n ol {\n list-style: decimal;\n }\n\n li {\n padding: 0 0.618rem;\n line-height: 1.618;\n }\n\n dt {\n text-indent: -0.618rem;\n }\n\n dd {\n margin: 0;\n padding: 0 0.618rem 0 0.618rem;\n }\n\n hr {\n border: none;\n border-top: 2px solid rgba(#0d0d0d, 0.1);\n margin: 2rem 0;\n }\n\n p,\n blockquote {\n line-height: 1.618;\n }\n\n p {\n font-size: 1rem;\n margin-bottom: 0.618em;\n }\n\n blockquote {\n border-left: 3px solid;\n border-color: ", ";\n margin: 1.618em 0.618rem;\n padding-left: 0.618em;\n }\n\n em,\n i,\n cite {\n font-style: italic;\n }\n\n strong,\n b {\n font-weight: 500;\n }\n\n cite {\n display: block;\n text-align: right;\n }\n\n u {\n text-decoration: none;\n border-bottom: 1px dotted red;\n }\n\n small,\n sub,\n sup {\n font-size: 0.618rem;\n line-height: 1;\n }\n\n sub {\n vertical-align: sub;\n }\n\n sup {\n vertical-align: super;\n }\n\n s,\n strike,\n del {\n text-decoration: strikethrough;\n }\n\n ins,\n del {\n background-color: rgba(220, 220, 220, 0.25);\n }\n\n ins {\n text-decoration: none;\n }\n\n /*\n mark and selection should be different, so user knows which one they've selected.\n \n mark and selections:\n saturation: 44%\n lightness: 75%\n Hue is different\n */\n mark {\n background-color: rgba(165, 220, 165, 0.9);\n }\n\n ::selection {\n background-color: rgba(165, 220, 220, 0.9);\n }\n\n /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */\n mark::selection {\n background-color: rgba(165, 220, 110, 0.9);\n }\n\n /* dfn and dt both do the same thing: denote a term to be defined */\n dfn,\n dt {\n font-style: oblique;\n font-weight: 700;\n text-transform: capitalize;\n }\n\n code {\n background-color: ", ";\n color: ", ";\n padding: 0.2rem 0.3rem;\n border-radius: 4px;\n }\n\n pre {\n background: #0d0d0d;\n color: #fff;\n font-family: \"JetBrainsMono\", monospace;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n\n code {\n color: inherit;\n padding: 0;\n background: none;\n font-size: 0.8rem;\n }\n }\n\n kbd,\n samp,\n data {\n background-color: rgba(165, 165, 165, 0.2);\n }\n\n kbd {\n font-size: 0.75rem;\n padding: 0.25ex 0.5ex;\n border: 1px solid rgb(193, 193, 193);\n border-radius: 3px;\n }\n\n /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/\n samp,\n data {\n padding: 0 10px;\n }\n\n var,\n data {\n font-style: italic;\n }\n\n samp {\n border-left: 5px solid rgb(193, 193, 193);\n }\n\n data {\n padding: 0 10px;\n }\n\n /* Placeholder (at the top) */\n /*p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }*/\n\n /* Placeholder (on every new line) */\n .is-empty::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }\n"])), function (_a) {
|
|
1572
1647
|
var theme = _a.theme;
|
|
1573
1648
|
return theme.palette.grey["800"];
|
|
1574
1649
|
}, function (_a) {
|
|
@@ -1581,7 +1656,7 @@ var editorStyle = styled.css(templateObject_1$Z || (templateObject_1$Z = __makeT
|
|
|
1581
1656
|
var theme = _a.theme;
|
|
1582
1657
|
return theme.palette.red[600];
|
|
1583
1658
|
});
|
|
1584
|
-
var templateObject_1$
|
|
1659
|
+
var templateObject_1$_;
|
|
1585
1660
|
|
|
1586
1661
|
var _path$l;
|
|
1587
1662
|
function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
|
|
@@ -1727,8 +1802,8 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1727
1802
|
}))));
|
|
1728
1803
|
};
|
|
1729
1804
|
|
|
1730
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1731
|
-
var MenuContainer = styled__default["default"](Card)(templateObject_2$
|
|
1805
|
+
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject([""], [""])));
|
|
1806
|
+
var MenuContainer = styled__default["default"](Card)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n padding: ", ";\n\n ", " {\n :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n }\n"], ["\n padding: ", ";\n\n ", " {\n :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n }\n"])), function (_a) {
|
|
1732
1807
|
var theme = _a.theme;
|
|
1733
1808
|
return theme.space.xxs;
|
|
1734
1809
|
}, StyledIconButton);
|
|
@@ -1745,9 +1820,9 @@ var FloatingMenu = function (props) {
|
|
|
1745
1820
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1746
1821
|
}, isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBold().run(); }, isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleItalic().run(); }, isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
|
|
1747
1822
|
};
|
|
1748
|
-
var templateObject_1$
|
|
1823
|
+
var templateObject_1$Z, templateObject_2$q;
|
|
1749
1824
|
|
|
1750
|
-
var Header$1 = styled__default["default"].div(templateObject_1$
|
|
1825
|
+
var Header$1 = styled__default["default"].div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: ", " ", ";\n border-bottom: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n padding: ", " ", ";\n border-bottom: 1px solid ", ";\n"])), function (_a) {
|
|
1751
1826
|
var theme = _a.theme;
|
|
1752
1827
|
return theme.space.xs;
|
|
1753
1828
|
}, function (_a) {
|
|
@@ -1757,7 +1832,7 @@ var Header$1 = styled__default["default"].div(templateObject_1$X || (templateObj
|
|
|
1757
1832
|
var theme = _a.theme;
|
|
1758
1833
|
return theme.palette.grey[300];
|
|
1759
1834
|
});
|
|
1760
|
-
var Title$1 = styled__default["default"](MD)(templateObject_2$
|
|
1835
|
+
var Title$1 = styled__default["default"](MD)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1761
1836
|
var validation = _a.validation, theme = _a.theme;
|
|
1762
1837
|
if (validation === "success") {
|
|
1763
1838
|
return "color: ".concat(theme.colors.successHue, ";");
|
|
@@ -1776,23 +1851,23 @@ var EditorHeader = function (props) {
|
|
|
1776
1851
|
var title = props.title, validation = props.validation;
|
|
1777
1852
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$1, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1778
1853
|
};
|
|
1779
|
-
var templateObject_1$
|
|
1854
|
+
var templateObject_1$Y, templateObject_2$p;
|
|
1780
1855
|
|
|
1781
|
-
var Footer$1 = styled__default["default"].div(templateObject_1$
|
|
1856
|
+
var Footer$1 = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"])), function (_a) {
|
|
1782
1857
|
var theme = _a.theme;
|
|
1783
1858
|
return theme.space.sm;
|
|
1784
1859
|
}, function (_a) {
|
|
1785
1860
|
var theme = _a.theme;
|
|
1786
1861
|
return theme.palette.grey[100];
|
|
1787
1862
|
});
|
|
1788
|
-
var Text = styled__default["default"](SM)(templateObject_2$
|
|
1863
|
+
var Text = styled__default["default"](SM)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n line-height: 1.7;\n"], ["\n line-height: 1.7;\n"])));
|
|
1789
1864
|
var EditorFooter = function (_a) {
|
|
1790
1865
|
var saveText = _a.saveText;
|
|
1791
1866
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1792
1867
|
};
|
|
1793
|
-
var templateObject_1$
|
|
1868
|
+
var templateObject_1$X, templateObject_2$o;
|
|
1794
1869
|
|
|
1795
|
-
var EditorContainer = styled__default["default"].div(templateObject_1$
|
|
1870
|
+
var EditorContainer = styled__default["default"].div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"], ["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"])), function (_a) {
|
|
1796
1871
|
var theme = _a.theme;
|
|
1797
1872
|
return theme.borderRadii.md;
|
|
1798
1873
|
}, function (_a) {
|
|
@@ -1876,9 +1951,9 @@ var Editor = function (_a) {
|
|
|
1876
1951
|
});
|
|
1877
1952
|
return (jsxRuntime.jsxs(EditorContainer, __assign({ editable: isEditable, validation: props.validation }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle, validation: props.validation }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: __assign({}, bubbleOptions) }))] })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), isEditable && jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] })));
|
|
1878
1953
|
};
|
|
1879
|
-
var templateObject_1$
|
|
1954
|
+
var templateObject_1$W;
|
|
1880
1955
|
|
|
1881
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1956
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject([""], [""])));
|
|
1882
1957
|
/**
|
|
1883
1958
|
* A Checkbox lets users select and unselect options from a list.
|
|
1884
1959
|
* <hr>
|
|
@@ -1890,17 +1965,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1890
1965
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1891
1966
|
**/
|
|
1892
1967
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1893
|
-
var templateObject_1$
|
|
1968
|
+
var templateObject_1$V;
|
|
1894
1969
|
|
|
1895
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1970
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject([""], [""])));
|
|
1896
1971
|
/**
|
|
1897
1972
|
* A Label is used to specify a title for an input.
|
|
1898
1973
|
* <hr>
|
|
1899
1974
|
**/
|
|
1900
1975
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1901
|
-
var templateObject_1$
|
|
1976
|
+
var templateObject_1$U;
|
|
1902
1977
|
|
|
1903
|
-
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$
|
|
1978
|
+
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1904
1979
|
var theme = _a.theme;
|
|
1905
1980
|
return theme.space.base;
|
|
1906
1981
|
});
|
|
@@ -1913,14 +1988,14 @@ var CheckboxCard = function (props) {
|
|
|
1913
1988
|
};
|
|
1914
1989
|
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$1, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1915
1990
|
};
|
|
1916
|
-
var templateObject_1$
|
|
1991
|
+
var templateObject_1$T;
|
|
1917
1992
|
|
|
1918
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1993
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
|
|
1919
1994
|
/**
|
|
1920
1995
|
* A Field is a wrapper for input elements
|
|
1921
1996
|
**/
|
|
1922
1997
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1923
|
-
var templateObject_1$
|
|
1998
|
+
var templateObject_1$S;
|
|
1924
1999
|
|
|
1925
2000
|
var index = /*#__PURE__*/Object.freeze({
|
|
1926
2001
|
__proto__: null,
|
|
@@ -1928,8 +2003,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1928
2003
|
Hint: reactForms.Hint
|
|
1929
2004
|
});
|
|
1930
2005
|
|
|
1931
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1932
|
-
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$
|
|
2006
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
2007
|
+
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject([""], [""])));
|
|
1933
2008
|
/**
|
|
1934
2009
|
* An Input lets users enter text into a field.
|
|
1935
2010
|
* <hr>
|
|
@@ -1938,7 +2013,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (te
|
|
|
1938
2013
|
* - To enter multiline text, use a Textarea
|
|
1939
2014
|
**/
|
|
1940
2015
|
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
1941
|
-
var templateObject_1$
|
|
2016
|
+
var templateObject_1$R, templateObject_2$n;
|
|
1942
2017
|
|
|
1943
2018
|
var _g$1;
|
|
1944
2019
|
function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
|
|
@@ -1962,15 +2037,15 @@ var SvgNotesStroke = function SvgNotesStroke(props) {
|
|
|
1962
2037
|
};
|
|
1963
2038
|
|
|
1964
2039
|
var ToggleContext = React.createContext({});
|
|
1965
|
-
var StyledInput = styled__default["default"](Input)(templateObject_1$
|
|
2040
|
+
var StyledInput = styled__default["default"](Input)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n padding: ", ";\n width: 100%;\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"], ["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n padding: ", ";\n width: 100%;\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"])), function (_a) {
|
|
1966
2041
|
var theme = _a.theme;
|
|
1967
2042
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1968
2043
|
});
|
|
1969
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_2$
|
|
2044
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n padding: ", ";\n transition: opacity 0.2s ease-in-out;\n"], ["\n padding: ", ";\n transition: opacity 0.2s ease-in-out;\n"])), function (_a) {
|
|
1970
2045
|
var theme = _a.theme;
|
|
1971
2046
|
return "".concat(theme.space.xxs, " ").concat(theme.space.xxs, " 0");
|
|
1972
2047
|
});
|
|
1973
|
-
var StyledText$1 = styled__default["default"](XL)(templateObject_3$
|
|
2048
|
+
var StyledText$1 = styled__default["default"](XL)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject([""], [""])));
|
|
1974
2049
|
var Wrapper = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n ", " {\n border-bottom: 2px solid transparent;\n padding: ", ";\n display: flex;\n align-items: center;\n\n svg {\n margin-left: ", ";\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n ", " {\n border-bottom: 2px solid transparent;\n padding: ", ";\n display: flex;\n align-items: center;\n\n svg {\n margin-left: ", ";\n }\n }\n"])), StyledText$1, function (_a) {
|
|
1975
2050
|
var theme = _a.theme;
|
|
1976
2051
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
@@ -2020,9 +2095,9 @@ var InputItem = function (props) {
|
|
|
2020
2095
|
};
|
|
2021
2096
|
InputToggle.Item = InputItem;
|
|
2022
2097
|
InputToggle.Label = StyledLabel;
|
|
2023
|
-
var templateObject_1$
|
|
2098
|
+
var templateObject_1$Q, templateObject_2$m, templateObject_3$g, templateObject_4$c;
|
|
2024
2099
|
|
|
2025
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
2100
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
2026
2101
|
/**
|
|
2027
2102
|
* Media elements add even more context to an input.
|
|
2028
2103
|
* <hr>
|
|
@@ -2031,9 +2106,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
2031
2106
|
* - To enter multiline text, use a Textarea
|
|
2032
2107
|
**/
|
|
2033
2108
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
2034
|
-
var templateObject_1$
|
|
2109
|
+
var templateObject_1$P;
|
|
2035
2110
|
|
|
2036
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
2111
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
2037
2112
|
/**
|
|
2038
2113
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
2039
2114
|
* <hr>
|
|
@@ -2045,7 +2120,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$N ||
|
|
|
2045
2120
|
* - To select from a long list of options, use Select instead
|
|
2046
2121
|
**/
|
|
2047
2122
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
2048
|
-
var templateObject_1$
|
|
2123
|
+
var templateObject_1$O;
|
|
2049
2124
|
|
|
2050
2125
|
var _path$i;
|
|
2051
2126
|
function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
|
|
@@ -2063,7 +2138,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
2063
2138
|
})));
|
|
2064
2139
|
};
|
|
2065
2140
|
|
|
2066
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
2141
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$N || (templateObject_1$N = __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) {
|
|
2067
2142
|
var theme = _a.theme;
|
|
2068
2143
|
return theme.space.base;
|
|
2069
2144
|
}, function (_a) {
|
|
@@ -2073,7 +2148,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1
|
|
|
2073
2148
|
var theme = _a.theme;
|
|
2074
2149
|
return theme.fontWeights.medium;
|
|
2075
2150
|
});
|
|
2076
|
-
var Circle = styled__default["default"].div(templateObject_2$
|
|
2151
|
+
var Circle = styled__default["default"].div(templateObject_2$l || (templateObject_2$l = __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) {
|
|
2077
2152
|
var theme = _a.theme;
|
|
2078
2153
|
return theme.space.base * 6;
|
|
2079
2154
|
}, function (_a) {
|
|
@@ -2097,9 +2172,9 @@ var RadioCard = function (_a) {
|
|
|
2097
2172
|
props.onChecked && props.onChecked(props.value);
|
|
2098
2173
|
} }, { 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 })) }))] })));
|
|
2099
2174
|
};
|
|
2100
|
-
var templateObject_1$
|
|
2175
|
+
var templateObject_1$N, templateObject_2$l;
|
|
2101
2176
|
|
|
2102
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
2177
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
2103
2178
|
/**
|
|
2104
2179
|
* A Textarea is a form control for multi-line text.
|
|
2105
2180
|
* <hr>
|
|
@@ -2107,9 +2182,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
2107
2182
|
* - To enter multi-line text
|
|
2108
2183
|
**/
|
|
2109
2184
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
2110
|
-
var templateObject_1$
|
|
2185
|
+
var templateObject_1$M;
|
|
2111
2186
|
|
|
2112
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
2187
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
2113
2188
|
/**
|
|
2114
2189
|
* 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.
|
|
2115
2190
|
* <hr>
|
|
@@ -2120,11 +2195,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$K
|
|
|
2120
2195
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
2121
2196
|
**/
|
|
2122
2197
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
2123
|
-
var templateObject_1$
|
|
2198
|
+
var templateObject_1$L;
|
|
2124
2199
|
|
|
2125
|
-
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
2200
|
+
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$K || (templateObject_1$K = __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);
|
|
2126
2201
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
2127
|
-
var templateObject_1$
|
|
2202
|
+
var templateObject_1$K;
|
|
2128
2203
|
|
|
2129
2204
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
2130
2205
|
|
|
@@ -2181,15 +2256,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
2181
2256
|
})));
|
|
2182
2257
|
};
|
|
2183
2258
|
|
|
2184
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
2259
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
2185
2260
|
var Icon = function (props) {
|
|
2186
2261
|
var type = props.type, size = props.size;
|
|
2187
2262
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
2188
2263
|
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 })] }));
|
|
2189
2264
|
};
|
|
2190
|
-
var templateObject_1$
|
|
2265
|
+
var templateObject_1$J;
|
|
2191
2266
|
|
|
2192
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
2267
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
2193
2268
|
/**
|
|
2194
2269
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
2195
2270
|
* <hr>
|
|
@@ -2201,9 +2276,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
2201
2276
|
- When loading page content, use a Skeleton loader instead
|
|
2202
2277
|
*/
|
|
2203
2278
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
2204
|
-
var templateObject_1$
|
|
2279
|
+
var templateObject_1$I;
|
|
2205
2280
|
|
|
2206
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
2281
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
2207
2282
|
/**
|
|
2208
2283
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
2209
2284
|
* <hr>
|
|
@@ -2212,9 +2287,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
2212
2287
|
- To provide a quick way to navigate to ancestor pages
|
|
2213
2288
|
*/
|
|
2214
2289
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
2215
|
-
var templateObject_1$
|
|
2290
|
+
var templateObject_1$H;
|
|
2216
2291
|
|
|
2217
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
2292
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2218
2293
|
var theme = _a.theme;
|
|
2219
2294
|
return theme.palette.white;
|
|
2220
2295
|
});
|
|
@@ -2222,7 +2297,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$F ||
|
|
|
2222
2297
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
2223
2298
|
*/
|
|
2224
2299
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
2225
|
-
var templateObject_1$
|
|
2300
|
+
var templateObject_1$G;
|
|
2226
2301
|
|
|
2227
2302
|
/**
|
|
2228
2303
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -2244,23 +2319,23 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
2244
2319
|
})));
|
|
2245
2320
|
};
|
|
2246
2321
|
|
|
2247
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
2322
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
2248
2323
|
var theme = _a.theme;
|
|
2249
2324
|
return theme.fonts.system;
|
|
2250
2325
|
});
|
|
2251
|
-
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$
|
|
2326
|
+
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
2252
2327
|
var theme = _a.theme;
|
|
2253
2328
|
return theme.fonts.system;
|
|
2254
2329
|
});
|
|
2255
2330
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
2256
|
-
var templateObject_1$
|
|
2331
|
+
var templateObject_1$F, templateObject_2$k;
|
|
2257
2332
|
|
|
2258
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
2333
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
2259
2334
|
var theme = _a.theme;
|
|
2260
2335
|
return theme.fonts.system;
|
|
2261
2336
|
});
|
|
2262
2337
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
2263
|
-
var templateObject_1$
|
|
2338
|
+
var templateObject_1$E;
|
|
2264
2339
|
|
|
2265
2340
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
2266
2341
|
|
|
@@ -2307,7 +2382,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
2307
2382
|
})));
|
|
2308
2383
|
};
|
|
2309
2384
|
|
|
2310
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
2385
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
2311
2386
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
2312
2387
|
return isCompact &&
|
|
2313
2388
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -2323,13 +2398,13 @@ var WorkspacesDropdown = function (props) {
|
|
|
2323
2398
|
? selectedWorkspace.company + "'s workspace"
|
|
2324
2399
|
: "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 }))); })] })] })));
|
|
2325
2400
|
};
|
|
2326
|
-
var templateObject_1$
|
|
2401
|
+
var templateObject_1$D;
|
|
2327
2402
|
|
|
2328
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
2403
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$C || (templateObject_1$C = __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) {
|
|
2329
2404
|
var theme = _a.theme;
|
|
2330
2405
|
return theme.breakpoints.md;
|
|
2331
2406
|
});
|
|
2332
|
-
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$
|
|
2407
|
+
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$j || (templateObject_2$j = __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) {
|
|
2333
2408
|
var theme = _a.theme;
|
|
2334
2409
|
return theme.colors.primaryHue;
|
|
2335
2410
|
}, function (_a) {
|
|
@@ -2339,7 +2414,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
2339
2414
|
var theme = _a.theme;
|
|
2340
2415
|
return theme.breakpoints.md;
|
|
2341
2416
|
});
|
|
2342
|
-
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$
|
|
2417
|
+
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$f || (templateObject_3$f = __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) {
|
|
2343
2418
|
var theme = _a.theme;
|
|
2344
2419
|
return theme.colors.primaryHue;
|
|
2345
2420
|
}, function (_a) {
|
|
@@ -2359,9 +2434,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
2359
2434
|
var BrandItem = function (props) {
|
|
2360
2435
|
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 }) }))) }))] }));
|
|
2361
2436
|
};
|
|
2362
|
-
var templateObject_1$
|
|
2437
|
+
var templateObject_1$C, templateObject_2$j, templateObject_3$f, templateObject_4$b;
|
|
2363
2438
|
|
|
2364
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
2439
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
2365
2440
|
/**
|
|
2366
2441
|
* An Header is a visual way to display general information.
|
|
2367
2442
|
* This can include navList Items, modal, profile settings.
|
|
@@ -2370,13 +2445,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
2370
2445
|
Header.HeaderItem = HeaderItem;
|
|
2371
2446
|
Header.HeaderItemText = HeaderItemText;
|
|
2372
2447
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
2373
|
-
var templateObject_1$
|
|
2448
|
+
var templateObject_1$B;
|
|
2374
2449
|
|
|
2375
2450
|
var HeaderSkeleton = function () {
|
|
2376
2451
|
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%" } }) }) }) }))] })));
|
|
2377
2452
|
};
|
|
2378
2453
|
|
|
2379
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
2454
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
2380
2455
|
var theme = _a.theme;
|
|
2381
2456
|
return theme.breakpoints.sm;
|
|
2382
2457
|
});
|
|
@@ -2388,9 +2463,9 @@ var AppHeader = function (_a) {
|
|
|
2388
2463
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
2389
2464
|
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, {}) }))] }) }) }))] })));
|
|
2390
2465
|
};
|
|
2391
|
-
var templateObject_1$
|
|
2466
|
+
var templateObject_1$A;
|
|
2392
2467
|
|
|
2393
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
2468
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n transition: all 0.25s ease;\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 transition: all 0.25s ease;\n ", "\n // transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
|
|
2394
2469
|
var theme = _a.theme;
|
|
2395
2470
|
return theme.borders.sm;
|
|
2396
2471
|
}, function (_a) {
|
|
@@ -2418,13 +2493,13 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$y || (t
|
|
|
2418
2493
|
- To give a consistent dashboard and navigation experience
|
|
2419
2494
|
*/
|
|
2420
2495
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
2421
|
-
var templateObject_1$
|
|
2496
|
+
var templateObject_1$z;
|
|
2422
2497
|
|
|
2423
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
2498
|
+
var SelectedItemStyle = styled.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2424
2499
|
var theme = _a.theme;
|
|
2425
2500
|
return theme.palette.kale["100"];
|
|
2426
2501
|
});
|
|
2427
|
-
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$
|
|
2502
|
+
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n ", "\n &:focus {\n ", "\n }\n &:hover {\n background-color: ", ";\n }\n color: ", ";\n font-weight: ", ";\n ", "\n margin: ", " 0;\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n ", "\n &:focus {\n ", "\n }\n &:hover {\n background-color: ", ";\n }\n color: ", ";\n font-weight: ", ";\n ", "\n margin: ", " 0;\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
|
|
2428
2503
|
var theme = _a.theme;
|
|
2429
2504
|
return theme.fonts.system;
|
|
2430
2505
|
}, sidebarNavItemExpanded, function (props) { return !props.isExpanded && sidebarNavItemHidden; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (_a) {
|
|
@@ -2438,11 +2513,11 @@ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject
|
|
|
2438
2513
|
return theme.space.xs;
|
|
2439
2514
|
});
|
|
2440
2515
|
var NavItem = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem$2, __assign({ ref: ref }, props)); });
|
|
2441
|
-
var templateObject_1$
|
|
2516
|
+
var templateObject_1$y, templateObject_2$i;
|
|
2442
2517
|
|
|
2443
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
2518
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
|
|
2444
2519
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2445
|
-
var templateObject_1$
|
|
2520
|
+
var templateObject_1$x;
|
|
2446
2521
|
|
|
2447
2522
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "158px" } }, { children: props.children })) }))); };
|
|
2448
2523
|
|
|
@@ -2476,7 +2551,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2476
2551
|
})));
|
|
2477
2552
|
};
|
|
2478
2553
|
|
|
2479
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
2554
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$w || (templateObject_1$w = __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) {
|
|
2480
2555
|
var theme = _a.theme;
|
|
2481
2556
|
return theme.space.base * 6;
|
|
2482
2557
|
}, function (_a) {
|
|
@@ -2501,14 +2576,14 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$v ||
|
|
|
2501
2576
|
var NavToggle = function (props) {
|
|
2502
2577
|
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%" } })) })));
|
|
2503
2578
|
};
|
|
2504
|
-
var templateObject_1$
|
|
2579
|
+
var templateObject_1$w;
|
|
2505
2580
|
|
|
2506
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
2581
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n width: 100%;\n min-height: 8px;\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: 8px;\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.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;"; });
|
|
2507
2582
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2508
|
-
var templateObject_1$
|
|
2583
|
+
var templateObject_1$v;
|
|
2509
2584
|
|
|
2510
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
2511
|
-
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$
|
|
2585
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$u || (templateObject_1$u = __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; });
|
|
2586
|
+
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n padding: 12px 8px;\n opacity: 1;\n padding-left: ", "; //Accordion Alingment\n"], ["\n flex-flow: column;\n align-items: flex-start;\n padding: 12px 8px;\n opacity: 1;\n padding-left: ", "; //Accordion Alingment\n"])), function (_a) {
|
|
2512
2587
|
var theme = _a.theme;
|
|
2513
2588
|
return theme.space.xxl;
|
|
2514
2589
|
});
|
|
@@ -2516,7 +2591,7 @@ var NavItemComponent = React.forwardRef(function (props, ref) { return jsxRuntim
|
|
|
2516
2591
|
var NavItemProject = NavItemComponent;
|
|
2517
2592
|
NavItemProject.Title = NavItemText;
|
|
2518
2593
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2519
|
-
var templateObject_1$
|
|
2594
|
+
var templateObject_1$u, templateObject_2$h;
|
|
2520
2595
|
|
|
2521
2596
|
var _path$a;
|
|
2522
2597
|
function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
|
|
@@ -2672,7 +2747,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2672
2747
|
})))));
|
|
2673
2748
|
};
|
|
2674
2749
|
|
|
2675
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
2750
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
2676
2751
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2677
2752
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2678
2753
|
});
|
|
@@ -2680,20 +2755,20 @@ var LoadingSidebar = function (props) {
|
|
|
2680
2755
|
var isExpanded = props.isExpanded;
|
|
2681
2756
|
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%" })] }), 4), 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" })] }))] })));
|
|
2682
2757
|
};
|
|
2683
|
-
var templateObject_1$
|
|
2758
|
+
var templateObject_1$t;
|
|
2684
2759
|
|
|
2685
|
-
var AccordionItem = styled__default["default"](Accordion)(templateObject_1$
|
|
2760
|
+
var AccordionItem = styled__default["default"](Accordion)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n opacity: 1;\n ", "\n ", "\n order: 1;\n margin-top: ", "px;\n"], ["\n opacity: 1;\n ", "\n ", "\n order: 1;\n margin-top: ", "px;\n"])), sidebarNavItemExpanded, function (props) { return !props.isExpanded && sidebarNavItemHidden; }, function (_a) {
|
|
2686
2761
|
var theme = _a.theme;
|
|
2687
2762
|
return theme.space.xs;
|
|
2688
2763
|
});
|
|
2689
|
-
var AccordionItemHeader = styled__default["default"](Accordion.Header)(templateObject_2$
|
|
2764
|
+
var AccordionItemHeader = styled__default["default"](Accordion.Header)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n flex-direction: row-reverse;\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n\n > button {\n padding-left: 2px;\n }\n\n svg {\n width: 26px;\n }\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n flex-direction: row-reverse;\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n\n > button {\n padding-left: 2px;\n }\n\n svg {\n width: 26px;\n }\n\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
2690
2765
|
var theme = _a.theme;
|
|
2691
2766
|
return theme.space.base * 6;
|
|
2692
2767
|
}, function (_a) {
|
|
2693
2768
|
var theme = _a.theme;
|
|
2694
2769
|
return theme.space.base * 6;
|
|
2695
2770
|
}, function (props) { return props.theme.palette.kale["200"]; });
|
|
2696
|
-
var AccordionItemPanel = styled__default["default"](Accordion.Panel)(templateObject_3$
|
|
2771
|
+
var AccordionItemPanel = styled__default["default"](Accordion.Panel)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n max-height: 180px;\n padding: 0;\n padding-left: 5px;\n overflow-y: hidden;\n opacity: 1;\n &:hover {\n overflow-y: auto;\n }\n"], ["\n max-height: 180px;\n padding: 0;\n padding-left: 5px;\n overflow-y: hidden;\n opacity: 1;\n &:hover {\n overflow-y: auto;\n }\n"])));
|
|
2697
2772
|
var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n padding: 12px 9px;\n ", "\n"], ["\n padding: 12px 9px;\n ", "\n"])), function (_a) {
|
|
2698
2773
|
var theme = _a.theme;
|
|
2699
2774
|
return "\n color: ".concat(theme.colors.primaryHue, ";\n fill: ").concat(theme.colors.primaryHue, ";\n font-weight: ").concat(theme.fontWeights.medium, ";\n ");
|
|
@@ -2701,11 +2776,11 @@ var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObj
|
|
|
2701
2776
|
AccordionItem.Panel = AccordionItemPanel;
|
|
2702
2777
|
AccordionItem.Header = AccordionItemHeader;
|
|
2703
2778
|
AccordionItem.Label = AccordionItemLabel;
|
|
2704
|
-
var templateObject_1$
|
|
2779
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$e, templateObject_4$a;
|
|
2705
2780
|
|
|
2706
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
2707
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_2$
|
|
2708
|
-
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$
|
|
2781
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
2782
|
+
var ScrollingContainer = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n height: 100%;\n"])));
|
|
2783
|
+
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$d || (templateObject_3$d = __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) {
|
|
2709
2784
|
var isExpanded = _a.isExpanded;
|
|
2710
2785
|
return isExpanded &&
|
|
2711
2786
|
"\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
|
|
@@ -2761,9 +2836,9 @@ var Sidebar = function (_a) {
|
|
|
2761
2836
|
color: theme.palette.grey[800],
|
|
2762
2837
|
} }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))] }))] }), 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" })] }))] })));
|
|
2763
2838
|
};
|
|
2764
|
-
var templateObject_1$
|
|
2839
|
+
var templateObject_1$r, templateObject_2$f, templateObject_3$d, templateObject_4$9;
|
|
2765
2840
|
|
|
2766
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
2841
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$q || (templateObject_1$q = __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) {
|
|
2767
2842
|
var theme = _a.theme;
|
|
2768
2843
|
return theme.breakpoints.sm;
|
|
2769
2844
|
}, function (_a) {
|
|
@@ -2774,21 +2849,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$p ||
|
|
|
2774
2849
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2775
2850
|
*/
|
|
2776
2851
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2777
|
-
var templateObject_1$
|
|
2852
|
+
var templateObject_1$q;
|
|
2778
2853
|
|
|
2779
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
2854
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$p || (templateObject_1$p = __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]);
|
|
2780
2855
|
var PageLoader = function () {
|
|
2781
2856
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2782
2857
|
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: "" }) }))] })] })] })] }) })));
|
|
2783
2858
|
};
|
|
2784
|
-
var templateObject_1$
|
|
2859
|
+
var templateObject_1$p;
|
|
2785
2860
|
|
|
2786
2861
|
/**
|
|
2787
2862
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2788
2863
|
*/
|
|
2789
2864
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2790
2865
|
|
|
2791
|
-
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$
|
|
2866
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$o || (templateObject_1$o = __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);
|
|
2792
2867
|
/**
|
|
2793
2868
|
* Login Form
|
|
2794
2869
|
* <hr>
|
|
@@ -2819,9 +2894,9 @@ var LoginForm = function (props) {
|
|
|
2819
2894
|
: 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 })) })))] })));
|
|
2820
2895
|
} }))] })), 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"] })))] }));
|
|
2821
2896
|
};
|
|
2822
|
-
var templateObject_1$
|
|
2897
|
+
var templateObject_1$o;
|
|
2823
2898
|
|
|
2824
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
2899
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
2825
2900
|
var theme = _a.theme;
|
|
2826
2901
|
return theme.palette.grey["800"];
|
|
2827
2902
|
});
|
|
@@ -2830,10 +2905,10 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2830
2905
|
Modal.Header = reactModals.Header;
|
|
2831
2906
|
Modal.Body = ugModalBody;
|
|
2832
2907
|
Modal.Footer = reactModals.Footer;
|
|
2833
|
-
var templateObject_1$
|
|
2908
|
+
var templateObject_1$n;
|
|
2834
2909
|
|
|
2835
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
2836
|
-
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$
|
|
2910
|
+
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
2911
|
+
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2837
2912
|
var theme = _a.theme;
|
|
2838
2913
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
2839
2914
|
}, function (_a) {
|
|
@@ -2843,7 +2918,7 @@ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$d |
|
|
|
2843
2918
|
var theme = _a.theme;
|
|
2844
2919
|
return theme.space.md;
|
|
2845
2920
|
});
|
|
2846
|
-
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$
|
|
2921
|
+
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2847
2922
|
var theme = _a.theme;
|
|
2848
2923
|
return theme.palette.grey["100"];
|
|
2849
2924
|
}, function (_a) {
|
|
@@ -2870,7 +2945,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2870
2945
|
ModalFullScreen.Footer = StyledFooter;
|
|
2871
2946
|
ModalFullScreen.Close = StyledModalClose;
|
|
2872
2947
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2873
|
-
var templateObject_1$
|
|
2948
|
+
var templateObject_1$m, templateObject_2$e, templateObject_3$c, templateObject_4$8, templateObject_5$4;
|
|
2874
2949
|
|
|
2875
2950
|
/**
|
|
2876
2951
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2891,7 +2966,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2891
2966
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2892
2967
|
var useToast = reactNotifications.useToast;
|
|
2893
2968
|
|
|
2894
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2969
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
|
|
2895
2970
|
/**
|
|
2896
2971
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2897
2972
|
|
|
@@ -2901,17 +2976,17 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2901
2976
|
*/
|
|
2902
2977
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2903
2978
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2904
|
-
var templateObject_1$
|
|
2979
|
+
var templateObject_1$l;
|
|
2905
2980
|
|
|
2906
|
-
var MainContainer = styled__default["default"].div(templateObject_1$
|
|
2907
|
-
var InformationContainer = styled__default["default"].div(templateObject_2$
|
|
2981
|
+
var MainContainer = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2982
|
+
var InformationContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __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\n @media screen and (max-width: ", ") \n height: auto;\n } \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\n @media screen and (max-width: ", ") \n height: auto;\n } \n"])), function (_a) {
|
|
2908
2983
|
var theme = _a.theme;
|
|
2909
2984
|
return theme.space.xs;
|
|
2910
2985
|
}, function (_a) {
|
|
2911
2986
|
var theme = _a.theme;
|
|
2912
2987
|
return theme.breakpoints.sm;
|
|
2913
2988
|
});
|
|
2914
|
-
var MetaContainer = styled__default["default"].div(templateObject_3$
|
|
2989
|
+
var MetaContainer = styled__default["default"].div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
2915
2990
|
var theme = _a.theme;
|
|
2916
2991
|
return theme.breakpoints.sm;
|
|
2917
2992
|
});
|
|
@@ -2966,13 +3041,13 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2966
3041
|
var Main = function (props) {
|
|
2967
3042
|
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(InformationContainer, { children: props.children }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
|
|
2968
3043
|
};
|
|
2969
|
-
var templateObject_1$
|
|
3044
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2970
3045
|
|
|
2971
|
-
var PageContainer = styled__default["default"].div(templateObject_1$
|
|
3046
|
+
var PageContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2972
3047
|
var theme = _a.theme;
|
|
2973
3048
|
return theme.palette.white;
|
|
2974
3049
|
});
|
|
2975
|
-
var StyledPageHeader = styled__default["default"].div(templateObject_2$
|
|
3050
|
+
var StyledPageHeader = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n\n max-width: ", ";\n\n @media (min-width: ", ") {\n margin: 0 auto;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n\n max-width: ", ";\n\n @media (min-width: ", ") {\n margin: 0 auto;\n }\n"])), function (_a) {
|
|
2976
3051
|
var theme = _a.theme;
|
|
2977
3052
|
return "".concat(theme.space.xxl, " ").concat(theme.space.xxl, " ").concat(theme.space.md);
|
|
2978
3053
|
}, function (_a) {
|
|
@@ -2991,7 +3066,7 @@ var StyledPageHeader = styled__default["default"].div(templateObject_2$b || (tem
|
|
|
2991
3066
|
var theme = _a.theme;
|
|
2992
3067
|
return theme.breakpoints.xxl;
|
|
2993
3068
|
});
|
|
2994
|
-
var PullLeft = styled__default["default"].div(templateObject_3$
|
|
3069
|
+
var PullLeft = styled__default["default"].div(templateObject_3$a || (templateObject_3$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 padding: ", ";\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 padding: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
|
|
2995
3070
|
var theme = _a.theme;
|
|
2996
3071
|
return "".concat(theme.space.xs, " 10px");
|
|
2997
3072
|
}, function (_a) {
|
|
@@ -3023,7 +3098,7 @@ PageHeader.Overline = MainOverline;
|
|
|
3023
3098
|
PageHeader.Title = MainTitle;
|
|
3024
3099
|
PageHeader.Description = MainDescription;
|
|
3025
3100
|
PageHeader.Counters = MainCounters;
|
|
3026
|
-
var templateObject_1$
|
|
3101
|
+
var templateObject_1$j, templateObject_2$c, templateObject_3$a, templateObject_4$6;
|
|
3027
3102
|
|
|
3028
3103
|
var _path$5;
|
|
3029
3104
|
function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
|
|
@@ -3058,13 +3133,13 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
3058
3133
|
})));
|
|
3059
3134
|
};
|
|
3060
3135
|
|
|
3061
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
3136
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __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; });
|
|
3062
3137
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
3063
|
-
var templateObject_1$
|
|
3138
|
+
var templateObject_1$i;
|
|
3064
3139
|
|
|
3065
|
-
var flexCenter = styled.css(templateObject_1$
|
|
3066
|
-
var flexColumnCenter = styled.css(templateObject_2$
|
|
3067
|
-
var flexStart = styled.css(templateObject_3$
|
|
3140
|
+
var flexCenter = styled.css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3141
|
+
var flexColumnCenter = styled.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
3142
|
+
var flexStart = styled.css(templateObject_3$9 || (templateObject_3$9 = __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) {
|
|
3068
3143
|
var theme = _a.theme;
|
|
3069
3144
|
return (theme.rtl ? "flex-end" : "flex-start");
|
|
3070
3145
|
});
|
|
@@ -3081,19 +3156,19 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
3081
3156
|
var theme = _a.theme;
|
|
3082
3157
|
return theme.shadows.boxShadow(theme);
|
|
3083
3158
|
});
|
|
3084
|
-
var templateObject_1$
|
|
3159
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$5;
|
|
3085
3160
|
|
|
3086
3161
|
/**
|
|
3087
3162
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
3088
3163
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
3089
3164
|
**/
|
|
3090
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
3165
|
+
var StyledItem = styled__default["default"].li(templateObject_1$g || (templateObject_1$g = __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) {
|
|
3091
3166
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
3092
3167
|
}, function (props) {
|
|
3093
3168
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
3094
3169
|
});
|
|
3095
|
-
var StyledBody$3 = styled__default["default"].li(templateObject_2$
|
|
3096
|
-
var IconContainer = styled__default["default"].div(templateObject_3$
|
|
3170
|
+
var StyledBody$3 = styled__default["default"].li(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
3171
|
+
var IconContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
|
|
3097
3172
|
var theme = _a.theme;
|
|
3098
3173
|
return theme.space.sm;
|
|
3099
3174
|
});
|
|
@@ -3106,7 +3181,7 @@ var MenuItem = function (_a) {
|
|
|
3106
3181
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
3107
3182
|
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));
|
|
3108
3183
|
};
|
|
3109
|
-
var templateObject_1$
|
|
3184
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$4;
|
|
3110
3185
|
|
|
3111
3186
|
var _path$3;
|
|
3112
3187
|
function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
|
|
@@ -3157,16 +3232,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
3157
3232
|
})));
|
|
3158
3233
|
};
|
|
3159
3234
|
|
|
3160
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
3235
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$f || (templateObject_1$f = __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 }"); });
|
|
3161
3236
|
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] }))); };
|
|
3162
|
-
var templateObject_1$
|
|
3237
|
+
var templateObject_1$f;
|
|
3163
3238
|
|
|
3164
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
3239
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject([""], [""])));
|
|
3165
3240
|
/**
|
|
3166
3241
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
3167
3242
|
*/
|
|
3168
3243
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
3169
|
-
var templateObject_1$
|
|
3244
|
+
var templateObject_1$e;
|
|
3170
3245
|
|
|
3171
3246
|
var getInitials = function (name) {
|
|
3172
3247
|
var names = name.split(" ");
|
|
@@ -3174,9 +3249,9 @@ var getInitials = function (name) {
|
|
|
3174
3249
|
return initials;
|
|
3175
3250
|
};
|
|
3176
3251
|
|
|
3177
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
3178
|
-
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$
|
|
3179
|
-
var StyledBody$2 = styled__default["default"].div(templateObject_3$
|
|
3252
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
3253
|
+
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
|
|
3254
|
+
var StyledBody$2 = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
3180
3255
|
var theme = _a.theme;
|
|
3181
3256
|
return theme.space.base * 6;
|
|
3182
3257
|
}, function (_a) {
|
|
@@ -3203,7 +3278,7 @@ var HelpItem = function (props) {
|
|
|
3203
3278
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
|
|
3204
3279
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
|
|
3205
3280
|
};
|
|
3206
|
-
var templateObject_1$
|
|
3281
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
3207
3282
|
|
|
3208
3283
|
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
3209
3284
|
var SvgEmpty = function SvgEmpty(props) {
|
|
@@ -3232,30 +3307,30 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
3232
3307
|
})));
|
|
3233
3308
|
};
|
|
3234
3309
|
|
|
3235
|
-
var StyledBody$1 = styled__default["default"].div(templateObject_1$
|
|
3310
|
+
var StyledBody$1 = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
3236
3311
|
var theme = _a.theme;
|
|
3237
3312
|
return theme.space.base * 6;
|
|
3238
3313
|
}, function (_a) {
|
|
3239
3314
|
var theme = _a.theme;
|
|
3240
3315
|
return theme.space.base * 4;
|
|
3241
3316
|
});
|
|
3242
|
-
var StyledButtonContainer = styled__default["default"].div(templateObject_2$
|
|
3243
|
-
var StyledButton = styled__default["default"](Button)(templateObject_3$
|
|
3317
|
+
var StyledButtonContainer = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n & button { \n justify-content: flex-start;\n }\n"], ["\n ", "\n & button { \n justify-content: flex-start;\n }\n"])), flexStart);
|
|
3318
|
+
var StyledButton = styled__default["default"](Button)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
3244
3319
|
var LanguageItem = function (props) {
|
|
3245
3320
|
var _a;
|
|
3246
3321
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(StyledButton, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
|
|
3247
3322
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
|
|
3248
3323
|
};
|
|
3249
|
-
var templateObject_1$
|
|
3324
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$6;
|
|
3250
3325
|
|
|
3251
|
-
var ProfileContainer = styled__default["default"].div(templateObject_1$
|
|
3326
|
+
var ProfileContainer = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
3252
3327
|
var theme = _a.theme;
|
|
3253
3328
|
return theme.space.base * 2;
|
|
3254
3329
|
}, function (_a) {
|
|
3255
3330
|
var theme = _a.theme;
|
|
3256
3331
|
return theme.space.base * 6;
|
|
3257
3332
|
});
|
|
3258
|
-
var CompanyHolder = styled__default["default"](SM)(templateObject_2$
|
|
3333
|
+
var CompanyHolder = styled__default["default"](SM)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"], ["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"])), function (_a) {
|
|
3259
3334
|
var theme = _a.theme;
|
|
3260
3335
|
return theme.space.base * 2;
|
|
3261
3336
|
}, function (_a) {
|
|
@@ -3265,7 +3340,7 @@ var CompanyHolder = styled__default["default"](SM)(templateObject_2$6 || (templa
|
|
|
3265
3340
|
var theme = _a.theme;
|
|
3266
3341
|
return theme.colors.primaryHue;
|
|
3267
3342
|
});
|
|
3268
|
-
var UserDetails = styled__default["default"].div(templateObject_3$
|
|
3343
|
+
var UserDetails = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"])), function (_a) {
|
|
3269
3344
|
var theme = _a.theme;
|
|
3270
3345
|
return theme.space.base * 4;
|
|
3271
3346
|
}, function (_a) {
|
|
@@ -3276,9 +3351,9 @@ var UserContainer = function (props) {
|
|
|
3276
3351
|
var _a;
|
|
3277
3352
|
return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, __assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
|
|
3278
3353
|
};
|
|
3279
|
-
var templateObject_1$
|
|
3354
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$5;
|
|
3280
3355
|
|
|
3281
|
-
var StyledList = styled__default["default"].ul(templateObject_1$
|
|
3356
|
+
var StyledList = styled__default["default"].ul(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
|
|
3282
3357
|
var UserMenu = function (props) {
|
|
3283
3358
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
3284
3359
|
var toggleItem = function (item) {
|
|
@@ -3286,9 +3361,9 @@ var UserMenu = function (props) {
|
|
|
3286
3361
|
};
|
|
3287
3362
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && props.onFeedbackClick && jsxRuntime.jsx(Separator, {}), props.onFeedbackClick && (jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick ? props.onFeedbackClick() : console.log("feedback fired"); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) }))), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat, chatSupportLabel: props === null || props === void 0 ? void 0 : props.chatSupportLabel, copyLabel: props === null || props === void 0 ? void 0 : props.copyLabel }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
|
|
3288
3363
|
};
|
|
3289
|
-
var templateObject_1$
|
|
3364
|
+
var templateObject_1$a;
|
|
3290
3365
|
|
|
3291
|
-
var StyledModal = styled__default["default"](Modal)(templateObject_1$
|
|
3366
|
+
var StyledModal = styled__default["default"](Modal)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"], ["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"])), function (_a) {
|
|
3292
3367
|
var theme = _a.theme;
|
|
3293
3368
|
return theme.space.xxl;
|
|
3294
3369
|
}, function (_a) {
|
|
@@ -3301,7 +3376,7 @@ var StyledModal = styled__default["default"](Modal)(templateObject_1$8 || (templ
|
|
|
3301
3376
|
var theme = _a.theme;
|
|
3302
3377
|
return theme.space.base * 3;
|
|
3303
3378
|
});
|
|
3304
|
-
var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$
|
|
3379
|
+
var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n margin: ", ";\n padding: 0;\n"], ["\n margin: ", ";\n padding: 0;\n"])), function (_a) {
|
|
3305
3380
|
var theme = _a.theme;
|
|
3306
3381
|
return theme.space.xxs + " " + theme.space.xs;
|
|
3307
3382
|
});
|
|
@@ -3326,14 +3401,14 @@ var ProfileModal = function (_a) {
|
|
|
3326
3401
|
};
|
|
3327
3402
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
3328
3403
|
};
|
|
3329
|
-
var templateObject_1$
|
|
3404
|
+
var templateObject_1$9, templateObject_2$6;
|
|
3330
3405
|
|
|
3331
|
-
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$
|
|
3406
|
+
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n svg {\n color: ", ";\n }\n"], ["\n svg {\n color: ", ";\n }\n"])), function (_a) {
|
|
3332
3407
|
var theme = _a.theme;
|
|
3333
3408
|
return theme.palette.green[700];
|
|
3334
3409
|
});
|
|
3335
|
-
var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$
|
|
3336
|
-
var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$
|
|
3410
|
+
var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject([""], [""])));
|
|
3411
|
+
var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"], ["\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"])), function (_a) {
|
|
3337
3412
|
var theme = _a.theme;
|
|
3338
3413
|
return theme.palette.grey[200];
|
|
3339
3414
|
}, function (_a) {
|
|
@@ -3368,17 +3443,17 @@ var Stepper = function (props) {
|
|
|
3368
3443
|
Stepper.Step = UgStep;
|
|
3369
3444
|
Stepper.Label = UgLabel;
|
|
3370
3445
|
Stepper.Content = UgContent;
|
|
3371
|
-
var templateObject_1$
|
|
3446
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$4, templateObject_4$2, templateObject_5$1;
|
|
3372
3447
|
|
|
3373
|
-
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$
|
|
3448
|
+
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"], ["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"])), function (_a) {
|
|
3374
3449
|
var theme = _a.theme;
|
|
3375
3450
|
return theme.palette.grey[300];
|
|
3376
3451
|
}, function (_a) {
|
|
3377
3452
|
var theme = _a.theme;
|
|
3378
3453
|
return theme.borderRadii.lg;
|
|
3379
3454
|
});
|
|
3380
|
-
var UgHeaderRow = styled__default["default"](reactTables.HeaderRow)(templateObject_2$
|
|
3381
|
-
var UgHeaderCell = styled__default["default"](reactTables.HeaderCell)(templateObject_3$
|
|
3455
|
+
var UgHeaderRow = styled__default["default"](reactTables.HeaderRow)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n border: 0;\n"], ["\n border: 0;\n"])));
|
|
3456
|
+
var UgHeaderCell = styled__default["default"](reactTables.HeaderCell)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"], ["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"])), function (_a) {
|
|
3382
3457
|
var theme = _a.theme;
|
|
3383
3458
|
return theme.palette.grey[300];
|
|
3384
3459
|
});
|
|
@@ -3405,11 +3480,11 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
3405
3480
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
3406
3481
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
3407
3482
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
3408
|
-
var templateObject_1$
|
|
3483
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$1, templateObject_5;
|
|
3409
3484
|
|
|
3410
|
-
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$
|
|
3411
|
-
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$
|
|
3412
|
-
var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3$
|
|
3485
|
+
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
|
|
3486
|
+
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject([""], [""])));
|
|
3487
|
+
var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"], ["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"])), theme.palette.grey[500], theme.fontSizes.sm);
|
|
3413
3488
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
3414
3489
|
var GroupRowComponent = function (props) {
|
|
3415
3490
|
var toggleIconAnimation = reactSpring.useSpring({
|
|
@@ -3438,31 +3513,74 @@ var GroupedTable = function (_a) {
|
|
|
3438
3513
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
3439
3514
|
}) })] })));
|
|
3440
3515
|
};
|
|
3441
|
-
var templateObject_1$
|
|
3442
|
-
|
|
3443
|
-
/**
|
|
3444
|
-
* Use Tabs to organize related content in a single view. This helps users navigate related content without having to switch contexts.
|
|
3445
|
-
|
|
3446
|
-
* Used for this:
|
|
3447
|
-
- To filter information into easily parsable views
|
|
3448
|
-
- To organize related content and controls within a single page
|
|
3516
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4;
|
|
3449
3517
|
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
var
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3518
|
+
var StyledNavButton = styled__default["default"](reactButtons.Button)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding: 10px 28px 6px;\n color: ", ";\n border-bottom: ", " transparent;\n border-width: 0 0 ", " 0;\n border-radius: 0;\n\n ", "\n\n ", "\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n"], ["\n padding: 10px 28px 6px;\n color: ", ";\n border-bottom: ", " transparent;\n border-width: 0 0 ", " 0;\n border-radius: 0;\n\n ", "\n\n ", "\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n"])), function (_a) {
|
|
3519
|
+
var theme = _a.theme;
|
|
3520
|
+
return theme.palette.grey[600];
|
|
3521
|
+
}, function (_a) {
|
|
3522
|
+
var theme = _a.theme;
|
|
3523
|
+
return theme.borderStyles.solid;
|
|
3524
|
+
}, function (_a) {
|
|
3525
|
+
var theme = _a.theme;
|
|
3526
|
+
return theme.borderWidths.md;
|
|
3527
|
+
}, function (_a) {
|
|
3528
|
+
var theme = _a.theme, isSelected = _a.isSelected;
|
|
3529
|
+
return isSelected &&
|
|
3530
|
+
"\n color: ".concat(theme.colors.primaryHue, ";\n background-color: transparent;\n \n border-color: ").concat(theme.colors.primaryHue, ";\n font-weight: ").concat(theme.fontWeights.semibold, ";\n ");
|
|
3531
|
+
}, function (_a) {
|
|
3532
|
+
var disabled = _a.disabled;
|
|
3533
|
+
return disabled &&
|
|
3534
|
+
"\n pointer-events: none; \n background-color: transparent !important;\n ";
|
|
3535
|
+
}, function (_a) {
|
|
3536
|
+
var theme = _a.theme;
|
|
3537
|
+
return theme.colors.primaryHue;
|
|
3538
|
+
});
|
|
3539
|
+
var StyledTabList = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n margin-bottom: ", ";\n"], ["\n border-bottom: 1px solid ", ";\n margin-bottom: ", ";\n"])), function (_a) {
|
|
3540
|
+
var theme = _a.theme;
|
|
3541
|
+
return theme.palette.grey[300];
|
|
3542
|
+
}, function (_a) {
|
|
3543
|
+
var theme = _a.theme;
|
|
3544
|
+
return theme.space.md;
|
|
3545
|
+
});
|
|
3546
|
+
var StyledTabPanel = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: ", ";\n height: 100%;\n overflow-y: auto;\n"], ["\n display: ", ";\n height: 100%;\n overflow-y: auto;\n"])), function (_a) {
|
|
3547
|
+
var hidden = _a.hidden;
|
|
3548
|
+
return (hidden ? "none" : "block");
|
|
3549
|
+
});
|
|
3550
|
+
var TabPanel = function (props) { return (jsxRuntime.jsx(StyledTabPanel, __assign({ hidden: props.hidden }, { children: props.children }))); };
|
|
3551
|
+
var TabNavItem = function (props) {
|
|
3552
|
+
var children = props.children, isSelected = props.isSelected, isDisabled = props.isDisabled, index = props.index, setSelectedTab = props.setSelectedTab;
|
|
3553
|
+
var handleTabClick = React.useCallback(function () {
|
|
3554
|
+
setSelectedTab(index);
|
|
3555
|
+
}, [setSelectedTab, index]);
|
|
3556
|
+
return (jsxRuntime.jsx(StyledNavButton, __assign({ disabled: isDisabled, onClick: handleTabClick, isBasic: true, isSelected: isSelected }, { children: children })));
|
|
3557
|
+
};
|
|
3558
|
+
var Tabs = function (props) {
|
|
3559
|
+
var children = props.children, selectedIndex = props.selectedIndex;
|
|
3560
|
+
var tabs = React.Children.toArray(children);
|
|
3561
|
+
// Filter valid elements
|
|
3562
|
+
var tabPanels = tabs.filter(function (tab) { return typeof tab !== "string" && typeof tab !== "number"; });
|
|
3563
|
+
var internalIndex = selectedIndex && selectedIndex < tabPanels.length ? selectedIndex : 0;
|
|
3564
|
+
// SelectedItem or first child
|
|
3565
|
+
var _a = React.useState(internalIndex), selectedTabIndex = _a[0], setSelectedTabIndex = _a[1];
|
|
3566
|
+
React.useEffect(function () {
|
|
3567
|
+
if (props.onTabChange) {
|
|
3568
|
+
props.onTabChange(selectedTabIndex);
|
|
3569
|
+
}
|
|
3570
|
+
}, [selectedTabIndex]);
|
|
3571
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledTabList, { children: tabPanels.map(function (item, index) {
|
|
3572
|
+
var _a;
|
|
3573
|
+
return React__default["default"].isValidElement(item) ? (jsxRuntime.jsx(TabNavItem, __assign({ index: index, isSelected: index === selectedTabIndex, setSelectedTab: setSelectedTabIndex }, item.props, { children: (_a = item.props) === null || _a === void 0 ? void 0 : _a.title }))) : null;
|
|
3574
|
+
}) }), tabPanels.map(function (item, index) {
|
|
3575
|
+
if (React__default["default"].isValidElement(item) &&
|
|
3576
|
+
index !== selectedTabIndex) {
|
|
3577
|
+
return React__default["default"].cloneElement(item, { hidden: true });
|
|
3578
|
+
}
|
|
3579
|
+
return item;
|
|
3580
|
+
})] }));
|
|
3581
|
+
};
|
|
3582
|
+
Tabs.Panel = TabPanel;
|
|
3583
|
+
var templateObject_1$5, templateObject_2$2, templateObject_3$1;
|
|
3466
3584
|
|
|
3467
3585
|
/**
|
|
3468
3586
|
* Tiles are Radio buttons styled with icons or images.
|