@appquality/unguess-design-system 2.7.0 → 2.7.1
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 +6 -0
- package/build/index.d.ts +62 -60
- package/build/index.js +568 -187
- package/build/stories/campaignCards/_types.d.ts +4 -0
- package/build/stories/dropdowns/menu/_types.d.ts +17 -1
- package/build/stories/dropdowns/menu/index.d.ts +10 -3
- package/build/stories/dropdowns/menu/index.stories.d.ts +6 -0
- package/build/stories/navigation/app-header/_types.d.ts +3 -3
- package/build/stories/profile-modal/UserContainer.d.ts +3 -0
- package/build/stories/profile-modal/_types.d.ts +41 -0
- package/build/stories/profile-modal/helpMenuItem.d.ts +18 -0
- package/build/stories/profile-modal/index.d.ts +11 -0
- package/build/stories/profile-modal/index.stories.d.ts +6 -0
- package/build/stories/profile-modal/languageMenuItem.d.ts +14 -0
- package/build/stories/profile-modal/menuItem.d.ts +11 -0
- package/build/stories/profile-modal/menuItemIcon.d.ts +9 -0
- package/build/stories/profile-modal/previousMenuButton.d.ts +3 -0
- package/build/stories/profile-modal/userMenu.d.ts +3 -0
- package/build/stories/profile-modal/utils.d.ts +1 -0
- package/build/stories/table/_types.d.ts +21 -0
- package/build/stories/table/grouped.d.ts +5 -0
- package/build/stories/table/index.d.ts +3 -4
- package/build/stories/table/index.stories.d.ts +10 -32
- package/build/stories/theme/mixins.d.ts +3 -0
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -22,6 +22,7 @@ var reactModals = require('@zendeskgarden/react-modals');
|
|
|
22
22
|
var reactChrome = require('@zendeskgarden/react-chrome');
|
|
23
23
|
var reactPagination = require('@zendeskgarden/react-pagination');
|
|
24
24
|
var reactTables = require('@zendeskgarden/react-tables');
|
|
25
|
+
var reactSpring = require('react-spring');
|
|
25
26
|
|
|
26
27
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
27
28
|
|
|
@@ -231,8 +232,8 @@ var gradients = {
|
|
|
231
232
|
|
|
232
233
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px" }), components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }), shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
233
234
|
|
|
234
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
235
|
-
var templateObject_1$
|
|
235
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n body {\n font-family: ", ";\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n \n "], ["\n body {\n font-family: ", ";\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n \n "])), theme.fonts.system);
|
|
236
|
+
var templateObject_1$L;
|
|
236
237
|
|
|
237
238
|
/**
|
|
238
239
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -248,7 +249,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
|
|
|
248
249
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
249
250
|
|
|
250
251
|
// import useWindowSize from "../../hooks/useWindowSize";
|
|
251
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
252
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
252
253
|
return "\n background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n ");
|
|
253
254
|
});
|
|
254
255
|
/**
|
|
@@ -271,7 +272,7 @@ var Avatar = function (props) {
|
|
|
271
272
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
272
273
|
};
|
|
273
274
|
Avatar.Text = UgAvatar.Text;
|
|
274
|
-
var templateObject_1$
|
|
275
|
+
var templateObject_1$K;
|
|
275
276
|
|
|
276
277
|
/**
|
|
277
278
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -292,7 +293,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
|
|
|
292
293
|
*/
|
|
293
294
|
var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
|
|
294
295
|
|
|
295
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
296
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
296
297
|
/**
|
|
297
298
|
* Buttons let users take action quickly.
|
|
298
299
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -304,7 +305,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
|
304
305
|
var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
|
|
305
306
|
Button.StartIcon = UgButton.StartIcon;
|
|
306
307
|
Button.EndIcon = UgButton.EndIcon;
|
|
307
|
-
var templateObject_1$
|
|
308
|
+
var templateObject_1$J;
|
|
308
309
|
|
|
309
310
|
/**
|
|
310
311
|
A Button group lets users make a selection from a set of options.
|
|
@@ -357,20 +358,20 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
357
358
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
358
359
|
Tag.Close = reactTags.Tag.Close;
|
|
359
360
|
|
|
360
|
-
var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
361
|
+
var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
361
362
|
/**
|
|
362
363
|
* A Label is used to specify a title for an input.
|
|
363
364
|
* <hr>
|
|
364
365
|
**/
|
|
365
366
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
|
|
366
|
-
var templateObject_1$
|
|
367
|
+
var templateObject_1$I;
|
|
367
368
|
|
|
368
|
-
var _g$4, _path$
|
|
369
|
+
var _g$4, _path$q, _path2$8, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
|
|
369
370
|
|
|
370
|
-
function _extends$
|
|
371
|
+
function _extends$s() { _extends$s = Object.assign || 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); }
|
|
371
372
|
|
|
372
373
|
var SvgFunctionalTestRoundIcon = function SvgFunctionalTestRoundIcon(props) {
|
|
373
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
374
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
|
|
374
375
|
width: 24,
|
|
375
376
|
height: 24,
|
|
376
377
|
viewBox: "0 0 24 24",
|
|
@@ -382,7 +383,7 @@ var SvgFunctionalTestRoundIcon = function SvgFunctionalTestRoundIcon(props) {
|
|
|
382
383
|
opacity: 0.3,
|
|
383
384
|
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",
|
|
384
385
|
fill: "#003A57"
|
|
385
|
-
}))), _path$
|
|
386
|
+
}))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
|
|
386
387
|
d: "M12.4871 3.1964C8.68009 3.1964 5.59901 6.27748 5.59901 10.0844C5.59901 10.2596 5.59901 10.4347 5.62445 10.5854C5.29863 11.1861 4.82313 12.0129 4.24684 12.5138C3.82123 12.8896 3.92102 13.2907 3.97091 13.4404C4.09615 13.7662 4.44641 14.0411 5.02271 14.2417C5.22328 14.3171 5.44831 14.367 5.64889 14.4169L5.67433 16.8463C5.67433 17.7983 6.47565 18.625 7.4531 18.625L8.9305 18.1495L9.08117 19.0262C9.18097 19.6025 9.68191 20.0281 10.2837 20.0281C10.359 20.0281 10.4343 20.0281 10.5087 20.0026L15.1425 19.1769C15.8185 19.0516 16.2441 18.4254 16.1444 17.7494L15.8185 16.1213C17.9975 14.9188 19.375 12.5891 19.375 10.0843C19.375 6.30267 16.2696 3.19629 12.487 3.19629L12.4871 3.1964Z",
|
|
387
388
|
fill: "#003A57",
|
|
388
389
|
stroke: "#003A57"
|
|
@@ -439,12 +440,12 @@ var SvgFunctionalTestRoundIcon = function SvgFunctionalTestRoundIcon(props) {
|
|
|
439
440
|
})));
|
|
440
441
|
};
|
|
441
442
|
|
|
442
|
-
var _g$3, _path$
|
|
443
|
+
var _g$3, _path$p;
|
|
443
444
|
|
|
444
|
-
function _extends$
|
|
445
|
+
function _extends$r() { _extends$r = Object.assign || 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); }
|
|
445
446
|
|
|
446
447
|
var SvgRegressionTestRoundIcon = function SvgRegressionTestRoundIcon(props) {
|
|
447
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
448
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
|
|
448
449
|
width: 24,
|
|
449
450
|
height: 24,
|
|
450
451
|
viewBox: "0 0 24 24",
|
|
@@ -456,18 +457,18 @@ var SvgRegressionTestRoundIcon = function SvgRegressionTestRoundIcon(props) {
|
|
|
456
457
|
opacity: 0.3,
|
|
457
458
|
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",
|
|
458
459
|
fill: "#003A57"
|
|
459
|
-
}))), _path$
|
|
460
|
+
}))), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
|
|
460
461
|
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",
|
|
461
462
|
fill: "#003A57"
|
|
462
463
|
})));
|
|
463
464
|
};
|
|
464
465
|
|
|
465
|
-
var _circle$2, _path$
|
|
466
|
+
var _circle$2, _path$o, _path2$7, _path3$5;
|
|
466
467
|
|
|
467
|
-
function _extends$
|
|
468
|
+
function _extends$q() { _extends$q = Object.assign || 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); }
|
|
468
469
|
|
|
469
470
|
var SvgCompletedStatusRoundIcon = function SvgCompletedStatusRoundIcon(props) {
|
|
470
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
471
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
|
|
471
472
|
width: 32,
|
|
472
473
|
height: 32,
|
|
473
474
|
viewBox: "0 0 32 32",
|
|
@@ -478,7 +479,7 @@ var SvgCompletedStatusRoundIcon = function SvgCompletedStatusRoundIcon(props) {
|
|
|
478
479
|
cy: 16,
|
|
479
480
|
r: 16,
|
|
480
481
|
fill: "#F8F9F9"
|
|
481
|
-
})), _path$
|
|
482
|
+
})), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
|
|
482
483
|
d: "M24.6953 9.73905C25.0148 9.41953 25.0148 8.90149 24.6953 8.58197C24.3758 8.26245 23.8577 8.26245 23.5382 8.58197L15.88 16.2402L14.0849 13.9598C13.8054 13.6048 13.291 13.5435 12.9359 13.823C12.5809 14.1025 12.5196 14.6169 12.7991 14.972L15.1642 17.9763C15.3089 18.16 15.5252 18.2731 15.7586 18.2869C15.9921 18.3008 16.2203 18.2141 16.3856 18.0487L24.6953 9.73905Z",
|
|
483
484
|
fill: "#27DD70"
|
|
484
485
|
})), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -490,12 +491,12 @@ var SvgCompletedStatusRoundIcon = function SvgCompletedStatusRoundIcon(props) {
|
|
|
490
491
|
})));
|
|
491
492
|
};
|
|
492
493
|
|
|
493
|
-
var _circle$1, _path$
|
|
494
|
+
var _circle$1, _path$n, _path2$6, _path3$4, _path4$3, _path5$2, _path6$2, _path7$2, _path8$2, _path9$2, _path10$2;
|
|
494
495
|
|
|
495
|
-
function _extends$
|
|
496
|
+
function _extends$p() { _extends$p = Object.assign || 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); }
|
|
496
497
|
|
|
497
498
|
var SvgOnGoingStatusRoundIcon = function SvgOnGoingStatusRoundIcon(props) {
|
|
498
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
499
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
|
|
499
500
|
width: 32,
|
|
500
501
|
height: 32,
|
|
501
502
|
viewBox: "0 0 32 32",
|
|
@@ -506,7 +507,7 @@ var SvgOnGoingStatusRoundIcon = function SvgOnGoingStatusRoundIcon(props) {
|
|
|
506
507
|
cy: 16,
|
|
507
508
|
r: 16,
|
|
508
509
|
fill: "#F8F9F9"
|
|
509
|
-
})), _path$
|
|
510
|
+
})), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
|
|
510
511
|
d: "M17.059 20.7647C17.059 20.1799 16.585 19.7059 16.0002 19.7059C15.4154 19.7059 14.9414 20.1799 14.9414 20.7647V23.9412C14.9414 24.5259 15.4154 25 16.0002 25C16.585 25 17.059 24.5259 17.059 23.9412V20.7647Z",
|
|
511
512
|
fill: "#D1820A"
|
|
512
513
|
})), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -539,12 +540,12 @@ var SvgOnGoingStatusRoundIcon = function SvgOnGoingStatusRoundIcon(props) {
|
|
|
539
540
|
})));
|
|
540
541
|
};
|
|
541
542
|
|
|
542
|
-
var _circle, _path$
|
|
543
|
+
var _circle, _path$m, _path2$5;
|
|
543
544
|
|
|
544
|
-
function _extends$
|
|
545
|
+
function _extends$o() { _extends$o = Object.assign || 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); }
|
|
545
546
|
|
|
546
547
|
var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
|
|
547
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
548
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
|
|
548
549
|
width: 32,
|
|
549
550
|
height: 32,
|
|
550
551
|
viewBox: "0 0 32 32",
|
|
@@ -555,7 +556,7 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
|
|
|
555
556
|
cy: 16,
|
|
556
557
|
r: 16,
|
|
557
558
|
fill: "#F8F9F9"
|
|
558
|
-
})), _path$
|
|
559
|
+
})), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
|
|
559
560
|
d: "M15.2266 17.0313H18.997M15.2266 13.2607V17.0313V13.2607ZM15.2266 17.0313L24.121 9.03906L15.2266 17.0313Z",
|
|
560
561
|
stroke: "#1371D6",
|
|
561
562
|
strokeWidth: 1.5,
|
|
@@ -592,27 +593,23 @@ var getTypeData = function (type) {
|
|
|
592
593
|
};
|
|
593
594
|
}
|
|
594
595
|
};
|
|
595
|
-
var Wrapper = styled__default["default"](Card)(templateObject_1$
|
|
596
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$
|
|
597
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_3$
|
|
596
|
+
var Wrapper = styled__default["default"](Card)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n border-radius: ", ";\n padding: 1rem;\n border: 1px solid ", ";\n\n &:hover {\n box-shadow: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: 1rem;\n border: 1px solid ", ";\n\n &:hover {\n box-shadow: ", ";\n }\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
|
|
597
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), theme.palette.grey["700"]);
|
|
598
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px ", "px;\n color: ", ";\n"])), function (_a) {
|
|
598
599
|
var theme = _a.theme;
|
|
599
600
|
return theme.space.base * 6;
|
|
600
601
|
}, theme.space.base, function (_a) {
|
|
601
602
|
var theme = _a.theme;
|
|
602
603
|
return theme.space.base * 2;
|
|
603
604
|
}, theme.palette.white);
|
|
604
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: ", ";\n color: ", "\n"], ["\n font-size: ", ";\n color: ", "\n"])), theme.fontSizes.sm, theme.palette.grey["500"]);
|
|
605
|
-
var StyledTitleLabel = styled__default["default"](Label)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n"])), theme.palette.blue["600"], theme.fontSizes.lg);
|
|
605
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-size: ", ";\n color: ", "\n"], ["\n font-size: ", ";\n color: ", "\n"])), theme.fontSizes.sm, theme.palette.grey["500"]);
|
|
606
|
+
var StyledTitleLabel = styled__default["default"](Label)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n"])), theme.palette.blue["600"], theme.fontSizes.lg);
|
|
606
607
|
var Divider = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), theme.space.lg, theme.palette.grey["300"]);
|
|
607
|
-
var CardHeader = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
608
|
+
var CardHeader = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n height: ", "px;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n height: ", "px;\n"])), theme.space.base * 6);
|
|
608
609
|
var CardBody = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n"])), theme.space.xxl);
|
|
609
610
|
var CardFooter = styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
610
|
-
var getFormattedLocaleDate = function () {
|
|
611
|
-
return new Date().toLocaleString().substring(0, 10);
|
|
612
|
-
};
|
|
613
611
|
var CampaignCard = function (props) {
|
|
614
|
-
var isNew = props.isNew, date = props.date, title = props.title, subTitle = props.subTitle, status = props.status, type = props.type;
|
|
615
|
-
var shownDate = date === getFormattedLocaleDate() ? "Today" : date;
|
|
612
|
+
var isNew = props.isNew, date = props.date, title = props.title, subTitle = props.subTitle, status = props.status, type = props.type, labelNew = props.labelNew;
|
|
616
613
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
617
614
|
var typeData = getTypeData(type);
|
|
618
615
|
var PillIcon = typeData === null || typeData === void 0 ? void 0 : typeData.pillIcon;
|
|
@@ -624,28 +621,28 @@ var CampaignCard = function (props) {
|
|
|
624
621
|
if (subTitle.length > 29) {
|
|
625
622
|
subTitleCut = "".concat(subTitle.substring(0, 26), "...");
|
|
626
623
|
}
|
|
627
|
-
return jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children:
|
|
624
|
+
return jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: titleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: subTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
|
|
628
625
|
jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] })), jsxRuntime.jsx(StatusIcon, {})] })] }));
|
|
629
626
|
};
|
|
630
|
-
var templateObject_1$
|
|
627
|
+
var templateObject_1$H, templateObject_2$b, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
631
628
|
|
|
632
629
|
/**
|
|
633
630
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
634
631
|
*/
|
|
635
632
|
var Close = function (props) { return jsxRuntime.jsx(reactNotifications.Close, __assign({}, props)); };
|
|
636
633
|
|
|
637
|
-
var _path$
|
|
634
|
+
var _path$l, _path2$4, _path3$3, _path4$2;
|
|
638
635
|
|
|
639
|
-
function _extends$
|
|
636
|
+
function _extends$n() { _extends$n = Object.assign || 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); }
|
|
640
637
|
|
|
641
638
|
var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
|
|
642
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
639
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
|
|
643
640
|
width: 24,
|
|
644
641
|
height: 24,
|
|
645
642
|
viewBox: "0 0 24 24",
|
|
646
643
|
fill: "none",
|
|
647
644
|
xmlns: "http://www.w3.org/2000/svg"
|
|
648
|
-
}, props), _path$
|
|
645
|
+
}, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
|
|
649
646
|
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",
|
|
650
647
|
fill: "#F8F9F9"
|
|
651
648
|
})), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -660,18 +657,18 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
|
|
|
660
657
|
})));
|
|
661
658
|
};
|
|
662
659
|
|
|
663
|
-
var _path$
|
|
660
|
+
var _path$k, _path2$3, _path3$2, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
|
|
664
661
|
|
|
665
|
-
function _extends$
|
|
662
|
+
function _extends$m() { _extends$m = Object.assign || 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); }
|
|
666
663
|
|
|
667
664
|
var SvgCampaignProgress = function SvgCampaignProgress(props) {
|
|
668
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
665
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
|
|
669
666
|
width: 24,
|
|
670
667
|
height: 24,
|
|
671
668
|
viewBox: "0 0 24 24",
|
|
672
669
|
fill: "none",
|
|
673
670
|
xmlns: "http://www.w3.org/2000/svg"
|
|
674
|
-
}, props), _path$
|
|
671
|
+
}, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
|
|
675
672
|
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",
|
|
676
673
|
fill: "#F8F9F9"
|
|
677
674
|
})), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -707,18 +704,18 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
|
|
|
707
704
|
})));
|
|
708
705
|
};
|
|
709
706
|
|
|
710
|
-
var _path$
|
|
707
|
+
var _path$j, _path2$2, _path3$1;
|
|
711
708
|
|
|
712
|
-
function _extends$
|
|
709
|
+
function _extends$l() { _extends$l = Object.assign || 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); }
|
|
713
710
|
|
|
714
711
|
var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
715
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
712
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
|
|
716
713
|
width: 24,
|
|
717
714
|
height: 24,
|
|
718
715
|
viewBox: "0 0 24 24",
|
|
719
716
|
fill: "none",
|
|
720
717
|
xmlns: "http://www.w3.org/2000/svg"
|
|
721
|
-
}, props), _path$
|
|
718
|
+
}, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
|
|
722
719
|
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",
|
|
723
720
|
fill: "#F8F9F9"
|
|
724
721
|
})), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -736,12 +733,12 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
736
733
|
})));
|
|
737
734
|
};
|
|
738
735
|
|
|
739
|
-
var _g$2, _path$
|
|
736
|
+
var _g$2, _path$i;
|
|
740
737
|
|
|
741
|
-
function _extends$
|
|
738
|
+
function _extends$k() { _extends$k = Object.assign || 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$k.apply(this, arguments); }
|
|
742
739
|
|
|
743
740
|
var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
|
|
744
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
741
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
|
|
745
742
|
width: 24,
|
|
746
743
|
height: 24,
|
|
747
744
|
viewBox: "0 0 24 24",
|
|
@@ -753,18 +750,18 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
|
|
|
753
750
|
opacity: 0.3,
|
|
754
751
|
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",
|
|
755
752
|
fill: "#003A57"
|
|
756
|
-
}))), _path$
|
|
753
|
+
}))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
|
|
757
754
|
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",
|
|
758
755
|
fill: "#003A57"
|
|
759
756
|
})));
|
|
760
757
|
};
|
|
761
758
|
|
|
762
|
-
var _g$1, _path$
|
|
759
|
+
var _g$1, _path$h, _path2$1, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
|
|
763
760
|
|
|
764
|
-
function _extends$
|
|
761
|
+
function _extends$j() { _extends$j = Object.assign || 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$j.apply(this, arguments); }
|
|
765
762
|
|
|
766
763
|
var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
767
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
764
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
|
|
768
765
|
width: 24,
|
|
769
766
|
height: 24,
|
|
770
767
|
viewBox: "0 0 24 24",
|
|
@@ -776,7 +773,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
776
773
|
opacity: 0.3,
|
|
777
774
|
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",
|
|
778
775
|
fill: "#003A57"
|
|
779
|
-
}))), _path$
|
|
776
|
+
}))), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
|
|
780
777
|
d: "M12.4871 3.1964C8.68009 3.1964 5.59901 6.27748 5.59901 10.0844C5.59901 10.2596 5.59901 10.4347 5.62445 10.5854C5.29863 11.1861 4.82313 12.0129 4.24684 12.5138C3.82123 12.8896 3.92102 13.2907 3.97091 13.4404C4.09615 13.7662 4.44641 14.0411 5.02271 14.2417C5.22328 14.3171 5.44831 14.367 5.64889 14.4169L5.67433 16.8463C5.67433 17.7983 6.47565 18.625 7.4531 18.625L8.9305 18.1495L9.08117 19.0262C9.18097 19.6025 9.68191 20.0281 10.2837 20.0281C10.359 20.0281 10.4343 20.0281 10.5087 20.0026L15.1425 19.1769C15.8185 19.0516 16.2441 18.4254 16.1444 17.7494L15.8185 16.1213C17.9975 14.9188 19.375 12.5891 19.375 10.0843C19.375 6.30267 16.2696 3.19629 12.487 3.19629L12.4871 3.1964Z",
|
|
781
778
|
fill: "#003A57",
|
|
782
779
|
stroke: "#003A57"
|
|
@@ -833,7 +830,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
833
830
|
})));
|
|
834
831
|
};
|
|
835
832
|
|
|
836
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_1$
|
|
833
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"])), function (_a) {
|
|
837
834
|
var theme = _a.theme;
|
|
838
835
|
return theme.fontWeights.regular;
|
|
839
836
|
}, function (_a) {
|
|
@@ -869,27 +866,35 @@ var Counter = function (props) {
|
|
|
869
866
|
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, {})] }) }), props.children, props.counter !== undefined && jsxRuntime.jsx("span", { children: props.counter })] })));
|
|
870
867
|
};
|
|
871
868
|
Counter.Avatar = StyledTag.Avatar;
|
|
872
|
-
var templateObject_1$
|
|
869
|
+
var templateObject_1$G;
|
|
873
870
|
|
|
874
|
-
var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
871
|
+
var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
875
872
|
var Field$1 = function (props) { return jsxRuntime.jsx(UgField$1, __assign({}, props)); };
|
|
876
|
-
var templateObject_1$
|
|
873
|
+
var templateObject_1$F;
|
|
877
874
|
|
|
878
875
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
879
876
|
__proto__: null,
|
|
880
877
|
Field: Field$1
|
|
881
878
|
});
|
|
882
879
|
|
|
883
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
880
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
884
881
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
885
|
-
var templateObject_1$
|
|
882
|
+
var templateObject_1$E;
|
|
886
883
|
|
|
887
|
-
var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$
|
|
884
|
+
var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
888
885
|
/**
|
|
889
886
|
* A Menu is a wrapper for items elements
|
|
890
887
|
**/
|
|
891
888
|
var Menu = function (props) { return jsxRuntime.jsx(UgMenu, __assign({}, props)); };
|
|
892
|
-
|
|
889
|
+
// Extras
|
|
890
|
+
var PreviousItem = function (props) { return jsxRuntime.jsx(reactDropdowns.PreviousItem, __assign({}, props)); };
|
|
891
|
+
var Separator = function (props) { return jsxRuntime.jsx(reactDropdowns.Separator, __assign({}, props)); };
|
|
892
|
+
var NextItem = function (props) { return jsxRuntime.jsx(reactDropdowns.NextItem, __assign({}, props)); };
|
|
893
|
+
var ItemMeta = function (props) { return jsxRuntime.jsx(reactDropdowns.ItemMeta, __assign({}, props)); };
|
|
894
|
+
var MediaBody = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaBody, __assign({}, props)); };
|
|
895
|
+
var MediaFigure = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaFigure, __assign({}, props)); };
|
|
896
|
+
var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
|
|
897
|
+
var templateObject_1$D;
|
|
893
898
|
|
|
894
899
|
/**
|
|
895
900
|
* Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
|
|
@@ -914,7 +919,7 @@ var Select = function (props) { return jsxRuntime.jsx(reactDropdowns.Select, __a
|
|
|
914
919
|
var Dropdown = function (props) { return jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props)); };
|
|
915
920
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
916
921
|
|
|
917
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
922
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
918
923
|
/**
|
|
919
924
|
* A Checkbox lets users select and unselect options from a list.
|
|
920
925
|
* <hr>
|
|
@@ -926,14 +931,14 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
926
931
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
927
932
|
**/
|
|
928
933
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
929
|
-
var templateObject_1$
|
|
934
|
+
var templateObject_1$C;
|
|
930
935
|
|
|
931
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
936
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
|
|
932
937
|
/**
|
|
933
938
|
* A Field is a wrapper for input elements
|
|
934
939
|
**/
|
|
935
940
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
936
|
-
var templateObject_1$
|
|
941
|
+
var templateObject_1$B;
|
|
937
942
|
|
|
938
943
|
var index = /*#__PURE__*/Object.freeze({
|
|
939
944
|
__proto__: null,
|
|
@@ -941,7 +946,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
941
946
|
Hint: reactForms.Hint
|
|
942
947
|
});
|
|
943
948
|
|
|
944
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
949
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
|
|
945
950
|
/**
|
|
946
951
|
* An Input lets users enter text into a field.
|
|
947
952
|
* <hr>
|
|
@@ -950,9 +955,9 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$q ||
|
|
|
950
955
|
* - To enter multiline text, use a Textarea
|
|
951
956
|
**/
|
|
952
957
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
953
|
-
var templateObject_1$
|
|
958
|
+
var templateObject_1$A;
|
|
954
959
|
|
|
955
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
960
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
|
|
956
961
|
/**
|
|
957
962
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
958
963
|
* <hr>
|
|
@@ -964,9 +969,9 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$p ||
|
|
|
964
969
|
* - To select from a long list of options, use Select instead
|
|
965
970
|
**/
|
|
966
971
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
967
|
-
var templateObject_1$
|
|
972
|
+
var templateObject_1$z;
|
|
968
973
|
|
|
969
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
974
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
|
|
970
975
|
/**
|
|
971
976
|
* A Textarea is a form control for multi-line text.
|
|
972
977
|
* <hr>
|
|
@@ -974,9 +979,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
974
979
|
* - To enter multi-line text
|
|
975
980
|
**/
|
|
976
981
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
977
|
-
var templateObject_1$
|
|
982
|
+
var templateObject_1$y;
|
|
978
983
|
|
|
979
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
984
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
|
|
980
985
|
/**
|
|
981
986
|
* 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.
|
|
982
987
|
* <hr>
|
|
@@ -987,11 +992,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$n
|
|
|
987
992
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
988
993
|
**/
|
|
989
994
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
990
|
-
var templateObject_1$
|
|
995
|
+
var templateObject_1$x;
|
|
991
996
|
|
|
992
997
|
var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
|
|
993
998
|
|
|
994
|
-
var Row = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
999
|
+
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
995
1000
|
|
|
996
1001
|
/**
|
|
997
1002
|
* The Grid component is a framework for building modular layouts.
|
|
@@ -1001,58 +1006,58 @@ var Row = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, p
|
|
|
1001
1006
|
*/
|
|
1002
1007
|
var Grid = function (props) { return jsxRuntime.jsx(reactGrid.Grid, __assign({}, props)); };
|
|
1003
1008
|
|
|
1004
|
-
var _path$
|
|
1009
|
+
var _path$g;
|
|
1005
1010
|
|
|
1006
|
-
function _extends$
|
|
1011
|
+
function _extends$i() { _extends$i = Object.assign || 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$i.apply(this, arguments); }
|
|
1007
1012
|
|
|
1008
1013
|
var SvgUgSquare = function SvgUgSquare(props) {
|
|
1009
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1014
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
|
|
1010
1015
|
width: 24,
|
|
1011
1016
|
height: 24,
|
|
1012
1017
|
viewBox: "0 0 24 24",
|
|
1013
1018
|
fill: "none",
|
|
1014
1019
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1015
|
-
}, props), _path$
|
|
1020
|
+
}, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1016
1021
|
d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19Z",
|
|
1017
1022
|
fill: "#E80C7A"
|
|
1018
1023
|
})));
|
|
1019
1024
|
};
|
|
1020
1025
|
|
|
1021
|
-
var _path$
|
|
1026
|
+
var _path$f;
|
|
1022
1027
|
|
|
1023
|
-
function _extends$
|
|
1028
|
+
function _extends$h() { _extends$h = Object.assign || 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$h.apply(this, arguments); }
|
|
1024
1029
|
|
|
1025
1030
|
var SvgUgCircle = function SvgUgCircle(props) {
|
|
1026
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1031
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
|
|
1027
1032
|
width: 24,
|
|
1028
1033
|
height: 24,
|
|
1029
1034
|
viewBox: "0 0 24 24",
|
|
1030
1035
|
fill: "none",
|
|
1031
1036
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1032
|
-
}, props), _path$
|
|
1037
|
+
}, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1033
1038
|
d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
|
|
1034
1039
|
fill: "#FFCD1A"
|
|
1035
1040
|
})));
|
|
1036
1041
|
};
|
|
1037
1042
|
|
|
1038
|
-
var _path$
|
|
1043
|
+
var _path$e;
|
|
1039
1044
|
|
|
1040
|
-
function _extends$
|
|
1045
|
+
function _extends$g() { _extends$g = Object.assign || 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$g.apply(this, arguments); }
|
|
1041
1046
|
|
|
1042
1047
|
var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
1043
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1048
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
|
|
1044
1049
|
width: 24,
|
|
1045
1050
|
height: 24,
|
|
1046
1051
|
viewBox: "0 0 24 24",
|
|
1047
1052
|
fill: "none",
|
|
1048
1053
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1049
|
-
}, props), _path$
|
|
1054
|
+
}, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1050
1055
|
d: "M11.9993 7.32625L18.3893 17.5563H5.60929L11.9993 7.32625ZM11.1493 4.91625L2.94929 18.0262C2.53929 18.6962 3.01929 19.5563 3.79929 19.5563H20.1993C20.9893 19.5563 21.4593 18.6962 21.0493 18.0262L12.8493 4.91625C12.4593 4.28625 11.5393 4.28625 11.1493 4.91625Z",
|
|
1051
1056
|
fill: "#7B0DFF"
|
|
1052
1057
|
})));
|
|
1053
1058
|
};
|
|
1054
1059
|
|
|
1055
|
-
var StyledUgIcon = styled__default["default"].span(templateObject_1$
|
|
1060
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
|
|
1056
1061
|
var Icon = function (props) {
|
|
1057
1062
|
var children = function (type, size) {
|
|
1058
1063
|
if (size === void 0) { size = 24; }
|
|
@@ -1063,11 +1068,11 @@ var Icon = function (props) {
|
|
|
1063
1068
|
if (type === "circle")
|
|
1064
1069
|
return jsxRuntime.jsx(SvgUgCircle, __assign({}, props && !props.size, props && { width: size, height: size }));
|
|
1065
1070
|
};
|
|
1066
|
-
return (jsxRuntime.jsx(StyledUgIcon, { children: children(props.type, props.size) }));
|
|
1071
|
+
return (jsxRuntime.jsx(StyledUgIcon$1, { children: children(props.type, props.size) }));
|
|
1067
1072
|
};
|
|
1068
|
-
var templateObject_1$
|
|
1073
|
+
var templateObject_1$w;
|
|
1069
1074
|
|
|
1070
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1075
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
|
|
1071
1076
|
/**
|
|
1072
1077
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1073
1078
|
* <hr>
|
|
@@ -1079,9 +1084,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1079
1084
|
- When loading page content, use a Skeleton loader instead
|
|
1080
1085
|
*/
|
|
1081
1086
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1082
|
-
var templateObject_1$
|
|
1087
|
+
var templateObject_1$v;
|
|
1083
1088
|
|
|
1084
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
1089
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
|
|
1085
1090
|
/**
|
|
1086
1091
|
* A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
|
|
1087
1092
|
* <hr>
|
|
@@ -1096,9 +1101,9 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
1096
1101
|
- To communicate a typing status, use Inline instead
|
|
1097
1102
|
*/
|
|
1098
1103
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
1099
|
-
var templateObject_1$
|
|
1104
|
+
var templateObject_1$u;
|
|
1100
1105
|
|
|
1101
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1106
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
|
|
1102
1107
|
/**
|
|
1103
1108
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1104
1109
|
* <hr>
|
|
@@ -1107,7 +1112,7 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1107
1112
|
- To provide a quick way to navigate to ancestor pages
|
|
1108
1113
|
*/
|
|
1109
1114
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1110
|
-
var templateObject_1$
|
|
1115
|
+
var templateObject_1$t;
|
|
1111
1116
|
|
|
1112
1117
|
/**
|
|
1113
1118
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -1124,18 +1129,18 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
1124
1129
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
1125
1130
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
1126
1131
|
|
|
1127
|
-
var _path$
|
|
1132
|
+
var _path$d;
|
|
1128
1133
|
|
|
1129
|
-
function _extends$
|
|
1134
|
+
function _extends$f() { _extends$f = Object.assign || 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$f.apply(this, arguments); }
|
|
1130
1135
|
|
|
1131
1136
|
var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
1132
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1137
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
|
|
1133
1138
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1134
1139
|
width: 16,
|
|
1135
1140
|
height: 16,
|
|
1136
1141
|
focusable: "false",
|
|
1137
1142
|
viewBox: "0 0 16 16"
|
|
1138
|
-
}, props), _path$
|
|
1143
|
+
}, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1139
1144
|
fill: "currentColor",
|
|
1140
1145
|
d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
|
|
1141
1146
|
})));
|
|
@@ -1198,7 +1203,7 @@ var Logo = function (props) {
|
|
|
1198
1203
|
}[props.type] })));
|
|
1199
1204
|
};
|
|
1200
1205
|
|
|
1201
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
1206
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1202
1207
|
var theme = _a.theme;
|
|
1203
1208
|
return theme.palette.grey["800"];
|
|
1204
1209
|
});
|
|
@@ -1207,9 +1212,9 @@ var FooterItem = reactModals.FooterItem;
|
|
|
1207
1212
|
Modal.Header = reactModals.Header;
|
|
1208
1213
|
Modal.Body = ugModalBody;
|
|
1209
1214
|
Modal.Footer = reactModals.Footer;
|
|
1210
|
-
var templateObject_1$
|
|
1215
|
+
var templateObject_1$s;
|
|
1211
1216
|
|
|
1212
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1217
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1213
1218
|
var theme = _a.theme;
|
|
1214
1219
|
return theme.palette.white;
|
|
1215
1220
|
});
|
|
@@ -1217,33 +1222,33 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$h ||
|
|
|
1217
1222
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1218
1223
|
*/
|
|
1219
1224
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1220
|
-
var templateObject_1$
|
|
1225
|
+
var templateObject_1$r;
|
|
1221
1226
|
|
|
1222
1227
|
/**
|
|
1223
1228
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
1224
1229
|
*/
|
|
1225
1230
|
var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
|
|
1226
1231
|
|
|
1227
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1232
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; });
|
|
1228
1233
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1229
|
-
var templateObject_1$
|
|
1234
|
+
var templateObject_1$q;
|
|
1230
1235
|
|
|
1231
1236
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(reactChrome.HeaderItemText, __assign({}, props)); };
|
|
1232
1237
|
|
|
1233
1238
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1234
1239
|
|
|
1235
|
-
var _path$
|
|
1240
|
+
var _path$c;
|
|
1236
1241
|
|
|
1237
|
-
function _extends$
|
|
1242
|
+
function _extends$e() { _extends$e = Object.assign || 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$e.apply(this, arguments); }
|
|
1238
1243
|
|
|
1239
1244
|
var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
1240
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1245
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
|
|
1241
1246
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1242
1247
|
width: 16,
|
|
1243
1248
|
height: 16,
|
|
1244
1249
|
focusable: "false",
|
|
1245
1250
|
viewBox: "0 0 16 16"
|
|
1246
|
-
}, props), _path$
|
|
1251
|
+
}, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1247
1252
|
fill: "none",
|
|
1248
1253
|
stroke: "currentColor",
|
|
1249
1254
|
strokeLinecap: "round",
|
|
@@ -1251,18 +1256,18 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1251
1256
|
})));
|
|
1252
1257
|
};
|
|
1253
1258
|
|
|
1254
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1259
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$p || (templateObject_1$p = __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) {
|
|
1255
1260
|
var theme = _a.theme;
|
|
1256
1261
|
return theme.breakpoints.sm;
|
|
1257
1262
|
});
|
|
1258
|
-
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$
|
|
1263
|
+
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1259
1264
|
var theme = _a.theme;
|
|
1260
1265
|
return theme.palette.blue["600"];
|
|
1261
1266
|
}, function (_a) {
|
|
1262
1267
|
var theme = _a.theme;
|
|
1263
1268
|
return theme.breakpoints.sm;
|
|
1264
1269
|
});
|
|
1265
|
-
var MenuItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1270
|
+
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1266
1271
|
var theme = _a.theme;
|
|
1267
1272
|
return theme.palette.blue["600"];
|
|
1268
1273
|
}, function (_a) {
|
|
@@ -1270,11 +1275,11 @@ var MenuItem = styled__default["default"](reactChrome.HeaderItem)(templateObject
|
|
|
1270
1275
|
return theme.breakpoints.sm;
|
|
1271
1276
|
});
|
|
1272
1277
|
var BrandItem = function (props) {
|
|
1273
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem, __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.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) })))] }));
|
|
1278
|
+
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.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) })))] }));
|
|
1274
1279
|
};
|
|
1275
|
-
var templateObject_1$
|
|
1280
|
+
var templateObject_1$p, templateObject_2$a, templateObject_3$5;
|
|
1276
1281
|
|
|
1277
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1282
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.Headers.height);
|
|
1278
1283
|
/**
|
|
1279
1284
|
* An Header is a visual way to display general information.
|
|
1280
1285
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1283,20 +1288,20 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1283
1288
|
Header.HeaderItem = HeaderItem;
|
|
1284
1289
|
Header.HeaderItemText = HeaderItemText;
|
|
1285
1290
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1286
|
-
var templateObject_1$
|
|
1291
|
+
var templateObject_1$o;
|
|
1287
1292
|
|
|
1288
|
-
var _path$
|
|
1293
|
+
var _path$b, _path2;
|
|
1289
1294
|
|
|
1290
|
-
function _extends$
|
|
1295
|
+
function _extends$d() { _extends$d = Object.assign || 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$d.apply(this, arguments); }
|
|
1291
1296
|
|
|
1292
1297
|
var SvgMegaphoneStroke = function SvgMegaphoneStroke(props) {
|
|
1293
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1298
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
|
|
1294
1299
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1295
1300
|
width: 16,
|
|
1296
1301
|
height: 16,
|
|
1297
1302
|
focusable: "false",
|
|
1298
1303
|
viewBox: "0 0 16 16"
|
|
1299
|
-
}, props), _path$
|
|
1304
|
+
}, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1300
1305
|
fill: "none",
|
|
1301
1306
|
stroke: "currentColor",
|
|
1302
1307
|
d: "M4.5 4.5v7H4a3.5 3.5 0 010-7h.5zm0 7h3V14a1.5 1.5 0 01-3 0v-2.5z"
|
|
@@ -1306,24 +1311,24 @@ var SvgMegaphoneStroke = function SvgMegaphoneStroke(props) {
|
|
|
1306
1311
|
})));
|
|
1307
1312
|
};
|
|
1308
1313
|
|
|
1309
|
-
var _path$
|
|
1314
|
+
var _path$a;
|
|
1310
1315
|
|
|
1311
|
-
function _extends$
|
|
1316
|
+
function _extends$c() { _extends$c = Object.assign || 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$c.apply(this, arguments); }
|
|
1312
1317
|
|
|
1313
1318
|
var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
1314
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1319
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
|
|
1315
1320
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1316
1321
|
width: 16,
|
|
1317
1322
|
height: 16,
|
|
1318
1323
|
focusable: "false",
|
|
1319
1324
|
viewBox: "0 0 16 16"
|
|
1320
|
-
}, props), _path$
|
|
1325
|
+
}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1321
1326
|
fill: "currentColor",
|
|
1322
1327
|
d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
|
|
1323
1328
|
})));
|
|
1324
1329
|
};
|
|
1325
1330
|
|
|
1326
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1331
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1327
1332
|
var theme = _a.theme;
|
|
1328
1333
|
return theme.breakpoints.sm;
|
|
1329
1334
|
});
|
|
@@ -1333,11 +1338,11 @@ var ChevronButton = styled__default["default"](IconButton)(templateObject_1$d ||
|
|
|
1333
1338
|
*/
|
|
1334
1339
|
var AppHeader = function (_a) {
|
|
1335
1340
|
var brand = _a.brand, avatar = _a.avatar, args = __rest(_a, ["brand", "avatar"]);
|
|
1336
|
-
return (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && (jsxRuntime.jsx(HeaderItem, __assign({ onClick: args.onChangelogClick, style: { marginRight: "-" + theme.space.sm } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMegaphoneStroke, {}) }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick:
|
|
1341
|
+
return (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && (jsxRuntime.jsx(HeaderItem, __assign({ onClick: args.onChangelogClick, style: { marginRight: "-" + theme.space.sm } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMegaphoneStroke, {}) }) }))), 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, {}) }))] }) }) }))] })));
|
|
1337
1342
|
};
|
|
1338
|
-
var templateObject_1$
|
|
1343
|
+
var templateObject_1$n;
|
|
1339
1344
|
|
|
1340
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
1345
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$m || (templateObject_1$m = __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"], ["\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"])), function (_a) {
|
|
1341
1346
|
var theme = _a.theme;
|
|
1342
1347
|
return theme.breakpoints.sm;
|
|
1343
1348
|
}, function (_a) {
|
|
@@ -1348,9 +1353,9 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$c ||
|
|
|
1348
1353
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
1349
1354
|
*/
|
|
1350
1355
|
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1351
|
-
var templateObject_1$
|
|
1356
|
+
var templateObject_1$m;
|
|
1352
1357
|
|
|
1353
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1358
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n padding-left: ", ";\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n padding-left: ", ";\n"])), function (_a) {
|
|
1354
1359
|
var theme = _a.theme;
|
|
1355
1360
|
return theme.borders.sm;
|
|
1356
1361
|
}, function (_a) {
|
|
@@ -1372,10 +1377,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$b || (t
|
|
|
1372
1377
|
- To give a consistent dashboard and navigation experience
|
|
1373
1378
|
*/
|
|
1374
1379
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1375
|
-
var templateObject_1$
|
|
1380
|
+
var templateObject_1$l;
|
|
1376
1381
|
|
|
1377
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1378
|
-
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$
|
|
1382
|
+
var SelectedItemStyle = styled.css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1383
|
+
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\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 ", "\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 (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
|
|
1379
1384
|
return props.isCurrent &&
|
|
1380
1385
|
"\n color: ".concat(props.theme.palette.blue["700"], ";\n font-weight: ").concat(props.theme.fontWeights.semibold, ";\n ");
|
|
1381
1386
|
});
|
|
@@ -1383,11 +1388,11 @@ var NavItem = function (props) {
|
|
|
1383
1388
|
// const { isExpanded } = props;
|
|
1384
1389
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1385
1390
|
};
|
|
1386
|
-
var templateObject_1$
|
|
1391
|
+
var templateObject_1$k, templateObject_2$9;
|
|
1387
1392
|
|
|
1388
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1393
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
|
|
1389
1394
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1390
|
-
var templateObject_1$
|
|
1395
|
+
var templateObject_1$j;
|
|
1391
1396
|
|
|
1392
1397
|
/**
|
|
1393
1398
|
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
@@ -1396,24 +1401,24 @@ var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis
|
|
|
1396
1401
|
|
|
1397
1402
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1398
1403
|
|
|
1399
|
-
var _path$
|
|
1404
|
+
var _path$9;
|
|
1400
1405
|
|
|
1401
|
-
function _extends$
|
|
1406
|
+
function _extends$b() { _extends$b = Object.assign || 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$b.apply(this, arguments); }
|
|
1402
1407
|
|
|
1403
1408
|
var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
|
|
1404
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1409
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
|
|
1405
1410
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1406
1411
|
width: 16,
|
|
1407
1412
|
height: 16,
|
|
1408
1413
|
focusable: "false",
|
|
1409
1414
|
viewBox: "0 0 16 16"
|
|
1410
|
-
}, props), _path$
|
|
1415
|
+
}, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1411
1416
|
fill: "currentColor",
|
|
1412
1417
|
d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
|
|
1413
1418
|
})));
|
|
1414
1419
|
};
|
|
1415
1420
|
|
|
1416
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
1421
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$i || (templateObject_1$i = __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) {
|
|
1417
1422
|
var theme = _a.theme;
|
|
1418
1423
|
return theme.space.base * 6;
|
|
1419
1424
|
}, function (_a) {
|
|
@@ -1438,42 +1443,42 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$8 ||
|
|
|
1438
1443
|
var NavToggle = function (props) {
|
|
1439
1444
|
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%" } })) })));
|
|
1440
1445
|
};
|
|
1441
|
-
var templateObject_1$
|
|
1446
|
+
var templateObject_1$i;
|
|
1442
1447
|
|
|
1443
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
1444
|
-
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, {
|
|
1445
|
-
var templateObject_1$
|
|
1448
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$h || (templateObject_1$h = __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;"; });
|
|
1449
|
+
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1450
|
+
var templateObject_1$h;
|
|
1446
1451
|
|
|
1447
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1448
|
-
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$
|
|
1452
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$g || (templateObject_1$g = __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; });
|
|
1453
|
+
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
1449
1454
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1450
1455
|
NavItemProject.Title = NavItemText;
|
|
1451
1456
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1452
|
-
var templateObject_1$
|
|
1457
|
+
var templateObject_1$g, templateObject_2$8;
|
|
1453
1458
|
|
|
1454
|
-
var _path$
|
|
1459
|
+
var _path$8;
|
|
1455
1460
|
|
|
1456
|
-
function _extends$
|
|
1461
|
+
function _extends$a() { _extends$a = Object.assign || 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$a.apply(this, arguments); }
|
|
1457
1462
|
|
|
1458
1463
|
var SvgHomeFill = function SvgHomeFill(props) {
|
|
1459
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1464
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
|
|
1460
1465
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1461
1466
|
width: 26,
|
|
1462
1467
|
height: 26,
|
|
1463
1468
|
focusable: "false",
|
|
1464
1469
|
viewBox: "0 0 26 26"
|
|
1465
|
-
}, props), _path$
|
|
1470
|
+
}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1466
1471
|
fill: "currentColor",
|
|
1467
1472
|
d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
|
|
1468
1473
|
})));
|
|
1469
1474
|
};
|
|
1470
1475
|
|
|
1471
|
-
var _linearGradient, _path;
|
|
1476
|
+
var _linearGradient, _path$7;
|
|
1472
1477
|
|
|
1473
|
-
function _extends$
|
|
1478
|
+
function _extends$9() { _extends$9 = Object.assign || 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$9.apply(this, arguments); }
|
|
1474
1479
|
|
|
1475
1480
|
var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
|
|
1476
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1481
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
|
|
1477
1482
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1478
1483
|
width: 26,
|
|
1479
1484
|
height: 26,
|
|
@@ -1489,7 +1494,7 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
|
|
|
1489
1494
|
className: "stop3",
|
|
1490
1495
|
offset: "100%",
|
|
1491
1496
|
stopColor: "#001825"
|
|
1492
|
-
}))), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1497
|
+
}))), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1493
1498
|
fill: "url(#unguessIconGradient)",
|
|
1494
1499
|
d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
|
|
1495
1500
|
})));
|
|
@@ -1497,10 +1502,10 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
|
|
|
1497
1502
|
|
|
1498
1503
|
var _g, _defs;
|
|
1499
1504
|
|
|
1500
|
-
function _extends() { _extends = Object.assign || 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.apply(this, arguments); }
|
|
1505
|
+
function _extends$8() { _extends$8 = Object.assign || 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$8.apply(this, arguments); }
|
|
1501
1506
|
|
|
1502
1507
|
var SvgToken = function SvgToken(props) {
|
|
1503
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
1508
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
|
|
1504
1509
|
fill: "none",
|
|
1505
1510
|
viewBox: "0 0 32 32",
|
|
1506
1511
|
xmlns: "http://www.w3.org/2000/svg"
|
|
@@ -1547,7 +1552,7 @@ var SvgToken = function SvgToken(props) {
|
|
|
1547
1552
|
*/
|
|
1548
1553
|
var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
|
|
1549
1554
|
|
|
1550
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
1555
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
1551
1556
|
/**
|
|
1552
1557
|
* The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
|
|
1553
1558
|
* <br>
|
|
@@ -1562,7 +1567,7 @@ var Sidebar = function (props) {
|
|
|
1562
1567
|
return (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: "12 Tokens" }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return setNav("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.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), props.projects &&
|
|
1563
1568
|
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return setNav(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" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
1564
1569
|
};
|
|
1565
|
-
var templateObject_1$
|
|
1570
|
+
var templateObject_1$f;
|
|
1566
1571
|
|
|
1567
1572
|
/**
|
|
1568
1573
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -1583,7 +1588,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
1583
1588
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
1584
1589
|
var useToast = reactNotifications.useToast;
|
|
1585
1590
|
|
|
1586
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
1591
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject([""], [""])));
|
|
1587
1592
|
/**
|
|
1588
1593
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
1589
1594
|
|
|
@@ -1593,7 +1598,347 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
1593
1598
|
*/
|
|
1594
1599
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
1595
1600
|
var CursorPagination = reactPagination.CursorPagination;
|
|
1596
|
-
var templateObject_1$
|
|
1601
|
+
var templateObject_1$e;
|
|
1602
|
+
|
|
1603
|
+
var _path$6;
|
|
1604
|
+
|
|
1605
|
+
function _extends$7() { _extends$7 = Object.assign || 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$7.apply(this, arguments); }
|
|
1606
|
+
|
|
1607
|
+
var SvgExit = function SvgExit(props) {
|
|
1608
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
|
|
1609
|
+
width: 12,
|
|
1610
|
+
height: 13,
|
|
1611
|
+
viewBox: "0 0 12 13",
|
|
1612
|
+
fill: "#68737D",
|
|
1613
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1614
|
+
}, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1615
|
+
fillRule: "evenodd",
|
|
1616
|
+
clipRule: "evenodd",
|
|
1617
|
+
d: "M2.5 12.9992C2.37 12.9992 2.25 12.9492 2.15 12.8592L0.15 10.9292C0.0580183 10.8314 0.0047128 10.7034 0 10.5692V3.42923C0 3.29923 0.06 3.16923 0.15 3.06923L2.15 1.13923C2.3 0.999232 2.51 0.959232 2.7 1.03923C2.88 1.11923 3 1.29923 3 1.49923V2.99923H6C6.55614 2.99923 7 3.44309 7 3.99923V4.99923C7 5.27537 6.77614 5.49923 6.5 5.49923C6.22386 5.49923 6 5.27537 6 4.99923V3.99923H3V9.99923H6V8.99923C6 8.72309 6.22386 8.49923 6.5 8.49923C6.77614 8.49923 7 8.72309 7 8.99923V9.99923C7 10.5554 6.55614 10.9992 6 10.9992H3V12.4992C3 12.6992 2.88 12.8792 2.7 12.9592C2.63 12.9892 2.57 12.9992 2.5 12.9992ZM9.5 9.49923C9.44 9.49923 9.37 9.48923 9.31 9.45923C9.12311 9.38275 9.00074 9.20117 9 8.99923L8.99631 7.49923H5C4.72386 7.49923 4.5 7.27537 4.5 6.99923C4.5 6.72309 4.72386 6.49923 5 6.49923H8.99384L8.99 4.93923C8.99 4.73923 9.11 4.54923 9.3 4.47923C9.49 4.39923 9.7 4.44923 9.84 4.58923L11.51 6.28923C11.89 6.67923 11.89 7.30923 11.5 7.69923L9.85 9.34923C9.75972 9.44637 9.6326 9.50085 9.5 9.49923Z"
|
|
1618
|
+
})));
|
|
1619
|
+
};
|
|
1620
|
+
|
|
1621
|
+
var _path$5;
|
|
1622
|
+
|
|
1623
|
+
function _extends$6() { _extends$6 = Object.assign || 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$6.apply(this, arguments); }
|
|
1624
|
+
|
|
1625
|
+
var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
1626
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
1627
|
+
width: 16,
|
|
1628
|
+
height: 16,
|
|
1629
|
+
viewBox: "0 0 16 16",
|
|
1630
|
+
fill: "none",
|
|
1631
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1632
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1633
|
+
fillRule: "evenodd",
|
|
1634
|
+
clipRule: "evenodd",
|
|
1635
|
+
d: "M13.5 15C14.2828 15 14.8192 11.8284 15 7.5C15 7.22386 14.7761 7 14.5 7H9.5C9.22386 7 9 6.77614 9 6.5V2C9 1.44772 8.55229 1 8 1C7.44772 1 7 1.44772 7 2C7 4.97341 6.19918 6.46065 5.02719 6.8454C5.01015 6.85409 4.99957 6.87174 5 6.9L4.99891 15C4.99927 15 13.5 15 13.5 15ZM10 6H14.5C15.3284 6 16 6.67157 15.9996 7.52082C15.7692 13.0486 15.2701 16 13.5 16L5.03301 15.9989C4.75408 16.0174 4.48075 15.9146 4.28308 15.7169C4.08542 15.5193 3.98264 15.2459 4 15L4.00008 6.90914C3.99274 6.50762 4.21507 6.13707 4.64189 5.92566C5.41645 5.66747 6 4.58373 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2V6ZM1 7V15H2V7H1ZM1 6H2C2.55228 6 3 6.44772 3 7V15C3 15.5523 2.55228 16 2 16H1C0.447715 16 0 15.5523 0 15V7C0 6.44772 0.447715 6 1 6Z",
|
|
1636
|
+
fill: "#68737D"
|
|
1637
|
+
})));
|
|
1638
|
+
};
|
|
1639
|
+
|
|
1640
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __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; });
|
|
1641
|
+
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
1642
|
+
var templateObject_1$d;
|
|
1643
|
+
|
|
1644
|
+
var flexCenter = styled.css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1645
|
+
var flexColumnCenter = styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1646
|
+
var flexStart = styled.css(templateObject_3$4 || (templateObject_3$4 = __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) {
|
|
1647
|
+
var theme = _a.theme;
|
|
1648
|
+
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1649
|
+
});
|
|
1650
|
+
var templateObject_1$c, templateObject_2$7, templateObject_3$4;
|
|
1651
|
+
|
|
1652
|
+
/**
|
|
1653
|
+
* 1. Allows an item to contain a positioned sub-menu.
|
|
1654
|
+
* 2. Reset stacking context for sub-menu css-arrows.
|
|
1655
|
+
**/
|
|
1656
|
+
var StyledItem = styled__default["default"].li(templateObject_1$b || (templateObject_1$b = __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 \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\n \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) {
|
|
1657
|
+
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
1658
|
+
}, function (props) {
|
|
1659
|
+
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
1660
|
+
});
|
|
1661
|
+
var StyledBody$3 = styled__default["default"].li(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
1662
|
+
var IconContainer = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
|
|
1663
|
+
var theme = _a.theme;
|
|
1664
|
+
return theme.space.sm;
|
|
1665
|
+
});
|
|
1666
|
+
var MenuItemBody = styled__default["default"].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), flexStart);
|
|
1667
|
+
var MenuItem = function (_a) {
|
|
1668
|
+
var children = _a.children, selectedItem = _a.selectedItem, content = _a.content, props = __rest(_a, ["children", "selectedItem", "content"]);
|
|
1669
|
+
var isActive = selectedItem && selectedItem === props.value;
|
|
1670
|
+
var isVisible = isActive || selectedItem === "";
|
|
1671
|
+
if (!isVisible)
|
|
1672
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
1673
|
+
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));
|
|
1674
|
+
};
|
|
1675
|
+
var templateObject_1$b, templateObject_2$6, templateObject_3$3, templateObject_4$2;
|
|
1676
|
+
|
|
1677
|
+
var _path$4;
|
|
1678
|
+
|
|
1679
|
+
function _extends$5() { _extends$5 = Object.assign || 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$5.apply(this, arguments); }
|
|
1680
|
+
|
|
1681
|
+
var SvgQuestionMark = function SvgQuestionMark(props) {
|
|
1682
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
1683
|
+
width: 16,
|
|
1684
|
+
height: 16,
|
|
1685
|
+
viewBox: "0 0 16 16",
|
|
1686
|
+
fill: "#68737D",
|
|
1687
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1688
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1689
|
+
fillRule: "evenodd",
|
|
1690
|
+
clipRule: "evenodd",
|
|
1691
|
+
d: "M7.99997 11.5C8.55226 11.5 8.99997 11.0523 8.99997 10.5V9.4C8.99997 8.83787 9.33361 8.32072 9.92997 7.948C11.3791 7.15957 12.2479 5.53522 11.9883 3.84794C11.7161 2.21413 10.3858 0.883851 8.76437 0.613605C6.74482 0.234732 4.81137 1.36258 4.24419 3.20591C4.08177 3.73378 4.37802 4.29336 4.90589 4.45578C5.43375 4.6182 5.99333 4.32195 6.15575 3.79409C6.41982 2.93586 7.36323 2.38554 8.41568 2.58287C9.2141 2.71615 9.88382 3.38587 10.0136 4.1644C10.139 4.98036 9.70294 5.79565 8.92112 6.2221C7.72579 6.96712 6.99997 8.09213 6.99997 9.4V10.5C6.99997 11.0523 7.44769 11.5 7.99997 11.5ZM7.99997 15.5C8.8284 15.5 9.49997 14.8284 9.49997 14C9.49997 13.1716 8.8284 12.5 7.99997 12.5C7.17155 12.5 6.49997 13.1716 6.49997 14C6.49997 14.8284 7.17155 15.5 7.99997 15.5Z"
|
|
1692
|
+
})));
|
|
1693
|
+
};
|
|
1694
|
+
|
|
1695
|
+
var _path$3;
|
|
1696
|
+
|
|
1697
|
+
function _extends$4() { _extends$4 = Object.assign || 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$4.apply(this, arguments); }
|
|
1698
|
+
|
|
1699
|
+
var SvgCopy = function SvgCopy(props) {
|
|
1700
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
1701
|
+
width: 12,
|
|
1702
|
+
height: 16,
|
|
1703
|
+
viewBox: "0 0 12 16",
|
|
1704
|
+
fill: "none",
|
|
1705
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1706
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1707
|
+
fillRule: "evenodd",
|
|
1708
|
+
clipRule: "evenodd",
|
|
1709
|
+
d: "M2.625 10C2.83211 10 3 10.2239 3 10.5C3 10.7761 2.83211 11 2.625 11H0.75C0.335786 11 0 10.5523 0 10V1C0 0.447715 0.335786 0 0.75 0H7.5C7.91421 0 8.25 0.447715 8.25 1V3.5C8.25 3.77614 8.08211 4 7.875 4C7.66789 4 7.5 3.77614 7.5 3.5V1H0.75V10H2.625ZM4.5 6V15H11.25V6H4.5ZM4.5 5H11.25C11.6642 5 12 5.44772 12 6V15C12 15.5523 11.6642 16 11.25 16H4.5C4.08579 16 3.75 15.5523 3.75 15V6C3.75 5.44772 4.08579 5 4.5 5Z",
|
|
1710
|
+
fill: "#003A57"
|
|
1711
|
+
})));
|
|
1712
|
+
};
|
|
1713
|
+
|
|
1714
|
+
var _path$2;
|
|
1715
|
+
|
|
1716
|
+
function _extends$3() { _extends$3 = Object.assign || 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$3.apply(this, arguments); }
|
|
1717
|
+
|
|
1718
|
+
var SvgInfoFill = function SvgInfoFill(props) {
|
|
1719
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
1720
|
+
width: 16,
|
|
1721
|
+
height: 16,
|
|
1722
|
+
viewBox: "0 0 16 16",
|
|
1723
|
+
fill: "#68737D",
|
|
1724
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1725
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1726
|
+
fillRule: "evenodd",
|
|
1727
|
+
clipRule: "evenodd",
|
|
1728
|
+
d: "M7.5 16C3.36 16 0 12.64 0 8.5C0 4.36 3.36 1 7.5 1C11.64 1 15 4.36 15 8.5C15 12.64 11.64 16 7.5 16ZM7 12.5C7 12.78 7.22 13 7.5 13C7.78 13 8 12.78 8 12.5V8C8 7.72 7.78 7.5 7.5 7.5C7.22 7.5 7 7.72 7 8V12.5ZM7.5 4C6.95 4 6.5 4.45 6.5 5C6.5 5.55 6.95 6 7.5 6C8.05 6 8.5 5.55 8.5 5C8.5 4.45 8.05 4 7.5 4Z"
|
|
1729
|
+
})));
|
|
1730
|
+
};
|
|
1731
|
+
|
|
1732
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; });
|
|
1733
|
+
var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$1, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
|
|
1734
|
+
var templateObject_1$a;
|
|
1735
|
+
|
|
1736
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
|
|
1737
|
+
/**
|
|
1738
|
+
* Use Paragraph to render blocks of text with Garden styling.
|
|
1739
|
+
*/
|
|
1740
|
+
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
1741
|
+
var templateObject_1$9;
|
|
1742
|
+
|
|
1743
|
+
var getInitials = function (name) {
|
|
1744
|
+
var names = name.split(" ");
|
|
1745
|
+
var initials = names.map(function (n) { return n[0]; }).join("");
|
|
1746
|
+
return initials;
|
|
1747
|
+
};
|
|
1748
|
+
|
|
1749
|
+
var StyledButton = styled__default["default"](Button)(templateObject_1$8 || (templateObject_1$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]; });
|
|
1750
|
+
var StyledBody$2 = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
1751
|
+
var theme = _a.theme;
|
|
1752
|
+
return theme.space.base * 6;
|
|
1753
|
+
}, function (_a) {
|
|
1754
|
+
var theme = _a.theme;
|
|
1755
|
+
return theme.space.base * 4;
|
|
1756
|
+
});
|
|
1757
|
+
var StyledParagraph = styled__default["default"](Paragraph)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (_a) {
|
|
1758
|
+
var theme = _a.theme;
|
|
1759
|
+
return theme.space.base * 4;
|
|
1760
|
+
});
|
|
1761
|
+
var Footer = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin-top: auto;\n"], ["\n margin-top: auto;\n"])));
|
|
1762
|
+
var Description = styled__default["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n justify-content: space-between;\n text-align: center;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"], ["\n ", "\n justify-content: space-between;\n text-align: center;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"])), flexCenter, theme.fontWeights.regular, theme.fontSizes.sm, theme.palette.grey["600"]);
|
|
1763
|
+
var HelpItem = function (props) {
|
|
1764
|
+
var _a, _b, _c;
|
|
1765
|
+
var copyToClipBoard = function () {
|
|
1766
|
+
navigator.clipboard.writeText(props.csm.email);
|
|
1767
|
+
};
|
|
1768
|
+
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, __assign({ style: { color: theme.palette.blue[600] } }, { 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: props.csm.email })), jsxRuntime.jsxs(Button, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] }))] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
|
|
1769
|
+
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 })) }));
|
|
1770
|
+
};
|
|
1771
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
1772
|
+
|
|
1773
|
+
var _path$1;
|
|
1774
|
+
|
|
1775
|
+
function _extends$2() { _extends$2 = Object.assign || 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$2.apply(this, arguments); }
|
|
1776
|
+
|
|
1777
|
+
var SvgCheckLg = function SvgCheckLg(props) {
|
|
1778
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
1779
|
+
width: 16,
|
|
1780
|
+
height: 16,
|
|
1781
|
+
viewBox: "0 0 16 16",
|
|
1782
|
+
fill: "#68737D",
|
|
1783
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1784
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1785
|
+
fillRule: "evenodd",
|
|
1786
|
+
clipRule: "evenodd",
|
|
1787
|
+
d: "M14.6464 2.64645C14.8417 2.45118 15.1583 2.45118 15.3536 2.64645C15.5488 2.84171 15.5488 3.15829 15.3536 3.35355L5.35355 13.3536C5.15829 13.5488 4.84171 13.5488 4.64645 13.3536L0.646447 9.35355C0.451184 9.15829 0.451184 8.84171 0.646447 8.64645C0.841709 8.45118 1.15829 8.45118 1.35355 8.64645L5 12.2929L14.6464 2.64645Z"
|
|
1788
|
+
})));
|
|
1789
|
+
};
|
|
1790
|
+
|
|
1791
|
+
function _extends$1() { _extends$1 = Object.assign || 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); }
|
|
1792
|
+
|
|
1793
|
+
var SvgEmpty = function SvgEmpty(props) {
|
|
1794
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
1795
|
+
width: 16,
|
|
1796
|
+
height: 16,
|
|
1797
|
+
viewBox: "0 0 16 16",
|
|
1798
|
+
fill: "#68737D",
|
|
1799
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1800
|
+
}, props));
|
|
1801
|
+
};
|
|
1802
|
+
|
|
1803
|
+
var _path;
|
|
1804
|
+
|
|
1805
|
+
function _extends() { _extends = Object.assign || 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.apply(this, arguments); }
|
|
1806
|
+
|
|
1807
|
+
var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
1808
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
1809
|
+
width: 16,
|
|
1810
|
+
height: 16,
|
|
1811
|
+
viewBox: "0 0 16 16",
|
|
1812
|
+
fill: "#68737D",
|
|
1813
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1814
|
+
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1815
|
+
fillRule: "evenodd",
|
|
1816
|
+
clipRule: "evenodd",
|
|
1817
|
+
d: "M6 8.31C6.0087 8.47711 5.93254 8.63735 5.79747 8.73613C5.6624 8.83491 5.48662 8.85893 5.33 8.8C5 8.68 4.71 8.5 4.45 8.31C3.9 8.73 3.26 9 2.5 9C2.22 9 2 8.78 2 8.5C2 8.22 2.22 8 2.5 8C2.94 8 3.34 7.86 3.69 7.63C2.9 6.73 2.55 5.72 2.53 5.66C2.44 5.4 2.58 5.11 2.84 5.03C3.1 4.94 3.39 5.08 3.47 5.34C3.47 5.35 3.78 6.21 4.43 6.95C5.19 6.04 5.64 4.75 5.86 4H2.5C2.22 4 2 3.78 2 3.5C2 3.22 2.22 3 2.5 3H4V2.5C4 2.22 4.22 2 4.5 2C4.78 2 5 2.22 5 2.5V3H6.5C6.65 3 6.79 3.07 6.89 3.18C6.98 3.3 7.02 3.45 6.99 3.6C6.98 3.65 6.91 3.98 6.77 4.43C7.11 4.17 7.53 4 8 4H9V1C9 0.45 8.55 0 8 0H1C0.45 0 0 0.45 0 1V10C0 10.55 0.45 11 1 11H6V8.31ZM5.67 7.86C5.86 7.93 5.99 8.1 6 8.29V6.35C5.77 6.79 5.5 7.22 5.18 7.61C5.33 7.71 5.49 7.79 5.67 7.86ZM15 5H8C7.45 5 7 5.45 7 6V15C7 15.55 7.45 16 8 16H15C15.55 16 16 15.55 16 15V6C16 5.45 15.55 5 15 5ZM13.7 12.96C13.4459 13.0656 13.1538 12.9505 13.04 12.7L12.73 12H10.27L9.96 12.7C9.85 12.95 9.55 13.07 9.3 12.95C9.05 12.83 8.93 12.54 9.05 12.29L11.05 7.79C11.21 7.43 11.8 7.43 11.96 7.79L13.96 12.29C14.07 12.55 13.96 12.84 13.7 12.96ZM10.71 11H12.29L11.5 9.23L10.71 11Z"
|
|
1818
|
+
})));
|
|
1819
|
+
};
|
|
1820
|
+
|
|
1821
|
+
var StyledBody$1 = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
1822
|
+
var theme = _a.theme;
|
|
1823
|
+
return theme.space.base * 6;
|
|
1824
|
+
}, function (_a) {
|
|
1825
|
+
var theme = _a.theme;
|
|
1826
|
+
return theme.space.base * 4;
|
|
1827
|
+
});
|
|
1828
|
+
var StyledButtonContainer = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n & button { \n justify-content: flex-start;\n }\n"], ["\n ", "\n & button { \n justify-content: flex-start;\n }\n"])), flexStart);
|
|
1829
|
+
var LanguageItem = function (props) {
|
|
1830
|
+
var _a;
|
|
1831
|
+
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(Button, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
|
|
1832
|
+
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] }))] }) })) }));
|
|
1833
|
+
};
|
|
1834
|
+
var templateObject_1$7, templateObject_2$4;
|
|
1835
|
+
|
|
1836
|
+
var ProfileContainer = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
1837
|
+
var theme = _a.theme;
|
|
1838
|
+
return theme.space.base * 2;
|
|
1839
|
+
}, function (_a) {
|
|
1840
|
+
var theme = _a.theme;
|
|
1841
|
+
return theme.space.base * 6;
|
|
1842
|
+
});
|
|
1843
|
+
var CompanyHolder = styled__default["default"](SM)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"], ["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"])), function (_a) {
|
|
1844
|
+
var theme = _a.theme;
|
|
1845
|
+
return theme.space.base * 2;
|
|
1846
|
+
}, function (_a) {
|
|
1847
|
+
var theme = _a.theme;
|
|
1848
|
+
return theme.space.base * 4;
|
|
1849
|
+
}, function (_a) {
|
|
1850
|
+
var theme = _a.theme;
|
|
1851
|
+
return theme.palette.blue["600"];
|
|
1852
|
+
});
|
|
1853
|
+
var UserDetails = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"])), function (_a) {
|
|
1854
|
+
var theme = _a.theme;
|
|
1855
|
+
return theme.space.base * 4;
|
|
1856
|
+
}, function (_a) {
|
|
1857
|
+
var theme = _a.theme;
|
|
1858
|
+
return theme.space.base * 6;
|
|
1859
|
+
});
|
|
1860
|
+
var UserContainer = function (props) {
|
|
1861
|
+
var _a;
|
|
1862
|
+
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 }))] })] }));
|
|
1863
|
+
};
|
|
1864
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$1;
|
|
1865
|
+
|
|
1866
|
+
var StyledList = styled__default["default"].ul(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
|
|
1867
|
+
var UserMenu = function (props) {
|
|
1868
|
+
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
1869
|
+
var toggleItem = function (item) {
|
|
1870
|
+
setActiveItem(item);
|
|
1871
|
+
};
|
|
1872
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick(); } }, { 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 }), 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, 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" }))] })] }));
|
|
1873
|
+
};
|
|
1874
|
+
var templateObject_1$5;
|
|
1875
|
+
|
|
1876
|
+
function debounce(callback, wait) {
|
|
1877
|
+
var timer;
|
|
1878
|
+
return function () {
|
|
1879
|
+
if (typeof timer !== "undefined")
|
|
1880
|
+
clearTimeout(timer);
|
|
1881
|
+
timer = setTimeout(function () {
|
|
1882
|
+
timer = undefined;
|
|
1883
|
+
callback();
|
|
1884
|
+
}, wait);
|
|
1885
|
+
};
|
|
1886
|
+
}
|
|
1887
|
+
function useWindowSize() {
|
|
1888
|
+
var _a = React.useState({
|
|
1889
|
+
width: window.innerWidth,
|
|
1890
|
+
height: window.innerHeight,
|
|
1891
|
+
}), size = _a[0], setSize = _a[1];
|
|
1892
|
+
React.useLayoutEffect(function () {
|
|
1893
|
+
var debounceUpdateSize = debounce(function () {
|
|
1894
|
+
setSize({ width: window.innerWidth, height: window.innerHeight });
|
|
1895
|
+
}, 300);
|
|
1896
|
+
window.addEventListener("resize", debounceUpdateSize);
|
|
1897
|
+
debounceUpdateSize();
|
|
1898
|
+
return function () { return window.removeEventListener("resize", debounceUpdateSize); };
|
|
1899
|
+
}, []);
|
|
1900
|
+
return size;
|
|
1901
|
+
}
|
|
1902
|
+
|
|
1903
|
+
var StyledModal = styled__default["default"](Modal)(templateObject_1$4 || (templateObject_1$4 = __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) {
|
|
1904
|
+
var theme = _a.theme;
|
|
1905
|
+
return theme.space.xxl;
|
|
1906
|
+
}, function (_a) {
|
|
1907
|
+
var theme = _a.theme;
|
|
1908
|
+
return theme.breakpoints.sm;
|
|
1909
|
+
}, function (_a) {
|
|
1910
|
+
var theme = _a.theme;
|
|
1911
|
+
return "".concat(theme.components.Headers.height, " - ").concat(theme.space.xs);
|
|
1912
|
+
}, function (_a) {
|
|
1913
|
+
var theme = _a.theme;
|
|
1914
|
+
return theme.space.base * 3;
|
|
1915
|
+
});
|
|
1916
|
+
var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n margin: ", ";\n padding: 0;\n"], ["\n margin: ", ";\n padding: 0;\n"])), function (_a) {
|
|
1917
|
+
var theme = _a.theme;
|
|
1918
|
+
return theme.space.xxs + " " + theme.space.xs;
|
|
1919
|
+
});
|
|
1920
|
+
var backDropStyle = {
|
|
1921
|
+
backgroundColor: "transparent",
|
|
1922
|
+
alignItems: "start",
|
|
1923
|
+
justifyContent: "end",
|
|
1924
|
+
};
|
|
1925
|
+
/**
|
|
1926
|
+
* Profile Modal
|
|
1927
|
+
|
|
1928
|
+
* Used for this:
|
|
1929
|
+
- Show user main infos and actions
|
|
1930
|
+
|
|
1931
|
+
*/
|
|
1932
|
+
var ProfileModal = function (_a) {
|
|
1933
|
+
var menuArgs = _a.menuArgs, args = __rest(_a, ["menuArgs"]);
|
|
1934
|
+
var width = useWindowSize().width;
|
|
1935
|
+
var smBreakpoint = Number(theme.breakpoints.sm.replace("px", ""));
|
|
1936
|
+
var backDrop = {
|
|
1937
|
+
style: __assign({}, (width > smBreakpoint && __assign({}, backDropStyle))),
|
|
1938
|
+
};
|
|
1939
|
+
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
1940
|
+
};
|
|
1941
|
+
var templateObject_1$4, templateObject_2$2;
|
|
1597
1942
|
|
|
1598
1943
|
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
1599
1944
|
/**
|
|
@@ -1607,15 +1952,48 @@ var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 |
|
|
|
1607
1952
|
*/
|
|
1608
1953
|
var Table = function (props) { return jsxRuntime.jsx(UgTable, __assign({}, props)); };
|
|
1609
1954
|
// Extras
|
|
1610
|
-
var Head = function (props) { return jsxRuntime.jsx(reactTables.Head, __assign({}, props)); };
|
|
1955
|
+
var Head = function (props) { return (jsxRuntime.jsx(reactTables.Head, __assign({}, props))); };
|
|
1611
1956
|
var HeaderRow = function (props) { return jsxRuntime.jsx(reactTables.HeaderRow, __assign({}, props)); };
|
|
1612
1957
|
var HeaderCell = function (props) { return jsxRuntime.jsx(reactTables.HeaderCell, __assign({}, props)); };
|
|
1613
|
-
var Body = function (props) { return jsxRuntime.jsx(reactTables.Body, __assign({}, props)); };
|
|
1958
|
+
var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign({}, props))); };
|
|
1959
|
+
var Row = function (props) { return jsxRuntime.jsx(reactTables.Row, __assign({}, props)); };
|
|
1614
1960
|
var Cell = function (props) { return jsxRuntime.jsx(reactTables.Cell, __assign({}, props)); };
|
|
1615
|
-
var
|
|
1616
|
-
var Caption = function (props) { return jsxRuntime.jsx(reactTables.Caption, __assign({}, props)); };
|
|
1961
|
+
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
1617
1962
|
var templateObject_1$3;
|
|
1618
1963
|
|
|
1964
|
+
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
|
|
1965
|
+
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
|
|
1966
|
+
var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\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\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);
|
|
1967
|
+
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
1968
|
+
var GroupRowComponent = function (props) {
|
|
1969
|
+
var toggleIconAnimation = reactSpring.useSpring({
|
|
1970
|
+
config: { duration: 120 },
|
|
1971
|
+
transform: props.group.items.length > 0
|
|
1972
|
+
? props.open
|
|
1973
|
+
? "rotate(180deg)"
|
|
1974
|
+
: "rotate(0deg)"
|
|
1975
|
+
: "rotate(0deg)",
|
|
1976
|
+
});
|
|
1977
|
+
return (jsxRuntime.jsx(GroupRow, __assign({}, (props && props.group.items.length === 0 && { className: "empty" }), (props &&
|
|
1978
|
+
props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, __assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label, __assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, __assign({ style: toggleIconAnimation }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
|
|
1979
|
+
};
|
|
1980
|
+
var AnimatedRow = styled__default["default"](Row)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &.render {\n position: absolute;\n opacity: 0;\n z-index: -1;\n }\n\n &.show {\n position: static;\n opacity: 1;\n transition: all 0.6s ease;\n }\n"], ["\n &.render {\n position: absolute;\n opacity: 0;\n z-index: -1;\n }\n\n &.show {\n position: static;\n opacity: 1;\n transition: all 0.6s ease;\n }\n"])));
|
|
1981
|
+
var GroupComponent = function (_a) {
|
|
1982
|
+
var group = _a.group, columns = _a.columns;
|
|
1983
|
+
var _b = React.useState(true), open = _b[0], setOpen = _b[1];
|
|
1984
|
+
var handleToggle = function () {
|
|
1985
|
+
setOpen(!open);
|
|
1986
|
+
};
|
|
1987
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(GroupRowComponent, { colSpan: columns.length, handleToggle: handleToggle, open: open, group: group }), group.items.map(function (item, index) { return (jsxRuntime.jsx(AnimatedRow, __assign({ className: open ? "render show" : "render" }, { children: columns.map(function (column) { return (jsxRuntime.jsx(Cell, { children: item[column.field] }, column.field)); }) }), index)); })] }));
|
|
1988
|
+
};
|
|
1989
|
+
var GroupedTable = function (_a) {
|
|
1990
|
+
var columns = _a.columns, groups = _a.groups, args = __rest(_a, ["columns", "groups"]);
|
|
1991
|
+
return (jsxRuntime.jsxs(Table, __assign({ style: { minWidth: 500 } }, args, { children: [jsxRuntime.jsx(Head, { children: jsxRuntime.jsx(HeaderRow, { children: columns === null || columns === void 0 ? void 0 : columns.map(function (column) { return (jsxRuntime.jsx(HeaderCell, { children: column.name }, column.field)); }) }) }), jsxRuntime.jsx(Body, { children: groups === null || groups === void 0 ? void 0 : groups.map(function (group, index) {
|
|
1992
|
+
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
1993
|
+
}) })] })));
|
|
1994
|
+
};
|
|
1995
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4;
|
|
1996
|
+
|
|
1619
1997
|
/**
|
|
1620
1998
|
* Tiles are Radio buttons styled with icons or images.
|
|
1621
1999
|
|
|
@@ -1644,14 +2022,14 @@ var Trigger = function (props) { return jsxRuntime.jsx(reactDropdowns.Trigger, _
|
|
|
1644
2022
|
*/
|
|
1645
2023
|
var Blockquote = function (props) { return jsxRuntime.jsx(reactTypography.Blockquote, __assign({}, props)); };
|
|
1646
2024
|
|
|
1647
|
-
var UgCode = styled__default["default"](reactTypography.Code)(templateObject_1$
|
|
2025
|
+
var UgCode = styled__default["default"](reactTypography.Code)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
|
|
1648
2026
|
/**
|
|
1649
2027
|
* Use Code to style and format inline fragments of computer code.
|
|
1650
2028
|
*/
|
|
1651
2029
|
var Code = function (props) { return jsxRuntime.jsx(UgCode, __assign({}, props)); };
|
|
1652
|
-
var templateObject_1$
|
|
2030
|
+
var templateObject_1$1;
|
|
1653
2031
|
|
|
1654
|
-
var UgOrderedList = styled__default["default"](reactTypography.OrderedList)(templateObject_1
|
|
2032
|
+
var UgOrderedList = styled__default["default"](reactTypography.OrderedList)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
1655
2033
|
var UgUnorderedList = styled__default["default"](reactTypography.UnorderedList)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
|
|
1656
2034
|
/**
|
|
1657
2035
|
* Use Lists to style and format ordered and unordered lists.
|
|
@@ -1662,14 +2040,7 @@ var OrderedList = function (props) { return jsxRuntime.jsx(UgOrderedList, __assi
|
|
|
1662
2040
|
OrderedList.Item = UgOrderedList.Item;
|
|
1663
2041
|
var UnorderedList = function (props) { return jsxRuntime.jsx(UgUnorderedList, __assign({}, props)); };
|
|
1664
2042
|
UnorderedList.Item = UgUnorderedList.Item;
|
|
1665
|
-
var templateObject_1
|
|
1666
|
-
|
|
1667
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
1668
|
-
/**
|
|
1669
|
-
* Use Paragraph to render blocks of text with Garden styling.
|
|
1670
|
-
*/
|
|
1671
|
-
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
1672
|
-
var templateObject_1;
|
|
2043
|
+
var templateObject_1, templateObject_2;
|
|
1673
2044
|
|
|
1674
2045
|
Object.defineProperty(exports, 'ModalClose', {
|
|
1675
2046
|
enumerable: true,
|
|
@@ -1704,6 +2075,7 @@ exports.FormField = index;
|
|
|
1704
2075
|
exports.GlobalStyle = GlobalStyle;
|
|
1705
2076
|
exports.Grid = Grid;
|
|
1706
2077
|
exports.GroupRow = GroupRow;
|
|
2078
|
+
exports.GroupedTable = GroupedTable;
|
|
1707
2079
|
exports.Header = Header;
|
|
1708
2080
|
exports.HeaderCell = HeaderCell;
|
|
1709
2081
|
exports.HeaderItem = HeaderItem;
|
|
@@ -1714,12 +2086,16 @@ exports.Icon = Icon;
|
|
|
1714
2086
|
exports.IconButton = IconButton;
|
|
1715
2087
|
exports.Input = Input;
|
|
1716
2088
|
exports.Item = Item;
|
|
2089
|
+
exports.ItemMeta = ItemMeta;
|
|
1717
2090
|
exports.LG = LG;
|
|
1718
2091
|
exports.Label = Label;
|
|
1719
2092
|
exports.LoginForm = LoginForm;
|
|
1720
2093
|
exports.Logo = Logo;
|
|
1721
2094
|
exports.MD = MD;
|
|
1722
2095
|
exports.Main = Main;
|
|
2096
|
+
exports.MediaBody = MediaBody;
|
|
2097
|
+
exports.MediaFigure = MediaFigure;
|
|
2098
|
+
exports.MediaItem = MediaItem;
|
|
1723
2099
|
exports.Menu = Menu;
|
|
1724
2100
|
exports.Message = Message;
|
|
1725
2101
|
exports.Modal = Modal;
|
|
@@ -1731,24 +2107,29 @@ exports.NavItemIcon = NavItemIcon;
|
|
|
1731
2107
|
exports.NavItemProject = NavItemProject;
|
|
1732
2108
|
exports.NavItemText = NavItemText;
|
|
1733
2109
|
exports.NavToggle = NavToggle;
|
|
2110
|
+
exports.NextItem = NextItem;
|
|
1734
2111
|
exports.Notification = Notification;
|
|
1735
2112
|
exports.OrderedList = OrderedList;
|
|
1736
2113
|
exports.Pagination = Pagination;
|
|
1737
2114
|
exports.Paragraph = Paragraph;
|
|
2115
|
+
exports.PreviousItem = PreviousItem;
|
|
2116
|
+
exports.ProfileModal = ProfileModal;
|
|
1738
2117
|
exports.Progress = Progress;
|
|
1739
2118
|
exports.Radio = Radio;
|
|
1740
|
-
exports.Row = Row;
|
|
2119
|
+
exports.Row = Row$1;
|
|
1741
2120
|
exports.SM = SM;
|
|
1742
2121
|
exports.Select = Select;
|
|
2122
|
+
exports.Separator = Separator;
|
|
1743
2123
|
exports.Sidebar = Sidebar;
|
|
1744
2124
|
exports.Skeleton = Skeleton;
|
|
1745
2125
|
exports.Span = Span;
|
|
1746
2126
|
exports.Spinner = Spinner;
|
|
1747
2127
|
exports.SplitButton = SplitButton;
|
|
1748
2128
|
exports.Table = Table;
|
|
2129
|
+
exports.TableBody = Body;
|
|
1749
2130
|
exports.TableCell = Cell;
|
|
1750
2131
|
exports.TableHead = Head;
|
|
1751
|
-
exports.TableRow =
|
|
2132
|
+
exports.TableRow = Row;
|
|
1752
2133
|
exports.Tag = Tag;
|
|
1753
2134
|
exports.Textarea = Textarea;
|
|
1754
2135
|
exports.Tiles = Tiles;
|