@commonsku/styles 1.17.9 → 1.17.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -209,6 +209,7 @@ var win = typeof window !== 'undefined' ? window : {
209
209
  pushState: function () { },
210
210
  go: function () { },
211
211
  back: function () { },
212
+ length: 1,
212
213
  },
213
214
  CustomEvent: function CustomEvent() {
214
215
  return this;
@@ -244,11 +245,11 @@ var ssr = {
244
245
  };
245
246
 
246
247
  var media = {
247
- xs: function (styles) { return "\n @media only screen and (min-width: 0px) {\n ".concat(typeof styles === 'string' ? styled.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["", ""], ["", ""])), styles) : styled.css(styles), "\n }\n "); },
248
- sm: function (styles) { return "\n @media only screen and (min-width: 640px) {\n ".concat(typeof styles === 'string' ? styled.css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["", ""], ["", ""])), styles) : styled.css(styles), "\n }\n "); },
248
+ xs: function (styles) { return "\n @media only screen and (min-width: 0px) {\n ".concat(typeof styles === 'string' ? styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["", ""], ["", ""])), styles) : styled.css(styles), "\n }\n "); },
249
+ sm: function (styles) { return "\n @media only screen and (min-width: 640px) {\n ".concat(typeof styles === 'string' ? styled.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["", ""], ["", ""])), styles) : styled.css(styles), "\n }\n "); },
249
250
  md: function (styles) { return "\n @media only screen and (min-width: 768px) {\n ".concat(typeof styles === 'string' ? styled.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["", ""], ["", ""])), styles) : styled.css(styles), "\n }\n "); },
250
251
  lg: function (styles) { return "\n @media only screen and (min-width: 1024px) {\n ".concat(typeof styles === 'string' ? styled.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["", ""], ["", ""])), styles) : styled.css(styles), "\n }\n "); },
251
- xl: function (styles) { return "\n @media only screen and (min-width: 1280px) {\n ".concat(typeof styles === 'string' ? styled.css(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["", ""], ["", ""])), styles) : styled.css(styles), "\n }\n "); },
252
+ xl: function (styles) { return "\n @media only screen and (min-width: 1280px) {\n ".concat(typeof styles === 'string' ? styled.css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["", ""], ["", ""])), styles) : styled.css(styles), "\n }\n "); },
252
253
  };
253
254
  var sizeMediaWidth = {
254
255
  xs: '0px',
@@ -265,7 +266,7 @@ var sizeMedia = {
265
266
  xl: "@media only screen and (min-width: ".concat(sizeMediaWidth.xl, ")"),
266
267
  };
267
268
  var sizes$1 = ['xs', 'sm', 'md', 'lg', 'xl'];
268
- var templateObject_1$X, templateObject_2$y, templateObject_3$m, templateObject_4$g, templateObject_5$a;
269
+ var templateObject_1$Y, templateObject_2$z, templateObject_3$m, templateObject_4$g, templateObject_5$b;
269
270
 
270
271
  var valIsValid = function (val) { return val !== null && val !== undefined && val !== ''; }; // not checking for 0
271
272
  function isClientSide() {
@@ -417,7 +418,7 @@ var wait = function (time) {
417
418
  };
418
419
  };
419
420
 
420
- var SharedStyles = styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n box-sizing: border-box;\n ", "\n"], ["\n box-sizing: border-box;\n ", "\n"])), function (p) { return _.map(_.pick(p, _.keys(SHARED_STYLE_MAPS)), function (v, k) {
421
+ var SharedStyles = styled.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n box-sizing: border-box;\n ", "\n"], ["\n box-sizing: border-box;\n ", "\n"])), function (p) { return _.map(_.pick(p, _.keys(SHARED_STYLE_MAPS)), function (v, k) {
421
422
  return _.isUndefined(v) ? '' : SHARED_STYLE_MAPS[k](v);
422
423
  }).join(''); });
423
424
  var SHARED_STYLE_MAPS = {
@@ -459,8 +460,8 @@ var SHARED_STYLE_MAPS = {
459
460
  // Custom Styles
460
461
  custom: function (val) { return "".concat(val); },
461
462
  };
462
- var Wrapper$4 = styled__default.default.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["", ""], ["", ""])), SharedStyles);
463
- var templateObject_1$W, templateObject_2$x;
463
+ var Wrapper$4 = styled__default.default.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["", ""], ["", ""])), SharedStyles);
464
+ var templateObject_1$X, templateObject_2$y;
464
465
 
465
466
  var primary1 = {
466
467
  '10': '#F6FEFF',
@@ -635,7 +636,7 @@ errors['lightest'] = errors['10'];
635
636
  errors['light'] = errors['30'];
636
637
  errors['dark'] = errors['70'];
637
638
  errors['darkest'] = errors['90'];
638
- var colors = {
639
+ var colors$1 = {
639
640
  primary1: primary1,
640
641
  secondary1: secondary1,
641
642
  secondary2: secondary2,
@@ -867,7 +868,7 @@ var SVG$1 = styled__default.default.svg.attrs(function (p) {
867
868
  viewBox: p.viewBox || defaultSize.viewBox,
868
869
  };
869
870
  })(function (p) {
870
- return styled.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), SharedStyles);
871
+ return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), SharedStyles);
871
872
  }, function (p) {
872
873
  var styles = {};
873
874
  var iconSizes = p.iconSizes || iconSize;
@@ -881,7 +882,7 @@ var SVG$1 = styled__default.default.svg.attrs(function (p) {
881
882
  styles['cursor'] = p.pointer ? 'pointer' : undefined;
882
883
  return styles;
883
884
  });
884
- var templateObject_1$V;
885
+ var templateObject_1$W;
885
886
 
886
887
  function TableIcon(_a) {
887
888
  var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Calculate" : _d, props = __rest(_a, ["color", "size", "altText"]);
@@ -1255,7 +1256,7 @@ function createFontStyles(p) {
1255
1256
  return "\n --skufont-".concat(k, ": ").concat(fontFamilies[k], ";\n --font-family-").concat(k, ": ").concat([fontFamilies[k]].concat(fontFamilies['fallbacks']).join(','), ";\n ");
1256
1257
  }).join('');
1257
1258
  }
1258
- var GlobalStyle = styled.createGlobalStyle(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n:root {\n ", "\n ", "\n ", "\n}\n&&& {\n .commonsku-styles-select__input {\n input {\n height: auto;\n }\n }\n ", "\n}\n"], ["\n:root {\n ", "\n ", "\n ", "\n}\n&&& {\n .commonsku-styles-select__input {\n input {\n height: auto;\n }\n }\n ", "\n}\n"])), function (p) { return createFontStyles(p); }, function (p) { return parseColorVars(___default.default.get(p, ['theme', 'colors'], {}), ''); }, function (p) {
1259
+ var GlobalStyle = styled.createGlobalStyle(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n:root {\n ", "\n ", "\n ", "\n}\n&&& {\n .commonsku-styles-select__input {\n input {\n height: auto;\n }\n }\n ", "\n}\n"], ["\n:root {\n ", "\n ", "\n ", "\n}\n&&& {\n .commonsku-styles-select__input {\n input {\n height: auto;\n }\n }\n ", "\n}\n"])), function (p) { return createFontStyles(p); }, function (p) { return parseColorVars(___default.default.get(p, ['theme', 'colors'], {}), ''); }, function (p) {
1259
1260
  if (!p.additionalStyles) {
1260
1261
  return null;
1261
1262
  }
@@ -1269,7 +1270,7 @@ var GlobalStyle = styled.createGlobalStyle(templateObject_1$U || (templateObject
1269
1270
  return null;
1270
1271
  }
1271
1272
  }, datepickerStyles);
1272
- var templateObject_1$U;
1273
+ var templateObject_1$V;
1273
1274
 
1274
1275
  var fontFamilies = {
1275
1276
  skuFontRegular: "'skufont-regular'",
@@ -1366,7 +1367,7 @@ var fontStyles = {
1366
1367
  }
1367
1368
  };
1368
1369
  var themeOptions = {
1369
- colors: colors,
1370
+ colors: colors$1,
1370
1371
  fonts: fonts,
1371
1372
  fontFamily: "".concat(fonts.join(",")),
1372
1373
  fontFamilies: fontFamilies,
@@ -1394,7 +1395,7 @@ function getColor$1(color, def) {
1394
1395
  if (!color) {
1395
1396
  return '';
1396
1397
  }
1397
- return (_a = ___default.default.get(colors, color, ___default.default.get(colors, def || '', def))) !== null && _a !== void 0 ? _a : '';
1398
+ return (_a = ___default.default.get(colors$1, color, ___default.default.get(colors$1, def || '', def))) !== null && _a !== void 0 ? _a : '';
1398
1399
  }
1399
1400
  function getFontStyle(value, def) {
1400
1401
  var _a;
@@ -1492,7 +1493,7 @@ function CircleProgressIcon(_a) {
1492
1493
  var dashOffset = dashArray - dashArray * percentage / 100;
1493
1494
  return React__default.default.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes, "aria-labelledby": "CircleProgressIcon" }, props),
1494
1495
  React__default.default.createElement("title", { id: "CircleProgressIcon" }, text !== '' ? "".concat(text, " stage") : percentage ? "".concat(percentage, "% completed") : altText),
1495
- React__default.default.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: 'none', stroke: colors.disabledButtonBorder, } }),
1496
+ React__default.default.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: 'none', stroke: colors$1.disabledButtonBorder, } }),
1496
1497
  React__default.default.createElement("circle", { className: "circle-progress", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"), style: {
1497
1498
  strokeDasharray: dashArray,
1498
1499
  strokeDashoffset: dashOffset,
@@ -1504,14 +1505,14 @@ function CircleProgressIcon(_a) {
1504
1505
  React__default.default.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: size === "small" || size === "tiny" ? ".6em" : size === "medium" ? ".8em" : "1em", fontWeight: 'bold', fill: textColor }, textStyle) }, text || "".concat(percentage, "%")));
1505
1506
  }
1506
1507
 
1507
- var SVG = styled__default.default.svg(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), SharedStyles);
1508
- var templateObject_1$T;
1508
+ var SVG = styled__default.default.svg(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), SharedStyles);
1509
+ var templateObject_1$U;
1509
1510
 
