@appquality/unguess-design-system 2.12.36 → 2.12.38
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/.github/workflows/storybook.yml +2 -2
- package/CHANGELOG.md +37 -0
- package/build/index.d.ts +1 -2
- package/build/index.js +300 -218
- package/build/stories/charts/pie/_types.d.ts +1 -0
- package/build/stories/charts/{pie/CenteredItem.d.ts → pieCenteredItem.d.ts} +4 -3
- package/build/stories/charts/sunburst/ResetButton.d.ts +9 -0
- package/build/stories/charts/sunburst/_types.d.ts +12 -4
- package/build/stories/charts/sunburst/findChildrenByName.d.ts +3 -0
- package/build/stories/charts/sunburst/index.d.ts +1 -1
- package/build/stories/charts/sunburst/index.stories.d.ts +1 -1
- package/build/stories/tabs/_types.d.ts +11 -0
- package/build/stories/tabs/index.d.ts +9 -0
- package/build/stories/tabs/index.stories.d.ts +11 -0
- package/build/stories/theme/charts.d.ts +1 -1
- package/build/stories/theme/components.d.ts +5 -0
- package/build/stories/theme/fontWeights.d.ts +12 -0
- package/build/stories/theme/index.d.ts +5 -0
- package/build/stories/tooltip/index.d.ts +1 -11
- package/build/stories/tooltip/index.stories.d.ts +1 -1
- package/package.json +2 -1
- package/build/stories/charts/bar/_types.d.ts +0 -6
- package/build/stories/charts/bar/index.d.ts +0 -3
- package/build/stories/charts/bar/index.stories.d.ts +0 -5
- package/build/stories/charts/stream/_types.d.ts +0 -6
- package/build/stories/charts/stream/index.d.ts +0 -3
- package/build/stories/charts/stream/index.stories.d.ts +0 -5
- package/build/stories/page/index.d.ts +0 -8
- package/build/stories/page/index.stories.d.ts +0 -5
package/build/index.js
CHANGED
|
@@ -16,12 +16,10 @@ var reactButtons = require('@zendeskgarden/react-buttons');
|
|
|
16
16
|
var reactTags = require('@zendeskgarden/react-tags');
|
|
17
17
|
var reactLoaders = require('@zendeskgarden/react-loaders');
|
|
18
18
|
var reactTypography = require('@zendeskgarden/react-typography');
|
|
19
|
-
var bar = require('@nivo/bar');
|
|
20
19
|
var bullet = require('@nivo/bullet');
|
|
21
20
|
var web = require('@react-spring/web');
|
|
22
21
|
var tooltip = require('@nivo/tooltip');
|
|
23
22
|
var pie = require('@nivo/pie');
|
|
24
|
-
var stream = require('@nivo/stream');
|
|
25
23
|
var sunburst = require('@nivo/sunburst');
|
|
26
24
|
var waffle = require('@nivo/waffle');
|
|
27
25
|
var reactModals = require('@zendeskgarden/react-modals');
|
|
@@ -267,28 +265,32 @@ var isMac = function () {
|
|
|
267
265
|
var os = parser.getOS().name;
|
|
268
266
|
return os && /Mac OS|iOS/.test(os);
|
|
269
267
|
};
|
|
270
|
-
styled.css(templateObject_1$
|
|
268
|
+
styled.css(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n transition: opacity 0.2s ease;\n"], ["\n transition: opacity 0.2s ease;\n"])));
|
|
271
269
|
var sidebarNavItemExpanded = styled.css(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
272
270
|
var sidebarNavItemHidden = styled.css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"], ["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"])));
|
|
273
|
-
var templateObject_1$
|
|
271
|
+
var templateObject_1$1o, templateObject_2$y, templateObject_3$l;
|
|
274
272
|
|
|
275
273
|
var gradients = {
|
|
276
274
|
horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
|
|
277
275
|
dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
|
|
278
276
|
};
|
|
279
277
|
|
|
278
|
+
var fontWeights = __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 });
|
|
279
|
+
|
|
280
280
|
var _a, _b, _c, _d, _e, _f, _g$7, _h;
|
|
281
281
|
var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$7 = reactTheming.DEFAULT_THEME.components) === null || _g$7 === void 0 ? void 0 : _g$7.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
|
|
282
282
|
imgMaxHeight: "214px",
|
|
283
283
|
}, autocomplete: {
|
|
284
284
|
thumbSize: "60px",
|
|
285
|
+
}, "tabs.tab": function (_a) {
|
|
286
|
+
var isSelected = _a.isSelected;
|
|
287
|
+
return isSelected ? { fontWeight: fontWeights.semibold } : undefined;
|
|
285
288
|
} });
|
|
286
289
|
|
|
287
|
-
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:
|
|
288
|
-
}), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
290
|
+
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 }) });
|
|
289
291
|
|
|
290
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
291
|
-
var templateObject_1$
|
|
292
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$1n || (templateObject_1$1n = __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);
|
|
293
|
+
var templateObject_1$1n;
|
|
292
294
|
|
|
293
295
|
/**
|
|
294
296
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -304,7 +306,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
304
306
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
305
307
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
306
308
|
|
|
307
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
309
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
308
310
|
var theme = _a.theme;
|
|
309
311
|
return theme.palette.grey[700];
|
|
310
312
|
}, function (_a) {
|
|
@@ -325,9 +327,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
325
327
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
326
328
|
Alert.Title = UgAlertTitle;
|
|
327
329
|
Alert.Close = reactNotifications.Close;
|
|
328
|
-
var templateObject_1$
|
|
330
|
+
var templateObject_1$1m, templateObject_2$x;
|
|
329
331
|
|
|
330
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
332
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
331
333
|
return props.avatarType &&
|
|
332
334
|
props.avatarType !== "image" &&
|
|
333
335
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -351,7 +353,7 @@ var Avatar = function (props) {
|
|
|
351
353
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
352
354
|
};
|
|
353
355
|
Avatar.Text = UgAvatar.Text;
|
|
354
|
-
var templateObject_1$
|
|
356
|
+
var templateObject_1$1l;
|
|
355
357
|
|
|
356
358
|
/**
|
|
357
359
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -382,7 +384,7 @@ var getThemeStyle = function (props) {
|
|
|
382
384
|
}
|
|
383
385
|
return theme;
|
|
384
386
|
};
|
|
385
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
387
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject([""], [""])));
|
|
386
388
|
/**
|
|
387
389
|
* Buttons let users take action quickly.
|
|
388
390
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -401,7 +403,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
|
|
|
401
403
|
var Button = ButtonComponent;
|
|
402
404
|
Button.StartIcon = UgButton.StartIcon;
|
|
403
405
|
Button.EndIcon = UgButton.EndIcon;
|
|
404
|
-
var templateObject_1$
|
|
406
|
+
var templateObject_1$1k;
|
|
405
407
|
|
|
406
408
|
/**
|
|
407
409
|
A Button group lets users make a selection from a set of options.
|
|
@@ -431,7 +433,7 @@ Used for this:
|
|
|
431
433
|
**/
|
|
432
434
|
var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
|
|
433
435
|
|
|
434
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
436
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
435
437
|
var theme = _a.theme;
|
|
436
438
|
return theme.borderRadii.lg;
|
|
437
439
|
}, function (_a) {
|
|
@@ -469,7 +471,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
469
471
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
470
472
|
});
|
|
471
473
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
472
|
-
var templateObject_1$
|
|
474
|
+
var templateObject_1$1j, templateObject_2$w;
|
|
473
475
|
|
|
474
476
|
/**
|
|
475
477
|
* Tags let users categorize content using a keyword.
|
|
@@ -674,7 +676,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
674
676
|
})));
|
|
675
677
|
};
|
|
676
678
|
|
|
677
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
679
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
678
680
|
return props.isLight ?
|
|
679
681
|
"\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 ");
|
|
680
682
|
});
|
|
@@ -692,22 +694,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
692
694
|
- To communicate a typing status, use Inline instead
|
|
693
695
|
*/
|
|
694
696
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
695
|
-
var templateObject_1$
|
|
697
|
+
var templateObject_1$1i;
|
|
696
698
|
|
|
697
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
699
|
+
var CardMeta = styled__default["default"].div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
698
700
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
699
701
|
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 ");
|
|
700
702
|
});
|
|
701
|
-
var templateObject_1$
|
|
703
|
+
var templateObject_1$1h;
|
|
702
704
|
|
|
703
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
705
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
704
706
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
705
707
|
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 ");
|
|
706
708
|
});
|
|
707
709
|
CardThumbnail.defaultProps = {
|
|
708
710
|
align: "left"
|
|
709
711
|
};
|
|
710
|
-
var templateObject_1$
|
|
712
|
+
var templateObject_1$1g;
|
|
711
713
|
|
|
712
714
|
/**
|
|
713
715
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -719,7 +721,7 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
719
721
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
720
722
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
721
723
|
|
|
722
|
-
var Label$2 = styled__default["default"](SM)(templateObject_1$
|
|
724
|
+
var Label$2 = styled__default["default"](SM)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
723
725
|
var theme = _a.theme;
|
|
724
726
|
return theme.palette.grey[500];
|
|
725
727
|
});
|
|
@@ -748,9 +750,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
748
750
|
CardHeader.Label = Label$2;
|
|
749
751
|
CardHeader.Title = Title$2;
|
|
750
752
|
CardHeader.Text = Description$2;
|
|
751
|
-
var templateObject_1$
|
|
753
|
+
var templateObject_1$1f, templateObject_2$v, templateObject_3$k, templateObject_4$f;
|
|
752
754
|
|
|
753
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
755
|
+
var Divider = styled__default["default"].div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
754
756
|
var theme = _a.theme;
|
|
755
757
|
return theme.space.base * 3;
|
|
756
758
|
}, function (_a) {
|
|
@@ -766,9 +768,9 @@ var Container$1 = styled__default["default"].div(templateObject_3$j || (template
|
|
|
766
768
|
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 ");
|
|
767
769
|
});
|
|
768
770
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
769
|
-
var templateObject_1$
|
|
771
|
+
var templateObject_1$1e, templateObject_2$u, templateObject_3$j;
|
|
770
772
|
|
|
771
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
773
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
772
774
|
var theme = _a.theme;
|
|
773
775
|
return theme.borderRadii.lg;
|
|
774
776
|
}, function (_a) {
|
|
@@ -798,7 +800,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
798
800
|
SpecialCard.Thumb = CardThumbnail;
|
|
799
801
|
SpecialCard.Header = CardHeader;
|
|
800
802
|
SpecialCard.Footer = CardFooter;
|
|
801
|
-
var templateObject_1$
|
|
803
|
+
var templateObject_1$1d;
|
|
802
804
|
|
|
803
805
|
var CampaignCardSkeleton = function () {
|
|
804
806
|
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%" } })] })] }));
|
|
@@ -831,7 +833,7 @@ var getTypeDataIcon = function (type) {
|
|
|
831
833
|
return SvgCampaignFunctional;
|
|
832
834
|
}
|
|
833
835
|
};
|
|
834
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
836
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
835
837
|
var theme = _a.theme;
|
|
836
838
|
return theme.palette.grey["700"];
|
|
837
839
|
});
|
|
@@ -858,9 +860,9 @@ var CampaignCard = function (_a) {
|
|
|
858
860
|
var PillIcon = getTypeDataIcon(type);
|
|
859
861
|
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, {})] })] })));
|
|
860
862
|
};
|
|
861
|
-
var templateObject_1$
|
|
863
|
+
var templateObject_1$1c, templateObject_2$t, templateObject_3$i;
|
|
862
864
|
|
|
863
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
865
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
864
866
|
var theme = _a.theme;
|
|
865
867
|
return theme.space.base * 6;
|
|
866
868
|
}, function (_a) {
|
|
@@ -877,9 +879,9 @@ var ProductCard = function (props) {
|
|
|
877
879
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
878
880
|
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 })) }))] })));
|
|
879
881
|
};
|
|
880
|
-
var templateObject_1$
|
|
882
|
+
var templateObject_1$1b;
|
|
881
883
|
|
|
882
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
884
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
883
885
|
var theme = _a.theme;
|
|
884
886
|
return theme.palette.grey[500];
|
|
885
887
|
}, function (_a) {
|
|
@@ -931,13 +933,13 @@ var ServiceCard = function (props) {
|
|
|
931
933
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
932
934
|
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)); }) })))] })] })));
|
|
933
935
|
};
|
|
934
|
-
var templateObject_1$
|
|
936
|
+
var templateObject_1$1a, templateObject_2$s, templateObject_3$h, templateObject_4$e, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
935
937
|
|
|
936
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
938
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
937
939
|
var InfoCard = function (props) {
|
|
938
940
|
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; }) }) })))] })));
|
|
939
941
|
};
|
|
940
|
-
var templateObject_1$
|
|
942
|
+
var templateObject_1$19;
|
|
941
943
|
|
|
942
944
|
var DEFAULT_CHARTS_THEME = {
|
|
943
945
|
background: theme.palette.white,
|
|
@@ -1015,7 +1017,7 @@ var DEFAULT_CHARTS_THEME = {
|
|
|
1015
1017
|
grid: {
|
|
1016
1018
|
line: {
|
|
1017
1019
|
stroke: theme.palette.grey[600],
|
|
1018
|
-
strokeWidth: .5,
|
|
1020
|
+
strokeWidth: 0.5,
|
|
1019
1021
|
},
|
|
1020
1022
|
},
|
|
1021
1023
|
labels: {
|
|
@@ -1076,7 +1078,7 @@ var DEFAULT_CHARTS_THEME = {
|
|
|
1076
1078
|
tableCellValue: {},
|
|
1077
1079
|
},
|
|
1078
1080
|
};
|
|
1079
|
-
var
|
|
1081
|
+
var CHARTS_COLOR_PALETTE = {
|
|
1080
1082
|
darkPine: "#02807A",
|
|
1081
1083
|
lightGrey: theme.palette.grey[200],
|
|
1082
1084
|
darkGrey: theme.palette.grey[600],
|
|
@@ -1091,40 +1093,52 @@ var chartColors = {
|
|
|
1091
1093
|
sky: "#3392CE",
|
|
1092
1094
|
};
|
|
1093
1095
|
var CHARTS_COLOR_SCHEME_MONO = [
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
+
CHARTS_COLOR_PALETTE.darkPine,
|
|
1097
|
+
CHARTS_COLOR_PALETTE.lightGrey,
|
|
1096
1098
|
];
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1099
|
+
[
|
|
1100
|
+
CHARTS_COLOR_PALETTE.mattone,
|
|
1101
|
+
CHARTS_COLOR_PALETTE.gubbioLight,
|
|
1102
|
+
CHARTS_COLOR_PALETTE.blueRoyal,
|
|
1103
|
+
CHARTS_COLOR_PALETTE.darkPine,
|
|
1104
|
+
CHARTS_COLOR_PALETTE.lightGrey,
|
|
1105
|
+
];
|
|
1106
|
+
[
|
|
1107
|
+
CHARTS_COLOR_PALETTE.greenLight,
|
|
1108
|
+
CHARTS_COLOR_PALETTE.blue,
|
|
1109
|
+
CHARTS_COLOR_PALETTE.fucsia,
|
|
1110
|
+
CHARTS_COLOR_PALETTE.violet,
|
|
1111
|
+
CHARTS_COLOR_PALETTE.orchidea, // Orchidea 300
|
|
1103
1112
|
];
|
|
1104
1113
|
var CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1114
|
+
CHARTS_COLOR_PALETTE.darkPine,
|
|
1115
|
+
CHARTS_COLOR_PALETTE.fucsia,
|
|
1116
|
+
CHARTS_COLOR_PALETTE.violet,
|
|
1117
|
+
CHARTS_COLOR_PALETTE.greenLight,
|
|
1118
|
+
CHARTS_COLOR_PALETTE.mattone,
|
|
1119
|
+
CHARTS_COLOR_PALETTE.sky,
|
|
1120
|
+
CHARTS_COLOR_PALETTE.orchidea,
|
|
1121
|
+
CHARTS_COLOR_PALETTE.blue, // Blue 900
|
|
1122
|
+
];
|
|
1123
|
+
[
|
|
1124
|
+
CHARTS_COLOR_PALETTE.sky,
|
|
1125
|
+
CHARTS_COLOR_PALETTE.orchidea,
|
|
1126
|
+
CHARTS_COLOR_PALETTE.blue,
|
|
1127
|
+
CHARTS_COLOR_PALETTE.darkPine,
|
|
1128
|
+
CHARTS_COLOR_PALETTE.fucsia,
|
|
1129
|
+
CHARTS_COLOR_PALETTE.violet,
|
|
1130
|
+
CHARTS_COLOR_PALETTE.greenLight,
|
|
1131
|
+
CHARTS_COLOR_PALETTE.mattone, // Mattone 900
|
|
1113
1132
|
];
|
|
1114
1133
|
|
|
1115
|
-
var ChartContainer = styled__default["default"].div(templateObject_1$
|
|
1134
|
+
var ChartContainer = styled__default["default"].div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n"], ["\n height: ", ";\n width: ", ";\n"])), function (_a) {
|
|
1116
1135
|
var height = _a.height;
|
|
1117
1136
|
return height || "300px";
|
|
1118
1137
|
}, function (_a) {
|
|
1119
1138
|
var width = _a.width;
|
|
1120
1139
|
return width || "100%";
|
|
1121
1140
|
});
|
|
1122
|
-
var templateObject_1$
|
|
1123
|
-
|
|
1124
|
-
var BarChart = function (_a) {
|
|
1125
|
-
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, props = __rest(_a, ["theme", "colors", "width", "height"]);
|
|
1126
|
-
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(bar.ResponsiveBar, __assign({ theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_5, enableLabel: false }, props)) })));
|
|
1127
|
-
};
|
|
1141
|
+
var templateObject_1$18;
|
|
1128
1142
|
|
|
1129
1143
|
var CustomBulletChartMarkers = function (_a) {
|
|
1130
1144
|
var x = _a.x, y = _a.y, size = _a.size, _b = _a.animatedProps, color = _b.color, transform = _b.transform;
|
|
@@ -1133,7 +1147,7 @@ var CustomBulletChartMarkers = function (_a) {
|
|
|
1133
1147
|
|
|
1134
1148
|
var CustomMeasure = function (_a) {
|
|
1135
1149
|
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
|
|
1136
|
-
return (jsxRuntime.jsx("rect", { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill:
|
|
1150
|
+
return (jsxRuntime.jsx("rect", { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: CHARTS_COLOR_PALETTE.darkGrey }));
|
|
1137
1151
|
};
|
|
1138
1152
|
|
|
1139
1153
|
var CustomTooltip = function (_a) {
|
|
@@ -1141,7 +1155,7 @@ var CustomTooltip = function (_a) {
|
|
|
1141
1155
|
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 }));
|
|
1142
1156
|
};
|
|
1143
1157
|
|
|
1144
|
-
var UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$
|
|
1158
|
+
var UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
1145
1159
|
var BulletChart = function (_a) {
|
|
1146
1160
|
var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values;
|
|
1147
1161
|
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
|
|
@@ -1152,18 +1166,19 @@ var BulletChart = function (_a) {
|
|
|
1152
1166
|
measures: values,
|
|
1153
1167
|
markers: values,
|
|
1154
1168
|
},
|
|
1155
|
-
], measureComponent: CustomMeasure, markerColors:
|
|
1169
|
+
], animate: false, measureComponent: CustomMeasure, markerColors: CHARTS_COLOR_PALETTE.darkPine, markerComponent: function (_a) {
|
|
1156
1170
|
_a.size; var markerProps = __rest(_a, ["size"]);
|
|
1157
1171
|
return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
|
|
1158
|
-
}, tooltip: CustomTooltip, rangeColors:
|
|
1172
|
+
}, tooltip: CustomTooltip, rangeColors: CHARTS_COLOR_PALETTE.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })));
|
|
1159
1173
|
};
|
|
1160
|
-
var templateObject_1$
|
|
1174
|
+
var templateObject_1$17;
|
|
1161
1175
|
|
|
1162
1176
|
var CenteredItem = function (_a) {
|
|
1163
|
-
var centerX = _a.centerX, centerY = _a.centerY, theme = _a.theme, radius = _a.radius, label = _a.label, value = _a.value;
|
|
1177
|
+
var centerX = _a.centerX, centerY = _a.centerY, theme = _a.theme, radius = _a.radius, label = _a.label, value = _a.value, fontSizeMultiplier = _a.fontSizeMultiplier;
|
|
1164
1178
|
var parameter = 6;
|
|
1165
|
-
var fontSizeFactor = radius / (14 * parameter);
|
|
1166
|
-
var spacing =
|
|
1179
|
+
var fontSizeFactor = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) / (14 * parameter);
|
|
1180
|
+
var spacing = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) /
|
|
1181
|
+
(parameter * 0.9);
|
|
1167
1182
|
var shift = -radius / (parameter * 2.5);
|
|
1168
1183
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx("g", __assign({ transform: "translate(".concat(centerX, ",").concat(centerY, ")") }, { children: jsxRuntime.jsx("text", __assign({ textAnchor: "middle", baselineShift: shift + (value ? spacing : spacing / 2), fill: theme.palette.grey[600], style: {
|
|
1169
1184
|
fontSize: parseInt(theme.fontSizes.md.replace("px", "")) * fontSizeFactor,
|
|
@@ -1175,20 +1190,21 @@ var CenteredItem = function (_a) {
|
|
|
1175
1190
|
};
|
|
1176
1191
|
|
|
1177
1192
|
var PieChart = function (_a) {
|
|
1193
|
+
var _b;
|
|
1178
1194
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin;
|
|
1179
1195
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
1180
|
-
return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), 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), innerRadius: 0.8, arcLinkLabelsThickness: 2,
|
|
1196
|
+
return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(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) }) })), 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), cornerRadius: 3, innerRadius: 0.8, arcLinkLabelsThickness: 2, layers: __spreadArray([
|
|
1181
1197
|
"arcs",
|
|
1182
1198
|
"arcLabels",
|
|
1183
1199
|
"arcLinkLabels"
|
|
1184
1200
|
], (centerItem
|
|
1185
1201
|
? [
|
|
1186
|
-
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
|
|
1202
|
+
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))); },
|
|
1187
1203
|
]
|
|
1188
1204
|
: []), true), activeOuterRadiusOffset: 12 }) })) }));
|
|
1189
1205
|
};
|
|
1190
1206
|
|
|
1191
|
-
var AbsoluteChartContainer = styled__default["default"](ChartContainer)(templateObject_1$
|
|
1207
|
+
var AbsoluteChartContainer = styled__default["default"](ChartContainer)(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
1192
1208
|
var mode = _a.mode;
|
|
1193
1209
|
return (mode === "front" ? "z-index: 1;" : "");
|
|
1194
1210
|
}, function (_a) {
|
|
@@ -1204,7 +1220,7 @@ var HalfPieChartComponent = function (_a) {
|
|
|
1204
1220
|
? ["arcLabels", "arcLinkLabels"]
|
|
1205
1221
|
: []), true), startAngle: -90, endAngle: 90, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, animate: false }) })));
|
|
1206
1222
|
};
|
|
1207
|
-
var templateObject_1$
|
|
1223
|
+
var templateObject_1$16;
|
|
1208
1224
|
|
|
1209
1225
|
var HalfPieChart = function (_a) {
|
|
1210
1226
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, margin = _a.margin, showArcLinks = _a.showArcLinks;
|
|
@@ -1231,22 +1247,84 @@ var HalfPieChart = function (_a) {
|
|
|
1231
1247
|
}, mode: "back" })] })));
|
|
1232
1248
|
};
|
|
1233
1249
|
|
|
1234
|
-
var
|
|
1235
|
-
|
|
1236
|
-
|
|
1250
|
+
var flatten = function (data) {
|
|
1251
|
+
return data.reduce(function (acc, item) {
|
|
1252
|
+
if (item.children) {
|
|
1253
|
+
return __spreadArray(__spreadArray(__spreadArray([], acc, true), [item], false), flatten(item.children), true);
|
|
1254
|
+
}
|
|
1255
|
+
return __spreadArray(__spreadArray([], acc, true), [item], false);
|
|
1256
|
+
}, []);
|
|
1257
|
+
};
|
|
1258
|
+
var findChildrenByName = function (data, name) {
|
|
1259
|
+
if (!data.children)
|
|
1260
|
+
return undefined;
|
|
1261
|
+
return flatten(data.children).find(function (searchedName) { return searchedName.name === name; });
|
|
1237
1262
|
};
|
|
1238
1263
|
|
|
1264
|
+
var ResetText = styled__default["default"].text(templateObject_1$15 || (templateObject_1$15 = __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
|
+
var radius = _a.radius, theme = _a.theme;
|
|
1266
|
+
return (parseInt(theme.fontSizes.md.replace("px", "")) * radius) / 130;
|
|
1267
|
+
}, function (_a) {
|
|
1268
|
+
var theme = _a.theme;
|
|
1269
|
+
return theme.palette.blue[500];
|
|
1270
|
+
}, function (_a) {
|
|
1271
|
+
var theme = _a.theme;
|
|
1272
|
+
return theme.palette.blue[700];
|
|
1273
|
+
});
|
|
1274
|
+
var ResetButton = function (_a) {
|
|
1275
|
+
var centerX = _a.centerX, centerY = _a.centerY, radius = _a.radius; _a.theme; var onClick = _a.onClick;
|
|
1276
|
+
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
|
+
};
|
|
1278
|
+
var templateObject_1$15;
|
|
1279
|
+
|
|
1239
1280
|
var SunburstChart = function (_a) {
|
|
1240
|
-
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height,
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1281
|
+
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin, onChange = _a.onChange;
|
|
1282
|
+
var themeContext = React.useContext(styled.ThemeContext);
|
|
1283
|
+
var _b = React.useState(data), currentData = _b[0], setCurrentData = _b[1];
|
|
1284
|
+
var _c = React.useState(), currentColor = _c[0], setCurrentColor = _c[1];
|
|
1285
|
+
var _d = React.useState(false), isHovering = _d[0], setIsHovering = _d[1];
|
|
1286
|
+
var changeDataSlice = function (_a) {
|
|
1287
|
+
var data = _a.data, color = _a.color;
|
|
1288
|
+
setCurrentData(data);
|
|
1289
|
+
setCurrentColor(color);
|
|
1290
|
+
if (onChange)
|
|
1291
|
+
onChange(currentData);
|
|
1292
|
+
};
|
|
1293
|
+
if (!data.children)
|
|
1294
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
|
|
1295
|
+
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: currentColor
|
|
1296
|
+
? function () { return currentColor; }
|
|
1297
|
+
: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 3, onMouseEnter: function (node) {
|
|
1298
|
+
if (node.data.children) {
|
|
1299
|
+
setIsHovering(true);
|
|
1300
|
+
}
|
|
1301
|
+
}, onMouseLeave: function (node) {
|
|
1302
|
+
if (node.data.children) {
|
|
1303
|
+
setIsHovering(false);
|
|
1304
|
+
}
|
|
1305
|
+
}, layers: __spreadArray(__spreadArray([
|
|
1306
|
+
"arcs"
|
|
1307
|
+
], (centerItem
|
|
1308
|
+
? [
|
|
1309
|
+
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
|
|
1310
|
+
]
|
|
1311
|
+
: []), true), (currentColor
|
|
1312
|
+
? [
|
|
1313
|
+
function (props) { return (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: function () {
|
|
1314
|
+
changeDataSlice({
|
|
1315
|
+
data: data
|
|
1316
|
+
});
|
|
1317
|
+
} })); },
|
|
1248
1318
|
]
|
|
1249
|
-
|
|
1319
|
+
: []), true), id: "name", value: "value", margin: __assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.5]] }, onClick: function (clickedData) {
|
|
1320
|
+
var foundObject = findChildrenByName(currentData, clickedData.id.toString());
|
|
1321
|
+
if (foundObject && foundObject.children) {
|
|
1322
|
+
changeDataSlice({
|
|
1323
|
+
data: foundObject,
|
|
1324
|
+
color: clickedData.color
|
|
1325
|
+
});
|
|
1326
|
+
}
|
|
1327
|
+
} }) })));
|
|
1250
1328
|
};
|
|
1251
1329
|
|
|
1252
1330
|
var CustomCell = function (_a) {
|
|
@@ -1283,7 +1361,7 @@ var WaffleChart = function (_a) {
|
|
|
1283
1361
|
} }) })));
|
|
1284
1362
|
};
|
|
1285
1363
|
|
|
1286
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
1364
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
1287
1365
|
var theme = _a.theme;
|
|
1288
1366
|
return theme.space.xl;
|
|
1289
1367
|
}, function (_a) {
|
|
@@ -1294,7 +1372,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
1294
1372
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1295
1373
|
*/
|
|
1296
1374
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
1297
|
-
var templateObject_1$
|
|
1375
|
+
var templateObject_1$14;
|
|
1298
1376
|
|
|
1299
1377
|
/**
|
|
1300
1378
|
* Use Span to style and format inline text elements.
|
|
@@ -1334,7 +1412,7 @@ function useWindowSize() {
|
|
|
1334
1412
|
return size;
|
|
1335
1413
|
}
|
|
1336
1414
|
|
|
1337
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1415
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject([""], [""])));
|
|
1338
1416
|
var StyledTag = styled__default["default"](Tag)(templateObject_2$r || (templateObject_2$r = __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) {
|
|
1339
1417
|
var status = _a.status, theme = _a.theme;
|
|
1340
1418
|
switch (status) {
|
|
@@ -1369,9 +1447,9 @@ var Counter = function (props) {
|
|
|
1369
1447
|
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() })] })));
|
|
1370
1448
|
};
|
|
1371
1449
|
Counter.Avatar = StyledTag.Avatar;
|
|
1372
|
-
var templateObject_1$
|
|
1450
|
+
var templateObject_1$13, templateObject_2$r;
|
|
1373
1451
|
|
|
1374
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
1452
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
1375
1453
|
var theme = _a.theme;
|
|
1376
1454
|
return theme.breakpoints.sm;
|
|
1377
1455
|
});
|
|
@@ -1388,24 +1466,24 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1388
1466
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1389
1467
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1390
1468
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1391
|
-
var templateObject_1$
|
|
1469
|
+
var templateObject_1$12;
|
|
1392
1470
|
|
|
1393
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1394
|
-
var templateObject_1$
|
|
1471
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""])));
|
|
1472
|
+
var templateObject_1$11;
|
|
1395
1473
|
|
|
1396
1474
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1397
1475
|
__proto__: null,
|
|
1398
1476
|
Field: Field$1
|
|
1399
1477
|
});
|
|
1400
1478
|
|
|
1401
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1
|
|
1479
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
1402
1480
|
var theme = _a.theme;
|
|
1403
1481
|
return theme.palette.blue[100];
|
|
1404
1482
|
});
|
|
1405
1483
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1406
|
-
var templateObject_1
|
|
1484
|
+
var templateObject_1$10;
|
|
1407
1485
|
|
|
1408
|
-
var Container = styled__default["default"].div(templateObject_1
|
|
1486
|
+
var Container = styled__default["default"].div(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
1409
1487
|
var MetaContainer$1 = styled__default["default"].div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
1410
1488
|
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) {
|
|
1411
1489
|
var theme = _a.theme;
|
|
@@ -1433,7 +1511,7 @@ var ItemContent = function (props) {
|
|
|
1433
1511
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1434
1512
|
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 })] })] }));
|
|
1435
1513
|
};
|
|
1436
|
-
var templateObject_1
|
|
1514
|
+
var templateObject_1$$, templateObject_2$q, templateObject_3$g, templateObject_4$d, templateObject_5$5;
|
|
1437
1515
|
|
|
1438
1516
|
/**
|
|
1439
1517
|
* A Menu is a wrapper for items elements
|
|
@@ -1457,7 +1535,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1457
1535
|
*/
|
|
1458
1536
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1459
1537
|
|
|
1460
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1538
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1461
1539
|
return props.isPrimary &&
|
|
1462
1540
|
"\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 ");
|
|
1463
1541
|
});
|
|
@@ -1474,7 +1552,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1474
1552
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1475
1553
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1476
1554
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1477
|
-
var templateObject_1$
|
|
1555
|
+
var templateObject_1$_;
|
|
1478
1556
|
|
|
1479
1557
|
/**
|
|
1480
1558
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1489,7 +1567,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1489
1567
|
|
|
1490
1568
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1491
1569
|
|
|
1492
|
-
var editorStyle = styled.css(templateObject_1$
|
|
1570
|
+
var editorStyle = styled.css(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
1493
1571
|
var theme = _a.theme;
|
|
1494
1572
|
return theme.palette.grey["800"];
|
|
1495
1573
|
}, function (_a) {
|
|
@@ -1502,7 +1580,7 @@ var editorStyle = styled.css(templateObject_1$Y || (templateObject_1$Y = __makeT
|
|
|
1502
1580
|
var theme = _a.theme;
|
|
1503
1581
|
return theme.palette.red[600];
|
|
1504
1582
|
});
|
|
1505
|
-
var templateObject_1$
|
|
1583
|
+
var templateObject_1$Z;
|
|
1506
1584
|
|
|
1507
1585
|
var _path$l;
|
|
1508
1586
|
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); }
|
|
@@ -1648,7 +1726,7 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1648
1726
|
}))));
|
|
1649
1727
|
};
|
|
1650
1728
|
|
|
1651
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1729
|
+
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject([""], [""])));
|
|
1652
1730
|
var MenuContainer = styled__default["default"](Card)(templateObject_2$p || (templateObject_2$p = __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) {
|
|
1653
1731
|
var theme = _a.theme;
|
|
1654
1732
|
return theme.space.xxs;
|
|
@@ -1666,9 +1744,9 @@ var FloatingMenu = function (props) {
|
|
|
1666
1744
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1667
1745
|
}, 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") }))] })) })));
|
|
1668
1746
|
};
|
|
1669
|
-
var templateObject_1$
|
|
1747
|
+
var templateObject_1$Y, templateObject_2$p;
|
|
1670
1748
|
|
|
1671
|
-
var Header$1 = styled__default["default"].div(templateObject_1$
|
|
1749
|
+
var Header$1 = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
1672
1750
|
var theme = _a.theme;
|
|
1673
1751
|
return theme.space.xs;
|
|
1674
1752
|
}, function (_a) {
|
|
@@ -1697,9 +1775,9 @@ var EditorHeader = function (props) {
|
|
|
1697
1775
|
var title = props.title, validation = props.validation;
|
|
1698
1776
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$1, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1699
1777
|
};
|
|
1700
|
-
var templateObject_1$
|
|
1778
|
+
var templateObject_1$X, templateObject_2$o;
|
|
1701
1779
|
|
|
1702
|
-
var Footer$1 = styled__default["default"].div(templateObject_1$
|
|
1780
|
+
var Footer$1 = styled__default["default"].div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
1703
1781
|
var theme = _a.theme;
|
|
1704
1782
|
return theme.space.sm;
|
|
1705
1783
|
}, function (_a) {
|
|
@@ -1711,9 +1789,9 @@ var EditorFooter = function (_a) {
|
|
|
1711
1789
|
var saveText = _a.saveText;
|
|
1712
1790
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1713
1791
|
};
|
|
1714
|
-
var templateObject_1$
|
|
1792
|
+
var templateObject_1$W, templateObject_2$n;
|
|
1715
1793
|
|
|
1716
|
-
var EditorContainer = styled__default["default"].div(templateObject_1$
|
|
1794
|
+
var EditorContainer = styled__default["default"].div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
1717
1795
|
var theme = _a.theme;
|
|
1718
1796
|
return theme.borderRadii.md;
|
|
1719
1797
|
}, function (_a) {
|
|
@@ -1797,9 +1875,9 @@ var Editor = function (_a) {
|
|
|
1797
1875
|
});
|
|
1798
1876
|
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 })] })));
|
|
1799
1877
|
};
|
|
1800
|
-
var templateObject_1$
|
|
1878
|
+
var templateObject_1$V;
|
|
1801
1879
|
|
|
1802
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1880
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject([""], [""])));
|
|
1803
1881
|
/**
|
|
1804
1882
|
* A Checkbox lets users select and unselect options from a list.
|
|
1805
1883
|
* <hr>
|
|
@@ -1811,17 +1889,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1811
1889
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1812
1890
|
**/
|
|
1813
1891
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1814
|
-
var templateObject_1$
|
|
1892
|
+
var templateObject_1$U;
|
|
1815
1893
|
|
|
1816
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1894
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
1817
1895
|
/**
|
|
1818
1896
|
* A Label is used to specify a title for an input.
|
|
1819
1897
|
* <hr>
|
|
1820
1898
|
**/
|
|
1821
1899
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1822
|
-
var templateObject_1$
|
|
1900
|
+
var templateObject_1$T;
|
|
1823
1901
|
|
|
1824
|
-
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$
|
|
1902
|
+
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1825
1903
|
var theme = _a.theme;
|
|
1826
1904
|
return theme.space.base;
|
|
1827
1905
|
});
|
|
@@ -1834,14 +1912,14 @@ var CheckboxCard = function (props) {
|
|
|
1834
1912
|
};
|
|
1835
1913
|
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 })) })) }))] })));
|
|
1836
1914
|
};
|
|
1837
|
-
var templateObject_1$
|
|
1915
|
+
var templateObject_1$S;
|
|
1838
1916
|
|
|
1839
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1917
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1840
1918
|
/**
|
|
1841
1919
|
* A Field is a wrapper for input elements
|
|
1842
1920
|
**/
|
|
1843
1921
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1844
|
-
var templateObject_1$
|
|
1922
|
+
var templateObject_1$R;
|
|
1845
1923
|
|
|
1846
1924
|
var index = /*#__PURE__*/Object.freeze({
|
|
1847
1925
|
__proto__: null,
|
|
@@ -1849,7 +1927,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1849
1927
|
Hint: reactForms.Hint
|
|
1850
1928
|
});
|
|
1851
1929
|
|
|
1852
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1930
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
1853
1931
|
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject([""], [""])));
|
|
1854
1932
|
/**
|
|
1855
1933
|
* An Input lets users enter text into a field.
|
|
@@ -1859,7 +1937,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (te
|
|
|
1859
1937
|
* - To enter multiline text, use a Textarea
|
|
1860
1938
|
**/
|
|
1861
1939
|
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
1862
|
-
var templateObject_1$
|
|
1940
|
+
var templateObject_1$Q, templateObject_2$m;
|
|
1863
1941
|
|
|
1864
1942
|
var _g$1;
|
|
1865
1943
|
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); }
|
|
@@ -1883,7 +1961,7 @@ var SvgNotesStroke = function SvgNotesStroke(props) {
|
|
|
1883
1961
|
};
|
|
1884
1962
|
|
|
1885
1963
|
var ToggleContext = React.createContext({});
|
|
1886
|
-
var StyledInput = styled__default["default"](Input)(templateObject_1$
|
|
1964
|
+
var StyledInput = styled__default["default"](Input)(templateObject_1$P || (templateObject_1$P = __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) {
|
|
1887
1965
|
var theme = _a.theme;
|
|
1888
1966
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1889
1967
|
});
|
|
@@ -1941,9 +2019,9 @@ var InputItem = function (props) {
|
|
|
1941
2019
|
};
|
|
1942
2020
|
InputToggle.Item = InputItem;
|
|
1943
2021
|
InputToggle.Label = StyledLabel;
|
|
1944
|
-
var templateObject_1$
|
|
2022
|
+
var templateObject_1$P, templateObject_2$l, templateObject_3$f, templateObject_4$c;
|
|
1945
2023
|
|
|
1946
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
2024
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1947
2025
|
/**
|
|
1948
2026
|
* Media elements add even more context to an input.
|
|
1949
2027
|
* <hr>
|
|
@@ -1952,9 +2030,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1952
2030
|
* - To enter multiline text, use a Textarea
|
|
1953
2031
|
**/
|
|
1954
2032
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1955
|
-
var templateObject_1$
|
|
2033
|
+
var templateObject_1$O;
|
|
1956
2034
|
|
|
1957
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
2035
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1958
2036
|
/**
|
|
1959
2037
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1960
2038
|
* <hr>
|
|
@@ -1966,7 +2044,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$M ||
|
|
|
1966
2044
|
* - To select from a long list of options, use Select instead
|
|
1967
2045
|
**/
|
|
1968
2046
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1969
|
-
var templateObject_1$
|
|
2047
|
+
var templateObject_1$N;
|
|
1970
2048
|
|
|
1971
2049
|
var _path$i;
|
|
1972
2050
|
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); }
|
|
@@ -1984,7 +2062,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1984
2062
|
})));
|
|
1985
2063
|
};
|
|
1986
2064
|
|
|
1987
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
2065
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$M || (templateObject_1$M = __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) {
|
|
1988
2066
|
var theme = _a.theme;
|
|
1989
2067
|
return theme.space.base;
|
|
1990
2068
|
}, function (_a) {
|
|
@@ -2018,9 +2096,9 @@ var RadioCard = function (_a) {
|
|
|
2018
2096
|
props.onChecked && props.onChecked(props.value);
|
|
2019
2097
|
} }, { 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 })) }))] })));
|
|
2020
2098
|
};
|
|
2021
|
-
var templateObject_1$
|
|
2099
|
+
var templateObject_1$M, templateObject_2$k;
|
|
2022
2100
|
|
|
2023
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
2101
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
2024
2102
|
/**
|
|
2025
2103
|
* A Textarea is a form control for multi-line text.
|
|
2026
2104
|
* <hr>
|
|
@@ -2028,9 +2106,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
2028
2106
|
* - To enter multi-line text
|
|
2029
2107
|
**/
|
|
2030
2108
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
2031
|
-
var templateObject_1$
|
|
2109
|
+
var templateObject_1$L;
|
|
2032
2110
|
|
|
2033
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
2111
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
2034
2112
|
/**
|
|
2035
2113
|
* 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.
|
|
2036
2114
|
* <hr>
|
|
@@ -2041,11 +2119,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$J
|
|
|
2041
2119
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
2042
2120
|
**/
|
|
2043
2121
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
2044
|
-
var templateObject_1$
|
|
2122
|
+
var templateObject_1$K;
|
|
2045
2123
|
|
|
2046
|
-
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
2124
|
+
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$J || (templateObject_1$J = __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);
|
|
2047
2125
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
2048
|
-
var templateObject_1$
|
|
2126
|
+
var templateObject_1$J;
|
|
2049
2127
|
|
|
2050
2128
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
2051
2129
|
|
|
@@ -2102,15 +2180,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
2102
2180
|
})));
|
|
2103
2181
|
};
|
|
2104
2182
|
|
|
2105
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
2183
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
2106
2184
|
var Icon = function (props) {
|
|
2107
2185
|
var type = props.type, size = props.size;
|
|
2108
2186
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
2109
2187
|
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 })] }));
|
|
2110
2188
|
};
|
|
2111
|
-
var templateObject_1$
|
|
2189
|
+
var templateObject_1$I;
|
|
2112
2190
|
|
|
2113
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
2191
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
2114
2192
|
/**
|
|
2115
2193
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
2116
2194
|
* <hr>
|
|
@@ -2122,9 +2200,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
2122
2200
|
- When loading page content, use a Skeleton loader instead
|
|
2123
2201
|
*/
|
|
2124
2202
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
2125
|
-
var templateObject_1$
|
|
2203
|
+
var templateObject_1$H;
|
|
2126
2204
|
|
|
2127
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
2205
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
2128
2206
|
/**
|
|
2129
2207
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
2130
2208
|
* <hr>
|
|
@@ -2133,9 +2211,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
2133
2211
|
- To provide a quick way to navigate to ancestor pages
|
|
2134
2212
|
*/
|
|
2135
2213
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
2136
|
-
var templateObject_1$
|
|
2214
|
+
var templateObject_1$G;
|
|
2137
2215
|
|
|
2138
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
2216
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2139
2217
|
var theme = _a.theme;
|
|
2140
2218
|
return theme.palette.white;
|
|
2141
2219
|
});
|
|
@@ -2143,7 +2221,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$E ||
|
|
|
2143
2221
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
2144
2222
|
*/
|
|
2145
2223
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
2146
|
-
var templateObject_1$
|
|
2224
|
+
var templateObject_1$F;
|
|
2147
2225
|
|
|
2148
2226
|
/**
|
|
2149
2227
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -2165,7 +2243,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
2165
2243
|
})));
|
|
2166
2244
|
};
|
|
2167
2245
|
|
|
2168
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
2246
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
2169
2247
|
var theme = _a.theme;
|
|
2170
2248
|
return theme.fonts.system;
|
|
2171
2249
|
});
|
|
@@ -2174,14 +2252,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$j ||
|
|
|
2174
2252
|
return theme.fonts.system;
|
|
2175
2253
|
});
|
|
2176
2254
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
2177
|
-
var templateObject_1$
|
|
2255
|
+
var templateObject_1$E, templateObject_2$j;
|
|
2178
2256
|
|
|
2179
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
2257
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
2180
2258
|
var theme = _a.theme;
|
|
2181
2259
|
return theme.fonts.system;
|
|
2182
2260
|
});
|
|
2183
2261
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
2184
|
-
var templateObject_1$
|
|
2262
|
+
var templateObject_1$D;
|
|
2185
2263
|
|
|
2186
2264
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
2187
2265
|
|
|
@@ -2228,7 +2306,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
2228
2306
|
})));
|
|
2229
2307
|
};
|
|
2230
2308
|
|
|
2231
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
2309
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
2232
2310
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
2233
2311
|
return isCompact &&
|
|
2234
2312
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -2244,9 +2322,9 @@ var WorkspacesDropdown = function (props) {
|
|
|
2244
2322
|
? selectedWorkspace.company + "'s workspace"
|
|
2245
2323
|
: "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 }))); })] })] })));
|
|
2246
2324
|
};
|
|
2247
|
-
var templateObject_1$
|
|
2325
|
+
var templateObject_1$C;
|
|
2248
2326
|
|
|
2249
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
2327
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$B || (templateObject_1$B = __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) {
|
|
2250
2328
|
var theme = _a.theme;
|
|
2251
2329
|
return theme.breakpoints.md;
|
|
2252
2330
|
});
|
|
@@ -2280,9 +2358,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
2280
2358
|
var BrandItem = function (props) {
|
|
2281
2359
|
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 }) }))) }))] }));
|
|
2282
2360
|
};
|
|
2283
|
-
var templateObject_1$
|
|
2361
|
+
var templateObject_1$B, templateObject_2$i, templateObject_3$e, templateObject_4$b;
|
|
2284
2362
|
|
|
2285
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
2363
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
2286
2364
|
/**
|
|
2287
2365
|
* An Header is a visual way to display general information.
|
|
2288
2366
|
* This can include navList Items, modal, profile settings.
|
|
@@ -2291,13 +2369,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
2291
2369
|
Header.HeaderItem = HeaderItem;
|
|
2292
2370
|
Header.HeaderItemText = HeaderItemText;
|
|
2293
2371
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
2294
|
-
var templateObject_1$
|
|
2372
|
+
var templateObject_1$A;
|
|
2295
2373
|
|
|
2296
2374
|
var HeaderSkeleton = function () {
|
|
2297
2375
|
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%" } }) }) }) }))] })));
|
|
2298
2376
|
};
|
|
2299
2377
|
|
|
2300
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
2378
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
2301
2379
|
var theme = _a.theme;
|
|
2302
2380
|
return theme.breakpoints.sm;
|
|
2303
2381
|
});
|
|
@@ -2309,9 +2387,9 @@ var AppHeader = function (_a) {
|
|
|
2309
2387
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
2310
2388
|
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, {}) }))] }) }) }))] })));
|
|
2311
2389
|
};
|
|
2312
|
-
var templateObject_1$
|
|
2390
|
+
var templateObject_1$z;
|
|
2313
2391
|
|
|
2314
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
2392
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$y || (templateObject_1$y = __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) {
|
|
2315
2393
|
var theme = _a.theme;
|
|
2316
2394
|
return theme.borders.sm;
|
|
2317
2395
|
}, function (_a) {
|
|
@@ -2339,9 +2417,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$x || (t
|
|
|
2339
2417
|
- To give a consistent dashboard and navigation experience
|
|
2340
2418
|
*/
|
|
2341
2419
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
2342
|
-
var templateObject_1$
|
|
2420
|
+
var templateObject_1$y;
|
|
2343
2421
|
|
|
2344
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
2422
|
+
var SelectedItemStyle = styled.css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2345
2423
|
var theme = _a.theme;
|
|
2346
2424
|
return theme.palette.kale["100"];
|
|
2347
2425
|
});
|
|
@@ -2359,11 +2437,11 @@ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject
|
|
|
2359
2437
|
return theme.space.xs;
|
|
2360
2438
|
});
|
|
2361
2439
|
var NavItem = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem$2, __assign({ ref: ref }, props)); });
|
|
2362
|
-
var templateObject_1$
|
|
2440
|
+
var templateObject_1$x, templateObject_2$h;
|
|
2363
2441
|
|
|
2364
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
2442
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
|
|
2365
2443
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2366
|
-
var templateObject_1$
|
|
2444
|
+
var templateObject_1$w;
|
|
2367
2445
|
|
|
2368
2446
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "158px" } }, { children: props.children })) }))); };
|
|
2369
2447
|
|
|
@@ -2397,7 +2475,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2397
2475
|
})));
|
|
2398
2476
|
};
|
|
2399
2477
|
|
|
2400
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
2478
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$v || (templateObject_1$v = __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) {
|
|
2401
2479
|
var theme = _a.theme;
|
|
2402
2480
|
return theme.space.base * 6;
|
|
2403
2481
|
}, function (_a) {
|
|
@@ -2422,13 +2500,13 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$u ||
|
|
|
2422
2500
|
var NavToggle = function (props) {
|
|
2423
2501
|
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%" } })) })));
|
|
2424
2502
|
};
|
|
2425
|
-
var templateObject_1$
|
|
2503
|
+
var templateObject_1$v;
|
|
2426
2504
|
|
|
2427
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
2505
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$u || (templateObject_1$u = __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;"; });
|
|
2428
2506
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2429
|
-
var templateObject_1$
|
|
2507
|
+
var templateObject_1$u;
|
|
2430
2508
|
|
|
2431
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
2509
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$t || (templateObject_1$t = __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; });
|
|
2432
2510
|
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$g || (templateObject_2$g = __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) {
|
|
2433
2511
|
var theme = _a.theme;
|
|
2434
2512
|
return theme.space.xxl;
|
|
@@ -2437,7 +2515,7 @@ var NavItemComponent = React.forwardRef(function (props, ref) { return jsxRuntim
|
|
|
2437
2515
|
var NavItemProject = NavItemComponent;
|
|
2438
2516
|
NavItemProject.Title = NavItemText;
|
|
2439
2517
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2440
|
-
var templateObject_1$
|
|
2518
|
+
var templateObject_1$t, templateObject_2$g;
|
|
2441
2519
|
|
|
2442
2520
|
var _path$a;
|
|
2443
2521
|
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); }
|
|
@@ -2593,7 +2671,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2593
2671
|
})))));
|
|
2594
2672
|
};
|
|
2595
2673
|
|
|
2596
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
2674
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
2597
2675
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2598
2676
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2599
2677
|
});
|
|
@@ -2601,9 +2679,9 @@ var LoadingSidebar = function (props) {
|
|
|
2601
2679
|
var isExpanded = props.isExpanded;
|
|
2602
2680
|
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" })] }))] })));
|
|
2603
2681
|
};
|
|
2604
|
-
var templateObject_1$
|
|
2682
|
+
var templateObject_1$s;
|
|
2605
2683
|
|
|
2606
|
-
var AccordionItem = styled__default["default"](Accordion)(templateObject_1$
|
|
2684
|
+
var AccordionItem = styled__default["default"](Accordion)(templateObject_1$r || (templateObject_1$r = __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) {
|
|
2607
2685
|
var theme = _a.theme;
|
|
2608
2686
|
return theme.space.xs;
|
|
2609
2687
|
});
|
|
@@ -2622,9 +2700,9 @@ var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObj
|
|
|
2622
2700
|
AccordionItem.Panel = AccordionItemPanel;
|
|
2623
2701
|
AccordionItem.Header = AccordionItemHeader;
|
|
2624
2702
|
AccordionItem.Label = AccordionItemLabel;
|
|
2625
|
-
var templateObject_1$
|
|
2703
|
+
var templateObject_1$r, templateObject_2$f, templateObject_3$d, templateObject_4$a;
|
|
2626
2704
|
|
|
2627
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
2705
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
2628
2706
|
var ScrollingContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
2629
2707
|
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) {
|
|
2630
2708
|
var isExpanded = _a.isExpanded;
|
|
@@ -2682,9 +2760,9 @@ var Sidebar = function (_a) {
|
|
|
2682
2760
|
color: theme.palette.grey[800],
|
|
2683
2761
|
} }, { 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" })] }))] })));
|
|
2684
2762
|
};
|
|
2685
|
-
var templateObject_1$
|
|
2763
|
+
var templateObject_1$q, templateObject_2$e, templateObject_3$c, templateObject_4$9;
|
|
2686
2764
|
|
|
2687
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
2765
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$p || (templateObject_1$p = __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) {
|
|
2688
2766
|
var theme = _a.theme;
|
|
2689
2767
|
return theme.breakpoints.sm;
|
|
2690
2768
|
}, function (_a) {
|
|
@@ -2695,21 +2773,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$o ||
|
|
|
2695
2773
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2696
2774
|
*/
|
|
2697
2775
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2698
|
-
var templateObject_1$
|
|
2776
|
+
var templateObject_1$p;
|
|
2699
2777
|
|
|
2700
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
2778
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$o || (templateObject_1$o = __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]);
|
|
2701
2779
|
var PageLoader = function () {
|
|
2702
2780
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2703
2781
|
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: "" }) }))] })] })] })] }) })));
|
|
2704
2782
|
};
|
|
2705
|
-
var templateObject_1$
|
|
2783
|
+
var templateObject_1$o;
|
|
2706
2784
|
|
|
2707
2785
|
/**
|
|
2708
2786
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2709
2787
|
*/
|
|
2710
2788
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2711
2789
|
|
|
2712
|
-
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$
|
|
2790
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$n || (templateObject_1$n = __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);
|
|
2713
2791
|
/**
|
|
2714
2792
|
* Login Form
|
|
2715
2793
|
* <hr>
|
|
@@ -2740,9 +2818,9 @@ var LoginForm = function (props) {
|
|
|
2740
2818
|
: 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 })) })))] })));
|
|
2741
2819
|
} }))] })), 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"] })))] }));
|
|
2742
2820
|
};
|
|
2743
|
-
var templateObject_1$
|
|
2821
|
+
var templateObject_1$n;
|
|
2744
2822
|
|
|
2745
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
2823
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
2746
2824
|
var theme = _a.theme;
|
|
2747
2825
|
return theme.palette.grey["800"];
|
|
2748
2826
|
});
|
|
@@ -2751,9 +2829,9 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2751
2829
|
Modal.Header = reactModals.Header;
|
|
2752
2830
|
Modal.Body = ugModalBody;
|
|
2753
2831
|
Modal.Footer = reactModals.Footer;
|
|
2754
|
-
var templateObject_1$
|
|
2832
|
+
var templateObject_1$m;
|
|
2755
2833
|
|
|
2756
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
2834
|
+
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
2757
2835
|
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$d || (templateObject_2$d = __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) {
|
|
2758
2836
|
var theme = _a.theme;
|
|
2759
2837
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
@@ -2791,7 +2869,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2791
2869
|
ModalFullScreen.Footer = StyledFooter;
|
|
2792
2870
|
ModalFullScreen.Close = StyledModalClose;
|
|
2793
2871
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2794
|
-
var templateObject_1$
|
|
2872
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
2795
2873
|
|
|
2796
2874
|
/**
|
|
2797
2875
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2812,7 +2890,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2812
2890
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2813
2891
|
var useToast = reactNotifications.useToast;
|
|
2814
2892
|
|
|
2815
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2893
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
|
|
2816
2894
|
/**
|
|
2817
2895
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2818
2896
|
|
|
@@ -2822,9 +2900,9 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2822
2900
|
*/
|
|
2823
2901
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2824
2902
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2825
|
-
var templateObject_1$
|
|
2903
|
+
var templateObject_1$k;
|
|
2826
2904
|
|
|
2827
|
-
var MainContainer = styled__default["default"].div(templateObject_1$
|
|
2905
|
+
var MainContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2828
2906
|
var InformationContainer = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __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) {
|
|
2829
2907
|
var theme = _a.theme;
|
|
2830
2908
|
return theme.space.xs;
|
|
@@ -2887,9 +2965,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2887
2965
|
var Main = function (props) {
|
|
2888
2966
|
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 }) }) })))] }) }));
|
|
2889
2967
|
};
|
|
2890
|
-
var templateObject_1$
|
|
2968
|
+
var templateObject_1$j, templateObject_2$c, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2891
2969
|
|
|
2892
|
-
var PageContainer = styled__default["default"].div(templateObject_1$
|
|
2970
|
+
var PageContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2893
2971
|
var theme = _a.theme;
|
|
2894
2972
|
return theme.palette.white;
|
|
2895
2973
|
});
|
|
@@ -2944,7 +3022,7 @@ PageHeader.Overline = MainOverline;
|
|
|
2944
3022
|
PageHeader.Title = MainTitle;
|
|
2945
3023
|
PageHeader.Description = MainDescription;
|
|
2946
3024
|
PageHeader.Counters = MainCounters;
|
|
2947
|
-
var templateObject_1$
|
|
3025
|
+
var templateObject_1$i, templateObject_2$b, templateObject_3$9, templateObject_4$6;
|
|
2948
3026
|
|
|
2949
3027
|
var _path$5;
|
|
2950
3028
|
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); }
|
|
@@ -2979,11 +3057,11 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2979
3057
|
})));
|
|
2980
3058
|
};
|
|
2981
3059
|
|
|
2982
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
3060
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __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; });
|
|
2983
3061
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2984
|
-
var templateObject_1$
|
|
3062
|
+
var templateObject_1$h;
|
|
2985
3063
|
|
|
2986
|
-
var flexCenter = styled.css(templateObject_1$
|
|
3064
|
+
var flexCenter = styled.css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
2987
3065
|
var flexColumnCenter = styled.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
2988
3066
|
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) {
|
|
2989
3067
|
var theme = _a.theme;
|
|
@@ -3002,13 +3080,13 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
3002
3080
|
var theme = _a.theme;
|
|
3003
3081
|
return theme.shadows.boxShadow(theme);
|
|
3004
3082
|
});
|
|
3005
|
-
var templateObject_1$
|
|
3083
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5;
|
|
3006
3084
|
|
|
3007
3085
|
/**
|
|
3008
3086
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
3009
3087
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
3010
3088
|
**/
|
|
3011
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
3089
|
+
var StyledItem = styled__default["default"].li(templateObject_1$f || (templateObject_1$f = __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) {
|
|
3012
3090
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
3013
3091
|
}, function (props) {
|
|
3014
3092
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -3027,7 +3105,7 @@ var MenuItem = function (_a) {
|
|
|
3027
3105
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
3028
3106
|
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));
|
|
3029
3107
|
};
|
|
3030
|
-
var templateObject_1$
|
|
3108
|
+
var templateObject_1$f, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
3031
3109
|
|
|
3032
3110
|
var _path$3;
|
|
3033
3111
|
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); }
|
|
@@ -3078,16 +3156,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
3078
3156
|
})));
|
|
3079
3157
|
};
|
|
3080
3158
|
|
|
3081
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
3159
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$e || (templateObject_1$e = __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 }"); });
|
|
3082
3160
|
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] }))); };
|
|
3083
|
-
var templateObject_1$
|
|
3161
|
+
var templateObject_1$e;
|
|
3084
3162
|
|
|
3085
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
3163
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject([""], [""])));
|
|
3086
3164
|
/**
|
|
3087
3165
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
3088
3166
|
*/
|
|
3089
3167
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
3090
|
-
var templateObject_1$
|
|
3168
|
+
var templateObject_1$d;
|
|
3091
3169
|
|
|
3092
3170
|
var getInitials = function (name) {
|
|
3093
3171
|
var names = name.split(" ");
|
|
@@ -3095,7 +3173,7 @@ var getInitials = function (name) {
|
|
|
3095
3173
|
return initials;
|
|
3096
3174
|
};
|
|
3097
3175
|
|
|
3098
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
3176
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$c || (templateObject_1$c = __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 }"); });
|
|
3099
3177
|
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$8 || (templateObject_2$8 = __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]; });
|
|
3100
3178
|
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) {
|
|
3101
3179
|
var theme = _a.theme;
|
|
@@ -3124,7 +3202,7 @@ var HelpItem = function (props) {
|
|
|
3124
3202
|
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"] }))] })] }));
|
|
3125
3203
|
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 })) }));
|
|
3126
3204
|
};
|
|
3127
|
-
var templateObject_1$
|
|
3205
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
3128
3206
|
|
|
3129
3207
|
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); }
|
|
3130
3208
|
var SvgEmpty = function SvgEmpty(props) {
|
|
@@ -3153,7 +3231,7 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
3153
3231
|
})));
|
|
3154
3232
|
};
|
|
3155
3233
|
|
|
3156
|
-
var StyledBody$1 = styled__default["default"].div(templateObject_1$
|
|
3234
|
+
var StyledBody$1 = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
3157
3235
|
var theme = _a.theme;
|
|
3158
3236
|
return theme.space.base * 6;
|
|
3159
3237
|
}, function (_a) {
|
|
@@ -3167,9 +3245,9 @@ var LanguageItem = function (props) {
|
|
|
3167
3245
|
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 }))] }))); }) }) })] }));
|
|
3168
3246
|
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] }))] }) })) }));
|
|
3169
3247
|
};
|
|
3170
|
-
var templateObject_1$
|
|
3248
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$5;
|
|
3171
3249
|
|
|
3172
|
-
var ProfileContainer = styled__default["default"].div(templateObject_1$
|
|
3250
|
+
var ProfileContainer = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
3173
3251
|
var theme = _a.theme;
|
|
3174
3252
|
return theme.space.base * 2;
|
|
3175
3253
|
}, function (_a) {
|
|
@@ -3197,9 +3275,9 @@ var UserContainer = function (props) {
|
|
|
3197
3275
|
var _a;
|
|
3198
3276
|
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 }))] })] }));
|
|
3199
3277
|
};
|
|
3200
|
-
var templateObject_1$
|
|
3278
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$4;
|
|
3201
3279
|
|
|
3202
|
-
var StyledList = styled__default["default"].ul(templateObject_1$
|
|
3280
|
+
var StyledList = styled__default["default"].ul(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
|
|
3203
3281
|
var UserMenu = function (props) {
|
|
3204
3282
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
3205
3283
|
var toggleItem = function (item) {
|
|
@@ -3207,9 +3285,9 @@ var UserMenu = function (props) {
|
|
|
3207
3285
|
};
|
|
3208
3286
|
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" }))] })] }));
|
|
3209
3287
|
};
|
|
3210
|
-
var templateObject_1$
|
|
3288
|
+
var templateObject_1$9;
|
|
3211
3289
|
|
|
3212
|
-
var StyledModal = styled__default["default"](Modal)(templateObject_1$
|
|
3290
|
+
var StyledModal = styled__default["default"](Modal)(templateObject_1$8 || (templateObject_1$8 = __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) {
|
|
3213
3291
|
var theme = _a.theme;
|
|
3214
3292
|
return theme.space.xxl;
|
|
3215
3293
|
}, function (_a) {
|
|
@@ -3247,9 +3325,9 @@ var ProfileModal = function (_a) {
|
|
|
3247
3325
|
};
|
|
3248
3326
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
3249
3327
|
};
|
|
3250
|
-
var templateObject_1$
|
|
3328
|
+
var templateObject_1$8, templateObject_2$5;
|
|
3251
3329
|
|
|
3252
|
-
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$
|
|
3330
|
+
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n svg {\n color: ", ";\n }\n"], ["\n svg {\n color: ", ";\n }\n"])), function (_a) {
|
|
3253
3331
|
var theme = _a.theme;
|
|
3254
3332
|
return theme.palette.green[700];
|
|
3255
3333
|
});
|
|
@@ -3289,9 +3367,9 @@ var Stepper = function (props) {
|
|
|
3289
3367
|
Stepper.Step = UgStep;
|
|
3290
3368
|
Stepper.Label = UgLabel;
|
|
3291
3369
|
Stepper.Content = UgContent;
|
|
3292
|
-
var templateObject_1$
|
|
3370
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
3293
3371
|
|
|
3294
|
-
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$
|
|
3372
|
+
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$6 || (templateObject_1$6 = __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) {
|
|
3295
3373
|
var theme = _a.theme;
|
|
3296
3374
|
return theme.palette.grey[300];
|
|
3297
3375
|
}, function (_a) {
|
|
@@ -3326,9 +3404,9 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
3326
3404
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
3327
3405
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
3328
3406
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
3329
|
-
var templateObject_1$
|
|
3407
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
3330
3408
|
|
|
3331
|
-
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$
|
|
3409
|
+
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
|
|
3332
3410
|
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
3333
3411
|
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);
|
|
3334
3412
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
@@ -3359,7 +3437,7 @@ var GroupedTable = function (_a) {
|
|
|
3359
3437
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
3360
3438
|
}) })] })));
|
|
3361
3439
|
};
|
|
3362
|
-
var templateObject_1$
|
|
3440
|
+
var templateObject_1$5, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
3363
3441
|
|
|
3364
3442
|
/**
|
|
3365
3443
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -3379,7 +3457,7 @@ Tiles.Icon = reactForms.Tiles.Icon;
|
|
|
3379
3457
|
Tiles.Label = reactForms.Tiles.Label;
|
|
3380
3458
|
Tiles.Tile = reactForms.Tiles.Tile;
|
|
3381
3459
|
|
|
3382
|
-
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$
|
|
3460
|
+
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject([""], [""])));
|
|
3383
3461
|
var UgTimelineContent = styled__default["default"](reactAccordions.Timeline.Content)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n padding: 12px 16px;\n"], ["\n padding: 12px 16px;\n"])));
|
|
3384
3462
|
var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n padding: 12px 16px;\n }\n\n ", "\n"], ["\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n padding: 12px 16px;\n }\n\n ", "\n"])), function (_a) {
|
|
3385
3463
|
var theme = _a.theme;
|
|
@@ -3401,7 +3479,7 @@ var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(t
|
|
|
3401
3479
|
var Timeline = function (props) { return jsxRuntime.jsx(UgTimeline, __assign({}, props)); };
|
|
3402
3480
|
Timeline.Item = UgTimelineItem;
|
|
3403
3481
|
Timeline.Content = UgTimelineContent;
|
|
3404
|
-
var templateObject_1$
|
|
3482
|
+
var templateObject_1$4, templateObject_2$1, templateObject_3;
|
|
3405
3483
|
|
|
3406
3484
|
/**
|
|
3407
3485
|
* Tooltips appear when a user hovers or focuses an element. They provide contextual information about the element they are paired with.
|
|
@@ -3413,7 +3491,12 @@ var templateObject_1$3, templateObject_2$1, templateObject_3;
|
|
|
3413
3491
|
* - To provide information a user needs to know or remember
|
|
3414
3492
|
* - To display truncated text, use a title attribute instead
|
|
3415
3493
|
*/
|
|
3416
|
-
var
|
|
3494
|
+
var TooltipComponent = function (props) { return jsxRuntime.jsx(reactTooltips.Tooltip, __assign({}, props)); };
|
|
3495
|
+
var Tooltip = styled__default["default"](TooltipComponent)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n box-shadow: ", ";\n"], ["\n box-shadow: ", ";\n"])), function (_a) {
|
|
3496
|
+
var theme = _a.theme;
|
|
3497
|
+
return theme.shadows.lg("".concat(theme.space.base * 3, "px"), "".concat(theme.space.base * 5, "px"), reactTheming.getColor("neutralHue", 600, theme, 0.15));
|
|
3498
|
+
});
|
|
3499
|
+
var templateObject_1$3;
|
|
3417
3500
|
|
|
3418
3501
|
var StyledTooltipModal = styled__default["default"](reactModals.TooltipModal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
|
|
3419
3502
|
var theme = _a.theme;
|
|
@@ -3474,7 +3557,6 @@ exports.Anchor = Anchor;
|
|
|
3474
3557
|
exports.AppHeader = AppHeader;
|
|
3475
3558
|
exports.Autocomplete = Autocomplete;
|
|
3476
3559
|
exports.Avatar = Avatar;
|
|
3477
|
-
exports.BarChart = BarChart;
|
|
3478
3560
|
exports.Blockquote = Blockquote;
|
|
3479
3561
|
exports.Body = Body$1;
|
|
3480
3562
|
exports.BrandItem = BrandItem;
|
|
@@ -3482,6 +3564,7 @@ exports.Breadcrumb = Breadcrumb;
|
|
|
3482
3564
|
exports.BulletChart = BulletChart;
|
|
3483
3565
|
exports.Button = Button;
|
|
3484
3566
|
exports.ButtonGroup = ButtonGroup;
|
|
3567
|
+
exports.CHARTS_COLOR_PALETTE = CHARTS_COLOR_PALETTE;
|
|
3485
3568
|
exports.CampaignCard = CampaignCard;
|
|
3486
3569
|
exports.Caption = Caption;
|
|
3487
3570
|
exports.Card = Card;
|
|
@@ -3571,7 +3654,6 @@ exports.SpecialCard = SpecialCard;
|
|
|
3571
3654
|
exports.Spinner = Spinner;
|
|
3572
3655
|
exports.SplitButton = SplitButton;
|
|
3573
3656
|
exports.Stepper = Stepper;
|
|
3574
|
-
exports.StreamChart = StreamChart;
|
|
3575
3657
|
exports.SunburstChart = SunburstChart;
|
|
3576
3658
|
exports.Table = Table;
|
|
3577
3659
|
exports.TableBody = Body;
|