@appquality/unguess-design-system 2.11.9 → 2.11.10
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 +12 -0
- package/build/index.js +177 -170
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -263,8 +263,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
263
263
|
|
|
264
264
|
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: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
265
265
|
|
|
266
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
267
|
-
var templateObject_1$
|
|
266
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$1h || (templateObject_1$1h = __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);
|
|
267
|
+
var templateObject_1$1h;
|
|
268
268
|
|
|
269
269
|
/**
|
|
270
270
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -279,7 +279,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
279
279
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
280
280
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
281
281
|
|
|
282
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
282
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
283
283
|
var theme = _a.theme;
|
|
284
284
|
return theme.palette.grey[700];
|
|
285
285
|
}, function (_a) {
|
|
@@ -300,9 +300,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
300
300
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
301
301
|
Alert.Title = UgAlertTitle;
|
|
302
302
|
Alert.Close = reactNotifications.Close;
|
|
303
|
-
var templateObject_1$
|
|
303
|
+
var templateObject_1$1g, templateObject_2$w;
|
|
304
304
|
|
|
305
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
305
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
306
306
|
return props.avatarType &&
|
|
307
307
|
props.avatarType !== "image" &&
|
|
308
308
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -326,7 +326,7 @@ var Avatar = function (props) {
|
|
|
326
326
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
327
327
|
};
|
|
328
328
|
Avatar.Text = UgAvatar.Text;
|
|
329
|
-
var templateObject_1$
|
|
329
|
+
var templateObject_1$1f;
|
|
330
330
|
|
|
331
331
|
/**
|
|
332
332
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -357,7 +357,7 @@ var getThemeStyle = function (props) {
|
|
|
357
357
|
}
|
|
358
358
|
return theme;
|
|
359
359
|
};
|
|
360
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
360
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject([""], [""])));
|
|
361
361
|
/**
|
|
362
362
|
* Buttons let users take action quickly.
|
|
363
363
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -376,7 +376,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
|
|
|
376
376
|
var Button = ButtonComponent;
|
|
377
377
|
Button.StartIcon = UgButton.StartIcon;
|
|
378
378
|
Button.EndIcon = UgButton.EndIcon;
|
|
379
|
-
var templateObject_1$
|
|
379
|
+
var templateObject_1$1e;
|
|
380
380
|
|
|
381
381
|
/**
|
|
382
382
|
A Button group lets users make a selection from a set of options.
|
|
@@ -406,7 +406,7 @@ Used for this:
|
|
|
406
406
|
**/
|
|
407
407
|
var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
|
|
408
408
|
|
|
409
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
409
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
410
410
|
var theme = _a.theme;
|
|
411
411
|
return theme.borderRadii.lg;
|
|
412
412
|
}, function (_a) {
|
|
@@ -444,7 +444,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
444
444
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
445
445
|
});
|
|
446
446
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
447
|
-
var templateObject_1$
|
|
447
|
+
var templateObject_1$1d, templateObject_2$v;
|
|
448
448
|
|
|
449
449
|
/**
|
|
450
450
|
* Tags let users categorize content using a keyword.
|
|
@@ -659,7 +659,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
659
659
|
})));
|
|
660
660
|
};
|
|
661
661
|
|
|
662
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
662
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
663
663
|
return props.isLight ?
|
|
664
664
|
"\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 ");
|
|
665
665
|
});
|
|
@@ -677,22 +677,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
677
677
|
- To communicate a typing status, use Inline instead
|
|
678
678
|
*/
|
|
679
679
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
680
|
-
var templateObject_1$
|
|
680
|
+
var templateObject_1$1c;
|
|
681
681
|
|
|
682
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
682
|
+
var CardMeta = styled__default["default"].div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
683
683
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
684
684
|
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 ");
|
|
685
685
|
});
|
|
686
|
-
var templateObject_1$
|
|
686
|
+
var templateObject_1$1b;
|
|
687
687
|
|
|
688
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
688
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
689
689
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
690
690
|
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 ");
|
|
691
691
|
});
|
|
692
692
|
CardThumbnail.defaultProps = {
|
|
693
693
|
align: "left"
|
|
694
694
|
};
|
|
695
|
-
var templateObject_1$
|
|
695
|
+
var templateObject_1$1a;
|
|
696
696
|
|
|
697
697
|
/**
|
|
698
698
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -704,7 +704,7 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
704
704
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
705
705
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
706
706
|
|
|
707
|
-
var Label$2 = styled__default["default"](SM)(templateObject_1$
|
|
707
|
+
var Label$2 = styled__default["default"](SM)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
708
708
|
var theme = _a.theme;
|
|
709
709
|
return theme.palette.grey[500];
|
|
710
710
|
});
|
|
@@ -733,9 +733,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
733
733
|
CardHeader.Label = Label$2;
|
|
734
734
|
CardHeader.Title = Title$3;
|
|
735
735
|
CardHeader.Text = Description$3;
|
|
736
|
-
var templateObject_1$
|
|
736
|
+
var templateObject_1$19, templateObject_2$u, templateObject_3$j, templateObject_4$d;
|
|
737
737
|
|
|
738
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
738
|
+
var Divider = styled__default["default"].div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
739
739
|
var theme = _a.theme;
|
|
740
740
|
return theme.space.base * 3;
|
|
741
741
|
}, function (_a) {
|
|
@@ -751,9 +751,9 @@ var Container$1 = styled__default["default"].div(templateObject_3$i || (template
|
|
|
751
751
|
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 ");
|
|
752
752
|
});
|
|
753
753
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
754
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$18, templateObject_2$t, templateObject_3$i;
|
|
755
755
|
|
|
756
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
756
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n\n ", "\n"])), function (_a) {
|
|
757
757
|
var theme = _a.theme;
|
|
758
758
|
return theme.borderRadii.lg;
|
|
759
759
|
}, function (_a) {
|
|
@@ -783,7 +783,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
783
783
|
SpecialCard.Thumb = CardThumbnail;
|
|
784
784
|
SpecialCard.Header = CardHeader;
|
|
785
785
|
SpecialCard.Footer = CardFooter;
|
|
786
|
-
var templateObject_1$
|
|
786
|
+
var templateObject_1$17;
|
|
787
787
|
|
|
788
788
|
var CampaignCardSkeleton = function () {
|
|
789
789
|
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%" } })] })] }));
|
|
@@ -816,7 +816,7 @@ var getTypeDataIcon = function (type) {
|
|
|
816
816
|
return SvgCampaignFunctional;
|
|
817
817
|
}
|
|
818
818
|
};
|
|
819
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
819
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
820
820
|
var theme = _a.theme;
|
|
821
821
|
return theme.palette.grey["700"];
|
|
822
822
|
});
|
|
@@ -843,9 +843,9 @@ var CampaignCard = function (_a) {
|
|
|
843
843
|
var PillIcon = getTypeDataIcon(type);
|
|
844
844
|
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, {})] })] })));
|
|
845
845
|
};
|
|
846
|
-
var templateObject_1$
|
|
846
|
+
var templateObject_1$16, templateObject_2$s, templateObject_3$h;
|
|
847
847
|
|
|
848
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
848
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
849
849
|
var theme = _a.theme;
|
|
850
850
|
return theme.space.base * 6;
|
|
851
851
|
}, function (_a) {
|
|
@@ -862,9 +862,9 @@ var ProductCard = function (props) {
|
|
|
862
862
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
863
863
|
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 })) }))] })));
|
|
864
864
|
};
|
|
865
|
-
var templateObject_1$
|
|
865
|
+
var templateObject_1$15;
|
|
866
866
|
|
|
867
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
867
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
868
868
|
var theme = _a.theme;
|
|
869
869
|
return theme.palette.grey[500];
|
|
870
870
|
}, function (_a) {
|
|
@@ -916,15 +916,15 @@ var ServiceCard = function (props) {
|
|
|
916
916
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
917
917
|
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)); }) })))] })] })));
|
|
918
918
|
};
|
|
919
|
-
var templateObject_1$
|
|
919
|
+
var templateObject_1$14, templateObject_2$r, templateObject_3$g, templateObject_4$c, templateObject_5$7, templateObject_6$3, templateObject_7$1, templateObject_8$1;
|
|
920
920
|
|
|
921
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
921
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
922
922
|
var InfoCard = function (props) {
|
|
923
923
|
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; }) }) })))] })));
|
|
924
924
|
};
|
|
925
|
-
var templateObject_1$
|
|
925
|
+
var templateObject_1$13;
|
|
926
926
|
|
|
927
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
927
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
928
928
|
var theme = _a.theme;
|
|
929
929
|
return theme.space.xl;
|
|
930
930
|
}, function (_a) {
|
|
@@ -935,7 +935,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
935
935
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
936
936
|
*/
|
|
937
937
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
938
|
-
var templateObject_1$
|
|
938
|
+
var templateObject_1$12;
|
|
939
939
|
|
|
940
940
|
/**
|
|
941
941
|
* Use Span to style and format inline text elements.
|
|
@@ -975,7 +975,7 @@ function useWindowSize() {
|
|
|
975
975
|
return size;
|
|
976
976
|
}
|
|
977
977
|
|
|
978
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
978
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""])));
|
|
979
979
|
var StyledTag = styled__default["default"](Tag)(templateObject_2$q || (templateObject_2$q = __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) {
|
|
980
980
|
var status = _a.status, theme = _a.theme;
|
|
981
981
|
switch (status) {
|
|
@@ -1010,9 +1010,9 @@ var Counter = function (props) {
|
|
|
1010
1010
|
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() })] })));
|
|
1011
1011
|
};
|
|
1012
1012
|
Counter.Avatar = StyledTag.Avatar;
|
|
1013
|
-
var templateObject_1$
|
|
1013
|
+
var templateObject_1$11, templateObject_2$q;
|
|
1014
1014
|
|
|
1015
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1
|
|
1015
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
1016
1016
|
var theme = _a.theme;
|
|
1017
1017
|
return theme.breakpoints.sm;
|
|
1018
1018
|
});
|
|
@@ -1029,24 +1029,24 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1029
1029
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1030
1030
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1031
1031
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1032
|
-
var templateObject_1
|
|
1032
|
+
var templateObject_1$10;
|
|
1033
1033
|
|
|
1034
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1
|
|
1035
|
-
var templateObject_1
|
|
1034
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject([""], [""])));
|
|
1035
|
+
var templateObject_1$$;
|
|
1036
1036
|
|
|
1037
1037
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1038
1038
|
__proto__: null,
|
|
1039
1039
|
Field: Field$1
|
|
1040
1040
|
});
|
|
1041
1041
|
|
|
1042
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1042
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
1043
1043
|
var theme = _a.theme;
|
|
1044
1044
|
return theme.palette.blue[100];
|
|
1045
1045
|
});
|
|
1046
1046
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1047
|
-
var templateObject_1$
|
|
1047
|
+
var templateObject_1$_;
|
|
1048
1048
|
|
|
1049
|
-
var Container = styled__default["default"].div(templateObject_1$
|
|
1049
|
+
var Container = styled__default["default"].div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
1050
1050
|
var MetaContainer$1 = styled__default["default"].div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
1051
1051
|
var ThumbContainer = styled__default["default"].div(templateObject_3$f || (templateObject_3$f = __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) {
|
|
1052
1052
|
var theme = _a.theme;
|
|
@@ -1074,7 +1074,7 @@ var ItemContent = function (props) {
|
|
|
1074
1074
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1075
1075
|
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$2, { children: description })] })] }));
|
|
1076
1076
|
};
|
|
1077
|
-
var templateObject_1$
|
|
1077
|
+
var templateObject_1$Z, templateObject_2$p, templateObject_3$f, templateObject_4$b, templateObject_5$6;
|
|
1078
1078
|
|
|
1079
1079
|
/**
|
|
1080
1080
|
* A Menu is a wrapper for items elements
|
|
@@ -1098,7 +1098,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1098
1098
|
*/
|
|
1099
1099
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1100
1100
|
|
|
1101
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1101
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1102
1102
|
return props.isPrimary &&
|
|
1103
1103
|
"\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 ");
|
|
1104
1104
|
});
|
|
@@ -1115,7 +1115,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1115
1115
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1116
1116
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1117
1117
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1118
|
-
var templateObject_1$
|
|
1118
|
+
var templateObject_1$Y;
|
|
1119
1119
|
|
|
1120
1120
|
/**
|
|
1121
1121
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1130,7 +1130,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1130
1130
|
|
|
1131
1131
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1132
1132
|
|
|
1133
|
-
var editorStyle = styled.css(templateObject_1$
|
|
1133
|
+
var editorStyle = styled.css(templateObject_1$X || (templateObject_1$X = __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) {
|
|
1134
1134
|
var theme = _a.theme;
|
|
1135
1135
|
return theme.palette.grey["800"];
|
|
1136
1136
|
}, function (_a) {
|
|
@@ -1143,7 +1143,7 @@ var editorStyle = styled.css(templateObject_1$W || (templateObject_1$W = __makeT
|
|
|
1143
1143
|
var theme = _a.theme;
|
|
1144
1144
|
return theme.palette.red[600];
|
|
1145
1145
|
});
|
|
1146
|
-
var templateObject_1$
|
|
1146
|
+
var templateObject_1$X;
|
|
1147
1147
|
|
|
1148
1148
|
var _path$m;
|
|
1149
1149
|
|
|
@@ -1301,7 +1301,7 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1301
1301
|
}))));
|
|
1302
1302
|
};
|
|
1303
1303
|
|
|
1304
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1304
|
+
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject([""], [""])));
|
|
1305
1305
|
var MenuContainer = styled__default["default"](Card)(templateObject_2$o || (templateObject_2$o = __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) {
|
|
1306
1306
|
var theme = _a.theme;
|
|
1307
1307
|
return theme.space.xxs;
|
|
@@ -1319,9 +1319,9 @@ var FloatingMenu = function (props) {
|
|
|
1319
1319
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1320
1320
|
}, 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") }))] })) })));
|
|
1321
1321
|
};
|
|
1322
|
-
var templateObject_1$
|
|
1322
|
+
var templateObject_1$W, templateObject_2$o;
|
|
1323
1323
|
|
|
1324
|
-
var Header$1 = styled__default["default"].div(templateObject_1$
|
|
1324
|
+
var Header$1 = styled__default["default"].div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
1325
1325
|
var theme = _a.theme;
|
|
1326
1326
|
return theme.space.xs;
|
|
1327
1327
|
}, function (_a) {
|
|
@@ -1350,9 +1350,9 @@ var EditorHeader = function (props) {
|
|
|
1350
1350
|
var title = props.title, validation = props.validation;
|
|
1351
1351
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1352
1352
|
};
|
|
1353
|
-
var templateObject_1$
|
|
1353
|
+
var templateObject_1$V, templateObject_2$n;
|
|
1354
1354
|
|
|
1355
|
-
var Footer$1 = styled__default["default"].div(templateObject_1$
|
|
1355
|
+
var Footer$1 = styled__default["default"].div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
1356
1356
|
var theme = _a.theme;
|
|
1357
1357
|
return theme.space.sm;
|
|
1358
1358
|
}, function (_a) {
|
|
@@ -1364,9 +1364,9 @@ var EditorFooter = function (_a) {
|
|
|
1364
1364
|
var saveText = _a.saveText;
|
|
1365
1365
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1366
1366
|
};
|
|
1367
|
-
var templateObject_1$
|
|
1367
|
+
var templateObject_1$U, templateObject_2$m;
|
|
1368
1368
|
|
|
1369
|
-
var EditorContainer = styled__default["default"].div(templateObject_1$
|
|
1369
|
+
var EditorContainer = styled__default["default"].div(templateObject_1$T || (templateObject_1$T = __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) {
|
|
1370
1370
|
var theme = _a.theme;
|
|
1371
1371
|
return theme.borderRadii.md;
|
|
1372
1372
|
}, function (_a) {
|
|
@@ -1450,9 +1450,9 @@ var Editor = function (_a) {
|
|
|
1450
1450
|
});
|
|
1451
1451
|
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 })] })));
|
|
1452
1452
|
};
|
|
1453
|
-
var templateObject_1$
|
|
1453
|
+
var templateObject_1$T;
|
|
1454
1454
|
|
|
1455
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1455
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
|
|
1456
1456
|
/**
|
|
1457
1457
|
* A Checkbox lets users select and unselect options from a list.
|
|
1458
1458
|
* <hr>
|
|
@@ -1464,17 +1464,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1464
1464
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1465
1465
|
**/
|
|
1466
1466
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1467
|
-
var templateObject_1$
|
|
1467
|
+
var templateObject_1$S;
|
|
1468
1468
|
|
|
1469
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1469
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1470
1470
|
/**
|
|
1471
1471
|
* A Label is used to specify a title for an input.
|
|
1472
1472
|
* <hr>
|
|
1473
1473
|
**/
|
|
1474
1474
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1475
|
-
var templateObject_1$
|
|
1475
|
+
var templateObject_1$R;
|
|
1476
1476
|
|
|
1477
|
-
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$
|
|
1477
|
+
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1478
1478
|
var theme = _a.theme;
|
|
1479
1479
|
return theme.space.base;
|
|
1480
1480
|
});
|
|
@@ -1487,14 +1487,14 @@ var CheckboxCard = function (props) {
|
|
|
1487
1487
|
};
|
|
1488
1488
|
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 })) })) }))] })));
|
|
1489
1489
|
};
|
|
1490
|
-
var templateObject_1$
|
|
1490
|
+
var templateObject_1$Q;
|
|
1491
1491
|
|
|
1492
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1492
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
1493
1493
|
/**
|
|
1494
1494
|
* A Field is a wrapper for input elements
|
|
1495
1495
|
**/
|
|
1496
1496
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1497
|
-
var templateObject_1$
|
|
1497
|
+
var templateObject_1$P;
|
|
1498
1498
|
|
|
1499
1499
|
var index = /*#__PURE__*/Object.freeze({
|
|
1500
1500
|
__proto__: null,
|
|
@@ -1502,7 +1502,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1502
1502
|
Hint: reactForms.Hint
|
|
1503
1503
|
});
|
|
1504
1504
|
|
|
1505
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1505
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1506
1506
|
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject([""], [""])));
|
|
1507
1507
|
/**
|
|
1508
1508
|
* An Input lets users enter text into a field.
|
|
@@ -1512,7 +1512,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$l || (te
|
|
|
1512
1512
|
* - To enter multiline text, use a Textarea
|
|
1513
1513
|
**/
|
|
1514
1514
|
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
1515
|
-
var templateObject_1$
|
|
1515
|
+
var templateObject_1$O, templateObject_2$l;
|
|
1516
1516
|
|
|
1517
1517
|
var _path$j;
|
|
1518
1518
|
|
|
@@ -1532,7 +1532,7 @@ var SvgInputToggleEdit = function SvgInputToggleEdit(props) {
|
|
|
1532
1532
|
})));
|
|
1533
1533
|
};
|
|
1534
1534
|
|
|
1535
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
1535
|
+
var Wrapper = styled__default["default"].div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
1536
1536
|
var InputContainer = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"])));
|
|
1537
1537
|
var StyledInput = styled__default["default"](Input)(templateObject_3$e || (templateObject_3$e = __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 &[readonly] {\n background-color: transparent;\n border-color: transparent;\n transition: border-color 0s;\n }\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 &[readonly] {\n background-color: transparent;\n border-color: transparent;\n transition: border-color 0s;\n }\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"])), function (_a) {
|
|
1538
1538
|
var theme = _a.theme;
|
|
@@ -1557,6 +1557,7 @@ var StyledMessage = styled__default["default"](Message)(templateObject_6$2 || (t
|
|
|
1557
1557
|
var InputToggle = function (props) {
|
|
1558
1558
|
var _a = React.useState(false), isEditing = _a[0], setIsEditing = _a[1];
|
|
1559
1559
|
var inputRef = React.useRef(null);
|
|
1560
|
+
var validation = props.validation, size = props.size, label = props.label, message = props.message, required = props.required, onBlur = props.onBlur, placeholder = props.placeholder, style = props.style, rest = __rest(props, ["validation", "size", "label", "message", "required", "onBlur", "placeholder", "style"]);
|
|
1560
1561
|
var onClick = function () {
|
|
1561
1562
|
var _a;
|
|
1562
1563
|
setIsEditing(true);
|
|
@@ -1564,25 +1565,26 @@ var InputToggle = function (props) {
|
|
|
1564
1565
|
};
|
|
1565
1566
|
var onKeyDown = function (event) {
|
|
1566
1567
|
var _a;
|
|
1567
|
-
if ((event.ctrlKey || event.metaKey) && event.key ===
|
|
1568
|
+
if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
|
|
1568
1569
|
setIsEditing(false);
|
|
1569
1570
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1570
1571
|
}
|
|
1571
1572
|
};
|
|
1572
|
-
var
|
|
1573
|
+
var handleOnBlur = function () {
|
|
1573
1574
|
var _a;
|
|
1574
1575
|
setIsEditing(false);
|
|
1575
1576
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1576
1577
|
};
|
|
1577
|
-
return (jsxRuntime.jsxs(Wrapper, __assign({
|
|
1578
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({}, (style && { style: style }), { children: [label && (jsxRuntime.jsxs(StyledLabel, __assign({ isRegular: true }, (isEditing
|
|
1578
1579
|
? { style: { opacity: 1 } }
|
|
1579
|
-
: { style: { opacity: 0 } }), { children: [
|
|
1580
|
-
|
|
1581
|
-
|
|
1580
|
+
: { style: { opacity: 0 } }), { children: [label, label && required ? (jsxRuntime.jsx(Span, __assign({ style: { color: theme.palette.red[600] } }, { children: "*" }))) : null] }))), jsxRuntime.jsxs(InputContainer, { children: [jsxRuntime.jsx(StyledInput, __assign({ placeholder: placeholder, onClick: onClick, onKeyDown: onKeyDown, onBlur: function (e) {
|
|
1581
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
1582
|
+
handleOnBlur();
|
|
1583
|
+
}, ref: inputRef }, (isEditing ? { readOnly: false } : { readOnly: true }), (size ? { style: { fontSize: "".concat(size, "px") } } : {}), (validation && { validation: validation }), rest)), !isEditing && jsxRuntime.jsx(StyledEditIcon, {})] }), message && (jsxRuntime.jsx(StyledMessage, __assign({ validation: validation }, (message ? { style: { opacity: 1 } } : { style: { opacity: 0 } }), { children: message })))] })));
|
|
1582
1584
|
};
|
|
1583
|
-
var templateObject_1$
|
|
1585
|
+
var templateObject_1$N, templateObject_2$k, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$2;
|
|
1584
1586
|
|
|
1585
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1587
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1586
1588
|
/**
|
|
1587
1589
|
* Media elements add even more context to an input.
|
|
1588
1590
|
* <hr>
|
|
@@ -1591,9 +1593,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1591
1593
|
* - To enter multiline text, use a Textarea
|
|
1592
1594
|
**/
|
|
1593
1595
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1594
|
-
var templateObject_1$
|
|
1596
|
+
var templateObject_1$M;
|
|
1595
1597
|
|
|
1596
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1598
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1597
1599
|
/**
|
|
1598
1600
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1599
1601
|
* <hr>
|
|
@@ -1605,7 +1607,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$K ||
|
|
|
1605
1607
|
* - To select from a long list of options, use Select instead
|
|
1606
1608
|
**/
|
|
1607
1609
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1608
|
-
var templateObject_1$
|
|
1610
|
+
var templateObject_1$L;
|
|
1609
1611
|
|
|
1610
1612
|
var _path$i;
|
|
1611
1613
|
|
|
@@ -1625,7 +1627,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1625
1627
|
})));
|
|
1626
1628
|
};
|
|
1627
1629
|
|
|
1628
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1630
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$K || (templateObject_1$K = __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) {
|
|
1629
1631
|
var theme = _a.theme;
|
|
1630
1632
|
return theme.space.base;
|
|
1631
1633
|
}, function (_a) {
|
|
@@ -1659,9 +1661,9 @@ var RadioCard = function (_a) {
|
|
|
1659
1661
|
props.onChecked && props.onChecked(props.value);
|
|
1660
1662
|
} }, { 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 })) }))] })));
|
|
1661
1663
|
};
|
|
1662
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$K, templateObject_2$j;
|
|
1663
1665
|
|
|
1664
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1666
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1665
1667
|
/**
|
|
1666
1668
|
* A Textarea is a form control for multi-line text.
|
|
1667
1669
|
* <hr>
|
|
@@ -1669,9 +1671,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1669
1671
|
* - To enter multi-line text
|
|
1670
1672
|
**/
|
|
1671
1673
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1672
|
-
var templateObject_1$
|
|
1674
|
+
var templateObject_1$J;
|
|
1673
1675
|
|
|
1674
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1676
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1675
1677
|
/**
|
|
1676
1678
|
* 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.
|
|
1677
1679
|
* <hr>
|
|
@@ -1682,11 +1684,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$H
|
|
|
1682
1684
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1683
1685
|
**/
|
|
1684
1686
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1685
|
-
var templateObject_1$
|
|
1687
|
+
var templateObject_1$I;
|
|
1686
1688
|
|
|
1687
|
-
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
1689
|
+
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$H || (templateObject_1$H = __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);
|
|
1688
1690
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
1689
|
-
var templateObject_1$
|
|
1691
|
+
var templateObject_1$H;
|
|
1690
1692
|
|
|
1691
1693
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1692
1694
|
|
|
@@ -1749,15 +1751,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1749
1751
|
})));
|
|
1750
1752
|
};
|
|
1751
1753
|
|
|
1752
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1754
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
1753
1755
|
var Icon = function (props) {
|
|
1754
1756
|
var type = props.type, size = props.size;
|
|
1755
1757
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1756
1758
|
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 })] }));
|
|
1757
1759
|
};
|
|
1758
|
-
var templateObject_1$
|
|
1760
|
+
var templateObject_1$G;
|
|
1759
1761
|
|
|
1760
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1762
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1761
1763
|
/**
|
|
1762
1764
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1763
1765
|
* <hr>
|
|
@@ -1769,9 +1771,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1769
1771
|
- When loading page content, use a Skeleton loader instead
|
|
1770
1772
|
*/
|
|
1771
1773
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1772
|
-
var templateObject_1$
|
|
1774
|
+
var templateObject_1$F;
|
|
1773
1775
|
|
|
1774
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1776
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1775
1777
|
/**
|
|
1776
1778
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1777
1779
|
* <hr>
|
|
@@ -1780,9 +1782,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1780
1782
|
- To provide a quick way to navigate to ancestor pages
|
|
1781
1783
|
*/
|
|
1782
1784
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1783
|
-
var templateObject_1$
|
|
1785
|
+
var templateObject_1$E;
|
|
1784
1786
|
|
|
1785
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1787
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1786
1788
|
var theme = _a.theme;
|
|
1787
1789
|
return theme.palette.white;
|
|
1788
1790
|
});
|
|
@@ -1790,7 +1792,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$C ||
|
|
|
1790
1792
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1791
1793
|
*/
|
|
1792
1794
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1793
|
-
var templateObject_1$
|
|
1795
|
+
var templateObject_1$D;
|
|
1794
1796
|
|
|
1795
1797
|
/**
|
|
1796
1798
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1814,7 +1816,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1814
1816
|
})));
|
|
1815
1817
|
};
|
|
1816
1818
|
|
|
1817
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1819
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1818
1820
|
var theme = _a.theme;
|
|
1819
1821
|
return theme.fonts.system;
|
|
1820
1822
|
});
|
|
@@ -1823,14 +1825,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$i ||
|
|
|
1823
1825
|
return theme.fonts.system;
|
|
1824
1826
|
});
|
|
1825
1827
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1826
|
-
var templateObject_1$
|
|
1828
|
+
var templateObject_1$C, templateObject_2$i;
|
|
1827
1829
|
|
|
1828
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1830
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1829
1831
|
var theme = _a.theme;
|
|
1830
1832
|
return theme.fonts.system;
|
|
1831
1833
|
});
|
|
1832
1834
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1833
|
-
var templateObject_1$
|
|
1835
|
+
var templateObject_1$B;
|
|
1834
1836
|
|
|
1835
1837
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1836
1838
|
|
|
@@ -1879,7 +1881,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1879
1881
|
})));
|
|
1880
1882
|
};
|
|
1881
1883
|
|
|
1882
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1884
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1883
1885
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1884
1886
|
return isCompact &&
|
|
1885
1887
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1895,9 +1897,9 @@ var WorkspacesDropdown = function (props) {
|
|
|
1895
1897
|
? selectedWorkspace.company + "'s workspace"
|
|
1896
1898
|
: "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 }))); })] })] })));
|
|
1897
1899
|
};
|
|
1898
|
-
var templateObject_1$
|
|
1900
|
+
var templateObject_1$A;
|
|
1899
1901
|
|
|
1900
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1902
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$z || (templateObject_1$z = __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) {
|
|
1901
1903
|
var theme = _a.theme;
|
|
1902
1904
|
return theme.breakpoints.md;
|
|
1903
1905
|
});
|
|
@@ -1931,9 +1933,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1931
1933
|
var BrandItem = function (props) {
|
|
1932
1934
|
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 }) }))) }))] }));
|
|
1933
1935
|
};
|
|
1934
|
-
var templateObject_1$
|
|
1936
|
+
var templateObject_1$z, templateObject_2$h, templateObject_3$d, templateObject_4$9;
|
|
1935
1937
|
|
|
1936
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1938
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1937
1939
|
/**
|
|
1938
1940
|
* An Header is a visual way to display general information.
|
|
1939
1941
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1942,13 +1944,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1942
1944
|
Header.HeaderItem = HeaderItem;
|
|
1943
1945
|
Header.HeaderItemText = HeaderItemText;
|
|
1944
1946
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1945
|
-
var templateObject_1$
|
|
1947
|
+
var templateObject_1$y;
|
|
1946
1948
|
|
|
1947
1949
|
var HeaderSkeleton = function () {
|
|
1948
1950
|
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%" } }) }) }) }))] })));
|
|
1949
1951
|
};
|
|
1950
1952
|
|
|
1951
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1953
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1952
1954
|
var theme = _a.theme;
|
|
1953
1955
|
return theme.breakpoints.sm;
|
|
1954
1956
|
});
|
|
@@ -1960,9 +1962,9 @@ var AppHeader = function (_a) {
|
|
|
1960
1962
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1961
1963
|
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, {}) }))] }) }) }))] })));
|
|
1962
1964
|
};
|
|
1963
|
-
var templateObject_1$
|
|
1965
|
+
var templateObject_1$x;
|
|
1964
1966
|
|
|
1965
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1967
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\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 ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
|
|
1966
1968
|
var theme = _a.theme;
|
|
1967
1969
|
return theme.borders.sm;
|
|
1968
1970
|
}, function (_a) {
|
|
@@ -1989,9 +1991,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$v || (t
|
|
|
1989
1991
|
- To give a consistent dashboard and navigation experience
|
|
1990
1992
|
*/
|
|
1991
1993
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1992
|
-
var templateObject_1$
|
|
1994
|
+
var templateObject_1$w;
|
|
1993
1995
|
|
|
1994
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1996
|
+
var SelectedItemStyle = styled.css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1995
1997
|
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
|
|
1996
1998
|
var theme = _a.theme;
|
|
1997
1999
|
return theme.fonts.system;
|
|
@@ -2003,11 +2005,11 @@ var NavItem = function (props) {
|
|
|
2003
2005
|
// const { isExpanded } = props;
|
|
2004
2006
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
2005
2007
|
};
|
|
2006
|
-
var templateObject_1$
|
|
2008
|
+
var templateObject_1$v, templateObject_2$g;
|
|
2007
2009
|
|
|
2008
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
2010
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
|
|
2009
2011
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2010
|
-
var templateObject_1$
|
|
2012
|
+
var templateObject_1$u;
|
|
2011
2013
|
|
|
2012
2014
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
2013
2015
|
|
|
@@ -2045,7 +2047,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2045
2047
|
})));
|
|
2046
2048
|
};
|
|
2047
2049
|
|
|
2048
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
2050
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$t || (templateObject_1$t = __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) {
|
|
2049
2051
|
var theme = _a.theme;
|
|
2050
2052
|
return theme.space.base * 6;
|
|
2051
2053
|
}, function (_a) {
|
|
@@ -2070,18 +2072,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$s ||
|
|
|
2070
2072
|
var NavToggle = function (props) {
|
|
2071
2073
|
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%" } })) })));
|
|
2072
2074
|
};
|
|
2073
|
-
var templateObject_1$
|
|
2075
|
+
var templateObject_1$t;
|
|
2074
2076
|
|
|
2075
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
2077
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: 100%;\n min-height: ", ";\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: ", ";\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.lg; }, 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;"; });
|
|
2076
2078
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2077
|
-
var templateObject_1$
|
|
2079
|
+
var templateObject_1$s;
|
|
2078
2080
|
|
|
2079
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
2081
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$r || (templateObject_1$r = __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; });
|
|
2080
2082
|
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
2081
2083
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
2082
2084
|
NavItemProject.Title = NavItemText;
|
|
2083
2085
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2084
|
-
var templateObject_1$
|
|
2086
|
+
var templateObject_1$r, templateObject_2$f;
|
|
2085
2087
|
|
|
2086
2088
|
var _path$a;
|
|
2087
2089
|
|
|
@@ -2250,7 +2252,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2250
2252
|
})))));
|
|
2251
2253
|
};
|
|
2252
2254
|
|
|
2253
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
2255
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
2254
2256
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2255
2257
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2256
2258
|
});
|
|
@@ -2258,9 +2260,9 @@ var LoadingSidebar = function (props) {
|
|
|
2258
2260
|
var isExpanded = props.isExpanded;
|
|
2259
2261
|
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%" })] }), 3), 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" })] }))] })));
|
|
2260
2262
|
};
|
|
2261
|
-
var templateObject_1$
|
|
2263
|
+
var templateObject_1$q;
|
|
2262
2264
|
|
|
2263
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
2265
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
2264
2266
|
var ScrollingContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
|
|
2265
2267
|
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) {
|
|
2266
2268
|
var isExpanded = _a.isExpanded;
|
|
@@ -2297,9 +2299,9 @@ var Sidebar = function (props) {
|
|
|
2297
2299
|
} }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
|
|
2298
2300
|
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), 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" })] }))] })));
|
|
2299
2301
|
};
|
|
2300
|
-
var templateObject_1$
|
|
2302
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$c;
|
|
2301
2303
|
|
|
2302
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
2304
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$o || (templateObject_1$o = __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) {
|
|
2303
2305
|
var theme = _a.theme;
|
|
2304
2306
|
return theme.breakpoints.sm;
|
|
2305
2307
|
}, function (_a) {
|
|
@@ -2310,21 +2312,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$n ||
|
|
|
2310
2312
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2311
2313
|
*/
|
|
2312
2314
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2313
|
-
var templateObject_1$
|
|
2315
|
+
var templateObject_1$o;
|
|
2314
2316
|
|
|
2315
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
2317
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$n || (templateObject_1$n = __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]);
|
|
2316
2318
|
var PageLoader = function () {
|
|
2317
2319
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2318
2320
|
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: "" }) }))] })] })] })] }) })));
|
|
2319
2321
|
};
|
|
2320
|
-
var templateObject_1$
|
|
2322
|
+
var templateObject_1$n;
|
|
2321
2323
|
|
|
2322
2324
|
/**
|
|
2323
2325
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2324
2326
|
*/
|
|
2325
2327
|
var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2326
2328
|
|
|
2327
|
-
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$
|
|
2329
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$m || (templateObject_1$m = __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);
|
|
2328
2330
|
/**
|
|
2329
2331
|
* Login Form
|
|
2330
2332
|
* <hr>
|
|
@@ -2355,9 +2357,9 @@ var LoginForm = function (props) {
|
|
|
2355
2357
|
: 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 })) })))] })));
|
|
2356
2358
|
} }))] })), 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"] })))] }));
|
|
2357
2359
|
};
|
|
2358
|
-
var templateObject_1$
|
|
2360
|
+
var templateObject_1$m;
|
|
2359
2361
|
|
|
2360
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
2362
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
2361
2363
|
var theme = _a.theme;
|
|
2362
2364
|
return theme.palette.grey["800"];
|
|
2363
2365
|
});
|
|
@@ -2366,9 +2368,9 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2366
2368
|
Modal.Header = reactModals.Header;
|
|
2367
2369
|
Modal.Body = ugModalBody;
|
|
2368
2370
|
Modal.Footer = reactModals.Footer;
|
|
2369
|
-
var templateObject_1$
|
|
2371
|
+
var templateObject_1$l;
|
|
2370
2372
|
|
|
2371
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
2373
|
+
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
2372
2374
|
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) {
|
|
2373
2375
|
var theme = _a.theme;
|
|
2374
2376
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
@@ -2406,7 +2408,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2406
2408
|
ModalFullScreen.Footer = StyledFooter;
|
|
2407
2409
|
ModalFullScreen.Close = StyledModalClose;
|
|
2408
2410
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2409
|
-
var templateObject_1$
|
|
2411
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
2410
2412
|
|
|
2411
2413
|
/**
|
|
2412
2414
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2427,7 +2429,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2427
2429
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2428
2430
|
var useToast = reactNotifications.useToast;
|
|
2429
2431
|
|
|
2430
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2432
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
|
|
2431
2433
|
/**
|
|
2432
2434
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2433
2435
|
|
|
@@ -2437,9 +2439,9 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2437
2439
|
*/
|
|
2438
2440
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2439
2441
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2440
|
-
var templateObject_1$
|
|
2442
|
+
var templateObject_1$j;
|
|
2441
2443
|
|
|
2442
|
-
var MainContainer = styled__default["default"].div(templateObject_1$
|
|
2444
|
+
var MainContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2443
2445
|
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) {
|
|
2444
2446
|
var theme = _a.theme;
|
|
2445
2447
|
return theme.space.xs;
|
|
@@ -2502,9 +2504,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2502
2504
|
var Main = function (props) {
|
|
2503
2505
|
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && jsxRuntime.jsx(Counters, { children: props.infoCounters })] }) })), 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 }) }) })))] }) }));
|
|
2504
2506
|
};
|
|
2505
|
-
var templateObject_1$
|
|
2507
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2506
2508
|
|
|
2507
|
-
var PageContainer = styled__default["default"].div(templateObject_1$
|
|
2509
|
+
var PageContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2508
2510
|
var theme = _a.theme;
|
|
2509
2511
|
return theme.palette.white;
|
|
2510
2512
|
});
|
|
@@ -2555,7 +2557,7 @@ var PageHeader = function (props) {
|
|
|
2555
2557
|
PageHeader.Breadcrumb = StyledBreadcrumb;
|
|
2556
2558
|
PageHeader.Main = Main;
|
|
2557
2559
|
PageHeader.Buttons = Buttons;
|
|
2558
|
-
var templateObject_1$
|
|
2560
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6;
|
|
2559
2561
|
|
|
2560
2562
|
var _path$5;
|
|
2561
2563
|
|
|
@@ -2594,11 +2596,11 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2594
2596
|
})));
|
|
2595
2597
|
};
|
|
2596
2598
|
|
|
2597
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
2599
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __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; });
|
|
2598
2600
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2599
|
-
var templateObject_1$
|
|
2601
|
+
var templateObject_1$g;
|
|
2600
2602
|
|
|
2601
|
-
var flexCenter = styled.css(templateObject_1$
|
|
2603
|
+
var flexCenter = styled.css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
2602
2604
|
var flexColumnCenter = styled.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
2603
2605
|
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) {
|
|
2604
2606
|
var theme = _a.theme;
|
|
@@ -2617,13 +2619,13 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
2617
2619
|
var theme = _a.theme;
|
|
2618
2620
|
return theme.shadows.boxShadow(theme);
|
|
2619
2621
|
});
|
|
2620
|
-
var templateObject_1$
|
|
2622
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$5;
|
|
2621
2623
|
|
|
2622
2624
|
/**
|
|
2623
2625
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2624
2626
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2625
2627
|
**/
|
|
2626
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
2628
|
+
var StyledItem = styled__default["default"].li(templateObject_1$e || (templateObject_1$e = __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) {
|
|
2627
2629
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2628
2630
|
}, function (props) {
|
|
2629
2631
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -2642,7 +2644,7 @@ var MenuItem = function (_a) {
|
|
|
2642
2644
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2643
2645
|
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));
|
|
2644
2646
|
};
|
|
2645
|
-
var templateObject_1$
|
|
2647
|
+
var templateObject_1$e, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2646
2648
|
|
|
2647
2649
|
var _path$3;
|
|
2648
2650
|
|
|
@@ -2699,16 +2701,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2699
2701
|
})));
|
|
2700
2702
|
};
|
|
2701
2703
|
|
|
2702
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
2704
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$d || (templateObject_1$d = __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 }"); });
|
|
2703
2705
|
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] }))); };
|
|
2704
|
-
var templateObject_1$
|
|
2706
|
+
var templateObject_1$d;
|
|
2705
2707
|
|
|
2706
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
2708
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject([""], [""])));
|
|
2707
2709
|
/**
|
|
2708
2710
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
2709
2711
|
*/
|
|
2710
2712
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2711
|
-
var templateObject_1$
|
|
2713
|
+
var templateObject_1$c;
|
|
2712
2714
|
|
|
2713
2715
|
var getInitials = function (name) {
|
|
2714
2716
|
var names = name.split(" ");
|
|
@@ -2716,7 +2718,7 @@ var getInitials = function (name) {
|
|
|
2716
2718
|
return initials;
|
|
2717
2719
|
};
|
|
2718
2720
|
|
|
2719
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
2721
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$b || (templateObject_1$b = __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 }"); });
|
|
2720
2722
|
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]; });
|
|
2721
2723
|
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) {
|
|
2722
2724
|
var theme = _a.theme;
|
|
@@ -2745,7 +2747,7 @@ var HelpItem = function (props) {
|
|
|
2745
2747
|
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"] }))] })] }));
|
|
2746
2748
|
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 })) }));
|
|
2747
2749
|
};
|
|
2748
|
-
var templateObject_1$
|
|
2750
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
2749
2751
|
|
|
2750
2752
|
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); }
|
|
2751
2753
|
|
|
@@ -2777,7 +2779,7 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
2777
2779
|
})));
|
|
2778
2780
|
};
|
|
2779
2781
|
|
|
2780
|
-
var StyledBody$1 = styled__default["default"].div(templateObject_1$
|
|
2782
|
+
var StyledBody$1 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
2781
2783
|
var theme = _a.theme;
|
|
2782
2784
|
return theme.space.base * 6;
|
|
2783
2785
|
}, function (_a) {
|
|
@@ -2791,9 +2793,9 @@ var LanguageItem = function (props) {
|
|
|
2791
2793
|
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 }))] }))); }) }) })] }));
|
|
2792
2794
|
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] }))] }) })) }));
|
|
2793
2795
|
};
|
|
2794
|
-
var templateObject_1$
|
|
2796
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$5;
|
|
2795
2797
|
|
|
2796
|
-
var ProfileContainer = styled__default["default"].div(templateObject_1$
|
|
2798
|
+
var ProfileContainer = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
2797
2799
|
var theme = _a.theme;
|
|
2798
2800
|
return theme.space.base * 2;
|
|
2799
2801
|
}, function (_a) {
|
|
@@ -2821,9 +2823,9 @@ var UserContainer = function (props) {
|
|
|
2821
2823
|
var _a;
|
|
2822
2824
|
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 }))] })] }));
|
|
2823
2825
|
};
|
|
2824
|
-
var templateObject_1$
|
|
2826
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$4;
|
|
2825
2827
|
|
|
2826
|
-
var StyledList = styled__default["default"].ul(templateObject_1$
|
|
2828
|
+
var StyledList = styled__default["default"].ul(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
|
|
2827
2829
|
var UserMenu = function (props) {
|
|
2828
2830
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
2829
2831
|
var toggleItem = function (item) {
|
|
@@ -2831,9 +2833,9 @@ var UserMenu = function (props) {
|
|
|
2831
2833
|
};
|
|
2832
2834
|
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" }))] })] }));
|
|
2833
2835
|
};
|
|
2834
|
-
var templateObject_1$
|
|
2836
|
+
var templateObject_1$8;
|
|
2835
2837
|
|
|
2836
|
-
var StyledModal = styled__default["default"](Modal)(templateObject_1$
|
|
2838
|
+
var StyledModal = styled__default["default"](Modal)(templateObject_1$7 || (templateObject_1$7 = __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) {
|
|
2837
2839
|
var theme = _a.theme;
|
|
2838
2840
|
return theme.space.xxl;
|
|
2839
2841
|
}, function (_a) {
|
|
@@ -2871,9 +2873,9 @@ var ProfileModal = function (_a) {
|
|
|
2871
2873
|
};
|
|
2872
2874
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
2873
2875
|
};
|
|
2874
|
-
var templateObject_1$
|
|
2876
|
+
var templateObject_1$7, templateObject_2$5;
|
|
2875
2877
|
|
|
2876
|
-
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$
|
|
2878
|
+
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n svg {\n color: ", ";\n }\n"], ["\n svg {\n color: ", ";\n }\n"])), function (_a) {
|
|
2877
2879
|
var theme = _a.theme;
|
|
2878
2880
|
return theme.palette.green[700];
|
|
2879
2881
|
});
|
|
@@ -2913,9 +2915,9 @@ var Stepper = function (props) {
|
|
|
2913
2915
|
Stepper.Step = UgStep;
|
|
2914
2916
|
Stepper.Label = UgLabel;
|
|
2915
2917
|
Stepper.Content = UgContent;
|
|
2916
|
-
var templateObject_1$
|
|
2918
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
2917
2919
|
|
|
2918
|
-
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$
|
|
2920
|
+
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$5 || (templateObject_1$5 = __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) {
|
|
2919
2921
|
var theme = _a.theme;
|
|
2920
2922
|
return theme.palette.grey[300];
|
|
2921
2923
|
}, function (_a) {
|
|
@@ -2950,9 +2952,9 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
2950
2952
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
2951
2953
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
2952
2954
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
2953
|
-
var templateObject_1$
|
|
2955
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
2954
2956
|
|
|
2955
|
-
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$
|
|
2957
|
+
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
|
|
2956
2958
|
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
2957
2959
|
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);
|
|
2958
2960
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
@@ -2983,7 +2985,7 @@ var GroupedTable = function (_a) {
|
|
|
2983
2985
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
2984
2986
|
}) })] })));
|
|
2985
2987
|
};
|
|
2986
|
-
var templateObject_1$
|
|
2988
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
2987
2989
|
|
|
2988
2990
|
/**
|
|
2989
2991
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -3003,7 +3005,7 @@ Tiles.Icon = reactForms.Tiles.Icon;
|
|
|
3003
3005
|
Tiles.Label = reactForms.Tiles.Label;
|
|
3004
3006
|
Tiles.Tile = reactForms.Tiles.Tile;
|
|
3005
3007
|
|
|
3006
|
-
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$
|
|
3008
|
+
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
3007
3009
|
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"])));
|
|
3008
3010
|
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) {
|
|
3009
3011
|
var theme = _a.theme;
|
|
@@ -3025,8 +3027,12 @@ var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(t
|
|
|
3025
3027
|
var Timeline = function (props) { return jsxRuntime.jsx(UgTimeline, __assign({}, props)); };
|
|
3026
3028
|
Timeline.Item = UgTimelineItem;
|
|
3027
3029
|
Timeline.Content = UgTimelineContent;
|
|
3028
|
-
var templateObject_1$
|
|
3030
|
+
var templateObject_1$3, templateObject_2$1, templateObject_3;
|
|
3029
3031
|
|
|
3032
|
+
var StyledTooltipModal = styled__default["default"](reactModals.TooltipModal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
|
|
3033
|
+
var theme = _a.theme;
|
|
3034
|
+
return theme.borderRadii.md;
|
|
3035
|
+
});
|
|
3030
3036
|
/**
|
|
3031
3037
|
* A Tooltip modal provides contextual information about a paired element. It either opens automatically or through user action.
|
|
3032
3038
|
* <hr>
|
|
@@ -3034,12 +3040,13 @@ var templateObject_1$2, templateObject_2$1, templateObject_3;
|
|
|
3034
3040
|
- To enable user action within a tooltip
|
|
3035
3041
|
- To provide a focus loop when actions need to be inside a tooltip
|
|
3036
3042
|
*/
|
|
3037
|
-
var TooltipModal = function (props) { return jsxRuntime.jsx(
|
|
3038
|
-
TooltipModal.Title =
|
|
3039
|
-
TooltipModal.Body =
|
|
3040
|
-
TooltipModal.Close =
|
|
3041
|
-
TooltipModal.Footer =
|
|
3042
|
-
TooltipModal.FooterItem =
|
|
3043
|
+
var TooltipModal = function (props) { return jsxRuntime.jsx(StyledTooltipModal, __assign({}, props)); };
|
|
3044
|
+
TooltipModal.Title = StyledTooltipModal.Title;
|
|
3045
|
+
TooltipModal.Body = StyledTooltipModal.Body;
|
|
3046
|
+
TooltipModal.Close = StyledTooltipModal.Close;
|
|
3047
|
+
TooltipModal.Footer = StyledTooltipModal.Footer;
|
|
3048
|
+
TooltipModal.FooterItem = StyledTooltipModal.FooterItem;
|
|
3049
|
+
var templateObject_1$2;
|
|
3043
3050
|
|
|
3044
3051
|
/**
|
|
3045
3052
|
* A Trigger is a wrapper for input elements
|