1510
1511
  function Loading(_a) {
1511
1512
  var _b = _a.height, height = _b === void 0 ? 50 : _b, width = _a.width, _c = _a.animationDuration, animationDuration = _c === void 0 ? 1000 : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 14 : _d, _e = _a.barRadius, barRadius = _e === void 0 ? 2 : _e, _f = _a.colorful, colorful = _f === void 0 ? false : _f, _g = _a.bars, bars = _g === void 0 ? 4 : _g, _h = _a.viewBox, viewBox = _h === void 0 ? "10 0 51 50" : _h; _a.rotate; var startColor = _a.startColor, endColor = _a.endColor, props = __rest(_a, ["height", "width", "animationDuration", "barWidth", "barRadius", "colorful", "bars", "viewBox", "rotate", "startColor", "endColor"]);
1512
1513
  var colorGradient = colorful
1513
- ? generateColor(startColor || colors.special1, endColor || colors.primary, bars)
1514
- : generateColor(startColor || colors.primary, endColor || colors.primary0, bars);
1514
+ ? generateColor(startColor || colors$1.special1, endColor || colors$1.primary, bars)
1515
+ : generateColor(startColor || colors$1.primary, endColor || colors$1.primary0, bars);
1515
1516
  var generateBar = function (v) {
1516
1517
  return (React__default.default.createElement("rect", { key: "bar_".concat(v), x: 19 * v, y: "0", width: barWidth || 14, height: height, fill: "#".concat(colorGradient[v]), rx: barRadius },
1517
1518
  React__default.default.createElement("animate", { attributeName: "height", values: "50;10;50", begin: "".concat(v * 0.2, "s"), dur: "".concat(animationDuration / 1000, "s"), repeatCount: "indefinite" })));
@@ -1526,6 +1527,99 @@ function Loading(_a) {
1526
1527
  return (React__default.default.createElement(SVG, __assign({ width: width ? "".concat(width, "px") : "100%", height: height ? "".concat(height, "px") : "100%", viewBox: viewBox, transform: "scale(1, -1) translate(0, -1)" }, props), generateBars()));
1527
1528
  }
1528
1529
 
1530
+ var logoSizes = {
1531
+ small: {
1532
+ width: 24
1533
+ },
1534
+ medium: {
1535
+ width: 64
1536
+ },
1537
+ large: {
1538
+ width: 120
1539
+ },
1540
+ default: {
1541
+ width: 120
1542
+ }
1543
+ };
1544
+ var containerSizes = {
1545
+ small: {
1546
+ width: 48
1547
+ },
1548
+ medium: {
1549
+ width: 100
1550
+ },
1551
+ large: {
1552
+ width: 200
1553
+ },
1554
+ default: {
1555
+ width: 200
1556
+ }
1557
+ };
1558
+ var rotator = styled.keyframes(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(270deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(270deg);\n }\n"])));
1559
+ var colors = styled.keyframes(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n 0% {\n stroke: #02c0da;\n }\n 25% {\n stroke: #02c0da;\n }\n 50% {\n stroke: #02c0da;\n }\n 75% {\n stroke: #02c0da;\n }\n 100% {\n stroke: #02c0da;\n }\n"], ["\n 0% {\n stroke: #02c0da;\n }\n 25% {\n stroke: #02c0da;\n }\n 50% {\n stroke: #02c0da;\n }\n 75% {\n stroke: #02c0da;\n }\n 100% {\n stroke: #02c0da;\n }\n"])));
1560
+ var dash = styled.keyframes(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 46.75;\n transform: rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: rotate(450deg);\n }\n"], ["\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 46.75;\n transform: rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: rotate(450deg);\n }\n"])));
1561
+ var Container$1 = styled__default.default.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n position: relative;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: relative;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (props) { return props.size + 'px' || '200px'; }, function (props) { return props.size + 'px' || '200px'; });
1562
+ var Spinner$1 = styled__default.default.svg(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n animation: ", " 1.4s linear infinite;\n"], ["\n animation: ", " 1.4s linear infinite;\n"])), rotator);
1563
+ var Path = styled__default.default.circle(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n fill: none;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-dasharray: 187;\n stroke-dashoffset: 0;\n transform-origin: center;\n animation: ", " 1.4s ease-in-out infinite, ", " 5.6s ease-in-out infinite;\n"], ["\n fill: none;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-dasharray: 187;\n stroke-dashoffset: 0;\n transform-origin: center;\n animation: ", " 1.4s ease-in-out infinite, ", " 5.6s ease-in-out infinite;\n"])), dash, colors);
1564
+ var Logo = styled__default.default.svg(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n"], ["\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n"])));
1565
+ function SkubotSpinner(_a) {
1566
+ var _b = _a.color, color = _b === void 0 ? '#00C1DE' : _b, _c = _a.size, size = _c === void 0 ? "default" : _c; _a.altText; var _e = _a.skubot, skubot = _e === void 0 ? true : _e; __rest(_a, ["color", "size", "altText", "skubot"]);
1567
+ return (React__default.default.createElement(Container$1, { size: containerSizes[size] ? containerSizes[size].width : 200 },
1568
+ React__default.default.createElement(Spinner$1, { width: '200px', height: '200px', viewBox: "0 0 66 66", xmlns: "http://www.w3.org/2000/svg" },
1569
+ React__default.default.createElement(Path, { cx: "33", cy: "33", r: "30" })),
1570
+ skubot ?
1571
+ React__default.default.createElement(Logo, { width: logoSizes[size] ? logoSizes[size].width : 120, viewBox: "0 0 100 54.9" },
1572
+ React__default.default.createElement("circle", { fill: color, cx: "2.7", cy: "30.2", r: "2.7" }),
1573
+ React__default.default.createElement("circle", { fill: color, cx: "97.3", cy: "30.2", r: "2.7" }),
1574
+ React__default.default.createElement("path", { fill: color, d: "M91,28.5c-0.1-2.3-0.4-4.6-0.8-6.8c-0.2-0.9-1-1.5-1.9-1.5h-6.8V9.7c0-1.4-0.8-2.5-1.7-2.5\n c-4.8-0.9-9.6-1.5-14.5-2V3.4c0-0.9-0.6-1.8-1.6-2C59.2,0.5,54.6,0,50,0c-4.6,0-9.2,0.5-13.6,1.4c-0.9,0.2-1.6,1-1.6,2v1.9\n c-4.8,0.4-9.7,1.1-14.5,2c-0.5,0-0.9,0.3-1.2,0.7c-0.3,0.4-0.5,1.1-0.5,1.7v10.4h-6.8c-0.9,0-1.8,0.6-1.9,1.5\n C9.4,24,9.1,26.2,9,28.5V31c0.1,2.3,0.4,4.6,0.8,6.8c0.2,0.9,1,1.5,1.9,1.5h6.8V50c0,1.4,0.8,2.5,1.7,2.5\n c9.8,1.6,19.8,2.5,29.7,2.5c9.9,0,19.8-0.8,29.7-2.5c0.5,0,0.9-0.3,1.2-0.7c0.3-0.4,0.5-1.1,0.5-1.7V39.4h6.8\n c0.9,0,1.8-0.6,1.9-1.5c0.5-2.3,0.8-4.5,0.8-6.8V28.5z M76.6,45.7c0,1.1-0.9,2-2,2c-16.3,2.5-32.9,2.5-49.3,0c-0.5,0-1-0.2-1.4-0.6\n c-0.4-0.4-0.6-0.8-0.6-1.4V13.8c0-1.1,0.9-2,2-2C33.5,10.6,41.8,10,50,10c8.2,0,16.5,0.6,24.6,1.8c0.5,0,1,0.2,1.4,0.6\n c0.4,0.4,0.6,0.8,0.6,1.4V45.7z" }),
1575
+ React__default.default.createElement("path", { fill: color, d: "M37.2,39L37.2,39c-2.7,0-4.9-2.2-4.9-4.9v-7.8c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v7.8\n C42.1,36.8,39.9,39,37.2,39z" }),
1576
+ React__default.default.createElement("path", { fill: color, d: "M62.8,39L62.8,39c-2.7,0-4.9-2.2-4.9-4.9v-7.8c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v7.8\n C67.8,36.8,65.5,39,62.8,39z" })) : null));
1577
+ }
1578
+ var templateObject_1$T, templateObject_2$x, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$a, templateObject_7$4;
1579
+
1580
+ function CommonskuMainLogo(_a) {
1581
+ var _b = _a.color, color = _b === void 0 ? '#00C1DE' : _b; _a.size; _a.altText; _a.width; __rest(_a, ["color", "size", "altText", "width"]);
1582
+ return (React__default.default.createElement("svg", { viewBox: "0 0 125 43.9" },
1583
+ React__default.default.createElement("g", null,
1584
+ React__default.default.createElement("path", { fill: color, d: "M1.8,33.7C3,32.5,4.4,31.9,6,31.9c0.9,0,1.7,0.2,2.5,0.6c0.8,0.4,1.3,0.8,1.7,1.2l0.5,0.6l-1.6,1.6\n\t\t\tc-0.1-0.1-0.2-0.3-0.4-0.5c-0.2-0.2-0.5-0.4-1-0.7c-0.5-0.3-1.1-0.5-1.7-0.5c-1,0-1.8,0.4-2.5,1.1c-0.7,0.7-1.1,1.6-1.1,2.7\n\t\t\tc0,1.1,0.4,2,1.1,2.7C4.2,41.4,5,41.7,6,41.7c0.6,0,1.2-0.2,1.7-0.5c0.5-0.3,0.9-0.6,1.2-0.9l0.4-0.4l1.6,1.6\n\t\t\tc0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.3,0.3-0.6,0.6c-0.3,0.3-0.6,0.5-1,0.7c-0.3,0.2-0.8,0.4-1.3,0.6c-0.5,0.2-1.1,0.3-1.7,0.3\n\t\t\tc-1.6,0-3-0.6-4.2-1.8C0.6,40.9,0,39.5,0,37.9C0,36.3,0.6,34.9,1.8,33.7z" }),
1585
+ React__default.default.createElement("path", { fill: color, d: "M13.6,33.7c1.2-1.2,2.6-1.8,4.2-1.8c1.6,0,3,0.6,4.2,1.8c1.2,1.2,1.8,2.6,1.8,4.2c0,1.6-0.6,3-1.8,4.2\n\t\t\ts-2.6,1.8-4.2,1.8c-1.6,0-3-0.6-4.2-1.8s-1.8-2.6-1.8-4.2C11.9,36.3,12.5,34.9,13.6,33.7z M20.4,35.2c-0.7-0.7-1.6-1.1-2.5-1.1\n\t\t\tc-1,0-1.8,0.4-2.5,1.1c-0.7,0.7-1.1,1.6-1.1,2.7c0,1.1,0.4,2,1.1,2.7c0.7,0.7,1.6,1.1,2.5,1.1c1,0,1.8-0.4,2.5-1.1\n\t\t\tc0.7-0.7,1.1-1.6,1.1-2.7C21.5,36.8,21.1,35.9,20.4,35.2z" }),
1586
+ React__default.default.createElement("path", { fill: color, d: "M40.7,36.9c0-0.9-0.2-1.7-0.6-2.1c-0.4-0.5-1-0.7-1.8-0.7c-0.7,0-1.4,0.3-1.9,0.9c-0.5,0.6-0.8,1.4-0.8,2.5\n\t\t\tv6.2h-2.4v-6.7c0-0.9-0.2-1.7-0.6-2.1c-0.4-0.5-1-0.7-1.8-0.7c-0.7,0-1.4,0.3-1.9,0.9c-0.5,0.6-0.8,1.4-0.8,2.5v6.2h-2.4V32.1h2.4\n\t\t\tv1.2c0.1-0.1,0.2-0.2,0.4-0.4c0.2-0.2,0.5-0.4,1.1-0.6c0.5-0.3,1.1-0.4,1.7-0.4c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.3,1,0.5\n\t\t\tc0.2,0.2,0.5,0.4,0.7,0.6c0.2,0.2,0.3,0.4,0.4,0.5l0.1,0.2c0,0,0.1-0.1,0.2-0.2c0.1-0.1,0.2-0.2,0.5-0.5c0.2-0.2,0.5-0.4,0.8-0.6\n\t\t\tc0.3-0.2,0.6-0.3,1.1-0.5c0.5-0.1,0.9-0.2,1.4-0.2c1.3,0,2.4,0.4,3.2,1.3c0.8,0.9,1.2,2.1,1.2,3.8v6.7h-2.4V36.9z" }),
1587
+ React__default.default.createElement("path", { fill: color, d: "M60.8,36.9c0-0.9-0.2-1.7-0.6-2.1s-1-0.7-1.8-0.7c-0.7,0-1.4,0.3-1.9,0.9c-0.5,0.6-0.8,1.4-0.8,2.5v6.2h-2.4\n\t\t\tv-6.7c0-0.9-0.2-1.7-0.6-2.1c-0.4-0.5-1-0.7-1.8-0.7c-0.7,0-1.4,0.3-1.9,0.9c-0.5,0.6-0.8,1.4-0.8,2.5v6.2h-2.4V32.1h2.4v1.2\n\t\t\tc0.1-0.1,0.2-0.2,0.4-0.4c0.2-0.2,0.5-0.4,1.1-0.6c0.5-0.3,1.1-0.4,1.7-0.4c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.3,1,0.5\n\t\t\tc0.2,0.2,0.5,0.4,0.7,0.6c0.2,0.2,0.3,0.4,0.4,0.5l0.1,0.2c0,0,0.1-0.1,0.2-0.2c0.1-0.1,0.2-0.2,0.5-0.5c0.2-0.2,0.5-0.4,0.8-0.6\n\t\t\tc0.3-0.2,0.6-0.3,1.1-0.5c0.5-0.1,0.9-0.2,1.4-0.2c1.3,0,2.4,0.4,3.2,1.3c0.8,0.9,1.2,2.1,1.2,3.8v6.7h-2.4V36.9z" }),
1588
+ React__default.default.createElement("path", { fill: color, d: "M67,33.7c1.2-1.2,2.6-1.8,4.2-1.8c1.6,0,3,0.6,4.2,1.8c1.2,1.2,1.8,2.6,1.8,4.2c0,1.6-0.6,3-1.8,4.2\n\t\t\ts-2.6,1.8-4.2,1.8c-1.6,0-3-0.6-4.2-1.8c-1.2-1.2-1.8-2.6-1.8-4.2C65.2,36.3,65.8,34.9,67,33.7z M73.7,35.2\n\t\t\tc-0.7-0.7-1.6-1.1-2.5-1.1c-1,0-1.8,0.4-2.5,1.1c-0.7,0.7-1.1,1.6-1.1,2.7c0,1.1,0.4,2,1.1,2.7c0.7,0.7,1.6,1.1,2.5,1.1\n\t\t\tc1,0,1.8-0.4,2.5-1.1c0.7-0.7,1.1-1.6,1.1-2.7C74.8,36.8,74.4,35.9,73.7,35.2z" }),
1589
+ React__default.default.createElement("path", { fill: color, d: "M81.6,33.3l0.2-0.2c0.1-0.1,0.2-0.2,0.4-0.3c0.2-0.2,0.5-0.3,0.7-0.4c0.3-0.1,0.6-0.2,1-0.4\n\t\t\tc0.4-0.1,0.8-0.2,1.2-0.2c1.4,0,2.5,0.5,3.4,1.4c0.9,0.9,1.3,2.1,1.3,3.7v6.7h-2.4v-6.7c0-0.8-0.3-1.5-0.8-2.1\n\t\t\tc-0.5-0.5-1.2-0.8-2-0.8c-0.9,0-1.6,0.3-2.2,0.9c-0.5,0.6-0.8,1.4-0.8,2.5v6.2h-2.4V32.1h2.4V33.3z" }),
1590
+ React__default.default.createElement("path", { fill: color, d: "M98.3,35c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.4-0.3-0.7-0.4c-0.4-0.2-0.8-0.3-1.1-0.3\n\t\t\tc-0.5,0-0.9,0.1-1.2,0.4c-0.3,0.2-0.5,0.5-0.5,0.8c0,0.3,0.1,0.6,0.4,0.8c0.3,0.2,0.7,0.4,1.1,0.5c0.4,0.1,0.9,0.3,1.4,0.4\n\t\t\tc0.5,0.2,1,0.4,1.4,0.6c0.4,0.2,0.8,0.6,1.1,1c0.3,0.5,0.4,1,0.4,1.6c0,1-0.4,1.8-1.2,2.5c-0.8,0.7-1.8,1.1-3.1,1.1\n\t\t\tc-0.6,0-1.1-0.1-1.6-0.2c-0.5-0.1-0.9-0.3-1.3-0.5s-0.6-0.4-0.9-0.6c-0.2-0.2-0.4-0.4-0.5-0.5l-0.2-0.2l1.6-1.6\n\t\t\tc0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.2,0.5,0.4,1,0.6c0.5,0.3,1,0.4,1.6,0.4c0.6,0,1.1-0.1,1.4-0.4c0.3-0.3,0.5-0.6,0.5-1\n\t\t\tc0-0.3-0.1-0.6-0.4-0.8c-0.3-0.2-0.7-0.4-1.1-0.5c-0.4-0.1-0.9-0.3-1.4-0.4c-0.5-0.2-1-0.4-1.4-0.6c-0.4-0.2-0.8-0.6-1.1-1\n\t\t\tc-0.3-0.5-0.4-1-0.4-1.6c0-0.9,0.4-1.7,1.2-2.3c0.8-0.7,1.7-1,2.9-1c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.2,1.1,0.4\n\t\t\tc0.3,0.2,0.5,0.3,0.7,0.5c0.2,0.2,0.4,0.3,0.5,0.4l0.2,0.2L98.3,35z" }),
1591
+ React__default.default.createElement("path", { fill: color, d: "M108.3,36.9l4.8,6.7h-2.6l-3.7-5.2l-1.8,1.9v3.2h-2.4V0h2.4v37.3l4.9-5.2h2.9L108.3,36.9z" }),
1592
+ React__default.default.createElement("path", { fill: color, d: "M122.6,42.5l-0.2,0.2c-0.1,0.1-0.2,0.2-0.4,0.3c-0.2,0.2-0.5,0.3-0.7,0.4c-0.3,0.1-0.6,0.2-1,0.3\n\t\t\tc-0.4,0.1-0.8,0.2-1.2,0.2c-1.4,0-2.5-0.5-3.4-1.4c-0.9-0.9-1.3-2.1-1.3-3.7v-6.7h2.4v6.7c0,0.8,0.3,1.5,0.8,2.1\n\t\t\tc0.5,0.5,1.2,0.8,2,0.8c0.9,0,1.6-0.3,2.2-0.9c0.5-0.6,0.8-1.4,0.8-2.5v-6.2h2.4v11.5h-2.4V42.5z" })),
1593
+ React__default.default.createElement("g", null,
1594
+ React__default.default.createElement("rect", { x: "6.8", y: "0", fill: color, width: "5.1", height: "27.1" }),
1595
+ React__default.default.createElement("rect", { x: "16.5", y: "0", fill: color, width: "2.7", height: "27.1" }),
1596
+ React__default.default.createElement("rect", { x: "33.3", y: "0", fill: color, width: "5", height: "27.1" }),
1597
+ React__default.default.createElement("rect", { x: "47.8", y: "0", fill: color, width: "4", height: "27.1" }),
1598
+ React__default.default.createElement("rect", { x: "71.3", y: "0", fill: color, width: "5.9", height: "27.1" }),
1599
+ React__default.default.createElement("rect", { x: "94.2", y: "0", fill: color, width: "4", height: "27.1" }),
1600
+ React__default.default.createElement("rect", { x: "114.4", y: "0", fill: color, width: "4", height: "27.1" }),
1601
+ React__default.default.createElement("rect", { x: "22.4", y: "0", fill: color, width: "5.9", height: "27.1" }),
1602
+ React__default.default.createElement("rect", { x: "41.6", y: "0", fill: color, width: "2.9", height: "27.1" }),
1603
+ React__default.default.createElement("rect", { x: "56.3", y: "0", fill: color, width: "5.3", height: "27.1" }),
1604
+ React__default.default.createElement("rect", { x: "81.6", y: "0", fill: color, width: "2.9", height: "27.1" }),
1605
+ React__default.default.createElement("rect", { x: "1.2", y: "0", fill: color, width: "2.9", height: "27.1" }),
1606
+ React__default.default.createElement("rect", { x: "65.2", y: "0", fill: color, width: "2.9", height: "27.1" }),
1607
+ React__default.default.createElement("rect", { x: "87.4", y: "0", fill: color, width: "2.9", height: "27.1" }),
1608
+ React__default.default.createElement("rect", { x: "107.9", y: "0", fill: color, width: "2.9", height: "27.1" }),
1609
+ React__default.default.createElement("rect", { x: "122.1", y: "0", fill: color, width: "2.9", height: "27.1" }),
1610
+ React__default.default.createElement("path", { fill: color, d: "M105,27.1h-2.4V0h2.4V27.1z" }))));
1611
+ }
1612
+
1613
+ function SkubotLogo(_a) {
1614
+ var _b = _a.color, color = _b === void 0 ? '#00C1DE' : _b, _c = _a.width, width = _c === void 0 ? 64 : _c, _d = _a.height, height = _d === void 0 ? 64 : _d; _a.altText; __rest(_a, ["color", "width", "height", "altText"]);
1615
+ return (React__default.default.createElement(SVG$1, { width: width, height: height, viewBox: "0 0 100 54.9" },
1616
+ React__default.default.createElement("circle", { fill: color, cx: "2.7", cy: "30.2", r: "2.7" }),
1617
+ React__default.default.createElement("circle", { fill: color, cx: "97.3", cy: "30.2", r: "2.7" }),
1618
+ React__default.default.createElement("path", { fill: color, d: "M91,28.5c-0.1-2.3-0.4-4.6-0.8-6.8c-0.2-0.9-1-1.5-1.9-1.5h-6.8V9.7c0-1.4-0.8-2.5-1.7-2.5\n c-4.8-0.9-9.6-1.5-14.5-2V3.4c0-0.9-0.6-1.8-1.6-2C59.2,0.5,54.6,0,50,0c-4.6,0-9.2,0.5-13.6,1.4c-0.9,0.2-1.6,1-1.6,2v1.9\n c-4.8,0.4-9.7,1.1-14.5,2c-0.5,0-0.9,0.3-1.2,0.7c-0.3,0.4-0.5,1.1-0.5,1.7v10.4h-6.8c-0.9,0-1.8,0.6-1.9,1.5\n C9.4,24,9.1,26.2,9,28.5V31c0.1,2.3,0.4,4.6,0.8,6.8c0.2,0.9,1,1.5,1.9,1.5h6.8V50c0,1.4,0.8,2.5,1.7,2.5\n c9.8,1.6,19.8,2.5,29.7,2.5c9.9,0,19.8-0.8,29.7-2.5c0.5,0,0.9-0.3,1.2-0.7c0.3-0.4,0.5-1.1,0.5-1.7V39.4h6.8\n c0.9,0,1.8-0.6,1.9-1.5c0.5-2.3,0.8-4.5,0.8-6.8V28.5z M76.6,45.7c0,1.1-0.9,2-2,2c-16.3,2.5-32.9,2.5-49.3,0c-0.5,0-1-0.2-1.4-0.6\n c-0.4-0.4-0.6-0.8-0.6-1.4V13.8c0-1.1,0.9-2,2-2C33.5,10.6,41.8,10,50,10c8.2,0,16.5,0.6,24.6,1.8c0.5,0,1,0.2,1.4,0.6\n c0.4,0.4,0.6,0.8,0.6,1.4V45.7z" }),
1619
+ React__default.default.createElement("path", { fill: color, d: "M37.2,39L37.2,39c-2.7,0-4.9-2.2-4.9-4.9v-7.8c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v7.8\n C42.1,36.8,39.9,39,37.2,39z" }),
1620
+ React__default.default.createElement("path", { fill: color, d: "M62.8,39L62.8,39c-2.7,0-4.9-2.2-4.9-4.9v-7.8c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v7.8\n C67.8,36.8,65.5,39,62.8,39z" })));
1621
+ }
1622
+
1529
1623
  function SalesArrowIcon(_a) {
1530
1624
  var _b = _a.color, color = _b === void 0 ? green.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.direction, direction = _d === void 0 ? "up" : _d, _e = _a.altText, altText = _e === void 0 ? "Up" : _e, props = __rest(_a, ["color", "size", "direction", "altText"]);
1531
1625
  if (direction === "down") {
@@ -2917,7 +3011,7 @@ var avatarColors = {
2917
3011
  };
2918
3012
  var AvatarWrapper = styled__default.default.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n &&& {\n display: inline-block;\n vertical-align: top;\n overflow: hidden;\n margin: 0;\n ", "\n\n width: ", ";\n height: ", ";\n border-radius: ", ";\n text-align: center;\n ", "\n ", "\n }\n"], ["\n &&& {\n display: inline-block;\n vertical-align: top;\n overflow: hidden;\n margin: 0;\n ", "\n\n width: ", ";\n height: ", ";\n border-radius: ", ";\n text-align: center;\n ", "\n ", "\n }\n"])), SharedStyles, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.shape; }, function (props) { var _a; return props.hasPic ? '' : "background: ".concat(_.get(avatarColors, [(_a = props.color) !== null && _a !== void 0 ? _a : 'teal', 'backgroundColor'], props.color), ";"); }, function (props) { var _a; return props.hasPic ? '' : "color: ".concat(_.get(avatarColors, [(_a = props.color) !== null && _a !== void 0 ? _a : 'teal', 'textColor'], props.color), ";"); });
2919
3013
  var AvatarPic = styled__default.default.img(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n &&& {\n width: 100%;\n height: 100%;\n }\n"], ["\n &&& {\n width: 100%;\n height: 100%;\n }\n"])));
2920
- var AvatarInitials = styled__default.default.p(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n &&& {\n margin: 0;\n position: relative;\n top: 50%;\n transform: translate(0, -50%);\n font-family: 'skufont-bold', sans-serif;\n font-size: ", "\n"], ["\n &&& {\n margin: 0;\n position: relative;\n top: 50%;\n transform: translate(0, -50%);\n font-family: 'skufont-bold', sans-serif;\n font-size: ", "\n"])), function (props) { var _a; return _.get(avatarSizes, [(_a = props.size) !== null && _a !== void 0 ? _a : 'small', 'fontSize'], props.size); });
3014
+ var AvatarInitials = styled__default.default.p(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n &&& {\n margin: 0;\n position: relative;\n top: 50%;\n transform: translate(0, -50%);\n font-family: 'skufont-bold', sans-serif;\n font-size: ", "\n"], ["\n &&& {\n margin: 0;\n position: relative;\n top: 50%;\n transform: translate(0, -50%);\n font-family: 'skufont-bold', sans-serif;\n font-size: ", "\n"])), function (props) { var _a; return _.get(avatarSizes, [(_a = props.size) !== null && _a !== void 0 ? _a : 'small', 'fontSize'], props.size); });
2921
3015
  var Avatar = function (_a) {
2922
3016
  var pic = _a.pic, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.shape, shape = _c === void 0 ? 'square' : _c, color = _a.color, initials = _a.initials, icon = _a.icon, children = _a.children, props = __rest(_a, ["pic", "size", "shape", "color", "initials", "icon", "children"]);
2923
3017
  if (pic) {
@@ -2933,7 +3027,7 @@ var Avatar = function (_a) {
2933
3027
  React__default.default.createElement(AvatarInitials, { size: size }, initials !== null && initials !== void 0 ? initials : children));
2934
3028
  }
2935
3029
  };
2936
- var templateObject_1$R, templateObject_2$v, templateObject_3$l;
3030
+ var templateObject_1$R, templateObject_2$v, templateObject_3$k;
2937
3031
 
2938
3032
  var getTotalCols = function (p) { return p.totalCols || 12; };
2939
3033
  var SizerCss = styled.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n ", "\n ", "\n\n ", "\n ", ";\n ", "\n"], ["\n ", "\n ", "\n ", "\n\n ", "\n ", ";\n ", "\n"])), function (props) { return props.start ? "\n justify-content: flex-start;\n text-align: left;\n " : ''; }, function (props) { return props.center ? "\n justify-content: center;\n text-align: center;\n " : ''; }, function (props) { return props.end ? "\n justify-content: flex-end;\n text-align: right;\n " : ''; }, function (props) { return props.offset && "margin-left: ".concat(props.offset / getTotalCols(props) * 100, "%;"); }, function (props) { return props.collapse && typeof (props.collapse) === 'string' && media[props.collapse]("\n display: none;\n "); }, function (props) {
@@ -2985,14 +3079,14 @@ var Row = styled__default.default.div(templateObject_1$P || (templateObject_1$P
2985
3079
  var Col = styled__default.default.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n &&& {\n padding: ", ";\n flex: 12;\n flex-grow: 1;\n box-sizing: border-box;\n ", "\n ", "\n }\n"], ["\n &&& {\n padding: ", ";\n flex: 12;\n flex-grow: 1;\n box-sizing: border-box;\n ", "\n ", "\n }\n"])), function (props) { return props.padded ? '0.5rem' : 'initial'; }, SizerCss, SharedStyles);
2986
3080
  var templateObject_1$P, templateObject_2$t;
2987
3081
 
2988
- var headingStyle = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n font-family: \"skufont-demibold\", sans-serif;\n color: ", ";\n font-weight: bold;\n"], ["\n font-family: \"skufont-demibold\", sans-serif;\n color: ", ";\n font-weight: bold;\n"])), function (props) { return getThemeColor(props, 'texttitle', colors.texttitle); });
3082
+ var headingStyle = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n font-family: \"skufont-demibold\", sans-serif;\n color: ", ";\n font-weight: bold;\n"], ["\n font-family: \"skufont-demibold\", sans-serif;\n color: ", ";\n font-weight: bold;\n"])), function (props) { return getThemeColor(props, 'texttitle', colors$1.texttitle); });
2989
3083
  var H1 = styled__default.default.h1(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n &&& {\n font-size: 30px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 30px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
2990
- var H2 = styled__default.default.h2(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
2991
- var H3 = styled__default.default.h3(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
3084
+ var H2 = styled__default.default.h2(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
3085
+ var H3 = styled__default.default.h3(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
2992
3086
  var H4 = styled__default.default.h4(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n &&& {\n font-size: 23px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 23px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
2993
3087
  var H5 = styled__default.default.h5(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n &&& {\n font-size: 20px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 20px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
2994
3088
  var H6 = styled__default.default.h6(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n &&& {\n font-size: 18px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 18px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
2995
- var templateObject_1$O, templateObject_2$s, templateObject_3$k, templateObject_4$f, templateObject_5$9, templateObject_6$9, templateObject_7$3;
3089
+ var templateObject_1$O, templateObject_2$s, templateObject_3$j, templateObject_4$e, templateObject_5$9, templateObject_6$9, templateObject_7$3;
2996
3090
 
2997
3091
  var StyledBox = styled__default.default.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n background: white;\n margin-top: 20px;\n box-shadow: ", ";\n border-radius: 5px;\n padding: 20px ", "px;\n ", "\n"], ["\n background: white;\n margin-top: 20px;\n box-shadow: ", ";\n border-radius: 5px;\n padding: 20px ", "px;\n ", "\n"])), function (props) { return props.borderless ? 0 : "0 2px 4px rgba(0, 0, 0, 0.07)"; }, function (props) { return props.padded ? 20 : 0; }, SharedStyles);
2998
3092
  var Box = function (_a) {
@@ -3007,13 +3101,13 @@ var Box = function (_a) {
3007
3101
  };
3008
3102
  var templateObject_1$N;
3009
3103
 
3010
- var Background = styled__default.default.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n &&& {\n background: ", ";\n padding: 20px ", "px;\n min-height: ", ";\n ", "\n }\n"], ["\n &&& {\n background: ", ";\n padding: 20px ", "px;\n min-height: ", ";\n ", "\n }\n"])), function (props) { return getThemeColor(props, 'bggray', colors.bggray); }, function (props) { return props.padded ? 20 : 0; }, function (props) { return props.fillWindow ? "100vh" : 0; }, SharedStyles);
3104
+ var Background = styled__default.default.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n &&& {\n background: ", ";\n padding: 20px ", "px;\n min-height: ", ";\n ", "\n }\n"], ["\n &&& {\n background: ", ";\n padding: 20px ", "px;\n min-height: ", ";\n ", "\n }\n"])), function (props) { return getThemeColor(props, 'bggray', colors$1.bggray); }, function (props) { return props.padded ? 20 : 0; }, function (props) { return props.fillWindow ? "100vh" : 0; }, SharedStyles);
3011
3105
  var templateObject_1$M;
3012
3106
 
3013
- var StyledDropArea = styled__default.default.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n &&& {\n padding: 20px;\n border: 2px dashed ", "; \n cursor: pointer;\n border-radius: 5px;\n &:hover {\n background-color: ", ";\n }\n border-color: ", ";\n outline: none;\n transition: border .24s ease-in-out;\n width: 100%;\n ", "\n }\n"], ["\n &&& {\n padding: 20px;\n border: 2px dashed ", "; \n cursor: pointer;\n border-radius: 5px;\n &:hover {\n background-color: ", ";\n }\n border-color: ", ";\n outline: none;\n transition: border .24s ease-in-out;\n width: 100%;\n ", "\n }\n"])), function (props) { return getThemeColor(props, 'primary', colors.primary); }, function (props) { return getThemeColor(props, 'bgblue', colors.bgblue); }, function (props) { return getColor(props); }, SharedStyles);
3014
- var PlaceHolder = styled__default.default.label(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n &&& {\n color: ", ";\n text-align: center;\n width: 100%;\n display: block;\n }\n"], ["\n &&& {\n color: ", ";\n text-align: center;\n width: 100%;\n display: block;\n }\n"])), function (props) { return getThemeColor(props, 'primary', colors.primary); });
3015
- var ThumbsContainer = styled__default.default.aside(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n &&& {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 16px;\n }\n"], ["\n &&& {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 16px;\n }\n"])));
3016
- var Thumb = styled__default.default.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n border-radius: 2px;\n border: 1px solid #eaeaea ", ";\n margin-bottom: 8px;\n margin-right: 8px;\n width: 100px;\n height: 100px;\n padding: 4px;\n box-sizing: border-box;\n }\n"], ["\n &&& {\n display: inline-flex;\n border-radius: 2px;\n border: 1px solid #eaeaea ", ";\n margin-bottom: 8px;\n margin-right: 8px;\n width: 100px;\n height: 100px;\n padding: 4px;\n box-sizing: border-box;\n }\n"])), function (props) { return getThemeColor(props, 'bggray', colors.bggray); });
3107
+ var StyledDropArea = styled__default.default.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n &&& {\n padding: 20px;\n border: 2px dashed ", "; \n cursor: pointer;\n border-radius: 5px;\n &:hover {\n background-color: ", ";\n }\n border-color: ", ";\n outline: none;\n transition: border .24s ease-in-out;\n width: 100%;\n ", "\n }\n"], ["\n &&& {\n padding: 20px;\n border: 2px dashed ", "; \n cursor: pointer;\n border-radius: 5px;\n &:hover {\n background-color: ", ";\n }\n border-color: ", ";\n outline: none;\n transition: border .24s ease-in-out;\n width: 100%;\n ", "\n }\n"])), function (props) { return getThemeColor(props, 'primary', colors$1.primary); }, function (props) { return getThemeColor(props, 'bgblue', colors$1.bgblue); }, function (props) { return getColor(props); }, SharedStyles);
3108
+ var PlaceHolder = styled__default.default.label(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n &&& {\n color: ", ";\n text-align: center;\n width: 100%;\n display: block;\n }\n"], ["\n &&& {\n color: ", ";\n text-align: center;\n width: 100%;\n display: block;\n }\n"])), function (props) { return getThemeColor(props, 'primary', colors$1.primary); });
3109
+ var ThumbsContainer = styled__default.default.aside(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n &&& {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 16px;\n }\n"], ["\n &&& {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 16px;\n }\n"])));
3110
+ var Thumb = styled__default.default.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n border-radius: 2px;\n border: 1px solid #eaeaea ", ";\n margin-bottom: 8px;\n margin-right: 8px;\n width: 100px;\n height: 100px;\n padding: 4px;\n box-sizing: border-box;\n }\n"], ["\n &&& {\n display: inline-flex;\n border-radius: 2px;\n border: 1px solid #eaeaea ", ";\n margin-bottom: 8px;\n margin-right: 8px;\n width: 100px;\n height: 100px;\n padding: 4px;\n box-sizing: border-box;\n }\n"])), function (props) { return getThemeColor(props, 'bggray', colors$1.bggray); });
3017
3111
  var ThumbInner = styled__default.default.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n &&& {\n display: flex;\n min-width: 0px;\n overflow: hidden;\n }\n"], ["\n &&& {\n display: flex;\n min-width: 0px;\n overflow: hidden;\n }\n"])));
3018
3112
  var ImgPreview = styled__default.default.img(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n &&& {\n display: block;\n width: auto;\n height: 100%;\n }\n"], ["\n &&& {\n display: block;\n width: auto;\n height: 100%;\n }\n"])));
3019
3113
  var DropArea = function (_a) {
@@ -3072,7 +3166,7 @@ function DropzonedPreviews(_a) {
3072
3166
  ? React__default.default.createElement(ThumbsContainer, null, thumbs)
3073
3167
  : React__default.default.createElement(PlaceHolder, null, placeholder))));
3074
3168
  }
3075
- var templateObject_1$L, templateObject_2$r, templateObject_3$j, templateObject_4$e, templateObject_5$8, templateObject_6$8;
3169
+ var templateObject_1$L, templateObject_2$r, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$8;
3076
3170
 
3077
3171
  /*
3078
3172
 
@@ -3150,18 +3244,18 @@ var getSizeStyle$1 = function (style, defaults) {
3150
3244
  };
3151
3245
  };
3152
3246
  var getVariantStyles = function (props, variant) {
3153
- var white = getThemeColor(props, 'neutrals.white', colors.neutrals.white);
3154
- var disabled = getThemeColor(props, 'neutrals.50', colors.errors['50']);
3155
- var disabledText = getThemeColor(props, 'neutrals.70', colors.errors['70']);
3156
- var primary = getThemeColor(props, 'primary1.main', colors.primary1.main);
3157
- var primaryDark = getThemeColor(props, 'primary1.75', colors.primary1['75']);
3158
- var primaryLight = getThemeColor(props, 'primary1.20', colors.primary1['20']);
3159
- var cta = getThemeColor(props, 'secondary1.main', colors.secondary1.main);
3160
- var ctaDark = getThemeColor(props, 'secondary1.80', colors.secondary1['80']);
3247
+ var white = getThemeColor(props, 'neutrals.white', colors$1.neutrals.white);
3248
+ var disabled = getThemeColor(props, 'neutrals.50', colors$1.errors['50']);
3249
+ var disabledText = getThemeColor(props, 'neutrals.70', colors$1.errors['70']);
3250
+ var primary = getThemeColor(props, 'primary1.main', colors$1.primary1.main);
3251
+ var primaryDark = getThemeColor(props, 'primary1.75', colors$1.primary1['75']);
3252
+ var primaryLight = getThemeColor(props, 'primary1.20', colors$1.primary1['20']);
3253
+ var cta = getThemeColor(props, 'secondary1.main', colors$1.secondary1.main);
3254
+ var ctaDark = getThemeColor(props, 'secondary1.80', colors$1.secondary1['80']);
3161
3255
  // const ctaLight = getThemeColor(props, 'secondary1.20', colors.secondary1['20']);
3162
- var error = getThemeColor(props, 'errors.main', colors.errors.main);
3163
- var errorLight = getThemeColor(props, 'errors.10', colors.errors['10']);
3164
- var errorDark = getThemeColor(props, 'errors.70', colors.errors['70']);
3256
+ var error = getThemeColor(props, 'errors.main', colors$1.errors.main);
3257
+ var errorLight = getThemeColor(props, 'errors.10', colors$1.errors['10']);
3258
+ var errorDark = getThemeColor(props, 'errors.70', colors$1.errors['70']);
3165
3259
  var customColor = props.variantColor || white;
3166
3260
  var customBorderColor = props.variantBorderColor;
3167
3261
  var customBg = props.variantBg;
@@ -3371,12 +3465,12 @@ var getVariantStyles = function (props, variant) {
3371
3465
  var Button = styled__default.default.button(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n &&& {\n border: 3px solid white;\n border-radius: ", ";\n background: ", ";\n color: ", ";\n border-color: ", ";\n font-size: ", ";\n line-height: ", ";\n padding: ", ";\n font-family: ", ";\n cursor: pointer;\n vertical-align: top;\n /*\n &:focus {\n outline: none;\n opacity: .9;\n box-shadow: 0 0 8px ", ";\n }\n */\n &:disabled {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n cursor: default;\n opacity: 0.5;\n ", "\n }\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n border: 3px solid white;\n border-radius: ", ";\n background: ", ";\n color: ", ";\n border-color: ", ";\n font-size: ", ";\n line-height: ", ";\n padding: ", ";\n font-family: ", ";\n cursor: pointer;\n vertical-align: top;\n /*\n &:focus {\n outline: none;\n opacity: .9;\n box-shadow: 0 0 8px ", ";\n }\n */\n &:disabled {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n cursor: default;\n opacity: 0.5;\n ", "\n }\n ", "\n ", "\n ", "\n }\n"])), function (props) { return props.size && sizes[props.size] ? sizes[props.size].borderRadius : '4px'; }, function (_a) {
3372
3466
  var secondary = _a.secondary, cta = _a.cta, props = __rest(_a, ["secondary", "cta"]);
3373
3467
  return secondary ? "transparent" :
3374
- cta ? getThemeColor(props, 'cta', colors.cta) : getThemeColor(props, 'primary', colors.teal.main);
3375
- }, function (props) { return props.secondary ? getThemeColor(props, 'primary', colors.primary) : "white"; }, function (props) { return props.cta ? getThemeColor(props, 'cta', colors.cta) : getThemeColor(props, 'primary', colors.teal.main); }, getSizeStyle$1('font-size', '1rem'), getSizeStyle$1('line-height', '1.5rem'), function (p) { return getSizeStyle$1('padding', '12px 25px'); }, getSizeStyle$1('font-family', "'skufont-demibold', sans-serif"), function (_a) {
3468
+ cta ? getThemeColor(props, 'cta', colors$1.cta) : getThemeColor(props, 'primary', colors$1.teal.main);
3469
+ }, function (props) { return props.secondary ? getThemeColor(props, 'primary', colors$1.primary) : "white"; }, function (props) { return props.cta ? getThemeColor(props, 'cta', colors$1.cta) : getThemeColor(props, 'primary', colors$1.teal.main); }, getSizeStyle$1('font-size', '1rem'), getSizeStyle$1('line-height', '1.5rem'), function (p) { return getSizeStyle$1('padding', '12px 25px'); }, getSizeStyle$1('font-family', "'skufont-demibold', sans-serif"), function (_a) {
3376
3470
  var secondary = _a.secondary, cta = _a.cta, props = __rest(_a, ["secondary", "cta"]);
3377
- return secondary ? getThemeColor(props, 'primary', colors.primary) :
3378
- cta ? getThemeColor(props, 'cta', colors.cta) : getThemeColor(props, 'primary', colors.primary);
3379
- }, function (props) { return getThemeColor(props, 'disabledButton', colors.disabledButton); }, function (props) { return getThemeColor(props, 'disabledButtonBorder', colors.disabledButtonBorder); }, function (props) { return getThemeColor(props, 'primary', colors.primary); }, function (p) { return getVariantStyles(p, 'disabled'); }, function (p) { var _a; return getVariantStyles(p, p.disabled ? 'disabled' : ((_a = p.variant) !== null && _a !== void 0 ? _a : (p.secondary ? 'secondary' : (p.cta ? 'cta' : 'primary')))); }, SharedStyles, SizerCss);
3471
+ return secondary ? getThemeColor(props, 'primary', colors$1.primary) :
3472
+ cta ? getThemeColor(props, 'cta', colors$1.cta) : getThemeColor(props, 'primary', colors$1.primary);
3473
+ }, function (props) { return getThemeColor(props, 'disabledButton', colors$1.disabledButton); }, function (props) { return getThemeColor(props, 'disabledButtonBorder', colors$1.disabledButtonBorder); }, function (props) { return getThemeColor(props, 'primary', colors$1.primary); }, function (p) { return getVariantStyles(p, 'disabled'); }, function (p) { var _a; return getVariantStyles(p, p.disabled ? 'disabled' : ((_a = p.variant) !== null && _a !== void 0 ? _a : (p.secondary ? 'secondary' : (p.cta ? 'cta' : 'primary')))); }, SharedStyles, SizerCss);
3380
3474
  var ButtonsGroup = styled__default.default.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n &&& {\n display: inline-block;\n max-width: 100%;\n margin-bottom: 10px;\n margin-right: 100px;\n ", "\n ", "\n }\n"], ["\n &&& {\n display: inline-block;\n max-width: 100%;\n margin-bottom: 10px;\n margin-right: 100px;\n ", "\n ", "\n }\n"])), SharedStyles, SizerCss);
3381
3475
  var presets = {
3382
3476
  edit: {
@@ -3527,8 +3621,8 @@ var templateObject_1$J;
3527
3621
 
3528
3622
  var InputIconLabel = styled__default.default.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n&&& {\n box-sizing: border-box;\n width: 40px;\n height: ", "px;\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: 1rem;\n color: white;\n font-size: 18px;\n text-align: center;\n line-height: 1.5rem;\n padding: 6px;\n\n :hover {\n background: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n}\n"], ["\n&&& {\n box-sizing: border-box;\n width: 40px;\n height: ", "px;\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: 1rem;\n color: white;\n font-size: 18px;\n text-align: center;\n line-height: 1.5rem;\n padding: 6px;\n\n :hover {\n background: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n}\n"])), function (p) { return p.error ? 38 : 36; }, function (p) {
3529
3623
  return p.error
3530
- ? getThemeColor(p, 'errors.main', colors.errors.main)
3531
- : getThemeColor(p, 'input.iconWrapper.background', colors.input.iconWrapper.background);
3624
+ ? getThemeColor(p, 'errors.main', colors$1.errors.main)
3625
+ : getThemeColor(p, 'input.iconWrapper.background', colors$1.input.iconWrapper.background);
3532
3626
  }, function (p) { return p.iconPosition === 'right' ? '0 3px 3px 0' : '3px 0 0 3px'; }, function (p) { return getThemeColor(p, 'input.iconWrapper.hover.background'); }, function (p) { return p.isHover
3533
3627
  ? "background: ".concat(getThemeColor(p, 'input.iconWrapper.hover.background'), ";")
3534
3628
  : ''; }, function (p) { return p.isActive
@@ -3553,7 +3647,7 @@ var InputIconLabelContainer = styled__default.default.div(templateObject_2$p ||
3553
3647
  },
3554
3648
  };
3555
3649
  });
3556
- var Input = styled__default.default.input(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n &&& {\n ", "\n }\n ", "\n"], ["\n &&& {\n ", "\n }\n ", "\n"])), function (p) {
3650
+ var Input = styled__default.default.input(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n &&& {\n ", "\n }\n ", "\n"], ["\n &&& {\n ", "\n }\n ", "\n"])), function (p) {
3557
3651
  var styles = {
3558
3652
  marginBottom: p.noMargin ? 0 : "1rem",
3559
3653
  fontSize: '1rem',
@@ -3623,11 +3717,11 @@ var LabeledIconInput = React__default.default.forwardRef(function (_a, ref) {
3623
3717
  var containerRef = React.useRef(null);
3624
3718
  var _g = React.useState(false), isActive = _g[0], setIsActive = _g[1];
3625
3719
  var _h = React.useState(false), isHovering = _h[0], setIsHovering = _h[1];
3626
- var activeBorderColor = getThemeColor(props, 'input.active.border', colors.input.active.border);
3627
- var activeTextColor = colors.input.active.text;
3628
- var errorBorderColor = getThemeColor(props, 'input.error.border', colors.input.error.border);
3629
- var disabledBackground = colors.input.disabled.background;
3630
- var disabledTextColor = colors.input.disabled.text;
3720
+ var activeBorderColor = getThemeColor(props, 'input.active.border', colors$1.input.active.border);
3721
+ var activeTextColor = colors$1.input.active.text;
3722
+ var errorBorderColor = getThemeColor(props, 'input.error.border', colors$1.input.error.border);
3723
+ var disabledBackground = colors$1.input.disabled.background;
3724
+ var disabledTextColor = colors$1.input.disabled.text;
3631
3725
  var activeStyles = !isActive ? {} : {
3632
3726
  borderColor: error ? errorBorderColor : activeBorderColor,
3633
3727
  color: getThemeColor(props, 'input.active.text', activeTextColor),
@@ -3655,16 +3749,16 @@ var LabeledIconInput = React__default.default.forwardRef(function (_a, ref) {
3655
3749
  iconProps['color'] = errorBorderColor;
3656
3750
  }
3657
3751
  else if (disabled) {
3658
- iconProps['fill'] = colors.input.icon.disabled.fill;
3659
- iconProps['color'] = colors.input.icon.disabled.fill;
3752
+ iconProps['fill'] = colors$1.input.icon.disabled.fill;
3753
+ iconProps['color'] = colors$1.input.icon.disabled.fill;
3660
3754
  }
3661
3755
  else if (isHovering) {
3662
- iconProps['fill'] = colors.input.icon.hover.fill;
3663
- iconProps['color'] = colors.input.icon.hover.fill;
3756
+ iconProps['fill'] = colors$1.input.icon.hover.fill;
3757
+ iconProps['color'] = colors$1.input.icon.hover.fill;
3664
3758
  }
3665
3759
  else if (isActive) {
3666
- iconProps['fill'] = colors.input.icon.active.fill;
3667
- iconProps['color'] = colors.input.icon.active.fill;
3760
+ iconProps['fill'] = colors$1.input.icon.active.fill;
3761
+ iconProps['color'] = colors$1.input.icon.active.fill;
3668
3762
  }
3669
3763
  return React__default.default.cloneElement(Icon, iconProps);
3670
3764
  }, [Icon, error, disabled, errorBorderColor, isActive, isHovering, iconColor]);
@@ -3694,7 +3788,7 @@ var LabeledIconInput = React__default.default.forwardRef(function (_a, ref) {
3694
3788
  React__default.default.createElement(Input, { hasIcon: true, ref: ref, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, readOnly: readOnly, required: required, style: { marginBottom: 0, }, noMargin: noMargin, error: error, disabled: disabled, onFocus: onFocus, onChange: onChange, onBlur: onBlur }),
3695
3789
  iconPosition === 'right' ? React__default.default.createElement(InputIconLabel, { style: __assign({ marginBottom: 0, padding: 6 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
3696
3790
  });
3697
- var CheckboxLabel = styled__default.default.label(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n position: relative;\n margin-bottom: 12px;\n margin-right: 24px;\n cursor: ", ";\n font-size: ", ";\n color: ", ";\n font-family: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-weight: normal;\n line-height: ", ";\n box-sizing: border-box;\n opacity: ", ";\n &:focus {\n outline: 0;\n }\n }\n"], ["\n &&& {\n display: inline-flex;\n position: relative;\n margin-bottom: 12px;\n margin-right: 24px;\n cursor: ", ";\n font-size: ", ";\n color: ", ";\n font-family: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-weight: normal;\n line-height: ", ";\n box-sizing: border-box;\n opacity: ", ";\n &:focus {\n outline: 0;\n }\n }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
3791
+ var CheckboxLabel = styled__default.default.label(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n position: relative;\n margin-bottom: 12px;\n margin-right: 24px;\n cursor: ", ";\n font-size: ", ";\n color: ", ";\n font-family: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-weight: normal;\n line-height: ", ";\n box-sizing: border-box;\n opacity: ", ";\n &:focus {\n outline: 0;\n }\n }\n"], ["\n &&& {\n display: inline-flex;\n position: relative;\n margin-bottom: 12px;\n margin-right: 24px;\n cursor: ", ";\n font-size: ", ";\n color: ", ";\n font-family: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-weight: normal;\n line-height: ", ";\n box-sizing: border-box;\n opacity: ", ";\n &:focus {\n outline: 0;\n }\n }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
3698
3792
  var RadioLabel = styled__default.default(CheckboxLabel)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n &&& {\n padding-left: 32px;\n }\n"], ["\n &&& {\n padding-left: 32px;\n }\n"])));
3699
3793
  var Radio = styled__default.default.input(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n &&& {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n box-sizing: border-box;\n &:focus {\n outline: 0;\n }\n &:checked {\n background-color: white;\n display: block;\n }\n &:hover {\n background-color: #02c0da;\n }\n ", "\n ", "\n }\n"], ["\n &&& {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n box-sizing: border-box;\n &:focus {\n outline: 0;\n }\n &:checked {\n background-color: white;\n display: block;\n }\n &:hover {\n background-color: #02c0da;\n }\n ", "\n ", "\n }\n"])), function (props) { return props.isHovering && "background-color: #02c0da;"; }, SharedStyles);
3700
3794
  var CheckMark = styled__default.default.span(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 23px;\n width: 23px;\n background-color: ", ";\n opacity: ", ";\n filter: ", ";\n border: 2px solid #02c0da;\n border-radius: 4px;\n box-sizing: border-box;\n &:focus {\n outline: 0;\n }\n &:hover {\n background-color: ", ";\n }\n &::after {\n content: \"\";\n position: absolute;\n left: 9px;\n top: 5px;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 3px 3px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n box-sizing: border-box;\n display: ", ";\n }\n ", "\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 23px;\n width: 23px;\n background-color: ", ";\n opacity: ", ";\n filter: ", ";\n border: 2px solid #02c0da;\n border-radius: 4px;\n box-sizing: border-box;\n &:focus {\n outline: 0;\n }\n &:hover {\n background-color: ", ";\n }\n &::after {\n content: \"\";\n position: absolute;\n left: 9px;\n top: 5px;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 3px 3px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n box-sizing: border-box;\n display: ", ";\n }\n ", "\n"])), function (props) { return ((props.isHovering || props.checked) && !props.disabled) ? '#02c0da' : 'white'; }, function (props) { return props.disabled ? 0.7 : 1; }, function (props) { return props.disabled ? "grayscale(100%)" : "none"; }, function (props) { return props.disabled ? "white" : "#02c0da"; }, function (props) { return props.checked ? 'block' : 'none'; }, SharedStyles);
@@ -3721,7 +3815,7 @@ var LabeledRadioInButton = function (_a) {
3721
3815
  var label = _a.label; _a.name; var checked = _a.checked, disabled = _a.disabled, readOnly = _a.readOnly, defaultValue = _a.defaultValue; _a.labelStyle; _a.radioIconStyle; var flexGrow = _a.flexGrow, onChange = _a.onChange; __rest(_a, ["label", "name", "checked", "disabled", "readOnly", "defaultValue", "labelStyle", "radioIconStyle", "flexGrow", "onChange"]);
3722
3816
  return (React__default.default.createElement(LabeledRadio, { label: label, checked: checked, disabled: disabled, onChange: onChange, readOnly: readOnly, defaultValue: defaultValue, labelStyle: {
3723
3817
  padding: "13px 40px",
3724
- backgroundColor: disabled ? neutrals['40'] : checked ? colors.white : teal['20'],
3818
+ backgroundColor: disabled ? neutrals['40'] : checked ? colors$1.white : teal['20'],
3725
3819
  border: disabled ? "solid 3px ".concat(neutrals['40']) : checked ? "solid 3px ".concat(teal.main) : "solid 3px ".concat(teal['20']),
3726
3820
  borderRadius: "200px",
3727
3821
  color: disabled ? neutrals['70'] : teal.main,
@@ -3751,7 +3845,7 @@ var LabeledCheckbox = React__default.default.forwardRef(function (_a, ref) {
3751
3845
  label,
3752
3846
  React__default.default.createElement(Radio, __assign({ ref: ref, name: name, type: "checkbox", checked: checked, isHovering: isHovering, onChange: disabled ? undefined : onChange }, props))));
3753
3847
  });
3754
- var templateObject_1$I, templateObject_2$p, templateObject_3$i, templateObject_4$d, templateObject_5$7, templateObject_6$7, templateObject_7$2, templateObject_8$2;
3848
+ var templateObject_1$I, templateObject_2$p, templateObject_3$h, templateObject_4$c, templateObject_5$7, templateObject_6$7, templateObject_7$2, templateObject_8$2;
3755
3849
 
3756
3850
  var Padding = styled__default.default.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n padding: 20px;\n ", "\n"], ["\n padding: 20px;\n ", "\n"])), SharedStyles);
3757
3851
  var templateObject_1$H;
@@ -3820,23 +3914,23 @@ function skuSelectStyles(props) {
3820
3914
  return __assign(__assign({}, provided), props.containerStyles);
3821
3915
  },
3822
3916
  clearIndicator: function (provided, state) {
3823
- return __assign(__assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color), ':hover': {
3824
- color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color),
3917
+ return __assign(__assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors$1.select.clearIcon.color), ':hover': {
3918
+ color: getThemeColor(props, 'select.clearIcon.color', colors$1.select.clearIcon.color),
3825
3919
  } }), props.clearIndicatorStyles);
3826
3920
  },
3827
3921
  dropdownIndicator: function (provided, state) {
3828
3922
  var styles = {
3829
3923
  color: props.error
3830
- ? getThemeColor(props, 'select.dropdownIcon.error.color', colors.select.dropdownIcon.error.color)
3831
- : getThemeColor(props, 'select.dropdownIcon.color', colors.select.dropdownIcon.color),
3924
+ ? getThemeColor(props, 'select.dropdownIcon.error.color', colors$1.select.dropdownIcon.error.color)
3925
+ : getThemeColor(props, 'select.dropdownIcon.color', colors$1.select.dropdownIcon.color),
3832
3926
  ':hover': {
3833
3927
  color: props.error
3834
- ? getThemeColor(props, 'select.dropdownIcon.error.color', colors.select.dropdownIcon.error.color)
3835
- : getThemeColor(props, 'select.dropdownIcon.color', colors.select.dropdownIcon.color),
3928
+ ? getThemeColor(props, 'select.dropdownIcon.error.color', colors$1.select.dropdownIcon.error.color)
3929
+ : getThemeColor(props, 'select.dropdownIcon.color', colors$1.select.dropdownIcon.color),
3836
3930
  },
3837
3931
  };
3838
3932
  if (state.isDisabled) {
3839
- styles['color'] = getThemeColor(props, 'select.dropdownIcon.disabled', colors.select.dropdownIcon.disabled);
3933
+ styles['color'] = getThemeColor(props, 'select.dropdownIcon.disabled', colors$1.select.dropdownIcon.disabled);
3840
3934
  }
3841
3935
  return __assign(__assign(__assign({}, provided), styles), props.dropdownIndicatorStyles);
3842
3936
  },
@@ -3846,8 +3940,8 @@ function skuSelectStyles(props) {
3846
3940
  },
3847
3941
  input: function (provided, state) {
3848
3942
  return __assign(__assign(__assign({}, provided), { height: 'auto', borderColor: props.error
3849
- ? getThemeColor(props, 'select.error.border', colors.select.error.border)
3850
- : getThemeColor(props, 'select.border', colors.select.border) }), props.inputStyles);
3943
+ ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
3944
+ : getThemeColor(props, 'select.border', colors$1.select.border) }), props.inputStyles);
3851
3945
  },
3852
3946
  control: function (provided, state) {
3853
3947
  var styles = {
@@ -3857,8 +3951,8 @@ function skuSelectStyles(props) {
3857
3951
  styles['borderWidth'] = '1px';
3858
3952
  styles['borderStyle'] = 'solid';
3859
3953
  styles['borderColor'] = props.error
3860
- ? getThemeColor(props, 'select.error.border', colors.select.error.border)
3861
- : getThemeColor(props, 'select.active.border', colors.select.active.border);
3954
+ ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
3955
+ : getThemeColor(props, 'select.active.border', colors$1.select.active.border);
3862
3956
  styles['boxShadow'] = "\n 1px 1px 0px ".concat(styles['borderColor'], ",\n -1px -1px 0px ").concat(styles['borderColor'], ",\n 1px -1px 0px ").concat(styles['borderColor'], ",\n -1px 1px 0px ").concat(styles['borderColor'], "\n ");
3863
3957
  if (state.selectProps.menuPlacement === 'bottom') {
3864
3958
  styles['borderBottomRightRadius'] = 0;
@@ -3872,31 +3966,31 @@ function skuSelectStyles(props) {
3872
3966
  else if (!state.menuIsOpen && state.isFocused) {
3873
3967
  styles['borderWidth'] = '1px';
3874
3968
  styles['borderColor'] = props.error
3875
- ? getThemeColor(props, 'select.error.border', colors.select.error.border)
3876
- : getThemeColor(props, 'select.active.border', colors.select.active.border);
3969
+ ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
3970
+ : getThemeColor(props, 'select.active.border', colors$1.select.active.border);
3877
3971
  styles['boxShadow'] = "0 0 0 1px ".concat(props.error
3878
- ? getThemeColor(props, 'select.error.border', colors.select.error.border)
3879
- : getThemeColor(props, 'select.active.border', colors.select.active.border));
3972
+ ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
3973
+ : getThemeColor(props, 'select.active.border', colors$1.select.active.border));
3880
3974
  }
3881
3975
  else if (state.isDisabled) {
3882
- styles['backgroundColor'] = getThemeColor(props, 'select.disabled.background', colors.select.disabled.background);
3883
- styles['borderColor'] = getThemeColor(props, 'select.disabled.border', colors.select.disabled.border);
3976
+ styles['backgroundColor'] = getThemeColor(props, 'select.disabled.background', colors$1.select.disabled.background);
3977
+ styles['borderColor'] = getThemeColor(props, 'select.disabled.border', colors$1.select.disabled.border);
3884
3978
  }
3885
3979
  else {
3886
3980
  styles['borderColor'] = props.error
3887
- ? getThemeColor(props, 'select.error.border', colors.select.error.border)
3981
+ ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
3888
3982
  : provided.borderColor;
3889
3983
  }
3890
3984
  return (__assign(__assign(__assign(__assign({}, provided), styles), { ':hover': {
3891
3985
  borderColor: props.error
3892
- ? getThemeColor(props, 'select.error.border', colors.select.error.border)
3893
- : getThemeColor(props, 'select.active.border', colors.select.active.border),
3986
+ ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
3987
+ : getThemeColor(props, 'select.active.border', colors$1.select.active.border),
3894
3988
  } }), props.controlStyles));
3895
3989
  },
3896
3990
  menu: function (provided, state) {
3897
3991
  var borderColor = props.error
3898
- ? getThemeColor(props, 'select.error.border', colors.select.error.border)
3899
- : getThemeColor(props, 'select.active.border', colors.select.active.border);
3992
+ ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
3993
+ : getThemeColor(props, 'select.active.border', colors$1.select.active.border);
3900
3994
  var styles = {
3901
3995
  zIndex: 10,
3902
3996
  position: props.menuRelative ? 'relative' : provided.position,
@@ -3938,7 +4032,7 @@ function skuSelectStyles(props) {
3938
4032
  },
3939
4033
  };
3940
4034
  }
3941
- var skuSelectThemeByProps = function (props) { return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors.primary0), primary75: getThemeColor(props, 'primary0', colors.primary0), primary50: getThemeColor(props, 'primary10', colors.primary10), primary: getThemeColor(props, 'primary', colors.primary), neutral20: getThemeColor(props, 'select.border', colors.select.border), neutral30: getThemeColor(props, 'select.border', colors.select.border), neutral80: getThemeColor(props, 'textbody', colors.textbody), neutral90: getThemeColor(props, 'textbody', colors.textbody) }) })); }; };
4035
+ var skuSelectThemeByProps = function (props) { return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors$1.primary0), primary75: getThemeColor(props, 'primary0', colors$1.primary0), primary50: getThemeColor(props, 'primary10', colors$1.primary10), primary: getThemeColor(props, 'primary', colors$1.primary), neutral20: getThemeColor(props, 'select.border', colors$1.select.border), neutral30: getThemeColor(props, 'select.border', colors$1.select.border), neutral80: getThemeColor(props, 'textbody', colors$1.textbody), neutral90: getThemeColor(props, 'textbody', colors$1.textbody) }) })); }; };
3942
4036
  // duplicate styles to overide .resku global styles
3943
4037
  // : React.ForwardRefExoticComponent<SKUSelectProps & React.RefAttributes<BaseSelect>>
3944
4038
  // React.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | ... 27 more ... | "form"> & InexactPartial<...> & InexactPartial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & React.RefAttributes<...>>
@@ -4045,8 +4139,8 @@ var SidePanel = function (_a) {
4045
4139
  backdrop && visible ? React__default.default.createElement(Backdrop, null) : null);
4046
4140
  };
4047
4141
  var NameAndPosition = styled__default.default.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: inline-block;\n width: 90%;\n"], ["\n display: inline-block;\n width: 90%;\n"])));
4048
- var Name = styled__default.default.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
4049
- var Position = styled__default.default.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-size: .8em;\n"], ["\n font-size: .8em;\n"])));
4142
+ var Name = styled__default.default.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
4143
+ var Position = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-size: .8em;\n"], ["\n font-size: .8em;\n"])));
4050
4144
  var Email = styled__default.default.a(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: .8em;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n"], ["\n font-size: .8em;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n"])));
4051
4145
  var Contact = styled__default.default.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n &&& {\n display: flex;\n flex-basis: 50%;\n margin-bottom: 15px;\n ", "\n }\n"], ["\n &&& {\n display: flex;\n flex-basis: 50%;\n margin-bottom: 15px;\n ", "\n }\n"])), SizerCss);
4052
4146
  var PanelContact = function (_a) {
@@ -4083,12 +4177,12 @@ var PanelTileContact = function (_a) {
4083
4177
  p.phone_extension && 'x' + p.phone_extension) : '';
4084
4178
  }) : null)));
4085
4179
  };
4086
- var templateObject_1$C, templateObject_2$m, templateObject_3$h, templateObject_4$c, templateObject_5$6, templateObject_6$6;
4180
+ var templateObject_1$C, templateObject_2$m, templateObject_3$g, templateObject_4$b, templateObject_5$6, templateObject_6$6;
4087
4181
 
4088
4182
  var sharedStyle = styled.css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n line-height: 1.125rem;\n box-sizing: border-box;\n"], ["\n line-height: 1.125rem;\n box-sizing: border-box;\n"])));
4089
4183
  var optionalPadding = styled.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n &:first-child {\n padding-left: ", ";\n }\n\n &:last-child {\n padding-right: ", ";\n }\n"], ["\n &:first-child {\n padding-left: ", ";\n }\n\n &:last-child {\n padding-right: ", ";\n }\n"])), function (props) { return props.padded ? "20px" : "inherit"; }, function (props) { return props.padded ? "20px" : "inherit"; });
4090
- var Table = styled__default.default.table.attrs(function () { return ({ cellPadding: 0, cellSpacing: 0 }); })(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n &&& {\n background-color: white;\n border: none;\n border-spacing: 0;\n width: 100%;\n table-layout: auto;\n display: table;\n font-family: 'skufont-regular', sans-serif;\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n background-color: white;\n border: none;\n border-spacing: 0;\n width: 100%;\n table-layout: auto;\n display: table;\n font-family: 'skufont-regular', sans-serif;\n ", "\n ", "\n ", "\n }\n"])), sharedStyle, SizerCss, SharedStyles);
4091
- var TH = styled__default.default.th(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n &&& {\n background-color: #dae9ee;\n border: none;\n border-spacing: 0;\n color: ", ";\n font-size: 1rem;\n padding: 0.5rem 0.625rem 0.625rem;\n display: table-cell;\n text-align: left;\n font-family: \"skufont-demibold\", sans-serif;\n ", "\n &:hover {\n background-color: ", ";\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n background-color: #dae9ee;\n border: none;\n border-spacing: 0;\n color: ", ";\n font-size: 1rem;\n padding: 0.5rem 0.625rem 0.625rem;\n display: table-cell;\n text-align: left;\n font-family: \"skufont-demibold\", sans-serif;\n ", "\n &:hover {\n background-color: ", ";\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"])), function (props) { return props.clickable ? "#00889B" : "#123952"; }, function (props) { return props.sticky ? "position: sticky; top: ".concat(props.stickyTop ? props.stickyTop : 0, ";") : null; }, function (props) { return props.clickable ? "#d2e6ec" : "#dae9ee"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
4184
+ var Table = styled__default.default.table.attrs(function () { return ({ cellPadding: 0, cellSpacing: 0 }); })(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n &&& {\n background-color: white;\n border: none;\n border-spacing: 0;\n width: 100%;\n table-layout: auto;\n display: table;\n font-family: 'skufont-regular', sans-serif;\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n background-color: white;\n border: none;\n border-spacing: 0;\n width: 100%;\n table-layout: auto;\n display: table;\n font-family: 'skufont-regular', sans-serif;\n ", "\n ", "\n ", "\n }\n"])), sharedStyle, SizerCss, SharedStyles);
4185
+ var TH = styled__default.default.th(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n &&& {\n background-color: #dae9ee;\n border: none;\n border-spacing: 0;\n color: ", ";\n font-size: 1rem;\n padding: 0.5rem 0.625rem 0.625rem;\n display: table-cell;\n text-align: left;\n font-family: \"skufont-demibold\", sans-serif;\n ", "\n &:hover {\n background-color: ", ";\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n background-color: #dae9ee;\n border: none;\n border-spacing: 0;\n color: ", ";\n font-size: 1rem;\n padding: 0.5rem 0.625rem 0.625rem;\n display: table-cell;\n text-align: left;\n font-family: \"skufont-demibold\", sans-serif;\n ", "\n &:hover {\n background-color: ", ";\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"])), function (props) { return props.clickable ? "#00889B" : "#123952"; }, function (props) { return props.sticky ? "position: sticky; top: ".concat(props.stickyTop ? props.stickyTop : 0, ";") : null; }, function (props) { return props.clickable ? "#d2e6ec" : "#dae9ee"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
4092
4186
  var TD$1 = styled__default.default.td(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n &&& {\n border: 0;\n color: #52585c;\n font-size: .875rem;\n line-height: 1.75rem;\n display: table-cell;\n padding: 0.5625rem 0.625rem;\n &:hover {\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n border: 0;\n color: #52585c;\n font-size: .875rem;\n line-height: 1.75rem;\n display: table-cell;\n padding: 0.5625rem 0.625rem;\n &:hover {\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"])), function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
4093
4187
  var TR = styled__default.default.tr(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n &&& {\n ", "\n &:hover {\n background: #EDF2F4;\n }\n ", "\n }\n"], ["\n &&& {\n ", "\n &:hover {\n background: #EDF2F4;\n }\n ", "\n }\n"])), SizerCss, function (p) { return p.selected && 'background: #EDF2F4;'; });
4094
4188
  var THead = styled__default.default.thead(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n &&& {\n ", "\n }\n"], ["\n &&& {\n ", "\n }\n"])), SizerCss);
@@ -4110,7 +4204,7 @@ var THSorted = function (_a) {
4110
4204
  " ",
4111
4205
  children));
4112
4206
  };
4113
- var templateObject_1$B, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$5, templateObject_6$5, templateObject_7$1, templateObject_8$1, templateObject_9$1;
4207
+ var templateObject_1$B, templateObject_2$l, templateObject_3$f, templateObject_4$a, templateObject_5$5, templateObject_6$5, templateObject_7$1, templateObject_8$1, templateObject_9$1;
4114
4208
 
4115
4209
  var useClickOutside = function (props) {
4116
4210
  var ref = props.ref, _a = props.eventType, eventType = _a === void 0 ? 'mousedown' : _a, onClick = props.onClick, onCleanup = props.onCleanup;
@@ -4365,8 +4459,8 @@ var useFallbackRef = function (forwardedRef) {
4365
4459
 
4366
4460
  var Overlay = styled__default.default.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n &&& {\n position: fixed;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n background: rgba(42, 56, 63, 0.45);\n display: flex;\n z-index: ", ";\n margin-left: auto;\n margin-right: auto;\n }\n"], ["\n &&& {\n position: fixed;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n background: rgba(42, 56, 63, 0.45);\n display: flex;\n z-index: ", ";\n margin-left: auto;\n margin-right: auto;\n }\n"])), function (p) { return p.zIndex || 999; });
4367
4461
  var PopupWindow = styled__default.default.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n &&& {\n width: ", ";\n height: ", "; \n margin: 0 !important;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: fixed;\n ", "\n overflow-y: hidden;\n display: block;\n z-index: ", ";\n\n padding: ", ";\n border: 1px solid #CCD5DA;\n background-color: #fefefe;\n border-radius: 3px;\n\n &:last-child {\n margin-bottom: 0;\n }\n .popup-content {\n overflow-y: auto;\n height: 90%;\n }\n ", "\n ", "\n }\n"], ["\n &&& {\n width: ", ";\n height: ", "; \n margin: 0 !important;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: fixed;\n ", "\n overflow-y: hidden;\n display: block;\n z-index: ", ";\n\n padding: ", ";\n border: 1px solid #CCD5DA;\n background-color: #fefefe;\n border-radius: 3px;\n\n &:last-child {\n margin-bottom: 0;\n }\n .popup-content {\n overflow-y: auto;\n height: 90%;\n }\n ", "\n ", "\n }\n"])), function (props) { var _a; return (_a = props.width) !== null && _a !== void 0 ? _a : '90%'; }, function (props) { var _a; return (_a = props.height) !== null && _a !== void 0 ? _a : '75%'; }, function (props) { return props.height ? '' : 'max-height: 700px;'; }, function (p) { return p.zIndex || 1006; }, function (props) { var _a; return (_a = props.padding) !== null && _a !== void 0 ? _a : '1rem'; }, SharedStyles, SizerCss);
4368
- var PopupHeader = styled__default.default.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n &&& {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n background: white;\n padding: 3px;\n z-index: 99;\n .title {\n font-size: 1.8rem;\n font-weight: 500;\n text-align: left;\n align-self: center;\n padding-top: 3px;\n padding-left: 3px;\n border-bottom: none;\n font-family: \"skufont-demibold\",sans-serif;\n color: #123952;\n }\n ", "\n ", "\n }\n"], ["\n &&& {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n background: white;\n padding: 3px;\n z-index: 99;\n .title {\n font-size: 1.8rem;\n font-weight: 500;\n text-align: left;\n align-self: center;\n padding-top: 3px;\n padding-left: 3px;\n border-bottom: none;\n font-family: \"skufont-demibold\",sans-serif;\n color: #123952;\n }\n ", "\n ", "\n }\n"])), SharedStyles, SizerCss);
4369
- var ChevronButton = styled__default.default(ChevronIcon)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n && {\n position: absolute;\n width: 120px;\n height: 120px;\n ", "\n top: calc(50% - 120px/2 + 22.5px);\n }\n"], ["\n && {\n position: absolute;\n width: 120px;\n height: 120px;\n ", "\n top: calc(50% - 120px/2 + 22.5px);\n }\n"])), function (props) { return props.left ? 'left: 0px;' : 'right: 0px;'; });
4462
+ var PopupHeader = styled__default.default.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n &&& {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n background: white;\n padding: 3px;\n z-index: 99;\n .title {\n font-size: 1.8rem;\n font-weight: 500;\n text-align: left;\n align-self: center;\n padding-top: 3px;\n padding-left: 3px;\n border-bottom: none;\n font-family: \"skufont-demibold\",sans-serif;\n color: #123952;\n }\n ", "\n ", "\n }\n"], ["\n &&& {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n background: white;\n padding: 3px;\n z-index: 99;\n .title {\n font-size: 1.8rem;\n font-weight: 500;\n text-align: left;\n align-self: center;\n padding-top: 3px;\n padding-left: 3px;\n border-bottom: none;\n font-family: \"skufont-demibold\",sans-serif;\n color: #123952;\n }\n ", "\n ", "\n }\n"])), SharedStyles, SizerCss);
4463
+ var ChevronButton = styled__default.default(ChevronIcon)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n && {\n position: absolute;\n width: 120px;\n height: 120px;\n ", "\n top: calc(50% - 120px/2 + 22.5px);\n }\n"], ["\n && {\n position: absolute;\n width: 120px;\n height: 120px;\n ", "\n top: calc(50% - 120px/2 + 22.5px);\n }\n"])), function (props) { return props.left ? 'left: 0px;' : 'right: 0px;'; });
4370
4464
  var PopupContainer = function (_a) {
4371
4465
  var children = _a.children;
4372
4466
  var ref = React__default.default.useRef(document$1.createElement('div'));
@@ -4439,12 +4533,12 @@ var ChevronPopupWindow = React__default.default.forwardRef(function (props, ref)
4439
4533
  var ChevronPopup = function (props) {
4440
4534
  return React__default.default.createElement(Popup, __assign({ PopupWindowComponent: ChevronPopupWindow }, props));
4441
4535
  };
4442
- var templateObject_1$A, templateObject_2$k, templateObject_3$f, templateObject_4$a;
4536
+ var templateObject_1$A, templateObject_2$k, templateObject_3$e, templateObject_4$9;
4443
4537
 
4444
4538
  var GridTableContainer = styled__default.default.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display:grid;\n grid-template-rows: ", ";\n grid-gap: ", ";\n width:", ";\n margin-top: 24px;\n margin-bottom: 24px;\n background: white;\n overflow: scroll;\n .droppable {\n display:grid;\n grid-template-rows: ", ";\n grid-gap: ", ";\n }\n ", "\n"], ["\n display:grid;\n grid-template-rows: ", ";\n grid-gap: ", ";\n width:", ";\n margin-top: 24px;\n margin-bottom: 24px;\n background: white;\n overflow: scroll;\n .droppable {\n display:grid;\n grid-template-rows: ", ";\n grid-gap: ", ";\n }\n ", "\n"])), function (props) { return props.gridTemplateRows ? props.gridTemplateRows : 'auto'; }, function (props) { return props.gridRowGap ? props.gridRowGap : "16px"; }, function (props) { return props.width ? props.width : '100%'; }, function (props) { return props.gridTemplateRows ? props.gridTemplateRows : 'auto'; }, function (props) { return props.gridRowGap ? props.gridRowGap : "16px"; }, SharedStyles);
4445
4539
  var GridRow = styled__default.default.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display:grid;\n grid-template-columns: ", ";\n grid-gap: ", ";\n width:100%;\n background: white;\n ", "\n"], ["\n display:grid;\n grid-template-columns: ", ";\n grid-gap: ", ";\n width:100%;\n background: white;\n ", "\n"])), function (props) { return props.gridTemplateColumns; }, function (props) { return props.gridColumnGap ? props.gridColumnGap : "16px"; }, SharedStyles);
4446
- var GridCell = styled__default.default.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject([" \n background: white;\n width: ", ";\n font-family: ", ";\n color: ", ";\n text-align: ", ";\n"], [" \n background: white;\n width: ", ";\n font-family: ", ";\n color: ", ";\n text-align: ", ";\n"])), function (props) { return props.width ? props.width : 'auto'; }, function (props) { return props.header ? themeOptions.fontFamilies.bold : fontStyles.p.medium; }, function (props) { return props.header ? errors.main : neutrals.bodyText; }, function (props) { return props.centerContent ? 'center' : 'left'; });
4447
- var FieldError = styled__default.default.p(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n margin:0;\n"], ["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n margin:0;\n"])), fontStyles.p.small.fontFamily, fontStyles.p.small.fontSize, errors['40']);
4540
+ var GridCell = styled__default.default.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject([" \n background: white;\n width: ", ";\n font-family: ", ";\n color: ", ";\n text-align: ", ";\n"], [" \n background: white;\n width: ", ";\n font-family: ", ";\n color: ", ";\n text-align: ", ";\n"])), function (props) { return props.width ? props.width : 'auto'; }, function (props) { return props.header ? themeOptions.fontFamilies.bold : fontStyles.p.medium; }, function (props) { return props.header ? errors.main : neutrals.bodyText; }, function (props) { return props.centerContent ? 'center' : 'left'; });
4541
+ var FieldError = styled__default.default.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n margin:0;\n"], ["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n margin:0;\n"])), fontStyles.p.small.fontFamily, fontStyles.p.small.fontSize, errors['40']);
4448
4542
  var defaultTransform = function (v) { return v.target ? v.target.value : v.currentTarget ? v.currentTarget.value : v.value; };
4449
4543
  var Column = function (_a) {
4450
4544
  _a.name; var title = _a.title; _a.children; var centerContent = _a.centerContent; _a.transform;
@@ -4627,14 +4721,14 @@ function GridTable(_a) {
4627
4721
  Adding && NewRow,
4628
4722
  onAdd && !Adding && AddNew)));
4629
4723
  }
4630
- var templateObject_1$z, templateObject_2$j, templateObject_3$e, templateObject_4$9;
4724
+ var templateObject_1$z, templateObject_2$j, templateObject_3$d, templateObject_4$8;
4631
4725
 
4632
4726
  var tabSizes = {
4633
4727
  small: styled.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n font-size: 0.9rem;\n padding: 0.5rem 5px;\n margin: 0;\n "], ["\n font-size: 0.9rem;\n padding: 0.5rem 5px;\n margin: 0;\n "]))),
4634
4728
  medium: styled.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-size: inherit;\n padding: 1rem 12px;\n margin: 0 15px 0 0;\n "], ["\n font-size: inherit;\n padding: 1rem 12px;\n margin: 0 15px 0 0;\n "]))),
4635
4729
  };
4636
- var TabBar = styled__default.default.ul(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n &&& {\n display: block;\n font-size: 16px;\n font-family: 'skufont-demibold', sans-serif;\n margin: 0;\n margin-bottom: ", ";\n padding: 0;\n ", "\n }\n"], ["\n &&& {\n display: block;\n font-size: 16px;\n font-family: 'skufont-demibold', sans-serif;\n margin: 0;\n margin-bottom: ", ";\n padding: 0;\n ", "\n }\n"])), function (props) { return props.padded ? "20px" : 0; }, SharedStyles);
4637
- var Tab = styled__default.default.li(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n &&& {\n cursor: pointer;\n display: inline-block;\n border-bottom: ", ";\n color: #222222;\n opacity: ", ";\n list-style: none;\n margin-bottom: 0 !important;\n position: relative;\n padding: 1rem 12px;\n margin-right: 15px;\n ", "\n\n ", "\n }\n"], ["\n &&& {\n cursor: pointer;\n display: inline-block;\n border-bottom: ", ";\n color: #222222;\n opacity: ", ";\n list-style: none;\n margin-bottom: 0 !important;\n position: relative;\n padding: 1rem 12px;\n margin-right: 15px;\n ", "\n\n ", "\n }\n"
4730
+ var TabBar = styled__default.default.ul(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n &&& {\n display: block;\n font-size: 16px;\n font-family: 'skufont-demibold', sans-serif;\n margin: 0;\n margin-bottom: ", ";\n padding: 0;\n ", "\n }\n"], ["\n &&& {\n display: block;\n font-size: 16px;\n font-family: 'skufont-demibold', sans-serif;\n margin: 0;\n margin-bottom: ", ";\n padding: 0;\n ", "\n }\n"])), function (props) { return props.padded ? "20px" : 0; }, SharedStyles);
4731
+ var Tab = styled__default.default.li(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &&& {\n cursor: pointer;\n display: inline-block;\n border-bottom: ", ";\n color: #222222;\n opacity: ", ";\n list-style: none;\n margin-bottom: 0 !important;\n position: relative;\n padding: 1rem 12px;\n margin-right: 15px;\n ", "\n\n ", "\n }\n"], ["\n &&& {\n cursor: pointer;\n display: inline-block;\n border-bottom: ", ";\n color: #222222;\n opacity: ", ";\n list-style: none;\n margin-bottom: 0 !important;\n position: relative;\n padding: 1rem 12px;\n margin-right: 15px;\n ", "\n\n ", "\n }\n"
4638
4732
  /*
4639
4733
 
4640
4734
  Here's how you use this:
@@ -4664,7 +4758,7 @@ var Tab = styled__default.default.li(templateObject_4$8 || (templateObject_4$8 =
4664
4758
  // </div>
4665
4759
  // }
4666
4760
  ])), function (props) { return props.selected
4667
- ? "5px solid ".concat(props.variant === 'secondary' ? colors.secondary1.main : colors.primary1.main)
4761
+ ? "5px solid ".concat(props.variant === 'secondary' ? colors$1.secondary1.main : colors$1.primary1.main)
4668
4762
  : "none"; }, function (props) { return props.selected ? "1" : ".5"; }, SharedStyles, function (props) { var _a; return tabSizes[(_a = props.size) !== null && _a !== void 0 ? _a : 'medium']; });
4669
4763
  var Tabs = /** @class */ (function (_super) {
4670
4764
  __extends(Tabs, _super);
@@ -4722,7 +4816,7 @@ var Tabs = /** @class */ (function (_super) {
4722
4816
  };
4723
4817
  return Tabs;
4724
4818
  }(React.Component));
4725
- var templateObject_1$y, templateObject_2$i, templateObject_3$d, templateObject_4$8;
4819
+ var templateObject_1$y, templateObject_2$i, templateObject_3$c, templateObject_4$7;
4726
4820
 
4727
4821
  var toggleSizes$1 = {
4728
4822
  small: {
@@ -4760,8 +4854,8 @@ var getSizeStyle = function (style, defaults) {
4760
4854
  };
4761
4855
  };
4762
4856
  var Wrapper$3 = styled__default.default.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n max-width: 600px;\n justify-content: flex-start;\n width: 100%; \n }"], ["\n &&& {\n display: inline-flex;\n max-width: 600px;\n justify-content: flex-start;\n width: 100%; \n }"])));
4763
- var Container = styled__default.default.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n &&& {\n background: ", ";\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n width: ", ";\n ", "\n }"], ["\n &&& {\n background: ", ";\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n width: ", ";\n ", "\n }"])), function (props) { return getThemeColor(props, 'teal.20', colors.teal['20']); }, function (props) { return props.stretch ? "100%" : "auto"; }, SharedStyles);
4764
- var ToggleLink = styled__default.default.a(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n &&& {\n font-family: 'skufont-medium', sans-serif;\n font-size: ", ";\n border-radius: 30px;\n display: flex;\n align-content: center;\n padding: ", ";\n height: auto;\n line-height: ", ";\n width: ", ";\n justify-content: center;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n ", "\n }"], ["\n &&& {\n font-family: 'skufont-medium', sans-serif;\n font-size: ", ";\n border-radius: 30px;\n display: flex;\n align-content: center;\n padding: ", ";\n height: auto;\n line-height: ", ";\n width: ", ";\n justify-content: center;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n ", "\n }"])), function (props) { return getSizeStyle('font-size', '1rem')({ size: props.size }); }, function (props) { return getSizeStyle('padding', '8px 16px')({ size: props.size }); }, function (props) { return getSizeStyle('line-height', '24px')({ size: props.size }); }, function (props) { return props.stretch ? "50%" : "auto"; }, function (props) { return props.selected ? getThemeColor(props, 'teal.main', colors.teal.main) : getThemeColor(props, 'teal.20', colors.teal['20']); }, function (props) { return props.selected ? "white" : getThemeColor(props, 'teal.main', colors.teal.main); }, SharedStyles);
4857
+ var Container = styled__default.default.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n &&& {\n background: ", ";\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n width: ", ";\n ", "\n }"], ["\n &&& {\n background: ", ";\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n width: ", ";\n ", "\n }"])), function (props) { return getThemeColor(props, 'teal.20', colors$1.teal['20']); }, function (props) { return props.stretch ? "100%" : "auto"; }, SharedStyles);
4858
+ var ToggleLink = styled__default.default.a(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n &&& {\n font-family: 'skufont-medium', sans-serif;\n font-size: ", ";\n border-radius: 30px;\n display: flex;\n align-content: center;\n padding: ", ";\n height: auto;\n line-height: ", ";\n width: ", ";\n justify-content: center;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n ", "\n }"], ["\n &&& {\n font-family: 'skufont-medium', sans-serif;\n font-size: ", ";\n border-radius: 30px;\n display: flex;\n align-content: center;\n padding: ", ";\n height: auto;\n line-height: ", ";\n width: ", ";\n justify-content: center;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n ", "\n }"])), function (props) { return getSizeStyle('font-size', '1rem')({ size: props.size }); }, function (props) { return getSizeStyle('padding', '8px 16px')({ size: props.size }); }, function (props) { return getSizeStyle('line-height', '24px')({ size: props.size }); }, function (props) { return props.stretch ? "50%" : "auto"; }, function (props) { return props.selected ? getThemeColor(props, 'teal.main', colors$1.teal.main) : getThemeColor(props, 'teal.20', colors$1.teal['20']); }, function (props) { return props.selected ? "white" : getThemeColor(props, 'teal.main', colors$1.teal.main); }, SharedStyles);
4765
4859
  var Toggle = function (_a) {
4766
4860
  var _b = _a.size, size = _b === void 0 ? 'medium' : _b, props = __rest(_a, ["size"]);
4767
4861
  return React__default.default.createElement(Wrapper$3, __assign({ size: size }, props),
@@ -4769,7 +4863,7 @@ var Toggle = function (_a) {
4769
4863
  return React__default.default.cloneElement(child, { size: size });
4770
4864
  })));
4771
4865
  };
4772
- var templateObject_1$x, templateObject_2$h, templateObject_3$c;
4866
+ var templateObject_1$x, templateObject_2$h, templateObject_3$b;
4773
4867
 
4774
4868
  var Textarea = styled__default.default.textarea(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), function (p) {
4775
4869
  var styles = {
@@ -4861,8 +4955,8 @@ var templateObject_1$u;
4861
4955
 
4862
4956
  var ProductInfo = styled__default.default.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: 100%;\n background: rgba(0, 0, 0, 0.55) !important;\n position: absolute;\n left: 0;\n bottom: 0;\n opacity: 1;\n color: #fff;\n padding: 10px;\n font-size: 14px;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n height: 110px;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n -moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b0000000',GradientType=0 );\n"], ["\n width: 100%;\n background: rgba(0, 0, 0, 0.55) !important;\n position: absolute;\n left: 0;\n bottom: 0;\n opacity: 1;\n color: #fff;\n padding: 10px;\n font-size: 14px;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n height: 110px;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n -moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b0000000',GradientType=0 );\n"])));
4863
4957
  var ProductName = styled__default.default.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 1.2rem;\n font-weight: bold;\n display: none;\n"], ["\n font-size: 1.2rem;\n font-weight: bold;\n display: none;\n"])));
4864
- var SupplierName = styled__default.default.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: .9rem;\n font-weight: bold;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n font-size: .9rem;\n font-weight: bold;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
4865
- var ProductWrapper = styled__default.default.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: 100%;\n height: 17rem;\n overflow: hidden;\n background-image: url(\"", "\");\n background-repeat: no-repeat;\n background-position: center top;\n background-size: cover;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n &:hover ", " {\n height: 100%;\n }\n &:hover ", " {\n display: block;\n }\n &:hover ", " {\n overflow: visible;\n white-space: normal;\n }\n ", "\n"], ["\n width: 100%;\n height: 17rem;\n overflow: hidden;\n background-image: url(\"", "\");\n background-repeat: no-repeat;\n background-position: center top;\n background-size: cover;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n &:hover ", " {\n height: 100%;\n }\n &:hover ", " {\n display: block;\n }\n &:hover ", " {\n overflow: visible;\n white-space: normal;\n }\n ", "\n"])), function (props) { return props.picture; }, ProductInfo, ProductName, SupplierName, SharedStyles);
4958
+ var SupplierName = styled__default.default.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n font-size: .9rem;\n font-weight: bold;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n font-size: .9rem;\n font-weight: bold;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
4959
+ var ProductWrapper = styled__default.default.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 100%;\n height: 17rem;\n overflow: hidden;\n background-image: url(\"", "\");\n background-repeat: no-repeat;\n background-position: center top;\n background-size: cover;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n &:hover ", " {\n height: 100%;\n }\n &:hover ", " {\n display: block;\n }\n &:hover ", " {\n overflow: visible;\n white-space: normal;\n }\n ", "\n"], ["\n width: 100%;\n height: 17rem;\n overflow: hidden;\n background-image: url(\"", "\");\n background-repeat: no-repeat;\n background-position: center top;\n background-size: cover;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n &:hover ", " {\n height: 100%;\n }\n &:hover ", " {\n display: block;\n }\n &:hover ", " {\n overflow: visible;\n white-space: normal;\n }\n ", "\n"])), function (props) { return props.picture; }, ProductInfo, ProductName, SupplierName, SharedStyles);
4866
4960
  var Product = function (props) {
4867
4961
  return React__default.default.createElement(ProductWrapper, __assign({}, props),
4868
4962
  React__default.default.createElement(ProductInfo, null,
@@ -4873,12 +4967,12 @@ var Product = function (props) {
4873
4967
  props.price && props.currency ? props.currency + "$" + props.price : null,
4874
4968
  props.rating ? React__default.default.createElement(StarRating, { rating: props.rating }) : null));
4875
4969
  };
4876
- var templateObject_1$t, templateObject_2$g, templateObject_3$b, templateObject_4$7;
4970
+ var templateObject_1$t, templateObject_2$g, templateObject_3$a, templateObject_4$6;
4877
4971
 
4878
4972
  var ArtworkName = styled__default.default.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n font-size: .9rem;\n font-weight: bold;\n"], ["\n font-size: .9rem;\n font-weight: bold;\n"])));
4879
- var UpdateDate = styled__default.default.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n color: ", ";\n"])), function (props) { return getThemeFontSize(props, 'tiny'); }, function (props) { return getThemeColor(props, 'textbody', colors.textbody); });
4880
- var ArtworkControls = styled__default.default.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n padding: 10px;\n width: 100%;\n box-sizing: border-box;\n opacity: 0;\n transition: .3s all;\n"], ["\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n padding: 10px;\n width: 100%;\n box-sizing: border-box;\n opacity: 0;\n transition: .3s all;\n"])));
4881
- var ArtworkInfo = styled__default.default.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n padding-left: ", ";\n width: 100%;\n position: absolute;\n height: 3rem;\n left: 0;\n ", " : 0;\n opacity: 1;\n color: black;\n font-size: 14px;\n box-sizing: border-box;\n word-wrap: break-word;\n -moz-box-sizing: border-box;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n"], ["\n padding-left: ", ";\n width: 100%;\n position: absolute;\n height: 3rem;\n left: 0;\n ", " : 0;\n opacity: 1;\n color: black;\n font-size: 14px;\n box-sizing: border-box;\n word-wrap: break-word;\n -moz-box-sizing: border-box;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n"])), function (props) { return props.withPicture ? 0 : "4vw !important"; }, function (props) { return props.withPicture ? "bottom" : "top"; });
4973
+ var UpdateDate = styled__default.default.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n color: ", ";\n"])), function (props) { return getThemeFontSize(props, 'tiny'); }, function (props) { return getThemeColor(props, 'textbody', colors$1.textbody); });
4974
+ var ArtworkControls = styled__default.default.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n padding: 10px;\n width: 100%;\n box-sizing: border-box;\n opacity: 0;\n transition: .3s all;\n"], ["\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n padding: 10px;\n width: 100%;\n box-sizing: border-box;\n opacity: 0;\n transition: .3s all;\n"])));
4975
+ var ArtworkInfo = styled__default.default.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n padding-left: ", ";\n width: 100%;\n position: absolute;\n height: 3rem;\n left: 0;\n ", " : 0;\n opacity: 1;\n color: black;\n font-size: 14px;\n box-sizing: border-box;\n word-wrap: break-word;\n -moz-box-sizing: border-box;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n"], ["\n padding-left: ", ";\n width: 100%;\n position: absolute;\n height: 3rem;\n left: 0;\n ", " : 0;\n opacity: 1;\n color: black;\n font-size: 14px;\n box-sizing: border-box;\n word-wrap: break-word;\n -moz-box-sizing: border-box;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n"])), function (props) { return props.withPicture ? 0 : "4vw !important"; }, function (props) { return props.withPicture ? "bottom" : "top"; });
4882
4976
  var ArtworkWrapper = styled__default.default.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n min-height: 4rem;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n\n &:hover ", " {\n opacity: 1;\n }\n ", "\n"], ["\n width: 100%;\n height: ", ";\n min-height: 4rem;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n\n &:hover ", " {\n opacity: 1;\n }\n ", "\n"])), function (props) { return props.cssHeight > 0 ? props.cssHeight + "vw" : "auto"; }, ArtworkControls, SharedStyles);
4883
4977
  var ArtworkPicture = styled__default.default.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n width: 100%;\n height: calc(", "vw - 3.5rem);\n overflow: hidden;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);\n\n &:hover ", " {\n opacity: 1;\n }\n"], ["\n width: 100%;\n height: calc(", "vw - 3.5rem);\n overflow: hidden;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) { return props.cssHeight; }, ArtworkControls);
4884
4978
  function truncate(filename, max) {
@@ -4917,12 +5011,12 @@ var Artwork = function (_a) {
4917
5011
  "Updated ",
4918
5012
  props.date) : null));
4919
5013
  };
4920
- var templateObject_1$s, templateObject_2$f, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$4;
5014
+ var templateObject_1$s, templateObject_2$f, templateObject_3$9, templateObject_4$5, templateObject_5$4, templateObject_6$4;
4921
5015
 
4922
5016
  var TaskLabel = styled__default.default.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["display: flex; min-height: 25px; ", ""], ["display: flex; min-height: 25px; ", ""])), function (p) { return p.hasCheckbox ? "width: calc(100% - 24px);" : ''; });
4923
5017
  var TaskName = styled__default.default.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["flex-grow: 1; font-size:13px;"], ["flex-grow: 1; font-size:13px;"])));
4924
- var StyledTask = styled__default.default.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["margin-bottom: 1.5em; ", ""], ["margin-bottom: 1.5em; ", ""])), SharedStyles);
4925
- var TaskBody = styled__default.default.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["margin-left:34px;"], ["margin-left:34px;"])));
5018
+ var StyledTask = styled__default.default.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["margin-bottom: 1.5em; ", ""], ["margin-bottom: 1.5em; ", ""])), SharedStyles);
5019
+ var TaskBody = styled__default.default.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["margin-left:34px;"], ["margin-left:34px;"])));
4926
5020
  var Task = function (_a) {
4927
5021
  var taskName = _a.taskName, date = _a.date; _a.done; var assignee = _a.assignee, taskBody = _a.taskBody, _b = _a.initialChecked, initialChecked = _b === void 0 ? false : _b, onClickCheckbox = _a.onClickCheckbox, props = __rest(_a, ["taskName", "date", "done", "assignee", "taskBody", "initialChecked", "onClickCheckbox"]);
4928
5022
  var _c = React.useState(initialChecked), checked = _c[0], setChecked = _c[1];
@@ -4995,19 +5089,19 @@ var CalendarTask = React__default.default.forwardRef(function (_a, ref) {
4995
5089
  assignee ? "for " + assignee : null,
4996
5090
  assignee ? "on " : null)));
4997
5091
  });
