@appquality/unguess-design-system 2.10.49 → 2.10.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/dependabot.yml +11 -0
- package/CHANGELOG.md +8 -2
- package/build/index.js +157 -139
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# To get started with Dependabot version updates, you'll need to specify which
|
|
2
|
+
# package ecosystems to update and where the package manifests are located.
|
|
3
|
+
# Please see the documentation for all configuration options:
|
|
4
|
+
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
|
5
|
+
|
|
6
|
+
version: 2
|
|
7
|
+
updates:
|
|
8
|
+
- package-ecosystem: "yarn"
|
|
9
|
+
directory: "/" # Location of package manifests
|
|
10
|
+
schedule:
|
|
11
|
+
interval: "daily"
|
package/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
# v2.10.49 (Mon Jun
|
|
1
|
+
# v2.10.49 (Mon Jun 20 2022)
|
|
2
2
|
|
|
3
3
|
#### 🐛 Bug Fix
|
|
4
4
|
|
|
5
|
+
- Cup 634 mobile [#71](https://github.com/AppQuality/unguess-design-system/pull/71) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
|
|
5
6
|
- Cup 634 mobile view [#68](https://github.com/AppQuality/unguess-design-system/pull/68) ([@marcbon](https://github.com/marcbon))
|
|
6
7
|
|
|
7
|
-
####
|
|
8
|
+
#### ⚠️ Pushed to `master`
|
|
9
|
+
|
|
10
|
+
- chore(repo): Add dependabot.yml ([@cannarocks](https://github.com/cannarocks))
|
|
8
11
|
|
|
12
|
+
#### Authors: 2
|
|
13
|
+
|
|
14
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
9
15
|
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
16
|
|
|
11
17
|
---
|
package/build/index.js
CHANGED
|
@@ -243,8 +243,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
243
243
|
|
|
244
244
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400], 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 }) });
|
|
245
245
|
|
|
246
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
247
|
-
var templateObject_1$
|
|
246
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$17 || (templateObject_1$17 = __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);
|
|
247
|
+
var templateObject_1$17;
|
|
248
248
|
|
|
249
249
|
/**
|
|
250
250
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -259,7 +259,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
259
259
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
260
260
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
261
261
|
|
|
262
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
262
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
263
263
|
var theme = _a.theme;
|
|
264
264
|
return theme.palette.grey[700];
|
|
265
265
|
}, function (_a) {
|
|
@@ -280,9 +280,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
280
280
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
281
281
|
Alert.Title = UgAlertTitle;
|
|
282
282
|
Alert.Close = reactNotifications.Close;
|
|
283
|
-
var templateObject_1$
|
|
283
|
+
var templateObject_1$16, templateObject_2$q;
|
|
284
284
|
|
|
285
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
285
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
286
286
|
return props.avatarType &&
|
|
287
287
|
props.avatarType !== "image" &&
|
|
288
288
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -306,7 +306,7 @@ var Avatar = function (props) {
|
|
|
306
306
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
307
307
|
};
|
|
308
308
|
Avatar.Text = UgAvatar.Text;
|
|
309
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$15;
|
|
310
310
|
|
|
311
311
|
/**
|
|
312
312
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -337,7 +337,7 @@ var getThemeStyle = function (props) {
|
|
|
337
337
|
}
|
|
338
338
|
return theme;
|
|
339
339
|
};
|
|
340
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
340
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject([""], [""])));
|
|
341
341
|
/**
|
|
342
342
|
* Buttons let users take action quickly.
|
|
343
343
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -355,7 +355,7 @@ var Button = function (props) {
|
|
|
355
355
|
};
|
|
356
356
|
Button.StartIcon = UgButton.StartIcon;
|
|
357
357
|
Button.EndIcon = UgButton.EndIcon;
|
|
358
|
-
var templateObject_1$
|
|
358
|
+
var templateObject_1$14;
|
|
359
359
|
|
|
360
360
|
/**
|
|
361
361
|
A Button group lets users make a selection from a set of options.
|
|
@@ -385,7 +385,7 @@ Used for this:
|
|
|
385
385
|
**/
|
|
386
386
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
387
387
|
|
|
388
|
-
var
|
|
388
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
389
389
|
var theme = _a.theme;
|
|
390
390
|
return theme.borderRadii.lg;
|
|
391
391
|
}, function (_a) {
|
|
@@ -405,8 +405,8 @@ var UgContentCard$1 = styled__default["default"](reactNotifications.Well)(templa
|
|
|
405
405
|
* Used for this:
|
|
406
406
|
- To group related content
|
|
407
407
|
*/
|
|
408
|
-
var Card = function (props) { return jsxRuntime.jsx(
|
|
409
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
408
|
+
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
409
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
410
410
|
var theme = _a.theme;
|
|
411
411
|
return theme.borderRadii.xl;
|
|
412
412
|
}, function (_a) {
|
|
@@ -415,9 +415,15 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
415
415
|
}, function (_a) {
|
|
416
416
|
var theme = _a.theme;
|
|
417
417
|
return theme.palette.grey["200"];
|
|
418
|
+
}, function (_a) {
|
|
419
|
+
var theme = _a.theme;
|
|
420
|
+
return theme.breakpoints.sm;
|
|
421
|
+
}, function (_a) {
|
|
422
|
+
var theme = _a.theme;
|
|
423
|
+
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
418
424
|
});
|
|
419
425
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
420
|
-
var templateObject_1$
|
|
426
|
+
var templateObject_1$13, templateObject_2$p;
|
|
421
427
|
|
|
422
428
|
/**
|
|
423
429
|
* Tags let users categorize content using a keyword.
|
|
@@ -632,7 +638,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
632
638
|
})));
|
|
633
639
|
};
|
|
634
640
|
|
|
635
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
641
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
636
642
|
return props.isLight ?
|
|
637
643
|
"\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 ");
|
|
638
644
|
});
|
|
@@ -650,22 +656,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
650
656
|
- To communicate a typing status, use Inline instead
|
|
651
657
|
*/
|
|
652
658
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
653
|
-
var templateObject_1$
|
|
659
|
+
var templateObject_1$12;
|
|
654
660
|
|
|
655
|
-
var CardMeta = styled__default["default"].div(templateObject_1
|
|
661
|
+
var CardMeta = styled__default["default"].div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
656
662
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
657
663
|
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 ");
|
|
658
664
|
});
|
|
659
|
-
var templateObject_1
|
|
665
|
+
var templateObject_1$11;
|
|
660
666
|
|
|
661
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
667
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
662
668
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
663
669
|
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 ");
|
|
664
670
|
});
|
|
665
671
|
CardThumbnail.defaultProps = {
|
|
666
672
|
align: "left"
|
|
667
673
|
};
|
|
668
|
-
var templateObject_1$
|
|
674
|
+
var templateObject_1$10;
|
|
669
675
|
|
|
670
676
|
/**
|
|
671
677
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -677,7 +683,7 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
677
683
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
678
684
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
679
685
|
|
|
680
|
-
var Label$1 = styled__default["default"](SM)(templateObject_1
|
|
686
|
+
var Label$1 = styled__default["default"](SM)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
681
687
|
var theme = _a.theme;
|
|
682
688
|
return theme.palette.grey[500];
|
|
683
689
|
});
|
|
@@ -706,9 +712,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign(
|
|
|
706
712
|
CardHeader.Label = Label$1;
|
|
707
713
|
CardHeader.Title = Title$1;
|
|
708
714
|
CardHeader.Text = Description$1;
|
|
709
|
-
var templateObject_1
|
|
715
|
+
var templateObject_1$$, templateObject_2$o, templateObject_3$g, templateObject_4$a;
|
|
710
716
|
|
|
711
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
717
|
+
var Divider = styled__default["default"].div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
712
718
|
var theme = _a.theme;
|
|
713
719
|
return theme.space.base * 3;
|
|
714
720
|
}, function (_a) {
|
|
@@ -724,9 +730,9 @@ var Container = styled__default["default"].div(templateObject_3$f || (templateOb
|
|
|
724
730
|
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 ");
|
|
725
731
|
});
|
|
726
732
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$1, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
727
|
-
var templateObject_1$
|
|
733
|
+
var templateObject_1$_, templateObject_2$n, templateObject_3$f;
|
|
728
734
|
|
|
729
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
735
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
|
|
730
736
|
var theme = _a.theme;
|
|
731
737
|
return theme.borderRadii.lg;
|
|
732
738
|
}, function (_a) {
|
|
@@ -752,7 +758,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
752
758
|
SpecialCard.Thumb = CardThumbnail;
|
|
753
759
|
SpecialCard.Header = CardHeader;
|
|
754
760
|
SpecialCard.Footer = CardFooter;
|
|
755
|
-
var templateObject_1$
|
|
761
|
+
var templateObject_1$Z;
|
|
756
762
|
|
|
757
763
|
var CampaignCardSkeleton = function () {
|
|
758
764
|
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%" } })] })] }));
|
|
@@ -785,7 +791,7 @@ var getTypeDataIcon = function (type) {
|
|
|
785
791
|
return SvgCampaignFunctional;
|
|
786
792
|
}
|
|
787
793
|
};
|
|
788
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
794
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
789
795
|
var theme = _a.theme;
|
|
790
796
|
return theme.palette.grey["700"];
|
|
791
797
|
});
|
|
@@ -812,9 +818,9 @@ var CampaignCard = function (_a) {
|
|
|
812
818
|
var PillIcon = getTypeDataIcon(type);
|
|
813
819
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$1, { 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, {})] })] })));
|
|
814
820
|
};
|
|
815
|
-
var templateObject_1$
|
|
821
|
+
var templateObject_1$Y, templateObject_2$m, templateObject_3$e;
|
|
816
822
|
|
|
817
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
823
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$X || (templateObject_1$X = __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) {
|
|
818
824
|
var theme = _a.theme;
|
|
819
825
|
return theme.space.base * 6;
|
|
820
826
|
}, function (_a) {
|
|
@@ -831,9 +837,9 @@ var ProductCard = function (props) {
|
|
|
831
837
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
832
838
|
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 })) }))] })));
|
|
833
839
|
};
|
|
834
|
-
var templateObject_1$
|
|
840
|
+
var templateObject_1$X;
|
|
835
841
|
|
|
836
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
842
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
837
843
|
var theme = _a.theme;
|
|
838
844
|
return theme.palette.grey[500];
|
|
839
845
|
}, function (_a) {
|
|
@@ -858,7 +864,7 @@ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$d || (templat
|
|
|
858
864
|
return theme.space.xs;
|
|
859
865
|
});
|
|
860
866
|
var CardContent = styled__default["default"].div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
861
|
-
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$
|
|
867
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
862
868
|
var theme = _a.theme;
|
|
863
869
|
return theme.space.base;
|
|
864
870
|
}, function (_a) {
|
|
@@ -876,24 +882,24 @@ var HoverBody = styled__default["default"].div(templateObject_6$1 || (templateOb
|
|
|
876
882
|
return theme.palette.white;
|
|
877
883
|
});
|
|
878
884
|
var HoverMetaContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
879
|
-
var StyledCard = styled__default["default"](SpecialCard)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
885
|
+
var StyledCard$1 = styled__default["default"](SpecialCard)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
880
886
|
var isHoverable = _a.isHoverable;
|
|
881
887
|
return isHoverable &&
|
|
882
888
|
"\n &:hover {\n ".concat(HoverBody, " {\n top: 0;\n transition: all 0.3s ease-in-out;\n }\n\n ").concat(CardContent, " {\n opacity: 0;\n transition: all 0.3s ease-in-out;\n }\n }\n ");
|
|
883
889
|
});
|
|
884
890
|
var ServiceCard = function (props) {
|
|
885
891
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
886
|
-
return (jsxRuntime.jsxs(StyledCard, __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)); }) })))] })] })));
|
|
892
|
+
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)); }) })))] })] })));
|
|
887
893
|
};
|
|
888
|
-
var templateObject_1$
|
|
894
|
+
var templateObject_1$W, templateObject_2$l, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
|
|
889
895
|
|
|
890
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
896
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
891
897
|
var InfoCard = function (props) {
|
|
892
898
|
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; }) }) })))] })));
|
|
893
899
|
};
|
|
894
|
-
var templateObject_1$
|
|
900
|
+
var templateObject_1$V;
|
|
895
901
|
|
|
896
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
902
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$U || (templateObject_1$U = __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) {
|
|
897
903
|
var theme = _a.theme;
|
|
898
904
|
return theme.space.xl;
|
|
899
905
|
}, function (_a) {
|
|
@@ -904,7 +910,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
904
910
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
905
911
|
*/
|
|
906
912
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
907
|
-
var templateObject_1$
|
|
913
|
+
var templateObject_1$U;
|
|
908
914
|
|
|
909
915
|
/**
|
|
910
916
|
* Use Span to style and format inline text elements.
|
|
@@ -944,7 +950,7 @@ function useWindowSize() {
|
|
|
944
950
|
return size;
|
|
945
951
|
}
|
|
946
952
|
|
|
947
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
953
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
948
954
|
var StyledTag = styled__default["default"](Tag)(templateObject_2$k || (templateObject_2$k = __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) {
|
|
949
955
|
var status = _a.status, theme = _a.theme;
|
|
950
956
|
switch (status) {
|
|
@@ -979,9 +985,9 @@ var Counter = function (props) {
|
|
|
979
985
|
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() })] })));
|
|
980
986
|
};
|
|
981
987
|
Counter.Avatar = StyledTag.Avatar;
|
|
982
|
-
var templateObject_1$
|
|
988
|
+
var templateObject_1$T, templateObject_2$k;
|
|
983
989
|
|
|
984
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
990
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
985
991
|
var theme = _a.theme;
|
|
986
992
|
return theme.breakpoints.sm;
|
|
987
993
|
});
|
|
@@ -998,22 +1004,22 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
998
1004
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
999
1005
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1000
1006
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1001
|
-
var templateObject_1$
|
|
1007
|
+
var templateObject_1$S;
|
|
1002
1008
|
|
|
1003
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1004
|
-
var templateObject_1$
|
|
1009
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1010
|
+
var templateObject_1$R;
|
|
1005
1011
|
|
|
1006
1012
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1007
1013
|
__proto__: null,
|
|
1008
1014
|
Field: Field$1
|
|
1009
1015
|
});
|
|
1010
1016
|
|
|
1011
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1017
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"], ["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
1012
1018
|
var theme = _a.theme;
|
|
1013
1019
|
return theme.palette.blue[100];
|
|
1014
1020
|
});
|
|
1015
1021
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1016
|
-
var templateObject_1$
|
|
1022
|
+
var templateObject_1$Q;
|
|
1017
1023
|
|
|
1018
1024
|
/**
|
|
1019
1025
|
* A Menu is a wrapper for items elements
|
|
@@ -1037,7 +1043,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1037
1043
|
*/
|
|
1038
1044
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1039
1045
|
|
|
1040
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1046
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1041
1047
|
return props.isPrimary &&
|
|
1042
1048
|
"\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 ");
|
|
1043
1049
|
});
|
|
@@ -1054,7 +1060,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1054
1060
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1055
1061
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1056
1062
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1057
|
-
var templateObject_1$
|
|
1063
|
+
var templateObject_1$P;
|
|
1058
1064
|
|
|
1059
1065
|
/**
|
|
1060
1066
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1069,7 +1075,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1069
1075
|
|
|
1070
1076
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1071
1077
|
|
|
1072
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1078
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1073
1079
|
/**
|
|
1074
1080
|
* A Checkbox lets users select and unselect options from a list.
|
|
1075
1081
|
* <hr>
|
|
@@ -1081,17 +1087,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1081
1087
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1082
1088
|
**/
|
|
1083
1089
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1084
|
-
var templateObject_1$
|
|
1090
|
+
var templateObject_1$O;
|
|
1085
1091
|
|
|
1086
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1092
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1087
1093
|
/**
|
|
1088
1094
|
* A Label is used to specify a title for an input.
|
|
1089
1095
|
* <hr>
|
|
1090
1096
|
**/
|
|
1091
1097
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1092
|
-
var templateObject_1$
|
|
1098
|
+
var templateObject_1$N;
|
|
1093
1099
|
|
|
1094
|
-
var flexCenter = styled.css(templateObject_1$
|
|
1100
|
+
var flexCenter = styled.css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1095
1101
|
var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1096
1102
|
var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __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) {
|
|
1097
1103
|
var theme = _a.theme;
|
|
@@ -1110,9 +1116,9 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
|
|
|
1110
1116
|
var theme = _a.theme;
|
|
1111
1117
|
return theme.shadows.boxShadow(theme);
|
|
1112
1118
|
});
|
|
1113
|
-
var templateObject_1$
|
|
1119
|
+
var templateObject_1$M, templateObject_2$j, templateObject_3$c, templateObject_4$8;
|
|
1114
1120
|
|
|
1115
|
-
styled__default["default"](Card)(templateObject_1$
|
|
1121
|
+
styled__default["default"](Card)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"], ["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"])), cardStyle, function (_a) {
|
|
1116
1122
|
var theme = _a.theme;
|
|
1117
1123
|
return theme.palette.blue[300];
|
|
1118
1124
|
});
|
|
@@ -1140,14 +1146,14 @@ var CheckboxCard = function (props) {
|
|
|
1140
1146
|
};
|
|
1141
1147
|
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, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1142
1148
|
};
|
|
1143
|
-
var templateObject_1$
|
|
1149
|
+
var templateObject_1$L, templateObject_2$i, templateObject_3$b, templateObject_4$7;
|
|
1144
1150
|
|
|
1145
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1151
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1146
1152
|
/**
|
|
1147
1153
|
* A Field is a wrapper for input elements
|
|
1148
1154
|
**/
|
|
1149
1155
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1150
|
-
var templateObject_1$
|
|
1156
|
+
var templateObject_1$K;
|
|
1151
1157
|
|
|
1152
1158
|
var index = /*#__PURE__*/Object.freeze({
|
|
1153
1159
|
__proto__: null,
|
|
@@ -1155,7 +1161,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1155
1161
|
Hint: reactForms.Hint
|
|
1156
1162
|
});
|
|
1157
1163
|
|
|
1158
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1164
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1159
1165
|
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject([""], [""])));
|
|
1160
1166
|
/**
|
|
1161
1167
|
* An Input lets users enter text into a field.
|
|
@@ -1165,9 +1171,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (te
|
|
|
1165
1171
|
* - To enter multiline text, use a Textarea
|
|
1166
1172
|
**/
|
|
1167
1173
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1168
|
-
var templateObject_1$
|
|
1174
|
+
var templateObject_1$J, templateObject_2$h;
|
|
1169
1175
|
|
|
1170
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1176
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1171
1177
|
/**
|
|
1172
1178
|
* Media elements add even more context to an input.
|
|
1173
1179
|
* <hr>
|
|
@@ -1176,9 +1182,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1176
1182
|
* - To enter multiline text, use a Textarea
|
|
1177
1183
|
**/
|
|
1178
1184
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1179
|
-
var templateObject_1$
|
|
1185
|
+
var templateObject_1$I;
|
|
1180
1186
|
|
|
1181
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1187
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1182
1188
|
/**
|
|
1183
1189
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1184
1190
|
* <hr>
|
|
@@ -1190,7 +1196,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$F ||
|
|
|
1190
1196
|
* - To select from a long list of options, use Select instead
|
|
1191
1197
|
**/
|
|
1192
1198
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1193
|
-
var templateObject_1$
|
|
1199
|
+
var templateObject_1$H;
|
|
1194
1200
|
|
|
1195
1201
|
var _path$i;
|
|
1196
1202
|
|
|
@@ -1210,7 +1216,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1210
1216
|
})));
|
|
1211
1217
|
};
|
|
1212
1218
|
|
|
1213
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1219
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$G || (templateObject_1$G = __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) {
|
|
1214
1220
|
var theme = _a.theme;
|
|
1215
1221
|
return theme.space.base;
|
|
1216
1222
|
}, function (_a) {
|
|
@@ -1244,9 +1250,9 @@ var RadioCard = function (_a) {
|
|
|
1244
1250
|
props.onChecked && props.onChecked(props.value);
|
|
1245
1251
|
} }, { 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 })) }))] })));
|
|
1246
1252
|
};
|
|
1247
|
-
var templateObject_1$
|
|
1253
|
+
var templateObject_1$G, templateObject_2$g;
|
|
1248
1254
|
|
|
1249
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1255
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1250
1256
|
/**
|
|
1251
1257
|
* A Textarea is a form control for multi-line text.
|
|
1252
1258
|
* <hr>
|
|
@@ -1254,9 +1260,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1254
1260
|
* - To enter multi-line text
|
|
1255
1261
|
**/
|
|
1256
1262
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1257
|
-
var templateObject_1$
|
|
1263
|
+
var templateObject_1$F;
|
|
1258
1264
|
|
|
1259
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1265
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1260
1266
|
/**
|
|
1261
1267
|
* 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.
|
|
1262
1268
|
* <hr>
|
|
@@ -1267,9 +1273,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$C
|
|
|
1267
1273
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1268
1274
|
**/
|
|
1269
1275
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1270
|
-
var templateObject_1$
|
|
1276
|
+
var templateObject_1$E;
|
|
1271
1277
|
|
|
1272
|
-
var Col =
|
|
1278
|
+
var StyledCol = styled__default["default"](reactGrid.Col)(templateObject_1$D || (templateObject_1$D = __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);
|
|
1279
|
+
var Col = function (props) { return jsxRuntime.jsx(StyledCol, __assign({}, props)); };
|
|
1280
|
+
var templateObject_1$D;
|
|
1273
1281
|
|
|
1274
1282
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1275
1283
|
|
|
@@ -1332,15 +1340,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1332
1340
|
})));
|
|
1333
1341
|
};
|
|
1334
1342
|
|
|
1335
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1343
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1336
1344
|
var Icon = function (props) {
|
|
1337
1345
|
var type = props.type, size = props.size;
|
|
1338
1346
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1339
1347
|
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 })] }));
|
|
1340
1348
|
};
|
|
1341
|
-
var templateObject_1$
|
|
1349
|
+
var templateObject_1$C;
|
|
1342
1350
|
|
|
1343
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1351
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
|
|
1344
1352
|
/**
|
|
1345
1353
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1346
1354
|
* <hr>
|
|
@@ -1352,9 +1360,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1352
1360
|
- When loading page content, use a Skeleton loader instead
|
|
1353
1361
|
*/
|
|
1354
1362
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1355
|
-
var templateObject_1$
|
|
1363
|
+
var templateObject_1$B;
|
|
1356
1364
|
|
|
1357
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1365
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
|
|
1358
1366
|
/**
|
|
1359
1367
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1360
1368
|
* <hr>
|
|
@@ -1363,9 +1371,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1363
1371
|
- To provide a quick way to navigate to ancestor pages
|
|
1364
1372
|
*/
|
|
1365
1373
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1366
|
-
var templateObject_1$
|
|
1374
|
+
var templateObject_1$A;
|
|
1367
1375
|
|
|
1368
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1376
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1369
1377
|
var theme = _a.theme;
|
|
1370
1378
|
return theme.palette.white;
|
|
1371
1379
|
});
|
|
@@ -1373,7 +1381,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$y ||
|
|
|
1373
1381
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1374
1382
|
*/
|
|
1375
1383
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1376
|
-
var templateObject_1$
|
|
1384
|
+
var templateObject_1$z;
|
|
1377
1385
|
|
|
1378
1386
|
/**
|
|
1379
1387
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1397,7 +1405,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1397
1405
|
})));
|
|
1398
1406
|
};
|
|
1399
1407
|
|
|
1400
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1408
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1401
1409
|
var theme = _a.theme;
|
|
1402
1410
|
return theme.fonts.system;
|
|
1403
1411
|
});
|
|
@@ -1406,14 +1414,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$f ||
|
|
|
1406
1414
|
return theme.fonts.system;
|
|
1407
1415
|
});
|
|
1408
1416
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1409
|
-
var templateObject_1$
|
|
1417
|
+
var templateObject_1$y, templateObject_2$f;
|
|
1410
1418
|
|
|
1411
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1419
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1412
1420
|
var theme = _a.theme;
|
|
1413
1421
|
return theme.fonts.system;
|
|
1414
1422
|
});
|
|
1415
1423
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1416
|
-
var templateObject_1$
|
|
1424
|
+
var templateObject_1$x;
|
|
1417
1425
|
|
|
1418
1426
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1419
1427
|
|
|
@@ -1462,7 +1470,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1462
1470
|
})));
|
|
1463
1471
|
};
|
|
1464
1472
|
|
|
1465
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1473
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1466
1474
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1467
1475
|
return isCompact &&
|
|
1468
1476
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1478,11 +1486,11 @@ var WorkspacesDropdown = function (props) {
|
|
|
1478
1486
|
? selectedWorkspace.company + "'s workspace"
|
|
1479
1487
|
: "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 }))); })] })] })));
|
|
1480
1488
|
};
|
|
1481
|
-
var templateObject_1$
|
|
1489
|
+
var templateObject_1$w;
|
|
1482
1490
|
|
|
1483
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1491
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$v || (templateObject_1$v = __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) {
|
|
1484
1492
|
var theme = _a.theme;
|
|
1485
|
-
return theme.breakpoints.
|
|
1493
|
+
return theme.breakpoints.md;
|
|
1486
1494
|
});
|
|
1487
1495
|
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1488
1496
|
var theme = _a.theme;
|
|
@@ -1492,7 +1500,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1492
1500
|
return theme.fonts.system;
|
|
1493
1501
|
}, function (_a) {
|
|
1494
1502
|
var theme = _a.theme;
|
|
1495
|
-
return theme.breakpoints.
|
|
1503
|
+
return theme.breakpoints.md;
|
|
1496
1504
|
});
|
|
1497
1505
|
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1498
1506
|
var theme = _a.theme;
|
|
@@ -1502,21 +1510,21 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
|
|
|
1502
1510
|
return theme.fonts.system;
|
|
1503
1511
|
}, function (_a) {
|
|
1504
1512
|
var theme = _a.theme;
|
|
1505
|
-
return theme.breakpoints.
|
|
1513
|
+
return theme.breakpoints.md;
|
|
1506
1514
|
});
|
|
1507
1515
|
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1508
1516
|
var theme = _a.theme;
|
|
1509
1517
|
return theme.palette.blue["600"];
|
|
1510
1518
|
}, function (_a) {
|
|
1511
1519
|
var theme = _a.theme;
|
|
1512
|
-
return theme.breakpoints.
|
|
1520
|
+
return theme.breakpoints.md;
|
|
1513
1521
|
});
|
|
1514
1522
|
var BrandItem = function (props) {
|
|
1515
1523
|
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 }) }))) }))] }));
|
|
1516
1524
|
};
|
|
1517
|
-
var templateObject_1$
|
|
1525
|
+
var templateObject_1$v, templateObject_2$e, templateObject_3$a, templateObject_4$6;
|
|
1518
1526
|
|
|
1519
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1527
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1520
1528
|
/**
|
|
1521
1529
|
* An Header is a visual way to display general information.
|
|
1522
1530
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1525,13 +1533,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1525
1533
|
Header.HeaderItem = HeaderItem;
|
|
1526
1534
|
Header.HeaderItemText = HeaderItemText;
|
|
1527
1535
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1528
|
-
var templateObject_1$
|
|
1536
|
+
var templateObject_1$u;
|
|
1529
1537
|
|
|
1530
1538
|
var HeaderSkeleton = function () {
|
|
1531
1539
|
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%" } }) }) }) }))] })));
|
|
1532
1540
|
};
|
|
1533
1541
|
|
|
1534
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1542
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1535
1543
|
var theme = _a.theme;
|
|
1536
1544
|
return theme.breakpoints.sm;
|
|
1537
1545
|
});
|
|
@@ -1543,9 +1551,9 @@ var AppHeader = function (_a) {
|
|
|
1543
1551
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1544
1552
|
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, {}) }))] }) }) }))] })));
|
|
1545
1553
|
};
|
|
1546
|
-
var templateObject_1$
|
|
1554
|
+
var templateObject_1$t;
|
|
1547
1555
|
|
|
1548
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1556
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$s || (templateObject_1$s = __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) {
|
|
1549
1557
|
var theme = _a.theme;
|
|
1550
1558
|
return theme.borders.sm;
|
|
1551
1559
|
}, function (_a) {
|
|
@@ -1572,9 +1580,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$r || (t
|
|
|
1572
1580
|
- To give a consistent dashboard and navigation experience
|
|
1573
1581
|
*/
|
|
1574
1582
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1575
|
-
var templateObject_1$
|
|
1583
|
+
var templateObject_1$s;
|
|
1576
1584
|
|
|
1577
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1585
|
+
var SelectedItemStyle = styled.css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1578
1586
|
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$d || (templateObject_2$d = __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) {
|
|
1579
1587
|
var theme = _a.theme;
|
|
1580
1588
|
return theme.fonts.system;
|
|
@@ -1586,11 +1594,11 @@ var NavItem = function (props) {
|
|
|
1586
1594
|
// const { isExpanded } = props;
|
|
1587
1595
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1588
1596
|
};
|
|
1589
|
-
var templateObject_1$
|
|
1597
|
+
var templateObject_1$r, templateObject_2$d;
|
|
1590
1598
|
|
|
1591
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1599
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject([""], [""])));
|
|
1592
1600
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1593
|
-
var templateObject_1$
|
|
1601
|
+
var templateObject_1$q;
|
|
1594
1602
|
|
|
1595
1603
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1596
1604
|
|
|
@@ -1628,7 +1636,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
1628
1636
|
})));
|
|
1629
1637
|
};
|
|
1630
1638
|
|
|
1631
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
1639
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$p || (templateObject_1$p = __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) {
|
|
1632
1640
|
var theme = _a.theme;
|
|
1633
1641
|
return theme.space.base * 6;
|
|
1634
1642
|
}, function (_a) {
|
|
@@ -1653,18 +1661,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$o ||
|
|
|
1653
1661
|
var NavToggle = function (props) {
|
|
1654
1662
|
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%" } })) })));
|
|
1655
1663
|
};
|
|
1656
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$p;
|
|
1657
1665
|
|
|
1658
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
1666
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$o || (templateObject_1$o = __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;"; });
|
|
1659
1667
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1660
|
-
var templateObject_1$
|
|
1668
|
+
var templateObject_1$o;
|
|
1661
1669
|
|
|
1662
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1670
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$n || (templateObject_1$n = __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; });
|
|
1663
1671
|
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
1664
1672
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1665
1673
|
NavItemProject.Title = NavItemText;
|
|
1666
1674
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1667
|
-
var templateObject_1$
|
|
1675
|
+
var templateObject_1$n, templateObject_2$c;
|
|
1668
1676
|
|
|
1669
1677
|
var _path$a;
|
|
1670
1678
|
|
|
@@ -1833,7 +1841,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
1833
1841
|
})))));
|
|
1834
1842
|
};
|
|
1835
1843
|
|
|
1836
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
1844
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
1837
1845
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
1838
1846
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
1839
1847
|
});
|
|
@@ -1841,11 +1849,11 @@ var LoadingSidebar = function (props) {
|
|
|
1841
1849
|
var isExpanded = props.isExpanded;
|
|
1842
1850
|
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" })] }))] })));
|
|
1843
1851
|
};
|
|
1844
|
-
var templateObject_1$
|
|
1852
|
+
var templateObject_1$m;
|
|
1845
1853
|
|
|
1846
1854
|
var FEATURE_FLAG_CATALOG = 'catalog-pages';
|
|
1847
1855
|
|
|
1848
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
1856
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
1849
1857
|
var ScrollingContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
1850
1858
|
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$9 || (templateObject_3$9 = __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) {
|
|
1851
1859
|
var isExpanded = _a.isExpanded;
|
|
@@ -1884,9 +1892,9 @@ var Sidebar = function (props) {
|
|
|
1884
1892
|
features.find(function (feature) { return feature.slug === FEATURE_FLAG_CATALOG; }) && (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 &&
|
|
1885
1893
|
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" })] }))] })));
|
|
1886
1894
|
};
|
|
1887
|
-
var templateObject_1$
|
|
1895
|
+
var templateObject_1$l, templateObject_2$b, templateObject_3$9;
|
|
1888
1896
|
|
|
1889
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
1897
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$k || (templateObject_1$k = __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) {
|
|
1890
1898
|
var theme = _a.theme;
|
|
1891
1899
|
return theme.breakpoints.sm;
|
|
1892
1900
|
}, function (_a) {
|
|
@@ -1897,46 +1905,52 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$j ||
|
|
|
1897
1905
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
1898
1906
|
*/
|
|
1899
1907
|
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1900
|
-
var templateObject_1$
|
|
1908
|
+
var templateObject_1$k;
|
|
1901
1909
|
|
|
1902
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
1910
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$j || (templateObject_1$j = __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]);
|
|
1903
1911
|
var PageLoader = function () {
|
|
1904
1912
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
1905
1913
|
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, { 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: "" }) }))] })] })] })] }) })));
|
|
1906
1914
|
};
|
|
1907
|
-
var templateObject_1$
|
|
1915
|
+
var templateObject_1$j;
|
|
1908
1916
|
|
|
1909
1917
|
/**
|
|
1910
1918
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1911
1919
|
*/
|
|
1912
1920
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1913
1921
|
|
|
1922
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$i || (templateObject_1$i = __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);
|
|
1914
1923
|
/**
|
|
1915
1924
|
* Login Form
|
|
1916
1925
|
* <hr>
|
|
1917
1926
|
* Used for this:
|
|
1918
1927
|
- Login user to the application
|
|
1919
1928
|
*/
|
|
1920
|
-
var LoginForm = function (props) {
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1929
|
+
var LoginForm = function (props) {
|
|
1930
|
+
var width = useWindowSize().width;
|
|
1931
|
+
var breakpointMd = parseInt(theme.breakpoints.md, 10);
|
|
1932
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, __assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
|
|
1933
|
+
textAlign: "center",
|
|
1934
|
+
marginTop: theme.space.sm,
|
|
1935
|
+
marginBottom: theme.space.lg,
|
|
1936
|
+
} }, { children: jsxRuntime.jsx(XL, __assign({ style: { color: theme.palette.blue[600] } }, { children: props.title })) })), jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
|
|
1937
|
+
var values = _a.values, status = _a.status, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
|
|
1938
|
+
return (jsxRuntime.jsxs(formik.Form, __assign({ onSubmit: handleSubmit }, { children: [jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, (errors && errors.email
|
|
1939
|
+
? { validation: "error" }
|
|
1940
|
+
: touched.email
|
|
1941
|
+
? { validation: "success" }
|
|
1942
|
+
: ""))), errors.email ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ("")] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, (errors && errors.password
|
|
1943
|
+
? { validation: "error" }
|
|
1944
|
+
: touched.password
|
|
1945
|
+
? { validation: "success" }
|
|
1946
|
+
: ""))), errors.password && (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))), props.passwordForgotLink && (jsxRuntime.jsx(reactForms.Hint, __assign({ style: { textAlign: "right" } }, { children: jsxRuntime.jsx(Anchor, __assign({ href: props.passwordForgotLink, style: { color: theme.palette.grey[500] } }, { children: props.passwordForgotLabel || "Forgot Password?" })) })))] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length
|
|
1937
1947
|
? true
|
|
1938
|
-
:
|
|
1939
|
-
|
|
1948
|
+
: isSubmitting
|
|
1949
|
+
? true
|
|
1950
|
+
: 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 })) })))] })));
|
|
1951
|
+
} }))] })), 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"] })))] }));
|
|
1952
|
+
};
|
|
1953
|
+
var templateObject_1$i;
|
|
1940
1954
|
|
|
1941
1955
|
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1942
1956
|
var theme = _a.theme;
|
|
@@ -1968,14 +1982,14 @@ var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$5 |
|
|
|
1968
1982
|
var theme = _a.theme;
|
|
1969
1983
|
return theme.space.base * 6;
|
|
1970
1984
|
});
|
|
1971
|
-
var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$
|
|
1985
|
+
var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: relative;\n top: unset;\n right: unset;\n"], ["\n position: relative;\n top: unset;\n right: unset;\n"])));
|
|
1972
1986
|
var ModalFullScreen = function (props) { return jsxRuntime.jsx(StyledModal$1, __assign({}, props)); };
|
|
1973
1987
|
ModalFullScreen.Header = StyledHeader;
|
|
1974
1988
|
ModalFullScreen.Body = StyledBody$4;
|
|
1975
1989
|
ModalFullScreen.Footer = StyledFooter;
|
|
1976
1990
|
ModalFullScreen.Close = StyledModalClose;
|
|
1977
1991
|
ModalFullScreen.FooterItem = FooterItem;
|
|
1978
|
-
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5, templateObject_5$
|
|
1992
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5, templateObject_5$3;
|
|
1979
1993
|
|
|
1980
1994
|
/**
|
|
1981
1995
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2159,7 +2173,7 @@ var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$3 |
|
|
|
2159
2173
|
var theme = _a.theme;
|
|
2160
2174
|
return theme.space.base * 4;
|
|
2161
2175
|
});
|
|
2162
|
-
var Footer = styled__default["default"].div(templateObject_5$
|
|
2176
|
+
var Footer = styled__default["default"].div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n margin-top: auto;\n"], ["\n margin-top: auto;\n"])));
|
|
2163
2177
|
var Description = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n justify-content: space-between;\n text-align: left;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"], ["\n ", "\n justify-content: space-between;\n text-align: left;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"])), flexCenter, theme.fontWeights.regular, theme.fontSizes.sm, theme.palette.grey["600"]);
|
|
2164
2178
|
var HelpItem = function (props) {
|
|
2165
2179
|
var _a, _b, _c;
|
|
@@ -2175,7 +2189,7 @@ var HelpItem = function (props) {
|
|
|
2175
2189
|
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"] }))] })] }));
|
|
2176
2190
|
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 })) }));
|
|
2177
2191
|
};
|
|
2178
|
-
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$
|
|
2192
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
2179
2193
|
|
|
2180
2194
|
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); }
|
|
2181
2195
|
|
|
@@ -2325,6 +2339,10 @@ var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(temp
|
|
|
2325
2339
|
var theme = _a.theme;
|
|
2326
2340
|
return theme.palette.grey[600];
|
|
2327
2341
|
});
|
|
2342
|
+
var StyledAccordionHeader = styled__default["default"](Accordion.Header)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n button, svg {\n padding: ", ";\n }\n"], ["\n button, svg {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2343
|
+
var theme = _a.theme;
|
|
2344
|
+
return "".concat(theme.space.xs, " ").concat(theme.space.md);
|
|
2345
|
+
});
|
|
2328
2346
|
/**
|
|
2329
2347
|
* A Stepper guides users through steps of a task in sequential order.
|
|
2330
2348
|
|
|
@@ -2334,12 +2352,12 @@ var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(temp
|
|
|
2334
2352
|
var Stepper = function (props) {
|
|
2335
2353
|
var width = useWindowSize().width;
|
|
2336
2354
|
var smBreakpoint = parseInt(theme.breakpoints.sm);
|
|
2337
|
-
return width <= smBreakpoint ? (jsxRuntime.jsx(Accordion, __assign({ level: 1, isBare: true, isExpandable: true, isAnimated: true }, { children: jsxRuntime.jsxs(Accordion.Section, { children: [jsxRuntime.jsx(
|
|
2355
|
+
return width <= smBreakpoint ? (jsxRuntime.jsx(Accordion, __assign({ level: 1, isBare: true, isExpandable: true, isAnimated: true, isCompact: true }, { children: jsxRuntime.jsxs(Accordion.Section, { children: [jsxRuntime.jsx(StyledAccordionHeader, { children: jsxRuntime.jsx(Accordion.Label, { children: props.accordionTitle }) }), jsxRuntime.jsx(Accordion.Panel, { children: jsxRuntime.jsx(UgStepper, __assign({}, props)) })] }) }))) : (jsxRuntime.jsx(UgStepper, __assign({}, props)));
|
|
2338
2356
|
};
|
|
2339
2357
|
Stepper.Step = UgStep;
|
|
2340
2358
|
Stepper.Label = UgLabel;
|
|
2341
2359
|
Stepper.Content = UgContent;
|
|
2342
|
-
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2;
|
|
2360
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
2343
2361
|
|
|
2344
2362
|
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$4 || (templateObject_1$4 = __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) {
|
|
2345
2363
|
var theme = _a.theme;
|