@appquality/unguess-design-system 2.5.6 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/build/index.d.ts +2 -0
  3. package/build/index.js +633 -107
  4. package/build/stories/campaignCards/_types.d.ts +39 -0
  5. package/build/stories/campaignCards/index.d.ts +4 -0
  6. package/build/stories/campaignCards/index.stories.d.ts +7 -0
  7. package/build/stories/forms/field/index.d.ts +2 -1
  8. package/build/stories/login-form/_types.d.ts +6 -0
  9. package/build/stories/logo/index.d.ts +1 -1
  10. package/build/stories/theme/index.d.ts +11 -9
  11. package/build/stories/theme/utils.d.ts +2 -0
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,45 @@
1
+ # v2.6.1 (Thu Mar 31 2022)
2
+
3
+ #### ⚠️ Pushed to `master`
4
+
5
+ - fix(login): add generic error message ([@cannarocks](https://github.com/cannarocks))
6
+
7
+ #### Authors: 1
8
+
9
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
10
+
11
+ ---
12
+
13
+ # v2.6.0 (Tue Mar 29 2022)
14
+
15
+ #### 🚀 Enhancement
16
+
17
+ - Feature/cup 500 campaign card [#27](https://github.com/AppQuality/unguess-design-system/pull/27) ([@cicababba](https://github.com/cicababba) [@marcbon](https://github.com/marcbon))
18
+
19
+ #### 🐛 Bug Fix
20
+
21
+ - Fix/campaign cards [#28](https://github.com/AppQuality/unguess-design-system/pull/28) ([@marcbon](https://github.com/marcbon))
22
+
23
+ #### ⚠️ Pushed to `master`
24
+
25
+ - fix(campaigncard): add html props to campaign card ([@cannarocks](https://github.com/cannarocks))
26
+ - fix(scroll): hide <Main /> scroll ([@cannarocks](https://github.com/cannarocks))
27
+ - fix(counter): fix error on zero counter values ([@cannarocks](https://github.com/cannarocks))
28
+
29
+ #### Authors: 3
30
+
31
+ - cicababba ([@cicababba](https://github.com/cicababba))
32
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
33
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
34
+
35
+ ---
36
+
37
+ # v2.5.7 (Mon Mar 28 2022)
38
+
39
+
40
+
41
+ ---
42
+
1
43
  # v2.5.6 (Mon Mar 28 2022)
2
44
 
3
45
  #### ⚠️ Pushed to `master`
package/build/index.d.ts CHANGED
@@ -8,7 +8,9 @@ export * from './stories/buttons/button-group';
8
8
  export * from './stories/buttons/icon-button';
9
9
  export * from './stories/buttons/split-button';
10
10
  export * from './stories/cards';
11
+ export * from './stories/campaignCards';
11
12
  export * from './stories/close';
13
+ export * from './stories/counter';
12
14
  export * as DropdownField from './stories/dropdowns/field';
13
15
  export * from './stories/dropdowns/item';
14
16
  export * from './stories/dropdowns/menu';
package/build/index.js CHANGED
@@ -10,18 +10,18 @@ var reactAvatars = require('@zendeskgarden/react-avatars');
10
10
  var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
11
11
  var reactButtons = require('@zendeskgarden/react-buttons');
12
12
  var reactNotifications = require('@zendeskgarden/react-notifications');
13
- var reactDropdowns = require('@zendeskgarden/react-dropdowns');
13
+ var reactTags = require('@zendeskgarden/react-tags');
14
14
  var reactForms = require('@zendeskgarden/react-forms');
15
- var reactGrid = require('@zendeskgarden/react-grid');
16
15
  var React = require('react');
16
+ var reactDropdowns = require('@zendeskgarden/react-dropdowns');
17
+ var reactGrid = require('@zendeskgarden/react-grid');
17
18
  var reactLoaders = require('@zendeskgarden/react-loaders');
18
19
  var formik = require('formik');
20
+ var reactTypography = require('@zendeskgarden/react-typography');
19
21
  var reactModals = require('@zendeskgarden/react-modals');
20
22
  var reactChrome = require('@zendeskgarden/react-chrome');
21
- var reactTypography = require('@zendeskgarden/react-typography');
22
23
  var reactPagination = require('@zendeskgarden/react-pagination');
23
24
  var reactTables = require('@zendeskgarden/react-tables');
24
- var reactTags = require('@zendeskgarden/react-tags');
25
25
 
26
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
27
27
 
@@ -215,6 +215,13 @@ var hex2rgba = function (hex, alpha) {
215
215
  var rgb = hex.match(/\w\w/g);
216
216
  var _a = rgb ? rgb.map(function (x) { return parseInt(x, 16); }) : [0, 0, 0], r = _a[0], g = _a[1], b = _a[2];
217
217
  return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(alpha, ")");
218
+ };
219
+ var boxShadow = function (theme) {
220
+ var space = theme.space, shadows = theme.shadows, palette = theme.palette;
221
+ var offsetY = "".concat(space.base, "px");
222
+ var blurRadius = "".concat(space.base * 2, "px");
223
+ var shadowColor = reactTheming.getColor(palette.grey, 800, theme, 0.15);
224
+ return shadows.lg(offsetY, blurRadius, shadowColor);
218
225
  };
219
226
 
220
227
  var gradients = {
@@ -222,10 +229,10 @@ var gradients = {
222
229
  dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
223
230
  };
224
231
 
225
- var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients, components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }) });
232
+ var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px" }), components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }), shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
226
233
 
227
- var GlobalStyle = styled.createGlobalStyle(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n body {\n font-family: ", ";\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n \n "], ["\n body {\n font-family: ", ";\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n \n "])), theme.fonts.system);
228
- var templateObject_1$y;
234
+ var GlobalStyle = styled.createGlobalStyle(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n body {\n font-family: ", ";\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n \n "], ["\n body {\n font-family: ", ";\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n \n "])), theme.fonts.system);
235
+ var templateObject_1$B;
229
236
 
230
237
  /**
231
238
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -241,7 +248,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
241
248
  Accordion.Panel = reactAccordions.Accordion.Panel;
242
249
 
243
250
  // import useWindowSize from "../../hooks/useWindowSize";
244
- var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
251
+ var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
245
252
  return "\n background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n ");
246
253
  });
247
254
  /**
@@ -264,7 +271,7 @@ var Avatar = function (props) {
264
271
  return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
265
272
  };
266
273
  Avatar.Text = UgAvatar.Text;
267
- var templateObject_1$x;
274
+ var templateObject_1$A;
268
275
 
269
276
  /**
270
277
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -285,7 +292,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
285
292
  */
286
293
  var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
287
294
 
288
- var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
295
+ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
289
296
  /**
290
297
  * Buttons let users take action quickly.
291
298
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -297,7 +304,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
297
304
  var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
298
305
  Button.StartIcon = UgButton.StartIcon;
299
306
  Button.EndIcon = UgButton.EndIcon;
300
- var templateObject_1$w;
307
+ var templateObject_1$z;
301
308
 
302
309
  /**
303
310
  A Button group lets users make a selection from a set of options.
@@ -335,11 +342,535 @@ var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitBu
335
342
  */
336
343
  var Card = function (props) { return jsxRuntime.jsx(reactNotifications.Well, __assign({}, props)); };
337
344
 
345
+ /**
346
+ * Tags let users categorize content using a keyword.
347
+
348
+ * Used for this:
349
+ - To add metadata to an element such as category, attribute, or property
350
+ - To communicate status
351
+ - To represent parameters of a filter
352
+
353
+ * Not for this:
354
+ - To prompt an action by the user, use a Button instead
355
+ */
356
+ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, props)); };
357
+ Tag.Avatar = reactTags.Tag.Avatar;
358
+ Tag.Close = reactTags.Tag.Close;
359
+
360
+ var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
361
+ /**
362
+ * A Label is used to specify a title for an input.
363
+ * <hr>
364
+ **/
365
+ var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
366
+ var templateObject_1$y;
367
+
368
+ var _g$4, _path$j, _path2$8, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
369
+
370
+ function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
371
+
372
+ var SvgFunctionalTestRoundIcon = function SvgFunctionalTestRoundIcon(props) {
373
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
374
+ width: 24,
375
+ height: 24,
376
+ viewBox: "0 0 24 24",
377
+ fill: "none",
378
+ xmlns: "http://www.w3.org/2000/svg"
379
+ }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
380
+ opacity: 0.3
381
+ }, /*#__PURE__*/React__namespace.createElement("path", {
382
+ opacity: 0.3,
383
+ d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
384
+ fill: "#003A57"
385
+ }))), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
386
+ d: "M12.4871 3.1964C8.68009 3.1964 5.59901 6.27748 5.59901 10.0844C5.59901 10.2596 5.59901 10.4347 5.62445 10.5854C5.29863 11.1861 4.82313 12.0129 4.24684 12.5138C3.82123 12.8896 3.92102 13.2907 3.97091 13.4404C4.09615 13.7662 4.44641 14.0411 5.02271 14.2417C5.22328 14.3171 5.44831 14.367 5.64889 14.4169L5.67433 16.8463C5.67433 17.7983 6.47565 18.625 7.4531 18.625L8.9305 18.1495L9.08117 19.0262C9.18097 19.6025 9.68191 20.0281 10.2837 20.0281C10.359 20.0281 10.4343 20.0281 10.5087 20.0026L15.1425 19.1769C15.8185 19.0516 16.2441 18.4254 16.1444 17.7494L15.8185 16.1213C17.9975 14.9188 19.375 12.5891 19.375 10.0843C19.375 6.30267 16.2696 3.19629 12.487 3.19629L12.4871 3.1964Z",
387
+ fill: "#003A57",
388
+ stroke: "#003A57"
389
+ })), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
390
+ fillRule: "evenodd",
391
+ clipRule: "evenodd",
392
+ d: "M6.39337 10.7688V10.1221H8.06755V10.7688H6.39337Z",
393
+ fill: "#E6EBEE"
394
+ })), _path3$6 || (_path3$6 = /*#__PURE__*/React__namespace.createElement("path", {
395
+ fillRule: "evenodd",
396
+ clipRule: "evenodd",
397
+ d: "M7.29937 13.6066L6.98608 13.0474L8.43487 12.1846L8.74815 12.7437L7.29937 13.6066Z",
398
+ fill: "#E6EBEE"
399
+ })), _path4$4 || (_path4$4 = /*#__PURE__*/React__namespace.createElement("path", {
400
+ fillRule: "evenodd",
401
+ clipRule: "evenodd",
402
+ d: "M8.43603 8.70472L6.98724 7.84334L7.30053 7.28418L8.74931 8.14556L8.43603 8.70472Z",
403
+ fill: "#E6EBEE"
404
+ })), _path5$3 || (_path5$3 = /*#__PURE__*/React__namespace.createElement("path", {
405
+ fillRule: "evenodd",
406
+ clipRule: "evenodd",
407
+ d: "M16.6807 7.28418L16.994 7.84334L15.5452 8.70472L15.2319 8.14556L16.6807 7.28418Z",
408
+ fill: "#E6EBEE"
409
+ })), _path6$3 || (_path6$3 = /*#__PURE__*/React__namespace.createElement("path", {
410
+ fillRule: "evenodd",
411
+ clipRule: "evenodd",
412
+ d: "M11.677 4.68066H12.305V6.40488H11.677V4.68066Z",
413
+ fill: "#E6EBEE"
414
+ })), _path7$3 || (_path7$3 = /*#__PURE__*/React__namespace.createElement("path", {
415
+ fillRule: "evenodd",
416
+ clipRule: "evenodd",
417
+ d: "M9.46389 5.29102L10.3017 6.78309L9.75875 7.10574L8.92236 5.61367L9.46389 5.29102Z",
418
+ fill: "#E6EBEE"
419
+ })), _path8$3 || (_path8$3 = /*#__PURE__*/React__namespace.createElement("path", {
420
+ fillRule: "evenodd",
421
+ clipRule: "evenodd",
422
+ d: "M13.3026 12.9984V14.6233H12.7313L12.7327 15.2511H11.2485L11.2471 14.6233H10.6786V12.9984C9.80541 12.5064 9.24969 11.553 9.24969 10.5252C9.24969 8.97036 10.4802 7.70312 11.9899 7.70312C13.5025 7.70312 14.7329 8.97036 14.7329 10.5252C14.7315 11.5516 14.1744 12.5049 13.3026 12.9984H13.3026Z",
423
+ fill: "#E6EBEE"
424
+ })), _path9$3 || (_path9$3 = /*#__PURE__*/React__namespace.createElement("path", {
425
+ fillRule: "evenodd",
426
+ clipRule: "evenodd",
427
+ d: "M14.2242 7.10672L13.6813 6.78407L14.5177 5.29199L15.0606 5.61464L14.2242 7.10672Z",
428
+ fill: "#E6EBEE"
429
+ })), _path10$3 || (_path10$3 = /*#__PURE__*/React__namespace.createElement("path", {
430
+ fillRule: "evenodd",
431
+ clipRule: "evenodd",
432
+ d: "M16.6807 13.6066L15.2319 12.7437L15.5452 12.1846L16.994 13.0474L16.6807 13.6066Z",
433
+ fill: "#E6EBEE"
434
+ })), _path11$2 || (_path11$2 = /*#__PURE__*/React__namespace.createElement("path", {
435
+ fillRule: "evenodd",
436
+ clipRule: "evenodd",
437
+ d: "M17.5866 10.7688H15.9124V10.1221H17.5866V10.7688Z",
438
+ fill: "#E6EBEE"
439
+ })));
440
+ };
441
+
442
+ var _g$3, _path$i;
443
+
444
+ function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
445
+
446
+ var SvgRegressionTestRoundIcon = function SvgRegressionTestRoundIcon(props) {
447
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
448
+ width: 24,
449
+ height: 24,
450
+ viewBox: "0 0 24 24",
451
+ fill: "none",
452
+ xmlns: "http://www.w3.org/2000/svg"
453
+ }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
454
+ opacity: 0.3
455
+ }, /*#__PURE__*/React__namespace.createElement("path", {
456
+ opacity: 0.3,
457
+ d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
458
+ fill: "#003A57"
459
+ }))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
460
+ d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
461
+ fill: "#003A57"
462
+ })));
463
+ };
464
+
465
+ var _circle$2, _path$h, _path2$7, _path3$5;
466
+
467
+ function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
468
+
469
+ var SvgCompletedStatusRoundIcon = function SvgCompletedStatusRoundIcon(props) {
470
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
471
+ width: 32,
472
+ height: 32,
473
+ viewBox: "0 0 32 32",
474
+ fill: "none",
475
+ xmlns: "http://www.w3.org/2000/svg"
476
+ }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
477
+ cx: 16,
478
+ cy: 16,
479
+ r: 16,
480
+ fill: "#F8F9F9"
481
+ })), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
482
+ d: "M24.6953 9.73905C25.0148 9.41953 25.0148 8.90149 24.6953 8.58197C24.3758 8.26245 23.8577 8.26245 23.5382 8.58197L15.88 16.2402L14.0849 13.9598C13.8054 13.6048 13.291 13.5435 12.9359 13.823C12.5809 14.1025 12.5196 14.6169 12.7991 14.972L15.1642 17.9763C15.3089 18.16 15.5252 18.2731 15.7586 18.2869C15.9921 18.3008 16.2203 18.2141 16.3856 18.0487L24.6953 9.73905Z",
483
+ fill: "#27DD70"
484
+ })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
485
+ d: "M7 16C7 11.0294 11.0294 7 16 7C17.3602 7 18.6521 7.3023 19.8102 7.84415C20.2195 8.03565 20.396 8.52268 20.2045 8.93196C20.013 9.34125 19.526 9.5178 19.1167 9.3263C18.1712 8.88391 17.1156 8.63636 16 8.63636C11.9332 8.63636 8.63636 11.9332 8.63636 16C8.63636 20.0668 11.9332 23.3636 16 23.3636C20.0668 23.3636 23.3636 20.0668 23.3636 16C23.3636 15.3631 23.283 14.7462 23.1317 14.1585C23.0191 13.7208 23.2826 13.2748 23.7202 13.1622C24.1578 13.0496 24.6038 13.313 24.7165 13.7506C24.9017 14.4705 25 15.2243 25 16C25 20.9705 20.9705 25 16 25C11.0294 25 7 20.9705 7 16Z",
486
+ fill: "#27DD70"
487
+ })), _path3$5 || (_path3$5 = /*#__PURE__*/React__namespace.createElement("path", {
488
+ d: "M24.6953 9.73905C25.0148 9.41953 25.0148 8.90149 24.6953 8.58197C24.3758 8.26245 23.8577 8.26245 23.5382 8.58197L15.88 16.2402L14.0849 13.9598C13.8054 13.6048 13.291 13.5435 12.9359 13.823C12.5809 14.1025 12.5196 14.6169 12.7991 14.972L15.1642 17.9763C15.3089 18.16 15.5252 18.2731 15.7586 18.2869C15.9921 18.3008 16.2203 18.2141 16.3856 18.0487L24.6953 9.73905Z",
489
+ fill: "#158944"
490
+ })));
491
+ };
492
+
493
+ var _circle$1, _path$g, _path2$6, _path3$4, _path4$3, _path5$2, _path6$2, _path7$2, _path8$2, _path9$2, _path10$2;
494
+
495
+ function _extends$h() { _extends$h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
496
+
497
+ var SvgOnGoingStatusRoundIcon = function SvgOnGoingStatusRoundIcon(props) {
498
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
499
+ width: 32,
500
+ height: 32,
501
+ viewBox: "0 0 32 32",
502
+ fill: "none",
503
+ xmlns: "http://www.w3.org/2000/svg"
504
+ }, props), _circle$1 || (_circle$1 = /*#__PURE__*/React__namespace.createElement("circle", {
505
+ cx: 16,
506
+ cy: 16,
507
+ r: 16,
508
+ fill: "#F8F9F9"
509
+ })), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
510
+ d: "M17.059 20.7647C17.059 20.1799 16.585 19.7059 16.0002 19.7059C15.4154 19.7059 14.9414 20.1799 14.9414 20.7647V23.9412C14.9414 24.5259 15.4154 25 16.0002 25C16.585 25 17.059 24.5259 17.059 23.9412V20.7647Z",
511
+ fill: "#D1820A"
512
+ })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
513
+ d: "M20.1149 18.6183C19.7014 18.2048 19.031 18.2048 18.6175 18.6183C18.204 19.0318 18.204 19.7022 18.6175 20.1157L20.8649 22.3631C21.2783 22.7766 21.9488 22.7766 22.3623 22.3631C22.7757 21.9496 22.7757 21.2792 22.3623 20.8657L20.1149 18.6183Z",
514
+ fill: "#D1820A"
515
+ })), _path3$4 || (_path3$4 = /*#__PURE__*/React__namespace.createElement("path", {
516
+ d: "M20.7649 14.9412C20.1802 14.9412 19.7061 15.4152 19.7061 16C19.7061 16.5848 20.1802 17.0588 20.7649 17.0588H23.9414C24.5262 17.0588 25.0002 16.5848 25.0002 16C25.0002 15.4152 24.5262 14.9412 23.9414 14.9412H20.7649Z",
517
+ fill: "#D1820A"
518
+ })), _path4$3 || (_path4$3 = /*#__PURE__*/React__namespace.createElement("path", {
519
+ d: "M13.3811 18.6183C13.7945 19.0318 13.7945 19.7022 13.3811 20.1157L11.1337 22.3631C10.7202 22.7766 10.0498 22.7766 9.63629 22.3631C9.2228 21.9496 9.2228 21.2792 9.63629 20.8657L11.8836 18.6183C12.2971 18.2048 12.9676 18.2048 13.3811 18.6183Z",
520
+ fill: "#D1820A"
521
+ })), _path5$2 || (_path5$2 = /*#__PURE__*/React__namespace.createElement("path", {
522
+ d: "M20.1149 18.6183C19.7014 18.2048 19.031 18.2048 18.6175 18.6183C18.204 19.0318 18.204 19.7022 18.6175 20.1157L20.8649 22.3631C21.2783 22.7766 21.9488 22.7766 22.3623 22.3631C22.7757 21.9496 22.7757 21.2792 22.3623 20.8657L20.1149 18.6183Z",
523
+ fill: "#FBE1AC"
524
+ })), _path6$2 || (_path6$2 = /*#__PURE__*/React__namespace.createElement("path", {
525
+ d: "M20.7649 14.9412C20.1802 14.9412 19.7061 15.4152 19.7061 16C19.7061 16.5848 20.1802 17.0588 20.7649 17.0588H23.9414C24.5262 17.0588 25.0002 16.5848 25.0002 16C25.0002 15.4152 24.5262 14.9412 23.9414 14.9412H20.7649Z",
526
+ fill: "#FBE1AC"
527
+ })), _path7$2 || (_path7$2 = /*#__PURE__*/React__namespace.createElement("path", {
528
+ d: "M16 7C16.5848 7 17.0588 7.47405 17.0588 8.05882V11.2353C17.0588 11.8201 16.5848 12.2941 16 12.2941C15.4152 12.2941 14.9412 11.8201 14.9412 11.2353V8.05882C14.9412 7.47405 15.4152 7 16 7Z",
529
+ fill: "#F7BF50"
530
+ })), _path8$2 || (_path8$2 = /*#__PURE__*/React__namespace.createElement("path", {
531
+ d: "M9.63607 9.63685C10.0496 9.22335 10.72 9.22335 11.1335 9.63685L13.3808 11.8842C13.7943 12.2977 13.7943 12.9681 13.3808 13.3816C12.9673 13.7951 12.2969 13.7951 11.8834 13.3816L9.63608 11.1343C9.22258 10.7208 9.22258 10.0503 9.63607 9.63685Z",
532
+ fill: "#F7BF50"
533
+ })), _path9$2 || (_path9$2 = /*#__PURE__*/React__namespace.createElement("path", {
534
+ d: "M7 16C7 15.4152 7.47405 14.9412 8.05882 14.9412H11.2353C11.8201 14.9412 12.2941 15.4152 12.2941 16C12.2941 16.5848 11.8201 17.0588 11.2353 17.0588H8.05882C7.47405 17.0588 7 16.5848 7 16Z",
535
+ fill: "#F7BF50"
536
+ })), _path10$2 || (_path10$2 = /*#__PURE__*/React__namespace.createElement("path", {
537
+ d: "M22.362 11.1343C22.7755 10.7208 22.7755 10.0503 22.362 9.63685C21.9485 9.22335 21.2781 9.22335 20.8646 9.63685L18.6173 11.8842C18.2038 12.2977 18.2038 12.9681 18.6173 13.3816C19.0308 13.7951 19.7012 13.7951 20.1147 13.3816L22.362 11.1343Z",
538
+ fill: "#F7BF50"
539
+ })));
540
+ };
541
+
542
+ var _circle, _path$f, _path2$5;
543
+
544
+ function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
545
+
546
+ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
547
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
548
+ width: 32,
549
+ height: 32,
550
+ viewBox: "0 0 32 32",
551
+ fill: "none",
552
+ xmlns: "http://www.w3.org/2000/svg"
553
+ }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
554
+ cx: 16,
555
+ cy: 16,
556
+ r: 16,
557
+ fill: "#F8F9F9"
558
+ })), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
559
+ d: "M15.2266 17.0313H18.997M15.2266 13.2607V17.0313V13.2607ZM15.2266 17.0313L24.121 9.03906L15.2266 17.0313Z",
560
+ stroke: "#1371D6",
561
+ strokeWidth: 1.5,
562
+ strokeLinecap: "round",
563
+ strokeLinejoin: "round"
564
+ })), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
565
+ d: "M19.4918 8.52344C18.4312 8.02722 17.2477 7.75 15.9995 7.75C11.4431 7.75 7.74945 11.4437 7.74945 16C7.74945 20.5563 11.4431 24.25 15.9995 24.25C20.5558 24.25 24.2495 20.5563 24.2495 16C24.2495 15.2878 24.1592 14.5968 23.9896 13.9375",
566
+ stroke: "#3091EC",
567
+ strokeWidth: 1.5,
568
+ strokeLinecap: "round",
569
+ strokeLinejoin: "round"
570
+ })));
571
+ };
572
+
573
+ var getStatusIcon = function (status) {
574
+ switch (status) {
575
+ case "COMPLETED":
576
+ return SvgCompletedStatusRoundIcon;
577
+ case "PROGRESS":
578
+ return SvgOnGoingStatusRoundIcon;
579
+ case "INCOMING":
580
+ return SvgArrivalStatusRoundIcon;
581
+ }
582
+ };
583
+ var getTypeData = function (type) {
584
+ switch (type) {
585
+ case "EXPERIENTIAL":
586
+ return {
587
+ pillIcon: SvgRegressionTestRoundIcon,
588
+ };
589
+ case "FUNCTIONAL":
590
+ return {
591
+ pillIcon: SvgFunctionalTestRoundIcon,
592
+ };
593
+ }
594
+ };
595
+ var Wrapper = styled__default["default"](Card)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n border-radius: ", ";\n padding: 1rem;\n border: 1px solid ", ";\n\n &:hover {\n box-shadow: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: 1rem;\n border: 1px solid ", ";\n\n &:hover {\n box-shadow: ", ";\n }\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
596
+ var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), theme.palette.grey["700"]);
597
+ var StyledTagNew = styled__default["default"](Tag)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px ", "px;\n color: ", ";\n"])), function (_a) {
598
+ var theme = _a.theme;
599
+ return theme.space.base * 6;
600
+ }, theme.space.base, function (_a) {
601
+ var theme = _a.theme;
602
+ return theme.space.base * 2;
603
+ }, theme.palette.white);
604
+ var StyledLabel = styled__default["default"](Label)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: ", ";\n color: ", "\n"], ["\n font-size: ", ";\n color: ", "\n"])), theme.fontSizes.sm, theme.palette.grey["500"]);
605
+ var StyledTitleLabel = styled__default["default"](Label)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n"])), theme.palette.blue["600"], theme.fontSizes.lg);
606
+ var Divider = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), theme.space.lg, theme.palette.grey["300"]);
607
+ var CardHeader = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"])));
608
+ var CardBody = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n"])), theme.space.xxl);
609
+ var CardFooter = styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"])));
610
+ var getFormattedLocaleDate = function () {
611
+ return new Date().toLocaleString().substring(0, 10);
612
+ };
613
+ var CampaignCard = function (props) {
614
+ var isNew = props.isNew, date = props.date, title = props.title, subTitle = props.subTitle, status = props.status, type = props.type;
615
+ var shownDate = date === getFormattedLocaleDate() ? "Today" : date;
616
+ var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
617
+ var typeData = getTypeData(type);
618
+ var PillIcon = typeData === null || typeData === void 0 ? void 0 : typeData.pillIcon;
619
+ var titleCut = title;
620
+ if (title.length > 42) {
621
+ titleCut = "".concat(title.substring(0, 39), "...");
622
+ }
623
+ var subTitleCut = subTitle;
624
+ if (subTitle.length > 29) {
625
+ subTitleCut = "".concat(subTitle.substring(0, 26), "...");
626
+ }
627
+ return jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: shownDate })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: "New!" }, { children: "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: titleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: subTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
628
+ jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] })), jsxRuntime.jsx(StatusIcon, {})] })] }));
629
+ };
630
+ var templateObject_1$x, templateObject_2$4, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
631
+
338
632
  /**
339
633
  * Title is a basic component used to display a title. Often used in card headers.
340
634
  */
