@appquality/unguess-design-system 2.12.38 → 2.12.40
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 +32 -0
- package/build/index.d.ts +1 -0
- package/build/index.js +387 -254
- 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 +16 -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
|
@@ -61,6 +61,7 @@ function _interopNamespace(e) {
|
|
|
61
61
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
62
62
|
var UAParser__default = /*#__PURE__*/_interopDefaultLegacy(UAParser);
|
|
63
63
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
64
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
64
65
|
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
|
|
65
66
|
var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
|
|
66
67
|
var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
|
|
@@ -265,10 +266,10 @@ var isMac = function () {
|
|
|
265
266
|
var os = parser.getOS().name;
|
|
266
267
|
return os && /Mac OS|iOS/.test(os);
|
|
267
268
|
};
|
|
268
|
-
styled.css(templateObject_1$
|
|
269
|
-
var sidebarNavItemExpanded = styled.css(templateObject_2$
|
|
270
|
-
var sidebarNavItemHidden = styled.css(templateObject_3$
|
|
271
|
-
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$m || (templateObject_3$m = __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$m;
|
|
272
273
|
|
|
273
274
|
var gradients = {
|
|
274
275
|
horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
|
|
@@ -289,8 +290,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
289
290
|
|
|
290
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 }) });
|
|
291
292
|
|
|
292
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
293
|
-
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;
|
|
294
295
|
|
|
295
296
|
/**
|
|
296
297
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -306,14 +307,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
306
307
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
307
308
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
308
309
|
|
|
309
|
-
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) {
|
|
310
311
|
var theme = _a.theme;
|
|
311
312
|
return theme.palette.grey[700];
|
|
312
313
|
}, function (_a) {
|
|
313
314
|
var theme = _a.theme;
|
|
314
315
|
return theme.fontSizes.sm;
|
|
315
316
|
});
|
|
316
|
-
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) {
|
|
317
318
|
var theme = _a.theme;
|
|
318
319
|
return theme.fontSizes.md;
|
|
319
320
|
});
|
|
@@ -327,9 +328,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
327
328
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
328
329
|
Alert.Title = UgAlertTitle;
|
|
329
330
|
Alert.Close = reactNotifications.Close;
|
|
330
|
-
var templateObject_1$
|
|
331
|
+
var templateObject_1$1o, templateObject_2$z;
|
|
331
332
|
|
|
332
|
-
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) {
|
|
333
334
|
return props.avatarType &&
|
|
334
335
|
props.avatarType !== "image" &&
|
|
335
336
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -353,7 +354,7 @@ var Avatar = function (props) {
|
|
|
353
354
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
354
355
|
};
|
|
355
356
|
Avatar.Text = UgAvatar.Text;
|
|
356
|
-
var templateObject_1$
|
|
357
|
+
var templateObject_1$1n;
|
|
357
358
|
|
|
358
359
|
/**
|
|
359
360
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -384,7 +385,7 @@ var getThemeStyle = function (props) {
|
|
|
384
385
|
}
|
|
385
386
|
return theme;
|
|
386
387
|
};
|
|
387
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
388
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject([""], [""])));
|
|
388
389
|
/**
|
|
389
390
|
* Buttons let users take action quickly.
|
|
390
391
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -403,7 +404,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
|
|
|
403
404
|
var Button = ButtonComponent;
|
|
404
405
|
Button.StartIcon = UgButton.StartIcon;
|
|
405
406
|
Button.EndIcon = UgButton.EndIcon;
|
|
406
|
-
var templateObject_1$
|
|
407
|
+
var templateObject_1$1m;
|
|
407
408
|
|
|
408
409
|
/**
|
|
409
410
|
A Button group lets users make a selection from a set of options.
|
|
@@ -433,7 +434,7 @@ Used for this:
|
|
|
433
434
|
**/
|
|
434
435
|
var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
|
|
435
436
|
|
|
436
|
-
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) {
|
|
437
438
|
var theme = _a.theme;
|
|
438
439
|
return theme.borderRadii.lg;
|
|
439
440
|
}, function (_a) {
|
|
@@ -454,7 +455,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
454
455
|
- To group related content
|
|
455
456
|
*/
|
|
456
457
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
457
|
-
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) {
|
|
458
459
|
var theme = _a.theme;
|
|
459
460
|
return theme.borderRadii.xl;
|
|
460
461
|
}, function (_a) {
|
|
@@ -471,7 +472,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
471
472
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
472
473
|
});
|
|
473
474
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
474
|
-
var templateObject_1$
|
|
475
|
+
var templateObject_1$1l, templateObject_2$y;
|
|
475
476
|
|
|
476
477
|
/**
|
|
477
478
|
* Tags let users categorize content using a keyword.
|
|
@@ -676,7 +677,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
676
677
|
})));
|
|
677
678
|
};
|
|
678
679
|
|
|
679
|
-
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) {
|
|
680
681
|
return props.isLight ?
|
|
681
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 ");
|
|
682
683
|
});
|
|
@@ -694,22 +695,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
694
695
|
- To communicate a typing status, use Inline instead
|
|
695
696
|
*/
|
|
696
697
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
697
|
-
var templateObject_1$
|
|
698
|
+
var templateObject_1$1k;
|
|
698
699
|
|
|
699
|
-
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) {
|
|
700
701
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
701
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 ");
|
|
702
703
|
});
|
|
703
|
-
var templateObject_1$
|
|
704
|
+
var templateObject_1$1j;
|
|
704
705
|
|
|
705
|
-
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) {
|
|
706
707
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
707
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 ");
|
|
708
709
|
});
|
|
709
710
|
CardThumbnail.defaultProps = {
|
|
710
711
|
align: "left"
|
|
711
712
|
};
|
|
712
|
-
var templateObject_1$
|
|
713
|
+
var templateObject_1$1i;
|
|
713
714
|
|
|
714
715
|
/**
|
|
715
716
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -721,11 +722,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
721
722
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
722
723
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
723
724
|
|
|
724
|
-
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) {
|
|
725
726
|
var theme = _a.theme;
|
|
726
727
|
return theme.palette.grey[500];
|
|
727
728
|
});
|
|
728
|
-
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) {
|
|
729
730
|
var theme = _a.theme;
|
|
730
731
|
return theme.colors.primaryHue;
|
|
731
732
|
}, function (_a) {
|
|
@@ -735,14 +736,14 @@ var Title$2 = styled__default["default"](LG)(templateObject_2$v || (templateObje
|
|
|
735
736
|
var theme = _a.theme;
|
|
736
737
|
return theme.space.xxs;
|
|
737
738
|
});
|
|
738
|
-
var Description$2 = styled__default["default"](MD)(templateObject_3$
|
|
739
|
+
var Description$2 = styled__default["default"](MD)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
739
740
|
var theme = _a.theme;
|
|
740
741
|
return theme.palette.grey[700];
|
|
741
742
|
}, function (_a) {
|
|
742
743
|
var theme = _a.theme;
|
|
743
744
|
return theme.space.xxs;
|
|
744
745
|
});
|
|
745
|
-
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) {
|
|
746
747
|
var theme = _a.theme, align = _a.align;
|
|
747
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 ");
|
|
748
749
|
});
|
|
@@ -750,9 +751,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
750
751
|
CardHeader.Label = Label$2;
|
|
751
752
|
CardHeader.Title = Title$2;
|
|
752
753
|
CardHeader.Text = Description$2;
|
|
753
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$1h, templateObject_2$x, templateObject_3$l, templateObject_4$g;
|
|
754
755
|
|
|
755
|
-
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) {
|
|
756
757
|
var theme = _a.theme;
|
|
757
758
|
return theme.space.base * 3;
|
|
758
759
|
}, function (_a) {
|
|
@@ -762,15 +763,15 @@ var Divider = styled__default["default"].div(templateObject_1$1e || (templateObj
|
|
|
762
763
|
var theme = _a.theme;
|
|
763
764
|
return theme.palette.grey["300"];
|
|
764
765
|
});
|
|
765
|
-
var Footer$2 = styled__default["default"].div(templateObject_2$
|
|
766
|
-
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$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
767
768
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
768
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 ");
|
|
769
770
|
});
|
|
770
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 }))] })); };
|
|
771
|
-
var templateObject_1$
|
|
772
|
+
var templateObject_1$1g, templateObject_2$w, templateObject_3$k;
|
|
772
773
|
|
|
773
|
-
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) {
|
|
774
775
|
var theme = _a.theme;
|
|
775
776
|
return theme.borderRadii.lg;
|
|
776
777
|
}, function (_a) {
|
|
@@ -800,7 +801,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
800
801
|
SpecialCard.Thumb = CardThumbnail;
|
|
801
802
|
SpecialCard.Header = CardHeader;
|
|
802
803
|
SpecialCard.Footer = CardFooter;
|
|
803
|
-
var templateObject_1$
|
|
804
|
+
var templateObject_1$1f;
|
|
804
805
|
|
|
805
806
|
var CampaignCardSkeleton = function () {
|
|
806
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%" } })] })] }));
|
|
@@ -833,11 +834,11 @@ var getTypeDataIcon = function (type) {
|
|
|
833
834
|
return SvgCampaignFunctional;
|
|
834
835
|
}
|
|
835
836
|
};
|
|
836
|
-
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) {
|
|
837
838
|
var theme = _a.theme;
|
|
838
839
|
return theme.palette.grey["700"];
|
|
839
840
|
});
|
|
840
|
-
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) {
|
|
841
842
|
var theme = _a.theme;
|
|
842
843
|
return theme.space.base * 6;
|
|
843
844
|
}, function (_a) {
|
|
@@ -850,7 +851,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$t || (temp
|
|
|
850
851
|
var theme = _a.theme;
|
|
851
852
|
return theme.palette.white;
|
|
852
853
|
});
|
|
853
|
-
var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$
|
|
854
|
+
var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
854
855
|
var theme = _a.theme;
|
|
855
856
|
return theme.palette.grey["500"];
|
|
856
857
|
});
|
|
@@ -860,9 +861,9 @@ var CampaignCard = function (_a) {
|
|
|
860
861
|
var PillIcon = getTypeDataIcon(type);
|
|
861
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, {})] })] })));
|
|
862
863
|
};
|
|
863
|
-
var templateObject_1$
|
|
864
|
+
var templateObject_1$1e, templateObject_2$v, templateObject_3$j;
|
|
864
865
|
|
|
865
|
-
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) {
|
|
866
867
|
var theme = _a.theme;
|
|
867
868
|
return theme.space.base * 6;
|
|
868
869
|
}, function (_a) {
|
|
@@ -879,16 +880,16 @@ var ProductCard = function (props) {
|
|
|
879
880
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
880
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 })) }))] })));
|
|
881
882
|
};
|
|
882
|
-
var templateObject_1$
|
|
883
|
+
var templateObject_1$1d;
|
|
883
884
|
|
|
884
|
-
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) {
|
|
885
886
|
var theme = _a.theme;
|
|
886
887
|
return theme.palette.grey[500];
|
|
887
888
|
}, function (_a) {
|
|
888
889
|
var theme = _a.theme;
|
|
889
890
|
return theme.space.base;
|
|
890
891
|
});
|
|
891
|
-
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) {
|
|
892
893
|
var theme = _a.theme;
|
|
893
894
|
return theme.palette.blue[600];
|
|
894
895
|
}, function (_a) {
|
|
@@ -898,15 +899,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$s || (templat
|
|
|
898
899
|
var theme = _a.theme;
|
|
899
900
|
return theme.fontWeights.semibold;
|
|
900
901
|
});
|
|
901
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
902
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
902
903
|
var theme = _a.theme;
|
|
903
904
|
return theme.space.xs;
|
|
904
905
|
}, function (_a) {
|
|
905
906
|
var theme = _a.theme;
|
|
906
907
|
return theme.space.xs;
|
|
907
908
|
});
|
|
908
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
909
|
-
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) {
|
|
910
911
|
var theme = _a.theme;
|
|
911
912
|
return theme.space.base;
|
|
912
913
|
}, function (_a) {
|
|
@@ -933,13 +934,13 @@ var ServiceCard = function (props) {
|
|
|
933
934
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
934
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)); }) })))] })] })));
|
|
935
936
|
};
|
|
936
|
-
var templateObject_1$
|
|
937
|
+
var templateObject_1$1c, templateObject_2$u, templateObject_3$i, templateObject_4$f, templateObject_5$7, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
937
938
|
|
|
938
|
-
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"])));
|
|
939
940
|
var InfoCard = function (props) {
|
|
940
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; }) }) })))] })));
|
|
941
942
|
};
|
|
942
|
-
var templateObject_1$
|
|
943
|
+
var templateObject_1$1b;
|
|
943
944
|
|
|
944
945
|
var DEFAULT_CHARTS_THEME = {
|
|
945
946
|
background: theme.palette.white,
|
|
@@ -1131,14 +1132,14 @@ var CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
|
|
|
1131
1132
|
CHARTS_COLOR_PALETTE.mattone, // Mattone 900
|
|
1132
1133
|
];
|
|
1133
1134
|
|
|
1134
|
-
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) {
|
|
1135
1136
|
var height = _a.height;
|
|
1136
1137
|
return height || "300px";
|
|
1137
1138
|
}, function (_a) {
|
|
1138
1139
|
var width = _a.width;
|
|
1139
1140
|
return width || "100%";
|
|
1140
1141
|
});
|
|
1141
|
-
var templateObject_1$
|
|
1142
|
+
var templateObject_1$1a;
|
|
1142
1143
|
|
|
1143
1144
|
var CustomBulletChartMarkers = function (_a) {
|
|
1144
1145
|
var x = _a.x, y = _a.y, size = _a.size, _b = _a.animatedProps, color = _b.color, transform = _b.transform;
|
|
@@ -1155,7 +1156,7 @@ var CustomTooltip = function (_a) {
|
|
|
1155
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 }));
|
|
1156
1157
|
};
|
|
1157
1158
|
|
|
1158
|
-
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"])));
|
|
1159
1160
|
var BulletChart = function (_a) {
|
|
1160
1161
|
var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values;
|
|
1161
1162
|
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
|
|
@@ -1171,7 +1172,7 @@ var BulletChart = function (_a) {
|
|
|
1171
1172
|
return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
|
|
1172
1173
|
}, tooltip: CustomTooltip, rangeColors: CHARTS_COLOR_PALETTE.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })));
|
|
1173
1174
|
};
|
|
1174
|
-
var templateObject_1$
|
|
1175
|
+
var templateObject_1$19;
|
|
1175
1176
|
|
|
1176
1177
|
var CenteredItem = function (_a) {
|
|
1177
1178
|
var centerX = _a.centerX, centerY = _a.centerY, theme = _a.theme, radius = _a.radius, label = _a.label, value = _a.value, fontSizeMultiplier = _a.fontSizeMultiplier;
|
|
@@ -1189,22 +1190,77 @@ var CenteredItem = function (_a) {
|
|
|
1189
1190
|
} }, { children: value })) })))] }));
|
|
1190
1191
|
};
|
|
1191
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$h || (templateObject_3$h = __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$h, templateObject_4$e, templateObject_5$6;
|
|
1240
|
+
|
|
1192
1241
|
var PieChart = function (_a) {
|
|
1193
1242
|
var _b;
|
|
1194
|
-
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;
|
|
1195
1244
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
1196
|
-
return (jsxRuntime.jsx("div", { children: jsxRuntime.
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
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] })) }));
|
|
1205
1261
|
};
|
|
1206
1262
|
|
|
1207
|
-
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) {
|
|
1208
1264
|
var mode = _a.mode;
|
|
1209
1265
|
return (mode === "front" ? "z-index: 1;" : "");
|
|
1210
1266
|
}, function (_a) {
|
|
@@ -1220,7 +1276,7 @@ var HalfPieChartComponent = function (_a) {
|
|
|
1220
1276
|
? ["arcLabels", "arcLinkLabels"]
|
|
1221
1277
|
: []), true), startAngle: -90, endAngle: 90, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, animate: false }) })));
|
|
1222
1278
|
};
|
|
1223
|
-
var templateObject_1$
|
|
1279
|
+
var templateObject_1$17;
|
|
1224
1280
|
|
|
1225
1281
|
var HalfPieChart = function (_a) {
|
|
1226
1282
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, margin = _a.margin, showArcLinks = _a.showArcLinks;
|
|
@@ -1261,7 +1317,19 @@ var findChildrenByName = function (data, name) {
|
|
|
1261
1317
|
return flatten(data.children).find(function (searchedName) { return searchedName.name === name; });
|
|
1262
1318
|
};
|
|
1263
1319
|
|
|
1264
|
-
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) {
|
|
1265
1333
|
var radius = _a.radius, theme = _a.theme;
|
|
1266
1334
|
return (parseInt(theme.fontSizes.md.replace("px", "")) * radius) / 130;
|
|
1267
1335
|
}, function (_a) {
|
|
@@ -1275,10 +1343,10 @@ var ResetButton = function (_a) {
|
|
|
1275
1343
|
var centerX = _a.centerX, centerY = _a.centerY, radius = _a.radius; _a.theme; var onClick = _a.onClick;
|
|
1276
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" })) })));
|
|
1277
1345
|
};
|
|
1278
|
-
var templateObject_1$
|
|
1346
|
+
var templateObject_1$16;
|
|
1279
1347
|
|
|
1280
1348
|
var SunburstChart = function (_a) {
|
|
1281
|
-
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;
|
|
1282
1350
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
1283
1351
|
var _b = React.useState(data), currentData = _b[0], setCurrentData = _b[1];
|
|
1284
1352
|
var _c = React.useState(), currentColor = _c[0], setCurrentColor = _c[1];
|
|
@@ -1292,39 +1360,47 @@ var SunburstChart = function (_a) {
|
|
|
1292
1360
|
};
|
|
1293
1361
|
if (!data.children)
|
|
1294
1362
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
|
|
1295
|
-
return (jsxRuntime.
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
}
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
function (
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
} })); },
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
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] })));
|
|
1328
1404
|
};
|
|
1329
1405
|
|
|
1330
1406
|
var CustomCell = function (_a) {
|
|
@@ -1337,7 +1413,7 @@ var CustomCell = function (_a) {
|
|
|
1337
1413
|
var WaffleChart = function (_a) {
|
|
1338
1414
|
var height = _a.height, width = _a.width, data = _a.data, total = _a.total, tooltip = _a.tooltip;
|
|
1339
1415
|
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, { theme: tooltip
|
|
1340
|
-
? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, tooltip), { container: {
|
|
1416
|
+
? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
|
|
1341
1417
|
padding: 0,
|
|
1342
1418
|
} }) }) : DEFAULT_CHARTS_THEME, data: [
|
|
1343
1419
|
{
|
|
@@ -1361,7 +1437,7 @@ var WaffleChart = function (_a) {
|
|
|
1361
1437
|
} }) })));
|
|
1362
1438
|
};
|
|
1363
1439
|
|
|
1364
|
-
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) {
|
|
1365
1441
|
var theme = _a.theme;
|
|
1366
1442
|
return theme.space.xl;
|
|
1367
1443
|
}, function (_a) {
|
|
@@ -1372,7 +1448,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
1372
1448
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1373
1449
|
*/
|
|
1374
1450
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
1375
|
-
var templateObject_1$
|
|
1451
|
+
var templateObject_1$15;
|
|
1376
1452
|
|
|
1377
1453
|
/**
|
|
1378
1454
|
* Use Span to style and format inline text elements.
|
|
@@ -1412,8 +1488,8 @@ function useWindowSize() {
|
|
|
1412
1488
|
return size;
|
|
1413
1489
|
}
|
|
1414
1490
|
|
|
1415
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1416
|
-
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) {
|
|
1417
1493
|
var status = _a.status, theme = _a.theme;
|
|
1418
1494
|
switch (status) {
|
|
1419
1495
|
case "completed":
|
|
@@ -1447,9 +1523,9 @@ var Counter = function (props) {
|
|
|
1447
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() })] })));
|
|
1448
1524
|
};
|
|
1449
1525
|
Counter.Avatar = StyledTag.Avatar;
|
|
1450
|
-
var templateObject_1$
|
|
1526
|
+
var templateObject_1$14, templateObject_2$s;
|
|
1451
1527
|
|
|
1452
|
-
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) {
|
|
1453
1529
|
var theme = _a.theme;
|
|
1454
1530
|
return theme.breakpoints.sm;
|
|
1455
1531
|
});
|
|
@@ -1466,25 +1542,25 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1466
1542
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1467
1543
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1468
1544
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1469
|
-
var templateObject_1$
|
|
1545
|
+
var templateObject_1$13;
|
|
1470
1546
|
|
|
1471
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1472
|
-
var templateObject_1$
|
|
1547
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject([""], [""])));
|
|
1548
|
+
var templateObject_1$12;
|
|
1473
1549
|
|
|
1474
1550
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1475
1551
|
__proto__: null,
|
|
1476
1552
|
Field: Field$1
|
|
1477
1553
|
});
|
|
1478
1554
|
|
|
1479
|
-
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) {
|
|
1480
1556
|
var theme = _a.theme;
|
|
1481
1557
|
return theme.palette.blue[100];
|
|
1482
1558
|
});
|
|
1483
1559
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1484
|
-
var templateObject_1$
|
|
1560
|
+
var templateObject_1$11;
|
|
1485
1561
|
|
|
1486
|
-
var Container = styled__default["default"].div(templateObject_1
|
|
1487
|
-
var MetaContainer$1 = styled__default["default"].div(templateObject_2$
|
|
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"])));
|
|
1488
1564
|
var ThumbContainer = styled__default["default"].div(templateObject_3$g || (templateObject_3$g = __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) {
|
|
1489
1565
|
var theme = _a.theme;
|
|
1490
1566
|
return theme.space.sm;
|
|
@@ -1511,7 +1587,7 @@ var ItemContent = function (props) {
|
|
|
1511
1587
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1512
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 })] })] }));
|
|
1513
1589
|
};
|
|
1514
|
-
var templateObject_1
|
|
1590
|
+
var templateObject_1$10, templateObject_2$r, templateObject_3$g, templateObject_4$d, templateObject_5$5;
|
|
1515
1591
|
|
|
1516
1592
|
/**
|
|
1517
1593
|
* A Menu is a wrapper for items elements
|
|
@@ -1535,7 +1611,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1535
1611
|
*/
|
|
1536
1612
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1537
1613
|
|
|
1538
|
-
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) {
|
|
1539
1615
|
return props.isPrimary &&
|
|
1540
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 ");
|
|
1541
1617
|
});
|
|
@@ -1552,7 +1628,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1552
1628
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1553
1629
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1554
1630
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1555
|
-
var templateObject_1
|
|
1631
|
+
var templateObject_1$$;
|
|
1556
1632
|
|
|
1557
1633
|
/**
|
|
1558
1634
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1567,7 +1643,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1567
1643
|
|
|
1568
1644
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1569
1645
|
|
|
1570
|
-
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) {
|
|
1571
1647
|
var theme = _a.theme;
|
|
1572
1648
|
return theme.palette.grey["800"];
|
|
1573
1649
|
}, function (_a) {
|
|
@@ -1580,7 +1656,7 @@ var editorStyle = styled.css(templateObject_1$Z || (templateObject_1$Z = __makeT
|
|
|
1580
1656
|
var theme = _a.theme;
|
|
1581
1657
|
return theme.palette.red[600];
|
|
1582
1658
|
});
|
|
1583
|
-
var templateObject_1$
|
|
1659
|
+
var templateObject_1$_;
|
|
1584
1660
|
|
|
1585
1661
|
var _path$l;
|
|
1586
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); }
|
|
@@ -1726,8 +1802,8 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1726
1802
|
}))));
|
|
1727
1803
|
};
|
|
1728
1804
|
|
|
1729
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1730
|
-
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) {
|
|
1731
1807
|
var theme = _a.theme;
|
|
1732
1808
|
return theme.space.xxs;
|
|
1733
1809
|
}, StyledIconButton);
|
|
@@ -1744,9 +1820,9 @@ var FloatingMenu = function (props) {
|
|
|
1744
1820
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1745
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") }))] })) })));
|
|
1746
1822
|
};
|
|
1747
|
-
var templateObject_1$
|
|
1823
|
+
var templateObject_1$Z, templateObject_2$q;
|
|
1748
1824
|
|
|
1749
|
-
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) {
|
|
1750
1826
|
var theme = _a.theme;
|
|
1751
1827
|
return theme.space.xs;
|
|
1752
1828
|
}, function (_a) {
|
|
@@ -1756,7 +1832,7 @@ var Header$1 = styled__default["default"].div(templateObject_1$X || (templateObj
|
|
|
1756
1832
|
var theme = _a.theme;
|
|
1757
1833
|
return theme.palette.grey[300];
|
|
1758
1834
|
});
|
|
1759
|
-
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) {
|
|
1760
1836
|
var validation = _a.validation, theme = _a.theme;
|
|
1761
1837
|
if (validation === "success") {
|
|
1762
1838
|
return "color: ".concat(theme.colors.successHue, ";");
|
|
@@ -1775,23 +1851,23 @@ var EditorHeader = function (props) {
|
|
|
1775
1851
|
var title = props.title, validation = props.validation;
|
|
1776
1852
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$1, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1777
1853
|
};
|
|
1778
|
-
var templateObject_1$
|
|
1854
|
+
var templateObject_1$Y, templateObject_2$p;
|
|
1779
1855
|
|
|
1780
|
-
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) {
|
|
1781
1857
|
var theme = _a.theme;
|
|
1782
1858
|
return theme.space.sm;
|
|
1783
1859
|
}, function (_a) {
|
|
1784
1860
|
var theme = _a.theme;
|
|
1785
1861
|
return theme.palette.grey[100];
|
|
1786
1862
|
});
|
|
1787
|
-
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"])));
|
|
1788
1864
|
var EditorFooter = function (_a) {
|
|
1789
1865
|
var saveText = _a.saveText;
|
|
1790
1866
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1791
1867
|
};
|
|
1792
|
-
var templateObject_1$
|
|
1868
|
+
var templateObject_1$X, templateObject_2$o;
|
|
1793
1869
|
|
|
1794
|
-
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) {
|
|
1795
1871
|
var theme = _a.theme;
|
|
1796
1872
|
return theme.borderRadii.md;
|
|
1797
1873
|
}, function (_a) {
|
|
@@ -1875,9 +1951,9 @@ var Editor = function (_a) {
|
|
|
1875
1951
|
});
|
|
1876
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 })] })));
|
|
1877
1953
|
};
|
|
1878
|
-
var templateObject_1$
|
|
1954
|
+
var templateObject_1$W;
|
|
1879
1955
|
|
|
1880
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1956
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject([""], [""])));
|
|
1881
1957
|
/**
|
|
1882
1958
|
* A Checkbox lets users select and unselect options from a list.
|
|
1883
1959
|
* <hr>
|
|
@@ -1889,17 +1965,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1889
1965
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1890
1966
|
**/
|
|
1891
1967
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1892
|
-
var templateObject_1$
|
|
1968
|
+
var templateObject_1$V;
|
|
1893
1969
|
|
|
1894
|
-
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([""], [""])));
|
|
1895
1971
|
/**
|
|
1896
1972
|
* A Label is used to specify a title for an input.
|
|
1897
1973
|
* <hr>
|
|
1898
1974
|
**/
|
|
1899
1975
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1900
|
-
var templateObject_1$
|
|
1976
|
+
var templateObject_1$U;
|
|
1901
1977
|
|
|
1902
|
-
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) {
|
|
1903
1979
|
var theme = _a.theme;
|
|
1904
1980
|
return theme.space.base;
|
|
1905
1981
|
});
|
|
@@ -1912,14 +1988,14 @@ var CheckboxCard = function (props) {
|
|
|
1912
1988
|
};
|
|
1913
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 })) })) }))] })));
|
|
1914
1990
|
};
|
|
1915
|
-
var templateObject_1$
|
|
1991
|
+
var templateObject_1$T;
|
|
1916
1992
|
|
|
1917
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1993
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
|
|
1918
1994
|
/**
|
|
1919
1995
|
* A Field is a wrapper for input elements
|
|
1920
1996
|
**/
|
|
1921
1997
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1922
|
-
var templateObject_1$
|
|
1998
|
+
var templateObject_1$S;
|
|
1923
1999
|
|
|
1924
2000
|
var index = /*#__PURE__*/Object.freeze({
|
|
1925
2001
|
__proto__: null,
|
|
@@ -1927,8 +2003,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1927
2003
|
Hint: reactForms.Hint
|
|
1928
2004
|
});
|
|
1929
2005
|
|
|
1930
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1931
|
-
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([""], [""])));
|
|
1932
2008
|
/**
|
|
1933
2009
|
* An Input lets users enter text into a field.
|
|
1934
2010
|
* <hr>
|
|
@@ -1937,7 +2013,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (te
|
|
|
1937
2013
|
* - To enter multiline text, use a Textarea
|
|
1938
2014
|
**/
|
|
1939
2015
|
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
1940
|
-
var templateObject_1$
|
|
2016
|
+
var templateObject_1$R, templateObject_2$n;
|
|
1941
2017
|
|
|
1942
2018
|
var _g$1;
|
|
1943
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); }
|
|
@@ -1961,11 +2037,11 @@ var SvgNotesStroke = function SvgNotesStroke(props) {
|
|
|
1961
2037
|
};
|
|
1962
2038
|
|
|
1963
2039
|
var ToggleContext = React.createContext({});
|
|
1964
|
-
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) {
|
|
1965
2041
|
var theme = _a.theme;
|
|
1966
2042
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1967
2043
|
});
|
|
1968
|
-
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) {
|
|
1969
2045
|
var theme = _a.theme;
|
|
1970
2046
|
return "".concat(theme.space.xxs, " ").concat(theme.space.xxs, " 0");
|
|
1971
2047
|
});
|
|
@@ -2019,9 +2095,9 @@ var InputItem = function (props) {
|
|
|
2019
2095
|
};
|
|
2020
2096
|
InputToggle.Item = InputItem;
|
|
2021
2097
|
InputToggle.Label = StyledLabel;
|
|
2022
|
-
var templateObject_1$
|
|
2098
|
+
var templateObject_1$Q, templateObject_2$m, templateObject_3$f, templateObject_4$c;
|
|
2023
2099
|
|
|
2024
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
2100
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
2025
2101
|
/**
|
|
2026
2102
|
* Media elements add even more context to an input.
|
|
2027
2103
|
* <hr>
|
|
@@ -2030,9 +2106,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
2030
2106
|
* - To enter multiline text, use a Textarea
|
|
2031
2107
|
**/
|
|
2032
2108
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
2033
|
-
var templateObject_1$
|
|
2109
|
+
var templateObject_1$P;
|
|
2034
2110
|
|
|
2035
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
2111
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
2036
2112
|
/**
|
|
2037
2113
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
2038
2114
|
* <hr>
|
|
@@ -2044,7 +2120,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$N ||
|
|
|
2044
2120
|
* - To select from a long list of options, use Select instead
|
|
2045
2121
|
**/
|
|
2046
2122
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
2047
|
-
var templateObject_1$
|
|
2123
|
+
var templateObject_1$O;
|
|
2048
2124
|
|
|
2049
2125
|
var _path$i;
|
|
2050
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); }
|
|
@@ -2062,7 +2138,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
2062
2138
|
})));
|
|
2063
2139
|
};
|
|
2064
2140
|
|
|
2065
|
-
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) {
|
|
2066
2142
|
var theme = _a.theme;
|
|
2067
2143
|
return theme.space.base;
|
|
2068
2144
|
}, function (_a) {
|
|
@@ -2072,7 +2148,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1
|
|
|
2072
2148
|
var theme = _a.theme;
|
|
2073
2149
|
return theme.fontWeights.medium;
|
|
2074
2150
|
});
|
|
2075
|
-
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) {
|
|
2076
2152
|
var theme = _a.theme;
|
|
2077
2153
|
return theme.space.base * 6;
|
|
2078
2154
|
}, function (_a) {
|
|
@@ -2096,9 +2172,9 @@ var RadioCard = function (_a) {
|
|
|
2096
2172
|
props.onChecked && props.onChecked(props.value);
|
|
2097
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 })) }))] })));
|
|
2098
2174
|
};
|
|
2099
|
-
var templateObject_1$
|
|
2175
|
+
var templateObject_1$N, templateObject_2$l;
|
|
2100
2176
|
|
|
2101
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
2177
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
2102
2178
|
/**
|
|
2103
2179
|
* A Textarea is a form control for multi-line text.
|
|
2104
2180
|
* <hr>
|
|
@@ -2106,9 +2182,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
2106
2182
|
* - To enter multi-line text
|
|
2107
2183
|
**/
|
|
2108
2184
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
2109
|
-
var templateObject_1$
|
|
2185
|
+
var templateObject_1$M;
|
|
2110
2186
|
|
|
2111
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
2187
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
2112
2188
|
/**
|
|
2113
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.
|
|
2114
2190
|
* <hr>
|
|
@@ -2119,11 +2195,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$K
|
|
|
2119
2195
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
2120
2196
|
**/
|
|
2121
2197
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
2122
|
-
var templateObject_1$
|
|
2198
|
+
var templateObject_1$L;
|
|
2123
2199
|
|
|
2124
|
-
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);
|
|
2125
2201
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
2126
|
-
var templateObject_1$
|
|
2202
|
+
var templateObject_1$K;
|
|
2127
2203
|
|
|
2128
2204
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
2129
2205
|
|
|
@@ -2180,15 +2256,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
2180
2256
|
})));
|
|
2181
2257
|
};
|
|
2182
2258
|
|
|
2183
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
2259
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
2184
2260
|
var Icon = function (props) {
|
|
2185
2261
|
var type = props.type, size = props.size;
|
|
2186
2262
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
2187
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 })] }));
|
|
2188
2264
|
};
|
|
2189
|
-
var templateObject_1$
|
|
2265
|
+
var templateObject_1$J;
|
|
2190
2266
|
|
|
2191
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
2267
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
2192
2268
|
/**
|
|
2193
2269
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
2194
2270
|
* <hr>
|
|
@@ -2200,9 +2276,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
2200
2276
|
- When loading page content, use a Skeleton loader instead
|
|
2201
2277
|
*/
|
|
2202
2278
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
2203
|
-
var templateObject_1$
|
|
2279
|
+
var templateObject_1$I;
|
|
2204
2280
|
|
|
2205
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
2281
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
2206
2282
|
/**
|
|
2207
2283
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
2208
2284
|
* <hr>
|
|
@@ -2211,9 +2287,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
2211
2287
|
- To provide a quick way to navigate to ancestor pages
|
|
2212
2288
|
*/
|
|
2213
2289
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
2214
|
-
var templateObject_1$
|
|
2290
|
+
var templateObject_1$H;
|
|
2215
2291
|
|
|
2216
|
-
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) {
|
|
2217
2293
|
var theme = _a.theme;
|
|
2218
2294
|
return theme.palette.white;
|
|
2219
2295
|
});
|
|
@@ -2221,7 +2297,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$F ||
|
|
|
2221
2297
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
2222
2298
|
*/
|
|
2223
2299
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
2224
|
-
var templateObject_1$
|
|
2300
|
+
var templateObject_1$G;
|
|
2225
2301
|
|
|
2226
2302
|
/**
|
|
2227
2303
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -2243,23 +2319,23 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
2243
2319
|
})));
|
|
2244
2320
|
};
|
|
2245
2321
|
|
|
2246
|
-
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) {
|
|
2247
2323
|
var theme = _a.theme;
|
|
2248
2324
|
return theme.fonts.system;
|
|
2249
2325
|
});
|
|
2250
|
-
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) {
|
|
2251
2327
|
var theme = _a.theme;
|
|
2252
2328
|
return theme.fonts.system;
|
|
2253
2329
|
});
|
|
2254
2330
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
2255
|
-
var templateObject_1$
|
|
2331
|
+
var templateObject_1$F, templateObject_2$k;
|
|
2256
2332
|
|
|
2257
|
-
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) {
|
|
2258
2334
|
var theme = _a.theme;
|
|
2259
2335
|
return theme.fonts.system;
|
|
2260
2336
|
});
|
|
2261
2337
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
2262
|
-
var templateObject_1$
|
|
2338
|
+
var templateObject_1$E;
|
|
2263
2339
|
|
|
2264
2340
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
2265
2341
|
|
|
@@ -2306,7 +2382,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
2306
2382
|
})));
|
|
2307
2383
|
};
|
|
2308
2384
|
|
|
2309
|
-
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) {
|
|
2310
2386
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
2311
2387
|
return isCompact &&
|
|
2312
2388
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -2322,13 +2398,13 @@ var WorkspacesDropdown = function (props) {
|
|
|
2322
2398
|
? selectedWorkspace.company + "'s workspace"
|
|
2323
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 }))); })] })] })));
|
|
2324
2400
|
};
|
|
2325
|
-
var templateObject_1$
|
|
2401
|
+
var templateObject_1$D;
|
|
2326
2402
|
|
|
2327
|
-
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) {
|
|
2328
2404
|
var theme = _a.theme;
|
|
2329
2405
|
return theme.breakpoints.md;
|
|
2330
2406
|
});
|
|
2331
|
-
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) {
|
|
2332
2408
|
var theme = _a.theme;
|
|
2333
2409
|
return theme.colors.primaryHue;
|
|
2334
2410
|
}, function (_a) {
|
|
@@ -2358,9 +2434,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
2358
2434
|
var BrandItem = function (props) {
|
|
2359
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 }) }))) }))] }));
|
|
2360
2436
|
};
|
|
2361
|
-
var templateObject_1$
|
|
2437
|
+
var templateObject_1$C, templateObject_2$j, templateObject_3$e, templateObject_4$b;
|
|
2362
2438
|
|
|
2363
|
-
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);
|
|
2364
2440
|
/**
|
|
2365
2441
|
* An Header is a visual way to display general information.
|
|
2366
2442
|
* This can include navList Items, modal, profile settings.
|
|
@@ -2369,13 +2445,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
2369
2445
|
Header.HeaderItem = HeaderItem;
|
|
2370
2446
|
Header.HeaderItemText = HeaderItemText;
|
|
2371
2447
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
2372
|
-
var templateObject_1$
|
|
2448
|
+
var templateObject_1$B;
|
|
2373
2449
|
|
|
2374
2450
|
var HeaderSkeleton = function () {
|
|
2375
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%" } }) }) }) }))] })));
|
|
2376
2452
|
};
|
|
2377
2453
|
|
|
2378
|
-
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) {
|
|
2379
2455
|
var theme = _a.theme;
|
|
2380
2456
|
return theme.breakpoints.sm;
|
|
2381
2457
|
});
|
|
@@ -2387,9 +2463,9 @@ var AppHeader = function (_a) {
|
|
|
2387
2463
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
2388
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, {}) }))] }) }) }))] })));
|
|
2389
2465
|
};
|
|
2390
|
-
var templateObject_1$
|
|
2466
|
+
var templateObject_1$A;
|
|
2391
2467
|
|
|
2392
|
-
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) {
|
|
2393
2469
|
var theme = _a.theme;
|
|
2394
2470
|
return theme.borders.sm;
|
|
2395
2471
|
}, function (_a) {
|
|
@@ -2417,13 +2493,13 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$y || (t
|
|
|
2417
2493
|
- To give a consistent dashboard and navigation experience
|
|
2418
2494
|
*/
|
|
2419
2495
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
2420
|
-
var templateObject_1$
|
|
2496
|
+
var templateObject_1$z;
|
|
2421
2497
|
|
|
2422
|
-
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) {
|
|
2423
2499
|
var theme = _a.theme;
|
|
2424
2500
|
return theme.palette.kale["100"];
|
|
2425
2501
|
});
|
|
2426
|
-
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) {
|
|
2427
2503
|
var theme = _a.theme;
|
|
2428
2504
|
return theme.fonts.system;
|
|
2429
2505
|
}, sidebarNavItemExpanded, function (props) { return !props.isExpanded && sidebarNavItemHidden; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (_a) {
|
|
@@ -2437,11 +2513,11 @@ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject
|
|
|
2437
2513
|
return theme.space.xs;
|
|
2438
2514
|
});
|
|
2439
2515
|
var NavItem = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem$2, __assign({ ref: ref }, props)); });
|
|
2440
|
-
var templateObject_1$
|
|
2516
|
+
var templateObject_1$y, templateObject_2$i;
|
|
2441
2517
|
|
|
2442
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
2518
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
|
|
2443
2519
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2444
|
-
var templateObject_1$
|
|
2520
|
+
var templateObject_1$x;
|
|
2445
2521
|
|
|
2446
2522
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "158px" } }, { children: props.children })) }))); };
|
|
2447
2523
|
|
|
@@ -2475,7 +2551,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2475
2551
|
})));
|
|
2476
2552
|
};
|
|
2477
2553
|
|
|
2478
|
-
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) {
|
|
2479
2555
|
var theme = _a.theme;
|
|
2480
2556
|
return theme.space.base * 6;
|
|
2481
2557
|
}, function (_a) {
|
|
@@ -2500,14 +2576,14 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$v ||
|
|
|
2500
2576
|
var NavToggle = function (props) {
|
|
2501
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%" } })) })));
|
|
2502
2578
|
};
|
|
2503
|
-
var templateObject_1$
|
|
2579
|
+
var templateObject_1$w;
|
|
2504
2580
|
|
|
2505
|
-
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;"; });
|
|
2506
2582
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2507
|
-
var templateObject_1$
|
|
2583
|
+
var templateObject_1$v;
|
|
2508
2584
|
|
|
2509
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
2510
|
-
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) {
|
|
2511
2587
|
var theme = _a.theme;
|
|
2512
2588
|
return theme.space.xxl;
|
|
2513
2589
|
});
|
|
@@ -2515,7 +2591,7 @@ var NavItemComponent = React.forwardRef(function (props, ref) { return jsxRuntim
|
|
|
2515
2591
|
var NavItemProject = NavItemComponent;
|
|
2516
2592
|
NavItemProject.Title = NavItemText;
|
|
2517
2593
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2518
|
-
var templateObject_1$
|
|
2594
|
+
var templateObject_1$u, templateObject_2$h;
|
|
2519
2595
|
|
|
2520
2596
|
var _path$a;
|
|
2521
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); }
|
|
@@ -2671,7 +2747,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2671
2747
|
})))));
|
|
2672
2748
|
};
|
|
2673
2749
|
|
|
2674
|
-
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) {
|
|
2675
2751
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2676
2752
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2677
2753
|
});
|
|
@@ -2679,13 +2755,13 @@ var LoadingSidebar = function (props) {
|
|
|
2679
2755
|
var isExpanded = props.isExpanded;
|
|
2680
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" })] }))] })));
|
|
2681
2757
|
};
|
|
2682
|
-
var templateObject_1$
|
|
2758
|
+
var templateObject_1$t;
|
|
2683
2759
|
|
|
2684
|
-
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) {
|
|
2685
2761
|
var theme = _a.theme;
|
|
2686
2762
|
return theme.space.xs;
|
|
2687
2763
|
});
|
|
2688
|
-
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) {
|
|
2689
2765
|
var theme = _a.theme;
|
|
2690
2766
|
return theme.space.base * 6;
|
|
2691
2767
|
}, function (_a) {
|
|
@@ -2700,10 +2776,10 @@ var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObj
|
|
|
2700
2776
|
AccordionItem.Panel = AccordionItemPanel;
|
|
2701
2777
|
AccordionItem.Header = AccordionItemHeader;
|
|
2702
2778
|
AccordionItem.Label = AccordionItemLabel;
|
|
2703
|
-
var templateObject_1$
|
|
2779
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$a;
|
|
2704
2780
|
|
|
2705
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
2706
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_2$
|
|
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"])));
|
|
2707
2783
|
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$c || (templateObject_3$c = __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) {
|
|
2708
2784
|
var isExpanded = _a.isExpanded;
|
|
2709
2785
|
return isExpanded &&
|
|
@@ -2760,9 +2836,9 @@ var Sidebar = function (_a) {
|
|
|
2760
2836
|
color: theme.palette.grey[800],
|
|
2761
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" })] }))] })));
|
|
2762
2838
|
};
|
|
2763
|
-
var templateObject_1$
|
|
2839
|
+
var templateObject_1$r, templateObject_2$f, templateObject_3$c, templateObject_4$9;
|
|
2764
2840
|
|
|
2765
|
-
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) {
|
|
2766
2842
|
var theme = _a.theme;
|
|
2767
2843
|
return theme.breakpoints.sm;
|
|
2768
2844
|
}, function (_a) {
|
|
@@ -2773,21 +2849,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$p ||
|
|
|
2773
2849
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2774
2850
|
*/
|
|
2775
2851
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2776
|
-
var templateObject_1$
|
|
2852
|
+
var templateObject_1$q;
|
|
2777
2853
|
|
|
2778
|
-
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]);
|
|
2779
2855
|
var PageLoader = function () {
|
|
2780
2856
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2781
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: "" }) }))] })] })] })] }) })));
|
|
2782
2858
|
};
|
|
2783
|
-
var templateObject_1$
|
|
2859
|
+
var templateObject_1$p;
|
|
2784
2860
|
|
|
2785
2861
|
/**
|
|
2786
2862
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2787
2863
|
*/
|
|
2788
2864
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2789
2865
|
|
|
2790
|
-
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);
|
|
2791
2867
|
/**
|
|
2792
2868
|
* Login Form
|
|
2793
2869
|
* <hr>
|
|
@@ -2818,9 +2894,9 @@ var LoginForm = function (props) {
|
|
|
2818
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 })) })))] })));
|
|
2819
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"] })))] }));
|
|
2820
2896
|
};
|
|
2821
|
-
var templateObject_1$
|
|
2897
|
+
var templateObject_1$o;
|
|
2822
2898
|
|
|
2823
|
-
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) {
|
|
2824
2900
|
var theme = _a.theme;
|
|
2825
2901
|
return theme.palette.grey["800"];
|
|
2826
2902
|
});
|
|
@@ -2829,10 +2905,10 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2829
2905
|
Modal.Header = reactModals.Header;
|
|
2830
2906
|
Modal.Body = ugModalBody;
|
|
2831
2907
|
Modal.Footer = reactModals.Footer;
|
|
2832
|
-
var templateObject_1$
|
|
2908
|
+
var templateObject_1$n;
|
|
2833
2909
|
|
|
2834
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
2835
|
-
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) {
|
|
2836
2912
|
var theme = _a.theme;
|
|
2837
2913
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
2838
2914
|
}, function (_a) {
|
|
@@ -2869,7 +2945,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2869
2945
|
ModalFullScreen.Footer = StyledFooter;
|
|
2870
2946
|
ModalFullScreen.Close = StyledModalClose;
|
|
2871
2947
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2872
|
-
var templateObject_1$
|
|
2948
|
+
var templateObject_1$m, templateObject_2$e, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
2873
2949
|
|
|
2874
2950
|
/**
|
|
2875
2951
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2890,7 +2966,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2890
2966
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2891
2967
|
var useToast = reactNotifications.useToast;
|
|
2892
2968
|
|
|
2893
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2969
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
|
|
2894
2970
|
/**
|
|
2895
2971
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2896
2972
|
|
|
@@ -2900,10 +2976,10 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2900
2976
|
*/
|
|
2901
2977
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2902
2978
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2903
|
-
var templateObject_1$
|
|
2979
|
+
var templateObject_1$l;
|
|
2904
2980
|
|
|
2905
|
-
var MainContainer = styled__default["default"].div(templateObject_1$
|
|
2906
|
-
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) {
|
|
2907
2983
|
var theme = _a.theme;
|
|
2908
2984
|
return theme.space.xs;
|
|
2909
2985
|
}, function (_a) {
|
|
@@ -2965,13 +3041,13 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2965
3041
|
var Main = function (props) {
|
|
2966
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 }) }) })))] }) }));
|
|
2967
3043
|
};
|
|
2968
|
-
var templateObject_1$
|
|
3044
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2969
3045
|
|
|
2970
|
-
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) {
|
|
2971
3047
|
var theme = _a.theme;
|
|
2972
3048
|
return theme.palette.white;
|
|
2973
3049
|
});
|
|
2974
|
-
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) {
|
|
2975
3051
|
var theme = _a.theme;
|
|
2976
3052
|
return "".concat(theme.space.xxl, " ").concat(theme.space.xxl, " ").concat(theme.space.md);
|
|
2977
3053
|
}, function (_a) {
|
|
@@ -3022,7 +3098,7 @@ PageHeader.Overline = MainOverline;
|
|
|
3022
3098
|
PageHeader.Title = MainTitle;
|
|
3023
3099
|
PageHeader.Description = MainDescription;
|
|
3024
3100
|
PageHeader.Counters = MainCounters;
|
|
3025
|
-
var templateObject_1$
|
|
3101
|
+
var templateObject_1$j, templateObject_2$c, templateObject_3$9, templateObject_4$6;
|
|
3026
3102
|
|
|
3027
3103
|
var _path$5;
|
|
3028
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); }
|
|
@@ -3057,12 +3133,12 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
3057
3133
|
})));
|
|
3058
3134
|
};
|
|
3059
3135
|
|
|
3060
|
-
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; });
|
|
3061
3137
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
3062
|
-
var templateObject_1$
|
|
3138
|
+
var templateObject_1$i;
|
|
3063
3139
|
|
|
3064
|
-
var flexCenter = styled.css(templateObject_1$
|
|
3065
|
-
var flexColumnCenter = styled.css(templateObject_2$
|
|
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);
|
|
3066
3142
|
var flexStart = styled.css(templateObject_3$8 || (templateObject_3$8 = __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) {
|
|
3067
3143
|
var theme = _a.theme;
|
|
3068
3144
|
return (theme.rtl ? "flex-end" : "flex-start");
|
|
@@ -3080,18 +3156,18 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
3080
3156
|
var theme = _a.theme;
|
|
3081
3157
|
return theme.shadows.boxShadow(theme);
|
|
3082
3158
|
});
|
|
3083
|
-
var templateObject_1$
|
|
3159
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$8, templateObject_4$5;
|
|
3084
3160
|
|
|
3085
3161
|
/**
|
|
3086
3162
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
3087
3163
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
3088
3164
|
**/
|
|
3089
|
-
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) {
|
|
3090
3166
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
3091
3167
|
}, function (props) {
|
|
3092
3168
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
3093
3169
|
});
|
|
3094
|
-
var StyledBody$3 = styled__default["default"].li(templateObject_2$
|
|
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"])));
|
|
3095
3171
|
var IconContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
|
|
3096
3172
|
var theme = _a.theme;
|
|
3097
3173
|
return theme.space.sm;
|
|
@@ -3105,7 +3181,7 @@ var MenuItem = function (_a) {
|
|
|
3105
3181
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
3106
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));
|
|
3107
3183
|
};
|
|
3108
|
-
var templateObject_1$
|
|
3184
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$7, templateObject_4$4;
|
|
3109
3185
|
|
|
3110
3186
|
var _path$3;
|
|
3111
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); }
|
|
@@ -3156,16 +3232,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
3156
3232
|
})));
|
|
3157
3233
|
};
|
|
3158
3234
|
|
|
3159
|
-
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 }"); });
|
|
3160
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] }))); };
|
|
3161
|
-
var templateObject_1$
|
|
3237
|
+
var templateObject_1$f;
|
|
3162
3238
|
|
|
3163
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
3239
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject([""], [""])));
|
|
3164
3240
|
/**
|
|
3165
3241
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
3166
3242
|
*/
|
|
3167
3243
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
3168
|
-
var templateObject_1$
|
|
3244
|
+
var templateObject_1$e;
|
|
3169
3245
|
|
|
3170
3246
|
var getInitials = function (name) {
|
|
3171
3247
|
var names = name.split(" ");
|
|
@@ -3173,8 +3249,8 @@ var getInitials = function (name) {
|
|
|
3173
3249
|
return initials;
|
|
3174
3250
|
};
|
|
3175
3251
|
|
|
3176
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
3177
|
-
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$
|
|
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]; });
|
|
3178
3254
|
var StyledBody$2 = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
3179
3255
|
var theme = _a.theme;
|
|
3180
3256
|
return theme.space.base * 6;
|
|
@@ -3202,7 +3278,7 @@ var HelpItem = function (props) {
|
|
|
3202
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"] }))] })] }));
|
|
3203
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 })) }));
|
|
3204
3280
|
};
|
|
3205
|
-
var templateObject_1$
|
|
3281
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
3206
3282
|
|
|
3207
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); }
|
|
3208
3284
|
var SvgEmpty = function SvgEmpty(props) {
|
|
@@ -3231,30 +3307,30 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
3231
3307
|
})));
|
|
3232
3308
|
};
|
|
3233
3309
|
|
|
3234
|
-
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) {
|
|
3235
3311
|
var theme = _a.theme;
|
|
3236
3312
|
return theme.space.base * 6;
|
|
3237
3313
|
}, function (_a) {
|
|
3238
3314
|
var theme = _a.theme;
|
|
3239
3315
|
return theme.space.base * 4;
|
|
3240
3316
|
});
|
|
3241
|
-
var StyledButtonContainer = styled__default["default"].div(templateObject_2$
|
|
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);
|
|
3242
3318
|
var StyledButton = styled__default["default"](Button)(templateObject_3$5 || (templateObject_3$5 = __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 }"); });
|
|
3243
3319
|
var LanguageItem = function (props) {
|
|
3244
3320
|
var _a;
|
|
3245
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 }))] }))); }) }) })] }));
|
|
3246
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] }))] }) })) }));
|
|
3247
3323
|
};
|
|
3248
|
-
var templateObject_1$
|
|
3324
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$5;
|
|
3249
3325
|
|
|
3250
|
-
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) {
|
|
3251
3327
|
var theme = _a.theme;
|
|
3252
3328
|
return theme.space.base * 2;
|
|
3253
3329
|
}, function (_a) {
|
|
3254
3330
|
var theme = _a.theme;
|
|
3255
3331
|
return theme.space.base * 6;
|
|
3256
3332
|
});
|
|
3257
|
-
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) {
|
|
3258
3334
|
var theme = _a.theme;
|
|
3259
3335
|
return theme.space.base * 2;
|
|
3260
3336
|
}, function (_a) {
|
|
@@ -3275,9 +3351,9 @@ var UserContainer = function (props) {
|
|
|
3275
3351
|
var _a;
|
|
3276
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 }))] })] }));
|
|
3277
3353
|
};
|
|
3278
|
-
var templateObject_1$
|
|
3354
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$4;
|
|
3279
3355
|
|
|
3280
|
-
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"])));
|
|
3281
3357
|
var UserMenu = function (props) {
|
|
3282
3358
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
3283
3359
|
var toggleItem = function (item) {
|
|
@@ -3285,9 +3361,9 @@ var UserMenu = function (props) {
|
|
|
3285
3361
|
};
|
|
3286
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" }))] })] }));
|
|
3287
3363
|
};
|
|
3288
|
-
var templateObject_1$
|
|
3364
|
+
var templateObject_1$a;
|
|
3289
3365
|
|
|
3290
|
-
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) {
|
|
3291
3367
|
var theme = _a.theme;
|
|
3292
3368
|
return theme.space.xxl;
|
|
3293
3369
|
}, function (_a) {
|
|
@@ -3300,7 +3376,7 @@ var StyledModal = styled__default["default"](Modal)(templateObject_1$8 || (templ
|
|
|
3300
3376
|
var theme = _a.theme;
|
|
3301
3377
|
return theme.space.base * 3;
|
|
3302
3378
|
});
|
|
3303
|
-
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) {
|
|
3304
3380
|
var theme = _a.theme;
|
|
3305
3381
|
return theme.space.xxs + " " + theme.space.xs;
|
|
3306
3382
|
});
|
|
@@ -3325,13 +3401,13 @@ var ProfileModal = function (_a) {
|
|
|
3325
3401
|
};
|
|
3326
3402
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
3327
3403
|
};
|
|
3328
|
-
var templateObject_1$
|
|
3404
|
+
var templateObject_1$9, templateObject_2$6;
|
|
3329
3405
|
|
|
3330
|
-
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) {
|
|
3331
3407
|
var theme = _a.theme;
|
|
3332
3408
|
return theme.palette.green[700];
|
|
3333
3409
|
});
|
|
3334
|
-
var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$
|
|
3410
|
+
var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject([""], [""])));
|
|
3335
3411
|
var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$3 || (templateObject_3$3 = __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) {
|
|
3336
3412
|
var theme = _a.theme;
|
|
3337
3413
|
return theme.palette.grey[200];
|
|
@@ -3367,16 +3443,16 @@ var Stepper = function (props) {
|
|
|
3367
3443
|
Stepper.Step = UgStep;
|
|
3368
3444
|
Stepper.Label = UgLabel;
|
|
3369
3445
|
Stepper.Content = UgContent;
|
|
3370
|
-
var templateObject_1$
|
|
3446
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
3371
3447
|
|
|
3372
|
-
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) {
|
|
3373
3449
|
var theme = _a.theme;
|
|
3374
3450
|
return theme.palette.grey[300];
|
|
3375
3451
|
}, function (_a) {
|
|
3376
3452
|
var theme = _a.theme;
|
|
3377
3453
|
return theme.borderRadii.lg;
|
|
3378
3454
|
});
|
|
3379
|
-
var UgHeaderRow = styled__default["default"](reactTables.HeaderRow)(templateObject_2$
|
|
3455
|
+
var UgHeaderRow = styled__default["default"](reactTables.HeaderRow)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n border: 0;\n"], ["\n border: 0;\n"])));
|
|
3380
3456
|
var UgHeaderCell = styled__default["default"](reactTables.HeaderCell)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"], ["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"])), function (_a) {
|
|
3381
3457
|
var theme = _a.theme;
|
|
3382
3458
|
return theme.palette.grey[300];
|
|
@@ -3404,10 +3480,10 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
3404
3480
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
3405
3481
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
3406
3482
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
3407
|
-
var templateObject_1$
|
|
3483
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
3408
3484
|
|
|
3409
|
-
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$
|
|
3410
|
-
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$
|
|
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([""], [""])));
|
|
3411
3487
|
var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3$1 || (templateObject_3$1 = __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);
|
|
3412
3488
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
3413
3489
|
var GroupRowComponent = function (props) {
|
|
@@ -3437,7 +3513,63 @@ var GroupedTable = function (_a) {
|
|
|
3437
3513
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
3438
3514
|
}) })] })));
|
|
3439
3515
|
};
|
|
3440
|
-
var templateObject_1$
|
|
3516
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$1, templateObject_4;
|
|
3517
|
+
|
|
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 && "\n pointer-events: none; \n background-color: transparent !important;\n ";
|
|
3534
|
+
}, function (_a) {
|
|
3535
|
+
var theme = _a.theme;
|
|
3536
|
+
return theme.colors.primaryHue;
|
|
3537
|
+
});
|
|
3538
|
+
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) {
|
|
3539
|
+
var theme = _a.theme;
|
|
3540
|
+
return theme.palette.grey[300];
|
|
3541
|
+
}, function (_a) {
|
|
3542
|
+
var theme = _a.theme;
|
|
3543
|
+
return theme.space.md;
|
|
3544
|
+
});
|
|
3545
|
+
var TabPanel = function (props) { return jsxRuntime.jsx("div", { children: props.children }); };
|
|
3546
|
+
var TabNavItem = function (props) {
|
|
3547
|
+
var children = props.children, isSelected = props.isSelected, isDisabled = props.isDisabled, index = props.index, setSelectedTab = props.setSelectedTab;
|
|
3548
|
+
var handleTabClick = React.useCallback(function () {
|
|
3549
|
+
setSelectedTab(index);
|
|
3550
|
+
}, [setSelectedTab, index]);
|
|
3551
|
+
return (jsxRuntime.jsx(StyledNavButton, __assign({ disabled: isDisabled, onClick: handleTabClick, isBasic: true, isSelected: isSelected }, { children: children })));
|
|
3552
|
+
};
|
|
3553
|
+
var Tabs = function (props) {
|
|
3554
|
+
var children = props.children, selectedIndex = props.selectedIndex;
|
|
3555
|
+
var tabs = React.Children.toArray(children);
|
|
3556
|
+
// Filter valid elements
|
|
3557
|
+
var tabPanels = tabs.filter(function (tab) { return typeof tab !== "string" && typeof tab !== "number"; });
|
|
3558
|
+
var internalIndex = selectedIndex && selectedIndex < tabPanels.length ? selectedIndex : 0;
|
|
3559
|
+
// SelectedItem or first child
|
|
3560
|
+
var _a = React.useState(internalIndex), selectedTabIndex = _a[0], setSelectedTabIndex = _a[1];
|
|
3561
|
+
React.useEffect(function () {
|
|
3562
|
+
if (props.onTabChange) {
|
|
3563
|
+
props.onTabChange(selectedTabIndex);
|
|
3564
|
+
}
|
|
3565
|
+
}, [selectedTabIndex]);
|
|
3566
|
+
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledTabList, { children: tabPanels.map(function (item, index) {
|
|
3567
|
+
var _a;
|
|
3568
|
+
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;
|
|
3569
|
+
}) }), tabPanels[selectedTabIndex]] }));
|
|
3570
|
+
};
|
|
3571
|
+
Tabs.Panel = TabPanel;
|
|
3572
|
+
var templateObject_1$5, templateObject_2$2;
|
|
3441
3573
|
|
|
3442
3574
|
/**
|
|
3443
3575
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -3660,6 +3792,7 @@ exports.TableBody = Body;
|
|
|
3660
3792
|
exports.TableCell = Cell;
|
|
3661
3793
|
exports.TableHead = Head;
|
|
3662
3794
|
exports.TableRow = Row;
|
|
3795
|
+
exports.Tabs = Tabs;
|
|
3663
3796
|
exports.Tag = Tag;
|
|
3664
3797
|
exports.Textarea = Textarea;
|
|
3665
3798
|
exports.Tiles = Tiles;
|