4998
- var templateObject_1$r, templateObject_2$e, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$3;
5092
+ var templateObject_1$r, templateObject_2$e, templateObject_3$8, templateObject_4$4, templateObject_5$3, templateObject_6$3;
4999
5093
 
5000
- var PublisherWrapper = styled__default.default.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"], ["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"])), function (props) { return getThemeColor(props, "bgblue", colors.bgblue); });
5094
+ var PublisherWrapper = styled__default.default.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"], ["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"])), function (props) { return getThemeColor(props, "bgblue", colors$1.bgblue); });
5001
5095
  var Publisher = function (props) {
5002
5096
  return React__default.default.createElement(PublisherWrapper, null,
5003
5097
  React__default.default.createElement(Textarea, { placeholder: "Post a note about this project" }));
5004
5098
  };
5005
5099
  var PostWrapper = styled__default.default.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""], ["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""])), SharedStyles);
5006
- var WidePart = styled__default.default.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["flex-grow:1;"], ["flex-grow:1;"])));
5007
- var Date$1 = styled__default.default.span(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["color: ", "; display: inline-block;"], ["color: ", "; display: inline-block;"])), function (props) { return getThemeColor(props, "textbody", colors.textbody); });
5100
+ var WidePart = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["flex-grow:1;"], ["flex-grow:1;"])));
5101
+ var Date$1 = styled__default.default.span(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["color: ", "; display: inline-block;"], ["color: ", "; display: inline-block;"])), function (props) { return getThemeColor(props, "textbody", colors$1.textbody); });
5008
5102
  var Action = styled__default.default.a(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["display: inline-block; margin-left: 10px;"], ["display: inline-block; margin-left: 10px;"])));