341
635
  var Close = function (props) { return jsxRuntime.jsx(reactNotifications.Close, __assign({}, props)); };
342
636
 
637
+ var _path$e, _path2$4, _path3$3, _path4$2;
638
+
639
+ function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
640
+
641
+ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
642
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
643
+ width: 24,
644
+ height: 24,
645
+ viewBox: "0 0 24 24",
646
+ fill: "none",
647
+ xmlns: "http://www.w3.org/2000/svg"
648
+ }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
649
+ d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
650
+ fill: "#F8F9F9"
651
+ })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
652
+ d: "M20.6953 5.73905C21.0148 5.41953 21.0148 4.90149 20.6953 4.58197C20.3758 4.26245 19.8577 4.26245 19.5382 4.58197L11.88 12.2402L10.0849 9.95981C9.80539 9.60476 9.29098 9.54352 8.93593 9.82303C8.58088 10.1025 8.51963 10.6169 8.79914 10.972L11.1642 13.9763C11.3089 14.16 11.5252 14.2731 11.7586 14.2869C11.9921 14.3008 12.2203 14.2141 12.3856 14.0487L20.6953 5.73905Z",
653
+ fill: "#27DD70"
654
+ })), _path3$3 || (_path3$3 = /*#__PURE__*/React__namespace.createElement("path", {
655
+ d: "M3 12C3 7.02944 7.02944 3 12 3C13.3602 3 14.6521 3.3023 15.8102 3.84415C16.2195 4.03565 16.396 4.52268 16.2045 4.93196C16.013 5.34125 15.526 5.5178 15.1167 5.3263C14.1712 4.88391 13.1156 4.63636 12 4.63636C7.93318 4.63636 4.63636 7.93318 4.63636 12C4.63636 16.0668 7.93318 19.3636 12 19.3636C16.0668 19.3636 19.3636 16.0668 19.3636 12C19.3636 11.3631 19.283 10.7462 19.1317 10.1585C19.0191 9.72084 19.2826 9.27479 19.7202 9.16218C20.1578 9.04957 20.6038 9.31303 20.7165 9.75064C20.9017 10.4705 21 11.2243 21 12C21 16.9705 16.9705 21 12 21C7.02944 21 3 16.9705 3 12Z",
656
+ fill: "#27DD70"
657
+ })), _path4$2 || (_path4$2 = /*#__PURE__*/React__namespace.createElement("path", {
658
+ d: "M20.6953 5.73905C21.0148 5.41953 21.0148 4.90149 20.6953 4.58197C20.3758 4.26245 19.8577 4.26245 19.5382 4.58197L11.88 12.2402L10.0849 9.95981C9.80539 9.60476 9.29098 9.54352 8.93593 9.82303C8.58088 10.1025 8.51963 10.6169 8.79914 10.972L11.1642 13.9763C11.3089 14.16 11.5252 14.2731 11.7586 14.2869C11.9921 14.3008 12.2203 14.2141 12.3856 14.0487L20.6953 5.73905Z",
659
+ fill: "#158944"
660
+ })));
661
+ };
662
+
663
+ var _path$d, _path2$3, _path3$2, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
664
+
665
+ function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
666
+
667
+ var SvgCampaignProgress = function SvgCampaignProgress(props) {
668
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
669
+ width: 24,
670
+ height: 24,
671
+ viewBox: "0 0 24 24",
672
+ fill: "none",
673
+ xmlns: "http://www.w3.org/2000/svg"
674
+ }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
675
+ d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
676
+ fill: "#F8F9F9"
677
+ })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
678
+ d: "M13.059 16.7647C13.059 16.1799 12.585 15.7059 12.0002 15.7059C11.4154 15.7059 10.9414 16.1799 10.9414 16.7647V19.9412C10.9414 20.5259 11.4154 21 12.0002 21C12.585 21 13.059 20.5259 13.059 19.9412V16.7647Z",
679
+ fill: "#D1820A"
680
+ })), _path3$2 || (_path3$2 = /*#__PURE__*/React__namespace.createElement("path", {
681
+ d: "M16.1149 14.6183C15.7014 14.2048 15.031 14.2048 14.6175 14.6183C14.204 15.0318 14.204 15.7022 14.6175 16.1157L16.8649 18.3631C17.2783 18.7766 17.9488 18.7766 18.3623 18.3631C18.7757 17.9496 18.7757 17.2792 18.3623 16.8657L16.1149 14.6183Z",
682
+ fill: "#D1820A"
683
+ })), _path4$1 || (_path4$1 = /*#__PURE__*/React__namespace.createElement("path", {
684
+ d: "M16.7649 10.9412C16.1802 10.9412 15.7061 11.4152 15.7061 12C15.7061 12.5848 16.1802 13.0588 16.7649 13.0588H19.9414C20.5262 13.0588 21.0002 12.5848 21.0002 12C21.0002 11.4152 20.5262 10.9412 19.9414 10.9412H16.7649Z",
685
+ fill: "#D1820A"
686
+ })), _path5$1 || (_path5$1 = /*#__PURE__*/React__namespace.createElement("path", {
687
+ d: "M9.38105 14.6183C9.79455 15.0318 9.79455 15.7022 9.38105 16.1157L7.1337 18.3631C6.7202 18.7766 6.04979 18.7766 5.63629 18.3631C5.2228 17.9496 5.2228 17.2792 5.63629 16.8657L7.88365 14.6183C8.29714 14.2048 8.96756 14.2048 9.38105 14.6183Z",
688
+ fill: "#D1820A"
689
+ })), _path6$1 || (_path6$1 = /*#__PURE__*/React__namespace.createElement("path", {
690
+ d: "M16.1149 14.6183C15.7014 14.2048 15.031 14.2048 14.6175 14.6183C14.204 15.0318 14.204 15.7022 14.6175 16.1157L16.8649 18.3631C17.2783 18.7766 17.9488 18.7766 18.3623 18.3631C18.7757 17.9496 18.7757 17.2792 18.3623 16.8657L16.1149 14.6183Z",
691
+ fill: "#FBE1AC"
692
+ })), _path7$1 || (_path7$1 = /*#__PURE__*/React__namespace.createElement("path", {
693
+ d: "M16.7649 10.9412C16.1802 10.9412 15.7061 11.4152 15.7061 12C15.7061 12.5848 16.1802 13.0588 16.7649 13.0588H19.9414C20.5262 13.0588 21.0002 12.5848 21.0002 12C21.0002 11.4152 20.5262 10.9412 19.9414 10.9412H16.7649Z",
694
+ fill: "#FBE1AC"
695
+ })), _path8$1 || (_path8$1 = /*#__PURE__*/React__namespace.createElement("path", {
696
+ d: "M12 3C12.5848 3 13.0588 3.47405 13.0588 4.05882V7.23529C13.0588 7.82007 12.5848 8.29412 12 8.29412C11.4152 8.29412 10.9412 7.82007 10.9412 7.23529V4.05882C10.9412 3.47405 11.4152 3 12 3Z",
697
+ fill: "#F7BF50"
698
+ })), _path9$1 || (_path9$1 = /*#__PURE__*/React__namespace.createElement("path", {
699
+ d: "M5.63607 5.63685C6.04957 5.22335 6.71998 5.22335 7.13348 5.63685L9.38083 7.8842C9.79433 8.2977 9.79433 8.96811 9.38083 9.3816C8.96734 9.7951 8.29693 9.7951 7.88343 9.38161L5.63608 7.13425C5.22258 6.72076 5.22258 6.05035 5.63607 5.63685Z",
700
+ fill: "#F7BF50"
701
+ })), _path10$1 || (_path10$1 = /*#__PURE__*/React__namespace.createElement("path", {
702
+ d: "M3 12C3 11.4152 3.47405 10.9412 4.05882 10.9412H7.23529C7.82007 10.9412 8.29412 11.4152 8.29412 12C8.29412 12.5848 7.82007 13.0588 7.23529 13.0588H4.05882C3.47405 13.0588 3 12.5848 3 12Z",
703
+ fill: "#F7BF50"
704
+ })), _path11$1 || (_path11$1 = /*#__PURE__*/React__namespace.createElement("path", {
705
+ d: "M18.362 7.13425C18.7755 6.72076 18.7755 6.05035 18.362 5.63685C17.9485 5.22335 17.2781 5.22335 16.8646 5.63685L14.6173 7.8842C14.2038 8.2977 14.2038 8.96811 14.6173 9.3816C15.0308 9.7951 15.7012 9.7951 16.1147 9.38161L18.362 7.13425Z",
706
+ fill: "#F7BF50"
707
+ })));
708
+ };
709
+
710
+ var _path$c, _path2$2, _path3$1;
711
+
712
+ function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
713
+
714
+ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
715
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
716
+ width: 24,
717
+ height: 24,
718
+ viewBox: "0 0 24 24",
719
+ fill: "none",
720
+ xmlns: "http://www.w3.org/2000/svg"
721
+ }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
722
+ d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
723
+ fill: "#F8F9F9"
724
+ })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
725
+ d: "M11.2266 13.0313H14.997M11.2266 9.26075V13.0313V9.26075ZM11.2266 13.0313L20.121 5.03906L11.2266 13.0313Z",
726
+ stroke: "#1371D6",
727
+ strokeWidth: 1.5,
728
+ strokeLinecap: "round",
729
+ strokeLinejoin: "round"
730
+ })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
731
+ d: "M15.4918 4.52344C14.4312 4.02722 13.2477 3.75 11.9995 3.75C7.4431 3.75 3.74945 7.44365 3.74945 12C3.74945 16.5563 7.4431 20.25 11.9995 20.25C16.5558 20.25 20.2495 16.5563 20.2495 12C20.2495 11.2878 20.1592 10.5968 19.9896 9.9375",
732
+ stroke: "#3091EC",
733
+ strokeWidth: 1.5,
734
+ strokeLinecap: "round",
735
+ strokeLinejoin: "round"
736
+ })));
737
+ };
738
+
739
+ var _g$2, _path$b;
740
+
741
+ function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
742
+
743
+ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
744
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
745
+ width: 24,
746
+ height: 24,
747
+ viewBox: "0 0 24 24",
748
+ fill: "none",
749
+ xmlns: "http://www.w3.org/2000/svg"
750
+ }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
751
+ opacity: 0.3
752
+ }, /*#__PURE__*/React__namespace.createElement("path", {
753
+ opacity: 0.3,
754
+ d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
755
+ fill: "#003A57"
756
+ }))), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
757
+ d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
758
+ fill: "#003A57"
759
+ })));
760
+ };
761
+
762
+ var _g$1, _path$a, _path2$1, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
763
+
764
+ function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
765
+
766
+ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
767
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
768
+ width: 24,
769
+ height: 24,
770
+ viewBox: "0 0 24 24",
771
+ fill: "none",
772
+ xmlns: "http://www.w3.org/2000/svg"
773
+ }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
774
+ opacity: 0.3
775
+ }, /*#__PURE__*/React__namespace.createElement("path", {
776
+ opacity: 0.3,
777
+ d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
778
+ fill: "#003A57"
779
+ }))), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
780
+ d: "M12.4871 3.1964C8.68009 3.1964 5.59901 6.27748 5.59901 10.0844C5.59901 10.2596 5.59901 10.4347 5.62445 10.5854C5.29863 11.1861 4.82313 12.0129 4.24684 12.5138C3.82123 12.8896 3.92102 13.2907 3.97091 13.4404C4.09615 13.7662 4.44641 14.0411 5.02271 14.2417C5.22328 14.3171 5.44831 14.367 5.64889 14.4169L5.67433 16.8463C5.67433 17.7983 6.47565 18.625 7.4531 18.625L8.9305 18.1495L9.08117 19.0262C9.18097 19.6025 9.68191 20.0281 10.2837 20.0281C10.359 20.0281 10.4343 20.0281 10.5087 20.0026L15.1425 19.1769C15.8185 19.0516 16.2441 18.4254 16.1444 17.7494L15.8185 16.1213C17.9975 14.9188 19.375 12.5891 19.375 10.0843C19.375 6.30267 16.2696 3.19629 12.487 3.19629L12.4871 3.1964Z",
781
+ fill: "#003A57",
782
+ stroke: "#003A57"
783
+ })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
784
+ fillRule: "evenodd",
785
+ clipRule: "evenodd",
786
+ d: "M6.39337 10.7688V10.1221H8.06755V10.7688H6.39337Z",
787
+ fill: "#E6EBEE"
788
+ })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
789
+ fillRule: "evenodd",
790
+ clipRule: "evenodd",
791
+ d: "M7.2994 13.6066L6.98611 13.0474L8.4349 12.1846L8.74818 12.7437L7.2994 13.6066Z",
792
+ fill: "#E6EBEE"
793
+ })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
794
+ fillRule: "evenodd",
795
+ clipRule: "evenodd",
796
+ d: "M8.43603 8.70472L6.98724 7.84335L7.30053 7.28418L8.74931 8.14556L8.43603 8.70472Z",
797
+ fill: "#E6EBEE"
798
+ })), _path5 || (_path5 = /*#__PURE__*/React__namespace.createElement("path", {
799
+ fillRule: "evenodd",
800
+ clipRule: "evenodd",
801
+ d: "M16.6807 7.28418L16.994 7.84335L15.5453 8.70472L15.232 8.14556L16.6807 7.28418Z",
802
+ fill: "#E6EBEE"
803
+ })), _path6 || (_path6 = /*#__PURE__*/React__namespace.createElement("path", {
804
+ fillRule: "evenodd",
805
+ clipRule: "evenodd",
806
+ d: "M11.677 4.68066H12.305V6.40488H11.677V4.68066Z",
807
+ fill: "#E6EBEE"
808
+ })), _path7 || (_path7 = /*#__PURE__*/React__namespace.createElement("path", {
809
+ fillRule: "evenodd",
810
+ clipRule: "evenodd",
811
+ d: "M9.46389 5.29102L10.3017 6.78309L9.75875 7.10574L8.92236 5.61367L9.46389 5.29102Z",
812
+ fill: "#E6EBEE"
813
+ })), _path8 || (_path8 = /*#__PURE__*/React__namespace.createElement("path", {
814
+ fillRule: "evenodd",
815
+ clipRule: "evenodd",
816
+ d: "M13.3026 12.9984V14.6233H12.7313L12.7327 15.2511H11.2485L11.2471 14.6233H10.6787V12.9984C9.80544 12.5064 9.24973 11.553 9.24973 10.5252C9.24973 8.97036 10.4802 7.70312 11.9899 7.70312C13.5025 7.70312 14.733 8.97036 14.733 10.5252C14.7316 11.5516 14.1744 12.5049 13.3026 12.9984H13.3026Z",
817
+ fill: "#E6EBEE"
818
+ })), _path9 || (_path9 = /*#__PURE__*/React__namespace.createElement("path", {
819
+ fillRule: "evenodd",
820
+ clipRule: "evenodd",
821
+ d: "M14.2242 7.10672L13.6813 6.78407L14.5177 5.29199L15.0606 5.61464L14.2242 7.10672Z",
822
+ fill: "#E6EBEE"
823
+ })), _path10 || (_path10 = /*#__PURE__*/React__namespace.createElement("path", {
824
+ fillRule: "evenodd",
825
+ clipRule: "evenodd",
826
+ d: "M16.6807 13.6066L15.232 12.7437L15.5453 12.1846L16.994 13.0474L16.6807 13.6066Z",
827
+ fill: "#E6EBEE"
828
+ })), _path11 || (_path11 = /*#__PURE__*/React__namespace.createElement("path", {
829
+ fillRule: "evenodd",
830
+ clipRule: "evenodd",
831
+ d: "M17.5866 10.7688H15.9124V10.1221H17.5866V10.7688Z",
832
+ fill: "#E6EBEE"
833
+ })));
834
+ };
835
+
836
+ var StyledTag = styled__default["default"](Tag)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"])), function (_a) {
837
+ var theme = _a.theme;
838
+ return theme.fontWeights.regular;
839
+ }, function (_a) {
840
+ var status = _a.status, theme = _a.theme;
841
+ switch (status) {
842
+ case "completed":
843
+ return "color: ".concat(theme.palette.green[800], ";");
844
+ case "progress":
845
+ return "color: ".concat(theme.palette.yellow[700], ";");
846
+ case "incoming":
847
+ return "color: ".concat(theme.palette.azure[600], ";");
848
+ default:
849
+ return "color: ".concat(theme.palette.grey[800], ";");
850
+ }
851
+ }, function (_a) {
852
+ var theme = _a.theme;
853
+ return theme.space.xxs;
854
+ }, function (_a) {
855
+ var theme = _a.theme;
856
+ return theme.fontWeights.bold;
857
+ }, function (_a) {
858
+ var theme = _a.theme;
859
+ return theme.space.xxs;
860
+ }, function (_a) {
861
+ var theme = _a.theme;
862
+ return theme.palette.grey[700];
863
+ });
864
+ /**
865
+ * Counter let users categorize content using a keyword.
866
+ */
867
+ var Counter = function (props) {
868
+ var status = props.status;
869
+ return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), props.children, props.counter !== undefined && jsxRuntime.jsx("span", { children: props.counter })] })));
870
+ };
871
+ Counter.Avatar = StyledTag.Avatar;
872
+ var templateObject_1$w;
873
+
343
874
  var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
