@appquality/unguess-design-system 2.12.37 → 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/CHANGELOG.md +22 -0
- package/build/index.d.ts +0 -2
- package/build/index.js +264 -200
- 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/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: {
|
|
@@ -1101,7 +1103,7 @@ var CHARTS_COLOR_SCHEME_MONO = [
|
|
|
1101
1103
|
CHARTS_COLOR_PALETTE.darkPine,
|
|
1102
1104
|
CHARTS_COLOR_PALETTE.lightGrey,
|
|
1103
1105
|
];
|
|
1104
|
-
|
|
1106
|
+
[
|
|
1105
1107
|
CHARTS_COLOR_PALETTE.greenLight,
|
|
1106
1108
|
CHARTS_COLOR_PALETTE.blue,
|
|
1107
1109
|
CHARTS_COLOR_PALETTE.fucsia,
|
|
@@ -1129,19 +1131,14 @@ var CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
|
|
|
1129
1131
|
CHARTS_COLOR_PALETTE.mattone, // Mattone 900
|
|
1130
1132
|
];
|
|
1131
1133
|
|
|
1132
|
-
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) {
|
|
1133
1135
|
var height = _a.height;
|
|
1134
1136
|
return height || "300px";
|
|
1135
1137
|
}, function (_a) {
|
|
1136
1138
|
var width = _a.width;
|
|
1137
1139
|
return width || "100%";
|
|
1138
1140
|
});
|
|
1139
|
-
var templateObject_1$
|
|
1140
|
-
|
|
1141
|
-
var BarChart = function (_a) {
|
|
1142
|
-
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, props = __rest(_a, ["theme", "colors", "width", "height"]);
|
|
1143
|
-
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)) })));
|
|
1144
|
-
};
|
|
1141
|
+
var templateObject_1$18;
|
|
1145
1142
|
|
|
1146
1143
|
var CustomBulletChartMarkers = function (_a) {
|
|
1147
1144
|
var x = _a.x, y = _a.y, size = _a.size, _b = _a.animatedProps, color = _b.color, transform = _b.transform;
|
|
@@ -1158,7 +1155,7 @@ var CustomTooltip = function (_a) {
|
|
|
1158
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 }));
|
|
1159
1156
|
};
|
|
1160
1157
|
|
|
1161
|
-
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"])));
|
|
1162
1159
|
var BulletChart = function (_a) {
|
|
1163
1160
|
var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values;
|
|
1164
1161
|
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
|
|
@@ -1169,18 +1166,19 @@ var BulletChart = function (_a) {
|
|
|
1169
1166
|
measures: values,
|
|
1170
1167
|
markers: values,
|
|
1171
1168
|
},
|
|
1172
|
-
], measureComponent: CustomMeasure, markerColors: CHARTS_COLOR_PALETTE.darkPine, markerComponent: function (_a) {
|
|
1169
|
+
], animate: false, measureComponent: CustomMeasure, markerColors: CHARTS_COLOR_PALETTE.darkPine, markerComponent: function (_a) {
|
|
1173
1170
|
_a.size; var markerProps = __rest(_a, ["size"]);
|
|
1174
1171
|
return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
|
|
1175
1172
|
}, tooltip: CustomTooltip, rangeColors: CHARTS_COLOR_PALETTE.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })));
|
|
1176
1173
|
};
|
|
1177
|
-
var templateObject_1$
|
|
1174
|
+
var templateObject_1$17;
|
|
1178
1175
|
|
|
1179
1176
|
var CenteredItem = function (_a) {
|
|
1180
|
-
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;
|
|
1181
1178
|
var parameter = 6;
|
|
1182
|
-
var fontSizeFactor = radius / (14 * parameter);
|
|
1183
|
-
var spacing =
|
|
1179
|
+
var fontSizeFactor = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) / (14 * parameter);
|
|
1180
|
+
var spacing = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) /
|
|
1181
|
+
(parameter * 0.9);
|
|
1184
1182
|
var shift = -radius / (parameter * 2.5);
|
|
1185
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: {
|
|
1186
1184
|
fontSize: parseInt(theme.fontSizes.md.replace("px", "")) * fontSizeFactor,
|
|
@@ -1192,20 +1190,21 @@ var CenteredItem = function (_a) {
|
|
|
1192
1190
|
};
|
|
1193
1191
|
|
|
1194
1192
|
var PieChart = function (_a) {
|
|
1193
|
+
var _b;
|
|
1195
1194
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin;
|
|
1196
1195
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
1197
|
-
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([
|
|
1198
1197
|
"arcs",
|
|
1199
1198
|
"arcLabels",
|
|
1200
1199
|
"arcLinkLabels"
|
|
1201
1200
|
], (centerItem
|
|
1202
1201
|
? [
|
|
1203
|
-
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 }))); },
|
|
1204
1203
|
]
|
|
1205
1204
|
: []), true), activeOuterRadiusOffset: 12 }) })) }));
|
|
1206
1205
|
};
|
|
1207
1206
|
|
|
1208
|
-
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) {
|
|
1209
1208
|
var mode = _a.mode;
|
|
1210
1209
|
return (mode === "front" ? "z-index: 1;" : "");
|
|
1211
1210
|
}, function (_a) {
|
|
@@ -1221,7 +1220,7 @@ var HalfPieChartComponent = function (_a) {
|
|
|
1221
1220
|
? ["arcLabels", "arcLinkLabels"]
|
|
1222
1221
|
: []), true), startAngle: -90, endAngle: 90, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, animate: false }) })));
|
|
1223
1222
|
};
|
|
1224
|
-
var templateObject_1$
|
|
1223
|
+
var templateObject_1$16;
|
|
1225
1224
|
|
|
1226
1225
|
var HalfPieChart = function (_a) {
|
|
1227
1226
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, margin = _a.margin, showArcLinks = _a.showArcLinks;
|
|
@@ -1248,22 +1247,84 @@ var HalfPieChart = function (_a) {
|
|
|
1248
1247
|
}, mode: "back" })] })));
|
|
1249
1248
|
};
|
|
1250
1249
|
|
|
1251
|
-
var
|
|
1252
|
-
|
|
1253
|
-
|
|
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; });
|
|
1254
1262
|
};
|
|
1255
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
|
+
|
|
1256
1280
|
var SunburstChart = function (_a) {
|
|
1257
|
-
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height,
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
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
|
+
} })); },
|
|
1265
1318
|
]
|
|
1266
|
-
|
|
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
|
+
} }) })));
|
|
1267
1328
|
};
|
|
1268
1329
|
|
|
1269
1330
|
var CustomCell = function (_a) {
|
|
@@ -1300,7 +1361,7 @@ var WaffleChart = function (_a) {
|
|
|
1300
1361
|
} }) })));
|
|
1301
1362
|
};
|
|
1302
1363
|
|
|
1303
|
-
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) {
|
|
1304
1365
|
var theme = _a.theme;
|
|
1305
1366
|
return theme.space.xl;
|
|
1306
1367
|
}, function (_a) {
|
|
@@ -1311,7 +1372,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
1311
1372
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1312
1373
|
*/
|
|
1313
1374
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
1314
|
-
var templateObject_1$
|
|
1375
|
+
var templateObject_1$14;
|
|
1315
1376
|
|
|
1316
1377
|
/**
|
|
1317
1378
|
* Use Span to style and format inline text elements.
|
|
@@ -1351,7 +1412,7 @@ function useWindowSize() {
|
|
|
1351
1412
|
return size;
|
|
1352
1413
|
}
|
|
1353
1414
|
|
|
1354
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1415
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject([""], [""])));
|
|
1355
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) {
|
|
1356
1417
|
var status = _a.status, theme = _a.theme;
|
|
1357
1418
|
switch (status) {
|
|
@@ -1386,9 +1447,9 @@ var Counter = function (props) {
|
|
|
1386
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() })] })));
|
|
1387
1448
|
};
|
|
1388
1449
|
Counter.Avatar = StyledTag.Avatar;
|
|
1389
|
-
var templateObject_1$
|
|
1450
|
+
var templateObject_1$13, templateObject_2$r;
|
|
1390
1451
|
|
|
1391
|
-
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) {
|
|
1392
1453
|
var theme = _a.theme;
|
|
1393
1454
|
return theme.breakpoints.sm;
|
|
1394
1455
|
});
|
|
@@ -1405,24 +1466,24 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1405
1466
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1406
1467
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1407
1468
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1408
|
-
var templateObject_1$
|
|
1469
|
+
var templateObject_1$12;
|
|
1409
1470
|
|
|
1410
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1411
|
-
var templateObject_1$
|
|
1471
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""])));
|
|
1472
|
+
var templateObject_1$11;
|
|
1412
1473
|
|
|
1413
1474
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1414
1475
|
__proto__: null,
|
|
1415
1476
|
Field: Field$1
|
|
1416
1477
|
});
|
|
1417
1478
|
|
|
1418
|
-
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) {
|
|
1419
1480
|
var theme = _a.theme;
|
|
1420
1481
|
return theme.palette.blue[100];
|
|
1421
1482
|
});
|
|
1422
1483
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1423
|
-
var templateObject_1
|
|
1484
|
+
var templateObject_1$10;
|
|
1424
1485
|
|
|
1425
|
-
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"])));
|
|
1426
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"])));
|
|
1427
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) {
|
|
1428
1489
|
var theme = _a.theme;
|
|
@@ -1450,7 +1511,7 @@ var ItemContent = function (props) {
|
|
|
1450
1511
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1451
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 })] })] }));
|
|
1452
1513
|
};
|
|
1453
|
-
var templateObject_1
|
|
1514
|
+
var templateObject_1$$, templateObject_2$q, templateObject_3$g, templateObject_4$d, templateObject_5$5;
|
|
1454
1515
|
|
|
1455
1516
|
/**
|
|
1456
1517
|
* A Menu is a wrapper for items elements
|
|
@@ -1474,7 +1535,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1474
1535
|
*/
|
|
1475
1536
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1476
1537
|
|
|
1477
|
-
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) {
|
|
1478
1539
|
return props.isPrimary &&
|
|
1479
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 ");
|
|
1480
1541
|
});
|
|
@@ -1491,7 +1552,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1491
1552
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1492
1553
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1493
1554
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1494
|
-
var templateObject_1$
|
|
1555
|
+
var templateObject_1$_;
|
|
1495
1556
|
|
|
1496
1557
|
/**
|
|
1497
1558
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1506,7 +1567,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1506
1567
|
|
|
1507
1568
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1508
1569
|
|
|
1509
|
-
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) {
|
|
1510
1571
|
var theme = _a.theme;
|
|
1511
1572
|
return theme.palette.grey["800"];
|
|
1512
1573
|
}, function (_a) {
|
|
@@ -1519,7 +1580,7 @@ var editorStyle = styled.css(templateObject_1$Y || (templateObject_1$Y = __makeT
|
|
|
1519
1580
|
var theme = _a.theme;
|
|
1520
1581
|
return theme.palette.red[600];
|
|
1521
1582
|
});
|
|
1522
|
-
var templateObject_1$
|
|
1583
|
+
var templateObject_1$Z;
|
|
1523
1584
|
|
|
1524
1585
|
var _path$l;
|
|
1525
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); }
|
|
@@ -1665,7 +1726,7 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1665
1726
|
}))));
|
|
1666
1727
|
};
|
|
1667
1728
|
|
|
1668
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1729
|
+
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject([""], [""])));
|
|
1669
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) {
|
|
1670
1731
|
var theme = _a.theme;
|
|
1671
1732
|
return theme.space.xxs;
|
|
@@ -1683,9 +1744,9 @@ var FloatingMenu = function (props) {
|
|
|
1683
1744
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1684
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") }))] })) })));
|
|
1685
1746
|
};
|
|
1686
|
-
var templateObject_1$
|
|
1747
|
+
var templateObject_1$Y, templateObject_2$p;
|
|
1687
1748
|
|
|
1688
|
-
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) {
|
|
1689
1750
|
var theme = _a.theme;
|
|
1690
1751
|
return theme.space.xs;
|
|
1691
1752
|
}, function (_a) {
|
|
@@ -1714,9 +1775,9 @@ var EditorHeader = function (props) {
|
|
|
1714
1775
|
var title = props.title, validation = props.validation;
|
|
1715
1776
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$1, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1716
1777
|
};
|
|
1717
|
-
var templateObject_1$
|
|
1778
|
+
var templateObject_1$X, templateObject_2$o;
|
|
1718
1779
|
|
|
1719
|
-
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) {
|
|
1720
1781
|
var theme = _a.theme;
|
|
1721
1782
|
return theme.space.sm;
|
|
1722
1783
|
}, function (_a) {
|
|
@@ -1728,9 +1789,9 @@ var EditorFooter = function (_a) {
|
|
|
1728
1789
|
var saveText = _a.saveText;
|
|
1729
1790
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1730
1791
|
};
|
|
1731
|
-
var templateObject_1$
|
|
1792
|
+
var templateObject_1$W, templateObject_2$n;
|
|
1732
1793
|
|
|
1733
|
-
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) {
|
|
1734
1795
|
var theme = _a.theme;
|
|
1735
1796
|
return theme.borderRadii.md;
|
|
1736
1797
|
}, function (_a) {
|
|
@@ -1814,9 +1875,9 @@ var Editor = function (_a) {
|
|
|
1814
1875
|
});
|
|
1815
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 })] })));
|
|
1816
1877
|
};
|
|
1817
|
-
var templateObject_1$
|
|
1878
|
+
var templateObject_1$V;
|
|
1818
1879
|
|
|
1819
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1880
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject([""], [""])));
|
|
1820
1881
|
/**
|
|
1821
1882
|
* A Checkbox lets users select and unselect options from a list.
|
|
1822
1883
|
* <hr>
|
|
@@ -1828,17 +1889,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1828
1889
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1829
1890
|
**/
|
|
1830
1891
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1831
|
-
var templateObject_1$
|
|
1892
|
+
var templateObject_1$U;
|
|
1832
1893
|
|
|
1833
|
-
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([""], [""])));
|
|
1834
1895
|
/**
|
|
1835
1896
|
* A Label is used to specify a title for an input.
|
|
1836
1897
|
* <hr>
|
|
1837
1898
|
**/
|
|
1838
1899
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1839
|
-
var templateObject_1$
|
|
1900
|
+
var templateObject_1$T;
|
|
1840
1901
|
|
|
1841
|
-
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) {
|
|
1842
1903
|
var theme = _a.theme;
|
|
1843
1904
|
return theme.space.base;
|
|
1844
1905
|
});
|
|
@@ -1851,14 +1912,14 @@ var CheckboxCard = function (props) {
|
|
|
1851
1912
|
};
|
|
1852
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 })) })) }))] })));
|
|
1853
1914
|
};
|
|
1854
|
-
var templateObject_1$
|
|
1915
|
+
var templateObject_1$S;
|
|
1855
1916
|
|
|
1856
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1917
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1857
1918
|
/**
|
|
1858
1919
|
* A Field is a wrapper for input elements
|
|
1859
1920
|
**/
|
|
1860
1921
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1861
|
-
var templateObject_1$
|
|
1922
|
+
var templateObject_1$R;
|
|
1862
1923
|
|
|
1863
1924
|
var index = /*#__PURE__*/Object.freeze({
|
|
1864
1925
|
__proto__: null,
|
|
@@ -1866,7 +1927,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1866
1927
|
Hint: reactForms.Hint
|
|
1867
1928
|
});
|
|
1868
1929
|
|
|
1869
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1930
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
1870
1931
|
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject([""], [""])));
|
|
1871
1932
|
/**
|
|
1872
1933
|
* An Input lets users enter text into a field.
|
|
@@ -1876,7 +1937,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (te
|
|
|
1876
1937
|
* - To enter multiline text, use a Textarea
|
|
1877
1938
|
**/
|
|
1878
1939
|
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
1879
|
-
var templateObject_1$
|
|
1940
|
+
var templateObject_1$Q, templateObject_2$m;
|
|
1880
1941
|
|
|
1881
1942
|
var _g$1;
|
|
1882
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); }
|
|
@@ -1900,7 +1961,7 @@ var SvgNotesStroke = function SvgNotesStroke(props) {
|
|
|
1900
1961
|
};
|
|
1901
1962
|
|
|
1902
1963
|
var ToggleContext = React.createContext({});
|
|
1903
|
-
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) {
|
|
1904
1965
|
var theme = _a.theme;
|
|
1905
1966
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1906
1967
|
});
|
|
@@ -1958,9 +2019,9 @@ var InputItem = function (props) {
|
|
|
1958
2019
|
};
|
|
1959
2020
|
InputToggle.Item = InputItem;
|
|
1960
2021
|
InputToggle.Label = StyledLabel;
|
|
1961
|
-
var templateObject_1$
|
|
2022
|
+
var templateObject_1$P, templateObject_2$l, templateObject_3$f, templateObject_4$c;
|
|
1962
2023
|
|
|
1963
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
2024
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1964
2025
|
/**
|
|
1965
2026
|
* Media elements add even more context to an input.
|
|
1966
2027
|
* <hr>
|
|
@@ -1969,9 +2030,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1969
2030
|
* - To enter multiline text, use a Textarea
|
|
1970
2031
|
**/
|
|
1971
2032
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1972
|
-
var templateObject_1$
|
|
2033
|
+
var templateObject_1$O;
|
|
1973
2034
|
|
|
1974
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
2035
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1975
2036
|
/**
|
|
1976
2037
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1977
2038
|
* <hr>
|
|
@@ -1983,7 +2044,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$M ||
|
|
|
1983
2044
|
* - To select from a long list of options, use Select instead
|
|
1984
2045
|
**/
|
|
1985
2046
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1986
|
-
var templateObject_1$
|
|
2047
|
+
var templateObject_1$N;
|
|
1987
2048
|
|
|
1988
2049
|
var _path$i;
|
|
1989
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); }
|
|
@@ -2001,7 +2062,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
2001
2062
|
})));
|
|
2002
2063
|
};
|
|
2003
2064
|
|
|
2004
|
-
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) {
|
|
2005
2066
|
var theme = _a.theme;
|
|
2006
2067
|
return theme.space.base;
|
|
2007
2068
|
}, function (_a) {
|
|
@@ -2035,9 +2096,9 @@ var RadioCard = function (_a) {
|
|
|
2035
2096
|
props.onChecked && props.onChecked(props.value);
|
|
2036
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 })) }))] })));
|
|
2037
2098
|
};
|
|
2038
|
-
var templateObject_1$
|
|
2099
|
+
var templateObject_1$M, templateObject_2$k;
|
|
2039
2100
|
|
|
2040
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
2101
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
2041
2102
|
/**
|
|
2042
2103
|
* A Textarea is a form control for multi-line text.
|
|
2043
2104
|
* <hr>
|
|
@@ -2045,9 +2106,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
2045
2106
|
* - To enter multi-line text
|
|
2046
2107
|
**/
|
|
2047
2108
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
2048
|
-
var templateObject_1$
|
|
2109
|
+
var templateObject_1$L;
|
|
2049
2110
|
|
|
2050
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
2111
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
2051
2112
|
/**
|
|
2052
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.
|
|
2053
2114
|
* <hr>
|
|
@@ -2058,11 +2119,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$J
|
|
|
2058
2119
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
2059
2120
|
**/
|
|
2060
2121
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
2061
|
-
var templateObject_1$
|
|
2122
|
+
var templateObject_1$K;
|
|
2062
2123
|
|
|
2063
|
-
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);
|
|
2064
2125
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
2065
|
-
var templateObject_1$
|
|
2126
|
+
var templateObject_1$J;
|
|
2066
2127
|
|
|
2067
2128
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
2068
2129
|
|
|
@@ -2119,15 +2180,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
2119
2180
|
})));
|
|
2120
2181
|
};
|
|
2121
2182
|
|
|
2122
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
2183
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
2123
2184
|
var Icon = function (props) {
|
|
2124
2185
|
var type = props.type, size = props.size;
|
|
2125
2186
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
2126
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 })] }));
|
|
2127
2188
|
};
|
|
2128
|
-
var templateObject_1$
|
|
2189
|
+
var templateObject_1$I;
|
|
2129
2190
|
|
|
2130
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
2191
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
2131
2192
|
/**
|
|
2132
2193
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
2133
2194
|
* <hr>
|
|
@@ -2139,9 +2200,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
2139
2200
|
- When loading page content, use a Skeleton loader instead
|
|
2140
2201
|
*/
|
|
2141
2202
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
2142
|
-
var templateObject_1$
|
|
2203
|
+
var templateObject_1$H;
|
|
2143
2204
|
|
|
2144
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
2205
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
2145
2206
|
/**
|
|
2146
2207
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
2147
2208
|
* <hr>
|
|
@@ -2150,9 +2211,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
2150
2211
|
- To provide a quick way to navigate to ancestor pages
|
|
2151
2212
|
*/
|
|
2152
2213
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
2153
|
-
var templateObject_1$
|
|
2214
|
+
var templateObject_1$G;
|
|
2154
2215
|
|
|
2155
|
-
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) {
|
|
2156
2217
|
var theme = _a.theme;
|
|
2157
2218
|
return theme.palette.white;
|
|
2158
2219
|
});
|
|
@@ -2160,7 +2221,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$E ||
|
|
|
2160
2221
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
2161
2222
|
*/
|
|
2162
2223
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
2163
|
-
var templateObject_1$
|
|
2224
|
+
var templateObject_1$F;
|
|
2164
2225
|
|
|
2165
2226
|
/**
|
|
2166
2227
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -2182,7 +2243,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
2182
2243
|
})));
|
|
2183
2244
|
};
|
|
2184
2245
|
|
|
2185
|
-
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) {
|
|
2186
2247
|
var theme = _a.theme;
|
|
2187
2248
|
return theme.fonts.system;
|
|
2188
2249
|
});
|
|
@@ -2191,14 +2252,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$j ||
|
|
|
2191
2252
|
return theme.fonts.system;
|
|
2192
2253
|
});
|
|
2193
2254
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
2194
|
-
var templateObject_1$
|
|
2255
|
+
var templateObject_1$E, templateObject_2$j;
|
|
2195
2256
|
|
|
2196
|
-
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) {
|
|
2197
2258
|
var theme = _a.theme;
|
|
2198
2259
|
return theme.fonts.system;
|
|
2199
2260
|
});
|
|
2200
2261
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
2201
|
-
var templateObject_1$
|
|
2262
|
+
var templateObject_1$D;
|
|
2202
2263
|
|
|
2203
2264
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
2204
2265
|
|
|
@@ -2245,7 +2306,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
2245
2306
|
})));
|
|
2246
2307
|
};
|
|
2247
2308
|
|
|
2248
|
-
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) {
|
|
2249
2310
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
2250
2311
|
return isCompact &&
|
|
2251
2312
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -2261,9 +2322,9 @@ var WorkspacesDropdown = function (props) {
|
|
|
2261
2322
|
? selectedWorkspace.company + "'s workspace"
|
|
2262
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 }))); })] })] })));
|
|
2263
2324
|
};
|
|
2264
|
-
var templateObject_1$
|
|
2325
|
+
var templateObject_1$C;
|
|
2265
2326
|
|
|
2266
|
-
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) {
|
|
2267
2328
|
var theme = _a.theme;
|
|
2268
2329
|
return theme.breakpoints.md;
|
|
2269
2330
|
});
|
|
@@ -2297,9 +2358,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
2297
2358
|
var BrandItem = function (props) {
|
|
2298
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 }) }))) }))] }));
|
|
2299
2360
|
};
|
|
2300
|
-
var templateObject_1$
|
|
2361
|
+
var templateObject_1$B, templateObject_2$i, templateObject_3$e, templateObject_4$b;
|
|
2301
2362
|
|
|
2302
|
-
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);
|
|
2303
2364
|
/**
|
|
2304
2365
|
* An Header is a visual way to display general information.
|
|
2305
2366
|
* This can include navList Items, modal, profile settings.
|
|
@@ -2308,13 +2369,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
2308
2369
|
Header.HeaderItem = HeaderItem;
|
|
2309
2370
|
Header.HeaderItemText = HeaderItemText;
|
|
2310
2371
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
2311
|
-
var templateObject_1$
|
|
2372
|
+
var templateObject_1$A;
|
|
2312
2373
|
|
|
2313
2374
|
var HeaderSkeleton = function () {
|
|
2314
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%" } }) }) }) }))] })));
|
|
2315
2376
|
};
|
|
2316
2377
|
|
|
2317
|
-
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) {
|
|
2318
2379
|
var theme = _a.theme;
|
|
2319
2380
|
return theme.breakpoints.sm;
|
|
2320
2381
|
});
|
|
@@ -2326,9 +2387,9 @@ var AppHeader = function (_a) {
|
|
|
2326
2387
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
2327
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, {}) }))] }) }) }))] })));
|
|
2328
2389
|
};
|
|
2329
|
-
var templateObject_1$
|
|
2390
|
+
var templateObject_1$z;
|
|
2330
2391
|
|
|
2331
|
-
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) {
|
|
2332
2393
|
var theme = _a.theme;
|
|
2333
2394
|
return theme.borders.sm;
|
|
2334
2395
|
}, function (_a) {
|
|
@@ -2356,9 +2417,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$x || (t
|
|
|
2356
2417
|
- To give a consistent dashboard and navigation experience
|
|
2357
2418
|
*/
|
|
2358
2419
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
2359
|
-
var templateObject_1$
|
|
2420
|
+
var templateObject_1$y;
|
|
2360
2421
|
|
|
2361
|
-
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) {
|
|
2362
2423
|
var theme = _a.theme;
|
|
2363
2424
|
return theme.palette.kale["100"];
|
|
2364
2425
|
});
|
|
@@ -2376,11 +2437,11 @@ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject
|
|
|
2376
2437
|
return theme.space.xs;
|
|
2377
2438
|
});
|
|
2378
2439
|
var NavItem = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem$2, __assign({ ref: ref }, props)); });
|
|
2379
|
-
var templateObject_1$
|
|
2440
|
+
var templateObject_1$x, templateObject_2$h;
|
|
2380
2441
|
|
|
2381
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
2442
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
|
|
2382
2443
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2383
|
-
var templateObject_1$
|
|
2444
|
+
var templateObject_1$w;
|
|
2384
2445
|
|
|
2385
2446
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "158px" } }, { children: props.children })) }))); };
|
|
2386
2447
|
|
|
@@ -2414,7 +2475,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2414
2475
|
})));
|
|
2415
2476
|
};
|
|
2416
2477
|
|
|
2417
|
-
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) {
|
|
2418
2479
|
var theme = _a.theme;
|
|
2419
2480
|
return theme.space.base * 6;
|
|
2420
2481
|
}, function (_a) {
|
|
@@ -2439,13 +2500,13 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$u ||
|
|
|
2439
2500
|
var NavToggle = function (props) {
|
|
2440
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%" } })) })));
|
|
2441
2502
|
};
|
|
2442
|
-
var templateObject_1$
|
|
2503
|
+
var templateObject_1$v;
|
|
2443
2504
|
|
|
2444
|
-
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;"; });
|
|
2445
2506
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2446
|
-
var templateObject_1$
|
|
2507
|
+
var templateObject_1$u;
|
|
2447
2508
|
|
|
2448
|
-
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; });
|
|
2449
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) {
|
|
2450
2511
|
var theme = _a.theme;
|
|
2451
2512
|
return theme.space.xxl;
|
|
@@ -2454,7 +2515,7 @@ var NavItemComponent = React.forwardRef(function (props, ref) { return jsxRuntim
|
|
|
2454
2515
|
var NavItemProject = NavItemComponent;
|
|
2455
2516
|
NavItemProject.Title = NavItemText;
|
|
2456
2517
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2457
|
-
var templateObject_1$
|
|
2518
|
+
var templateObject_1$t, templateObject_2$g;
|
|
2458
2519
|
|
|
2459
2520
|
var _path$a;
|
|
2460
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); }
|
|
@@ -2610,7 +2671,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2610
2671
|
})))));
|
|
2611
2672
|
};
|
|
2612
2673
|
|
|
2613
|
-
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) {
|
|
2614
2675
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2615
2676
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2616
2677
|
});
|
|
@@ -2618,9 +2679,9 @@ var LoadingSidebar = function (props) {
|
|
|
2618
2679
|
var isExpanded = props.isExpanded;
|
|
2619
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" })] }))] })));
|
|
2620
2681
|
};
|
|
2621
|
-
var templateObject_1$
|
|
2682
|
+
var templateObject_1$s;
|
|
2622
2683
|
|
|
2623
|
-
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) {
|
|
2624
2685
|
var theme = _a.theme;
|
|
2625
2686
|
return theme.space.xs;
|
|
2626
2687
|
});
|
|
@@ -2639,9 +2700,9 @@ var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObj
|
|
|
2639
2700
|
AccordionItem.Panel = AccordionItemPanel;
|
|
2640
2701
|
AccordionItem.Header = AccordionItemHeader;
|
|
2641
2702
|
AccordionItem.Label = AccordionItemLabel;
|
|
2642
|
-
var templateObject_1$
|
|
2703
|
+
var templateObject_1$r, templateObject_2$f, templateObject_3$d, templateObject_4$a;
|
|
2643
2704
|
|
|
2644
|
-
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"])));
|
|
2645
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"])));
|
|
2646
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) {
|
|
2647
2708
|
var isExpanded = _a.isExpanded;
|
|
@@ -2699,9 +2760,9 @@ var Sidebar = function (_a) {
|
|
|
2699
2760
|
color: theme.palette.grey[800],
|
|
2700
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" })] }))] })));
|
|
2701
2762
|
};
|
|
2702
|
-
var templateObject_1$
|
|
2763
|
+
var templateObject_1$q, templateObject_2$e, templateObject_3$c, templateObject_4$9;
|
|
2703
2764
|
|
|
2704
|
-
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) {
|
|
2705
2766
|
var theme = _a.theme;
|
|
2706
2767
|
return theme.breakpoints.sm;
|
|
2707
2768
|
}, function (_a) {
|
|
@@ -2712,21 +2773,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$o ||
|
|
|
2712
2773
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2713
2774
|
*/
|
|
2714
2775
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2715
|
-
var templateObject_1$
|
|
2776
|
+
var templateObject_1$p;
|
|
2716
2777
|
|
|
2717
|
-
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]);
|
|
2718
2779
|
var PageLoader = function () {
|
|
2719
2780
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2720
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: "" }) }))] })] })] })] }) })));
|
|
2721
2782
|
};
|
|
2722
|
-
var templateObject_1$
|
|
2783
|
+
var templateObject_1$o;
|
|
2723
2784
|
|
|
2724
2785
|
/**
|
|
2725
2786
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2726
2787
|
*/
|
|
2727
2788
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2728
2789
|
|
|
2729
|
-
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);
|
|
2730
2791
|
/**
|
|
2731
2792
|
* Login Form
|
|
2732
2793
|
* <hr>
|
|
@@ -2757,9 +2818,9 @@ var LoginForm = function (props) {
|
|
|
2757
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 })) })))] })));
|
|
2758
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"] })))] }));
|
|
2759
2820
|
};
|
|
2760
|
-
var templateObject_1$
|
|
2821
|
+
var templateObject_1$n;
|
|
2761
2822
|
|
|
2762
|
-
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) {
|
|
2763
2824
|
var theme = _a.theme;
|
|
2764
2825
|
return theme.palette.grey["800"];
|
|
2765
2826
|
});
|
|
@@ -2768,9 +2829,9 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2768
2829
|
Modal.Header = reactModals.Header;
|
|
2769
2830
|
Modal.Body = ugModalBody;
|
|
2770
2831
|
Modal.Footer = reactModals.Footer;
|
|
2771
|
-
var templateObject_1$
|
|
2832
|
+
var templateObject_1$m;
|
|
2772
2833
|
|
|
2773
|
-
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"])));
|
|
2774
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) {
|
|
2775
2836
|
var theme = _a.theme;
|
|
2776
2837
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
@@ -2808,7 +2869,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2808
2869
|
ModalFullScreen.Footer = StyledFooter;
|
|
2809
2870
|
ModalFullScreen.Close = StyledModalClose;
|
|
2810
2871
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2811
|
-
var templateObject_1$
|
|
2872
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
2812
2873
|
|
|
2813
2874
|
/**
|
|
2814
2875
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2829,7 +2890,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2829
2890
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2830
2891
|
var useToast = reactNotifications.useToast;
|
|
2831
2892
|
|
|
2832
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2893
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
|
|
2833
2894
|
/**
|
|
2834
2895
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2835
2896
|
|
|
@@ -2839,9 +2900,9 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2839
2900
|
*/
|
|
2840
2901
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2841
2902
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2842
|
-
var templateObject_1$
|
|
2903
|
+
var templateObject_1$k;
|
|
2843
2904
|
|
|
2844
|
-
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"])));
|
|
2845
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) {
|
|
2846
2907
|
var theme = _a.theme;
|
|
2847
2908
|
return theme.space.xs;
|
|
@@ -2904,9 +2965,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2904
2965
|
var Main = function (props) {
|
|
2905
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 }) }) })))] }) }));
|
|
2906
2967
|
};
|
|
2907
|
-
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;
|
|
2908
2969
|
|
|
2909
|
-
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) {
|
|
2910
2971
|
var theme = _a.theme;
|
|
2911
2972
|
return theme.palette.white;
|
|
2912
2973
|
});
|
|
@@ -2961,7 +3022,7 @@ PageHeader.Overline = MainOverline;
|
|
|
2961
3022
|
PageHeader.Title = MainTitle;
|
|
2962
3023
|
PageHeader.Description = MainDescription;
|
|
2963
3024
|
PageHeader.Counters = MainCounters;
|
|
2964
|
-
var templateObject_1$
|
|
3025
|
+
var templateObject_1$i, templateObject_2$b, templateObject_3$9, templateObject_4$6;
|
|
2965
3026
|
|
|
2966
3027
|
var _path$5;
|
|
2967
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); }
|
|
@@ -2996,11 +3057,11 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2996
3057
|
})));
|
|
2997
3058
|
};
|
|
2998
3059
|
|
|
2999
|
-
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; });
|
|
3000
3061
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
3001
|
-
var templateObject_1$
|
|
3062
|
+
var templateObject_1$h;
|
|
3002
3063
|
|
|
3003
|
-
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"])));
|
|
3004
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);
|
|
3005
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) {
|
|
3006
3067
|
var theme = _a.theme;
|
|
@@ -3019,13 +3080,13 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
3019
3080
|
var theme = _a.theme;
|
|
3020
3081
|
return theme.shadows.boxShadow(theme);
|
|
3021
3082
|
});
|
|
3022
|
-
var templateObject_1$
|
|
3083
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5;
|
|
3023
3084
|
|
|
3024
3085
|
/**
|
|
3025
3086
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
3026
3087
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
3027
3088
|
**/
|
|
3028
|
-
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) {
|
|
3029
3090
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
3030
3091
|
}, function (props) {
|
|
3031
3092
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -3044,7 +3105,7 @@ var MenuItem = function (_a) {
|
|
|
3044
3105
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
3045
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));
|
|
3046
3107
|
};
|
|
3047
|
-
var templateObject_1$
|
|
3108
|
+
var templateObject_1$f, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
3048
3109
|
|
|
3049
3110
|
var _path$3;
|
|
3050
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); }
|
|
@@ -3095,16 +3156,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
3095
3156
|
})));
|
|
3096
3157
|
};
|
|
3097
3158
|
|
|
3098
|
-
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 }"); });
|
|
3099
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] }))); };
|
|
3100
|
-
var templateObject_1$
|
|
3161
|
+
var templateObject_1$e;
|
|
3101
3162
|
|
|
3102
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
3163
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject([""], [""])));
|
|
3103
3164
|
/**
|
|
3104
3165
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
3105
3166
|
*/
|
|
3106
3167
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
3107
|
-
var templateObject_1$
|
|
3168
|
+
var templateObject_1$d;
|
|
3108
3169
|
|
|
3109
3170
|
var getInitials = function (name) {
|
|
3110
3171
|
var names = name.split(" ");
|
|
@@ -3112,7 +3173,7 @@ var getInitials = function (name) {
|
|
|
3112
3173
|
return initials;
|
|
3113
3174
|
};
|
|
3114
3175
|
|
|
3115
|
-
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 }"); });
|
|
3116
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]; });
|
|
3117
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) {
|
|
3118
3179
|
var theme = _a.theme;
|
|
@@ -3141,7 +3202,7 @@ var HelpItem = function (props) {
|
|
|
3141
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"] }))] })] }));
|
|
3142
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 })) }));
|
|
3143
3204
|
};
|
|
3144
|
-
var templateObject_1$
|
|
3205
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
3145
3206
|
|
|
3146
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); }
|
|
3147
3208
|
var SvgEmpty = function SvgEmpty(props) {
|
|
@@ -3170,7 +3231,7 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
3170
3231
|
})));
|
|
3171
3232
|
};
|
|
3172
3233
|
|
|
3173
|
-
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) {
|
|
3174
3235
|
var theme = _a.theme;
|
|
3175
3236
|
return theme.space.base * 6;
|
|
3176
3237
|
}, function (_a) {
|
|
@@ -3184,9 +3245,9 @@ var LanguageItem = function (props) {
|
|
|
3184
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 }))] }))); }) }) })] }));
|
|
3185
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] }))] }) })) }));
|
|
3186
3247
|
};
|
|
3187
|
-
var templateObject_1$
|
|
3248
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$5;
|
|
3188
3249
|
|
|
3189
|
-
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) {
|
|
3190
3251
|
var theme = _a.theme;
|
|
3191
3252
|
return theme.space.base * 2;
|
|
3192
3253
|
}, function (_a) {
|
|
@@ -3214,9 +3275,9 @@ var UserContainer = function (props) {
|
|
|
3214
3275
|
var _a;
|
|
3215
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 }))] })] }));
|
|
3216
3277
|
};
|
|
3217
|
-
var templateObject_1$
|
|
3278
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$4;
|
|
3218
3279
|
|
|
3219
|
-
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"])));
|
|
3220
3281
|
var UserMenu = function (props) {
|
|
3221
3282
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
3222
3283
|
var toggleItem = function (item) {
|
|
@@ -3224,9 +3285,9 @@ var UserMenu = function (props) {
|
|
|
3224
3285
|
};
|
|
3225
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" }))] })] }));
|
|
3226
3287
|
};
|
|
3227
|
-
var templateObject_1$
|
|
3288
|
+
var templateObject_1$9;
|
|
3228
3289
|
|
|
3229
|
-
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) {
|
|
3230
3291
|
var theme = _a.theme;
|
|
3231
3292
|
return theme.space.xxl;
|
|
3232
3293
|
}, function (_a) {
|
|
@@ -3264,9 +3325,9 @@ var ProfileModal = function (_a) {
|
|
|
3264
3325
|
};
|
|
3265
3326
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
3266
3327
|
};
|
|
3267
|
-
var templateObject_1$
|
|
3328
|
+
var templateObject_1$8, templateObject_2$5;
|
|
3268
3329
|
|
|
3269
|
-
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) {
|
|
3270
3331
|
var theme = _a.theme;
|
|
3271
3332
|
return theme.palette.green[700];
|
|
3272
3333
|
});
|
|
@@ -3306,9 +3367,9 @@ var Stepper = function (props) {
|
|
|
3306
3367
|
Stepper.Step = UgStep;
|
|
3307
3368
|
Stepper.Label = UgLabel;
|
|
3308
3369
|
Stepper.Content = UgContent;
|
|
3309
|
-
var templateObject_1$
|
|
3370
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
3310
3371
|
|
|
3311
|
-
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) {
|
|
3312
3373
|
var theme = _a.theme;
|
|
3313
3374
|
return theme.palette.grey[300];
|
|
3314
3375
|
}, function (_a) {
|
|
@@ -3343,9 +3404,9 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
3343
3404
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
3344
3405
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
3345
3406
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
3346
|
-
var templateObject_1$
|
|
3407
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
3347
3408
|
|
|
3348
|
-
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"])));
|
|
3349
3410
|
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
3350
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);
|
|
3351
3412
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
@@ -3376,7 +3437,7 @@ var GroupedTable = function (_a) {
|
|
|
3376
3437
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
3377
3438
|
}) })] })));
|
|
3378
3439
|
};
|
|
3379
|
-
var templateObject_1$
|
|
3440
|
+
var templateObject_1$5, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
3380
3441
|
|
|
3381
3442
|
/**
|
|
3382
3443
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -3396,7 +3457,7 @@ Tiles.Icon = reactForms.Tiles.Icon;
|
|
|
3396
3457
|
Tiles.Label = reactForms.Tiles.Label;
|
|
3397
3458
|
Tiles.Tile = reactForms.Tiles.Tile;
|
|
3398
3459
|
|
|
3399
|
-
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$
|
|
3460
|
+
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject([""], [""])));
|
|
3400
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"])));
|
|
3401
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) {
|
|
3402
3463
|
var theme = _a.theme;
|
|
@@ -3418,7 +3479,7 @@ var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(t
|
|
|
3418
3479
|
var Timeline = function (props) { return jsxRuntime.jsx(UgTimeline, __assign({}, props)); };
|
|
3419
3480
|
Timeline.Item = UgTimelineItem;
|
|
3420
3481
|
Timeline.Content = UgTimelineContent;
|
|
3421
|
-
var templateObject_1$
|
|
3482
|
+
var templateObject_1$4, templateObject_2$1, templateObject_3;
|
|
3422
3483
|
|
|
3423
3484
|
/**
|
|
3424
3485
|
* Tooltips appear when a user hovers or focuses an element. They provide contextual information about the element they are paired with.
|
|
@@ -3430,7 +3491,12 @@ var templateObject_1$3, templateObject_2$1, templateObject_3;
|
|
|
3430
3491
|
* - To provide information a user needs to know or remember
|
|
3431
3492
|
* - To display truncated text, use a title attribute instead
|
|
3432
3493
|
*/
|
|
3433
|
-
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;
|
|
3434
3500
|
|
|
3435
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) {
|
|
3436
3502
|
var theme = _a.theme;
|
|
@@ -3491,7 +3557,6 @@ exports.Anchor = Anchor;
|
|
|
3491
3557
|
exports.AppHeader = AppHeader;
|
|
3492
3558
|
exports.Autocomplete = Autocomplete;
|
|
3493
3559
|
exports.Avatar = Avatar;
|
|
3494
|
-
exports.BarChart = BarChart;
|
|
3495
3560
|
exports.Blockquote = Blockquote;
|
|
3496
3561
|
exports.Body = Body$1;
|
|
3497
3562
|
exports.BrandItem = BrandItem;
|
|
@@ -3589,7 +3654,6 @@ exports.SpecialCard = SpecialCard;
|
|
|
3589
3654
|
exports.Spinner = Spinner;
|
|
3590
3655
|
exports.SplitButton = SplitButton;
|
|
3591
3656
|
exports.Stepper = Stepper;
|
|
3592
|
-
exports.StreamChart = StreamChart;
|
|
3593
3657
|
exports.SunburstChart = SunburstChart;
|
|
3594
3658
|
exports.Table = Table;
|
|
3595
3659
|
exports.TableBody = Body;
|