@appquality/unguess-design-system 2.11.8 → 2.11.11
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 +223 -231
- package/build/stories/forms/input-toggle/_types.d.ts +3 -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,38 +1512,23 @@ 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
|
|
1537
|
-
var StyledInput = styled__default["default"](Input)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n width: 100%;\n\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n transition: border-color 0s;\n }\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.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 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"])))
|
|
1538
|
-
var StyledEditIcon = styled__default["default"](SvgInputToggleEdit)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
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"])));
|
|
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) {
|
|
1539
1520
|
var theme = _a.theme;
|
|
1540
|
-
return theme.space.
|
|
1521
|
+
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1541
1522
|
});
|
|
1542
|
-
var StyledLabel = styled__default["default"](Label)(
|
|
1543
|
-
var StyledMessage = styled__default["default"](Message)(
|
|
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) {
|
|
1544
1525
|
var theme = _a.theme;
|
|
1545
1526
|
return theme.space.sm;
|
|
1546
1527
|
});
|
|
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) {
|
|
1529
|
+
var theme = _a.theme;
|
|
1530
|
+
return theme.space.md;
|
|
1531
|
+
});
|
|
1547
1532
|
/**
|
|
1548
1533
|
* An Input Toggle lets users use the input by activating it pressing the edit button.
|
|
1549
1534
|
* <hr>
|
|
@@ -1554,6 +1539,7 @@ var StyledMessage = styled__default["default"](Message)(templateObject_6$2 || (t
|
|
|
1554
1539
|
var InputToggle = function (props) {
|
|
1555
1540
|
var _a = React.useState(false), isEditing = _a[0], setIsEditing = _a[1];
|
|
1556
1541
|
var inputRef = React.useRef(null);
|
|
1542
|
+
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, rest = __rest(props, ["validation", "size", "label", "message", "required", "onBlur", "placeholder", "endIcon", "style"]);
|
|
1557
1543
|
var onClick = function () {
|
|
1558
1544
|
var _a;
|
|
1559
1545
|
setIsEditing(true);
|
|
@@ -1566,20 +1552,21 @@ var InputToggle = function (props) {
|
|
|
1566
1552
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1567
1553
|
}
|
|
1568
1554
|
};
|
|
1569
|
-
var
|
|
1555
|
+
var handleOnBlur = function () {
|
|
1570
1556
|
var _a;
|
|
1571
1557
|
setIsEditing(false);
|
|
1572
1558
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1573
1559
|
};
|
|
1574
|
-
return (jsxRuntime.jsxs(Wrapper, __assign({
|
|
1575
|
-
? { style: { opacity: 1 } }
|
|
1576
|
-
: { style: { opacity: 0 } }), { children: [props.label, props.label && props.required ? (jsxRuntime.jsx(Span, __assign({ style: { color: theme.palette.red[600] } }, { children: "*" }))) : null] }))), jsxRuntime.jsxs(InputContainer, { children: [jsxRuntime.jsx(StyledInput, __assign({ ref: inputRef }, props, (isEditing ? { readOnly: false } : { readOnly: true }), (props.size ? { style: { fontSize: "".concat(props.size, "px") } } : {}))), !isEditing && jsxRuntime.jsx(StyledEditIcon, {})] }), props.message && (jsxRuntime.jsx(StyledMessage, __assign({ validation: props.validation }, (props.message
|
|
1560
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({}, (style && { style: style }), { children: [label && (jsxRuntime.jsxs(StyledLabel, __assign({ isRegular: true }, (isEditing
|
|
1577
1561
|
? { style: { opacity: 1 } }
|
|
1578
|
-
: { style: { opacity: 0 } }), { children:
|
|
1562
|
+
: { 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) {
|
|
1563
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
1564
|
+
handleOnBlur();
|
|
1565
|
+
}, 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 })))] })));
|
|
1579
1566
|
};
|
|
1580
|
-
var templateObject_1$
|
|
1567
|
+
var templateObject_1$N, templateObject_2$k, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$2;
|
|
1581
1568
|
|
|
1582
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1569
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1583
1570
|
/**
|
|
1584
1571
|
* Media elements add even more context to an input.
|
|
1585
1572
|
* <hr>
|
|
@@ -1588,9 +1575,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1588
1575
|
* - To enter multiline text, use a Textarea
|
|
1589
1576
|
**/
|
|
1590
1577
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1591
|
-
var templateObject_1$
|
|
1578
|
+
var templateObject_1$M;
|
|
1592
1579
|
|
|
1593
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1580
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1594
1581
|
/**
|
|
1595
1582
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1596
1583
|
* <hr>
|
|
@@ -1602,7 +1589,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$K ||
|
|
|
1602
1589
|
* - To select from a long list of options, use Select instead
|
|
1603
1590
|
**/
|
|
1604
1591
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1605
|
-
var templateObject_1$
|
|
1592
|
+
var templateObject_1$L;
|
|
1606
1593
|
|
|
1607
1594
|
var _path$i;
|
|
1608
1595
|
|
|
@@ -1622,7 +1609,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1622
1609
|
})));
|
|
1623
1610
|
};
|
|
1624
1611
|
|
|
1625
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1612
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1626
1613
|
var theme = _a.theme;
|
|
1627
1614
|
return theme.space.base;
|
|
1628
1615
|
}, function (_a) {
|
|
@@ -1656,9 +1643,9 @@ var RadioCard = function (_a) {
|
|
|
1656
1643
|
props.onChecked && props.onChecked(props.value);
|
|
1657
1644
|
} }, { children: [jsxRuntime.jsx(SpecialCard.Meta, __assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, __assign({ style: props.checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }))] })));
|
|
1658
1645
|
};
|
|
1659
|
-
var templateObject_1$
|
|
1646
|
+
var templateObject_1$K, templateObject_2$j;
|
|
1660
1647
|
|
|
1661
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1648
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1662
1649
|
/**
|
|
1663
1650
|
* A Textarea is a form control for multi-line text.
|
|
1664
1651
|
* <hr>
|
|
@@ -1666,9 +1653,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1666
1653
|
* - To enter multi-line text
|
|
1667
1654
|
**/
|
|
1668
1655
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1669
|
-
var templateObject_1$
|
|
1656
|
+
var templateObject_1$J;
|
|
1670
1657
|
|
|
1671
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1658
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1672
1659
|
/**
|
|
1673
1660
|
* A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
|
|
1674
1661
|
* <hr>
|
|
@@ -1679,11 +1666,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$H
|
|
|
1679
1666
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1680
1667
|
**/
|
|
1681
1668
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1682
|
-
var templateObject_1$
|
|
1669
|
+
var templateObject_1$I;
|
|
1683
1670
|
|
|
1684
|
-
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
1671
|
+
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"], ["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"])), theme.space.lg, theme.breakpoints.sm, theme.space.md);
|
|
1685
1672
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
1686
|
-
var templateObject_1$
|
|
1673
|
+
var templateObject_1$H;
|
|
1687
1674
|
|
|
1688
1675
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1689
1676
|
|
|
@@ -1746,15 +1733,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1746
1733
|
})));
|
|
1747
1734
|
};
|
|
1748
1735
|
|
|
1749
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1736
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
1750
1737
|
var Icon = function (props) {
|
|
1751
1738
|
var type = props.type, size = props.size;
|
|
1752
1739
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1753
1740
|
return (jsxRuntime.jsxs(StyledUgIcon$1, { children: [type === "square" && jsxRuntime.jsx(SvgUgSquare, { width: dim, height: dim }), type === "triangle" && jsxRuntime.jsx(SvgUgTriangle, { width: dim, height: dim }), type === "circle" && jsxRuntime.jsx(SvgUgCircle, { width: dim, height: dim })] }));
|
|
1754
1741
|
};
|
|
1755
|
-
var templateObject_1$
|
|
1742
|
+
var templateObject_1$G;
|
|
1756
1743
|
|
|
1757
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1744
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1758
1745
|
/**
|
|
1759
1746
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1760
1747
|
* <hr>
|
|
@@ -1766,9 +1753,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1766
1753
|
- When loading page content, use a Skeleton loader instead
|
|
1767
1754
|
*/
|
|
1768
1755
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1769
|
-
var templateObject_1$
|
|
1756
|
+
var templateObject_1$F;
|
|
1770
1757
|
|
|
1771
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1758
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1772
1759
|
/**
|
|
1773
1760
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1774
1761
|
* <hr>
|
|
@@ -1777,9 +1764,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1777
1764
|
- To provide a quick way to navigate to ancestor pages
|
|
1778
1765
|
*/
|
|
1779
1766
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1780
|
-
var templateObject_1$
|
|
1767
|
+
var templateObject_1$E;
|
|
1781
1768
|
|
|
1782
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1769
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1783
1770
|
var theme = _a.theme;
|
|
1784
1771
|
return theme.palette.white;
|
|
1785
1772
|
});
|
|
@@ -1787,7 +1774,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$C ||
|
|
|
1787
1774
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1788
1775
|
*/
|
|
1789
1776
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1790
|
-
var templateObject_1$
|
|
1777
|
+
var templateObject_1$D;
|
|
1791
1778
|
|
|
1792
1779
|
/**
|
|
1793
1780
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1811,7 +1798,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1811
1798
|
})));
|
|
1812
1799
|
};
|
|
1813
1800
|
|
|
1814
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1801
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1815
1802
|
var theme = _a.theme;
|
|
1816
1803
|
return theme.fonts.system;
|
|
1817
1804
|
});
|
|
@@ -1820,14 +1807,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$i ||
|
|
|
1820
1807
|
return theme.fonts.system;
|
|
1821
1808
|
});
|
|
1822
1809
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1823
|
-
var templateObject_1$
|
|
1810
|
+
var templateObject_1$C, templateObject_2$i;
|
|
1824
1811
|
|
|
1825
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1812
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1826
1813
|
var theme = _a.theme;
|
|
1827
1814
|
return theme.fonts.system;
|
|
1828
1815
|
});
|
|
1829
1816
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1830
|
-
var templateObject_1$
|
|
1817
|
+
var templateObject_1$B;
|
|
1831
1818
|
|
|
1832
1819
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1833
1820
|
|
|
@@ -1876,7 +1863,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1876
1863
|
})));
|
|
1877
1864
|
};
|
|
1878
1865
|
|
|
1879
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1866
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1880
1867
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1881
1868
|
return isCompact &&
|
|
1882
1869
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1892,9 +1879,9 @@ var WorkspacesDropdown = function (props) {
|
|
|
1892
1879
|
? selectedWorkspace.company + "'s workspace"
|
|
1893
1880
|
: "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })));
|
|
1894
1881
|
};
|
|
1895
|
-
var templateObject_1$
|
|
1882
|
+
var templateObject_1$A;
|
|
1896
1883
|
|
|
1897
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1884
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"], ["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"])), function (_a) {
|
|
1898
1885
|
var theme = _a.theme;
|
|
1899
1886
|
return theme.breakpoints.md;
|
|
1900
1887
|
});
|
|
@@ -1928,9 +1915,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1928
1915
|
var BrandItem = function (props) {
|
|
1929
1916
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
|
|
1930
1917
|
};
|
|
1931
|
-
var templateObject_1$
|
|
1918
|
+
var templateObject_1$z, templateObject_2$h, templateObject_3$d, templateObject_4$9;
|
|
1932
1919
|
|
|
1933
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1920
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1934
1921
|
/**
|
|
1935
1922
|
* An Header is a visual way to display general information.
|
|
1936
1923
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1939,13 +1926,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1939
1926
|
Header.HeaderItem = HeaderItem;
|
|
1940
1927
|
Header.HeaderItemText = HeaderItemText;
|
|
1941
1928
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1942
|
-
var templateObject_1$
|
|
1929
|
+
var templateObject_1$y;
|
|
1943
1930
|
|
|
1944
1931
|
var HeaderSkeleton = function () {
|
|
1945
1932
|
return (jsxRuntime.jsxs(Header, __assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, __assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: window.matchMedia("only screen and (min-width: 576px)").matches ? (jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm })) : (jsxRuntime.jsx(Skeleton, { width: "80px", height: theme.space.sm, style: { marginLeft: theme.space.sm } })) })), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
|
|
1946
1933
|
};
|
|
1947
1934
|
|
|
1948
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1935
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1949
1936
|
var theme = _a.theme;
|
|
1950
1937
|
return theme.breakpoints.sm;
|
|
1951
1938
|
});
|
|
@@ -1957,9 +1944,9 @@ var AppHeader = function (_a) {
|
|
|
1957
1944
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1958
1945
|
return isLoading ? jsxRuntime.jsx(HeaderSkeleton, {}) : (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
|
|
1959
1946
|
};
|
|
1960
|
-
var templateObject_1$
|
|
1947
|
+
var templateObject_1$x;
|
|
1961
1948
|
|
|
1962
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1949
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
|
|
1963
1950
|
var theme = _a.theme;
|
|
1964
1951
|
return theme.borders.sm;
|
|
1965
1952
|
}, function (_a) {
|
|
@@ -1986,9 +1973,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$v || (t
|
|
|
1986
1973
|
- To give a consistent dashboard and navigation experience
|
|
1987
1974
|
*/
|
|
1988
1975
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1989
|
-
var templateObject_1$
|
|
1976
|
+
var templateObject_1$w;
|
|
1990
1977
|
|
|
1991
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1978
|
+
var SelectedItemStyle = styled.css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1992
1979
|
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
|
|
1993
1980
|
var theme = _a.theme;
|
|
1994
1981
|
return theme.fonts.system;
|
|
@@ -2000,11 +1987,11 @@ var NavItem = function (props) {
|
|
|
2000
1987
|
// const { isExpanded } = props;
|
|
2001
1988
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
2002
1989
|
};
|
|
2003
|
-
var templateObject_1$
|
|
1990
|
+
var templateObject_1$v, templateObject_2$g;
|
|
2004
1991
|
|
|
2005
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1992
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
|
|
2006
1993
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2007
|
-
var templateObject_1$
|
|
1994
|
+
var templateObject_1$u;
|
|
2008
1995
|
|
|
2009
1996
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
2010
1997
|
|
|
@@ -2042,7 +2029,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2042
2029
|
})));
|
|
2043
2030
|
};
|
|
2044
2031
|
|
|
2045
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
2032
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
2046
2033
|
var theme = _a.theme;
|
|
2047
2034
|
return theme.space.base * 6;
|
|
2048
2035
|
}, function (_a) {
|
|
@@ -2067,18 +2054,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$s ||
|
|
|
2067
2054
|
var NavToggle = function (props) {
|
|
2068
2055
|
return (jsxRuntime.jsx(StyledToggle, __assign({}, props, { isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, { style: { width: "100%" } })) : (jsxRuntime.jsx(SvgChevronRightStroke, { style: { width: "100%" } })) })));
|
|
2069
2056
|
};
|
|
2070
|
-
var templateObject_1$
|
|
2057
|
+
var templateObject_1$t;
|
|
2071
2058
|
|
|
2072
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
2059
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"], ["\n width: 100%;\n min-height: ", ";\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"])), function (props) { return props.theme.space.lg; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
|
|
2073
2060
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2074
|
-
var templateObject_1$
|
|
2061
|
+
var templateObject_1$s;
|
|
2075
2062
|
|
|
2076
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
2063
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
|
|
2077
2064
|
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
2078
2065
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
2079
2066
|
NavItemProject.Title = NavItemText;
|
|
2080
2067
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2081
|
-
var templateObject_1$
|
|
2068
|
+
var templateObject_1$r, templateObject_2$f;
|
|
2082
2069
|
|
|
2083
2070
|
var _path$a;
|
|
2084
2071
|
|
|
@@ -2247,7 +2234,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2247
2234
|
})))));
|
|
2248
2235
|
};
|
|
2249
2236
|
|
|
2250
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
2237
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
2251
2238
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2252
2239
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2253
2240
|
});
|
|
@@ -2255,9 +2242,9 @@ var LoadingSidebar = function (props) {
|
|
|
2255
2242
|
var isExpanded = props.isExpanded;
|
|
2256
2243
|
return (jsxRuntime.jsxs(StyledNav, __assign({}, props, { isExpanded: isExpanded }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
2257
2244
|
};
|
|
2258
|
-
var templateObject_1$
|
|
2245
|
+
var templateObject_1$q;
|
|
2259
2246
|
|
|
2260
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
2247
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
2261
2248
|
var ScrollingContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
|
|
2262
2249
|
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
|
|
2263
2250
|
var isExpanded = _a.isExpanded;
|
|
@@ -2294,9 +2281,9 @@ var Sidebar = function (props) {
|
|
|
2294
2281
|
} }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
|
|
2295
2282
|
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
2296
2283
|
};
|
|
2297
|
-
var templateObject_1$
|
|
2284
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$c;
|
|
2298
2285
|
|
|
2299
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
2286
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"], ["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
|
|
2300
2287
|
var theme = _a.theme;
|
|
2301
2288
|
return theme.breakpoints.sm;
|
|
2302
2289
|
}, function (_a) {
|
|
@@ -2307,21 +2294,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$n ||
|
|
|
2307
2294
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2308
2295
|
*/
|
|
2309
2296
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2310
|
-
var templateObject_1$
|
|
2297
|
+
var templateObject_1$o;
|
|
2311
2298
|
|
|
2312
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
2299
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"], ["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
|
|
2313
2300
|
var PageLoader = function () {
|
|
2314
2301
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2315
2302
|
return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isExpanded: isSidebarOpen, isLoading: true }), jsxRuntime.jsxs(Main$1, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px", style: { marginTop: theme.space.sm, marginLeft: theme.space.sm } }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
|
|
2316
2303
|
};
|
|
2317
|
-
var templateObject_1$
|
|
2304
|
+
var templateObject_1$n;
|
|
2318
2305
|
|
|
2319
2306
|
/**
|
|
2320
2307
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2321
2308
|
*/
|
|
2322
2309
|
var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2323
2310
|
|
|
2324
|
-
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$
|
|
2311
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"], ["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"])), theme.breakpoints.sm);
|
|
2325
2312
|
/**
|
|
2326
2313
|
* Login Form
|
|
2327
2314
|
* <hr>
|
|
@@ -2352,9 +2339,9 @@ var LoginForm = function (props) {
|
|
|
2352
2339
|
: false, isPrimary: true, isPill: true, themeColor: theme.colors.accentHue, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
|
|
2353
2340
|
} }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] }));
|
|
2354
2341
|
};
|
|
2355
|
-
var templateObject_1$
|
|
2342
|
+
var templateObject_1$m;
|
|
2356
2343
|
|
|
2357
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
2344
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
2358
2345
|
var theme = _a.theme;
|
|
2359
2346
|
return theme.palette.grey["800"];
|
|
2360
2347
|
});
|
|
@@ -2363,9 +2350,9 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2363
2350
|
Modal.Header = reactModals.Header;
|
|
2364
2351
|
Modal.Body = ugModalBody;
|
|
2365
2352
|
Modal.Footer = reactModals.Footer;
|
|
2366
|
-
var templateObject_1$
|
|
2353
|
+
var templateObject_1$l;
|
|
2367
2354
|
|
|
2368
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
2355
|
+
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
|
|
2369
2356
|
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2370
2357
|
var theme = _a.theme;
|
|
2371
2358
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
@@ -2403,7 +2390,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2403
2390
|
ModalFullScreen.Footer = StyledFooter;
|
|
2404
2391
|
ModalFullScreen.Close = StyledModalClose;
|
|
2405
2392
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2406
|
-
var templateObject_1$
|
|
2393
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
2407
2394
|
|
|
2408
2395
|
/**
|
|
2409
2396
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2424,7 +2411,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2424
2411
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2425
2412
|
var useToast = reactNotifications.useToast;
|
|
2426
2413
|
|
|
2427
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2414
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
|
|
2428
2415
|
/**
|
|
2429
2416
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2430
2417
|
|
|
@@ -2434,9 +2421,9 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2434
2421
|
*/
|
|
2435
2422
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2436
2423
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2437
|
-
var templateObject_1$
|
|
2424
|
+
var templateObject_1$j;
|
|
2438
2425
|
|
|
2439
|
-
var MainContainer = styled__default["default"].div(templateObject_1$
|
|
2426
|
+
var MainContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2440
2427
|
var InformationContainer = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"], ["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"])), function (_a) {
|
|
2441
2428
|
var theme = _a.theme;
|
|
2442
2429
|
return theme.space.xs;
|
|
@@ -2499,9 +2486,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2499
2486
|
var Main = function (props) {
|
|
2500
2487
|
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && jsxRuntime.jsx(Counters, { children: props.infoCounters })] }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
|
|
2501
2488
|
};
|
|
2502
|
-
var templateObject_1$
|
|
2489
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2503
2490
|
|
|
2504
|
-
var PageContainer = styled__default["default"].div(templateObject_1$
|
|
2491
|
+
var PageContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2505
2492
|
var theme = _a.theme;
|
|
2506
2493
|
return theme.palette.white;
|
|
2507
2494
|
});
|
|
@@ -2552,7 +2539,7 @@ var PageHeader = function (props) {
|
|
|
2552
2539
|
PageHeader.Breadcrumb = StyledBreadcrumb;
|
|
2553
2540
|
PageHeader.Main = Main;
|
|
2554
2541
|
PageHeader.Buttons = Buttons;
|
|
2555
|
-
var templateObject_1$
|
|
2542
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6;
|
|
2556
2543
|
|
|
2557
2544
|
var _path$5;
|
|
2558
2545
|
|
|
@@ -2591,11 +2578,11 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2591
2578
|
})));
|
|
2592
2579
|
};
|
|
2593
2580
|
|
|
2594
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
2581
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isVisible ? "1" : "0"); }, function (props) { return (props.isDisabled ? "inherit" : theme.palette.grey[600]); }, function (props) { return props.theme.iconSizes.md; }, function (props) { return props.theme.iconSizes.md; });
|
|
2595
2582
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2596
|
-
var templateObject_1$
|
|
2583
|
+
var templateObject_1$g;
|
|
2597
2584
|
|
|
2598
|
-
var flexCenter = styled.css(templateObject_1$
|
|
2585
|
+
var flexCenter = styled.css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
2599
2586
|
var flexColumnCenter = styled.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
2600
2587
|
var flexStart = styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
2601
2588
|
var theme = _a.theme;
|
|
@@ -2614,13 +2601,13 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
|
|
|
2614
2601
|
var theme = _a.theme;
|
|
2615
2602
|
return theme.shadows.boxShadow(theme);
|
|
2616
2603
|
});
|
|
2617
|
-
var templateObject_1$
|
|
2604
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$5;
|
|
2618
2605
|
|
|
2619
2606
|
/**
|
|
2620
2607
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2621
2608
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2622
2609
|
**/
|
|
2623
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
2610
|
+
var StyledItem = styled__default["default"].li(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"], ["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n }"); }, StyledMenuItemIcon, function (props) {
|
|
2624
2611
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2625
2612
|
}, function (props) {
|
|
2626
2613
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -2639,7 +2626,7 @@ var MenuItem = function (_a) {
|
|
|
2639
2626
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2640
2627
|
return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
|
|
2641
2628
|
};
|
|
2642
|
-
var templateObject_1$
|
|
2629
|
+
var templateObject_1$e, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2643
2630
|
|
|
2644
2631
|
var _path$3;
|
|
2645
2632
|
|
|
@@ -2696,16 +2683,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2696
2683
|
})));
|
|
2697
2684
|
};
|
|
2698
2685
|
|
|
2699
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
2686
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2700
2687
|
var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$2, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
|
|
2701
|
-
var templateObject_1$
|
|
2688
|
+
var templateObject_1$d;
|
|
2702
2689
|
|
|
2703
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
2690
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject([""], [""])));
|
|
2704
2691
|
/**
|
|
2705
2692
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
2706
2693
|
*/
|
|
2707
2694
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2708
|
-
var templateObject_1$
|
|
2695
|
+
var templateObject_1$c;
|
|
2709
2696
|
|
|
2710
2697
|
var getInitials = function (name) {
|
|
2711
2698
|
var names = name.split(" ");
|
|
@@ -2713,7 +2700,7 @@ var getInitials = function (name) {
|
|
|
2713
2700
|
return initials;
|
|
2714
2701
|
};
|
|
2715
2702
|
|
|
2716
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
2703
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2717
2704
|
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
|
|
2718
2705
|
var StyledBody$2 = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
2719
2706
|
var theme = _a.theme;
|
|
@@ -2742,7 +2729,7 @@ var HelpItem = function (props) {
|
|
|
2742
2729
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
|
|
2743
2730
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
|
|
2744
2731
|
};
|
|
2745
|
-
var templateObject_1$
|
|
2732
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
2746
2733
|
|
|
2747
2734
|
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
2748
2735
|
|
|
@@ -2774,7 +2761,7 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
2774
2761
|
})));
|
|
2775
2762
|
};
|
|
2776
2763
|
|
|
2777
|
-
var StyledBody$1 = styled__default["default"].div(templateObject_1$
|
|
2764
|
+
var StyledBody$1 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
2778
2765
|
var theme = _a.theme;
|
|
2779
2766
|
return theme.space.base * 6;
|
|
2780
2767
|
}, function (_a) {
|
|
@@ -2788,9 +2775,9 @@ var LanguageItem = function (props) {
|
|
|
2788
2775
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(StyledButton, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
|
|
2789
2776
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
|
|
2790
2777
|
};
|
|
2791
|
-
var templateObject_1$
|
|
2778
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$5;
|
|
2792
2779
|
|
|
2793
|
-
var ProfileContainer = styled__default["default"].div(templateObject_1$
|
|
2780
|
+
var ProfileContainer = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
2794
2781
|
var theme = _a.theme;
|
|
2795
2782
|
return theme.space.base * 2;
|
|
2796
2783
|
}, function (_a) {
|
|
@@ -2818,9 +2805,9 @@ var UserContainer = function (props) {
|
|
|
2818
2805
|
var _a;
|
|
2819
2806
|
return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, __assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
|
|
2820
2807
|
};
|
|
2821
|
-
var templateObject_1$
|
|
2808
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$4;
|
|
2822
2809
|
|
|
2823
|
-
var StyledList = styled__default["default"].ul(templateObject_1$
|
|
2810
|
+
var StyledList = styled__default["default"].ul(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
|
|
2824
2811
|
var UserMenu = function (props) {
|
|
2825
2812
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
2826
2813
|
var toggleItem = function (item) {
|
|
@@ -2828,9 +2815,9 @@ var UserMenu = function (props) {
|
|
|
2828
2815
|
};
|
|
2829
2816
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && props.onFeedbackClick && jsxRuntime.jsx(Separator, {}), props.onFeedbackClick && (jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick ? props.onFeedbackClick() : console.log("feedback fired"); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) }))), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat, chatSupportLabel: props === null || props === void 0 ? void 0 : props.chatSupportLabel, copyLabel: props === null || props === void 0 ? void 0 : props.copyLabel }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
|
|
2830
2817
|
};
|
|
2831
|
-
var templateObject_1$
|
|
2818
|
+
var templateObject_1$8;
|
|
2832
2819
|
|
|
2833
|
-
var StyledModal = styled__default["default"](Modal)(templateObject_1$
|
|
2820
|
+
var StyledModal = styled__default["default"](Modal)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"], ["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"])), function (_a) {
|
|
2834
2821
|
var theme = _a.theme;
|
|
2835
2822
|
return theme.space.xxl;
|
|
2836
2823
|
}, function (_a) {
|
|
@@ -2868,9 +2855,9 @@ var ProfileModal = function (_a) {
|
|
|
2868
2855
|
};
|
|
2869
2856
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
2870
2857
|
};
|
|
2871
|
-
var templateObject_1$
|
|
2858
|
+
var templateObject_1$7, templateObject_2$5;
|
|
2872
2859
|
|
|
2873
|
-
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$
|
|
2860
|
+
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n svg {\n color: ", ";\n }\n"], ["\n svg {\n color: ", ";\n }\n"])), function (_a) {
|
|
2874
2861
|
var theme = _a.theme;
|
|
2875
2862
|
return theme.palette.green[700];
|
|
2876
2863
|
});
|
|
@@ -2910,9 +2897,9 @@ var Stepper = function (props) {
|
|
|
2910
2897
|
Stepper.Step = UgStep;
|
|
2911
2898
|
Stepper.Label = UgLabel;
|
|
2912
2899
|
Stepper.Content = UgContent;
|
|
2913
|
-
var templateObject_1$
|
|
2900
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
2914
2901
|
|
|
2915
|
-
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$
|
|
2902
|
+
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"], ["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"])), function (_a) {
|
|
2916
2903
|
var theme = _a.theme;
|
|
2917
2904
|
return theme.palette.grey[300];
|
|
2918
2905
|
}, function (_a) {
|
|
@@ -2947,9 +2934,9 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
2947
2934
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
2948
2935
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
2949
2936
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
2950
|
-
var templateObject_1$
|
|
2937
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
2951
2938
|
|
|
2952
|
-
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$
|
|
2939
|
+
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
|
|
2953
2940
|
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
2954
2941
|
var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"], ["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"])), theme.palette.grey[500], theme.fontSizes.sm);
|
|
2955
2942
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
@@ -2980,7 +2967,7 @@ var GroupedTable = function (_a) {
|
|
|
2980
2967
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
2981
2968
|
}) })] })));
|
|
2982
2969
|
};
|
|
2983
|
-
var templateObject_1$
|
|
2970
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
2984
2971
|
|
|
2985
2972
|
/**
|
|
2986
2973
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -3000,7 +2987,7 @@ Tiles.Icon = reactForms.Tiles.Icon;
|
|
|
3000
2987
|
Tiles.Label = reactForms.Tiles.Label;
|
|
3001
2988
|
Tiles.Tile = reactForms.Tiles.Tile;
|
|
3002
2989
|
|
|
3003
|
-
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$
|
|
2990
|
+
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
3004
2991
|
var UgTimelineContent = styled__default["default"](reactAccordions.Timeline.Content)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n padding: 12px 16px;\n"], ["\n padding: 12px 16px;\n"])));
|
|
3005
2992
|
var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n padding: 12px 16px;\n }\n\n ", "\n"], ["\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n padding: 12px 16px;\n }\n\n ", "\n"])), function (_a) {
|
|
3006
2993
|
var theme = _a.theme;
|
|
@@ -3022,8 +3009,12 @@ var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(t
|
|
|
3022
3009
|
var Timeline = function (props) { return jsxRuntime.jsx(UgTimeline, __assign({}, props)); };
|
|
3023
3010
|
Timeline.Item = UgTimelineItem;
|
|
3024
3011
|
Timeline.Content = UgTimelineContent;
|
|
3025
|
-
var templateObject_1$
|
|
3012
|
+
var templateObject_1$3, templateObject_2$1, templateObject_3;
|
|
3026
3013
|
|
|
3014
|
+
var StyledTooltipModal = styled__default["default"](reactModals.TooltipModal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
|
|
3015
|
+
var theme = _a.theme;
|
|
3016
|
+
return theme.borderRadii.md;
|
|
3017
|
+
});
|
|
3027
3018
|
/**
|
|
3028
3019
|
* A Tooltip modal provides contextual information about a paired element. It either opens automatically or through user action.
|
|
3029
3020
|
* <hr>
|
|
@@ -3031,12 +3022,13 @@ var templateObject_1$2, templateObject_2$1, templateObject_3;
|
|
|
3031
3022
|
- To enable user action within a tooltip
|
|
3032
3023
|
- To provide a focus loop when actions need to be inside a tooltip
|
|
3033
3024
|
*/
|
|
3034
|
-
var TooltipModal = function (props) { return jsxRuntime.jsx(
|
|
3035
|
-
TooltipModal.Title =
|
|
3036
|
-
TooltipModal.Body =
|
|
3037
|
-
TooltipModal.Close =
|
|
3038
|
-
TooltipModal.Footer =
|
|
3039
|
-
TooltipModal.FooterItem =
|
|
3025
|
+
var TooltipModal = function (props) { return jsxRuntime.jsx(StyledTooltipModal, __assign({}, props)); };
|
|
3026
|
+
TooltipModal.Title = StyledTooltipModal.Title;
|
|
3027
|
+
TooltipModal.Body = StyledTooltipModal.Body;
|
|
3028
|
+
TooltipModal.Close = StyledTooltipModal.Close;
|
|
3029
|
+
TooltipModal.Footer = StyledTooltipModal.Footer;
|
|
3030
|
+
TooltipModal.FooterItem = StyledTooltipModal.FooterItem;
|
|
3031
|
+
var templateObject_1$2;
|
|
3040
3032
|
|
|
3041
3033
|
/**
|
|
3042
3034
|
* A Trigger is a wrapper for input elements
|