5009
- var Author = styled__default.default.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "], ["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "texttitle", colors.texttitle); });
5010
- var Subject = styled__default.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "], ["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "textbody", colors.textbody); });
5103
+ var Author = styled__default.default.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "], ["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "texttitle", colors$1.texttitle); });
5104
+ var Subject = styled__default.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "], ["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "textbody", colors$1.textbody); });
5011
5105
  var TopLine = styled__default.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["display:flex;"], ["display:flex;"])));
5012
5106
  var PostFooter = styled__default.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["font-size:.9em;"], ["font-size:.9em;"])));
5013
5107
  var Comments = styled__default.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["margin-top: 1em;"], ["margin-top: 1em;"])));
@@ -5025,12 +5119,10 @@ var FeedPost = function (props) {
5025
5119
  props.comments && props.comments.length > 0 ?
5026
5120
  React__default.default.createElement(Comments, null, props.comments) : null));
5027
5121
  };
5028
- var templateObject_1$q, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
5122
+ var templateObject_1$q, templateObject_2$d, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
5029
5123
 
5030
- var Wrapper$1 = styled__default.default.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n ", "\n"], ["\n background: ", ";\n text-align: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n ", "\n"])), function (props) { return getThemeColor(props, 'bgblue', colors.bgblue); }, SharedStyles);
5031
- var ErrorTextContainer = styled__default.default.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n background: white;\n max-width: 450px;\n text-align: center;\n border-radius: 10px;\n font-size: 2em;\n margin-left: auto;\n padding: 100px 50px;\n margin-top: auto;\n margin-bottom: auto;\n\n @media only screen and (max-width: 700px) {\n margin-right: auto;\n }\n\n @media only screen and (min-width: 701px) {\n margin-right: 10px;\n }\n"], ["\n background: white;\n max-width: 450px;\n text-align: center;\n border-radius: 10px;\n font-size: 2em;\n margin-left: auto;\n padding: 100px 50px;\n margin-top: auto;\n margin-bottom: auto;\n\n @media only screen and (max-width: 700px) {\n margin-right: auto;\n }\n\n @media only screen and (min-width: 701px) {\n margin-right: 10px;\n }\n"])));
5032
- var BotContainer = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n max-width: 450px;\n text-align: center;\n border-radius: 10px;\n font-size: 2em;\n padding: 40px;\n\n margin-right: auto;\n @media only screen and (max-width: 700px) {\n margin-left: auto;\n margin-top: 20px;\n }\n\n @media only screen and (min-width: 701px) {\n margin-left: 5px;\n }\n"], ["\n max-width: 450px;\n text-align: center;\n border-radius: 10px;\n font-size: 2em;\n padding: 40px;\n\n margin-right: auto;\n @media only screen and (max-width: 700px) {\n margin-left: auto;\n margin-top: 20px;\n }\n\n @media only screen and (min-width: 701px) {\n margin-left: 5px;\n }\n"])));
5033
- var BotImg = styled__default.default.img(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n margin-top: 20px;\n padding: 0;\n margin: 0;\n max-width: 450px;\n"], ["\n margin-top: 20px;\n padding: 0;\n margin: 0;\n max-width: 450px;\n"])));
5124
+ var Wrapper$1 = styled__default.default.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n &&& {\n text-align: center;\n font-family: \"TT Norms Pro\", sans-serif;\n background: white;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n ", " \n }\n"], ["\n &&& {\n text-align: center;\n font-family: \"TT Norms Pro\", sans-serif;\n background: white;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n ", " \n }\n"])), SharedStyles);
5125
+ var ErrorTextContainer = styled__default.default.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n padding: 100px 50px;\n margin-top: 100px;\n\n @media only screen and (max-width: 700px) {\n margin-right: auto;\n }\n\n @media only screen and (min-width: 701px) {\n margin-right: 10px;\n }\n"], ["\n padding: 100px 50px;\n margin-top: 100px;\n\n @media only screen and (max-width: 700px) {\n margin-right: auto;\n }\n\n @media only screen and (min-width: 701px) {\n margin-right: 10px;\n }\n"])));
5034
5126
  var ErrorBoundary = /** @class */ (function (_super) {
5035
5127
  __extends(ErrorBoundary, _super);
5036
5128
  function ErrorBoundary(props) {
@@ -5043,22 +5135,29 @@ var ErrorBoundary = /** @class */ (function (_super) {
5043
5135
  console.log({ error: error, info: info });
5044
5136
  };
5045
5137
  ErrorBoundary.prototype.render = function () {
5138
+ var goBack = function () {
5139
+ window$1.history.back();
5140
+ };
5141
+ var isNewTab = window$1.history.length === 1;
5046
5142
  if (this.state.hasError) {
5047
5143
  return (React__default.default.createElement(Wrapper$1, __assign({}, this.props),
5048
- React__default.default.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', position: 'fixed', width: '100%', } },
5049
- React__default.default.createElement(ErrorTextContainer, null,
5050
- "I'm sorry... this page cannot be loaded.",
5051
- React__default.default.createElement("br", null),
5052
- React__default.default.createElement("br", null),
5053
- React__default.default.createElement("a", { href: "/" }, "Back to home")),
5054
- React__default.default.createElement(BotContainer, null,
5055
- React__default.default.createElement(BotImg, { src: "https://login.commonsku.com/images/repairbot.png", alt: "SKU Bot" })))));
5144
+ React__default.default.createElement(ErrorTextContainer, null,
5145
+ React__default.default.createElement("b", { style: { color: '#2A4D63', fontSize: '64px' } }, "Sorry, something went wrong."),
5146
+ React__default.default.createElement("br", null),
5147
+ React__default.default.createElement("p", { style: { color: '#597486', fontSize: '24px', fontStyle: 'normal', lineHeight: '40px', fontWeight: 400, position: 'relative', zIndex: 100 } }, " We\u2019ve been notified about the error and will get it resolved shortly."),
5148
+ React__default.default.createElement("br", null),
5149
+ React__default.default.createElement("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' } },
5150
+ React__default.default.createElement(Button, { variant: "primary", size: "medium", id: "goBackButton", onClick: goBack, style: { marginRight: '25px', zIndex: 100, display: isNewTab ? 'none' : 'table-cell' } }, "Back to previous page"),
5151
+ React__default.default.createElement(Button, { variant: "text", size: "medium", style: { zIndex: 100 }, onClick: function (e) { return window$1.location.href = "/"; } }, "Go to homepage"))),
5152
+ React__default.default.createElement("div", { style: { position: 'absolute', bottom: '0', width: '100%' } },
5153
+ React__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "310", viewBox: "0 0 1510 310", fill: "none", preserveAspectRatio: "none" },
5154
+ React__default.default.createElement("path", { d: "M858 52.2161C498 -49.6986 200.667 20.7424 0 68.7022V310H1510V52.2166L1508.43 52.7138C1352.99 101.997 1202.45 149.728 858 52.2161Z", fill: "#EDF4F7" })))));
5056
5155
  }