344
875
  var Field$1 = function (props) { return jsxRuntime.jsx(UgField$1, __assign({}, props)); };
345
876
  var templateObject_1$v;
@@ -406,7 +937,8 @@ var templateObject_1$r;
406
937
 
407
938
  var index = /*#__PURE__*/Object.freeze({
408
939
  __proto__: null,
409
- Field: Field
940
+ Field: Field,
941
+ Hint: reactForms.Hint
410
942
  });
411
943
 
412
944
  var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject([""], [""])));
@@ -535,15 +1067,7 @@ var Icon = function (props) {
535
1067
  };
536
1068
  var templateObject_1$m;
537
1069
 
538
- var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
539
- /**
540
- * A Label is used to specify a title for an input.
541
- * <hr>
542
- **/
543
- var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
544
- var templateObject_1$l;
545
-
546
- var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
1070
+ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
547
1071
  /**
548
1072
  * A Progress loader communicates progress when downloading or uploading content.
549
1073
  * <hr>
@@ -555,9 +1079,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
555
1079
  - When loading page content, use a Skeleton loader instead
556
1080
  */
557
1081
  var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
558
- var templateObject_1$k;
1082
+ var templateObject_1$l;
559
1083
 
560
- var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
1084
+ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
561
1085
  /**
562
1086
  * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
563
1087
  * <hr>
@@ -572,9 +1096,9 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
572
1096
  - To communicate a typing status, use Inline instead
573
1097
  */
