@appquality/unguess-design-system 2.11.9 → 2.11.12
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 +226 -231
- package/build/stories/forms/input-toggle/_types.d.ts +5 -0
- 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.
|
|
@@ -461,12 +461,12 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
461
461
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
462
462
|
Tag.Close = reactTags.Tag.Close;
|
|
463
463
|
|
|
464
|
-
var _g$5, _path$
|
|
464
|
+
var _g$5, _path$q;
|
|
465
465
|
|
|
466
|
-
function _extends$
|
|
466
|
+
function _extends$v() { _extends$v = 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$v.apply(this, arguments); }
|
|
467
467
|
|
|
468
468
|
var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
|
|
469
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
469
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
|
|
470
470
|
width: 24,
|
|
471
471
|
height: 24,
|
|
472
472
|
viewBox: "0 0 24 24",
|
|
@@ -478,18 +478,18 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
|
|
|
478
478
|
opacity: 0.3,
|
|
479
479
|
d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
|
|
480
480
|
fill: "#003A57"
|
|
481
|
-
}))), _path$
|
|
481
|
+
}))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
|
|
482
482
|
d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
|
|
483
483
|
fill: "#003A57"
|
|
484
484
|
})));
|
|
485
485
|
};
|
|
486
486
|
|
|
487
|
-
var _g$4, _path$
|
|
487
|
+
var _g$4, _path$p, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
|
|
488
488
|
|
|
489
|
-
function _extends$
|
|
489
|
+
function _extends$u() { _extends$u = 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$u.apply(this, arguments); }
|
|
490
490
|
|
|
491
491
|
var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
492
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
492
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
|
|
493
493
|
width: 25,
|
|
494
494
|
height: 24,
|
|
495
495
|
viewBox: "0 0 25 24",
|
|
@@ -500,7 +500,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
500
500
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
501
501
|
d: "M12.1641 24C18.7915 24 24.1641 18.6274 24.1641 12C24.1641 5.37258 18.7915 0 12.1641 0C5.53665 0 0.164062 5.37258 0.164062 12C0.164062 18.6274 5.53665 24 12.1641 24Z",
|
|
502
502
|
fill: "#D3ECDB"
|
|
503
|
-
}))), _path$
|
|
503
|
+
}))), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
|
|
504
504
|
opacity: 0.8,
|
|
505
505
|
d: "M12.653 3.1964C8.84605 3.1964 5.76496 6.27748 5.76496 10.0844C5.76496 10.2596 5.76496 10.4347 5.7904 10.5854C5.46458 11.1861 4.98908 12.0129 4.41279 12.5138C3.98719 12.8896 4.08697 13.2907 4.13687 13.4404C4.26211 13.7662 4.61237 14.0411 5.18866 14.2417C5.38924 14.3171 5.61427 14.367 5.81485 14.4169L5.84028 16.8463C5.84028 17.7983 6.6416 18.625 7.61905 18.625L9.09645 18.1495L9.24713 19.0262C9.34693 19.6025 9.84787 20.0281 10.4496 20.0281C10.5249 20.0281 10.6003 20.0281 10.6746 20.0026L15.3084 19.1769C15.9845 19.0516 16.4101 18.4254 16.3103 17.7494L15.9845 16.1213C18.1634 14.9188 19.541 12.5891 19.541 10.0843C19.541 6.30267 16.4356 3.19629 12.6529 3.19629L12.653 3.1964Z",
|
|
506
506
|
fill: "#70C38A"
|
|
@@ -557,18 +557,18 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
557
557
|
})));
|
|
558
558
|
};
|
|
559
559
|
|
|
560
|
-
var _path$
|
|
560
|
+
var _path$o, _path2$3, _path3$2, _path4$1;
|
|
561
561
|
|
|
562
|
-
function _extends$
|
|
562
|
+
function _extends$t() { _extends$t = 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$t.apply(this, arguments); }
|
|
563
563
|
|
|
564
564
|
var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
|
|
565
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
565
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
|
|
566
566
|
width: 24,
|
|
567
567
|
height: 24,
|
|
568
568
|
viewBox: "0 0 24 24",
|
|
569
569
|
fill: "none",
|
|
570
570
|
xmlns: "http://www.w3.org/2000/svg"
|
|
571
|
-
}, props), _path$
|
|
571
|
+
}, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
|
|
572
572
|
d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
|
|
573
573
|
fill: "#F8F9F9"
|
|
574
574
|
})), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -583,18 +583,18 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
|
|
|
583
583
|
})));
|
|
584
584
|
};
|
|
585
585
|
|
|
586
|
-
var _path$
|
|
586
|
+
var _path$n, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
|
|
587
587
|
|
|
588
|
-
function _extends$
|
|
588
|
+
function _extends$s() { _extends$s = 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$s.apply(this, arguments); }
|
|
589
589
|
|
|
590
590
|
var SvgCampaignProgress = function SvgCampaignProgress(props) {
|
|
591
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
591
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
|
|
592
592
|
width: 24,
|
|
593
593
|
height: 24,
|
|
594
594
|
viewBox: "0 0 24 24",
|
|
595
595
|
fill: "none",
|
|
596
596
|
xmlns: "http://www.w3.org/2000/svg"
|
|
597
|
-
}, props), _path$
|
|
597
|
+
}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
|
|
598
598
|
d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
|
|
599
599
|
fill: "#F8F9F9"
|
|
600
600
|
})), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -630,18 +630,18 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
|
|
|
630
630
|
})));
|
|
631
631
|
};
|
|
632
632
|
|
|
633
|
-
var _path$
|
|
633
|
+
var _path$m, _path2$1, _path3;
|
|
634
634
|
|
|
635
|
-
function _extends$
|
|
635
|
+
function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
|
|
636
636
|
|
|
637
637
|
var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
638
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
638
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
|
|
639
639
|
width: 24,
|
|
640
640
|
height: 24,
|
|
641
641
|
viewBox: "0 0 24 24",
|
|
642
642
|
fill: "none",
|
|
643
643
|
xmlns: "http://www.w3.org/2000/svg"
|
|
644
|
-
}, props), _path$
|
|
644
|
+
}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
|
|
645
645
|
d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
|
|
646
646
|
fill: "#F8F9F9"
|
|
647
647
|
})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -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,37 +1143,37 @@ 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
|
-
var _path$
|
|
1148
|
+
var _path$l;
|
|
1149
1149
|
|
|
1150
|
-
function _extends$
|
|
1150
|
+
function _extends$q() { _extends$q = 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$q.apply(this, arguments); }
|
|
1151
1151
|
|
|
1152
1152
|
var SvgBoldFill = function SvgBoldFill(props) {
|
|
1153
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1153
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
|
|
1154
1154
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1155
1155
|
width: 16,
|
|
1156
1156
|
height: 16,
|
|
1157
1157
|
focusable: "false",
|
|
1158
1158
|
viewBox: "0 0 16 16"
|
|
1159
|
-
}, props), _path$
|
|
1159
|
+
}, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1160
1160
|
fill: "currentColor",
|
|
1161
1161
|
d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
|
|
1162
1162
|
})));
|
|
1163
1163
|
};
|
|
1164
1164
|
|
|
1165
|
-
var _path$
|
|
1165
|
+
var _path$k;
|
|
1166
1166
|
|
|
1167
|
-
function _extends$
|
|
1167
|
+
function _extends$p() { _extends$p = 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$p.apply(this, arguments); }
|
|
1168
1168
|
|
|
1169
1169
|
var SvgItalicFill = function SvgItalicFill(props) {
|
|
1170
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1170
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
|
|
1171
1171
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1172
1172
|
width: 16,
|
|
1173
1173
|
height: 16,
|
|
1174
1174
|
focusable: "false",
|
|
1175
1175
|
viewBox: "0 0 16 16"
|
|
1176
|
-
}, props), _path$
|
|
1176
|
+
}, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1177
1177
|
fill: "none",
|
|
1178
1178
|
stroke: "currentColor",
|
|
1179
1179
|
strokeLinecap: "round",
|
|
@@ -1182,18 +1182,18 @@ var SvgItalicFill = function SvgItalicFill(props) {
|
|
|
1182
1182
|
})));
|
|
1183
1183
|
};
|
|
1184
1184
|
|
|
1185
|
-
var _path$
|
|
1185
|
+
var _path$j, _path2;
|
|
1186
1186
|
|
|
1187
|
-
function _extends$
|
|
1187
|
+
function _extends$o() { _extends$o = 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$o.apply(this, arguments); }
|
|
1188
1188
|
|
|
1189
1189
|
var SvgQuoteFill = function SvgQuoteFill(props) {
|
|
1190
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1190
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
|
|
1191
1191
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1192
1192
|
width: 16,
|
|
1193
1193
|
height: 16,
|
|
1194
1194
|
focusable: "false",
|
|
1195
1195
|
viewBox: "0 0 16 16"
|
|
1196
|
-
}, props), _path$
|
|
1196
|
+
}, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1197
1197
|
fill: "currentColor",
|
|
1198
1198
|
d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
|
|
1199
1199
|
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -1207,10 +1207,10 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
|
|
|
1207
1207
|
|
|
1208
1208
|
var _g$3;
|
|
1209
1209
|
|
|
1210
|
-
function _extends$
|
|
1210
|
+
function _extends$n() { _extends$n = 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$n.apply(this, arguments); }
|
|
1211
1211
|
|
|
1212
1212
|
var SvgH1Fill = function SvgH1Fill(props) {
|
|
1213
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1213
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
|
|
1214
1214
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1215
1215
|
width: 16,
|
|
1216
1216
|
height: 16,
|
|
@@ -1239,10 +1239,10 @@ var SvgH1Fill = function SvgH1Fill(props) {
|
|
|
1239
1239
|
|
|
1240
1240
|
var _g$2;
|
|
1241
1241
|
|
|
1242
|
-
function _extends$
|
|
1242
|
+
function _extends$m() { _extends$m = 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$m.apply(this, arguments); }
|
|
1243
1243
|
|
|
1244
1244
|
var SvgH2Fill = function SvgH2Fill(props) {
|
|
1245
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1245
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
|
|
1246
1246
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1247
1247
|
width: 16,
|
|
1248
1248
|
height: 16,
|
|
@@ -1271,10 +1271,10 @@ var SvgH2Fill = function SvgH2Fill(props) {
|
|
|
1271
1271
|
|
|
1272
1272
|
var _g$1;
|
|
1273
1273
|
|
|
1274
|
-
function _extends$
|
|
1274
|
+
function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
|
|
1275
1275
|
|
|
1276
1276
|
var SvgH3Fill = function SvgH3Fill(props) {
|
|
1277
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1277
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
|
|
1278
1278
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1279
1279
|
width: 16,
|
|
1280
1280
|
height: 16,
|
|
@@ -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,40 +1512,22 @@ 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$
|
|
1516
|
-
|
|
1517
|
-
var _path$j;
|
|
1518
|
-
|
|
1519
|
-
function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
|
|
1520
|
-
|
|
1521
|
-
var SvgInputToggleEdit = function SvgInputToggleEdit(props) {
|
|
1522
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
|
|
1523
|
-
width: 16,
|
|
1524
|
-
height: 16,
|
|
1525
|
-
viewBox: "0 0 16 16",
|
|
1526
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
1527
|
-
}, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1528
|
-
fill: "currentColor",
|
|
1529
|
-
fillRule: "evenodd",
|
|
1530
|
-
clipRule: "evenodd",
|
|
1531
|
-
d: "M10.5268 8.89972L7.51676 8.99972C7.22772 9.00933 6.99083 8.77244 7.00043 8.4834L7.10043 5.4734C7.10465 5.3466 7.1569 5.22615 7.24661 5.13645L12.2366 0.146447C12.4319 -0.0488155 12.7485 -0.0488155 12.9437 0.146447L15.8537 3.05645C16.049 3.25171 16.049 3.56829 15.8537 3.76355L10.8637 8.75355C10.774 8.84326 10.6536 8.89551 10.5268 8.89972ZM14.7931 3.41L12.5902 1.20711L8.09333 5.70394L8.01763 7.98253L10.2962 7.90683L14.7931 3.41ZM7.91016 1.5C7.91016 1.22386 7.6863 1 7.41016 1H2.09016C1.80595 0.994981 1.52354 1.10909 1.3164 1.31624C1.10925 1.52338 0.995139 1.80579 1.00023 2.0987L1.00016 13.91C0.995139 14.1942 1.10925 14.4766 1.3164 14.6838C1.52354 14.8909 1.80595 15.005 2.09886 14.9999L13.9102 15C14.1944 15.005 14.4768 14.8909 14.6839 14.6838C14.8911 14.4766 15.0052 14.1942 15.0001 13.9013L15.0002 8.59C15.0002 8.31386 14.7763 8.09 14.5002 8.09C14.224 8.09 14.0002 8.31386 14.0002 8.59V13.91C14.0006 13.9404 13.9922 13.9613 13.9768 13.9767C13.9615 13.992 13.9406 14.0005 13.9189 14.0001L2.09016 14C2.05977 14.0005 2.03885 13.992 2.0235 13.9767C2.00816 13.9613 1.99971 13.9404 2.00008 13.9187L2.00016 2.09C1.99971 2.05961 2.00816 2.03869 2.0235 2.02334C2.03885 2.008 2.05977 1.99955 2.08146 1.99992L7.41016 2C7.6863 2 7.91016 1.77614 7.91016 1.5Z"
|
|
1532
|
-
})));
|
|
1533
|
-
};
|
|
1515
|
+
var templateObject_1$O, templateObject_2$l;
|
|
1534
1516
|
|
|
1535
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
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
|
|
1517
|
+
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"])));
|
|
1518
|
+
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"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
1537
1519
|
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
1520
|
var theme = _a.theme;
|
|
1539
1521
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1540
1522
|
});
|
|
1541
|
-
var
|
|
1523
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n transition: opacity 0.2s ease-in-out;\n"], ["\n transition: opacity 0.2s ease-in-out;\n"])));
|
|
1524
|
+
var StyledMessage = styled__default["default"](Message)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
|
|
1542
1525
|
var theme = _a.theme;
|
|
1543
1526
|
return theme.space.sm;
|
|
1544
1527
|
});
|
|
1545
|
-
var
|
|
1546
|
-
var StyledMessage = styled__default["default"](Message)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
|
|
1528
|
+
var IconContainer$1 = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n margin-left: ", ";\n cursor: pointer;\n"], ["\n margin-left: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
1547
1529
|
var theme = _a.theme;
|
|
1548
|
-
return theme.space.
|
|
1530
|
+
return theme.space.md;
|
|
1549
1531
|
});
|
|
1550
1532
|
/**
|
|
1551
1533
|
* An Input Toggle lets users use the input by activating it pressing the edit button.
|
|
@@ -1555,8 +1537,15 @@ var StyledMessage = styled__default["default"](Message)(templateObject_6$2 || (t
|
|
|
1555
1537
|
* - To enter multiline text, use a Textarea
|
|
1556
1538
|
**/
|
|
1557
1539
|
var InputToggle = function (props) {
|
|
1558
|
-
var
|
|
1540
|
+
var validation = props.validation, size = props.size, label = props.label, message = props.message, required = props.required, onBlur = props.onBlur, placeholder = props.placeholder, endIcon = props.endIcon, style = props.style, isFocused = props.isFocused, rest = __rest(props, ["validation", "size", "label", "message", "required", "onBlur", "placeholder", "endIcon", "style", "isFocused"]);
|
|
1541
|
+
var _a = React.useState(isFocused), isEditing = _a[0], setIsEditing = _a[1];
|
|
1559
1542
|
var inputRef = React.useRef(null);
|
|
1543
|
+
React.useEffect(function () {
|
|
1544
|
+
var _a;
|
|
1545
|
+
if (isFocused) {
|
|
1546
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1547
|
+
}
|
|
1548
|
+
}, []);
|
|
1560
1549
|
var onClick = function () {
|
|
1561
1550
|
var _a;
|
|
1562
1551
|
setIsEditing(true);
|
|
@@ -1569,20 +1558,21 @@ var InputToggle = function (props) {
|
|
|
1569
1558
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1570
1559
|
}
|
|
1571
1560
|
};
|
|
1572
|
-
var
|
|
1561
|
+
var handleOnBlur = function () {
|
|
1573
1562
|
var _a;
|
|
1574
1563
|
setIsEditing(false);
|
|
1575
1564
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1576
1565
|
};
|
|
1577
|
-
return (jsxRuntime.jsxs(Wrapper, __assign({
|
|
1578
|
-
? { style: { opacity: 1 } }
|
|
1579
|
-
: { 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
|
|
1566
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({}, (style && { style: style }), { children: [label && (jsxRuntime.jsxs(StyledLabel, __assign({ isRegular: true }, (isEditing
|
|
1580
1567
|
? { style: { opacity: 1 } }
|
|
1581
|
-
: { style: { opacity: 0 } }), { children:
|
|
1568
|
+
: { 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) {
|
|
1569
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
1570
|
+
handleOnBlur();
|
|
1571
|
+
}, ref: inputRef }, (isEditing ? { readOnly: false } : { readOnly: true }), (size ? { style: { fontSize: "".concat(size, "px") } } : {}), (validation && { validation: validation }), rest)), !isEditing && endIcon && (jsxRuntime.jsx(IconContainer$1, __assign({ onClick: onClick }, { children: endIcon })))] }), message && (jsxRuntime.jsx(StyledMessage, __assign({ validation: validation }, (message ? { style: { opacity: 1 } } : { style: { opacity: 0 } }), { children: message })))] })));
|
|
1582
1572
|
};
|
|
1583
|
-
var templateObject_1$
|
|
1573
|
+
var templateObject_1$N, templateObject_2$k, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$2;
|
|
1584
1574
|
|
|
1585
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1575
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1586
1576
|
/**
|
|
1587
1577
|
* Media elements add even more context to an input.
|
|
1588
1578
|
* <hr>
|
|
@@ -1591,9 +1581,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1591
1581
|
* - To enter multiline text, use a Textarea
|
|
1592
1582
|
**/
|
|
1593
1583
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1594
|
-
var templateObject_1$
|
|
1584
|
+
var templateObject_1$M;
|
|
1595
1585
|
|
|
1596
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1586
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1597
1587
|
/**
|
|
1598
1588
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1599
1589
|
* <hr>
|
|
@@ -1605,7 +1595,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$K ||
|
|
|
1605
1595
|
* - To select from a long list of options, use Select instead
|
|
1606
1596
|
**/
|
|
1607
1597
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1608
|
-
var templateObject_1$
|
|
1598
|
+
var templateObject_1$L;
|
|
1609
1599
|
|
|
1610
1600
|
var _path$i;
|
|
1611
1601
|
|
|
@@ -1625,7 +1615,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1625
1615
|
})));
|
|
1626
1616
|
};
|
|
1627
1617
|
|
|
1628
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1618
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1629
1619
|
var theme = _a.theme;
|
|
1630
1620
|
return theme.space.base;
|
|
1631
1621
|
}, function (_a) {
|
|
@@ -1659,9 +1649,9 @@ var RadioCard = function (_a) {
|
|
|
1659
1649
|
props.onChecked && props.onChecked(props.value);
|
|
1660
1650
|
} }, { children: [jsxRuntime.jsx(SpecialCard.Meta, __assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, __assign({ style: props.checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }))] })));
|
|
1661
1651
|
};
|
|
1662
|
-
var templateObject_1$
|
|
1652
|
+
var templateObject_1$K, templateObject_2$j;
|
|
1663
1653
|
|
|
1664
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1654
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1665
1655
|
/**
|
|
1666
1656
|
* A Textarea is a form control for multi-line text.
|
|
1667
1657
|
* <hr>
|
|
@@ -1669,9 +1659,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1669
1659
|
* - To enter multi-line text
|
|
1670
1660
|
**/
|
|
1671
1661
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1672
|
-
var templateObject_1$
|
|
1662
|
+
var templateObject_1$J;
|
|
1673
1663
|
|
|
1674
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1664
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1675
1665
|
/**
|
|
1676
1666
|
* A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
|
|
1677
1667
|
* <hr>
|
|
@@ -1682,11 +1672,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$H
|
|
|
1682
1672
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1683
1673
|
**/
|
|
1684
1674
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1685
|
-
var templateObject_1$
|
|
1675
|
+
var templateObject_1$I;
|
|
1686
1676
|
|
|
1687
|
-
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
1677
|
+
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"], ["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"])), theme.space.lg, theme.breakpoints.sm, theme.space.md);
|
|
1688
1678
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
1689
|
-
var templateObject_1$
|
|
1679
|
+
var templateObject_1$H;
|
|
1690
1680
|
|
|
1691
1681
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1692
1682
|
|
|
@@ -1749,15 +1739,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1749
1739
|
})));
|
|
1750
1740
|
};
|
|
1751
1741
|
|
|
1752
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1742
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
1753
1743
|
var Icon = function (props) {
|
|
1754
1744
|
var type = props.type, size = props.size;
|
|
1755
1745
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1756
1746
|
return (jsxRuntime.jsxs(StyledUgIcon$1, { children: [type === "square" && jsxRuntime.jsx(SvgUgSquare, { width: dim, height: dim }), type === "triangle" && jsxRuntime.jsx(SvgUgTriangle, { width: dim, height: dim }), type === "circle" && jsxRuntime.jsx(SvgUgCircle, { width: dim, height: dim })] }));
|
|
1757
1747
|
};
|
|
1758
|
-
var templateObject_1$
|
|
1748
|
+
var templateObject_1$G;
|
|
1759
1749
|
|
|
1760
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1750
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1761
1751
|
/**
|
|
1762
1752
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1763
1753
|
* <hr>
|
|
@@ -1769,9 +1759,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1769
1759
|
- When loading page content, use a Skeleton loader instead
|
|
1770
1760
|
*/
|
|
1771
1761
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1772
|
-
var templateObject_1$
|
|
1762
|
+
var templateObject_1$F;
|
|
1773
1763
|
|
|
1774
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1764
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1775
1765
|
/**
|
|
1776
1766
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1777
1767
|
* <hr>
|
|
@@ -1780,9 +1770,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1780
1770
|
- To provide a quick way to navigate to ancestor pages
|
|
1781
1771
|
*/
|
|
1782
1772
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1783
|
-
var templateObject_1$
|
|
1773
|
+
var templateObject_1$E;
|
|
1784
1774
|
|
|
1785
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1775
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1786
1776
|
var theme = _a.theme;
|
|
1787
1777
|
return theme.palette.white;
|
|
1788
1778
|
});
|
|
@@ -1790,7 +1780,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$C ||
|
|
|
1790
1780
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1791
1781
|
*/
|
|
1792
1782
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1793
|
-
var templateObject_1$
|
|
1783
|
+
var templateObject_1$D;
|
|
1794
1784
|
|
|
1795
1785
|
/**
|
|
1796
1786
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1814,7 +1804,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1814
1804
|
})));
|
|
1815
1805
|
};
|
|
1816
1806
|
|
|
1817
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1807
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1818
1808
|
var theme = _a.theme;
|
|
1819
1809
|
return theme.fonts.system;
|
|
1820
1810
|
});
|
|
@@ -1823,14 +1813,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$i ||
|
|
|
1823
1813
|
return theme.fonts.system;
|
|
1824
1814
|
});
|
|
1825
1815
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1826
|
-
var templateObject_1$
|
|
1816
|
+
var templateObject_1$C, templateObject_2$i;
|
|
1827
1817
|
|
|
1828
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1818
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1829
1819
|
var theme = _a.theme;
|
|
1830
1820
|
return theme.fonts.system;
|
|
1831
1821
|
});
|
|
1832
1822
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1833
|
-
var templateObject_1$
|
|
1823
|
+
var templateObject_1$B;
|
|
1834
1824
|
|
|
1835
1825
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1836
1826
|
|
|
@@ -1879,7 +1869,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1879
1869
|
})));
|
|
1880
1870
|
};
|
|
1881
1871
|
|
|
1882
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1872
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1883
1873
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1884
1874
|
return isCompact &&
|
|
1885
1875
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1895,9 +1885,9 @@ var WorkspacesDropdown = function (props) {
|
|
|
1895
1885
|
? selectedWorkspace.company + "'s workspace"
|
|
1896
1886
|
: "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })));
|
|
1897
1887
|
};
|
|
1898
|
-
var templateObject_1$
|
|
1888
|
+
var templateObject_1$A;
|
|
1899
1889
|
|
|
1900
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1890
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"], ["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"])), function (_a) {
|
|
1901
1891
|
var theme = _a.theme;
|
|
1902
1892
|
return theme.breakpoints.md;
|
|
1903
1893
|
});
|
|
@@ -1931,9 +1921,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1931
1921
|
var BrandItem = function (props) {
|
|
1932
1922
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
|
|
1933
1923
|
};
|
|
1934
|
-
var templateObject_1$
|
|
1924
|
+
var templateObject_1$z, templateObject_2$h, templateObject_3$d, templateObject_4$9;
|
|
1935
1925
|
|
|
1936
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1926
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1937
1927
|
/**
|
|
1938
1928
|
* An Header is a visual way to display general information.
|
|
1939
1929
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1942,13 +1932,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1942
1932
|
Header.HeaderItem = HeaderItem;
|
|
1943
1933
|
Header.HeaderItemText = HeaderItemText;
|
|
1944
1934
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1945
|
-
var templateObject_1$
|
|
1935
|
+
var templateObject_1$y;
|
|
1946
1936
|
|
|
1947
1937
|
var HeaderSkeleton = function () {
|
|
1948
1938
|
return (jsxRuntime.jsxs(Header, __assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, __assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: window.matchMedia("only screen and (min-width: 576px)").matches ? (jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm })) : (jsxRuntime.jsx(Skeleton, { width: "80px", height: theme.space.sm, style: { marginLeft: theme.space.sm } })) })), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
|
|
1949
1939
|
};
|
|
1950
1940
|
|
|
1951
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1941
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1952
1942
|
var theme = _a.theme;
|
|
1953
1943
|
return theme.breakpoints.sm;
|
|
1954
1944
|
});
|
|
@@ -1960,9 +1950,9 @@ var AppHeader = function (_a) {
|
|
|
1960
1950
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1961
1951
|
return isLoading ? jsxRuntime.jsx(HeaderSkeleton, {}) : (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
|
|
1962
1952
|
};
|
|
1963
|
-
var templateObject_1$
|
|
1953
|
+
var templateObject_1$x;
|
|
1964
1954
|
|
|
1965
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1955
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
|
|
1966
1956
|
var theme = _a.theme;
|
|
1967
1957
|
return theme.borders.sm;
|
|
1968
1958
|
}, function (_a) {
|
|
@@ -1989,9 +1979,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$v || (t
|
|
|
1989
1979
|
- To give a consistent dashboard and navigation experience
|
|
1990
1980
|
*/
|
|
1991
1981
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1992
|
-
var templateObject_1$
|
|
1982
|
+
var templateObject_1$w;
|
|
1993
1983
|
|
|
1994
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1984
|
+
var SelectedItemStyle = styled.css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1995
1985
|
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
|
|
1996
1986
|
var theme = _a.theme;
|
|
1997
1987
|
return theme.fonts.system;
|
|
@@ -2003,11 +1993,11 @@ var NavItem = function (props) {
|
|
|
2003
1993
|
// const { isExpanded } = props;
|
|
2004
1994
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
2005
1995
|
};
|
|
2006
|
-
var templateObject_1$
|
|
1996
|
+
var templateObject_1$v, templateObject_2$g;
|
|
2007
1997
|
|
|
2008
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1998
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
|
|
2009
1999
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2010
|
-
var templateObject_1$
|
|
2000
|
+
var templateObject_1$u;
|
|
2011
2001
|
|
|
2012
2002
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
2013
2003
|
|
|
@@ -2045,7 +2035,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2045
2035
|
})));
|
|
2046
2036
|
};
|
|
2047
2037
|
|
|
2048
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
2038
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
2049
2039
|
var theme = _a.theme;
|
|
2050
2040
|
return theme.space.base * 6;
|
|
2051
2041
|
}, function (_a) {
|
|
@@ -2070,18 +2060,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$s ||
|
|
|
2070
2060
|
var NavToggle = function (props) {
|
|
2071
2061
|
return (jsxRuntime.jsx(StyledToggle, __assign({}, props, { isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, { style: { width: "100%" } })) : (jsxRuntime.jsx(SvgChevronRightStroke, { style: { width: "100%" } })) })));
|
|
2072
2062
|
};
|
|
2073
|
-
var templateObject_1$
|
|
2063
|
+
var templateObject_1$t;
|
|
2074
2064
|
|
|
2075
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
2065
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"], ["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"])), function (props) { return props.theme.space.lg; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
|
|
2076
2066
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2077
|
-
var templateObject_1$
|
|
2067
|
+
var templateObject_1$s;
|
|
2078
2068
|
|
|
2079
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
2069
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
|
|
2080
2070
|
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
2081
2071
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
2082
2072
|
NavItemProject.Title = NavItemText;
|
|
2083
2073
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2084
|
-
var templateObject_1$
|
|
2074
|
+
var templateObject_1$r, templateObject_2$f;
|
|
2085
2075
|
|
|
2086
2076
|
var _path$a;
|
|
2087
2077
|
|
|
@@ -2250,7 +2240,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2250
2240
|
})))));
|
|
2251
2241
|
};
|
|
2252
2242
|
|
|
2253
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
2243
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
2254
2244
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2255
2245
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2256
2246
|
});
|
|
@@ -2258,9 +2248,9 @@ var LoadingSidebar = function (props) {
|
|
|
2258
2248
|
var isExpanded = props.isExpanded;
|
|
2259
2249
|
return (jsxRuntime.jsxs(StyledNav, __assign({}, props, { isExpanded: isExpanded }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
2260
2250
|
};
|
|
2261
|
-
var templateObject_1$
|
|
2251
|
+
var templateObject_1$q;
|
|
2262
2252
|
|
|
2263
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
2253
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
2264
2254
|
var ScrollingContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
|
|
2265
2255
|
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
|
|
2266
2256
|
var isExpanded = _a.isExpanded;
|
|
@@ -2297,9 +2287,9 @@ var Sidebar = function (props) {
|
|
|
2297
2287
|
} }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
|
|
2298
2288
|
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
2299
2289
|
};
|
|
2300
|
-
var templateObject_1$
|
|
2290
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$c;
|
|
2301
2291
|
|
|
2302
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
2292
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"], ["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
|
|
2303
2293
|
var theme = _a.theme;
|
|
2304
2294
|
return theme.breakpoints.sm;
|
|
2305
2295
|
}, function (_a) {
|
|
@@ -2310,21 +2300,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$n ||
|
|
|
2310
2300
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2311
2301
|
*/
|
|
2312
2302
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2313
|
-
var templateObject_1$
|
|
2303
|
+
var templateObject_1$o;
|
|
2314
2304
|
|
|
2315
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
2305
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"], ["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
|
|
2316
2306
|
var PageLoader = function () {
|
|
2317
2307
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2318
2308
|
return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isExpanded: isSidebarOpen, isLoading: true }), jsxRuntime.jsxs(Main$1, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px", style: { marginTop: theme.space.sm, marginLeft: theme.space.sm } }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
|
|
2319
2309
|
};
|
|
2320
|
-
var templateObject_1$
|
|
2310
|
+
var templateObject_1$n;
|
|
2321
2311
|
|
|
2322
2312
|
/**
|
|
2323
2313
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2324
2314
|
*/
|
|
2325
2315
|
var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2326
2316
|
|
|
2327
|
-
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$
|
|
2317
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"], ["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"])), theme.breakpoints.sm);
|
|
2328
2318
|
/**
|
|
2329
2319
|
* Login Form
|
|
2330
2320
|
* <hr>
|
|
@@ -2355,9 +2345,9 @@ var LoginForm = function (props) {
|
|
|
2355
2345
|
: false, isPrimary: true, isPill: true, themeColor: theme.colors.accentHue, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
|
|
2356
2346
|
} }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] }));
|
|
2357
2347
|
};
|
|
2358
|
-
var templateObject_1$
|
|
2348
|
+
var templateObject_1$m;
|
|
2359
2349
|
|
|
2360
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
2350
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
2361
2351
|
var theme = _a.theme;
|
|
2362
2352
|
return theme.palette.grey["800"];
|
|
2363
2353
|
});
|
|
@@ -2366,9 +2356,9 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2366
2356
|
Modal.Header = reactModals.Header;
|
|
2367
2357
|
Modal.Body = ugModalBody;
|
|
2368
2358
|
Modal.Footer = reactModals.Footer;
|
|
2369
|
-
var templateObject_1$
|
|
2359
|
+
var templateObject_1$l;
|
|
2370
2360
|
|
|
2371
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
2361
|
+
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
|
|
2372
2362
|
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2373
2363
|
var theme = _a.theme;
|
|
2374
2364
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
@@ -2406,7 +2396,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2406
2396
|
ModalFullScreen.Footer = StyledFooter;
|
|
2407
2397
|
ModalFullScreen.Close = StyledModalClose;
|
|
2408
2398
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2409
|
-
var templateObject_1$
|
|
2399
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
2410
2400
|
|
|
2411
2401
|
/**
|
|
2412
2402
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2427,7 +2417,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2427
2417
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2428
2418
|
var useToast = reactNotifications.useToast;
|
|
2429
2419
|
|
|
2430
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2420
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
|
|
2431
2421
|
/**
|
|
2432
2422
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2433
2423
|
|
|
@@ -2437,9 +2427,9 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2437
2427
|
*/
|
|
2438
2428
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2439
2429
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2440
|
-
var templateObject_1$
|
|
2430
|
+
var templateObject_1$j;
|
|
2441
2431
|
|
|
2442
|
-
var MainContainer = styled__default["default"].div(templateObject_1$
|
|
2432
|
+
var MainContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2443
2433
|
var InformationContainer = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"], ["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"])), function (_a) {
|
|
2444
2434
|
var theme = _a.theme;
|
|
2445
2435
|
return theme.space.xs;
|
|
@@ -2502,9 +2492,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2502
2492
|
var Main = function (props) {
|
|
2503
2493
|
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && jsxRuntime.jsx(Counters, { children: props.infoCounters })] }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
|
|
2504
2494
|
};
|
|
2505
|
-
var templateObject_1$
|
|
2495
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2506
2496
|
|
|
2507
|
-
var PageContainer = styled__default["default"].div(templateObject_1$
|
|
2497
|
+
var PageContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2508
2498
|
var theme = _a.theme;
|
|
2509
2499
|
return theme.palette.white;
|
|
2510
2500
|
});
|
|
@@ -2555,7 +2545,7 @@ var PageHeader = function (props) {
|
|
|
2555
2545
|
PageHeader.Breadcrumb = StyledBreadcrumb;
|
|
2556
2546
|
PageHeader.Main = Main;
|
|
2557
2547
|
PageHeader.Buttons = Buttons;
|
|
2558
|
-
var templateObject_1$
|
|
2548
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6;
|
|
2559
2549
|
|
|
2560
2550
|
var _path$5;
|
|
2561
2551
|
|
|
@@ -2594,11 +2584,11 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2594
2584
|
})));
|
|
2595
2585
|
};
|
|
2596
2586
|
|
|
2597
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
2587
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isVisible ? "1" : "0"); }, function (props) { return (props.isDisabled ? "inherit" : theme.palette.grey[600]); }, function (props) { return props.theme.iconSizes.md; }, function (props) { return props.theme.iconSizes.md; });
|
|
2598
2588
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2599
|
-
var templateObject_1$
|
|
2589
|
+
var templateObject_1$g;
|
|
2600
2590
|
|
|
2601
|
-
var flexCenter = styled.css(templateObject_1$
|
|
2591
|
+
var flexCenter = styled.css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
2602
2592
|
var flexColumnCenter = styled.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
2603
2593
|
var flexStart = styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
2604
2594
|
var theme = _a.theme;
|
|
@@ -2617,13 +2607,13 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
2617
2607
|
var theme = _a.theme;
|
|
2618
2608
|
return theme.shadows.boxShadow(theme);
|
|
2619
2609
|
});
|
|
2620
|
-
var templateObject_1$
|
|
2610
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$5;
|
|
2621
2611
|
|
|
2622
2612
|
/**
|
|
2623
2613
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2624
2614
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2625
2615
|
**/
|
|
2626
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
2616
|
+
var StyledItem = styled__default["default"].li(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"], ["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n }"); }, StyledMenuItemIcon, function (props) {
|
|
2627
2617
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2628
2618
|
}, function (props) {
|
|
2629
2619
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -2642,7 +2632,7 @@ var MenuItem = function (_a) {
|
|
|
2642
2632
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2643
2633
|
return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
|
|
2644
2634
|
};
|
|
2645
|
-
var templateObject_1$
|
|
2635
|
+
var templateObject_1$e, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2646
2636
|
|
|
2647
2637
|
var _path$3;
|
|
2648
2638
|
|
|
@@ -2699,16 +2689,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2699
2689
|
})));
|
|
2700
2690
|
};
|
|
2701
2691
|
|
|
2702
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
2692
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2703
2693
|
var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$2, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
|
|
2704
|
-
var templateObject_1$
|
|
2694
|
+
var templateObject_1$d;
|
|
2705
2695
|
|
|
2706
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
2696
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject([""], [""])));
|
|
2707
2697
|
/**
|
|
2708
2698
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
2709
2699
|
*/
|
|
2710
2700
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2711
|
-
var templateObject_1$
|
|
2701
|
+
var templateObject_1$c;
|
|
2712
2702
|
|
|
2713
2703
|
var getInitials = function (name) {
|
|
2714
2704
|
var names = name.split(" ");
|
|
@@ -2716,7 +2706,7 @@ var getInitials = function (name) {
|
|
|
2716
2706
|
return initials;
|
|
2717
2707
|
};
|
|
2718
2708
|
|
|
2719
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
2709
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2720
2710
|
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
|
|
2721
2711
|
var StyledBody$2 = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
2722
2712
|
var theme = _a.theme;
|
|
@@ -2745,7 +2735,7 @@ var HelpItem = function (props) {
|
|
|
2745
2735
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
|
|
2746
2736
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
|
|
2747
2737
|
};
|
|
2748
|
-
var templateObject_1$
|
|
2738
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
2749
2739
|
|
|
2750
2740
|
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
2751
2741
|
|
|
@@ -2777,7 +2767,7 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
2777
2767
|
})));
|
|
2778
2768
|
};
|
|
2779
2769
|
|
|
2780
|
-
var StyledBody$1 = styled__default["default"].div(templateObject_1$
|
|
2770
|
+
var StyledBody$1 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
2781
2771
|
var theme = _a.theme;
|
|
2782
2772
|
return theme.space.base * 6;
|
|
2783
2773
|
}, function (_a) {
|
|
@@ -2791,9 +2781,9 @@ var LanguageItem = function (props) {
|
|
|
2791
2781
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(StyledButton, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
|
|
2792
2782
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
|
|
2793
2783
|
};
|
|
2794
|
-
var templateObject_1$
|
|
2784
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$5;
|
|
2795
2785
|
|
|
2796
|
-
var ProfileContainer = styled__default["default"].div(templateObject_1$
|
|
2786
|
+
var ProfileContainer = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
2797
2787
|
var theme = _a.theme;
|
|
2798
2788
|
return theme.space.base * 2;
|
|
2799
2789
|
}, function (_a) {
|
|
@@ -2821,9 +2811,9 @@ var UserContainer = function (props) {
|
|
|
2821
2811
|
var _a;
|
|
2822
2812
|
return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, __assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
|
|
2823
2813
|
};
|
|
2824
|
-
var templateObject_1$
|
|
2814
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$4;
|
|
2825
2815
|
|
|
2826
|
-
var StyledList = styled__default["default"].ul(templateObject_1$
|
|
2816
|
+
var StyledList = styled__default["default"].ul(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
|
|
2827
2817
|
var UserMenu = function (props) {
|
|
2828
2818
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
2829
2819
|
var toggleItem = function (item) {
|
|
@@ -2831,9 +2821,9 @@ var UserMenu = function (props) {
|
|
|
2831
2821
|
};
|
|
2832
2822
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && props.onFeedbackClick && jsxRuntime.jsx(Separator, {}), props.onFeedbackClick && (jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick ? props.onFeedbackClick() : console.log("feedback fired"); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) }))), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat, chatSupportLabel: props === null || props === void 0 ? void 0 : props.chatSupportLabel, copyLabel: props === null || props === void 0 ? void 0 : props.copyLabel }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
|
|
2833
2823
|
};
|
|
2834
|
-
var templateObject_1$
|
|
2824
|
+
var templateObject_1$8;
|
|
2835
2825
|
|
|
2836
|
-
var StyledModal = styled__default["default"](Modal)(templateObject_1$
|
|
2826
|
+
var StyledModal = styled__default["default"](Modal)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"], ["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"])), function (_a) {
|
|
2837
2827
|
var theme = _a.theme;
|
|
2838
2828
|
return theme.space.xxl;
|
|
2839
2829
|
}, function (_a) {
|
|
@@ -2871,9 +2861,9 @@ var ProfileModal = function (_a) {
|
|
|
2871
2861
|
};
|
|
2872
2862
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
2873
2863
|
};
|
|
2874
|
-
var templateObject_1$
|
|
2864
|
+
var templateObject_1$7, templateObject_2$5;
|
|
2875
2865
|
|
|
2876
|
-
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$
|
|
2866
|
+
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n svg {\n color: ", ";\n }\n"], ["\n svg {\n color: ", ";\n }\n"])), function (_a) {
|
|
2877
2867
|
var theme = _a.theme;
|
|
2878
2868
|
return theme.palette.green[700];
|
|
2879
2869
|
});
|
|
@@ -2913,9 +2903,9 @@ var Stepper = function (props) {
|
|
|
2913
2903
|
Stepper.Step = UgStep;
|
|
2914
2904
|
Stepper.Label = UgLabel;
|
|
2915
2905
|
Stepper.Content = UgContent;
|
|
2916
|
-
var templateObject_1$
|
|
2906
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
2917
2907
|
|
|
2918
|
-
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$
|
|
2908
|
+
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"], ["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"])), function (_a) {
|
|
2919
2909
|
var theme = _a.theme;
|
|
2920
2910
|
return theme.palette.grey[300];
|
|
2921
2911
|
}, function (_a) {
|
|
@@ -2950,9 +2940,9 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
2950
2940
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
2951
2941
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
2952
2942
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
2953
|
-
var templateObject_1$
|
|
2943
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
2954
2944
|
|
|
2955
|
-
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$
|
|
2945
|
+
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
|
|
2956
2946
|
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
2957
2947
|
var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"], ["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"])), theme.palette.grey[500], theme.fontSizes.sm);
|
|
2958
2948
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
@@ -2983,7 +2973,7 @@ var GroupedTable = function (_a) {
|
|
|
2983
2973
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
2984
2974
|
}) })] })));
|
|
2985
2975
|
};
|
|
2986
|
-
var templateObject_1$
|
|
2976
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
2987
2977
|
|
|
2988
2978
|
/**
|
|
2989
2979
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -3003,7 +2993,7 @@ Tiles.Icon = reactForms.Tiles.Icon;
|
|
|
3003
2993
|
Tiles.Label = reactForms.Tiles.Label;
|
|
3004
2994
|
Tiles.Tile = reactForms.Tiles.Tile;
|
|
3005
2995
|
|
|
3006
|
-
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$
|
|
2996
|
+
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
3007
2997
|
var UgTimelineContent = styled__default["default"](reactAccordions.Timeline.Content)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n padding: 12px 16px;\n"], ["\n padding: 12px 16px;\n"])));
|
|
3008
2998
|
var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n padding: 12px 16px;\n }\n\n ", "\n"], ["\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n padding: 12px 16px;\n }\n\n ", "\n"])), function (_a) {
|
|
3009
2999
|
var theme = _a.theme;
|
|
@@ -3025,8 +3015,12 @@ var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(t
|
|
|
3025
3015
|
var Timeline = function (props) { return jsxRuntime.jsx(UgTimeline, __assign({}, props)); };
|
|
3026
3016
|
Timeline.Item = UgTimelineItem;
|
|
3027
3017
|
Timeline.Content = UgTimelineContent;
|
|
3028
|
-
var templateObject_1$
|
|
3018
|
+
var templateObject_1$3, templateObject_2$1, templateObject_3;
|
|
3029
3019
|
|
|
3020
|
+
var StyledTooltipModal = styled__default["default"](reactModals.TooltipModal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
|
|
3021
|
+
var theme = _a.theme;
|
|
3022
|
+
return theme.borderRadii.md;
|
|
3023
|
+
});
|
|
3030
3024
|
/**
|
|
3031
3025
|
* A Tooltip modal provides contextual information about a paired element. It either opens automatically or through user action.
|
|
3032
3026
|
* <hr>
|
|
@@ -3034,12 +3028,13 @@ var templateObject_1$2, templateObject_2$1, templateObject_3;
|
|
|
3034
3028
|
- To enable user action within a tooltip
|
|
3035
3029
|
- To provide a focus loop when actions need to be inside a tooltip
|
|
3036
3030
|
*/
|
|
3037
|
-
var TooltipModal = function (props) { return jsxRuntime.jsx(
|
|
3038
|
-
TooltipModal.Title =
|
|
3039
|
-
TooltipModal.Body =
|
|
3040
|
-
TooltipModal.Close =
|
|
3041
|
-
TooltipModal.Footer =
|
|
3042
|
-
TooltipModal.FooterItem =
|
|
3031
|
+
var TooltipModal = function (props) { return jsxRuntime.jsx(StyledTooltipModal, __assign({}, props)); };
|
|
3032
|
+
TooltipModal.Title = StyledTooltipModal.Title;
|
|
3033
|
+
TooltipModal.Body = StyledTooltipModal.Body;
|
|
3034
|
+
TooltipModal.Close = StyledTooltipModal.Close;
|
|
3035
|
+
TooltipModal.Footer = StyledTooltipModal.Footer;
|
|
3036
|
+
TooltipModal.FooterItem = StyledTooltipModal.FooterItem;
|
|
3037
|
+
var templateObject_1$2;
|
|
3043
3038
|
|
|
3044
3039
|
/**
|
|
3045
3040
|
* A Trigger is a wrapper for input elements
|