@appquality/unguess-design-system 2.11.4 → 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 +36 -0
- package/build/index.d.ts +2 -0
- package/build/index.js +219 -137
- package/build/stories/buttons/anchor/index.d.ts +2 -1
- package/build/stories/buttons/anchor/index.stories.d.ts +2 -1
- package/build/stories/buttons/button/_types.d.ts +1 -1
- package/build/stories/buttons/button/index.d.ts +9 -13
- package/build/stories/buttons/button/index.stories.d.ts +4 -4
- package/build/stories/buttons/button-group/index.d.ts +2 -1
- package/build/stories/buttons/button-group/index.stories.d.ts +2 -1
- package/build/stories/buttons/icon-button/index.d.ts +2 -1
- package/build/stories/buttons/icon-button/index.stories.d.ts +2 -1
- package/build/stories/buttons/split-button/index.d.ts +2 -1
- package/build/stories/buttons/split-button/index.stories.d.ts +2 -1
- package/build/stories/forms/input/index.d.ts +1 -1
- package/build/stories/forms/input/index.stories.d.ts +2 -1
- package/build/stories/forms/input-toggle/_types.d.ts +15 -0
- package/build/stories/forms/input-toggle/index.d.ts +10 -0
- package/build/stories/forms/input-toggle/index.stories.d.ts +8 -0
- package/build/stories/tooltip-modal/_types.d.ts +21 -0
- package/build/stories/tooltip-modal/index.d.ts +18 -0
- package/build/stories/tooltip-modal/index.stories.d.ts +13 -0
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -12,8 +12,8 @@ var reactNotifications = require('@zendeskgarden/react-notifications');
|
|
|
12
12
|
var reactAvatars = require('@zendeskgarden/react-avatars');
|
|
13
13
|
var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
|
|
14
14
|
var reactButtons = require('@zendeskgarden/react-buttons');
|
|
15
|
-
var reactTags = require('@zendeskgarden/react-tags');
|
|
16
15
|
var React = require('react');
|
|
16
|
+
var reactTags = require('@zendeskgarden/react-tags');
|
|
17
17
|
var reactLoaders = require('@zendeskgarden/react-loaders');
|
|
18
18
|
var reactTypography = require('@zendeskgarden/react-typography');
|
|
19
19
|
var reactModals = require('@zendeskgarden/react-modals');
|
|
@@ -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.
|
|
@@ -345,7 +345,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
|
|
|
345
345
|
- To navigate within a page
|
|
346
346
|
- To display links alongside text
|
|
347
347
|
*/
|
|
348
|
-
var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
|
|
348
|
+
var Anchor = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({ ref: ref }, props)); });
|
|
349
349
|
|
|
350
350
|
var customTheme = __assign({}, theme);
|
|
351
351
|
// Define theme override
|
|
@@ -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.
|
|
@@ -366,23 +366,24 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
|
366
366
|
- To enable user action
|
|
367
367
|
- To draw attention to relevant actions in a user's workflow
|
|
368
368
|
*/
|
|
369
|
-
var
|
|
369
|
+
var ButtonComponent = React.forwardRef(function (props, ref) {
|
|
370
370
|
if (props.themeColor) {
|
|
371
371
|
var currentTheme = getThemeStyle(props);
|
|
372
|
-
return jsxRuntime.jsx(UgButton, __assign({}, props, { theme: currentTheme }));
|
|
372
|
+
return jsxRuntime.jsx(UgButton, __assign({}, props, { ref: ref, theme: currentTheme }));
|
|
373
373
|
}
|
|
374
|
-
return jsxRuntime.jsx(UgButton, __assign({}, props));
|
|
375
|
-
};
|
|
374
|
+
return jsxRuntime.jsx(UgButton, __assign({ ref: ref }, props));
|
|
375
|
+
});
|
|
376
|
+
var Button = ButtonComponent;
|
|
376
377
|
Button.StartIcon = UgButton.StartIcon;
|
|
377
378
|
Button.EndIcon = UgButton.EndIcon;
|
|
378
|
-
var templateObject_1$
|
|
379
|
+
var templateObject_1$1d;
|
|
379
380
|
|
|
380
381
|
/**
|
|
381
382
|
A Button group lets users make a selection from a set of options.
|
|
382
383
|
|
|
383
384
|
This is a legacy component and may be deprecated in the future. UNGUESS does not presently recommend the use of Button groups.
|
|
384
385
|
**/
|
|
385
|
-
var ButtonGroup = function (props) { return
|
|
386
|
+
var ButtonGroup = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.ButtonGroup, __assign({ ref: ref }, props)); });
|
|
386
387
|
|
|
387
388
|
/**
|
|
388
389
|
Icon buttons (like Buttons) let users take action.
|
|
@@ -394,7 +395,7 @@ Used for this
|
|
|
394
395
|
- To simplify the appearance of repeated or persistent actions on a page
|
|
395
396
|
- To enable action in a toolbar
|
|
396
397
|
**/
|
|
397
|
-
var IconButton = function (props) { return
|
|
398
|
+
var IconButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.IconButton, __assign({ ref: ref }, props)); });
|
|
398
399
|
|
|
399
400
|
/**
|
|
400
401
|
A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
|
|
@@ -403,9 +404,9 @@ Used for this:
|
|
|
403
404
|
- To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
|
|
404
405
|
- To reduce visual complexity when there are multiple actions a user can take
|
|
405
406
|
**/
|
|
406
|
-
var SplitButton = function (props) { return
|
|
407
|
+
var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
|
|
407
408
|
|
|
408
|
-
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) {
|
|
409
410
|
var theme = _a.theme;
|
|
410
411
|
return theme.borderRadii.lg;
|
|
411
412
|
}, function (_a) {
|
|
@@ -426,7 +427,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
426
427
|
- To group related content
|
|
427
428
|
*/
|
|
428
429
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
429
|
-
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) {
|
|
430
431
|
var theme = _a.theme;
|
|
431
432
|
return theme.borderRadii.xl;
|
|
432
433
|
}, function (_a) {
|
|
@@ -443,7 +444,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
443
444
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
444
445
|
});
|
|
445
446
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
446
|
-
var templateObject_1$
|
|
447
|
+
var templateObject_1$1c, templateObject_2$v;
|
|
447
448
|
|
|
448
449
|
/**
|
|
449
450
|
* Tags let users categorize content using a keyword.
|
|
@@ -460,12 +461,12 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
460
461
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
461
462
|
Tag.Close = reactTags.Tag.Close;
|
|
462
463
|
|
|
463
|
-
var _g$5, _path$
|
|
464
|
+
var _g$5, _path$r;
|
|
464
465
|
|
|
465
|
-
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); }
|
|
466
467
|
|
|
467
468
|
var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
|
|
468
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
469
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
|
|
469
470
|
width: 24,
|
|
470
471
|
height: 24,
|
|
471
472
|
viewBox: "0 0 24 24",
|
|
@@ -477,18 +478,18 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
|
|
|
477
478
|
opacity: 0.3,
|
|
478
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",
|
|
479
480
|
fill: "#003A57"
|
|
480
|
-
}))), _path$
|
|
481
|
+
}))), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
|
|
481
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",
|
|
482
483
|
fill: "#003A57"
|
|
483
484
|
})));
|
|
484
485
|
};
|
|
485
486
|
|
|
486
|
-
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;
|
|
487
488
|
|
|
488
|
-
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); }
|
|
489
490
|
|
|
490
491
|
var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
491
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
492
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
|
|
492
493
|
width: 25,
|
|
493
494
|
height: 24,
|
|
494
495
|
viewBox: "0 0 25 24",
|
|
@@ -499,7 +500,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
499
500
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
500
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",
|
|
501
502
|
fill: "#D3ECDB"
|
|
502
|
-
}))), _path$
|
|
503
|
+
}))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
|
|
503
504
|
opacity: 0.8,
|
|
504
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",
|
|
505
506
|
fill: "#70C38A"
|
|
@@ -556,18 +557,18 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
556
557
|
})));
|
|
557
558
|
};
|
|
558
559
|
|
|
559
|
-
var _path$
|
|
560
|
+
var _path$p, _path2$3, _path3$2, _path4$1;
|
|
560
561
|
|
|
561
|
-
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); }
|
|
562
563
|
|
|
563
564
|
var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
|
|
564
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
565
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
|
|
565
566
|
width: 24,
|
|
566
567
|
height: 24,
|
|
567
568
|
viewBox: "0 0 24 24",
|
|
568
569
|
fill: "none",
|
|
569
570
|
xmlns: "http://www.w3.org/2000/svg"
|
|
570
|
-
}, props), _path$
|
|
571
|
+
}, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
|
|
571
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",
|
|
572
573
|
fill: "#F8F9F9"
|
|
573
574
|
})), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -582,18 +583,18 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
|
|
|
582
583
|
})));
|
|
583
584
|
};
|
|
584
585
|
|
|
585
|
-
var _path$
|
|
586
|
+
var _path$o, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
|
|
586
587
|
|
|
587
|
-
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); }
|
|
588
589
|
|
|
589
590
|
var SvgCampaignProgress = function SvgCampaignProgress(props) {
|
|
590
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
591
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
|
|
591
592
|
width: 24,
|
|
592
593
|
height: 24,
|
|
593
594
|
viewBox: "0 0 24 24",
|
|
594
595
|
fill: "none",
|
|
595
596
|
xmlns: "http://www.w3.org/2000/svg"
|
|
596
|
-
}, props), _path$
|
|
597
|
+
}, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
|
|
597
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",
|
|
598
599
|
fill: "#F8F9F9"
|
|
599
600
|
})), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -629,18 +630,18 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
|
|
|
629
630
|
})));
|
|
630
631
|
};
|
|
631
632
|
|
|
632
|
-
var _path$
|
|
633
|
+
var _path$n, _path2$1, _path3;
|
|
633
634
|
|
|
634
|
-
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); }
|
|
635
636
|
|
|
636
637
|
var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
637
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
638
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
|
|
638
639
|
width: 24,
|
|
639
640
|
height: 24,
|
|
640
641
|
viewBox: "0 0 24 24",
|
|
641
642
|
fill: "none",
|
|
642
643
|
xmlns: "http://www.w3.org/2000/svg"
|
|
643
|
-
}, props), _path$
|
|
644
|
+
}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
|
|
644
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",
|
|
645
646
|
fill: "#F8F9F9"
|
|
646
647
|
})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -658,7 +659,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
658
659
|
})));
|
|
659
660
|
};
|
|
660
661
|
|
|
661
|
-
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) {
|
|
662
663
|
return props.isLight ?
|
|
663
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 ");
|
|
664
665
|
});
|
|
@@ -676,22 +677,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
676
677
|
- To communicate a typing status, use Inline instead
|
|
677
678
|
*/
|
|
678
679
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
679
|
-
var templateObject_1$
|
|
680
|
+
var templateObject_1$1b;
|
|
680
681
|
|
|
681
|
-
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) {
|
|
682
683
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
683
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 ");
|
|
684
685
|
});
|
|
685
|
-
var templateObject_1$
|
|
686
|
+
var templateObject_1$1a;
|
|
686
687
|
|
|
687
|
-
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) {
|
|
688
689
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
689
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 ");
|
|
690
691
|
});
|
|
691
692
|
CardThumbnail.defaultProps = {
|
|
692
693
|
align: "left"
|
|
693
694
|
};
|
|
694
|
-
var templateObject_1$
|
|
695
|
+
var templateObject_1$19;
|
|
695
696
|
|
|
696
697
|
/**
|
|
697
698
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -703,11 +704,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
703
704
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
704
705
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
705
706
|
|
|
706
|
-
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) {
|
|
707
708
|
var theme = _a.theme;
|
|
708
709
|
return theme.palette.grey[500];
|
|
709
710
|
});
|
|
710
|
-
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) {
|
|
711
712
|
var theme = _a.theme;
|
|
712
713
|
return theme.colors.primaryHue;
|
|
713
714
|
}, function (_a) {
|
|
@@ -717,14 +718,14 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$t || (templateObje
|
|
|
717
718
|
var theme = _a.theme;
|
|
718
719
|
return theme.space.xxs;
|
|
719
720
|
});
|
|
720
|
-
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) {
|
|
721
722
|
var theme = _a.theme;
|
|
722
723
|
return theme.palette.grey[700];
|
|
723
724
|
}, function (_a) {
|
|
724
725
|
var theme = _a.theme;
|
|
725
726
|
return theme.space.xxs;
|
|
726
727
|
});
|
|
727
|
-
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) {
|
|
728
729
|
var theme = _a.theme, align = _a.align;
|
|
729
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 ");
|
|
730
731
|
});
|
|
@@ -732,9 +733,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
732
733
|
CardHeader.Label = Label$2;
|
|
733
734
|
CardHeader.Title = Title$3;
|
|
734
735
|
CardHeader.Text = Description$3;
|
|
735
|
-
var templateObject_1$
|
|
736
|
+
var templateObject_1$18, templateObject_2$u, templateObject_3$j, templateObject_4$d;
|
|
736
737
|
|
|
737
|
-
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) {
|
|
738
739
|
var theme = _a.theme;
|
|
739
740
|
return theme.space.base * 3;
|
|
740
741
|
}, function (_a) {
|
|
@@ -744,15 +745,15 @@ var Divider = styled__default["default"].div(templateObject_1$16 || (templateObj
|
|
|
744
745
|
var theme = _a.theme;
|
|
745
746
|
return theme.palette.grey["300"];
|
|
746
747
|
});
|
|
747
|
-
var Footer$2 = styled__default["default"].div(templateObject_2$
|
|
748
|
-
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) {
|
|
749
750
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
750
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 ");
|
|
751
752
|
});
|
|
752
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 }))] })); };
|
|
753
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$17, templateObject_2$t, templateObject_3$i;
|
|
754
755
|
|
|
755
|
-
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) {
|
|
756
757
|
var theme = _a.theme;
|
|
757
758
|
return theme.borderRadii.lg;
|
|
758
759
|
}, function (_a) {
|
|
@@ -782,7 +783,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
782
783
|
SpecialCard.Thumb = CardThumbnail;
|
|
783
784
|
SpecialCard.Header = CardHeader;
|
|
784
785
|
SpecialCard.Footer = CardFooter;
|
|
785
|
-
var templateObject_1$
|
|
786
|
+
var templateObject_1$16;
|
|
786
787
|
|
|
787
788
|
var CampaignCardSkeleton = function () {
|
|
788
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%" } })] })] }));
|
|
@@ -815,11 +816,11 @@ var getTypeDataIcon = function (type) {
|
|
|
815
816
|
return SvgCampaignFunctional;
|
|
816
817
|
}
|
|
817
818
|
};
|
|
818
|
-
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) {
|
|
819
820
|
var theme = _a.theme;
|
|
820
821
|
return theme.palette.grey["700"];
|
|
821
822
|
});
|
|
822
|
-
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) {
|
|
823
824
|
var theme = _a.theme;
|
|
824
825
|
return theme.space.base * 6;
|
|
825
826
|
}, function (_a) {
|
|
@@ -832,7 +833,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$r || (temp
|
|
|
832
833
|
var theme = _a.theme;
|
|
833
834
|
return theme.palette.white;
|
|
834
835
|
});
|
|
835
|
-
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) {
|
|
836
837
|
var theme = _a.theme;
|
|
837
838
|
return theme.palette.grey["500"];
|
|
838
839
|
});
|
|
@@ -840,11 +841,11 @@ var CampaignCard = function (_a) {
|
|
|
840
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"]);
|
|
841
842
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
842
843
|
var PillIcon = getTypeDataIcon(type);
|
|
843
|
-
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, {})] })] })));
|
|
844
845
|
};
|
|
845
|
-
var templateObject_1$
|
|
846
|
+
var templateObject_1$15, templateObject_2$s, templateObject_3$h;
|
|
846
847
|
|
|
847
|
-
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) {
|
|
848
849
|
var theme = _a.theme;
|
|
849
850
|
return theme.space.base * 6;
|
|
850
851
|
}, function (_a) {
|
|
@@ -861,16 +862,16 @@ var ProductCard = function (props) {
|
|
|
861
862
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
862
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 })) }))] })));
|
|
863
864
|
};
|
|
864
|
-
var templateObject_1$
|
|
865
|
+
var templateObject_1$14;
|
|
865
866
|
|
|
866
|
-
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) {
|
|
867
868
|
var theme = _a.theme;
|
|
868
869
|
return theme.palette.grey[500];
|
|
869
870
|
}, function (_a) {
|
|
870
871
|
var theme = _a.theme;
|
|
871
872
|
return theme.space.base;
|
|
872
873
|
});
|
|
873
|
-
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) {
|
|
874
875
|
var theme = _a.theme;
|
|
875
876
|
return theme.palette.blue[600];
|
|
876
877
|
}, function (_a) {
|
|
@@ -880,15 +881,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$q || (templat
|
|
|
880
881
|
var theme = _a.theme;
|
|
881
882
|
return theme.fontWeights.semibold;
|
|
882
883
|
});
|
|
883
|
-
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) {
|
|
884
885
|
var theme = _a.theme;
|
|
885
886
|
return theme.space.xs;
|
|
886
887
|
}, function (_a) {
|
|
887
888
|
var theme = _a.theme;
|
|
888
889
|
return theme.space.xs;
|
|
889
890
|
});
|
|
890
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
891
|
-
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) {
|
|
892
893
|
var theme = _a.theme;
|
|
893
894
|
return theme.space.base;
|
|
894
895
|
}, function (_a) {
|
|
@@ -898,7 +899,7 @@ var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$6 || (templa
|
|
|
898
899
|
var theme = _a.theme;
|
|
899
900
|
return theme.space.base * 4;
|
|
900
901
|
});
|
|
901
|
-
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) {
|
|
902
903
|
var theme = _a.theme;
|
|
903
904
|
return theme.components.notification.card.padding;
|
|
904
905
|
}, function (_a) {
|
|
@@ -915,15 +916,15 @@ var ServiceCard = function (props) {
|
|
|
915
916
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
916
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)); }) })))] })] })));
|
|
917
918
|
};
|
|
918
|
-
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;
|
|
919
920
|
|
|
920
|
-
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"])));
|
|
921
922
|
var InfoCard = function (props) {
|
|
922
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; }) }) })))] })));
|
|
923
924
|
};
|
|
924
|
-
var templateObject_1$
|
|
925
|
+
var templateObject_1$12;
|
|
925
926
|
|
|
926
|
-
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) {
|
|
927
928
|
var theme = _a.theme;
|
|
928
929
|
return theme.space.xl;
|
|
929
930
|
}, function (_a) {
|
|
@@ -934,7 +935,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
934
935
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
935
936
|
*/
|
|
936
937
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
937
|
-
var templateObject_1$
|
|
938
|
+
var templateObject_1$11;
|
|
938
939
|
|
|
939
940
|
/**
|
|
940
941
|
* Use Span to style and format inline text elements.
|
|
@@ -974,8 +975,8 @@ function useWindowSize() {
|
|
|
974
975
|
return size;
|
|
975
976
|
}
|
|
976
977
|
|
|
977
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1
|
|
978
|
-
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) {
|
|
979
980
|
var status = _a.status, theme = _a.theme;
|
|
980
981
|
switch (status) {
|
|
981
982
|
case "completed":
|
|
@@ -1009,9 +1010,9 @@ var Counter = function (props) {
|
|
|
1009
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() })] })));
|
|
1010
1011
|
};
|
|
1011
1012
|
Counter.Avatar = StyledTag.Avatar;
|
|
1012
|
-
var templateObject_1
|
|
1013
|
+
var templateObject_1$10, templateObject_2$q;
|
|
1013
1014
|
|
|
1014
|
-
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) {
|
|
1015
1016
|
var theme = _a.theme;
|
|
1016
1017
|
return theme.breakpoints.sm;
|
|
1017
1018
|
});
|
|
@@ -1028,40 +1029,40 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1028
1029
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1029
1030
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1030
1031
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1031
|
-
var templateObject_1
|
|
1032
|
+
var templateObject_1$$;
|
|
1032
1033
|
|
|
1033
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1034
|
-
var templateObject_1$
|
|
1034
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject([""], [""])));
|
|
1035
|
+
var templateObject_1$_;
|
|
1035
1036
|
|
|
1036
1037
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1037
1038
|
__proto__: null,
|
|
1038
1039
|
Field: Field$1
|
|
1039
1040
|
});
|
|
1040
1041
|
|
|
1041
|
-
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) {
|
|
1042
1043
|
var theme = _a.theme;
|
|
1043
1044
|
return theme.palette.blue[100];
|
|
1044
1045
|
});
|
|
1045
1046
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1046
|
-
var templateObject_1$
|
|
1047
|
+
var templateObject_1$Z;
|
|
1047
1048
|
|
|
1048
|
-
var Container = styled__default["default"].div(templateObject_1$
|
|
1049
|
-
var MetaContainer$1 = styled__default["default"].div(templateObject_2$
|
|
1050
|
-
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) {
|
|
1051
1052
|
var theme = _a.theme;
|
|
1052
1053
|
return theme.space.sm;
|
|
1053
1054
|
}, function (_a) {
|
|
1054
1055
|
var theme = _a.theme;
|
|
1055
1056
|
return theme.components.autocomplete.thumbSize;
|
|
1056
1057
|
});
|
|
1057
|
-
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) {
|
|
1058
1059
|
var theme = _a.theme;
|
|
1059
1060
|
return theme.fontWeights.medium;
|
|
1060
1061
|
}, function (_a) {
|
|
1061
1062
|
var theme = _a.theme;
|
|
1062
1063
|
return theme.palette.grey[800];
|
|
1063
1064
|
});
|
|
1064
|
-
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) {
|
|
1065
1066
|
var theme = _a.theme;
|
|
1066
1067
|
return theme.palette.grey[600];
|
|
1067
1068
|
});
|
|
@@ -1073,7 +1074,7 @@ var ItemContent = function (props) {
|
|
|
1073
1074
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1074
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 })] })] }));
|
|
1075
1076
|
};
|
|
1076
|
-
var templateObject_1$
|
|
1077
|
+
var templateObject_1$Y, templateObject_2$p, templateObject_3$f, templateObject_4$b, templateObject_5$6;
|
|
1077
1078
|
|
|
1078
1079
|
/**
|
|
1079
1080
|
* A Menu is a wrapper for items elements
|
|
@@ -1097,7 +1098,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1097
1098
|
*/
|
|
1098
1099
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1099
1100
|
|
|
1100
|
-
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) {
|
|
1101
1102
|
return props.isPrimary &&
|
|
1102
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 ");
|
|
1103
1104
|
});
|
|
@@ -1114,7 +1115,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1114
1115
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1115
1116
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1116
1117
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1117
|
-
var templateObject_1$
|
|
1118
|
+
var templateObject_1$X;
|
|
1118
1119
|
|
|
1119
1120
|
/**
|
|
1120
1121
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1129,7 +1130,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1129
1130
|
|
|
1130
1131
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1131
1132
|
|
|
1132
|
-
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) {
|
|
1133
1134
|
var theme = _a.theme;
|
|
1134
1135
|
return theme.palette.grey["800"];
|
|
1135
1136
|
}, function (_a) {
|
|
@@ -1142,37 +1143,37 @@ var editorStyle = styled.css(templateObject_1$V || (templateObject_1$V = __makeT
|
|
|
1142
1143
|
var theme = _a.theme;
|
|
1143
1144
|
return theme.palette.red[600];
|
|
1144
1145
|
});
|
|
1145
|
-
var templateObject_1$
|
|
1146
|
+
var templateObject_1$W;
|
|
1146
1147
|
|
|
1147
|
-
var _path$
|
|
1148
|
+
var _path$m;
|
|
1148
1149
|
|
|
1149
|
-
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); }
|
|
1150
1151
|
|
|
1151
1152
|
var SvgBoldFill = function SvgBoldFill(props) {
|
|
1152
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1153
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
|
|
1153
1154
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1154
1155
|
width: 16,
|
|
1155
1156
|
height: 16,
|
|
1156
1157
|
focusable: "false",
|
|
1157
1158
|
viewBox: "0 0 16 16"
|
|
1158
|
-
}, props), _path$
|
|
1159
|
+
}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1159
1160
|
fill: "currentColor",
|
|
1160
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"
|
|
1161
1162
|
})));
|
|
1162
1163
|
};
|
|
1163
1164
|
|
|
1164
|
-
var _path$
|
|
1165
|
+
var _path$l;
|
|
1165
1166
|
|
|
1166
|
-
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); }
|
|
1167
1168
|
|
|
1168
1169
|
var SvgItalicFill = function SvgItalicFill(props) {
|
|
1169
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1170
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
|
|
1170
1171
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1171
1172
|
width: 16,
|
|
1172
1173
|
height: 16,
|
|
1173
1174
|
focusable: "false",
|
|
1174
1175
|
viewBox: "0 0 16 16"
|
|
1175
|
-
}, props), _path$
|
|
1176
|
+
}, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1176
1177
|
fill: "none",
|
|
1177
1178
|
stroke: "currentColor",
|
|
1178
1179
|
strokeLinecap: "round",
|
|
@@ -1181,18 +1182,18 @@ var SvgItalicFill = function SvgItalicFill(props) {
|
|
|
1181
1182
|
})));
|
|
1182
1183
|
};
|
|
1183
1184
|
|
|
1184
|
-
var _path$
|
|
1185
|
+
var _path$k, _path2;
|
|
1185
1186
|
|
|
1186
|
-
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); }
|
|
1187
1188
|
|
|
1188
1189
|
var SvgQuoteFill = function SvgQuoteFill(props) {
|
|
1189
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1190
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
|
|
1190
1191
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1191
1192
|
width: 16,
|
|
1192
1193
|
height: 16,
|
|
1193
1194
|
focusable: "false",
|
|
1194
1195
|
viewBox: "0 0 16 16"
|
|
1195
|
-
}, props), _path$
|
|
1196
|
+
}, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1196
1197
|
fill: "currentColor",
|
|
1197
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"
|
|
1198
1199
|
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -1206,10 +1207,10 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
|
|
|
1206
1207
|
|
|
1207
1208
|
var _g$3;
|
|
1208
1209
|
|
|
1209
|
-
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); }
|
|
1210
1211
|
|
|
1211
1212
|
var SvgH1Fill = function SvgH1Fill(props) {
|
|
1212
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1213
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
|
|
1213
1214
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1214
1215
|
width: 16,
|
|
1215
1216
|
height: 16,
|
|
@@ -1238,10 +1239,10 @@ var SvgH1Fill = function SvgH1Fill(props) {
|
|
|
1238
1239
|
|
|
1239
1240
|
var _g$2;
|
|
1240
1241
|
|
|
1241
|
-
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); }
|
|
1242
1243
|
|
|
1243
1244
|
var SvgH2Fill = function SvgH2Fill(props) {
|
|
1244
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1245
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
|
|
1245
1246
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1246
1247
|
width: 16,
|
|
1247
1248
|
height: 16,
|
|
@@ -1270,10 +1271,10 @@ var SvgH2Fill = function SvgH2Fill(props) {
|
|
|
1270
1271
|
|
|
1271
1272
|
var _g$1;
|
|
1272
1273
|
|
|
1273
|
-
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); }
|
|
1274
1275
|
|
|
1275
1276
|
var SvgH3Fill = function SvgH3Fill(props) {
|
|
1276
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1277
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
|
|
1277
1278
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1278
1279
|
width: 16,
|
|
1279
1280
|
height: 16,
|
|
@@ -1300,8 +1301,8 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1300
1301
|
}))));
|
|
1301
1302
|
};
|
|
1302
1303
|
|
|
1303
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1304
|
-
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) {
|
|
1305
1306
|
var theme = _a.theme;
|
|
1306
1307
|
return theme.space.xxs;
|
|
1307
1308
|
}, StyledIconButton);
|
|
@@ -1318,9 +1319,9 @@ var FloatingMenu = function (props) {
|
|
|
1318
1319
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1319
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") }))] })) })));
|
|
1320
1321
|
};
|
|
1321
|
-
var templateObject_1$
|
|
1322
|
+
var templateObject_1$V, templateObject_2$o;
|
|
1322
1323
|
|
|
1323
|
-
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) {
|
|
1324
1325
|
var theme = _a.theme;
|
|
1325
1326
|
return theme.space.xs;
|
|
1326
1327
|
}, function (_a) {
|
|
@@ -1330,7 +1331,7 @@ var Header$1 = styled__default["default"].div(templateObject_1$T || (templateObj
|
|
|
1330
1331
|
var theme = _a.theme;
|
|
1331
1332
|
return theme.palette.grey[300];
|
|
1332
1333
|
});
|
|
1333
|
-
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) {
|
|
1334
1335
|
var validation = _a.validation, theme = _a.theme;
|
|
1335
1336
|
if (validation === "success") {
|
|
1336
1337
|
return "color: ".concat(theme.colors.successHue, ";");
|
|
@@ -1349,23 +1350,23 @@ var EditorHeader = function (props) {
|
|
|
1349
1350
|
var title = props.title, validation = props.validation;
|
|
1350
1351
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1351
1352
|
};
|
|
1352
|
-
var templateObject_1$
|
|
1353
|
+
var templateObject_1$U, templateObject_2$n;
|
|
1353
1354
|
|
|
1354
|
-
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) {
|
|
1355
1356
|
var theme = _a.theme;
|
|
1356
1357
|
return theme.space.sm;
|
|
1357
1358
|
}, function (_a) {
|
|
1358
1359
|
var theme = _a.theme;
|
|
1359
1360
|
return theme.palette.grey[100];
|
|
1360
1361
|
});
|
|
1361
|
-
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"])));
|
|
1362
1363
|
var EditorFooter = function (_a) {
|
|
1363
1364
|
var saveText = _a.saveText;
|
|
1364
1365
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1365
1366
|
};
|
|
1366
|
-
var templateObject_1$
|
|
1367
|
+
var templateObject_1$T, templateObject_2$m;
|
|
1367
1368
|
|
|
1368
|
-
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) {
|
|
1369
1370
|
var theme = _a.theme;
|
|
1370
1371
|
return theme.borderRadii.md;
|
|
1371
1372
|
}, function (_a) {
|
|
@@ -1449,9 +1450,9 @@ var Editor = function (_a) {
|
|
|
1449
1450
|
});
|
|
1450
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 })] })));
|
|
1451
1452
|
};
|
|
1452
|
-
var templateObject_1$
|
|
1453
|
+
var templateObject_1$S;
|
|
1453
1454
|
|
|
1454
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1455
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1455
1456
|
/**
|
|
1456
1457
|
* A Checkbox lets users select and unselect options from a list.
|
|
1457
1458
|
* <hr>
|
|
@@ -1463,17 +1464,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1463
1464
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1464
1465
|
**/
|
|
1465
1466
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1466
|
-
var templateObject_1$
|
|
1467
|
+
var templateObject_1$R;
|
|
1467
1468
|
|
|
1468
|
-
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([""], [""])));
|
|
1469
1470
|
/**
|
|
1470
1471
|
* A Label is used to specify a title for an input.
|
|
1471
1472
|
* <hr>
|
|
1472
1473
|
**/
|
|
1473
1474
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1474
|
-
var templateObject_1$
|
|
1475
|
+
var templateObject_1$Q;
|
|
1475
1476
|
|
|
1476
|
-
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) {
|
|
1477
1478
|
var theme = _a.theme;
|
|
1478
1479
|
return theme.space.base;
|
|
1479
1480
|
});
|
|
@@ -1484,16 +1485,16 @@ var CheckboxCard = function (props) {
|
|
|
1484
1485
|
setChecked(!checked);
|
|
1485
1486
|
props.onToggle && props.onToggle(!checked);
|
|
1486
1487
|
};
|
|
1487
|
-
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 })) })) }))] })));
|
|
1488
1489
|
};
|
|
1489
|
-
var templateObject_1$
|
|
1490
|
+
var templateObject_1$P;
|
|
1490
1491
|
|
|
1491
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1492
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1492
1493
|
/**
|
|
1493
1494
|
* A Field is a wrapper for input elements
|
|
1494
1495
|
**/
|
|
1495
1496
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1496
|
-
var templateObject_1$
|
|
1497
|
+
var templateObject_1$O;
|
|
1497
1498
|
|
|
1498
1499
|
var index = /*#__PURE__*/Object.freeze({
|
|
1499
1500
|
__proto__: null,
|
|
@@ -1501,8 +1502,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1501
1502
|
Hint: reactForms.Hint
|
|
1502
1503
|
});
|
|
1503
1504
|
|
|
1504
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1505
|
-
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([""], [""])));
|
|
1506
1507
|
/**
|
|
1507
1508
|
* An Input lets users enter text into a field.
|
|
1508
1509
|
* <hr>
|
|
@@ -1510,8 +1511,73 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$k || (te
|
|
|
1510
1511
|
* - To let the user enter data into a field
|
|
1511
1512
|
* - To enter multiline text, use a Textarea
|
|
1512
1513
|
**/
|
|
1513
|
-
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1514
|
-
var templateObject_1$
|
|
1514
|
+
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
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;
|
|
1515
1581
|
|
|
1516
1582
|
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1517
1583
|
/**
|
|
@@ -2958,6 +3024,20 @@ Timeline.Item = UgTimelineItem;
|
|
|
2958
3024
|
Timeline.Content = UgTimelineContent;
|
|
2959
3025
|
var templateObject_1$2, templateObject_2$1, templateObject_3;
|
|
2960
3026
|
|
|
3027
|
+
/**
|
|
3028
|
+
* A Tooltip modal provides contextual information about a paired element. It either opens automatically or through user action.
|
|
3029
|
+
* <hr>
|
|
3030
|
+
* Used for this:
|
|
3031
|
+
- To enable user action within a tooltip
|
|
3032
|
+
- To provide a focus loop when actions need to be inside a tooltip
|
|
3033
|
+
*/
|
|
3034
|
+
var TooltipModal = function (props) { return jsxRuntime.jsx(reactModals.TooltipModal, __assign({}, props)); };
|
|
3035
|
+
TooltipModal.Title = reactModals.TooltipModal.Title;
|
|
3036
|
+
TooltipModal.Body = reactModals.TooltipModal.Body;
|
|
3037
|
+
TooltipModal.Close = reactModals.TooltipModal.Close;
|
|
3038
|
+
TooltipModal.Footer = reactModals.TooltipModal.Footer;
|
|
3039
|
+
TooltipModal.FooterItem = reactModals.TooltipModal.FooterItem;
|
|
3040
|
+
|
|
2961
3041
|
/**
|
|
2962
3042
|
* A Trigger is a wrapper for input elements
|
|
2963
3043
|
**/
|
|
@@ -3039,6 +3119,7 @@ exports.Icon = Icon;
|
|
|
3039
3119
|
exports.IconButton = IconButton;
|
|
3040
3120
|
exports.InfoCard = InfoCard;
|
|
3041
3121
|
exports.Input = Input;
|
|
3122
|
+
exports.InputToggle = InputToggle;
|
|
3042
3123
|
exports.Item = Item;
|
|
3043
3124
|
exports.ItemContent = ItemContent;
|
|
3044
3125
|
exports.ItemMeta = ItemMeta;
|
|
@@ -3101,6 +3182,7 @@ exports.Timeline = Timeline;
|
|
|
3101
3182
|
exports.Title = Title$1;
|
|
3102
3183
|
exports.ToastProvider = ToastProvider;
|
|
3103
3184
|
exports.Toggle = Toggle;
|
|
3185
|
+
exports.TooltipModal = TooltipModal;
|
|
3104
3186
|
exports.Trigger = Trigger;
|
|
3105
3187
|
exports.UnorderedList = UnorderedList;
|
|
3106
3188
|
exports.XL = XL;
|