@appquality/unguess-design-system 2.11.6 → 2.11.7
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 +12 -0
- package/build/index.d.ts +1 -0
- package/build/index.js +193 -127
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v2.11.7 (Wed Sep 07 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(input-toggle): add missing export for input-toggle component [#83](https://github.com/AppQuality/unguess-design-system/pull/83) ([@marcbon](https://github.com/marcbon))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v2.11.6 (Wed Sep 07 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/build/index.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ export * from "./stories/forms/checkbox";
|
|
|
29
29
|
export * from "./stories/forms/checkbox/cards";
|
|
30
30
|
export * as FormField from "./stories/forms/field";
|
|
31
31
|
export * from "./stories/forms/input";
|
|
32
|
+
export * from "./stories/forms/input-toggle";
|
|
32
33
|
export * from "./stories/forms/mediaInput";
|
|
33
34
|
export * from "./stories/forms/radio";
|
|
34
35
|
export * from "./stories/forms/radio/cards";
|
package/build/index.js
CHANGED
|
@@ -263,8 +263,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
263
263
|
|
|
264
264
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
265
265
|
|
|
266
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
267
|
-
var templateObject_1$
|
|
266
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
|
|
267
|
+
var templateObject_1$1g;
|
|
268
268
|
|
|
269
269
|
/**
|
|
270
270
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -279,14 +279,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
279
279
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
280
280
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
281
281
|
|
|
282
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
282
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"], ["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"])), function (_a) {
|
|
283
283
|
var theme = _a.theme;
|
|
284
284
|
return theme.palette.grey[700];
|
|
285
285
|
}, function (_a) {
|
|
286
286
|
var theme = _a.theme;
|
|
287
287
|
return theme.fontSizes.sm;
|
|
288
288
|
});
|
|
289
|
-
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$
|
|
289
|
+
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (_a) {
|
|
290
290
|
var theme = _a.theme;
|
|
291
291
|
return theme.fontSizes.md;
|
|
292
292
|
});
|
|
@@ -300,9 +300,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
300
300
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
301
301
|
Alert.Title = UgAlertTitle;
|
|
302
302
|
Alert.Close = reactNotifications.Close;
|
|
303
|
-
var templateObject_1$
|
|
303
|
+
var templateObject_1$1f, templateObject_2$w;
|
|
304
304
|
|
|
305
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
305
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
306
306
|
return props.avatarType &&
|
|
307
307
|
props.avatarType !== "image" &&
|
|
308
308
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -326,7 +326,7 @@ var Avatar = function (props) {
|
|
|
326
326
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
327
327
|
};
|
|
328
328
|
Avatar.Text = UgAvatar.Text;
|
|
329
|
-
var templateObject_1$
|
|
329
|
+
var templateObject_1$1e;
|
|
330
330
|
|
|
331
331
|
/**
|
|
332
332
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -357,7 +357,7 @@ var getThemeStyle = function (props) {
|
|
|
357
357
|
}
|
|
358
358
|
return theme;
|
|
359
359
|
};
|
|
360
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
360
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject([""], [""])));
|
|
361
361
|
/**
|
|
362
362
|
* Buttons let users take action quickly.
|
|
363
363
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -376,7 +376,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
|
|
|
376
376
|
var Button = ButtonComponent;
|
|
377
377
|
Button.StartIcon = UgButton.StartIcon;
|
|
378
378
|
Button.EndIcon = UgButton.EndIcon;
|
|
379
|
-
var templateObject_1$
|
|
379
|
+
var templateObject_1$1d;
|
|
380
380
|
|
|
381
381
|
/**
|
|
382
382
|
A Button group lets users make a selection from a set of options.
|
|
@@ -406,7 +406,7 @@ Used for this:
|
|
|
406
406
|
**/
|
|
407
407
|
var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
|
|
408
408
|
|
|
409
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
409
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
410
410
|
var theme = _a.theme;
|
|
411
411
|
return theme.borderRadii.lg;
|
|
412
412
|
}, function (_a) {
|
|
@@ -427,7 +427,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
427
427
|
- To group related content
|
|
428
428
|
*/
|
|
429
429
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
430
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$
|
|
430
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
431
431
|
var theme = _a.theme;
|
|
432
432
|
return theme.borderRadii.xl;
|
|
433
433
|
}, function (_a) {
|
|
@@ -444,7 +444,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
444
444
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
445
445
|
});
|
|
446
446
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
447
|
-
var templateObject_1$
|
|
447
|
+
var templateObject_1$1c, templateObject_2$v;
|
|
448
448
|
|
|
449
449
|
/**
|
|
450
450
|
* Tags let users categorize content using a keyword.
|
|
@@ -461,12 +461,12 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
461
461
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
462
462
|
Tag.Close = reactTags.Tag.Close;
|
|
463
463
|
|
|
464
|
-
var _g$5, _path$
|
|
464
|
+
var _g$5, _path$r;
|
|
465
465
|
|
|
466
|
-
function _extends$
|
|
466
|
+
function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
|
|
467
467
|
|
|
468
468
|
var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
|
|
469
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
469
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
|
|
470
470
|
width: 24,
|
|
471
471
|
height: 24,
|
|
472
472
|
viewBox: "0 0 24 24",
|
|
@@ -478,18 +478,18 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
|
|
|
478
478
|
opacity: 0.3,
|
|
479
479
|
d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
|
|
480
480
|
fill: "#003A57"
|
|
481
|
-
}))), _path$
|
|
481
|
+
}))), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
|
|
482
482
|
d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
|
|
483
483
|
fill: "#003A57"
|
|
484
484
|
})));
|
|
485
485
|
};
|
|
486
486
|
|
|
487
|
-
var _g$4, _path$
|
|
487
|
+
var _g$4, _path$q, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
|
|
488
488
|
|
|
489
|
-
function _extends$
|
|
489
|
+
function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
|
|
490
490
|
|
|
491
491
|
var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
492
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
492
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
|
|
493
493
|
width: 25,
|
|
494
494
|
height: 24,
|
|
495
495
|
viewBox: "0 0 25 24",
|
|
@@ -500,7 +500,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
500
500
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
501
501
|
d: "M12.1641 24C18.7915 24 24.1641 18.6274 24.1641 12C24.1641 5.37258 18.7915 0 12.1641 0C5.53665 0 0.164062 5.37258 0.164062 12C0.164062 18.6274 5.53665 24 12.1641 24Z",
|
|
502
502
|
fill: "#D3ECDB"
|
|
503
|
-
}))), _path$
|
|
503
|
+
}))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
|
|
504
504
|
opacity: 0.8,
|
|
505
505
|
d: "M12.653 3.1964C8.84605 3.1964 5.76496 6.27748 5.76496 10.0844C5.76496 10.2596 5.76496 10.4347 5.7904 10.5854C5.46458 11.1861 4.98908 12.0129 4.41279 12.5138C3.98719 12.8896 4.08697 13.2907 4.13687 13.4404C4.26211 13.7662 4.61237 14.0411 5.18866 14.2417C5.38924 14.3171 5.61427 14.367 5.81485 14.4169L5.84028 16.8463C5.84028 17.7983 6.6416 18.625 7.61905 18.625L9.09645 18.1495L9.24713 19.0262C9.34693 19.6025 9.84787 20.0281 10.4496 20.0281C10.5249 20.0281 10.6003 20.0281 10.6746 20.0026L15.3084 19.1769C15.9845 19.0516 16.4101 18.4254 16.3103 17.7494L15.9845 16.1213C18.1634 14.9188 19.541 12.5891 19.541 10.0843C19.541 6.30267 16.4356 3.19629 12.6529 3.19629L12.653 3.1964Z",
|
|
506
506
|
fill: "#70C38A"
|
|
@@ -557,18 +557,18 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
557
557
|
})));
|
|
558
558
|
};
|
|
559
559
|
|
|
560
|
-
var _path$
|
|
560
|
+
var _path$p, _path2$3, _path3$2, _path4$1;
|
|
561
561
|
|
|
562
|
-
function _extends$
|
|
562
|
+
function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
|
|
563
563
|
|
|
564
564
|
var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
|
|
565
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
565
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
|
|
566
566
|
width: 24,
|
|
567
567
|
height: 24,
|
|
568
568
|
viewBox: "0 0 24 24",
|
|
569
569
|
fill: "none",
|
|
570
570
|
xmlns: "http://www.w3.org/2000/svg"
|
|
571
|
-
}, props), _path$
|
|
571
|
+
}, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
|
|
572
572
|
d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
|
|
573
573
|
fill: "#F8F9F9"
|
|
574
574
|
})), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -583,18 +583,18 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
|
|
|
583
583
|
})));
|
|
584
584
|
};
|
|
585
585
|
|
|
586
|
-
var _path$
|
|
586
|
+
var _path$o, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
|
|
587
587
|
|
|
588
|
-
function _extends$
|
|
588
|
+
function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
|
|
589
589
|
|
|
590
590
|
var SvgCampaignProgress = function SvgCampaignProgress(props) {
|
|
591
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
591
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
|
|
592
592
|
width: 24,
|
|
593
593
|
height: 24,
|
|
594
594
|
viewBox: "0 0 24 24",
|
|
595
595
|
fill: "none",
|
|
596
596
|
xmlns: "http://www.w3.org/2000/svg"
|
|
597
|
-
}, props), _path$
|
|
597
|
+
}, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
|
|
598
598
|
d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
|
|
599
599
|
fill: "#F8F9F9"
|
|
600
600
|
})), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -630,18 +630,18 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
|
|
|
630
630
|
})));
|
|
631
631
|
};
|
|
632
632
|
|
|
633
|
-
var _path$
|
|
633
|
+
var _path$n, _path2$1, _path3;
|
|
634
634
|
|
|
635
|
-
function _extends$
|
|
635
|
+
function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
|
|
636
636
|
|
|
637
637
|
var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
638
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
638
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
|
|
639
639
|
width: 24,
|
|
640
640
|
height: 24,
|
|
641
641
|
viewBox: "0 0 24 24",
|
|
642
642
|
fill: "none",
|
|
643
643
|
xmlns: "http://www.w3.org/2000/svg"
|
|
644
|
-
}, props), _path$
|
|
644
|
+
}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
|
|
645
645
|
d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
|
|
646
646
|
fill: "#F8F9F9"
|
|
647
647
|
})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -659,7 +659,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
659
659
|
})));
|
|
660
660
|
};
|
|
661
661
|
|
|
662
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
662
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
663
663
|
return props.isLight ?
|
|
664
664
|
"\n &:before {\n background-image: linear-gradient(45deg, transparent, ".concat(props.theme.palette.grey[200], ", transparent);\n }\n ") : "\n background-color: ".concat(props.theme.palette.grey[200], ";\n ");
|
|
665
665
|
});
|
|
@@ -677,22 +677,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
677
677
|
- To communicate a typing status, use Inline instead
|
|
678
678
|
*/
|
|
679
679
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
680
|
-
var templateObject_1$
|
|
680
|
+
var templateObject_1$1b;
|
|
681
681
|
|
|
682
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
682
|
+
var CardMeta = styled__default["default"].div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
683
683
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
684
684
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n height: ").concat(theme.space.base * 6, "px;\n padding: ").concat(theme.space.xxs, " 0;\n margin-bottom: ").concat(theme.space.xs, ";\n ");
|
|
685
685
|
});
|
|
686
|
-
var templateObject_1$
|
|
686
|
+
var templateObject_1$1a;
|
|
687
687
|
|
|
688
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
688
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
689
689
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
690
690
|
return "\n display: flex;\n\n ".concat(!isStretched ? "max-width: ".concat(theme.space.base * 16, "px") : "", ";\n max-height: ").concat(isStretched ? '150px' : "".concat(theme.space.base * 16, "px"), ";\n ").concat(align === "left" ? "margin-right: auto;" : '', "\n ").concat(align === "right" ? "margin-left: auto;" : '', "\n ").concat(align === "center" || isStretched ? "margin: auto;" : '', "\n\n padding: ").concat(theme.space.xxs, " 0;\n\n svg {\n width: 100%;\n height: auto;\n }\n ");
|
|
691
691
|
});
|
|
692
692
|
CardThumbnail.defaultProps = {
|
|
693
693
|
align: "left"
|
|
694
694
|
};
|
|
695
|
-
var templateObject_1$
|
|
695
|
+
var templateObject_1$19;
|
|
696
696
|
|
|
697
697
|
/**
|
|
698
698
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -704,11 +704,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
704
704
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
705
705
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
706
706
|
|
|
707
|
-
var Label$2 = styled__default["default"](SM)(templateObject_1$
|
|
707
|
+
var Label$2 = styled__default["default"](SM)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
708
708
|
var theme = _a.theme;
|
|
709
709
|
return theme.palette.grey[500];
|
|
710
710
|
});
|
|
711
|
-
var Title$3 = styled__default["default"](LG)(templateObject_2$
|
|
711
|
+
var Title$3 = styled__default["default"](LG)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
712
712
|
var theme = _a.theme;
|
|
713
713
|
return theme.colors.primaryHue;
|
|
714
714
|
}, function (_a) {
|
|
@@ -718,14 +718,14 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$t || (templateObje
|
|
|
718
718
|
var theme = _a.theme;
|
|
719
719
|
return theme.space.xxs;
|
|
720
720
|
});
|
|
721
|
-
var Description$3 = styled__default["default"](MD)(templateObject_3$
|
|
721
|
+
var Description$3 = styled__default["default"](MD)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
722
722
|
var theme = _a.theme;
|
|
723
723
|
return theme.palette.grey[700];
|
|
724
724
|
}, function (_a) {
|
|
725
725
|
var theme = _a.theme;
|
|
726
726
|
return theme.space.xxs;
|
|
727
727
|
});
|
|
728
|
-
var Container$2 = styled__default["default"].div(templateObject_4$
|
|
728
|
+
var Container$2 = styled__default["default"].div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
729
729
|
var theme = _a.theme, align = _a.align;
|
|
730
730
|
return "\n display: flex;\n align-items: ".concat(align || "start", ";\n flex-direction: column;\n flex-grow: 1;\n justify-content: start;\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
731
731
|
});
|
|
@@ -733,9 +733,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
733
733
|
CardHeader.Label = Label$2;
|
|
734
734
|
CardHeader.Title = Title$3;
|
|
735
735
|
CardHeader.Text = Description$3;
|
|
736
|
-
var templateObject_1$
|
|
736
|
+
var templateObject_1$18, templateObject_2$u, templateObject_3$j, templateObject_4$d;
|
|
737
737
|
|
|
738
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
738
|
+
var Divider = styled__default["default"].div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
739
739
|
var theme = _a.theme;
|
|
740
740
|
return theme.space.base * 3;
|
|
741
741
|
}, function (_a) {
|
|
@@ -745,15 +745,15 @@ var Divider = styled__default["default"].div(templateObject_1$16 || (templateObj
|
|
|
745
745
|
var theme = _a.theme;
|
|
746
746
|
return theme.palette.grey["300"];
|
|
747
747
|
});
|
|
748
|
-
var Footer$2 = styled__default["default"].div(templateObject_2$
|
|
749
|
-
var Container$1 = styled__default["default"].div(templateObject_3$
|
|
748
|
+
var Footer$2 = styled__default["default"].div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"])));
|
|
749
|
+
var Container$1 = styled__default["default"].div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
750
750
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
751
751
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
|
|
752
752
|
});
|
|
753
753
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
754
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$17, templateObject_2$t, templateObject_3$i;
|
|
755
755
|
|
|
756
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
756
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n\n ", "\n"])), function (_a) {
|
|
757
757
|
var theme = _a.theme;
|
|
758
758
|
return theme.borderRadii.lg;
|
|
759
759
|
}, function (_a) {
|
|
@@ -783,7 +783,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
783
783
|
SpecialCard.Thumb = CardThumbnail;
|
|
784
784
|
SpecialCard.Header = CardHeader;
|
|
785
785
|
SpecialCard.Footer = CardFooter;
|
|
786
|
-
var templateObject_1$
|
|
786
|
+
var templateObject_1$16;
|
|
787
787
|
|
|
788
788
|
var CampaignCardSkeleton = function () {
|
|
789
789
|
return (jsxRuntime.jsxs(SpecialCard, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
@@ -816,11 +816,11 @@ var getTypeDataIcon = function (type) {
|
|
|
816
816
|
return SvgCampaignFunctional;
|
|
817
817
|
}
|
|
818
818
|
};
|
|
819
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
819
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
820
820
|
var theme = _a.theme;
|
|
821
821
|
return theme.palette.grey["700"];
|
|
822
822
|
});
|
|
823
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$
|
|
823
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
|
|
824
824
|
var theme = _a.theme;
|
|
825
825
|
return theme.space.base * 6;
|
|
826
826
|
}, function (_a) {
|
|
@@ -833,7 +833,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$r || (temp
|
|
|
833
833
|
var theme = _a.theme;
|
|
834
834
|
return theme.palette.white;
|
|
835
835
|
});
|
|
836
|
-
var StyledLabel$
|
|
836
|
+
var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
837
837
|
var theme = _a.theme;
|
|
838
838
|
return theme.palette.grey["500"];
|
|
839
839
|
});
|
|
@@ -841,11 +841,11 @@ var CampaignCard = function (_a) {
|
|
|
841
841
|
var isNew = _a.isNew, date = _a.date, projectTitle = _a.projectTitle, campaignTitle = _a.campaignTitle, status = _a.status, type = _a.type, labelNew = _a.labelNew, props = __rest(_a, ["isNew", "date", "projectTitle", "campaignTitle", "status", "type", "labelNew"]);
|
|
842
842
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
843
843
|
var PillIcon = getTypeDataIcon(type);
|
|
844
|
-
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$
|
|
844
|
+
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
845
845
|
};
|
|
846
|
-
var templateObject_1$
|
|
846
|
+
var templateObject_1$15, templateObject_2$s, templateObject_3$h;
|
|
847
847
|
|
|
848
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
848
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
|
|
849
849
|
var theme = _a.theme;
|
|
850
850
|
return theme.space.base * 6;
|
|
851
851
|
}, function (_a) {
|
|
@@ -862,16 +862,16 @@ var ProductCard = function (props) {
|
|
|
862
862
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
863
863
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, __assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, __assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
|
|
864
864
|
};
|
|
865
|
-
var templateObject_1$
|
|
865
|
+
var templateObject_1$14;
|
|
866
866
|
|
|
867
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
867
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
868
868
|
var theme = _a.theme;
|
|
869
869
|
return theme.palette.grey[500];
|
|
870
870
|
}, function (_a) {
|
|
871
871
|
var theme = _a.theme;
|
|
872
872
|
return theme.space.base;
|
|
873
873
|
});
|
|
874
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$
|
|
874
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
875
875
|
var theme = _a.theme;
|
|
876
876
|
return theme.palette.blue[600];
|
|
877
877
|
}, function (_a) {
|
|
@@ -881,15 +881,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$q || (templat
|
|
|
881
881
|
var theme = _a.theme;
|
|
882
882
|
return theme.fontWeights.semibold;
|
|
883
883
|
});
|
|
884
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
884
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
885
885
|
var theme = _a.theme;
|
|
886
886
|
return theme.space.xs;
|
|
887
887
|
}, function (_a) {
|
|
888
888
|
var theme = _a.theme;
|
|
889
889
|
return theme.space.xs;
|
|
890
890
|
});
|
|
891
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
892
|
-
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$
|
|
891
|
+
var CardContent = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
892
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
893
893
|
var theme = _a.theme;
|
|
894
894
|
return theme.space.base;
|
|
895
895
|
}, function (_a) {
|
|
@@ -899,7 +899,7 @@ var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$6 || (templa
|
|
|
899
899
|
var theme = _a.theme;
|
|
900
900
|
return theme.space.base * 4;
|
|
901
901
|
});
|
|
902
|
-
var HoverBody = styled__default["default"].div(templateObject_6$
|
|
902
|
+
var HoverBody = styled__default["default"].div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"])), function (_a) {
|
|
903
903
|
var theme = _a.theme;
|
|
904
904
|
return theme.components.notification.card.padding;
|
|
905
905
|
}, function (_a) {
|
|
@@ -916,15 +916,15 @@ var ServiceCard = function (props) {
|
|
|
916
916
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
917
917
|
return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start", wrap: true }, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })))] })] })));
|
|
918
918
|
};
|
|
919
|
-
var templateObject_1$
|
|
919
|
+
var templateObject_1$13, templateObject_2$r, templateObject_3$g, templateObject_4$c, templateObject_5$7, templateObject_6$3, templateObject_7$1, templateObject_8$1;
|
|
920
920
|
|
|
921
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
921
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
922
922
|
var InfoCard = function (props) {
|
|
923
923
|
return (jsxRuntime.jsxs(SpecialCard, __assign({}, (props.infoTitle && { title: props.infoTitle }), props, { children: [props.infoImg && (jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.infoImg }))), jsxRuntime.jsxs(SpecialCard.Header, { children: [props.infoSubtitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(SpecialCard.Header.Title, { children: props.infoTitle }))] }), props.infoButtons && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button) { return button; }) }) })))] })));
|
|
924
924
|
};
|
|
925
|
-
var templateObject_1$
|
|
925
|
+
var templateObject_1$12;
|
|
926
926
|
|
|
927
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
927
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
928
928
|
var theme = _a.theme;
|
|
929
929
|
return theme.space.xl;
|
|
930
930
|
}, function (_a) {
|
|
@@ -935,7 +935,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
935
935
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
936
936
|
*/
|
|
937
937
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
938
|
-
var templateObject_1$
|
|
938
|
+
var templateObject_1$11;
|
|
939
939
|
|
|
940
940
|
/**
|
|
941
941
|
* Use Span to style and format inline text elements.
|
|
@@ -975,8 +975,8 @@ function useWindowSize() {
|
|
|
975
975
|
return size;
|
|
976
976
|
}
|
|
977
977
|
|
|
978
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1
|
|
979
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
978
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject([""], [""])));
|
|
979
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"])), function (_a) {
|
|
980
980
|
var status = _a.status, theme = _a.theme;
|
|
981
981
|
switch (status) {
|
|
982
982
|
case "completed":
|
|
@@ -1010,9 +1010,9 @@ var Counter = function (props) {
|
|
|
1010
1010
|
return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
|
|
1011
1011
|
};
|
|
1012
1012
|
Counter.Avatar = StyledTag.Avatar;
|
|
1013
|
-
var templateObject_1
|
|
1013
|
+
var templateObject_1$10, templateObject_2$q;
|
|
1014
1014
|
|
|
1015
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1
|
|
1015
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
1016
1016
|
var theme = _a.theme;
|
|
1017
1017
|
return theme.breakpoints.sm;
|
|
1018
1018
|
});
|
|
@@ -1029,40 +1029,40 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1029
1029
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1030
1030
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1031
1031
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1032
|
-
var templateObject_1
|
|
1032
|
+
var templateObject_1$$;
|
|
1033
1033
|
|
|
1034
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1035
|
-
var templateObject_1$
|
|
1034
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject([""], [""])));
|
|
1035
|
+
var templateObject_1$_;
|
|
1036
1036
|
|
|
1037
1037
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1038
1038
|
__proto__: null,
|
|
1039
1039
|
Field: Field$1
|
|
1040
1040
|
});
|
|
1041
1041
|
|
|
1042
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1042
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n\n > div {\n height: 100%;\n }\n\n &[disabled] * {\n opacity: 0.85;\n }\n\n &[disabled] svg {\n opacity: 0.5;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &[disabled]:hover {\n background-color: transparent;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n\n > div {\n height: 100%;\n }\n\n &[disabled] * {\n opacity: 0.85;\n }\n\n &[disabled] svg {\n opacity: 0.5;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &[disabled]:hover {\n background-color: transparent;\n }\n"])), function (_a) {
|
|
1043
1043
|
var theme = _a.theme;
|
|
1044
1044
|
return theme.palette.blue[100];
|
|
1045
1045
|
});
|
|
1046
1046
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1047
|
-
var templateObject_1$
|
|
1047
|
+
var templateObject_1$Z;
|
|
1048
1048
|
|
|
1049
|
-
var Container = styled__default["default"].div(templateObject_1$
|
|
1050
|
-
var MetaContainer$1 = styled__default["default"].div(templateObject_2$
|
|
1051
|
-
var ThumbContainer = styled__default["default"].div(templateObject_3$
|
|
1049
|
+
var Container = styled__default["default"].div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
1050
|
+
var MetaContainer$1 = styled__default["default"].div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"])));
|
|
1051
|
+
var ThumbContainer = styled__default["default"].div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
|
|
1052
1052
|
var theme = _a.theme;
|
|
1053
1053
|
return theme.space.sm;
|
|
1054
1054
|
}, function (_a) {
|
|
1055
1055
|
var theme = _a.theme;
|
|
1056
1056
|
return theme.components.autocomplete.thumbSize;
|
|
1057
1057
|
});
|
|
1058
|
-
var Label$1 = styled__default["default"](MD)(templateObject_4$
|
|
1058
|
+
var Label$1 = styled__default["default"](MD)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
|
|
1059
1059
|
var theme = _a.theme;
|
|
1060
1060
|
return theme.fontWeights.medium;
|
|
1061
1061
|
}, function (_a) {
|
|
1062
1062
|
var theme = _a.theme;
|
|
1063
1063
|
return theme.palette.grey[800];
|
|
1064
1064
|
});
|
|
1065
|
-
var Description$2 = styled__default["default"](SM)(templateObject_5$
|
|
1065
|
+
var Description$2 = styled__default["default"](SM)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1066
1066
|
var theme = _a.theme;
|
|
1067
1067
|
return theme.palette.grey[600];
|
|
1068
1068
|
});
|
|
@@ -1074,7 +1074,7 @@ var ItemContent = function (props) {
|
|
|
1074
1074
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1075
1075
|
return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
|
|
1076
1076
|
};
|
|
1077
|
-
var templateObject_1$
|
|
1077
|
+
var templateObject_1$Y, templateObject_2$p, templateObject_3$f, templateObject_4$b, templateObject_5$6;
|
|
1078
1078
|
|
|
1079
1079
|
/**
|
|
1080
1080
|
* A Menu is a wrapper for items elements
|
|
@@ -1098,7 +1098,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1098
1098
|
*/
|
|
1099
1099
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1100
1100
|
|
|
1101
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1101
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1102
1102
|
return props.isPrimary &&
|
|
1103
1103
|
"\n background-color: ".concat(props.theme.palette.blue[600], ";\n color: white;\n & svg[data-garden-id=\"forms.media_figure\"] {\n color: white;\n }\n ");
|
|
1104
1104
|
});
|
|
@@ -1115,7 +1115,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1115
1115
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1116
1116
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1117
1117
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1118
|
-
var templateObject_1$
|
|
1118
|
+
var templateObject_1$X;
|
|
1119
1119
|
|
|
1120
1120
|
/**
|
|
1121
1121
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1130,7 +1130,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1130
1130
|
|
|
1131
1131
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1132
1132
|
|
|
1133
|
-
var editorStyle = styled.css(templateObject_1$
|
|
1133
|
+
var editorStyle = styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n > * + * {\n margin-top: 0.75em;\n }\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n line-height: 1.1;\n font-weight: 500;\n color: ", ";\n }\n\n h1 {\n font-size: 2.617924em;\n }\n\n h2 {\n font-size: 1.618em;\n }\n\n h3 {\n font-size: 1.5rem;\n }\n\n h4 {\n font-size: 1.3rem;\n }\n\n h5 {\n font-size: 1.2rem;\n }\n\n h6 {\n font-size: 1.1rem;\n }\n\n /*=====\n #Lists\n =====*/\n ul,\n ol,\n dl {\n padding: 0.618em 0.618rem;\n margin-left: 1rem;\n }\n\n ul {\n list-style: disc;\n }\n\n ol {\n list-style: decimal;\n }\n\n li {\n padding: 0 0.618rem;\n line-height: 1.618;\n }\n\n dt {\n text-indent: -0.618rem;\n }\n\n dd {\n margin: 0;\n padding: 0 0.618rem 0 0.618rem;\n }\n\n hr {\n border: none;\n border-top: 2px solid rgba(#0d0d0d, 0.1);\n margin: 2rem 0;\n }\n\n p,\n blockquote {\n line-height: 1.618;\n }\n\n p {\n font-size: 1rem;\n margin-bottom: 0.618em;\n }\n\n blockquote {\n border-left: 3px solid;\n border-color: ", ";\n margin: 1.618em 0.618rem;\n padding-left: 0.618em;\n }\n\n em,\n i,\n cite {\n font-style: italic;\n }\n\n strong,\n b {\n font-weight: 500;\n }\n\n cite {\n display: block;\n text-align: right;\n }\n\n u {\n text-decoration: none;\n border-bottom: 1px dotted red;\n }\n\n small,\n sub,\n sup {\n font-size: 0.618rem;\n line-height: 1;\n }\n\n sub {\n vertical-align: sub;\n }\n\n sup {\n vertical-align: super;\n }\n\n s,\n strike,\n del {\n text-decoration: strikethrough;\n }\n\n ins,\n del {\n background-color: rgba(220, 220, 220, 0.25);\n }\n\n ins {\n text-decoration: none;\n }\n\n /*\n mark and selection should be different, so user knows which one they've selected.\n \n mark and selections:\n saturation: 44%\n lightness: 75%\n Hue is different\n */\n mark {\n background-color: rgba(165, 220, 165, 0.9);\n }\n\n ::selection {\n background-color: rgba(165, 220, 220, 0.9);\n }\n\n /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */\n mark::selection {\n background-color: rgba(165, 220, 110, 0.9);\n }\n\n /* dfn and dt both do the same thing: denote a term to be defined */\n dfn,\n dt {\n font-style: oblique;\n font-weight: 700;\n text-transform: capitalize;\n }\n\n code {\n background-color: ", ";\n color: ", ";\n padding: 0.2rem 0.3rem;\n border-radius: 4px;\n }\n\n pre {\n background: #0d0d0d;\n color: #fff;\n font-family: \"JetBrainsMono\", monospace;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n\n code {\n color: inherit;\n padding: 0;\n background: none;\n font-size: 0.8rem;\n }\n }\n\n kbd,\n samp,\n data {\n background-color: rgba(165, 165, 165, 0.2);\n }\n\n kbd {\n font-size: 0.75rem;\n padding: 0.25ex 0.5ex;\n border: 1px solid rgb(193, 193, 193);\n border-radius: 3px;\n }\n\n /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/\n samp,\n data {\n padding: 0 10px;\n }\n\n var,\n data {\n font-style: italic;\n }\n\n samp {\n border-left: 5px solid rgb(193, 193, 193);\n }\n\n data {\n padding: 0 10px;\n }\n\n /* Placeholder (at the top) */\n /*p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }*/\n\n /* Placeholder (on every new line) */\n .is-empty::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }\n"], ["\n > * + * {\n margin-top: 0.75em;\n }\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n line-height: 1.1;\n font-weight: 500;\n color: ", ";\n }\n\n h1 {\n font-size: 2.617924em;\n }\n\n h2 {\n font-size: 1.618em;\n }\n\n h3 {\n font-size: 1.5rem;\n }\n\n h4 {\n font-size: 1.3rem;\n }\n\n h5 {\n font-size: 1.2rem;\n }\n\n h6 {\n font-size: 1.1rem;\n }\n\n /*=====\n #Lists\n =====*/\n ul,\n ol,\n dl {\n padding: 0.618em 0.618rem;\n margin-left: 1rem;\n }\n\n ul {\n list-style: disc;\n }\n\n ol {\n list-style: decimal;\n }\n\n li {\n padding: 0 0.618rem;\n line-height: 1.618;\n }\n\n dt {\n text-indent: -0.618rem;\n }\n\n dd {\n margin: 0;\n padding: 0 0.618rem 0 0.618rem;\n }\n\n hr {\n border: none;\n border-top: 2px solid rgba(#0d0d0d, 0.1);\n margin: 2rem 0;\n }\n\n p,\n blockquote {\n line-height: 1.618;\n }\n\n p {\n font-size: 1rem;\n margin-bottom: 0.618em;\n }\n\n blockquote {\n border-left: 3px solid;\n border-color: ", ";\n margin: 1.618em 0.618rem;\n padding-left: 0.618em;\n }\n\n em,\n i,\n cite {\n font-style: italic;\n }\n\n strong,\n b {\n font-weight: 500;\n }\n\n cite {\n display: block;\n text-align: right;\n }\n\n u {\n text-decoration: none;\n border-bottom: 1px dotted red;\n }\n\n small,\n sub,\n sup {\n font-size: 0.618rem;\n line-height: 1;\n }\n\n sub {\n vertical-align: sub;\n }\n\n sup {\n vertical-align: super;\n }\n\n s,\n strike,\n del {\n text-decoration: strikethrough;\n }\n\n ins,\n del {\n background-color: rgba(220, 220, 220, 0.25);\n }\n\n ins {\n text-decoration: none;\n }\n\n /*\n mark and selection should be different, so user knows which one they've selected.\n \n mark and selections:\n saturation: 44%\n lightness: 75%\n Hue is different\n */\n mark {\n background-color: rgba(165, 220, 165, 0.9);\n }\n\n ::selection {\n background-color: rgba(165, 220, 220, 0.9);\n }\n\n /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */\n mark::selection {\n background-color: rgba(165, 220, 110, 0.9);\n }\n\n /* dfn and dt both do the same thing: denote a term to be defined */\n dfn,\n dt {\n font-style: oblique;\n font-weight: 700;\n text-transform: capitalize;\n }\n\n code {\n background-color: ", ";\n color: ", ";\n padding: 0.2rem 0.3rem;\n border-radius: 4px;\n }\n\n pre {\n background: #0d0d0d;\n color: #fff;\n font-family: \"JetBrainsMono\", monospace;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n\n code {\n color: inherit;\n padding: 0;\n background: none;\n font-size: 0.8rem;\n }\n }\n\n kbd,\n samp,\n data {\n background-color: rgba(165, 165, 165, 0.2);\n }\n\n kbd {\n font-size: 0.75rem;\n padding: 0.25ex 0.5ex;\n border: 1px solid rgb(193, 193, 193);\n border-radius: 3px;\n }\n\n /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/\n samp,\n data {\n padding: 0 10px;\n }\n\n var,\n data {\n font-style: italic;\n }\n\n samp {\n border-left: 5px solid rgb(193, 193, 193);\n }\n\n data {\n padding: 0 10px;\n }\n\n /* Placeholder (at the top) */\n /*p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }*/\n\n /* Placeholder (on every new line) */\n .is-empty::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }\n"])), function (_a) {
|
|
1134
1134
|
var theme = _a.theme;
|
|
1135
1135
|
return theme.palette.grey["800"];
|
|
1136
1136
|
}, function (_a) {
|
|
@@ -1143,37 +1143,37 @@ var editorStyle = styled.css(templateObject_1$V || (templateObject_1$V = __makeT
|
|
|
1143
1143
|
var theme = _a.theme;
|
|
1144
1144
|
return theme.palette.red[600];
|
|
1145
1145
|
});
|
|
1146
|
-
var templateObject_1$
|
|
1146
|
+
var templateObject_1$W;
|
|
1147
1147
|
|
|
1148
|
-
var _path$
|
|
1148
|
+
var _path$m;
|
|
1149
1149
|
|
|
1150
|
-
function _extends$
|
|
1150
|
+
function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
|
|
1151
1151
|
|
|
1152
1152
|
var SvgBoldFill = function SvgBoldFill(props) {
|
|
1153
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1153
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
|
|
1154
1154
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1155
1155
|
width: 16,
|
|
1156
1156
|
height: 16,
|
|
1157
1157
|
focusable: "false",
|
|
1158
1158
|
viewBox: "0 0 16 16"
|
|
1159
|
-
}, props), _path$
|
|
1159
|
+
}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1160
1160
|
fill: "currentColor",
|
|
1161
1161
|
d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
|
|
1162
1162
|
})));
|
|
1163
1163
|
};
|
|
1164
1164
|
|
|
1165
|
-
var _path$
|
|
1165
|
+
var _path$l;
|
|
1166
1166
|
|
|
1167
|
-
function _extends$
|
|
1167
|
+
function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
|
|
1168
1168
|
|
|
1169
1169
|
var SvgItalicFill = function SvgItalicFill(props) {
|
|
1170
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1170
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
|
|
1171
1171
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1172
1172
|
width: 16,
|
|
1173
1173
|
height: 16,
|
|
1174
1174
|
focusable: "false",
|
|
1175
1175
|
viewBox: "0 0 16 16"
|
|
1176
|
-
}, props), _path$
|
|
1176
|
+
}, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1177
1177
|
fill: "none",
|
|
1178
1178
|
stroke: "currentColor",
|
|
1179
1179
|
strokeLinecap: "round",
|
|
@@ -1182,18 +1182,18 @@ var SvgItalicFill = function SvgItalicFill(props) {
|
|
|
1182
1182
|
})));
|
|
1183
1183
|
};
|
|
1184
1184
|
|
|
1185
|
-
var _path$
|
|
1185
|
+
var _path$k, _path2;
|
|
1186
1186
|
|
|
1187
|
-
function _extends$
|
|
1187
|
+
function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
|
|
1188
1188
|
|
|
1189
1189
|
var SvgQuoteFill = function SvgQuoteFill(props) {
|
|
1190
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1190
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
|
|
1191
1191
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1192
1192
|
width: 16,
|
|
1193
1193
|
height: 16,
|
|
1194
1194
|
focusable: "false",
|
|
1195
1195
|
viewBox: "0 0 16 16"
|
|
1196
|
-
}, props), _path$
|
|
1196
|
+
}, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1197
1197
|
fill: "currentColor",
|
|
1198
1198
|
d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
|
|
1199
1199
|
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -1207,10 +1207,10 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
|
|
|
1207
1207
|
|
|
1208
1208
|
var _g$3;
|
|
1209
1209
|
|
|
1210
|
-
function _extends$
|
|
1210
|
+
function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
|
|
1211
1211
|
|
|
1212
1212
|
var SvgH1Fill = function SvgH1Fill(props) {
|
|
1213
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1213
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
|
|
1214
1214
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1215
1215
|
width: 16,
|
|
1216
1216
|
height: 16,
|
|
@@ -1239,10 +1239,10 @@ var SvgH1Fill = function SvgH1Fill(props) {
|
|
|
1239
1239
|
|
|
1240
1240
|
var _g$2;
|
|
1241
1241
|
|
|
1242
|
-
function _extends$
|
|
1242
|
+
function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
|
|
1243
1243
|
|
|
1244
1244
|
var SvgH2Fill = function SvgH2Fill(props) {
|
|
1245
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1245
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
|
|
1246
1246
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1247
1247
|
width: 16,
|
|
1248
1248
|
height: 16,
|
|
@@ -1271,10 +1271,10 @@ var SvgH2Fill = function SvgH2Fill(props) {
|
|
|
1271
1271
|
|
|
1272
1272
|
var _g$1;
|
|
1273
1273
|
|
|
1274
|
-
function _extends$
|
|
1274
|
+
function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
|
|
1275
1275
|
|
|
1276
1276
|
var SvgH3Fill = function SvgH3Fill(props) {
|
|
1277
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1277
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
|
|
1278
1278
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1279
1279
|
width: 16,
|
|
1280
1280
|
height: 16,
|
|
@@ -1301,8 +1301,8 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1301
1301
|
}))));
|
|
1302
1302
|
};
|
|
1303
1303
|
|
|
1304
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1305
|
-
var MenuContainer = styled__default["default"](Card)(templateObject_2$
|
|
1304
|
+
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject([""], [""])));
|
|
1305
|
+
var MenuContainer = styled__default["default"](Card)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n padding: ", ";\n\n ", " {\n :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n }\n"], ["\n padding: ", ";\n\n ", " {\n :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n }\n"])), function (_a) {
|
|
1306
1306
|
var theme = _a.theme;
|
|
1307
1307
|
return theme.space.xxs;
|
|
1308
1308
|
}, StyledIconButton);
|
|
@@ -1319,9 +1319,9 @@ var FloatingMenu = function (props) {
|
|
|
1319
1319
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1320
1320
|
}, isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBold().run(); }, isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleItalic().run(); }, isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
|
|
1321
1321
|
};
|
|
1322
|
-
var templateObject_1$
|
|
1322
|
+
var templateObject_1$V, templateObject_2$o;
|
|
1323
1323
|
|
|
1324
|
-
var Header$1 = styled__default["default"].div(templateObject_1$
|
|
1324
|
+
var Header$1 = styled__default["default"].div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: ", " ", ";\n border-bottom: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n padding: ", " ", ";\n border-bottom: 1px solid ", ";\n"])), function (_a) {
|
|
1325
1325
|
var theme = _a.theme;
|
|
1326
1326
|
return theme.space.xs;
|
|
1327
1327
|
}, function (_a) {
|
|
@@ -1331,7 +1331,7 @@ var Header$1 = styled__default["default"].div(templateObject_1$T || (templateObj
|
|
|
1331
1331
|
var theme = _a.theme;
|
|
1332
1332
|
return theme.palette.grey[300];
|
|
1333
1333
|
});
|
|
1334
|
-
var Title$2 = styled__default["default"](MD)(templateObject_2$
|
|
1334
|
+
var Title$2 = styled__default["default"](MD)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1335
1335
|
var validation = _a.validation, theme = _a.theme;
|
|
1336
1336
|
if (validation === "success") {
|
|
1337
1337
|
return "color: ".concat(theme.colors.successHue, ";");
|
|
@@ -1350,23 +1350,23 @@ var EditorHeader = function (props) {
|
|
|
1350
1350
|
var title = props.title, validation = props.validation;
|
|
1351
1351
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1352
1352
|
};
|
|
1353
|
-
var templateObject_1$
|
|
1353
|
+
var templateObject_1$U, templateObject_2$n;
|
|
1354
1354
|
|
|
1355
|
-
var Footer$1 = styled__default["default"].div(templateObject_1$
|
|
1355
|
+
var Footer$1 = styled__default["default"].div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"])), function (_a) {
|
|
1356
1356
|
var theme = _a.theme;
|
|
1357
1357
|
return theme.space.sm;
|
|
1358
1358
|
}, function (_a) {
|
|
1359
1359
|
var theme = _a.theme;
|
|
1360
1360
|
return theme.palette.grey[100];
|
|
1361
1361
|
});
|
|
1362
|
-
var Text = styled__default["default"](SM)(templateObject_2$
|
|
1362
|
+
var Text = styled__default["default"](SM)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n line-height: 1.7;\n"], ["\n line-height: 1.7;\n"])));
|
|
1363
1363
|
var EditorFooter = function (_a) {
|
|
1364
1364
|
var saveText = _a.saveText;
|
|
1365
1365
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1366
1366
|
};
|
|
1367
|
-
var templateObject_1$
|
|
1367
|
+
var templateObject_1$T, templateObject_2$m;
|
|
1368
1368
|
|
|
1369
|
-
var EditorContainer = styled__default["default"].div(templateObject_1$
|
|
1369
|
+
var EditorContainer = styled__default["default"].div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"], ["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"])), function (_a) {
|
|
1370
1370
|
var theme = _a.theme;
|
|
1371
1371
|
return theme.borderRadii.md;
|
|
1372
1372
|
}, function (_a) {
|
|
@@ -1450,9 +1450,9 @@ var Editor = function (_a) {
|
|
|
1450
1450
|
});
|
|
1451
1451
|
return (jsxRuntime.jsxs(EditorContainer, __assign({ editable: isEditable, validation: props.validation }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle, validation: props.validation }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: __assign({}, bubbleOptions) }))] })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), isEditable && jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] })));
|
|
1452
1452
|
};
|
|
1453
|
-
var templateObject_1$
|
|
1453
|
+
var templateObject_1$S;
|
|
1454
1454
|
|
|
1455
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1455
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1456
1456
|
/**
|
|
1457
1457
|
* A Checkbox lets users select and unselect options from a list.
|
|
1458
1458
|
* <hr>
|
|
@@ -1464,17 +1464,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1464
1464
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1465
1465
|
**/
|
|
1466
1466
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1467
|
-
var templateObject_1$
|
|
1467
|
+
var templateObject_1$R;
|
|
1468
1468
|
|
|
1469
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1469
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
1470
1470
|
/**
|
|
1471
1471
|
* A Label is used to specify a title for an input.
|
|
1472
1472
|
* <hr>
|
|
1473
1473
|
**/
|
|
1474
1474
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1475
|
-
var templateObject_1$
|
|
1475
|
+
var templateObject_1$Q;
|
|
1476
1476
|
|
|
1477
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_1$
|
|
1477
|
+
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1478
1478
|
var theme = _a.theme;
|
|
1479
1479
|
return theme.space.base;
|
|
1480
1480
|
});
|
|
@@ -1485,16 +1485,16 @@ var CheckboxCard = function (props) {
|
|
|
1485
1485
|
setChecked(!checked);
|
|
1486
1486
|
props.onToggle && props.onToggle(!checked);
|
|
1487
1487
|
};
|
|
1488
|
-
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, __assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1488
|
+
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, __assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel$1, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1489
1489
|
};
|
|
1490
|
-
var templateObject_1$
|
|
1490
|
+
var templateObject_1$P;
|
|
1491
1491
|
|
|
1492
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1492
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1493
1493
|
/**
|
|
1494
1494
|
* A Field is a wrapper for input elements
|
|
1495
1495
|
**/
|
|
1496
1496
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1497
|
-
var templateObject_1$
|
|
1497
|
+
var templateObject_1$O;
|
|
1498
1498
|
|
|
1499
1499
|
var index = /*#__PURE__*/Object.freeze({
|
|
1500
1500
|
__proto__: null,
|
|
@@ -1502,8 +1502,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1502
1502
|
Hint: reactForms.Hint
|
|
1503
1503
|
});
|
|
1504
1504
|
|
|
1505
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1506
|
-
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$
|
|
1505
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1506
|
+
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject([""], [""])));
|
|
1507
1507
|
/**
|
|
1508
1508
|
* An Input lets users enter text into a field.
|
|
1509
1509
|
* <hr>
|
|
@@ -1512,7 +1512,72 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$k || (te
|
|
|
1512
1512
|
* - To enter multiline text, use a Textarea
|
|
1513
1513
|
**/
|
|
1514
1514
|
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
1515
|
-
var templateObject_1$
|
|
1515
|
+
var templateObject_1$N, templateObject_2$l;
|
|
1516
|
+
|
|
1517
|
+
var _path$j;
|
|
1518
|
+
|
|
1519
|
+
function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
|
|
1520
|
+
|
|
1521
|
+
var SvgInputToggleEdit = function SvgInputToggleEdit(props) {
|
|
1522
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
|
|
1523
|
+
width: 16,
|
|
1524
|
+
height: 16,
|
|
1525
|
+
viewBox: "0 0 16 16",
|
|
1526
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1527
|
+
}, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1528
|
+
fill: "currentColor",
|
|
1529
|
+
fillRule: "evenodd",
|
|
1530
|
+
clipRule: "evenodd",
|
|
1531
|
+
d: "M10.5268 8.89972L7.51676 8.99972C7.22772 9.00933 6.99083 8.77244 7.00043 8.4834L7.10043 5.4734C7.10465 5.3466 7.1569 5.22615 7.24661 5.13645L12.2366 0.146447C12.4319 -0.0488155 12.7485 -0.0488155 12.9437 0.146447L15.8537 3.05645C16.049 3.25171 16.049 3.56829 15.8537 3.76355L10.8637 8.75355C10.774 8.84326 10.6536 8.89551 10.5268 8.89972ZM14.7931 3.41L12.5902 1.20711L8.09333 5.70394L8.01763 7.98253L10.2962 7.90683L14.7931 3.41ZM7.91016 1.5C7.91016 1.22386 7.6863 1 7.41016 1H2.09016C1.80595 0.994981 1.52354 1.10909 1.3164 1.31624C1.10925 1.52338 0.995139 1.80579 1.00023 2.0987L1.00016 13.91C0.995139 14.1942 1.10925 14.4766 1.3164 14.6838C1.52354 14.8909 1.80595 15.005 2.09886 14.9999L13.9102 15C14.1944 15.005 14.4768 14.8909 14.6839 14.6838C14.8911 14.4766 15.0052 14.1942 15.0001 13.9013L15.0002 8.59C15.0002 8.31386 14.7763 8.09 14.5002 8.09C14.224 8.09 14.0002 8.31386 14.0002 8.59V13.91C14.0006 13.9404 13.9922 13.9613 13.9768 13.9767C13.9615 13.992 13.9406 14.0005 13.9189 14.0001L2.09016 14C2.05977 14.0005 2.03885 13.992 2.0235 13.9767C2.00816 13.9613 1.99971 13.9404 2.00008 13.9187L2.00016 2.09C1.99971 2.05961 2.00816 2.03869 2.0235 2.02334C2.03885 2.008 2.05977 1.99955 2.08146 1.99992L7.41016 2C7.6863 2 7.91016 1.77614 7.91016 1.5Z"
|
|
1532
|
+
})));
|
|
1533
|
+
};
|
|
1534
|
+
|
|
1535
|
+
var Wrapper = styled__default["default"].div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
1536
|
+
var InputContainer = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"])));
|
|
1537
|
+
var StyledInput = styled__default["default"](Input)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n width: 100%;\n\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n transition: border-color 0s;\n }\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.2s;\n }\n"], ["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n width: 100%;\n\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n transition: border-color 0s;\n }\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.2s;\n }\n"])));
|
|
1538
|
+
var StyledEditIcon = styled__default["default"](SvgInputToggleEdit)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
1539
|
+
var theme = _a.theme;
|
|
1540
|
+
return theme.space.md;
|
|
1541
|
+
});
|
|
1542
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n transition: opacity 0.2s ease-in-out;\n"], ["\n transition: opacity 0.2s ease-in-out;\n"])));
|
|
1543
|
+
var StyledMessage = styled__default["default"](Message)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
|
|
1544
|
+
var theme = _a.theme;
|
|
1545
|
+
return theme.space.sm;
|
|
1546
|
+
});
|
|
1547
|
+
/**
|
|
1548
|
+
* An Input Toggle lets users use the input by activating it pressing the edit button.
|
|
1549
|
+
* <hr>
|
|
1550
|
+
* Used for this:
|
|
1551
|
+
* - To let the user enter data into a field
|
|
1552
|
+
* - To enter multiline text, use a Textarea
|
|
1553
|
+
**/
|
|
1554
|
+
var InputToggle = function (props) {
|
|
1555
|
+
var _a = React.useState(false), isEditing = _a[0], setIsEditing = _a[1];
|
|
1556
|
+
var inputRef = React.useRef(null);
|
|
1557
|
+
var onClick = function () {
|
|
1558
|
+
var _a;
|
|
1559
|
+
setIsEditing(true);
|
|
1560
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1561
|
+
};
|
|
1562
|
+
var onKeyDown = function (event) {
|
|
1563
|
+
var _a;
|
|
1564
|
+
if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
|
|
1565
|
+
setIsEditing(false);
|
|
1566
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1567
|
+
}
|
|
1568
|
+
};
|
|
1569
|
+
var onBlur = function () {
|
|
1570
|
+
var _a;
|
|
1571
|
+
setIsEditing(false);
|
|
1572
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
1573
|
+
};
|
|
1574
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({ onClick: onClick, onKeyDown: onKeyDown, onBlur: onBlur }, { children: [props.label && (jsxRuntime.jsxs(StyledLabel, __assign({ isRegular: true }, (isEditing
|
|
1575
|
+
? { style: { opacity: 1 } }
|
|
1576
|
+
: { style: { opacity: 0 } }), { children: [props.label, props.label && props.required ? (jsxRuntime.jsx(Span, __assign({ style: { color: theme.palette.red[600] } }, { children: "*" }))) : null] }))), jsxRuntime.jsxs(InputContainer, { children: [jsxRuntime.jsx(StyledInput, __assign({ ref: inputRef }, props, (isEditing ? { readOnly: false } : { readOnly: true }), (props.size ? { style: { fontSize: "".concat(props.size, "px") } } : {}))), !isEditing && jsxRuntime.jsx(StyledEditIcon, {})] }), props.message && (jsxRuntime.jsx(StyledMessage, __assign({ validation: props.validation }, (props.message
|
|
1577
|
+
? { style: { opacity: 1 } }
|
|
1578
|
+
: { style: { opacity: 0 } }), { children: props.message })))] })));
|
|
1579
|
+
};
|
|
1580
|
+
var templateObject_1$M, templateObject_2$k, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$2;
|
|
1516
1581
|
|
|
1517
1582
|
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1518
1583
|
/**
|
|
@@ -3054,6 +3119,7 @@ exports.Icon = Icon;
|
|
|
3054
3119
|
exports.IconButton = IconButton;
|
|
3055
3120
|
exports.InfoCard = InfoCard;
|
|
3056
3121
|
exports.Input = Input;
|
|
3122
|
+
exports.InputToggle = InputToggle;
|
|
3057
3123
|
exports.Item = Item;
|
|
3058
3124
|
exports.ItemContent = ItemContent;
|
|
3059
3125
|
exports.ItemMeta = ItemMeta;
|