@appquality/unguess-design-system 2.11.7 → 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 +36 -0
- package/build/index.js +182 -172
- 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,12 +1532,15 @@ 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
|
-
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 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.
|
|
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
|
+
var theme = _a.theme;
|
|
1539
|
+
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1540
|
+
});
|
|
1538
1541
|
var StyledEditIcon = styled__default["default"](SvgInputToggleEdit)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
1539
1542
|
var theme = _a.theme;
|
|
1540
|
-
return theme.space.
|
|
1543
|
+
return theme.space.sm;
|
|
1541
1544
|
});
|
|
1542
1545
|
var StyledLabel = styled__default["default"](Label)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n transition: opacity 0.2s ease-in-out;\n"], ["\n transition: opacity 0.2s ease-in-out;\n"])));
|
|
1543
1546
|
var StyledMessage = styled__default["default"](Message)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
|
|
@@ -1554,6 +1557,7 @@ var StyledMessage = styled__default["default"](Message)(templateObject_6$2 || (t
|
|
|
1554
1557
|
var InputToggle = function (props) {
|
|
1555
1558
|
var _a = React.useState(false), isEditing = _a[0], setIsEditing = _a[1];
|
|
1556
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"]);
|
|
1557
1561
|
var onClick = function () {
|
|
1558
1562
|
var _a;
|
|
1559
1563
|
setIsEditing(true);
|
|
@@ -1561,25 +1565,26 @@ var InputToggle = function (props) {
|
|
|
1561
1565
|
};
|
|
1562
1566
|
var onKeyDown = function (event) {
|
|
1563
1567
|
var _a;
|
|
1564
|
-
if ((event.ctrlKey || event.metaKey) && event.key ===
|
|
1568
|
+
if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
|
|
1565
1569
|
setIsEditing(false);
|
|
1566
1570
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1567
1571
|
}
|
|
1568
1572
|
};
|
|
1569
|
-
var
|
|
1573
|
+
var handleOnBlur = function () {
|
|
1570
1574
|
var _a;
|
|
1571
1575
|
setIsEditing(false);
|
|
1572
1576
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1573
1577
|
};
|
|
1574
|
-
return (jsxRuntime.jsxs(Wrapper, __assign({
|
|
1575
|
-
? { style: { opacity: 1 } }
|
|
1576
|
-
: { style: { opacity: 0 } }), { children: [props.label, props.label && props.required ? (jsxRuntime.jsx(Span, __assign({ style: { color: theme.palette.red[600] } }, { children: "*" }))) : null] }))), jsxRuntime.jsxs(InputContainer, { children: [jsxRuntime.jsx(StyledInput, __assign({ ref: inputRef }, props, (isEditing ? { readOnly: false } : { readOnly: true }), (props.size ? { style: { fontSize: "".concat(props.size, "px") } } : {}))), !isEditing && jsxRuntime.jsx(StyledEditIcon, {})] }), props.message && (jsxRuntime.jsx(StyledMessage, __assign({ validation: props.validation }, (props.message
|
|
1578
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({}, (style && { style: style }), { children: [label && (jsxRuntime.jsxs(StyledLabel, __assign({ isRegular: true }, (isEditing
|
|
1577
1579
|
? { style: { opacity: 1 } }
|
|
1578
|
-
: { style: { opacity: 0 } }), { children:
|
|
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 })))] })));
|
|
1579
1584
|
};
|
|
1580
|
-
var templateObject_1$
|
|
1585
|
+
var templateObject_1$N, templateObject_2$k, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$2;
|
|
1581
1586
|
|
|
1582
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1587
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1583
1588
|
/**
|
|
1584
1589
|
* Media elements add even more context to an input.
|
|
1585
1590
|
* <hr>
|
|
@@ -1588,9 +1593,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1588
1593
|
* - To enter multiline text, use a Textarea
|
|
1589
1594
|
**/
|
|
1590
1595
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1591
|
-
var templateObject_1$
|
|
1596
|
+
var templateObject_1$M;
|
|
1592
1597
|
|
|
1593
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1598
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1594
1599
|
/**
|
|
1595
1600
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1596
1601
|
* <hr>
|
|
@@ -1602,7 +1607,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$K ||
|
|
|
1602
1607
|
* - To select from a long list of options, use Select instead
|
|
1603
1608
|
**/
|
|
1604
1609
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1605
|
-
var templateObject_1$
|
|
1610
|
+
var templateObject_1$L;
|
|
1606
1611
|
|
|
1607
1612
|
var _path$i;
|
|
1608
1613
|
|
|
@@ -1622,7 +1627,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1622
1627
|
})));
|
|
1623
1628
|
};
|
|
1624
1629
|
|
|
1625
|
-
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) {
|
|
1626
1631
|
var theme = _a.theme;
|
|
1627
1632
|
return theme.space.base;
|
|
1628
1633
|
}, function (_a) {
|
|
@@ -1656,9 +1661,9 @@ var RadioCard = function (_a) {
|
|
|
1656
1661
|
props.onChecked && props.onChecked(props.value);
|
|
1657
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 })) }))] })));
|
|
1658
1663
|
};
|
|
1659
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$K, templateObject_2$j;
|
|
1660
1665
|
|
|
1661
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1666
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1662
1667
|
/**
|
|
1663
1668
|
* A Textarea is a form control for multi-line text.
|
|
1664
1669
|
* <hr>
|
|
@@ -1666,9 +1671,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1666
1671
|
* - To enter multi-line text
|
|
1667
1672
|
**/
|
|
1668
1673
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1669
|
-
var templateObject_1$
|
|
1674
|
+
var templateObject_1$J;
|
|
1670
1675
|
|
|
1671
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1676
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1672
1677
|
/**
|
|
1673
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.
|
|
1674
1679
|
* <hr>
|
|
@@ -1679,11 +1684,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$H
|
|
|
1679
1684
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1680
1685
|
**/
|
|
1681
1686
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1682
|
-
var templateObject_1$
|
|
1687
|
+
var templateObject_1$I;
|
|
1683
1688
|
|
|
1684
|
-
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);
|
|
1685
1690
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
1686
|
-
var templateObject_1$
|
|
1691
|
+
var templateObject_1$H;
|
|
1687
1692
|
|
|
1688
1693
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1689
1694
|
|
|
@@ -1746,15 +1751,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1746
1751
|
})));
|
|
1747
1752
|
};
|
|
1748
1753
|
|
|
1749
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1754
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
1750
1755
|
var Icon = function (props) {
|
|
1751
1756
|
var type = props.type, size = props.size;
|
|
1752
1757
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1753
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 })] }));
|
|
1754
1759
|
};
|
|
1755
|
-
var templateObject_1$
|
|
1760
|
+
var templateObject_1$G;
|
|
1756
1761
|
|
|
1757
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1762
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1758
1763
|
/**
|
|
1759
1764
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1760
1765
|
* <hr>
|
|
@@ -1766,9 +1771,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1766
1771
|
- When loading page content, use a Skeleton loader instead
|
|
1767
1772
|
*/
|
|
1768
1773
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1769
|
-
var templateObject_1$
|
|
1774
|
+
var templateObject_1$F;
|
|
1770
1775
|
|
|
1771
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1776
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1772
1777
|
/**
|
|
1773
1778
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1774
1779
|
* <hr>
|
|
@@ -1777,9 +1782,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1777
1782
|
- To provide a quick way to navigate to ancestor pages
|
|
1778
1783
|
*/
|
|
1779
1784
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1780
|
-
var templateObject_1$
|
|
1785
|
+
var templateObject_1$E;
|
|
1781
1786
|
|
|
1782
|
-
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) {
|
|
1783
1788
|
var theme = _a.theme;
|
|
1784
1789
|
return theme.palette.white;
|
|
1785
1790
|
});
|
|
@@ -1787,7 +1792,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$C ||
|
|
|
1787
1792
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1788
1793
|
*/
|
|
1789
1794
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1790
|
-
var templateObject_1$
|
|
1795
|
+
var templateObject_1$D;
|
|
1791
1796
|
|
|
1792
1797
|
/**
|
|
1793
1798
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1811,7 +1816,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1811
1816
|
})));
|
|
1812
1817
|
};
|
|
1813
1818
|
|
|
1814
|
-
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) {
|
|
1815
1820
|
var theme = _a.theme;
|
|
1816
1821
|
return theme.fonts.system;
|
|
1817
1822
|
});
|
|
@@ -1820,14 +1825,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$i ||
|
|
|
1820
1825
|
return theme.fonts.system;
|
|
1821
1826
|
});
|
|
1822
1827
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1823
|
-
var templateObject_1$
|
|
1828
|
+
var templateObject_1$C, templateObject_2$i;
|
|
1824
1829
|
|
|
1825
|
-
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) {
|
|
1826
1831
|
var theme = _a.theme;
|
|
1827
1832
|
return theme.fonts.system;
|
|
1828
1833
|
});
|
|
1829
1834
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1830
|
-
var templateObject_1$
|
|
1835
|
+
var templateObject_1$B;
|
|
1831
1836
|
|
|
1832
1837
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1833
1838
|
|
|
@@ -1876,7 +1881,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1876
1881
|
})));
|
|
1877
1882
|
};
|
|
1878
1883
|
|
|
1879
|
-
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) {
|
|
1880
1885
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1881
1886
|
return isCompact &&
|
|
1882
1887
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1892,9 +1897,9 @@ var WorkspacesDropdown = function (props) {
|
|
|
1892
1897
|
? selectedWorkspace.company + "'s workspace"
|
|
1893
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 }))); })] })] })));
|
|
1894
1899
|
};
|
|
1895
|
-
var templateObject_1$
|
|
1900
|
+
var templateObject_1$A;
|
|
1896
1901
|
|
|
1897
|
-
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) {
|
|
1898
1903
|
var theme = _a.theme;
|
|
1899
1904
|
return theme.breakpoints.md;
|
|
1900
1905
|
});
|
|
@@ -1928,9 +1933,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1928
1933
|
var BrandItem = function (props) {
|
|
1929
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 }) }))) }))] }));
|
|
1930
1935
|
};
|
|
1931
|
-
var templateObject_1$
|
|
1936
|
+
var templateObject_1$z, templateObject_2$h, templateObject_3$d, templateObject_4$9;
|
|
1932
1937
|
|
|
1933
|
-
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);
|
|
1934
1939
|
/**
|
|
1935
1940
|
* An Header is a visual way to display general information.
|
|
1936
1941
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1939,13 +1944,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1939
1944
|
Header.HeaderItem = HeaderItem;
|
|
1940
1945
|
Header.HeaderItemText = HeaderItemText;
|
|
1941
1946
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1942
|
-
var templateObject_1$
|
|
1947
|
+
var templateObject_1$y;
|
|
1943
1948
|
|
|
1944
1949
|
var HeaderSkeleton = function () {
|
|
1945
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%" } }) }) }) }))] })));
|
|
1946
1951
|
};
|
|
1947
1952
|
|
|
1948
|
-
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) {
|
|
1949
1954
|
var theme = _a.theme;
|
|
1950
1955
|
return theme.breakpoints.sm;
|
|
1951
1956
|
});
|
|
@@ -1957,9 +1962,9 @@ var AppHeader = function (_a) {
|
|
|
1957
1962
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1958
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, {}) }))] }) }) }))] })));
|
|
1959
1964
|
};
|
|
1960
|
-
var templateObject_1$
|
|
1965
|
+
var templateObject_1$x;
|
|
1961
1966
|
|
|
1962
|
-
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) {
|
|
1963
1968
|
var theme = _a.theme;
|
|
1964
1969
|
return theme.borders.sm;
|
|
1965
1970
|
}, function (_a) {
|
|
@@ -1986,9 +1991,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$v || (t
|
|
|
1986
1991
|
- To give a consistent dashboard and navigation experience
|
|
1987
1992
|
*/
|
|
1988
1993
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1989
|
-
var templateObject_1$
|
|
1994
|
+
var templateObject_1$w;
|
|
1990
1995
|
|
|
1991
|
-
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"]; });
|
|
1992
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) {
|
|
1993
1998
|
var theme = _a.theme;
|
|
1994
1999
|
return theme.fonts.system;
|
|
@@ -2000,11 +2005,11 @@ var NavItem = function (props) {
|
|
|
2000
2005
|
// const { isExpanded } = props;
|
|
2001
2006
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
2002
2007
|
};
|
|
2003
|
-
var templateObject_1$
|
|
2008
|
+
var templateObject_1$v, templateObject_2$g;
|
|
2004
2009
|
|
|
2005
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
2010
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
|
|
2006
2011
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2007
|
-
var templateObject_1$
|
|
2012
|
+
var templateObject_1$u;
|
|
2008
2013
|
|
|
2009
2014
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
2010
2015
|
|
|
@@ -2042,7 +2047,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2042
2047
|
})));
|
|
2043
2048
|
};
|
|
2044
2049
|
|
|
2045
|
-
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) {
|
|
2046
2051
|
var theme = _a.theme;
|
|
2047
2052
|
return theme.space.base * 6;
|
|
2048
2053
|
}, function (_a) {
|
|
@@ -2067,18 +2072,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$s ||
|
|
|
2067
2072
|
var NavToggle = function (props) {
|
|
2068
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%" } })) })));
|
|
2069
2074
|
};
|
|
2070
|
-
var templateObject_1$
|
|
2075
|
+
var templateObject_1$t;
|
|
2071
2076
|
|
|
2072
|
-
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;"; });
|
|
2073
2078
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2074
|
-
var templateObject_1$
|
|
2079
|
+
var templateObject_1$s;
|
|
2075
2080
|
|
|
2076
|
-
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; });
|
|
2077
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"])));
|
|
2078
2083
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
2079
2084
|
NavItemProject.Title = NavItemText;
|
|
2080
2085
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2081
|
-
var templateObject_1$
|
|
2086
|
+
var templateObject_1$r, templateObject_2$f;
|
|
2082
2087
|
|
|
2083
2088
|
var _path$a;
|
|
2084
2089
|
|
|
@@ -2247,7 +2252,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2247
2252
|
})))));
|
|
2248
2253
|
};
|
|
2249
2254
|
|
|
2250
|
-
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) {
|
|
2251
2256
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2252
2257
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2253
2258
|
});
|
|
@@ -2255,9 +2260,9 @@ var LoadingSidebar = function (props) {
|
|
|
2255
2260
|
var isExpanded = props.isExpanded;
|
|
2256
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" })] }))] })));
|
|
2257
2262
|
};
|
|
2258
|
-
var templateObject_1$
|
|
2263
|
+
var templateObject_1$q;
|
|
2259
2264
|
|
|
2260
|
-
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"])));
|
|
2261
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"])));
|
|
2262
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) {
|
|
2263
2268
|
var isExpanded = _a.isExpanded;
|
|
@@ -2294,9 +2299,9 @@ var Sidebar = function (props) {
|
|
|
2294
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 &&
|
|
2295
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" })] }))] })));
|
|
2296
2301
|
};
|
|
2297
|
-
var templateObject_1$
|
|
2302
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$c;
|
|
2298
2303
|
|
|
2299
|
-
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) {
|
|
2300
2305
|
var theme = _a.theme;
|
|
2301
2306
|
return theme.breakpoints.sm;
|
|
2302
2307
|
}, function (_a) {
|
|
@@ -2307,21 +2312,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$n ||
|
|
|
2307
2312
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2308
2313
|
*/
|
|
2309
2314
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2310
|
-
var templateObject_1$
|
|
2315
|
+
var templateObject_1$o;
|
|
2311
2316
|
|
|
2312
|
-
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]);
|
|
2313
2318
|
var PageLoader = function () {
|
|
2314
2319
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2315
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: "" }) }))] })] })] })] }) })));
|
|
2316
2321
|
};
|
|
2317
|
-
var templateObject_1$
|
|
2322
|
+
var templateObject_1$n;
|
|
2318
2323
|
|
|
2319
2324
|
/**
|
|
2320
2325
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2321
2326
|
*/
|
|
2322
2327
|
var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2323
2328
|
|
|
2324
|
-
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);
|
|
2325
2330
|
/**
|
|
2326
2331
|
* Login Form
|
|
2327
2332
|
* <hr>
|
|
@@ -2352,9 +2357,9 @@ var LoginForm = function (props) {
|
|
|
2352
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 })) })))] })));
|
|
2353
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"] })))] }));
|
|
2354
2359
|
};
|
|
2355
|
-
var templateObject_1$
|
|
2360
|
+
var templateObject_1$m;
|
|
2356
2361
|
|
|
2357
|
-
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) {
|
|
2358
2363
|
var theme = _a.theme;
|
|
2359
2364
|
return theme.palette.grey["800"];
|
|
2360
2365
|
});
|
|
@@ -2363,9 +2368,9 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2363
2368
|
Modal.Header = reactModals.Header;
|
|
2364
2369
|
Modal.Body = ugModalBody;
|
|
2365
2370
|
Modal.Footer = reactModals.Footer;
|
|
2366
|
-
var templateObject_1$
|
|
2371
|
+
var templateObject_1$l;
|
|
2367
2372
|
|
|
2368
|
-
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"])));
|
|
2369
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) {
|
|
2370
2375
|
var theme = _a.theme;
|
|
2371
2376
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
@@ -2403,7 +2408,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2403
2408
|
ModalFullScreen.Footer = StyledFooter;
|
|
2404
2409
|
ModalFullScreen.Close = StyledModalClose;
|
|
2405
2410
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2406
|
-
var templateObject_1$
|
|
2411
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
2407
2412
|
|
|
2408
2413
|
/**
|
|
2409
2414
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2424,7 +2429,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2424
2429
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2425
2430
|
var useToast = reactNotifications.useToast;
|
|
2426
2431
|
|
|
2427
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2432
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
|
|
2428
2433
|
/**
|
|
2429
2434
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2430
2435
|
|
|
@@ -2434,9 +2439,9 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2434
2439
|
*/
|
|
2435
2440
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2436
2441
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2437
|
-
var templateObject_1$
|
|
2442
|
+
var templateObject_1$j;
|
|
2438
2443
|
|
|
2439
|
-
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"])));
|
|
2440
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) {
|
|
2441
2446
|
var theme = _a.theme;
|
|
2442
2447
|
return theme.space.xs;
|
|
@@ -2499,9 +2504,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2499
2504
|
var Main = function (props) {
|
|
2500
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 }) }) })))] }) }));
|
|
2501
2506
|
};
|
|
2502
|
-
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;
|
|
2503
2508
|
|
|
2504
|
-
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) {
|
|
2505
2510
|
var theme = _a.theme;
|
|
2506
2511
|
return theme.palette.white;
|
|
2507
2512
|
});
|
|
@@ -2552,7 +2557,7 @@ var PageHeader = function (props) {
|
|
|
2552
2557
|
PageHeader.Breadcrumb = StyledBreadcrumb;
|
|
2553
2558
|
PageHeader.Main = Main;
|
|
2554
2559
|
PageHeader.Buttons = Buttons;
|
|
2555
|
-
var templateObject_1$
|
|
2560
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6;
|
|
2556
2561
|
|
|
2557
2562
|
var _path$5;
|
|
2558
2563
|
|
|
@@ -2591,11 +2596,11 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2591
2596
|
})));
|
|
2592
2597
|
};
|
|
2593
2598
|
|
|
2594
|
-
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; });
|
|
2595
2600
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2596
|
-
var templateObject_1$
|
|
2601
|
+
var templateObject_1$g;
|
|
2597
2602
|
|
|
2598
|
-
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"])));
|
|
2599
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);
|
|
2600
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) {
|
|
2601
2606
|
var theme = _a.theme;
|
|
@@ -2614,13 +2619,13 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
2614
2619
|
var theme = _a.theme;
|
|
2615
2620
|
return theme.shadows.boxShadow(theme);
|
|
2616
2621
|
});
|
|
2617
|
-
var templateObject_1$
|
|
2622
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$5;
|
|
2618
2623
|
|
|
2619
2624
|
/**
|
|
2620
2625
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2621
2626
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2622
2627
|
**/
|
|
2623
|
-
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) {
|
|
2624
2629
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2625
2630
|
}, function (props) {
|
|
2626
2631
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -2639,7 +2644,7 @@ var MenuItem = function (_a) {
|
|
|
2639
2644
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2640
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));
|
|
2641
2646
|
};
|
|
2642
|
-
var templateObject_1$
|
|
2647
|
+
var templateObject_1$e, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2643
2648
|
|
|
2644
2649
|
var _path$3;
|
|
2645
2650
|
|
|
@@ -2696,16 +2701,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2696
2701
|
})));
|
|
2697
2702
|
};
|
|
2698
2703
|
|
|
2699
|
-
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 }"); });
|
|
2700
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] }))); };
|
|
2701
|
-
var templateObject_1$
|
|
2706
|
+
var templateObject_1$d;
|
|
2702
2707
|
|
|
2703
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
2708
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject([""], [""])));
|
|
2704
2709
|
/**
|
|
2705
2710
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
2706
2711
|
*/
|
|
2707
2712
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2708
|
-
var templateObject_1$
|
|
2713
|
+
var templateObject_1$c;
|
|
2709
2714
|
|
|
2710
2715
|
var getInitials = function (name) {
|
|
2711
2716
|
var names = name.split(" ");
|
|
@@ -2713,7 +2718,7 @@ var getInitials = function (name) {
|
|
|
2713
2718
|
return initials;
|
|
2714
2719
|
};
|
|
2715
2720
|
|
|
2716
|
-
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 }"); });
|
|
2717
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]; });
|
|
2718
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) {
|
|
2719
2724
|
var theme = _a.theme;
|
|
@@ -2742,7 +2747,7 @@ var HelpItem = function (props) {
|
|
|
2742
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"] }))] })] }));
|
|
2743
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 })) }));
|
|
2744
2749
|
};
|
|
2745
|
-
var templateObject_1$
|
|
2750
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
2746
2751
|
|
|
2747
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); }
|
|
2748
2753
|
|
|
@@ -2774,7 +2779,7 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
2774
2779
|
})));
|
|
2775
2780
|
};
|
|
2776
2781
|
|
|
2777
|
-
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) {
|
|
2778
2783
|
var theme = _a.theme;
|
|
2779
2784
|
return theme.space.base * 6;
|
|
2780
2785
|
}, function (_a) {
|
|
@@ -2788,9 +2793,9 @@ var LanguageItem = function (props) {
|
|
|
2788
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 }))] }))); }) }) })] }));
|
|
2789
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] }))] }) })) }));
|
|
2790
2795
|
};
|
|
2791
|
-
var templateObject_1$
|
|
2796
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$5;
|
|
2792
2797
|
|
|
2793
|
-
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) {
|
|
2794
2799
|
var theme = _a.theme;
|
|
2795
2800
|
return theme.space.base * 2;
|
|
2796
2801
|
}, function (_a) {
|
|
@@ -2818,9 +2823,9 @@ var UserContainer = function (props) {
|
|
|
2818
2823
|
var _a;
|
|
2819
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 }))] })] }));
|
|
2820
2825
|
};
|
|
2821
|
-
var templateObject_1$
|
|
2826
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$4;
|
|
2822
2827
|
|
|
2823
|
-
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"])));
|
|
2824
2829
|
var UserMenu = function (props) {
|
|
2825
2830
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
2826
2831
|
var toggleItem = function (item) {
|
|
@@ -2828,9 +2833,9 @@ var UserMenu = function (props) {
|
|
|
2828
2833
|
};
|
|
2829
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" }))] })] }));
|
|
2830
2835
|
};
|
|
2831
|
-
var templateObject_1$
|
|
2836
|
+
var templateObject_1$8;
|
|
2832
2837
|
|
|
2833
|
-
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) {
|
|
2834
2839
|
var theme = _a.theme;
|
|
2835
2840
|
return theme.space.xxl;
|
|
2836
2841
|
}, function (_a) {
|
|
@@ -2868,9 +2873,9 @@ var ProfileModal = function (_a) {
|
|
|
2868
2873
|
};
|
|
2869
2874
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
2870
2875
|
};
|
|
2871
|
-
var templateObject_1$
|
|
2876
|
+
var templateObject_1$7, templateObject_2$5;
|
|
2872
2877
|
|
|
2873
|
-
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) {
|
|
2874
2879
|
var theme = _a.theme;
|
|
2875
2880
|
return theme.palette.green[700];
|
|
2876
2881
|
});
|
|
@@ -2910,9 +2915,9 @@ var Stepper = function (props) {
|
|
|
2910
2915
|
Stepper.Step = UgStep;
|
|
2911
2916
|
Stepper.Label = UgLabel;
|
|
2912
2917
|
Stepper.Content = UgContent;
|
|
2913
|
-
var templateObject_1$
|
|
2918
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
2914
2919
|
|
|
2915
|
-
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) {
|
|
2916
2921
|
var theme = _a.theme;
|
|
2917
2922
|
return theme.palette.grey[300];
|
|
2918
2923
|
}, function (_a) {
|
|
@@ -2947,9 +2952,9 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
2947
2952
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
2948
2953
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
2949
2954
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
2950
|
-
var templateObject_1$
|
|
2955
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
2951
2956
|
|
|
2952
|
-
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"])));
|
|
2953
2958
|
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
2954
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);
|
|
2955
2960
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
@@ -2980,7 +2985,7 @@ var GroupedTable = function (_a) {
|
|
|
2980
2985
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
2981
2986
|
}) })] })));
|
|
2982
2987
|
};
|
|
2983
|
-
var templateObject_1$
|
|
2988
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
2984
2989
|
|
|
2985
2990
|
/**
|
|
2986
2991
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -3000,7 +3005,7 @@ Tiles.Icon = reactForms.Tiles.Icon;
|
|
|
3000
3005
|
Tiles.Label = reactForms.Tiles.Label;
|
|
3001
3006
|
Tiles.Tile = reactForms.Tiles.Tile;
|
|
3002
3007
|
|
|
3003
|
-
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$
|
|
3008
|
+
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
3004
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"])));
|
|
3005
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) {
|
|
3006
3011
|
var theme = _a.theme;
|
|
@@ -3022,8 +3027,12 @@ var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(t
|
|
|
3022
3027
|
var Timeline = function (props) { return jsxRuntime.jsx(UgTimeline, __assign({}, props)); };
|
|
3023
3028
|
Timeline.Item = UgTimelineItem;
|
|
3024
3029
|
Timeline.Content = UgTimelineContent;
|
|
3025
|
-
var templateObject_1$
|
|
3030
|
+
var templateObject_1$3, templateObject_2$1, templateObject_3;
|
|
3026
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
|
+
});
|
|
3027
3036
|
/**
|
|
3028
3037
|
* A Tooltip modal provides contextual information about a paired element. It either opens automatically or through user action.
|
|
3029
3038
|
* <hr>
|
|
@@ -3031,12 +3040,13 @@ var templateObject_1$2, templateObject_2$1, templateObject_3;
|
|
|
3031
3040
|
- To enable user action within a tooltip
|
|
3032
3041
|
- To provide a focus loop when actions need to be inside a tooltip
|
|
3033
3042
|
*/
|
|
3034
|
-
var TooltipModal = function (props) { return jsxRuntime.jsx(
|
|
3035
|
-
TooltipModal.Title =
|
|
3036
|
-
TooltipModal.Body =
|
|
3037
|
-
TooltipModal.Close =
|
|
3038
|
-
TooltipModal.Footer =
|
|
3039
|
-
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;
|
|
3040
3050
|
|
|
3041
3051
|
/**
|
|
3042
3052
|
* A Trigger is a wrapper for input elements
|