574
1098
  var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
575
- var templateObject_1$j;
1099
+ var templateObject_1$k;
576
1100
 
577
- var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject([""], [""])));
1101
+ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
578
1102
  /**
579
1103
  * Breadcrumbs mark and communicate a user’s location in the product.
580
1104
  * <hr>
@@ -583,35 +1107,70 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
583
1107
  - To provide a quick way to navigate to ancestor pages
584
1108
  */
585
1109
  var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
586
- var templateObject_1$i;
1110
+ var templateObject_1$j;
587
1111
 
588
1112
  /**
589
1113
  * Title is a basic component used to display a title. Often used in card headers.
590
1114
  */
591
1115
  var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
592
1116
 
1117
+ /**
1118
+ * Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
1119
+ */
1120
+ var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({}, props)); };
1121
+ var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({}, props)); };
1122
+ var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({}, props)); };
1123
+ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
1124
+ var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
1125
+ var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
1126
+
1127
+ var _path$6;
1128
+
1129
+ function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
1130
+
1131
+ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
1132
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
1133
+ xmlns: "http://www.w3.org/2000/svg",
1134
+ width: 16,
1135
+ height: 16,
1136
+ focusable: "false",
1137
+ viewBox: "0 0 16 16"
1138
+ }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
1139
+ fill: "currentColor",
1140
+ d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
1141
+ })));
1142
+ };
1143
+
593
1144
  /**
594
1145
  * Login Form
595
1146
  * <hr>
596
1147
  * Used for this:
597
1148
  - Login user to the application
598
1149
  */