5057
5156
  return this.props.children;
5058
5157
  };
5059
5158
  return ErrorBoundary;
5060
5159
  }(React.Component));
5061
- var templateObject_1$p, templateObject_2$c, templateObject_3$7, templateObject_4$3;
5160
+ var templateObject_1$p, templateObject_2$c;
5062
5161
 
5063
5162
  var CustomDateInput = React.forwardRef(function (_a, ref) {
5064
5163
  var error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable, props = __rest(_a, ["error", "noMargin", "onClick", "isClearable"]);
@@ -5154,7 +5253,7 @@ var Dropdown = function (_a) {
5154
5253
  };
5155
5254
  var templateObject_1$o, templateObject_2$b, templateObject_3$6;
5156
5255
 
5157
- var Badge = styled__default.default.span(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n background-color: ", ";\n color: ", ";\n border-radius: 10px;\n ", "\n"], ["\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n background-color: ", ";\n color: ", ";\n border-radius: 10px;\n ", "\n"])), function (p) { return p.color === 'cta' ? colors.cta : p.color === 'grey' ? colors.primary0 : colors.primary; }, function (p) { return p.color === 'grey' ? colors.primary100 : colors.white; }, SharedStyles);
5256
+ var Badge = styled__default.default.span(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n background-color: ", ";\n color: ", ";\n border-radius: 10px;\n ", "\n"], ["\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n background-color: ", ";\n color: ", ";\n border-radius: 10px;\n ", "\n"])), function (p) { return p.color === 'cta' ? colors$1.cta : p.color === 'grey' ? colors$1.primary0 : colors$1.primary; }, function (p) { return p.color === 'grey' ? colors$1.primary100 : colors$1.white; }, SharedStyles);
5158
5257
  var templateObject_1$n;
5159
5258
 
5160
5259
  var verticalScrollbarWidth = function () {
@@ -6157,8 +6256,8 @@ Transition.EXITING = EXITING;
6157
6256
  var Transition$1 = Transition;
6158
6257
 
6159
6258
  var CollapseStyled = styled__default.default.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n&&& {\n .collapsed:not(.show) {\n display: none;\n }\n\n .collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n transition: height ", "s ease;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .collapsing {\n transition: none;\n }\n }\n}\n"], ["\n&&& {\n .collapsed:not(.show) {\n display: none;\n }\n\n .collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n transition: height ", "s ease;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .collapsing {\n transition: none;\n }\n }\n}\n"])), function (p) { return p.duration ? p.duration / 1000 : '0.35'; });
6160
- var CollapseWrapper = styled__default.default.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n&&& {\n border: 1px solid ", ";\n border-radius: 5px;\n}\n"], ["\n&&& {\n border: 1px solid ", ";\n border-radius: 5px;\n}\n"])), colors.primary0);
6161
- var CollapsiblePanelTitle = styled__default.default.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n&&& {\n background: #f3f6f7;\n border-bottom: 1px solid ", ";\n color: ", ";\n padding: 20px;\n cursor: pointer;\n}\n"], ["\n&&& {\n background: #f3f6f7;\n border-bottom: 1px solid ", ";\n color: ", ";\n padding: 20px;\n cursor: pointer;\n}\n"])), colors.primary0, colors.primary);
6259
+ var CollapseWrapper = styled__default.default.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n&&& {\n border: 1px solid ", ";\n border-radius: 5px;\n}\n"], ["\n&&& {\n border: 1px solid ", ";\n border-radius: 5px;\n}\n"])), colors$1.primary0);
6260
+ var CollapsiblePanelTitle = styled__default.default.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n&&& {\n background: #f3f6f7;\n border-bottom: 1px solid ", ";\n color: ", ";\n padding: 20px;\n cursor: pointer;\n}\n"], ["\n&&& {\n background: #f3f6f7;\n border-bottom: 1px solid ", ";\n color: ", ";\n padding: 20px;\n cursor: pointer;\n}\n"])), colors$1.primary0, colors$1.primary);
6162
6261
  var transitionStatusToClass = {
6163
6262
  entering: 'collapsing',
6164
6263
  entered: 'collapsed show',
@@ -6342,7 +6441,7 @@ function Thermometer(_a) {
6342
6441
  setValue1Width((node === null || node === void 0 ? void 0 : node.clientWidth) || 0);
6343
6442
  }, []);
6344
6443
  return (React__default.default.createElement("div", __assign({}, props),
6345
- title ? React__default.default.createElement(Text, { style: { fontWeight: 'bold', fontSize: 18, color: colors.neutrals.bodyText } }, title) : null,
6444
+ title ? React__default.default.createElement(Text, { style: { fontWeight: 'bold', fontSize: 18, color: colors$1.neutrals.bodyText } }, title) : null,
6346
6445
  React__default.default.createElement("div", { style: { paddingBottom: 20, paddingTop: 5 } },
6347
6446
  React__default.default.createElement("span", { ref: measureTargetRef, style: {
6348
6447
  position: 'absolute',
@@ -6354,13 +6453,13 @@ function Thermometer(_a) {
6354
6453
  React__default.default.createElement("span", { ref: measureValue1Ref, style: {
6355
6454
  position: 'absolute',
6356
6455
  paddingRight: 5,
6357
- color: labelTextColor || colors.secondary3.main,
6456
+ color: labelTextColor || colors$1.secondary3.main,
6358
6457
  } },
6359
6458
  value1Label + " $",
6360
6459
  React__default.default.createElement(Number$1, { commas: true, decimalPoints: 0, num: value1 }))),
6361
6460
  React__default.default.createElement("div", { ref: measureContainerRef },
6362
6461
  React__default.default.createElement(ProgressWrapper, { style: { marginTop: 10, background: isSecondary ? '#FFF9C5' : '#C9FDE5' } },
6363
- React__default.default.createElement(ProgressBar, { target: target, value: value1, color: barColor || colors.secondary3.main, offset: calcVal1Width(), elementWidth: value1Width })))));
6462
+ React__default.default.createElement(ProgressBar, { target: target, value: value1, color: barColor || colors$1.secondary3.main, offset: calcVal1Width(), elementWidth: value1Width })))));
6364
6463
  }
6365
6464
  var templateObject_1$g, templateObject_2$4;
6366
6465
 
@@ -6382,7 +6481,7 @@ function LightIndicatorLight(_a) {
6382
6481
  React__default.default.createElement("defs", null,
6383
6482
  React__default.default.createElement("radialGradient", { id: lightID, cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: gradientTransform }, litOrNot)));
6384
6483
  }
6385
- var LightIndicatorText = styled__default.default.p(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n margin-top:0;\n margin-bottom:0;\n };\n"], ["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n margin-top:0;\n margin-bottom:0;\n };\n"])), function (props) { return props.large ? themeOptions.fontStyles.p.medium.fontSize : themeOptions.fontStyles.p.small.fontSize; }, themeOptions.fontStyles.p.small.fontFamily, themeOptions.fontStyles.p.small.lineHeight, function (props) { return props.LightIndicatorTextColor ? colors.neutrals.bodyText : colors.neutrals[70]; });
6484
+ var LightIndicatorText = styled__default.default.p(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n margin-top:0;\n margin-bottom:0;\n };\n"], ["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n margin-top:0;\n margin-bottom:0;\n };\n"])), function (props) { return props.large ? themeOptions.fontStyles.p.medium.fontSize : themeOptions.fontStyles.p.small.fontSize; }, themeOptions.fontStyles.p.small.fontFamily, themeOptions.fontStyles.p.small.lineHeight, function (props) { return props.LightIndicatorTextColor ? colors$1.neutrals.bodyText : colors$1.neutrals[70]; });
6386
6485
  var LightIndicatorContainer = styled__default.default.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n &&& {\n display: flex;\n vertical-align: middle;\n align-items: top;\n max-width: 100%;\n margin-bottom: 8px;\n margin-right: 16px;\n ", "\n ", "\n }\n"], ["\n &&& {\n display: flex;\n vertical-align: middle;\n align-items: top;\n max-width: 100%;\n margin-bottom: 8px;\n margin-right: 16px;\n ", "\n ", "\n }\n"])), SharedStyles, SizerCss);
6387
6486
  function LightIndicator(_a) {
6388
6487
  var _b = _a.name, name = _b === void 0 ? "Name this Indicator" : _b, _c = _a.on, on = _c === void 0 ? false : _c, _d = _a.large, large = _d === void 0 ? false : _d, _e = _a.textProps, textProps = _e === void 0 ? {} : _e, props = __rest(_a, ["name", "on", "large", "textProps"]);
@@ -6392,7 +6491,7 @@ function LightIndicator(_a) {
6392
6491
  }
6393
6492
  var templateObject_1$f, templateObject_2$3;
6394
6493
 
6395
- var DefaultStarText = styled__default.default.p(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n &&& {\n opacity: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n max-width: 180px;\n margin-top:0;\n margin-bottom:0;\n };\n"], ["\n &&& {\n opacity: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n max-width: 180px;\n margin-top:0;\n margin-bottom:0;\n };\n"])), function (props) { return props.clicked ? 1 : props.hover ? 0.8 : 0; }, themeOptions.fontStyles.p.medium.fontSize, themeOptions.fontStyles.p.medium.fontFamily, themeOptions.fontStyles.p.medium.lineHeight, function (props) { return props.clicked ? props.color : colors.neutrals[60]; });
6494
+ var DefaultStarText = styled__default.default.p(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n &&& {\n opacity: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n max-width: 180px;\n margin-top:0;\n margin-bottom:0;\n };\n"], ["\n &&& {\n opacity: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n max-width: 180px;\n margin-top:0;\n margin-bottom:0;\n };\n"])), function (props) { return props.clicked ? 1 : props.hover ? 0.8 : 0; }, themeOptions.fontStyles.p.medium.fontSize, themeOptions.fontStyles.p.medium.fontFamily, themeOptions.fontStyles.p.medium.lineHeight, function (props) { return props.clicked ? props.color : colors$1.neutrals[60]; });
6396
6495
  var DefaultStarContainer = styled__default.default.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n &&& {\n display: flex;\n vertical-align: middle;\n align-items: top;\n width: ", ";\n margin-bottom: 16px;\n margin-right: 16px;\n cursor: pointer;\n ", "\n ", "\n }\n"], ["\n &&& {\n display: flex;\n vertical-align: middle;\n align-items: top;\n width: ", ";\n margin-bottom: 16px;\n margin-right: 16px;\n cursor: pointer;\n ", "\n ", "\n }\n"])), function (props) { return props.width ? props.width : props.noText ? '24px' : '128px'; }, SharedStyles, SizerCss);
6397
6496
  function DefaultStar(_a) {
6398
6497
  var _b = _a.initialSelected, initialSelected = _b === void 0 ? false : _b, _c = _a.forceSelected, forceSelected = _c === void 0 ? false : _c, hoverText = _a.hoverText, _d = _a.noText, noText = _d === void 0 ? false : _d, _e = _a.children, children = _e === void 0 ? "Default" : _e, width = _a.width, _f = _a.color, color = _f === void 0 ? teal.main : _f; __rest(_a, ["initialSelected", "forceSelected", "hoverText", "noText", "children", "width", "color"]);
@@ -6418,9 +6517,9 @@ function DoneButton(_a) {
6418
6517
  return (React__default.default.createElement(Button, __assign({ variant: variant, size: size }, Props), "Done"));
6419
6518
  }
6420
6519
 
6421
- var StyledLink = styled__default.default.a(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n display: flex;\n ", ";\n ", "\n ", "\n &:hover {\n color: ", ";\n }\n } \n"], ["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n display: flex;\n ", ";\n ", "\n ", "\n &:hover {\n color: ", ";\n }\n } \n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.color || colors.teal.main; }, function (props) { return props.flexShrink ? "flex-shrink: 0;" : null; }, SharedStyles, SizerCss, function (props) { return props.hoverColor ? props.hoverColor : colors.teal.dark; });
6520
+ var StyledLink = styled__default.default.a(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n display: flex;\n ", ";\n ", "\n ", "\n &:hover {\n color: ", ";\n }\n } \n"], ["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n display: flex;\n ", ";\n ", "\n ", "\n &:hover {\n color: ", ";\n }\n } \n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.color || colors$1.teal.main; }, function (props) { return props.flexShrink ? "flex-shrink: 0;" : null; }, SharedStyles, SizerCss, function (props) { return props.hoverColor ? props.hoverColor : colors$1.teal.dark; });
6422
6521
  function LinkWithIcon(_a) {
6423
- var Icon = _a.Icon, href = _a.href, children = _a.children, _b = _a.color, color = _b === void 0 ? colors.teal.main : _b, _c = _a.hoverColor, hoverColor = _c === void 0 ? colors.teal.dark : _c, _d = _a.flexShrink, flexShrink = _d === void 0 ? false : _d, iconProps = _a.iconProps, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["Icon", "href", "children", "color", "hoverColor", "flexShrink", "iconProps", "style"]);
6522
+ var Icon = _a.Icon, href = _a.href, children = _a.children, _b = _a.color, color = _b === void 0 ? colors$1.teal.main : _b, _c = _a.hoverColor, hoverColor = _c === void 0 ? colors$1.teal.dark : _c, _d = _a.flexShrink, flexShrink = _d === void 0 ? false : _d, iconProps = _a.iconProps, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["Icon", "href", "children", "color", "hoverColor", "flexShrink", "iconProps", "style"]);
6424
6523
  var _f = React.useState(false), isHover = _f[0], setHover = _f[1];
