@appquality/unguess-design-system 2.12.37 → 2.12.39
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 +35 -0
- package/build/index.d.ts +1 -2
- package/build/index.js +290 -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');
|
|
@@ -38,6 +36,7 @@ var formik = require('formik');
|
|
|
38
36
|
var reactPagination = require('@zendeskgarden/react-pagination');
|
|
39
37
|
var reactTables = require('@zendeskgarden/react-tables');
|
|
40
38
|
var reactSpring = require('react-spring');
|
|
39
|
+
var reactTabs = require('@zendeskgarden/react-tabs');
|
|
41
40
|
var reactTooltips = require('@zendeskgarden/react-tooltips');
|
|
42
41
|
|
|
43
42
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -267,28 +266,32 @@ var isMac = function () {
|
|
|
267
266
|
var os = parser.getOS().name;
|
|
268
267
|
return os && /Mac OS|iOS/.test(os);
|
|
269
268
|
};
|
|
270
|
-
styled.css(templateObject_1$
|
|
269
|
+
styled.css(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n transition: opacity 0.2s ease;\n"], ["\n transition: opacity 0.2s ease;\n"])));
|
|
271
270
|
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
271
|
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$
|
|
272
|
+
var templateObject_1$1o, templateObject_2$y, templateObject_3$l;
|
|
274
273
|
|
|
275
274
|
var gradients = {
|
|
276
275
|
horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
|
|
277
276
|
dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
|
|
278
277
|
};
|
|
279
278
|
|
|
279
|
+
var fontWeights = __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 });
|
|
280
|
+
|
|
280
281
|
var _a, _b, _c, _d, _e, _f, _g$7, _h;
|
|
281
282
|
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
283
|
imgMaxHeight: "214px",
|
|
283
284
|
}, autocomplete: {
|
|
284
285
|
thumbSize: "60px",
|
|
286
|
+
}, "tabs.tab": function (_a) {
|
|
287
|
+
var isSelected = _a.isSelected;
|
|
288
|
+
return isSelected ? { fontWeight: fontWeights.semibold } : undefined;
|
|
285
289
|
} });
|
|
286
290
|
|
|
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 }) });
|
|
291
|
+
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
289
292
|
|
|
290
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
291
|
-
var templateObject_1$
|
|
293
|
+
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);
|
|
294
|
+
var templateObject_1$1n;
|
|
292
295
|
|
|
293
296
|
/**
|
|
294
297
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -304,7 +307,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
304
307
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
305
308
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
306
309
|
|
|
307
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
310
|
+
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
311
|
var theme = _a.theme;
|
|
309
312
|
return theme.palette.grey[700];
|
|
310
313
|
}, function (_a) {
|
|
@@ -325,9 +328,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
325
328
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
326
329
|
Alert.Title = UgAlertTitle;
|
|
327
330
|
Alert.Close = reactNotifications.Close;
|
|
328
|
-
var templateObject_1$
|
|
331
|
+
var templateObject_1$1m, templateObject_2$x;
|
|
329
332
|
|
|
330
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
333
|
+
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
334
|
return props.avatarType &&
|
|
332
335
|
props.avatarType !== "image" &&
|
|
333
336
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -351,7 +354,7 @@ var Avatar = function (props) {
|
|
|
351
354
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
352
355
|
};
|
|
353
356
|
Avatar.Text = UgAvatar.Text;
|
|
354
|
-
var templateObject_1$
|
|
357
|
+
var templateObject_1$1l;
|
|
355
358
|
|
|
356
359
|
/**
|
|
357
360
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -382,7 +385,7 @@ var getThemeStyle = function (props) {
|
|
|
382
385
|
}
|
|
383
386
|
return theme;
|
|
384
387
|
};
|
|
385
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
388
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject([""], [""])));
|
|
386
389
|
/**
|
|
387
390
|
* Buttons let users take action quickly.
|
|
388
391
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -401,7 +404,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
|
|
|
401
404
|
var Button = ButtonComponent;
|
|
402
405
|
Button.StartIcon = UgButton.StartIcon;
|
|
403
406
|
Button.EndIcon = UgButton.EndIcon;
|
|
404
|
-
var templateObject_1$
|
|
407
|
+
var templateObject_1$1k;
|
|
405
408
|
|
|
406
409
|
/**
|
|
407
410
|
A Button group lets users make a selection from a set of options.
|
|
@@ -431,7 +434,7 @@ Used for this:
|
|
|
431
434
|
**/
|
|
432
435
|
var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
|
|
433
436
|
|
|
434
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
437
|
+
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
438
|
var theme = _a.theme;
|
|
436
439
|
return theme.borderRadii.lg;
|
|
437
440
|
}, function (_a) {
|
|
@@ -469,7 +472,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
469
472
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
470
473
|
});
|
|
471
474
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
472
|
-
var templateObject_1$
|
|
475
|
+
var templateObject_1$1j, templateObject_2$w;
|
|
473
476
|
|
|
474
477
|
/**
|
|
475
478
|
* Tags let users categorize content using a keyword.
|
|
@@ -674,7 +677,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
674
677
|
})));
|
|
675
678
|
};
|
|
676
679
|
|
|
677
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
680
|
+
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
681
|
return props.isLight ?
|
|
679
682
|
"\n &:before {\n background-image: linear-gradient(45deg, transparent, ".concat(props.theme.palette.grey[200], ", transparent);\n }\n ") : "\n background-color: ".concat(props.theme.palette.grey[200], ";\n ");
|
|
680
683
|
});
|
|
@@ -692,22 +695,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
692
695
|
- To communicate a typing status, use Inline instead
|
|
693
696
|
*/
|
|
694
697
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
695
|
-
var templateObject_1$
|
|
698
|
+
var templateObject_1$1i;
|
|
696
699
|
|
|
697
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
700
|
+
var CardMeta = styled__default["default"].div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
698
701
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
699
702
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n height: ").concat(theme.space.base * 6, "px;\n padding: ").concat(theme.space.xxs, " 0;\n margin-bottom: ").concat(theme.space.xs, ";\n ");
|
|
700
703
|
});
|
|
701
|
-
var templateObject_1$
|
|
704
|
+
var templateObject_1$1h;
|
|
702
705
|
|
|
703
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
706
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
704
707
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
705
708
|
return "\n display: flex;\n\n ".concat(!isStretched ? "max-width: ".concat(theme.space.base * 16, "px") : "", ";\n max-height: ").concat(isStretched ? '150px' : "".concat(theme.space.base * 16, "px"), ";\n ").concat(align === "left" ? "margin-right: auto;" : '', "\n ").concat(align === "right" ? "margin-left: auto;" : '', "\n ").concat(align === "center" || isStretched ? "margin: auto;" : '', "\n\n padding: ").concat(theme.space.xxs, " 0;\n\n svg {\n width: 100%;\n height: auto;\n }\n ");
|
|
706
709
|
});
|
|
707
710
|
CardThumbnail.defaultProps = {
|
|
708
711
|
align: "left"
|
|
709
712
|
};
|
|
710
|
-
var templateObject_1$
|
|
713
|
+
var templateObject_1$1g;
|
|
711
714
|
|
|
712
715
|
/**
|
|
713
716
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -719,7 +722,7 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
719
722
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
720
723
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
721
724
|
|
|
722
|
-
var Label$2 = styled__default["default"](SM)(templateObject_1$
|
|
725
|
+
var Label$2 = styled__default["default"](SM)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
723
726
|
var theme = _a.theme;
|
|
724
727
|
return theme.palette.grey[500];
|
|
725
728
|
});
|
|
@@ -748,9 +751,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
748
751
|
CardHeader.Label = Label$2;
|
|
749
752
|
CardHeader.Title = Title$2;
|
|
750
753
|
CardHeader.Text = Description$2;
|
|
751
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$1f, templateObject_2$v, templateObject_3$k, templateObject_4$f;
|
|
752
755
|
|
|
753
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
756
|
+
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
757
|
var theme = _a.theme;
|
|
755
758
|
return theme.space.base * 3;
|
|
756
759
|
}, function (_a) {
|
|
@@ -766,9 +769,9 @@ var Container$1 = styled__default["default"].div(templateObject_3$j || (template
|
|
|
766
769
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
|
|
767
770
|
});
|
|
768
771
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
769
|
-
var templateObject_1$
|
|
772
|
+
var templateObject_1$1e, templateObject_2$u, templateObject_3$j;
|
|
770
773
|
|
|
771
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
774
|
+
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
775
|
var theme = _a.theme;
|
|
773
776
|
return theme.borderRadii.lg;
|
|
774
777
|
}, function (_a) {
|
|
@@ -798,7 +801,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
798
801
|
SpecialCard.Thumb = CardThumbnail;
|
|
799
802
|
SpecialCard.Header = CardHeader;
|
|
800
803
|
SpecialCard.Footer = CardFooter;
|
|
801
|
-
var templateObject_1$
|
|
804
|
+
var templateObject_1$1d;
|
|
802
805
|
|
|
803
806
|
var CampaignCardSkeleton = function () {
|
|
804
807
|
return (jsxRuntime.jsxs(SpecialCard, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
@@ -831,7 +834,7 @@ var getTypeDataIcon = function (type) {
|
|
|
831
834
|
return SvgCampaignFunctional;
|
|
832
835
|
}
|
|
833
836
|
};
|
|
834
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
837
|
+
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
838
|
var theme = _a.theme;
|
|
836
839
|
return theme.palette.grey["700"];
|
|
837
840
|
});
|
|
@@ -858,9 +861,9 @@ var CampaignCard = function (_a) {
|
|
|
858
861
|
var PillIcon = getTypeDataIcon(type);
|
|
859
862
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
860
863
|
};
|
|
861
|
-
var templateObject_1$
|
|
864
|
+
var templateObject_1$1c, templateObject_2$t, templateObject_3$i;
|
|
862
865
|
|
|
863
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
866
|
+
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
867
|
var theme = _a.theme;
|
|
865
868
|
return theme.space.base * 6;
|
|
866
869
|
}, function (_a) {
|
|
@@ -877,9 +880,9 @@ var ProductCard = function (props) {
|
|
|
877
880
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
878
881
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, __assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, __assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
|
|
879
882
|
};
|
|
880
|
-
var templateObject_1$
|
|
883
|
+
var templateObject_1$1b;
|
|
881
884
|
|
|
882
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
885
|
+
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
886
|
var theme = _a.theme;
|
|
884
887
|
return theme.palette.grey[500];
|
|
885
888
|
}, function (_a) {
|
|
@@ -931,13 +934,13 @@ var ServiceCard = function (props) {
|
|
|
931
934
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
932
935
|
return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start", wrap: true }, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })))] })] })));
|
|
933
936
|
};
|
|
934
|
-
var templateObject_1$
|
|
937
|
+
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
938
|
|
|
936
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
939
|
+
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
940
|
var InfoCard = function (props) {
|
|
938
941
|
return (jsxRuntime.jsxs(SpecialCard, __assign({}, (props.infoTitle && { title: props.infoTitle }), props, { children: [props.infoImg && (jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.infoImg }))), jsxRuntime.jsxs(SpecialCard.Header, { children: [props.infoSubtitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(SpecialCard.Header.Title, { children: props.infoTitle }))] }), props.infoButtons && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button) { return button; }) }) })))] })));
|
|
939
942
|
};
|
|
940
|
-
var templateObject_1$
|
|
943
|
+
var templateObject_1$19;
|
|
941
944
|
|
|
942
945
|
var DEFAULT_CHARTS_THEME = {
|
|
943
946
|
background: theme.palette.white,
|
|
@@ -1015,7 +1018,7 @@ var DEFAULT_CHARTS_THEME = {
|
|
|
1015
1018
|
grid: {
|
|
1016
1019
|
line: {
|
|
1017
1020
|
stroke: theme.palette.grey[600],
|
|
1018
|
-
strokeWidth: .5,
|
|
1021
|
+
strokeWidth: 0.5,
|
|
1019
1022
|
},
|
|
1020
1023
|
},
|
|
1021
1024
|
labels: {
|
|
@@ -1101,7 +1104,7 @@ var CHARTS_COLOR_SCHEME_MONO = [
|
|
|
1101
1104
|
CHARTS_COLOR_PALETTE.darkPine,
|
|
1102
1105
|
CHARTS_COLOR_PALETTE.lightGrey,
|
|
1103
1106
|
];
|
|
1104
|
-
|
|
1107
|
+
[
|
|
1105
1108
|
CHARTS_COLOR_PALETTE.greenLight,
|
|
1106
1109
|
CHARTS_COLOR_PALETTE.blue,
|
|
1107
1110
|
CHARTS_COLOR_PALETTE.fucsia,
|
|
@@ -1129,19 +1132,14 @@ var CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
|
|
|
1129
1132
|
CHARTS_COLOR_PALETTE.mattone, // Mattone 900
|
|
1130
1133
|
];
|
|
1131
1134
|
|
|
1132
|
-
var ChartContainer = styled__default["default"].div(templateObject_1$
|
|
1135
|
+
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
1136
|
var height = _a.height;
|
|
1134
1137
|
return height || "300px";
|
|
1135
1138
|
}, function (_a) {
|
|
1136
1139
|
var width = _a.width;
|
|
1137
1140
|
return width || "100%";
|
|
1138
1141
|
});
|
|
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
|
-
};
|
|
1142
|
+
var templateObject_1$18;
|
|
1145
1143
|
|
|
1146
1144
|
var CustomBulletChartMarkers = function (_a) {
|
|
1147
1145
|
var x = _a.x, y = _a.y, size = _a.size, _b = _a.animatedProps, color = _b.color, transform = _b.transform;
|
|
@@ -1158,7 +1156,7 @@ var CustomTooltip = function (_a) {
|
|
|
1158
1156
|
return (jsxRuntime.jsx(tooltip.BasicTooltip, { id: v1 ? (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx("strong", { children: v0 }), "-", jsxRuntime.jsx("strong", { children: v1 }), "%"] })) : (jsxRuntime.jsx("strong", { children: v0 })), enableChip: true, color: color }));
|
|
1159
1157
|
};
|
|
1160
1158
|
|
|
1161
|
-
var UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$
|
|
1159
|
+
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
1160
|
var BulletChart = function (_a) {
|
|
1163
1161
|
var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values;
|
|
1164
1162
|
return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
|
|
@@ -1169,18 +1167,19 @@ var BulletChart = function (_a) {
|
|
|
1169
1167
|
measures: values,
|
|
1170
1168
|
markers: values,
|
|
1171
1169
|
},
|
|
1172
|
-
], measureComponent: CustomMeasure, markerColors: CHARTS_COLOR_PALETTE.darkPine, markerComponent: function (_a) {
|
|
1170
|
+
], animate: false, measureComponent: CustomMeasure, markerColors: CHARTS_COLOR_PALETTE.darkPine, markerComponent: function (_a) {
|
|
1173
1171
|
_a.size; var markerProps = __rest(_a, ["size"]);
|
|
1174
1172
|
return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
|
|
1175
1173
|
}, tooltip: CustomTooltip, rangeColors: CHARTS_COLOR_PALETTE.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })));
|
|
1176
1174
|
};
|
|
1177
|
-
var templateObject_1$
|
|
1175
|
+
var templateObject_1$17;
|
|
1178
1176
|
|
|
1179
1177
|
var CenteredItem = function (_a) {
|
|
1180
|
-
var centerX = _a.centerX, centerY = _a.centerY, theme = _a.theme, radius = _a.radius, label = _a.label, value = _a.value;
|
|
1178
|
+
var centerX = _a.centerX, centerY = _a.centerY, theme = _a.theme, radius = _a.radius, label = _a.label, value = _a.value, fontSizeMultiplier = _a.fontSizeMultiplier;
|
|
1181
1179
|
var parameter = 6;
|
|
1182
|
-
var fontSizeFactor = radius / (14 * parameter);
|
|
1183
|
-
var spacing =
|
|
1180
|
+
var fontSizeFactor = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) / (14 * parameter);
|
|
1181
|
+
var spacing = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) /
|
|
1182
|
+
(parameter * 0.9);
|
|
1184
1183
|
var shift = -radius / (parameter * 2.5);
|
|
1185
1184
|
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
1185
|
fontSize: parseInt(theme.fontSizes.md.replace("px", "")) * fontSizeFactor,
|
|
@@ -1192,20 +1191,21 @@ var CenteredItem = function (_a) {
|
|
|
1192
1191
|
};
|
|
1193
1192
|
|
|
1194
1193
|
var PieChart = function (_a) {
|
|
1194
|
+
var _b;
|
|
1195
1195
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin;
|
|
1196
1196
|
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,
|
|
1197
|
+
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
1198
|
"arcs",
|
|
1199
1199
|
"arcLabels",
|
|
1200
1200
|
"arcLinkLabels"
|
|
1201
1201
|
], (centerItem
|
|
1202
1202
|
? [
|
|
1203
|
-
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
|
|
1203
|
+
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))); },
|
|
1204
1204
|
]
|
|
1205
1205
|
: []), true), activeOuterRadiusOffset: 12 }) })) }));
|
|
1206
1206
|
};
|
|
1207
1207
|
|
|
1208
|
-
var AbsoluteChartContainer = styled__default["default"](ChartContainer)(templateObject_1$
|
|
1208
|
+
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
1209
|
var mode = _a.mode;
|
|
1210
1210
|
return (mode === "front" ? "z-index: 1;" : "");
|
|
1211
1211
|
}, function (_a) {
|
|
@@ -1221,7 +1221,7 @@ var HalfPieChartComponent = function (_a) {
|
|
|
1221
1221
|
? ["arcLabels", "arcLinkLabels"]
|
|
1222
1222
|
: []), true), startAngle: -90, endAngle: 90, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, animate: false }) })));
|
|
1223
1223
|
};
|
|
1224
|
-
var templateObject_1$
|
|
1224
|
+
var templateObject_1$16;
|
|
1225
1225
|
|
|
1226
1226
|
var HalfPieChart = function (_a) {
|
|
1227
1227
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, margin = _a.margin, showArcLinks = _a.showArcLinks;
|
|
@@ -1248,22 +1248,84 @@ var HalfPieChart = function (_a) {
|
|
|
1248
1248
|
}, mode: "back" })] })));
|
|
1249
1249
|
};
|
|
1250
1250
|
|
|
1251
|
-
var
|
|
1252
|
-
|
|
1253
|
-
|
|
1251
|
+
var flatten = function (data) {
|
|
1252
|
+
return data.reduce(function (acc, item) {
|
|
1253
|
+
if (item.children) {
|
|
1254
|
+
return __spreadArray(__spreadArray(__spreadArray([], acc, true), [item], false), flatten(item.children), true);
|
|
1255
|
+
}
|
|
1256
|
+
return __spreadArray(__spreadArray([], acc, true), [item], false);
|
|
1257
|
+
}, []);
|
|
1258
|
+
};
|
|
1259
|
+
var findChildrenByName = function (data, name) {
|
|
1260
|
+
if (!data.children)
|
|
1261
|
+
return undefined;
|
|
1262
|
+
return flatten(data.children).find(function (searchedName) { return searchedName.name === name; });
|
|
1254
1263
|
};
|
|
1255
1264
|
|
|
1265
|
+
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) {
|
|
1266
|
+
var radius = _a.radius, theme = _a.theme;
|
|
1267
|
+
return (parseInt(theme.fontSizes.md.replace("px", "")) * radius) / 130;
|
|
1268
|
+
}, function (_a) {
|
|
1269
|
+
var theme = _a.theme;
|
|
1270
|
+
return theme.palette.blue[500];
|
|
1271
|
+
}, function (_a) {
|
|
1272
|
+
var theme = _a.theme;
|
|
1273
|
+
return theme.palette.blue[700];
|
|
1274
|
+
});
|
|
1275
|
+
var ResetButton = function (_a) {
|
|
1276
|
+
var centerX = _a.centerX, centerY = _a.centerY, radius = _a.radius; _a.theme; var onClick = _a.onClick;
|
|
1277
|
+
return (jsxRuntime.jsx("g", __assign({ transform: "translate(".concat(centerX - radius, ",").concat(centerY - radius, ")") }, { children: jsxRuntime.jsx(ResetText, __assign({ onClick: onClick, radius: radius }, { children: "< Reset" })) })));
|
|
1278
|
+
};
|
|
1279
|
+
var templateObject_1$15;
|
|
1280
|
+
|
|
1256
1281
|
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
|
-
|
|
1282
|
+
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;
|
|
1283
|
+
var themeContext = React.useContext(styled.ThemeContext);
|
|
1284
|
+
var _b = React.useState(data), currentData = _b[0], setCurrentData = _b[1];
|
|
1285
|
+
var _c = React.useState(), currentColor = _c[0], setCurrentColor = _c[1];
|
|
1286
|
+
var _d = React.useState(false), isHovering = _d[0], setIsHovering = _d[1];
|
|
1287
|
+
var changeDataSlice = function (_a) {
|
|
1288
|
+
var data = _a.data, color = _a.color;
|
|
1289
|
+
setCurrentData(data);
|
|
1290
|
+
setCurrentColor(color);
|
|
1291
|
+
if (onChange)
|
|
1292
|
+
onChange(currentData);
|
|
1293
|
+
};
|
|
1294
|
+
if (!data.children)
|
|
1295
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
|
|
1296
|
+
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
|
|
1297
|
+
? function () { return currentColor; }
|
|
1298
|
+
: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 3, onMouseEnter: function (node) {
|
|
1299
|
+
if (node.data.children) {
|
|
1300
|
+
setIsHovering(true);
|
|
1301
|
+
}
|
|
1302
|
+
}, onMouseLeave: function (node) {
|
|
1303
|
+
if (node.data.children) {
|
|
1304
|
+
setIsHovering(false);
|
|
1305
|
+
}
|
|
1306
|
+
}, layers: __spreadArray(__spreadArray([
|
|
1307
|
+
"arcs"
|
|
1308
|
+
], (centerItem
|
|
1309
|
+
? [
|
|
1310
|
+
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
|
|
1311
|
+
]
|
|
1312
|
+
: []), true), (currentColor
|
|
1313
|
+
? [
|
|
1314
|
+
function (props) { return (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: function () {
|
|
1315
|
+
changeDataSlice({
|
|
1316
|
+
data: data
|
|
1317
|
+
});
|
|
1318
|
+
} })); },
|
|
1265
1319
|
]
|
|
1266
|
-
|
|
1320
|
+
: []), true), id: "name", value: "value", margin: __assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.5]] }, onClick: function (clickedData) {
|
|
1321
|
+
var foundObject = findChildrenByName(currentData, clickedData.id.toString());
|
|
1322
|
+
if (foundObject && foundObject.children) {
|
|
1323
|
+
changeDataSlice({
|
|
1324
|
+
data: foundObject,
|
|
1325
|
+
color: clickedData.color
|
|
1326
|
+
});
|
|
1327
|
+
}
|
|
1328
|
+
} }) })));
|
|
1267
1329
|
};
|
|
1268
1330
|
|
|
1269
1331
|
var CustomCell = function (_a) {
|
|
@@ -1300,7 +1362,7 @@ var WaffleChart = function (_a) {
|
|
|
1300
1362
|
} }) })));
|
|
1301
1363
|
};
|
|
1302
1364
|
|
|
1303
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
1365
|
+
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
1366
|
var theme = _a.theme;
|
|
1305
1367
|
return theme.space.xl;
|
|
1306
1368
|
}, function (_a) {
|
|
@@ -1311,7 +1373,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
1311
1373
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1312
1374
|
*/
|
|
1313
1375
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
1314
|
-
var templateObject_1$
|
|
1376
|
+
var templateObject_1$14;
|
|
1315
1377
|
|
|
1316
1378
|
/**
|
|
1317
1379
|
* Use Span to style and format inline text elements.
|
|
@@ -1351,7 +1413,7 @@ function useWindowSize() {
|
|
|
1351
1413
|
return size;
|
|
1352
1414
|
}
|
|
1353
1415
|
|
|
1354
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1416
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject([""], [""])));
|
|
1355
1417
|
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
1418
|
var status = _a.status, theme = _a.theme;
|
|
1357
1419
|
switch (status) {
|
|
@@ -1386,9 +1448,9 @@ var Counter = function (props) {
|
|
|
1386
1448
|
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
1449
|
};
|
|
1388
1450
|
Counter.Avatar = StyledTag.Avatar;
|
|
1389
|
-
var templateObject_1$
|
|
1451
|
+
var templateObject_1$13, templateObject_2$r;
|
|
1390
1452
|
|
|
1391
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
1453
|
+
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
1454
|
var theme = _a.theme;
|
|
1393
1455
|
return theme.breakpoints.sm;
|
|
1394
1456
|
});
|
|
@@ -1405,24 +1467,24 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1405
1467
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1406
1468
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1407
1469
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1408
|
-
var templateObject_1$
|
|
1470
|
+
var templateObject_1$12;
|
|
1409
1471
|
|
|
1410
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1411
|
-
var templateObject_1$
|
|
1472
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""])));
|
|
1473
|
+
var templateObject_1$11;
|
|
1412
1474
|
|
|
1413
1475
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1414
1476
|
__proto__: null,
|
|
1415
1477
|
Field: Field$1
|
|
1416
1478
|
});
|
|
1417
1479
|
|
|
1418
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1
|
|
1480
|
+
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
1481
|
var theme = _a.theme;
|
|
1420
1482
|
return theme.palette.blue[100];
|
|
1421
1483
|
});
|
|
1422
1484
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1423
|
-
var templateObject_1
|
|
1485
|
+
var templateObject_1$10;
|
|
1424
1486
|
|
|
1425
|
-
var Container = styled__default["default"].div(templateObject_1
|
|
1487
|
+
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
1488
|
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
1489
|
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
1490
|
var theme = _a.theme;
|
|
@@ -1450,7 +1512,7 @@ var ItemContent = function (props) {
|
|
|
1450
1512
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1451
1513
|
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
1514
|
};
|
|
1453
|
-
var templateObject_1
|
|
1515
|
+
var templateObject_1$$, templateObject_2$q, templateObject_3$g, templateObject_4$d, templateObject_5$5;
|
|
1454
1516
|
|
|
1455
1517
|
/**
|
|
1456
1518
|
* A Menu is a wrapper for items elements
|
|
@@ -1474,7 +1536,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1474
1536
|
*/
|
|
1475
1537
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1476
1538
|
|
|
1477
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1539
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1478
1540
|
return props.isPrimary &&
|
|
1479
1541
|
"\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
1542
|
});
|
|
@@ -1491,7 +1553,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1491
1553
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1492
1554
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1493
1555
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1494
|
-
var templateObject_1$
|
|
1556
|
+
var templateObject_1$_;
|
|
1495
1557
|
|
|
1496
1558
|
/**
|
|
1497
1559
|
* 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 +1568,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1506
1568
|
|
|
1507
1569
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1508
1570
|
|
|
1509
|
-
var editorStyle = styled.css(templateObject_1$
|
|
1571
|
+
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
1572
|
var theme = _a.theme;
|
|
1511
1573
|
return theme.palette.grey["800"];
|
|
1512
1574
|
}, function (_a) {
|
|
@@ -1519,7 +1581,7 @@ var editorStyle = styled.css(templateObject_1$Y || (templateObject_1$Y = __makeT
|
|
|
1519
1581
|
var theme = _a.theme;
|
|
1520
1582
|
return theme.palette.red[600];
|
|
1521
1583
|
});
|
|
1522
|
-
var templateObject_1$
|
|
1584
|
+
var templateObject_1$Z;
|
|
1523
1585
|
|
|
1524
1586
|
var _path$l;
|
|
1525
1587
|
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 +1727,7 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1665
1727
|
}))));
|
|
1666
1728
|
};
|
|
1667
1729
|
|
|
1668
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1730
|
+
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject([""], [""])));
|
|
1669
1731
|
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
1732
|
var theme = _a.theme;
|
|
1671
1733
|
return theme.space.xxs;
|
|
@@ -1683,9 +1745,9 @@ var FloatingMenu = function (props) {
|
|
|
1683
1745
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1684
1746
|
}, 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
1747
|
};
|
|
1686
|
-
var templateObject_1$
|
|
1748
|
+
var templateObject_1$Y, templateObject_2$p;
|
|
1687
1749
|
|
|
1688
|
-
var Header$1 = styled__default["default"].div(templateObject_1$
|
|
1750
|
+
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
1751
|
var theme = _a.theme;
|
|
1690
1752
|
return theme.space.xs;
|
|
1691
1753
|
}, function (_a) {
|
|
@@ -1714,9 +1776,9 @@ var EditorHeader = function (props) {
|
|
|
1714
1776
|
var title = props.title, validation = props.validation;
|
|
1715
1777
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$1, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1716
1778
|
};
|
|
1717
|
-
var templateObject_1$
|
|
1779
|
+
var templateObject_1$X, templateObject_2$o;
|
|
1718
1780
|
|
|
1719
|
-
var Footer$1 = styled__default["default"].div(templateObject_1$
|
|
1781
|
+
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
1782
|
var theme = _a.theme;
|
|
1721
1783
|
return theme.space.sm;
|
|
1722
1784
|
}, function (_a) {
|
|
@@ -1728,9 +1790,9 @@ var EditorFooter = function (_a) {
|
|
|
1728
1790
|
var saveText = _a.saveText;
|
|
1729
1791
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1730
1792
|
};
|
|
1731
|
-
var templateObject_1$
|
|
1793
|
+
var templateObject_1$W, templateObject_2$n;
|
|
1732
1794
|
|
|
1733
|
-
var EditorContainer = styled__default["default"].div(templateObject_1$
|
|
1795
|
+
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
1796
|
var theme = _a.theme;
|
|
1735
1797
|
return theme.borderRadii.md;
|
|
1736
1798
|
}, function (_a) {
|
|
@@ -1814,9 +1876,9 @@ var Editor = function (_a) {
|
|
|
1814
1876
|
});
|
|
1815
1877
|
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
1878
|
};
|
|
1817
|
-
var templateObject_1$
|
|
1879
|
+
var templateObject_1$V;
|
|
1818
1880
|
|
|
1819
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1881
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject([""], [""])));
|
|
1820
1882
|
/**
|
|
1821
1883
|
* A Checkbox lets users select and unselect options from a list.
|
|
1822
1884
|
* <hr>
|
|
@@ -1828,17 +1890,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1828
1890
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1829
1891
|
**/
|
|
1830
1892
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1831
|
-
var templateObject_1$
|
|
1893
|
+
var templateObject_1$U;
|
|
1832
1894
|
|
|
1833
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1895
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
1834
1896
|
/**
|
|
1835
1897
|
* A Label is used to specify a title for an input.
|
|
1836
1898
|
* <hr>
|
|
1837
1899
|
**/
|
|
1838
1900
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1839
|
-
var templateObject_1$
|
|
1901
|
+
var templateObject_1$T;
|
|
1840
1902
|
|
|
1841
|
-
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$
|
|
1903
|
+
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
1904
|
var theme = _a.theme;
|
|
1843
1905
|
return theme.space.base;
|
|
1844
1906
|
});
|
|
@@ -1851,14 +1913,14 @@ var CheckboxCard = function (props) {
|
|
|
1851
1913
|
};
|
|
1852
1914
|
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
1915
|
};
|
|
1854
|
-
var templateObject_1$
|
|
1916
|
+
var templateObject_1$S;
|
|
1855
1917
|
|
|
1856
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1918
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1857
1919
|
/**
|
|
1858
1920
|
* A Field is a wrapper for input elements
|
|
1859
1921
|
**/
|
|
1860
1922
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1861
|
-
var templateObject_1$
|
|
1923
|
+
var templateObject_1$R;
|
|
1862
1924
|
|
|
1863
1925
|
var index = /*#__PURE__*/Object.freeze({
|
|
1864
1926
|
__proto__: null,
|
|
@@ -1866,7 +1928,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1866
1928
|
Hint: reactForms.Hint
|
|
1867
1929
|
});
|
|
1868
1930
|
|
|
1869
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1931
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
1870
1932
|
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject([""], [""])));
|
|
1871
1933
|
/**
|
|
1872
1934
|
* An Input lets users enter text into a field.
|
|
@@ -1876,7 +1938,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (te
|
|
|
1876
1938
|
* - To enter multiline text, use a Textarea
|
|
1877
1939
|
**/
|
|
1878
1940
|
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
1879
|
-
var templateObject_1$
|
|
1941
|
+
var templateObject_1$Q, templateObject_2$m;
|
|
1880
1942
|
|
|
1881
1943
|
var _g$1;
|
|
1882
1944
|
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 +1962,7 @@ var SvgNotesStroke = function SvgNotesStroke(props) {
|
|
|
1900
1962
|
};
|
|
1901
1963
|
|
|
1902
1964
|
var ToggleContext = React.createContext({});
|
|
1903
|
-
var StyledInput = styled__default["default"](Input)(templateObject_1$
|
|
1965
|
+
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
1966
|
var theme = _a.theme;
|
|
1905
1967
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1906
1968
|
});
|
|
@@ -1958,9 +2020,9 @@ var InputItem = function (props) {
|
|
|
1958
2020
|
};
|
|
1959
2021
|
InputToggle.Item = InputItem;
|
|
1960
2022
|
InputToggle.Label = StyledLabel;
|
|
1961
|
-
var templateObject_1$
|
|
2023
|
+
var templateObject_1$P, templateObject_2$l, templateObject_3$f, templateObject_4$c;
|
|
1962
2024
|
|
|
1963
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
2025
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1964
2026
|
/**
|
|
1965
2027
|
* Media elements add even more context to an input.
|
|
1966
2028
|
* <hr>
|
|
@@ -1969,9 +2031,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1969
2031
|
* - To enter multiline text, use a Textarea
|
|
1970
2032
|
**/
|
|
1971
2033
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1972
|
-
var templateObject_1$
|
|
2034
|
+
var templateObject_1$O;
|
|
1973
2035
|
|
|
1974
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
2036
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1975
2037
|
/**
|
|
1976
2038
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1977
2039
|
* <hr>
|
|
@@ -1983,7 +2045,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$M ||
|
|
|
1983
2045
|
* - To select from a long list of options, use Select instead
|
|
1984
2046
|
**/
|
|
1985
2047
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1986
|
-
var templateObject_1$
|
|
2048
|
+
var templateObject_1$N;
|
|
1987
2049
|
|
|
1988
2050
|
var _path$i;
|
|
1989
2051
|
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 +2063,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
2001
2063
|
})));
|
|
2002
2064
|
};
|
|
2003
2065
|
|
|
2004
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
2066
|
+
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
2067
|
var theme = _a.theme;
|
|
2006
2068
|
return theme.space.base;
|
|
2007
2069
|
}, function (_a) {
|
|
@@ -2035,9 +2097,9 @@ var RadioCard = function (_a) {
|
|
|
2035
2097
|
props.onChecked && props.onChecked(props.value);
|
|
2036
2098
|
} }, { 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
2099
|
};
|
|
2038
|
-
var templateObject_1$
|
|
2100
|
+
var templateObject_1$M, templateObject_2$k;
|
|
2039
2101
|
|
|
2040
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
2102
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
2041
2103
|
/**
|
|
2042
2104
|
* A Textarea is a form control for multi-line text.
|
|
2043
2105
|
* <hr>
|
|
@@ -2045,9 +2107,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
2045
2107
|
* - To enter multi-line text
|
|
2046
2108
|
**/
|
|
2047
2109
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
2048
|
-
var templateObject_1$
|
|
2110
|
+
var templateObject_1$L;
|
|
2049
2111
|
|
|
2050
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
2112
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
2051
2113
|
/**
|
|
2052
2114
|
* 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
2115
|
* <hr>
|
|
@@ -2058,11 +2120,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$J
|
|
|
2058
2120
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
2059
2121
|
**/
|
|
2060
2122
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
2061
|
-
var templateObject_1$
|
|
2123
|
+
var templateObject_1$K;
|
|
2062
2124
|
|
|
2063
|
-
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
2125
|
+
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
2126
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
2065
|
-
var templateObject_1$
|
|
2127
|
+
var templateObject_1$J;
|
|
2066
2128
|
|
|
2067
2129
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
2068
2130
|
|
|
@@ -2119,15 +2181,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
2119
2181
|
})));
|
|
2120
2182
|
};
|
|
2121
2183
|
|
|
2122
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
2184
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
2123
2185
|
var Icon = function (props) {
|
|
2124
2186
|
var type = props.type, size = props.size;
|
|
2125
2187
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
2126
2188
|
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
2189
|
};
|
|
2128
|
-
var templateObject_1$
|
|
2190
|
+
var templateObject_1$I;
|
|
2129
2191
|
|
|
2130
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
2192
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
2131
2193
|
/**
|
|
2132
2194
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
2133
2195
|
* <hr>
|
|
@@ -2139,9 +2201,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
2139
2201
|
- When loading page content, use a Skeleton loader instead
|
|
2140
2202
|
*/
|
|
2141
2203
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
2142
|
-
var templateObject_1$
|
|
2204
|
+
var templateObject_1$H;
|
|
2143
2205
|
|
|
2144
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
2206
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
2145
2207
|
/**
|
|
2146
2208
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
2147
2209
|
* <hr>
|
|
@@ -2150,9 +2212,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
2150
2212
|
- To provide a quick way to navigate to ancestor pages
|
|
2151
2213
|
*/
|
|
2152
2214
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
2153
|
-
var templateObject_1$
|
|
2215
|
+
var templateObject_1$G;
|
|
2154
2216
|
|
|
2155
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
2217
|
+
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
2218
|
var theme = _a.theme;
|
|
2157
2219
|
return theme.palette.white;
|
|
2158
2220
|
});
|
|
@@ -2160,7 +2222,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$E ||
|
|
|
2160
2222
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
2161
2223
|
*/
|
|
2162
2224
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
2163
|
-
var templateObject_1$
|
|
2225
|
+
var templateObject_1$F;
|
|
2164
2226
|
|
|
2165
2227
|
/**
|
|
2166
2228
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -2182,7 +2244,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
2182
2244
|
})));
|
|
2183
2245
|
};
|
|
2184
2246
|
|
|
2185
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
2247
|
+
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
2248
|
var theme = _a.theme;
|
|
2187
2249
|
return theme.fonts.system;
|
|
2188
2250
|
});
|
|
@@ -2191,14 +2253,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$j ||
|
|
|
2191
2253
|
return theme.fonts.system;
|
|
2192
2254
|
});
|
|
2193
2255
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
2194
|
-
var templateObject_1$
|
|
2256
|
+
var templateObject_1$E, templateObject_2$j;
|
|
2195
2257
|
|
|
2196
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
2258
|
+
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
2259
|
var theme = _a.theme;
|
|
2198
2260
|
return theme.fonts.system;
|
|
2199
2261
|
});
|
|
2200
2262
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
2201
|
-
var templateObject_1$
|
|
2263
|
+
var templateObject_1$D;
|
|
2202
2264
|
|
|
2203
2265
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
2204
2266
|
|
|
@@ -2245,7 +2307,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
2245
2307
|
})));
|
|
2246
2308
|
};
|
|
2247
2309
|
|
|
2248
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
2310
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
2249
2311
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
2250
2312
|
return isCompact &&
|
|
2251
2313
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -2261,9 +2323,9 @@ var WorkspacesDropdown = function (props) {
|
|
|
2261
2323
|
? selectedWorkspace.company + "'s workspace"
|
|
2262
2324
|
: "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
2325
|
};
|
|
2264
|
-
var templateObject_1$
|
|
2326
|
+
var templateObject_1$C;
|
|
2265
2327
|
|
|
2266
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
2328
|
+
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
2329
|
var theme = _a.theme;
|
|
2268
2330
|
return theme.breakpoints.md;
|
|
2269
2331
|
});
|
|
@@ -2297,9 +2359,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
2297
2359
|
var BrandItem = function (props) {
|
|
2298
2360
|
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
2361
|
};
|
|
2300
|
-
var templateObject_1$
|
|
2362
|
+
var templateObject_1$B, templateObject_2$i, templateObject_3$e, templateObject_4$b;
|
|
2301
2363
|
|
|
2302
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
2364
|
+
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
2365
|
/**
|
|
2304
2366
|
* An Header is a visual way to display general information.
|
|
2305
2367
|
* This can include navList Items, modal, profile settings.
|
|
@@ -2308,13 +2370,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
2308
2370
|
Header.HeaderItem = HeaderItem;
|
|
2309
2371
|
Header.HeaderItemText = HeaderItemText;
|
|
2310
2372
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
2311
|
-
var templateObject_1$
|
|
2373
|
+
var templateObject_1$A;
|
|
2312
2374
|
|
|
2313
2375
|
var HeaderSkeleton = function () {
|
|
2314
2376
|
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
2377
|
};
|
|
2316
2378
|
|
|
2317
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
2379
|
+
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
2380
|
var theme = _a.theme;
|
|
2319
2381
|
return theme.breakpoints.sm;
|
|
2320
2382
|
});
|
|
@@ -2326,9 +2388,9 @@ var AppHeader = function (_a) {
|
|
|
2326
2388
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
2327
2389
|
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
2390
|
};
|
|
2329
|
-
var templateObject_1$
|
|
2391
|
+
var templateObject_1$z;
|
|
2330
2392
|
|
|
2331
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
2393
|
+
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
2394
|
var theme = _a.theme;
|
|
2333
2395
|
return theme.borders.sm;
|
|
2334
2396
|
}, function (_a) {
|
|
@@ -2356,9 +2418,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$x || (t
|
|
|
2356
2418
|
- To give a consistent dashboard and navigation experience
|
|
2357
2419
|
*/
|
|
2358
2420
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
2359
|
-
var templateObject_1$
|
|
2421
|
+
var templateObject_1$y;
|
|
2360
2422
|
|
|
2361
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
2423
|
+
var SelectedItemStyle = styled.css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2362
2424
|
var theme = _a.theme;
|
|
2363
2425
|
return theme.palette.kale["100"];
|
|
2364
2426
|
});
|
|
@@ -2376,11 +2438,11 @@ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject
|
|
|
2376
2438
|
return theme.space.xs;
|
|
2377
2439
|
});
|
|
2378
2440
|
var NavItem = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem$2, __assign({ ref: ref }, props)); });
|
|
2379
|
-
var templateObject_1$
|
|
2441
|
+
var templateObject_1$x, templateObject_2$h;
|
|
2380
2442
|
|
|
2381
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
2443
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
|
|
2382
2444
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2383
|
-
var templateObject_1$
|
|
2445
|
+
var templateObject_1$w;
|
|
2384
2446
|
|
|
2385
2447
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "158px" } }, { children: props.children })) }))); };
|
|
2386
2448
|
|
|
@@ -2414,7 +2476,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2414
2476
|
})));
|
|
2415
2477
|
};
|
|
2416
2478
|
|
|
2417
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
2479
|
+
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
2480
|
var theme = _a.theme;
|
|
2419
2481
|
return theme.space.base * 6;
|
|
2420
2482
|
}, function (_a) {
|
|
@@ -2439,13 +2501,13 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$u ||
|
|
|
2439
2501
|
var NavToggle = function (props) {
|
|
2440
2502
|
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
2503
|
};
|
|
2442
|
-
var templateObject_1$
|
|
2504
|
+
var templateObject_1$v;
|
|
2443
2505
|
|
|
2444
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
2506
|
+
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
2507
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2446
|
-
var templateObject_1$
|
|
2508
|
+
var templateObject_1$u;
|
|
2447
2509
|
|
|
2448
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
2510
|
+
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
2511
|
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
2512
|
var theme = _a.theme;
|
|
2451
2513
|
return theme.space.xxl;
|
|
@@ -2454,7 +2516,7 @@ var NavItemComponent = React.forwardRef(function (props, ref) { return jsxRuntim
|
|
|
2454
2516
|
var NavItemProject = NavItemComponent;
|
|
2455
2517
|
NavItemProject.Title = NavItemText;
|
|
2456
2518
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2457
|
-
var templateObject_1$
|
|
2519
|
+
var templateObject_1$t, templateObject_2$g;
|
|
2458
2520
|
|
|
2459
2521
|
var _path$a;
|
|
2460
2522
|
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 +2672,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2610
2672
|
})))));
|
|
2611
2673
|
};
|
|
2612
2674
|
|
|
2613
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
2675
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
2614
2676
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2615
2677
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2616
2678
|
});
|
|
@@ -2618,9 +2680,9 @@ var LoadingSidebar = function (props) {
|
|
|
2618
2680
|
var isExpanded = props.isExpanded;
|
|
2619
2681
|
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
2682
|
};
|
|
2621
|
-
var templateObject_1$
|
|
2683
|
+
var templateObject_1$s;
|
|
2622
2684
|
|
|
2623
|
-
var AccordionItem = styled__default["default"](Accordion)(templateObject_1$
|
|
2685
|
+
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
2686
|
var theme = _a.theme;
|
|
2625
2687
|
return theme.space.xs;
|
|
2626
2688
|
});
|
|
@@ -2639,9 +2701,9 @@ var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObj
|
|
|
2639
2701
|
AccordionItem.Panel = AccordionItemPanel;
|
|
2640
2702
|
AccordionItem.Header = AccordionItemHeader;
|
|
2641
2703
|
AccordionItem.Label = AccordionItemLabel;
|
|
2642
|
-
var templateObject_1$
|
|
2704
|
+
var templateObject_1$r, templateObject_2$f, templateObject_3$d, templateObject_4$a;
|
|
2643
2705
|
|
|
2644
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
2706
|
+
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
2707
|
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
2708
|
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
2709
|
var isExpanded = _a.isExpanded;
|
|
@@ -2699,9 +2761,9 @@ var Sidebar = function (_a) {
|
|
|
2699
2761
|
color: theme.palette.grey[800],
|
|
2700
2762
|
} }, { 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
2763
|
};
|
|
2702
|
-
var templateObject_1$
|
|
2764
|
+
var templateObject_1$q, templateObject_2$e, templateObject_3$c, templateObject_4$9;
|
|
2703
2765
|
|
|
2704
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
2766
|
+
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
2767
|
var theme = _a.theme;
|
|
2706
2768
|
return theme.breakpoints.sm;
|
|
2707
2769
|
}, function (_a) {
|
|
@@ -2712,21 +2774,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$o ||
|
|
|
2712
2774
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2713
2775
|
*/
|
|
2714
2776
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2715
|
-
var templateObject_1$
|
|
2777
|
+
var templateObject_1$p;
|
|
2716
2778
|
|
|
2717
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
2779
|
+
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
2780
|
var PageLoader = function () {
|
|
2719
2781
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2720
2782
|
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
2783
|
};
|
|
2722
|
-
var templateObject_1$
|
|
2784
|
+
var templateObject_1$o;
|
|
2723
2785
|
|
|
2724
2786
|
/**
|
|
2725
2787
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2726
2788
|
*/
|
|
2727
2789
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2728
2790
|
|
|
2729
|
-
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$
|
|
2791
|
+
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
2792
|
/**
|
|
2731
2793
|
* Login Form
|
|
2732
2794
|
* <hr>
|
|
@@ -2757,9 +2819,9 @@ var LoginForm = function (props) {
|
|
|
2757
2819
|
: 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
2820
|
} }))] })), 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
2821
|
};
|
|
2760
|
-
var templateObject_1$
|
|
2822
|
+
var templateObject_1$n;
|
|
2761
2823
|
|
|
2762
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
2824
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
2763
2825
|
var theme = _a.theme;
|
|
2764
2826
|
return theme.palette.grey["800"];
|
|
2765
2827
|
});
|
|
@@ -2768,9 +2830,9 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2768
2830
|
Modal.Header = reactModals.Header;
|
|
2769
2831
|
Modal.Body = ugModalBody;
|
|
2770
2832
|
Modal.Footer = reactModals.Footer;
|
|
2771
|
-
var templateObject_1$
|
|
2833
|
+
var templateObject_1$m;
|
|
2772
2834
|
|
|
2773
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
2835
|
+
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
2836
|
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
2837
|
var theme = _a.theme;
|
|
2776
2838
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
@@ -2808,7 +2870,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2808
2870
|
ModalFullScreen.Footer = StyledFooter;
|
|
2809
2871
|
ModalFullScreen.Close = StyledModalClose;
|
|
2810
2872
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2811
|
-
var templateObject_1$
|
|
2873
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
2812
2874
|
|
|
2813
2875
|
/**
|
|
2814
2876
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2829,7 +2891,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2829
2891
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2830
2892
|
var useToast = reactNotifications.useToast;
|
|
2831
2893
|
|
|
2832
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2894
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
|
|
2833
2895
|
/**
|
|
2834
2896
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2835
2897
|
|
|
@@ -2839,9 +2901,9 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2839
2901
|
*/
|
|
2840
2902
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2841
2903
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2842
|
-
var templateObject_1$
|
|
2904
|
+
var templateObject_1$k;
|
|
2843
2905
|
|
|
2844
|
-
var MainContainer = styled__default["default"].div(templateObject_1$
|
|
2906
|
+
var MainContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2845
2907
|
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
2908
|
var theme = _a.theme;
|
|
2847
2909
|
return theme.space.xs;
|
|
@@ -2904,9 +2966,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2904
2966
|
var Main = function (props) {
|
|
2905
2967
|
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
2968
|
};
|
|
2907
|
-
var templateObject_1$
|
|
2969
|
+
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
2970
|
|
|
2909
|
-
var PageContainer = styled__default["default"].div(templateObject_1$
|
|
2971
|
+
var PageContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2910
2972
|
var theme = _a.theme;
|
|
2911
2973
|
return theme.palette.white;
|
|
2912
2974
|
});
|
|
@@ -2961,7 +3023,7 @@ PageHeader.Overline = MainOverline;
|
|
|
2961
3023
|
PageHeader.Title = MainTitle;
|
|
2962
3024
|
PageHeader.Description = MainDescription;
|
|
2963
3025
|
PageHeader.Counters = MainCounters;
|
|
2964
|
-
var templateObject_1$
|
|
3026
|
+
var templateObject_1$i, templateObject_2$b, templateObject_3$9, templateObject_4$6;
|
|
2965
3027
|
|
|
2966
3028
|
var _path$5;
|
|
2967
3029
|
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 +3058,11 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2996
3058
|
})));
|
|
2997
3059
|
};
|
|
2998
3060
|
|
|
2999
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
3061
|
+
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
3062
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
3001
|
-
var templateObject_1$
|
|
3063
|
+
var templateObject_1$h;
|
|
3002
3064
|
|
|
3003
|
-
var flexCenter = styled.css(templateObject_1$
|
|
3065
|
+
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
3066
|
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
3067
|
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
3068
|
var theme = _a.theme;
|
|
@@ -3019,13 +3081,13 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
3019
3081
|
var theme = _a.theme;
|
|
3020
3082
|
return theme.shadows.boxShadow(theme);
|
|
3021
3083
|
});
|
|
3022
|
-
var templateObject_1$
|
|
3084
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5;
|
|
3023
3085
|
|
|
3024
3086
|
/**
|
|
3025
3087
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
3026
3088
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
3027
3089
|
**/
|
|
3028
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
3090
|
+
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
3091
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
3030
3092
|
}, function (props) {
|
|
3031
3093
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -3044,7 +3106,7 @@ var MenuItem = function (_a) {
|
|
|
3044
3106
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
3045
3107
|
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
3108
|
};
|
|
3047
|
-
var templateObject_1$
|
|
3109
|
+
var templateObject_1$f, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
3048
3110
|
|
|
3049
3111
|
var _path$3;
|
|
3050
3112
|
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 +3157,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
3095
3157
|
})));
|
|
3096
3158
|
};
|
|
3097
3159
|
|
|
3098
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
3160
|
+
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
3161
|
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$
|
|
3162
|
+
var templateObject_1$e;
|
|
3101
3163
|
|
|
3102
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
3164
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject([""], [""])));
|
|
3103
3165
|
/**
|
|
3104
3166
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
3105
3167
|
*/
|
|
3106
3168
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
3107
|
-
var templateObject_1$
|
|
3169
|
+
var templateObject_1$d;
|
|
3108
3170
|
|
|
3109
3171
|
var getInitials = function (name) {
|
|
3110
3172
|
var names = name.split(" ");
|
|
@@ -3112,7 +3174,7 @@ var getInitials = function (name) {
|
|
|
3112
3174
|
return initials;
|
|
3113
3175
|
};
|
|
3114
3176
|
|
|
3115
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
3177
|
+
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
3178
|
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
3179
|
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
3180
|
var theme = _a.theme;
|
|
@@ -3141,7 +3203,7 @@ var HelpItem = function (props) {
|
|
|
3141
3203
|
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
3204
|
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
3205
|
};
|
|
3144
|
-
var templateObject_1$
|
|
3206
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
3145
3207
|
|
|
3146
3208
|
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
3209
|
var SvgEmpty = function SvgEmpty(props) {
|
|
@@ -3170,7 +3232,7 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
3170
3232
|
})));
|
|
3171
3233
|
};
|
|
3172
3234
|
|
|
3173
|
-
var StyledBody$1 = styled__default["default"].div(templateObject_1$
|
|
3235
|
+
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
3236
|
var theme = _a.theme;
|
|
3175
3237
|
return theme.space.base * 6;
|
|
3176
3238
|
}, function (_a) {
|
|
@@ -3184,9 +3246,9 @@ var LanguageItem = function (props) {
|
|
|
3184
3246
|
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
3247
|
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
3248
|
};
|
|
3187
|
-
var templateObject_1$
|
|
3249
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$5;
|
|
3188
3250
|
|
|
3189
|
-
var ProfileContainer = styled__default["default"].div(templateObject_1$
|
|
3251
|
+
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
3252
|
var theme = _a.theme;
|
|
3191
3253
|
return theme.space.base * 2;
|
|
3192
3254
|
}, function (_a) {
|
|
@@ -3214,9 +3276,9 @@ var UserContainer = function (props) {
|
|
|
3214
3276
|
var _a;
|
|
3215
3277
|
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
3278
|
};
|
|
3217
|
-
var templateObject_1$
|
|
3279
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$4;
|
|
3218
3280
|
|
|
3219
|
-
var StyledList = styled__default["default"].ul(templateObject_1$
|
|
3281
|
+
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
3282
|
var UserMenu = function (props) {
|
|
3221
3283
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
3222
3284
|
var toggleItem = function (item) {
|
|
@@ -3224,9 +3286,9 @@ var UserMenu = function (props) {
|
|
|
3224
3286
|
};
|
|
3225
3287
|
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
3288
|
};
|
|
3227
|
-
var templateObject_1$
|
|
3289
|
+
var templateObject_1$9;
|
|
3228
3290
|
|
|
3229
|
-
var StyledModal = styled__default["default"](Modal)(templateObject_1$
|
|
3291
|
+
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
3292
|
var theme = _a.theme;
|
|
3231
3293
|
return theme.space.xxl;
|
|
3232
3294
|
}, function (_a) {
|
|
@@ -3264,9 +3326,9 @@ var ProfileModal = function (_a) {
|
|
|
3264
3326
|
};
|
|
3265
3327
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
3266
3328
|
};
|
|
3267
|
-
var templateObject_1$
|
|
3329
|
+
var templateObject_1$8, templateObject_2$5;
|
|
3268
3330
|
|
|
3269
|
-
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$
|
|
3331
|
+
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
3332
|
var theme = _a.theme;
|
|
3271
3333
|
return theme.palette.green[700];
|
|
3272
3334
|
});
|
|
@@ -3306,9 +3368,9 @@ var Stepper = function (props) {
|
|
|
3306
3368
|
Stepper.Step = UgStep;
|
|
3307
3369
|
Stepper.Label = UgLabel;
|
|
3308
3370
|
Stepper.Content = UgContent;
|
|
3309
|
-
var templateObject_1$
|
|
3371
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
3310
3372
|
|
|
3311
|
-
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$
|
|
3373
|
+
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
3374
|
var theme = _a.theme;
|
|
3313
3375
|
return theme.palette.grey[300];
|
|
3314
3376
|
}, function (_a) {
|
|
@@ -3343,9 +3405,9 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
3343
3405
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
3344
3406
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
3345
3407
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
3346
|
-
var templateObject_1$
|
|
3408
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
3347
3409
|
|
|
3348
|
-
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$
|
|
3410
|
+
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
3411
|
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
3350
3412
|
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
3413
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
@@ -3376,7 +3438,31 @@ var GroupedTable = function (_a) {
|
|
|
3376
3438
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
3377
3439
|
}) })] })));
|
|
3378
3440
|
};
|
|
3379
|
-
var templateObject_1$
|
|
3441
|
+
var templateObject_1$5, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
3442
|
+
|
|
3443
|
+
/**
|
|
3444
|
+
* Use Tabs to organize related content in a single view. This helps users navigate related content without having to switch contexts.
|
|
3445
|
+
|
|
3446
|
+
* Used for this:
|
|
3447
|
+
- To filter information into easily parsable views
|
|
3448
|
+
- To organize related content and controls within a single page
|
|
3449
|
+
|
|
3450
|
+
* Not for this:
|
|
3451
|
+
- To guide users through a task list, use a Stepper instead
|
|
3452
|
+
- As a secondary navigation bar that spans multiple pages, use Anchors instead
|
|
3453
|
+
*/
|
|
3454
|
+
var TabsComponent = React.forwardRef(function (props, ref) {
|
|
3455
|
+
var _a = React.useState(props.selectedItem), selectedTab = _a[0], setSelectedTab = _a[1];
|
|
3456
|
+
return (jsxRuntime.jsx(reactTabs.Tabs, __assign({ ref: ref }, props, { selectedItem: selectedTab, onChange: function (item) {
|
|
3457
|
+
var _a;
|
|
3458
|
+
setSelectedTab(item);
|
|
3459
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, item);
|
|
3460
|
+
} })));
|
|
3461
|
+
});
|
|
3462
|
+
var Tabs = TabsComponent;
|
|
3463
|
+
Tabs.List = reactTabs.TabList;
|
|
3464
|
+
Tabs.Tab = reactTabs.Tab;
|
|
3465
|
+
Tabs.Panel = reactTabs.TabPanel;
|
|
3380
3466
|
|
|
3381
3467
|
/**
|
|
3382
3468
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -3396,7 +3482,7 @@ Tiles.Icon = reactForms.Tiles.Icon;
|
|
|
3396
3482
|
Tiles.Label = reactForms.Tiles.Label;
|
|
3397
3483
|
Tiles.Tile = reactForms.Tiles.Tile;
|
|
3398
3484
|
|
|
3399
|
-
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$
|
|
3485
|
+
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject([""], [""])));
|
|
3400
3486
|
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
3487
|
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
3488
|
var theme = _a.theme;
|
|
@@ -3418,7 +3504,7 @@ var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(t
|
|
|
3418
3504
|
var Timeline = function (props) { return jsxRuntime.jsx(UgTimeline, __assign({}, props)); };
|
|
3419
3505
|
Timeline.Item = UgTimelineItem;
|
|
3420
3506
|
Timeline.Content = UgTimelineContent;
|
|
3421
|
-
var templateObject_1$
|
|
3507
|
+
var templateObject_1$4, templateObject_2$1, templateObject_3;
|
|
3422
3508
|
|
|
3423
3509
|
/**
|
|
3424
3510
|
* Tooltips appear when a user hovers or focuses an element. They provide contextual information about the element they are paired with.
|
|
@@ -3430,7 +3516,12 @@ var templateObject_1$3, templateObject_2$1, templateObject_3;
|
|
|
3430
3516
|
* - To provide information a user needs to know or remember
|
|
3431
3517
|
* - To display truncated text, use a title attribute instead
|
|
3432
3518
|
*/
|
|
3433
|
-
var
|
|
3519
|
+
var TooltipComponent = function (props) { return jsxRuntime.jsx(reactTooltips.Tooltip, __assign({}, props)); };
|
|
3520
|
+
var Tooltip = styled__default["default"](TooltipComponent)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n box-shadow: ", ";\n"], ["\n box-shadow: ", ";\n"])), function (_a) {
|
|
3521
|
+
var theme = _a.theme;
|
|
3522
|
+
return theme.shadows.lg("".concat(theme.space.base * 3, "px"), "".concat(theme.space.base * 5, "px"), reactTheming.getColor("neutralHue", 600, theme, 0.15));
|
|
3523
|
+
});
|
|
3524
|
+
var templateObject_1$3;
|
|
3434
3525
|
|
|
3435
3526
|
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
3527
|
var theme = _a.theme;
|
|
@@ -3491,7 +3582,6 @@ exports.Anchor = Anchor;
|
|
|
3491
3582
|
exports.AppHeader = AppHeader;
|
|
3492
3583
|
exports.Autocomplete = Autocomplete;
|
|
3493
3584
|
exports.Avatar = Avatar;
|
|
3494
|
-
exports.BarChart = BarChart;
|
|
3495
3585
|
exports.Blockquote = Blockquote;
|
|
3496
3586
|
exports.Body = Body$1;
|
|
3497
3587
|
exports.BrandItem = BrandItem;
|
|
@@ -3589,13 +3679,13 @@ exports.SpecialCard = SpecialCard;
|
|
|
3589
3679
|
exports.Spinner = Spinner;
|
|
3590
3680
|
exports.SplitButton = SplitButton;
|
|
3591
3681
|
exports.Stepper = Stepper;
|
|
3592
|
-
exports.StreamChart = StreamChart;
|
|
3593
3682
|
exports.SunburstChart = SunburstChart;
|
|
3594
3683
|
exports.Table = Table;
|
|
3595
3684
|
exports.TableBody = Body;
|
|
3596
3685
|
exports.TableCell = Cell;
|
|
3597
3686
|
exports.TableHead = Head;
|
|
3598
3687
|
exports.TableRow = Row;
|
|
3688
|
+
exports.Tabs = Tabs;
|
|
3599
3689
|
exports.Tag = Tag;
|
|
3600
3690
|
exports.Textarea = Textarea;
|
|
3601
3691
|
exports.Tiles = Tiles;
|