599
- var LoginForm = function (props) { return (jsxRuntime.jsxs(Card, __assign({ isFloating: true }, { children: [jsxRuntime.jsx(Title, __assign({ style: { textAlign: "center", margin: theme.space.md } }, { children: props.title })), jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
600
- var values = _a.values, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
601
- return (jsxRuntime.jsxs(formik.Form, __assign({ onSubmit: handleSubmit }, { children: [jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, (touched && values.email
602
- ? (touched.email = true)
603
- : (touched.email = false)), (errors && errors.email
604
- ? { validation: "error" }
605
- : touched.email
606
- ? { validation: "success" }
607
- : ""))), errors.email ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ("")] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, (touched && values.password
608
- ? (touched.password = true)
609
- : (touched.password = false)), (errors && errors.password
610
- ? { validation: "error" }
611
- : touched.password
612
- ? { validation: "success" }
613
- : ""))), errors.password ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))) : ("")] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length ? true : isSubmitting ? true : false, isPrimary: true }, { children: props.buttonText }))] })));
614
- } }))] }))); };
1150
+ var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Card, __assign({ isFloating: true }, props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
1151
+ textAlign: "center",
1152
+ marginTop: theme.space.sm,
1153
+ marginBottom: theme.space.lg,
1154
+ } }, { children: jsxRuntime.jsx(XL, __assign({ style: { color: theme.palette.blue[600] } }, { children: props.title })) })), jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
1155
+ var values = _a.values, status = _a.status, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
1156
+ return (jsxRuntime.jsxs(formik.Form, __assign({ onSubmit: handleSubmit }, { children: [jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, (touched && values.email
1157
+ ? (touched.email = true)
1158
+ : (touched.email = false)), (errors && errors.email
1159
+ ? { validation: "error" }
1160
+ : touched.email
1161
+ ? { validation: "success" }
1162
+ : ""))), errors.email ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ("")] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, (touched && values.password
1163
+ ? (touched.password = true)
1164
+ : (touched.password = false)), (errors && errors.password
1165
+ ? { validation: "error" }
1166
+ : touched.password
1167
+ ? { validation: "success" }
1168
+ : ""))), errors.password && (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))), props.passwordForgotLink && (jsxRuntime.jsx(reactForms.Hint, __assign({ style: { textAlign: "right" } }, { children: jsxRuntime.jsx(Anchor, __assign({ href: props.passwordForgotLink, style: { color: theme.palette.grey[500] } }, { children: props.passwordForgotLabel || "Forgot Password?" })) })))] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length
1169
+ ? true
1170
+ : isSubmitting
1171
+ ? true
1172
+ : false, isPrimary: true, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
1173
+ } }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] })); };
615
1174
 