6425
6524
  var RenderIcon = React__default.default.useMemo(function () {
6426
6525
  if (!Icon) {
@@ -6450,29 +6549,29 @@ var NotificationExtraContent = React.memo(function (props) {
6450
6549
  var NotificationIcon = React.memo(function (props) {
6451
6550
  var alertType = props.alertType;
6452
6551
  if (alertType === "success") {
6453
- return React__default.default.createElement(CompletedCheckmarkIcon, { color: colors.green.dark, mr: 8, style: { flexShrink: 0 } });
6552
+ return React__default.default.createElement(CompletedCheckmarkIcon, { color: colors$1.green.dark, mr: 8, style: { flexShrink: 0 } });
6454
6553
  }
6455
6554
  else if (alertType === "error") {
6456
- return React__default.default.createElement(AlertIcon, { color: colors.errors.dark, mr: 8, style: { flexShrink: 0 } });
6555
+ return React__default.default.createElement(AlertIcon, { color: colors$1.errors.dark, mr: 8, style: { flexShrink: 0 } });
6457
6556
  }
6458
- return React__default.default.createElement(InfoIcon, { color: colors.navy.dark, mr: 8, style: { flexShrink: 0 } });
6557
+ return React__default.default.createElement(InfoIcon, { color: colors$1.navy.dark, mr: 8, style: { flexShrink: 0 } });
6459
6558
  });
6460
6559
  var notificationVariantStyles = function (alertType) {
6461
6560
  switch (alertType) {
6462
6561
  case "neutral":
6463
6562
  return {
6464
- backgroundColor: colors.navy.lightest,
6465
- color: colors.navy.dark,
6563
+ backgroundColor: colors$1.navy.lightest,
6564
+ color: colors$1.navy.dark,
6466
6565
  };
6467
6566
  case "success":
6468
6567
  return {
6469
- backgroundColor: colors.green.lightest,
6470
- color: colors.green.darkest,
6568
+ backgroundColor: colors$1.green.lightest,
6569
+ color: colors$1.green.darkest,
6471
6570
  };
6472
6571
  case "error":
6473
6572
  return {
6474
- backgroundColor: colors.errors.lightest,
6475
- color: colors.errors.dark,
6573
+ backgroundColor: colors$1.errors.lightest,
6574
+ color: colors$1.errors.dark,
6476
6575
  };
6477
6576
  default:
6478
6577
  return {};
@@ -7057,8 +7156,8 @@ var BaseCollapsible = function (props) {
7057
7156
  setHeight(0);
7058
7157
  }, [isOpen]);
7059
7158
  return (React__default.default.createElement("div", { style: style },
7060
- React__default.default.createElement(Row, { style: __assign({ alignItems: 'center', padding: 10, paddingTop: 12, paddingBottom: 8, background: isOpen ? colors.white : colors.teal[20], borderRadius: isOpen ? 25 : 2000, flex: 'none', order: 1, flexGrow: 0 }, (isOpen
7061
- ? { border: "3px solid ".concat(colors.teal.main) }
7159
+ React__default.default.createElement(Row, { style: __assign({ alignItems: 'center', padding: 10, paddingTop: 12, paddingBottom: 8, background: isOpen ? colors$1.white : colors$1.teal[20], borderRadius: isOpen ? 25 : 2000, flex: 'none', order: 1, flexGrow: 0 }, (isOpen
7160
+ ? { border: "3px solid ".concat(colors$1.teal.main) }
7062
7161
  : {})) },
7063
7162
  React__default.default.createElement(CollapsibleHeader, { isOpen: isOpen, handleToggle: handleToggle, controls: controls }, header || label),
7064
7163
  React__default.default.createElement(Col, { xs: true, style: {
@@ -7101,7 +7200,7 @@ var CollapsibleLabel = function (props) {
7101
7200
  }
7102
7201
  if (typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') {
7103
7202
  return React__default.default.createElement("span", { style: {
7104
- color: colors.teal.main,
7203
+ color: colors$1.teal.main,
7105
7204
  fontFamily: fontFamilies.bold,
7106
7205
  fontStyle: 'normal',
7107
7206
  fontWeight: 500,
@@ -7129,7 +7228,7 @@ var CollapsibleControls = function (props) {
7129
7228
  }
7130
7229
  if (typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') {
7131
7230
  return React__default.default.createElement("span", { style: {
7132
- color: colors.teal.main,
7231
+ color: colors$1.teal.main,
7133
7232
  fontFamily: fontFamilies.bold,
7134
7233
  fontStyle: 'normal',
7135
7234
  fontWeight: 500,
@@ -7154,7 +7253,7 @@ var ConfirmPopup = function (props) {
7154
7253
  fontFamily: fontStyles.p.medium.fontFamily,
7155
7254
  fontSize: fontStyles.p.medium.fontSize,
7156
7255
  lineHeight: fontStyles.p.medium.lineHeight,
7157
- color: colors.neutrals.bodyText
7256
+ color: colors$1.neutrals.bodyText
7158
7257
  } }, confirmText),
7159
7258
  React__default.default.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
7160
7259
  React__default.default.createElement(Button, { size: "medium", variant: 'secondary', mr: 24, onClick: function () {
@@ -7194,8 +7293,8 @@ var PopupTitle = function (_a) {
7194
7293
  var PopupContent = function (_a) {
7195
7294
  var children = _a.children;
7196
7295
  return (React__default.default.createElement("div", { style: {
7197
- background: colors.errors[10],
7198
- color: colors.errors.main,
7296
+ background: colors$1.errors[10],
7297
+ color: colors$1.errors.main,
7199
7298
  padding: 16,
7200
7299
  } },
7201
7300
  React__default.default.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
@@ -7204,12 +7303,12 @@ var PopupContent = function (_a) {
7204
7303
  verticalAlign: 'middle',
7205
7304
  alignSelf: 'center',
7206
7305
  } },
7207
- React__default.default.createElement(AlertIcon, { size: 'medium', color: colors.errors[70] })),
7306
+ React__default.default.createElement(AlertIcon, { size: 'medium', color: colors$1.errors[70] })),
7208
7307
  React__default.default.createElement("div", { style: {
7209
7308
  fontFamily: 'var(--font-family-regular)',
7210
7309
  fontSize: fontStyles.p.large.fontSize,
7211
7310
  lineHeight: fontStyles.p.medium.lineHeight,
7212
- color: colors.errors.main,
7311
+ color: colors$1.errors.main,
7213
7312
  } }, children))));
7214
7313
  };
7215
7314
 
@@ -7245,7 +7344,7 @@ var CalendarDaysBody = function (_a) {
7245
7344
  var DaysHeaderWrapper = styled__default.default(Row)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n text-transform: uppercase;\n font-weight: 400;\n color: #ccc;\n font-size: 70%;\n padding: 0.75em 0 !important;\n border-bottom: 1px solid #eee;\n"], ["\n text-transform: uppercase;\n font-weight: 400;\n color: #ccc;\n font-size: 70%;\n padding: 0.75em 0 !important;\n border-bottom: 1px solid #eee;\n"])));
7246
7345
  var templateObject_1$6;
7247
7346
 
7248
- var StyledDayText = styled__default.default(Text)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return props.selected ? "\n border-radius: 15px;\n background: ".concat(colors.cta, ";\n color: white;\n font-weight: bold;\n padding: 0 5px;\n ") : ''; });
7347
+ var StyledDayText = styled__default.default(Text)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return props.selected ? "\n border-radius: 15px;\n background: ".concat(colors$1.cta, ";\n color: white;\n font-weight: bold;\n padding: 0 5px;\n ") : ''; });
7249
7348
  var templateObject_1$5;
7250
7349
 
7251
7350
  var CalendarDaysHeader = function (_a) {
@@ -7283,11 +7382,11 @@ var DefaultCalendarHeader = function (_a) {
7283
7382
  React__default.default.createElement(Row, null,
7284
7383
  React__default.default.createElement(LabeledCheckbox, { label: "Weekends", checked: true })))),
7285
7384
  React__default.default.createElement(Col, { padded: true },
7286
- React__default.default.createElement("div", { style: { cursor: 'pointer', color: colors.primary, }, onClick: onPrevWeek }, "< Prev Week")),
7385
+ React__default.default.createElement("div", { style: { cursor: 'pointer', color: colors$1.primary, }, onClick: onPrevWeek }, "< Prev Week")),
7287
7386
  React__default.default.createElement(Col, { center: true, padded: true },
7288
- React__default.default.createElement("span", { style: { color: colors.disabledButton } }, dateFns.format(currentMonth, "MMM yyyy"))),
7387
+ React__default.default.createElement("span", { style: { color: colors$1.disabledButton } }, dateFns.format(currentMonth, "MMM yyyy"))),
7289
7388
  React__default.default.createElement(Col, { end: true, padded: true },
7290
- React__default.default.createElement("div", { style: { cursor: 'pointer', color: colors.primary, }, onClick: onNextWeek }, "Next Week >"))));
7389
+ React__default.default.createElement("div", { style: { cursor: 'pointer', color: colors$1.primary, }, onClick: onNextWeek }, "Next Week >"))));
7291
7390
  };
7292
7391
 
7293
7392
  var TasksCalendarDayBody = function (_a) {
@@ -7359,7 +7458,7 @@ var CalendarIconDatePicker = React__default.default.forwardRef(function (_a, ref
7359
7458
  textAlign: 'center',
7360
7459
  borderRadius: 5,
7361
7460
  cursor: 'pointer',
7362
- color: colors.disabledButton,
7461
+ color: colors$1.disabledButton,
7363
7462
  } })));
7364
7463
  });
7365
7464
  var TasksCalendarHeader = function (_a) {
@@ -7401,7 +7500,7 @@ var TasksCalendarHeader = function (_a) {
7401
7500
  }
7402
7501
  } })),
7403
7502
  React__default.default.createElement("span", null,
7404
- React__default.default.createElement(WeekNav, { style: { cursor: 'pointer', color: colors.primary, verticalAlign: 'middle' }, onClick: onPrevWeek },
7503
+ React__default.default.createElement(WeekNav, { style: { cursor: 'pointer', color: colors$1.primary, verticalAlign: 'middle' }, onClick: onPrevWeek },
7405
7504
  React__default.default.createElement(ChevronIcon, { direction: "left", size: 'large' })),
7406
7505
  React__default.default.createElement(WeekNav, { as: Button, variant: "text", size: "primary-light", style: { verticalAlign: "middle", padding: "10px 0px", }, py: 5, onClick: function () {
7407
7506
  if (isCurrentWeek) {
@@ -7409,7 +7508,7 @@ var TasksCalendarHeader = function (_a) {
7409
7508
  }
7410
7509
  onResetDate();
7411
7510
  } }, "Today"),
7412
- React__default.default.createElement(WeekNav, { style: { cursor: 'pointer', color: colors.primary1.main, verticalAlign: 'middle' }, onClick: onNextWeek },
7511
+ React__default.default.createElement(WeekNav, { style: { cursor: 'pointer', color: colors$1.primary1.main, verticalAlign: 'middle' }, onClick: onNextWeek },
7413
7512
  React__default.default.createElement(ChevronIcon, { size: "large" })))),
7414
7513
  React__default.default.createElement(Col, { start: 1, xs: true, md: 8, padded: true },
7415
7514
  React__default.default.createElement(Tabs, { size: "medium", tabs: tabs })),
@@ -7417,7 +7516,7 @@ var TasksCalendarHeader = function (_a) {
7417
7516
  React__default.default.createElement(Link, { as: "span", onClick: onClickAddTask, style: {
7418
7517
  marginRight: 10,
7419
7518
  verticalAlign: 'bottom',
7420
- color: colors.primary1.main,
7519
+ color: colors$1.primary1.main,
7421
7520
  fontFamily: [themeOptions.fontFamilies.regular].concat(themeOptions.fontFamilies.fallbacks).join(','),
7422
7521
  fontWeight: 600,
7423
7522
  } }, "+ Add Task")
@@ -7723,7 +7822,7 @@ var SimpleWindowedTableStyles = styled__default.default.div(templateObject_1$1 |
7723
7822
  "border: ".concat(typeof p.bordered === 'string'
7724
7823
  ? p.bordered
7725
7824
  : "1px solid ".concat(getThemeColor(p, 'tableBorder', '#edf2f5')), ";")
7726
- : ''; }, colors.disabledButtonBorder, colors.disabledButtonBorder, function (p) { return p.hoverRowBg ?
7825
+ : ''; }, colors$1.disabledButtonBorder, colors$1.disabledButtonBorder, function (p) { return p.hoverRowBg ?
7727
7826
  ".tr:not(.header.tr, .table-footer.tr):hover {\n background: ".concat(typeof p.hoverRowBg === 'string'
7728
7827
  ? p.hoverRowBg
7729
7828
  : getThemeColor(p, 'tableHeaderBg', '#F6FEFF'), ";\n }") : ''; }, function (p) { return p.selectedRowIndex && p.selectedRowStyle ?
@@ -7845,7 +7944,7 @@ var createAnimationLeftStyle = function (p) {
7845
7944
  };
7846
7945
  var ContainerStyled = styled__default.default(Csku)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &&& {\n position: relative;\n background: ", ";\n width: ", ";\n padding: 0.35rem;\n border-radius: 1.8rem;\n cursor: pointer;\n transition: background .3s;\n\n @keyframes switch-slide-to-right {\n from { left: 0; }\n to {\n left: ", ";\n }\n }\n \n @keyframes switch-slide-to-left {\n from {\n left: ", ";\n }\n to { left: 0; }\n }\n }"], ["\n &&& {\n position: relative;\n background: ", ";\n width: ", ";\n padding: 0.35rem;\n border-radius: 1.8rem;\n cursor: pointer;\n transition: background .3s;\n\n @keyframes switch-slide-to-right {\n from { left: 0; }\n to {\n left: ", ";\n }\n }\n \n @keyframes switch-slide-to-left {\n from {\n left: ", ";\n }\n to { left: 0; }\n }\n }"])), function (p) { return p.selected
7847
7946
  ? getThemeColor(p, 'teal.main', 'var(--color-primary1-main)')
7848
- : getThemeColor(p, 'teal.20', colors.teal['20']); }, function (p) { return p.stretch
7947
+ : getThemeColor(p, 'teal.20', colors$1.teal['20']); }, function (p) { return p.stretch
7849
7948
  ? '100%'
7850
7949
  : "".concat(stripUnit(toggleSizes[p.size || 'medium'].height) * 2.5, "px"); }, createAnimationLeftStyle, createAnimationLeftStyle);
7851
7950
  var ToggleSwitchDotStyled = styled__default.default(Csku)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &&& {\n position: relative;\n background: #FFFFFF;\n width: ", ";\n height: ", ";\n border-radius: 50%;\n\n animation: ", ";\n }\n"], ["\n &&& {\n position: relative;\n background: #FFFFFF;\n width: ", ";\n height: ", ";\n border-radius: 50%;\n\n animation: ", ";\n }\n"])), function (p) { return toggleSizes[p.size || 'medium'].height; }, function (p) { return toggleSizes[p.size || 'medium'].height; }, function (p) { return p.selected
@@ -7978,6 +8077,7 @@ exports.Collapsibles = Collapsibles;
7978
8077
  exports.Column = Column;
7979
8078
  exports.ColumnSelectIcon = ColumnSelectIcon;
7980
8079
  exports.CommentIcon = CommentIcon;
8080
+ exports.CommonskuMainLogo = CommonskuMainLogo;
7981
8081
  exports.CommunityIcon = CommunityIcon;
7982
8082
  exports.CompletedCheckmarkIcon = CompletedCheckmarkIcon;
7983
8083
  exports.ConfirmAlertPopup = ConfirmAlertPopup;
@@ -8131,6 +8231,8 @@ exports.SimpleWindowedTable = SimpleWindowedTable;
8131
8231
  exports.SimpleWindowedTableStyles = SimpleWindowedTableStyles;
8132
8232
  exports.SizerCss = SizerCss;
8133
8233
  exports.SizerWrapper = SizerWrapper;
8234
+ exports.SkubotLogo = SkubotLogo;
8235
+ exports.SkubotSpinner = SkubotSpinner;
8134
8236
  exports.SlideInIcon = SlideInIcon;
8135
8237
  exports.Sparkles = Sparkles;
8136
8238
  exports.Spinner = Spinner;
@@ -8187,7 +8289,7 @@ exports.VirtualTable = VirtualTable;
8187
8289
  exports.VirtualTableStyles = VirtualTableStyles;
8188
8290
  exports.Wrapper = Wrapper$4;
8189
8291
  exports.XIcon = XIcon;
8190
- exports.colors = colors;
8292
+ exports.colors = colors$1;
8191
8293
  exports.createMeasurementStyle = createMeasurementStyle;
8192
8294
  exports.datepickerStyles = datepickerStyles;
8193
8295
  exports.fontFamilies = fontFamilies;