616
1175
  var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5b %3c!ENTITY ns_extend 'http://ns.adobe.com/Extensibility/1.0/'%3e %3c!ENTITY ns_ai 'http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c!ENTITY ns_graphs 'http://ns.adobe.com/Graphs/1.0/'%3e %3c!ENTITY ns_vars 'http://ns.adobe.com/Variables/1.0/'%3e %3c!ENTITY ns_imrep 'http://ns.adobe.com/ImageReplacement/1.0/'%3e %3c!ENTITY ns_sfw 'http://ns.adobe.com/SaveForWeb/1.0/'%3e %3c!ENTITY ns_custom 'http://ns.adobe.com/GenericCustomNamespace/1.0/'%3e %3c!ENTITY ns_adobe_xpath 'http://ns.adobe.com/XPath/1.0/'%3e%5d%3e%3csvg enable-background='new 0 0 479.42 154.1' version='1.1' viewBox='0 0 479.42 154.1' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23003A57%3b%7d .st1%7bfill:%2354C38A%3b%7d .st2%7bfill:%23B2C4CD%3b%7d .st3%7bfill:%23809CAB%3b%7d .st4%7bfill:%23CCEDDC%3b%7d .st5%7bfill:%23CCD8DD%3b%7d .st6%7bfill:%23E5EBEE%3b%7d .st7%7bfill:%23A9E1C5%3b%7d%3c/style%3e%3cswitch%3e %3cforeignObject width='1' height='1' requiredExtensions='http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c/foreignObject%3e %3cg%3e %3cpath class='st0' d='m203.46 43.96c1.66 0 3.06 0.82 3.06 2.56 0 0.83-0.48 1.54-1.36 1.88 1.11 0.31 1.64 1.33 1.64 2.18 0 1.94-1.63 2.52-3.35 2.52h-3.99v-9.13h4zm-2.85 3.93h2.91c1.1 0 1.89-0.4 1.89-1.36 0-1.02-0.82-1.54-1.94-1.54h-2.86v2.9zm0 4.13h2.86c0.95 0 2.22-0.25 2.22-1.49-0.01-1.15-1.17-1.62-2.16-1.62h-2.91v3.11z'/%3e %3cpath class='st0' d='M212.75%2c43.96h6.41V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m235.85 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.16-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.45 1.66l-0.86 0.53c-0.48-0.79-1.54-1.15-2.55-1.17z'/%3e %3cpath class='st0' d='m250.07 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m265.37 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.22l4.09-9.13h1.28zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m278.31 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m287.15 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m313.34 43.96v1.08h-5.2v3.18h4.98v1.06h-4.98v3.82h-1.14v-9.14h6.34z'/%3e %3cpath class='st0' d='m322.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.76-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m341.26 48.55c-0.01 2.39-1.5 4.72-4.63 4.72s-4.64-2.32-4.64-4.72c0-2.65 1.77-4.75 4.65-4.75 3.1 0.02 4.64 2.34 4.62 4.75zm-4.61-3.7c-2.32 0-3.52 1.71-3.52 3.7 0 1.85 1.12 3.65 3.52 3.65s3.48-1.85 3.48-3.65c0.01-1.85-1.1-3.68-3.48-3.7z'/%3e %3cpath class='st0' d='m351.84 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m368.77 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m387.97 48.97h-5.22v4.12h-1.13v-9.13h1.13v3.95h5.22v-3.95h1.13v9.13h-1.13v-4.12z'/%3e %3cpath class='st0' d='M395.58%2c43.96H402V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m418.68 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.15-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.46 1.66l-0.86 0.53c-0.49-0.79-1.54-1.15-2.56-1.17z'/%3e %3cpath class='st0' d='m427.25 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m443.63 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.24l4.09-9.13h1.3zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m456.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m465.41 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m157.64 115.24v-24.59c0-6.81-3.65-10.72-10.03-10.72-6 0-9.44 3.91-9.44 10.72v24.59h-8.58v-24.59c0-11.51 6.93-18.66 18.08-18.66 11.26 0 18.54 7.32 18.54 18.66v24.59h-8.57z'/%3e %3cpath class='st0' d='m214.63 116.35c-16.55 0-22.44-11.2-22.44-21.67 0-15.87 11.27-22.98 22.44-22.98 5.93 0 11.53 2.3 15.77 6.49l0.34 0.34-5.54 5.67-0.35-0.33c-2.55-2.44-6.57-4.02-10.23-4.02-8.14 0-13.82 6.1-13.82 14.83 0 6.48 3.63 13.4 13.82 13.4 3.51 0 6.11-0.89 8.89-3.07v-6.64h-10.61v-7.97h19.29v17.55l-0.63 0.76c-4.49 5.14-10.03 7.64-16.93 7.64z'/%3e %3cpath class='st0' d='m277.01 115.24c-11.26 0-18.54-7.32-18.54-18.66v-24.59h8.58v24.59c0 6.81 3.65 10.72 10.02 10.72 6 0 9.44-3.91 9.44-10.72v-24.59h8.58v24.59c0 11.51-6.92 18.66-18.08 18.66z'/%3e %3cpolygon class='st0' points='321.07 115.24 321.07 72.25 354.94 72.25 354.94 80.65 329.64 80.65 329.64 90.13 350.81 90.13 350.81 98.24 329.64 98.24 329.64 106.72 354.94 106.72 354.94 115.24'/%3e %3cpath class='st0' d='m397.19 116.06c-9.41 0-15.35-3.37-18.16-10.29l-0.17-0.41 7.25-3.76 0.2 0.5c1.55 3.85 5.66 6.14 10.99 6.14 2.08 0 8.86-0.4 8.86-5.61 0-3.05-2.94-4.85-8.97-5.5-14.45-1.72-16.4-7.43-16.4-12.79 0-8.43 8.14-12.27 16.22-12.33 8.06 0 13.73 2.88 16.41 8.34l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.91-4.29-9.22-4.29-4.89 0-7.93 1.88-7.93 4.92 0 2.99 3.45 4.01 8.63 4.63 8.73 1.08 16.8 3.45 16.8 13.43-0.02 9.89-9.09 13.42-17.57 13.42z'/%3e %3cpath class='st0' d='m457.03 116.25c-9.4 0-15.33-3.36-18.14-10.28l-0.17-0.41 7.25-3.75 0.2 0.5c1.55 3.84 5.65 6.13 10.98 6.13 2.08 0 8.85-0.4 8.85-5.61 0-3.05-2.93-4.85-8.96-5.49-14.44-1.72-16.38-7.42-16.38-12.78 0-8.42 8.14-12.25 16.2-12.32 8.05 0 13.71 2.88 16.39 8.33l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.9-4.29-9.21-4.29-4.89 0-7.93 1.88-7.93 4.91 0 2.99 3.45 4.01 8.62 4.62 8.72 1.07 16.79 3.44 16.79 13.42-0.01 9.9-9.07 13.42-17.55 13.42z'/%3e %3cpath class='st0' d='m94.63 93.63v4.23h-0.03c-0.36 6.13-3.75 9.62-9.43 9.62-6.03 0-9.62-3.49-10.01-9.62h-0.03v-4.23h-8.58v4.23 0.01 0.05c0.49 10.69 7.66 17.52 18.55 17.52 10.79 0 17.63-6.68 18.09-17.52v-4.29h-8.56z'/%3e %3crect class='st1' x='66.55' y='72.02' width='8.6' height='8.6'/%3e %3crect class='st0' x='94.41' y='72.02' width='8.72' height='8.72'/%3e %3crect class='st2' transform='matrix(-1.837e-16 1 -1 -1.837e-16 103.01 7.8599)' x='43.27' y='51.13' width='8.6' height='8.6'/%3e %3crect class='st3' transform='matrix(-1.837e-16 1 -1 -1.837e-16 126.9 6.4839)' x='55.9' y='62.39' width='8.6' height='8.6'/%3e %3crect class='st4' transform='matrix(-1.837e-16 1 -1 -1.837e-16 94.995 31.397)' x='27.5' y='58.89' width='8.6' height='8.6'/%3e %3crect class='st5' transform='matrix(-1.837e-16 1 -1 -1.837e-16 64.365 27.091)' x='14.34' y='41.43' width='8.6' height='8.6'/%3e %3crect class='st6' transform='matrix(-1.837e-16 1 -1 -1.837e-16 138.08 66.268)' x='31.6' y='97.87' width='8.6' height='8.6'/%3e %3crect class='st7' transform='matrix(-1.837e-16 1 -1 -1.837e-16 137.84 35.856)' x='46.69' y='82.55' width='8.6' height='8.6'/%3e %3c/g%3e%3c/switch%3e%3c/svg%3e";
617
1176
 
@@ -630,14 +1189,16 @@ var img = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26'
630
1189
  */
631
1190
  var Logo = function (props) {
632
1191
  var _a;
633
- return (jsxRuntime.jsx("img", __assign({}, props && !props.type, props && props.type === "horizontal" && { width: "".concat(props.size) }, props && props.type === "vertical" && { height: "".concat(props.size) }, props && props.type === "icon" && { width: "".concat(props.size) } && { height: "".concat(props.size) }, { className: props.className, alt: (_a = props.alt) !== null && _a !== void 0 ? _a : "Unguess Logo", src: {
634
- 'horizontal': img$2,
635
- 'vertical': img$1,
636
- 'icon': img,
1192
+ return (jsxRuntime.jsx("img", __assign({}, props, ((props === null || props === void 0 ? void 0 : props.type) === "horizontal" && { width: "".concat(props.size) }), ((props === null || props === void 0 ? void 0 : props.type) === "vertical" && { height: "".concat(props.size) }), ((props === null || props === void 0 ? void 0 : props.type) === "icon" && { width: "".concat(props.size) } && {
1193
+ height: "".concat(props.size),
1194
+ }), { className: props.className, alt: (_a = props.alt) !== null && _a !== void 0 ? _a : "Unguess Logo", src: {
1195
+ horizontal: img$2,
1196
+ vertical: img$1,
1197
+ icon: img,
637
1198
  }[props.type] })));
638
1199
  };
639
1200
 
640
- var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
1201
+ var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
641
1202
  var theme = _a.theme;
642
1203
  return theme.palette.grey["800"];
643
1204
  });
@@ -646,12 +1207,17 @@ var FooterItem = reactModals.FooterItem;
646
1207
  Modal.Header = reactModals.Header;
647
1208
  Modal.Body = ugModalBody;
648
1209
  Modal.Footer = reactModals.Footer;
649
- var templateObject_1$h;
1210
+ var templateObject_1$i;
650
1211
 
1212
+ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1213
+ var theme = _a.theme;
1214
+ return theme.palette.white;
1215
+ });
651
1216
  /**
652
1217
  * A Body defines the main content of an HTML document which displays on the browser
653
1218
  */
654
- var Body$1 = function (props) { return jsxRuntime.jsx(reactChrome.Body, __assign({}, props)); };
1219
+ var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
1220
+ var templateObject_1$h;
655
1221
 
656
1222
  /**
657
1223
  * A Content defines the main content of an HTML document which displays on the browser
@@ -666,18 +1232,18 @@ var HeaderItemText = function (props) { return jsxRuntime.jsx(reactChrome.Header
666
1232
 
667
1233
  var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
668
1234
 
669
- var _path$6;
1235
+ var _path$5;
670
1236
 
671
- function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
1237
+ function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
672
1238
 
673
1239
  var SvgMenuStroke = function SvgMenuStroke(props) {
674
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
1240
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
675
1241
  xmlns: "http://www.w3.org/2000/svg",
676
1242
  width: 16,
677
1243
  height: 16,
678
1244
  focusable: "false",
679
1245
  viewBox: "0 0 16 16"
680
- }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
1246
+ }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
681
1247
  fill: "none",
682
1248
  stroke: "currentColor",
683
1249
  strokeLinecap: "round",
@@ -719,18 +1285,18 @@ Header.HeaderItemText = HeaderItemText;
719
1285
  Header.HeaderItemIcon = HeaderItemIcon;
720
1286
  var templateObject_1$e;
721
1287
 
722
- var _path$5, _path2;
1288
+ var _path$4, _path2;
723
1289
 
724
- function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
1290
+ function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
725
1291
 
726
1292
  var SvgMegaphoneStroke = function SvgMegaphoneStroke(props) {
727
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
1293
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
728
1294
  xmlns: "http://www.w3.org/2000/svg",
729
1295
  width: 16,
730
1296
  height: 16,
731
1297
  focusable: "false",
732
1298
  viewBox: "0 0 16 16"
733
- }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
1299
+ }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
734
1300
  fill: "none",
735
1301
  stroke: "currentColor",
736
1302
  d: "M4.5 4.5v7H4a3.5 3.5 0 010-7h.5zm0 7h3V14a1.5 1.5 0 01-3 0v-2.5z"
@@ -740,18 +1306,18 @@ var SvgMegaphoneStroke = function SvgMegaphoneStroke(props) {
740
1306
  })));
741
1307
  };
742
1308
 
743
- var _path$4;
1309
+ var _path$3;
744
1310
 
745
- function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
1311
+ function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
746
1312
 
747
1313
  var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
748
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
1314
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
749
1315
  xmlns: "http://www.w3.org/2000/svg",
750
1316
  width: 16,
751
1317
  height: 16,
752
1318
  focusable: "false",
753
1319
  viewBox: "0 0 16 16"
754
- }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
1320
+ }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
755
1321
  fill: "currentColor",
756
1322
  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
757
1323
  })));
@@ -771,7 +1337,7 @@ var AppHeader = function (_a) {
771
1337
  };
772
1338
  var templateObject_1$d;
773
1339
 
774
- var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n @media (max-width: ", ") {\n margin: 0 ", "\n }\n"], ["\n @media (max-width: ", ") {\n margin: 0 ", "\n }\n"])), function (_a) {
1340
+ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"], ["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"])), function (_a) {
775
1341
  var theme = _a.theme;
776
1342
  return theme.breakpoints.sm;
777
1343
  }, function (_a) {
@@ -830,28 +1396,11 @@ var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis
830
1396
 
831
1397
  var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
832
1398
 
833
- var _path$3;
834
-
835
- function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
836
-
837
- var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
838
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
839
- xmlns: "http://www.w3.org/2000/svg",
840
- width: 16,
841
- height: 16,
842
- focusable: "false",
843
- viewBox: "0 0 16 16"
844
- }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
845
- fill: "currentColor",
846
- d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
847
- })));
848
- };
849
-
850
1399
  var _path$2;
851
1400
 
852
1401
  function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
853
1402
 
854
- var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
1403
+ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
855
1404
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
856
1405
  xmlns: "http://www.w3.org/2000/svg",
857
1406
  width: 16,
@@ -860,7 +1409,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
860
1409
  viewBox: "0 0 16 16"
861
1410
  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
862
1411
  fill: "currentColor",
863
- d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
1412
+ d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
864
1413
  })));
865
1414
  };
866
1415
 
@@ -1011,7 +1560,7 @@ var Sidebar = function (props) {
1011
1560
  props.onToggleMenu && props.onToggleMenu();
1012
1561
  };
1013
1562
  return (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: "12 Tokens" }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return setNav("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), props.projects &&
1014
- props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return setNav(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }))); }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
1563
+ props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return setNav(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
1015
1564
  };
1016
1565
  var templateObject_1$5;
1017
1566
 
@@ -1067,21 +1616,6 @@ var GroupRow = function (props) { return jsxRuntime.jsx(reactTables.GroupRow, __
1067
1616
  var Caption = function (props) { return jsxRuntime.jsx(reactTables.Caption, __assign({}, props)); };
1068
1617
  var templateObject_1$3;
1069
1618
 
1070
- /**
1071
- * Tags let users categorize content using a keyword.
1072
-
1073
- * Used for this:
1074
- - To add metadata to an element such as category, attribute, or property
1075
- - To communicate status
1076
- - To represent parameters of a filter
1077
-
1078
- * Not for this:
1079
- - To prompt an action by the user, use a Button instead
1080
- */
1081
- var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, props)); };
1082
- Tag.Avatar = reactTags.Tag.Avatar;
1083
- Tag.Close = reactTags.Tag.Close;
1084
-
1085
1619
  /**
1086
1620
  * Tiles are Radio buttons styled with icons or images.
1087
1621
 
@@ -1137,16 +1671,6 @@ var UgParagraph = styled__default["default"](reactTypography.Paragraph)(template
1137
1671
  var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
1138
1672
  var templateObject_1;
1139
1673
 
1140
- /**
1141
- * Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
1142
- */
1143
- var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({}, props)); };
1144
- var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({}, props)); };
1145
- var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({}, props)); };
1146
- var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
1147
- var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
1148
- var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
1149
-
1150
1674
  Object.defineProperty(exports, 'ModalClose', {
1151
1675
  enumerable: true,
1152
1676
  get: function () { return reactModals.Close; }
@@ -1161,6 +1685,7 @@ exports.BrandItem = BrandItem;
1161
1685
  exports.Breadcrumb = Breadcrumb;
1162
1686
  exports.Button = Button;
1163
1687
  exports.ButtonGroup = ButtonGroup;
1688
+ exports.CampaignCard = CampaignCard;
1164
1689
  exports.Caption = Caption;
1165
1690
  exports.Card = Card;
1166
1691
  exports.Checkbox = Checkbox;
@@ -1169,6 +1694,7 @@ exports.Close = Close;
1169
1694
  exports.Code = Code;
1170
1695
  exports.Col = Col;
1171
1696
  exports.Content = Content;
1697
+ exports.Counter = Counter;
1172
1698
  exports.CursorPagination = CursorPagination;
1173
1699
  exports.Dropdown = Dropdown;
1174
1700
  exports.DropdownField = index$1;
package/build/stories/campaignCards/_types.d.ts ADDED
@@ -0,0 +1,39 @@
1
+ import { CardProps } from "../cards/_types";
2
+ export interface CampaignCardsProps extends CardProps {
3
+ /**
4
+ * displays a new tag in the top right
5
+ */
6
+ isNew?: boolean;
7
+ /**
8
+ * displays the date, if is the current day, the word "Today" will be shown instead
9
+ * use this format DD/MM/YYYY
10
+ */
11
+ date: string;
12
+ /**
13
+ * the main topic of the card
14
+ */
15
+ title: string;
16
+ /**
17
+ * a specification to the topic of the card
18
+ */
19
+ subTitle: string;
20
+ /**
21
+ * the status of the card,
22
+ * can be only
23
+ * "COMPLETED" or "PROGRESS" or "INCOMING"
24
+ * default is "INCOMING"
25
+ */
26
+ status?: 'COMPLETED' | 'PROGRESS' | 'INCOMING';
27
+ /**
28
+ * this renders the pill of the card,
29
+ * can be only
30
+ * "FUNCTIONAL" or "EXPERIENTIAL"
31
+ * if nothing of that is chosen the pill will not be shown
32
+ */
33
+ type?: 'FUNCTIONAL' | 'EXPERIENTIAL';
34
+ /**
35
+ * this renders the pill text
36
+ * if the value is not defined the pill text will not be shown
37
+ */
38
+ pillText?: string;
39
+ }
package/build/stories/campaignCards/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { CampaignCardsProps } from "./_types";
3
+ declare const CampaignCard: (props: CampaignCardsProps) => JSX.Element;
4
+ export { CampaignCard };
package/build/stories/campaignCards/index.stories.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import { CampaignCardsProps } from "./_types";
3
+ import { ComponentMeta, Story } from "@storybook/react";
4
+ export declare const SingleCard: Story<CampaignCardsProps>;
5
+ export declare const Grid: Story<CampaignCardsProps>;
6
+ declare const _default: ComponentMeta<(props: CampaignCardsProps) => JSX.Element>;
7
+ export default _default;
package/build/stories/forms/field/index.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Hint as ZendeskHint } from "@zendeskgarden/react-forms";
2
3
  import { FieldArgs } from "./_types";
3
4
  /**
4
5
  * A Field is a wrapper for input elements
5
6
  **/
6
7
  declare const Field: (props: FieldArgs) => JSX.Element;
7
- export { Field };
8
+ export { Field, ZendeskHint as Hint };
package/build/stories/login-form/_types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { FormikTouched, FormikErrors, FormikValues } from "formik";
2
+ import { CardProps } from "../cards/_types";
2
3
  export interface LoginFormArgs {
3
4
  /**
4
5
  * Handles accordion expansion changes
@@ -16,6 +17,11 @@ export interface LoginFormArgs {
16
17
  buttonText: string;
17
18
  placeholderEmail: string;
18
19
  placeholderPassword: string;
20
+ card?: CardProps;
21
+ onBackClick?: () => void;
22
+ passwordForgotLabel?: string;
23
+ passwordForgotLink?: string;
24
+ backToLabel?: string;
19
25
  }
20
26
  export interface LoginFields {
21
27
  email: string;
package/build/stories/logo/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { LogoArgs } from './_types';
2
+ import { LogoArgs } from "./_types";
3
3
  /**
4
4
  * A Logo is a visual way to represent a brand logo.
5
5
  * <hr>
package/build/stories/theme/index.d.ts CHANGED
@@ -148,19 +148,26 @@ declare const theme: {
148
148
  horizontal: string;
149
149
  dark: string;
150
150
  };
151
+ borderRadii: {
152
+ lg: string;
153
+ sm: string;
154
+ md: string;
155
+ };
151
156
  components: {
152
157
  Headers: any;
153
158
  };
159
+ shadows: {
160
+ boxShadow: (theme: import("@zendeskgarden/react-theming").IGardenTheme) => string;
161
+ sm: (color: string) => string;
162
+ md: (color: string) => string;
163
+ lg: (offsetY: string, blurRadius: string, color: string) => string;
164
+ };
154
165
  rtl: boolean;
155
166
  document?: any;
156
167
  borders: {
157
168
  sm: string;
158
169
  md: string;
159
170
  };
160
- borderRadii: {
161
- sm: string;
162
- md: string;
163
- };
164
171
  borderStyles: {
165
172
  solid: string;
166
173
  };
@@ -223,11 +230,6 @@ declare const theme: {
223
230
  sm: string;
224
231
  md: string;
225
232
  };
226
- shadows: {
227
- sm: (color: string) => string;
228
- md: (color: string) => string;
229
- lg: (offsetY: string, blurRadius: string, color: string) => string;
230
- };
231
233
  space: {
232
234
  base: number;
233
235
  xxs: string;
package/build/stories/theme/utils.d.ts CHANGED
@@ -1 +1,3 @@
1
+ import { IGardenTheme } from "@zendeskgarden/react-theming";
1
2
  export declare const hex2rgba: (hex: string, alpha?: number) => string;
3
+ export declare const boxShadow: (theme: IGardenTheme) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.5.6",
3
+ "version": "2.6.1",
4
4
  "dependencies": {
5
5
  "@zendeskgarden/react-accordions": "^8.49.0",
6
6
  "@zendeskgarden/react-avatars": "^8.49.0",