@commonsku/styles 1.16.10 → 1.16.12

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.js CHANGED
@@ -369,10 +369,14 @@ var getUnit = function (measurement) {
369
369
  var matchedMeasurement = measurement.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/);
370
370
  return matchedMeasurement ? matchedMeasurement[2] : "px";
371
371
  };
372
+ var isCalOrPercent = function (measurement) { return (measurement.endsWith('%') || measurement.includes('calc')); };
372
373
  var stripUnit = function (measurement) {
373
374
  return (typeof measurement === "number") ? measurement : parseFloat(measurement);
374
375
  };
375
- var parseMeasurement = function (measurement) { return stripUnit(measurement) + getUnit(measurement); };
376
+ var parseMeasurement = function (measurement) {
377
+ return typeof measurement === 'string' && isCalOrPercent(measurement)
378
+ ? measurement : stripUnit(measurement) + getUnit(measurement);
379
+ };
376
380
  var wait = function (time) {
377
381
  var timeoutId;
378
382
  var promise = new Promise(function (resolve) {
@@ -2604,6 +2608,49 @@ function DoubleArrowIcon(_a) {
2604
2608
  React__default.createElement("path", { d: directionPaths[1], fill: color })));
2605
2609
  }
2606
2610
 
2611
+ var iconSizes$5 = {
2612
+ tiny: {
2613
+ width: 16,
2614
+ height: 16,
2615
+ viewBox: "0 0 32 32",
2616
+ },
2617
+ small: {
2618
+ width: 24,
2619
+ height: 24,
2620
+ viewBox: "0 0 32 32",
2621
+ },
2622
+ medium: {
2623
+ width: 32,
2624
+ height: 32,
2625
+ viewBox: "0 0 32 32",
2626
+ },
2627
+ large: {
2628
+ width: 40,
2629
+ height: 40,
2630
+ viewBox: "0 0 32 32",
2631
+ },
2632
+ huge: {
2633
+ width: 48,
2634
+ height: 48,
2635
+ viewBox: "0 0 32 32",
2636
+ },
2637
+ default: {
2638
+ width: 32,
2639
+ height: 32,
2640
+ viewBox: "0 0 32 32",
2641
+ },
2642
+ };
2643
+ function ImageIcon(props) {
2644
+ var _a = props.color, color = _a === void 0 ? teal.main : _a, _b = props.size, size = _b === void 0 ? "medium" : _b, _c = props.altText, altText = _c === void 0 ? "ImageIcon" : _c, rest = __rest(props, ["color", "size", "altText"]);
2645
+ var id = _.uniqueId('clip0_1244_70960');
2646
+ return (React__default.createElement(SVG, __assign({ size: size, iconSizes: iconSizes$5, "aria-labelledby": altText, fill: "none" }, rest),
2647
+ React__default.createElement("g", { clipPath: "url(#".concat(id, ")") },
2648
+ React__default.createElement("path", { d: "M25.3333 6.66667V25.3333H6.66667V6.66667H25.3333ZM25.3333 4H6.66667C5.2 4 4 5.2 4 6.66667V25.3333C4 26.8 5.2 28 6.66667 28H25.3333C26.8 28 28 26.8 28 25.3333V6.66667C28 5.2 26.8 4 25.3333 4ZM18.8533 15.8133L14.8533 20.9733L12 17.52L8 22.6667H24L18.8533 15.8133Z", fill: color })),
2649
+ React__default.createElement("defs", null,
2650
+ React__default.createElement("clipPath", { id: id },
2651
+ React__default.createElement("rect", { width: "32", height: "32", fill: "white" })))));
2652
+ }
2653
+
2607
2654
  var avatarSizes = {
2608
2655
  tiny: {
2609
2656
  size: '24px',
@@ -2809,6 +2856,20 @@ function DropzonedPreviews(_a) {
2809
2856
  ? React__default.createElement(ThumbsContainer, null, thumbs)
2810
2857
  : React__default.createElement(PlaceHolder, null, placeholder))));
2811
2858
  }
2859
+ function DropzonedSimple(_a) {
2860
+ var accept = _a.accept, children = _a.children, props = __rest(_a, ["accept", "children"]);
2861
+ var _b = reactDropzone.useDropzone(__assign({ accept: accept }, props)), acceptedFiles = _b.acceptedFiles, getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
2862
+ var Child = React__default.Children.only(children);
2863
+ if (!Child) {
2864
+ return null;
2865
+ }
2866
+ var ChildElem = React__default.cloneElement(Child, {
2867
+ acceptedFiles: acceptedFiles,
2868
+ inputProps: getInputProps(),
2869
+ rootProps: getRootProps({ isDragActive: isDragActive, isDragAccept: isDragAccept, isDragReject: isDragReject }),
2870
+ });
2871
+ return ChildElem;
2872
+ }
2812
2873
  var templateObject_1$c, templateObject_2$7, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$1;
2813
2874
 
2814
2875
  /*
@@ -4100,6 +4161,7 @@ var useFallbackRef = function (forwardedRef) {
4100
4161
  var Overlay = styled__default.div(templateObject_1$n || (templateObject_1$n = __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; });
4101
4162
  var PopupWindow = styled__default.div(templateObject_2$e || (templateObject_2$e = __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);
4102
4163
  var PopupHeader = styled__default.div(templateObject_3$7 || (templateObject_3$7 = __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);
4164
+ var ChevronButton = styled__default(ChevronIcon)(templateObject_4$6 || (templateObject_4$6 = __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;'; });
4103
4165
  var PopupContainer = function (_a) {
4104
4166
  var children = _a.children;
4105
4167
  var ref = React__default.useRef(document$1.createElement('div'));
@@ -4113,7 +4175,7 @@ var PopupContainer = function (_a) {
4113
4175
  return ReactDOM.createPortal(children, ref.current);
4114
4176
  };
4115
4177
  var Popup = React__default.forwardRef(function (_a, forwardedRef) {
4116
- var header = _a.header, _b = _a.noHeader, noHeader = _b === void 0 ? false : _b, title = _a.title, controls = _a.controls, children = _a.children, onClose = _a.onClose, _c = _a.noCloseButton, noCloseButton = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, _e = _a.closeOnClickOutside, closeOnClickOutside = _e === void 0 ? false : _e, overlayZIndex = _a.overlayZIndex, popupClassName = _a.popupClassName, contentClassName = _a.contentClassName, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex", "popupClassName", "contentClassName"]);
4178
+ var header = _a.header, _b = _a.noHeader, noHeader = _b === void 0 ? false : _b, title = _a.title, controls = _a.controls, children = _a.children, onClose = _a.onClose, _c = _a.noCloseButton, noCloseButton = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, _e = _a.closeOnClickOutside, closeOnClickOutside = _e === void 0 ? false : _e, overlayZIndex = _a.overlayZIndex, popupClassName = _a.popupClassName, contentClassName = _a.contentClassName, _f = _a.PopupWindowComponent, PopupWindowComponent = _f === void 0 ? PopupWindow : _f, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex", "popupClassName", "contentClassName", "PopupWindowComponent"]);
4117
4179
  var ref = useFallbackRef(forwardedRef);
4118
4180
  useClickOutside({
4119
4181
  ref: ref,
@@ -4141,14 +4203,16 @@ var Popup = React__default.forwardRef(function (_a, forwardedRef) {
4141
4203
  }, [closeOnClickOutside, closeOnEsc, onClose]);
4142
4204
  return React__default.createElement(PopupContainer, null,
4143
4205
  React__default.createElement(Overlay, { zIndex: overlayZIndex },
4144
- React__default.createElement(PopupWindow, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : '') }, props, { ref: ref }),
4206
+ React__default.createElement(PopupWindowComponent, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : '') }, props, { ref: ref }),
4145
4207
  noHeader ? null :
4146
4208
  header ? header : (React__default.createElement(PopupHeader, { className: "popup-header", xsStyle: "flex-wrap: wrap-reverse;", smStyle: "flex-wrap: wrap;" },
4147
4209
  React__default.createElement(Col, { style: { textAlign: 'left', alignSelf: 'center' } },
4148
4210
  React__default.createElement("span", { className: "title" }, title)),
4149
4211
  React__default.createElement(Col, { style: { textAlign: 'right', alignSelf: 'center' } }, noCloseButton ? null :
4150
4212
  controls || React__default.createElement(Button, { onClick: onClose }, "Close")))),
4151
- React__default.createElement("div", { className: "popup-content" + (contentClassName ? " ".concat(contentClassName) : '') }, children))));
4213
+ React__default.createElement("div", { className: "popup-content" + (contentClassName ? " ".concat(contentClassName) : '') },
4214
+ children,
4215
+ " "))));
4152
4216
  });
4153
4217
  var ShowPopup = function (_a) {
4154
4218
  var _b = _a.autoOpen, autoOpen = _b === void 0 ? false : _b, PopupComponent = _a.popup, render = _a.render, _c = _a.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? false : _d, props = __rest(_a, ["autoOpen", "popup", "render", "closeOnEsc", "closeOnClickOutside"]);
@@ -4157,12 +4221,22 @@ var ShowPopup = function (_a) {
4157
4221
  showPopup && React__default.createElement(PopupComponent, __assign({ onClose: function () { return setShowPopup(false); }, closeOnEsc: closeOnEsc, closeOnClickOutside: closeOnClickOutside }, props)),
4158
4222
  render && render({ onClick: function () { return setShowPopup(!showPopup); } }));
4159
4223
  };
4160
- var templateObject_1$n, templateObject_2$e, templateObject_3$7;
4224
+ var ChevronPopupWindow = function (props) {
4225
+ var onPreviousButtonClick = props.onPreviousButtonClick, onNextButtonClick = props.onNextButtonClick, hidePreviousButton = props.hidePreviousButton, hideNextButton = props.hideNextButton, rest = __rest(props, ["onPreviousButtonClick", "onNextButtonClick", "hidePreviousButton", "hideNextButton"]);
4226
+ return React__default.createElement(React__default.Fragment, null,
4227
+ !hidePreviousButton && React__default.createElement(ChevronButton, { direction: 'left', left: true, onClick: onPreviousButtonClick }),
4228
+ React__default.createElement(PopupWindow, __assign({}, rest)),
4229
+ !hideNextButton && React__default.createElement(ChevronButton, { direction: 'right', onClick: onNextButtonClick }));
4230
+ };
4231
+ var ChevronPopup = function (props) {
4232
+ return React__default.createElement(Popup, __assign({ PopupWindowComponent: ChevronPopupWindow }, props));
4233
+ };
4234
+ var templateObject_1$n, templateObject_2$e, templateObject_3$7, templateObject_4$6;
4161
4235
 
4162
4236
  var GridTableContainer = styled__default.div(templateObject_1$o || (templateObject_1$o = __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);
4163
4237
  var GridRow = styled__default.div(templateObject_2$f || (templateObject_2$f = __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);
4164
4238
  var GridCell = styled__default.div(templateObject_3$8 || (templateObject_3$8 = __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'; });
4165
- var FieldError = styled__default.p(templateObject_4$6 || (templateObject_4$6 = __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']);
4239
+ var FieldError = styled__default.p(templateObject_4$7 || (templateObject_4$7 = __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']);
4166
4240
  var defaultTransform = function (v) { return v.target ? v.target.value : v.currentTarget ? v.currentTarget.value : v.value; };
4167
4241
  var Column = function (_a) {
4168
4242
  var name = _a.name, title = _a.title, children = _a.children, centerContent = _a.centerContent, _b = _a.transform;
@@ -4345,14 +4419,14 @@ function GridTable(_a) {
4345
4419
  Adding && NewRow,
4346
4420
  onAdd && !Adding && AddNew)));
4347
4421
  }
4348
- var templateObject_1$o, templateObject_2$f, templateObject_3$8, templateObject_4$6;
4422
+ var templateObject_1$o, templateObject_2$f, templateObject_3$8, templateObject_4$7;
4349
4423
 
4350
4424
  var tabSizes = {
4351
4425
  small: styled.css(templateObject_1$p || (templateObject_1$p = __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 "]))),
4352
4426
  medium: styled.css(templateObject_2$g || (templateObject_2$g = __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 "]))),
4353
4427
  };
4354
4428
  var TabBar = styled__default.ul(templateObject_3$9 || (templateObject_3$9 = __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);
4355
- var Tab = styled__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"
4429
+ var Tab = styled__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"
4356
4430
  /*
4357
4431
 
4358
4432
  Here's how you use this:
@@ -4440,7 +4514,7 @@ var Tabs = /** @class */ (function (_super) {
4440
4514
  };
4441
4515
  return Tabs;
4442
4516
  }(React.Component));
4443
- var templateObject_1$p, templateObject_2$g, templateObject_3$9, templateObject_4$7;
4517
+ var templateObject_1$p, templateObject_2$g, templateObject_3$9, templateObject_4$8;
4444
4518
 
4445
4519
  var toggleSizes = {
4446
4520
  small: {
@@ -4578,7 +4652,7 @@ var templateObject_1$t, templateObject_2$i;
4578
4652
  var ProductInfo = styled__default.div(templateObject_1$u || (templateObject_1$u = __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"])));
4579
4653
  var ProductName = styled__default.div(templateObject_2$j || (templateObject_2$j = __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"])));
4580
4654
  var SupplierName = styled__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"])));
4581
- var ProductWrapper = styled__default.div(templateObject_4$8 || (templateObject_4$8 = __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);
4655
+ var ProductWrapper = styled__default.div(templateObject_4$9 || (templateObject_4$9 = __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);
4582
4656
  var Product = function (props) {
4583
4657
  return React__default.createElement(ProductWrapper, __assign({}, props),
4584
4658
  React__default.createElement(ProductInfo, null,
@@ -4589,12 +4663,12 @@ var Product = function (props) {
4589
4663
  props.price && props.currency ? props.currency + "$" + props.price : null,
4590
4664
  props.rating ? React__default.createElement(StarRating, { rating: props.rating }) : null));
4591
4665
  };
4592
- var templateObject_1$u, templateObject_2$j, templateObject_3$b, templateObject_4$8;
4666
+ var templateObject_1$u, templateObject_2$j, templateObject_3$b, templateObject_4$9;
4593
4667
 
4594
4668
  var ArtworkName = styled__default.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n font-size: .9rem;\n font-weight: bold;\n"], ["\n font-size: .9rem;\n font-weight: bold;\n"])));
4595
4669
  var UpdateDate = styled__default.div(templateObject_2$k || (templateObject_2$k = __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); });
4596
4670
  var ArtworkControls = styled__default.div(templateObject_3$c || (templateObject_3$c = __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"])));
4597
- var ArtworkInfo = styled__default.div(templateObject_4$9 || (templateObject_4$9 = __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"; });
4671
+ var ArtworkInfo = styled__default.div(templateObject_4$a || (templateObject_4$a = __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"; });
4598
4672
  var ArtworkWrapper = styled__default.div(templateObject_5$6 || (templateObject_5$6 = __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);
4599
4673
  var ArtworkPicture = styled__default.div(templateObject_6$5 || (templateObject_6$5 = __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);
4600
4674
  function truncate$1(filename, max) {
@@ -4633,12 +4707,12 @@ var Artwork = function (_a) {
4633
4707
  "Updated ",
4634
4708
  props.date) : null));
4635
4709
  };
4636
- var templateObject_1$v, templateObject_2$k, templateObject_3$c, templateObject_4$9, templateObject_5$6, templateObject_6$5;
4710
+ var templateObject_1$v, templateObject_2$k, templateObject_3$c, templateObject_4$a, templateObject_5$6, templateObject_6$5;
4637
4711
 
4638
4712
  var TaskLabel = styled__default.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["display: flex; min-height: 25px; ", ""], ["display: flex; min-height: 25px; ", ""])), function (p) { return p.hasCheckbox ? "width: calc(100% - 24px);" : ''; });
4639
4713
  var TaskName = styled__default.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["flex-grow: 1; font-size:13px;"], ["flex-grow: 1; font-size:13px;"])));
4640
4714
  var StyledTask = styled__default.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["margin-bottom: 1.5em; ", ""], ["margin-bottom: 1.5em; ", ""])), SharedStyles);
4641
- var TaskBody = styled__default.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["margin-left:34px;"], ["margin-left:34px;"])));
4715
+ var TaskBody = styled__default.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["margin-left:34px;"], ["margin-left:34px;"])));
4642
4716
  var Task = function (_a) {
4643
4717
  var taskName = _a.taskName, date = _a.date, done = _a.done, 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"]);
4644
4718
  var _c = React.useState(initialChecked), checked = _c[0], setChecked = _c[1];
@@ -4712,7 +4786,7 @@ var CalendarTask = React__default.forwardRef(function (_a, ref) {
4712
4786
  assignee ? "for " + assignee : null,
4713
4787
  assignee ? "on " : null)));
4714
4788
  });
4715
- var templateObject_1$w, templateObject_2$l, templateObject_3$d, templateObject_4$a, templateObject_5$7, templateObject_6$6;
4789
+ var templateObject_1$w, templateObject_2$l, templateObject_3$d, templateObject_4$b, templateObject_5$7, templateObject_6$6;
4716
4790
 
4717
4791
  var PublisherWrapper = styled__default.div(templateObject_1$x || (templateObject_1$x = __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); });
4718
4792
  var Publisher = function (props) {
@@ -4721,7 +4795,7 @@ var Publisher = function (props) {
4721
4795
  };
4722
4796
  var PostWrapper = styled__default.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""], ["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""])), SharedStyles);
4723
4797
  var WidePart = styled__default.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["flex-grow:1;"], ["flex-grow:1;"])));
4724
- var Date$1 = styled__default.span(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["color: ", "; display: inline-block;"], ["color: ", "; display: inline-block;"])), function (props) { return getThemeColor(props, "textbody", colors.textbody); });
4798
+ var Date$1 = styled__default.span(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["color: ", "; display: inline-block;"], ["color: ", "; display: inline-block;"])), function (props) { return getThemeColor(props, "textbody", colors.textbody); });
4725
4799
  var Action = styled__default.a(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["display: inline-block; margin-left: 10px;"], ["display: inline-block; margin-left: 10px;"])));
4726
4800
  var Author = styled__default.div(templateObject_6$7 || (templateObject_6$7 = __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); });
4727
4801
  var Subject = styled__default.div(templateObject_7$3 || (templateObject_7$3 = __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); });
@@ -4742,12 +4816,12 @@ var FeedPost = function (props) {
4742
4816
  props.comments && props.comments.length > 0 ?
4743
4817
  React__default.createElement(Comments, null, props.comments) : null));
4744
4818
  };
4745
- var templateObject_1$x, templateObject_2$m, templateObject_3$e, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10;
4819
+ var templateObject_1$x, templateObject_2$m, templateObject_3$e, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10;
4746
4820
 
4747
4821
  var Wrapper$3 = styled__default.div(templateObject_1$y || (templateObject_1$y = __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);
4748
4822
  var ErrorTextContainer = styled__default.div(templateObject_2$n || (templateObject_2$n = __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"])));
4749
4823
  var BotContainer = styled__default.div(templateObject_3$f || (templateObject_3$f = __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"])));
4750
- var BotImg = styled__default.img(templateObject_4$c || (templateObject_4$c = __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"])));
4824
+ var BotImg = styled__default.img(templateObject_4$d || (templateObject_4$d = __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"])));
4751
4825
  var ErrorBoundary = /** @class */ (function (_super) {
4752
4826
  __extends(ErrorBoundary, _super);
4753
4827
  function ErrorBoundary(props) {
@@ -4775,7 +4849,7 @@ var ErrorBoundary = /** @class */ (function (_super) {
4775
4849
  };
4776
4850
  return ErrorBoundary;
4777
4851
  }(React.Component));
4778
- var templateObject_1$y, templateObject_2$n, templateObject_3$f, templateObject_4$c;
4852
+ var templateObject_1$y, templateObject_2$n, templateObject_3$f, templateObject_4$d;
4779
4853
 
4780
4854
  var CustomDateInput = React__default.forwardRef(function (_a, ref) {
4781
4855
  var error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable, props = __rest(_a, ["error", "noMargin", "onClick", "isClearable"]);
@@ -5294,10 +5368,10 @@ var Sparkle = function (_a) {
5294
5368
  var comeInOut = styled.keyframes(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n 0% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"], ["\n 0% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
5295
5369
  var spin = styled.keyframes(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(180deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(180deg);\n }\n"])));
5296
5370
  var Wrapper$4 = styled__default.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: inline-block;\n position: relative;\n"], ["\n display: inline-block;\n position: relative;\n"])));
5297
- var SparkleWrapper = styled__default.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n position: absolute;\n display: block;\n @media (prefers-reduced-motion: no-preference) {\n animation: ", " 700ms forwards;\n }\n"], ["\n position: absolute;\n display: block;\n @media (prefers-reduced-motion: no-preference) {\n animation: ", " 700ms forwards;\n }\n"])), comeInOut);
5371
+ var SparkleWrapper = styled__default.span(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n position: absolute;\n display: block;\n @media (prefers-reduced-motion: no-preference) {\n animation: ", " 700ms forwards;\n }\n"], ["\n position: absolute;\n display: block;\n @media (prefers-reduced-motion: no-preference) {\n animation: ", " 700ms forwards;\n }\n"])), comeInOut);
5298
5372
  var SparkleSvg = styled__default.svg(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: block;\n @media (prefers-reduced-motion: no-preference) {\n animation: ", " 1000ms linear;\n }\n"], ["\n display: block;\n @media (prefers-reduced-motion: no-preference) {\n animation: ", " 1000ms linear;\n }\n"])), spin);
5299
5373
  var ChildWrapper = styled__default.strong(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n position: relative;\n z-index: 1;\n font-weight: bold;\n"], ["\n position: relative;\n z-index: 1;\n font-weight: bold;\n"])));
5300
- var templateObject_1$C, templateObject_2$q, templateObject_3$i, templateObject_4$d, templateObject_5$9, templateObject_6$8;
5374
+ var templateObject_1$C, templateObject_2$q, templateObject_3$i, templateObject_4$e, templateObject_5$9, templateObject_6$8;
5301
5375
 
5302
5376
  var StyledDropdown$1 = styled__default.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: relative;\n display: block;\n width: 100%;\n"], ["\n position: relative;\n display: block;\n width: 100%;\n"])));
5303
5377
  var DropdownItem$1 = styled__default.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n color: white;\n padding: 8px 8px;\n text-decoration: none;\n display: block;\n text-align: center;\n background-color: ", ";\n border-radius: ", ";\n opacity: ", ";\n &:hover {\n opacity: .85;\n cursor: pointer;\n }\n"], ["\n color: white;\n padding: 8px 8px;\n text-decoration: none;\n display: block;\n text-align: center;\n background-color: ", ";\n border-radius: ", ";\n opacity: ", ";\n &:hover {\n opacity: .85;\n cursor: pointer;\n }\n"])), function (p) { return p.color ? p.color : "#F4F7FF"; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
@@ -5347,7 +5421,7 @@ var templateObject_1$D, templateObject_2$r, templateObject_3$j;
5347
5421
  var StyledCircles = styled__default.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n line-height: 0;\n margin-bottom: 9px;\n"], ["\n line-height: 0;\n margin-bottom: 9px;\n"])));
5348
5422
  var Circle = styled__default.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n background: #005B8C;\n opacity: ", ";\n width: 5px;\n height: 5px;\n border-radius: 10px;\n margin-right: 2px;\n display: inline-block;\n"], ["\n background: #005B8C;\n opacity: ", ";\n width: 5px;\n height: 5px;\n border-radius: 10px;\n margin-right: 2px;\n display: inline-block;\n"])), function (p) { return p.disabled ? 0.1 : 1; });
5349
5423
  var StyledDropdown$2 = styled__default.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n position: relative;\n display: block;\n width: 100%;\n"], ["\n position: relative;\n display: block;\n width: 100%;\n"])));
5350
- var DropdownDisplay = styled__default.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n color: black;\n padding: 8px 8px;\n text-decoration: none;\n display: block;\n text-align: center;\n background-color: ", ";\n line-height: 1em;\n min-height: 28px;\n display: ", ";\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n opacity: ", ";\n &:hover {\n opacity: .85;\n cursor: pointer;\n }\n"], ["\n color: black;\n padding: 8px 8px;\n text-decoration: none;\n display: block;\n text-align: center;\n background-color: ", ";\n line-height: 1em;\n min-height: 28px;\n display: ", ";\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n opacity: ", ";\n &:hover {\n opacity: .85;\n cursor: pointer;\n }\n"])), function (p) { return p.background || '#F4F7FF'; }, function (p) { return p.showCircles ? "inherit" : "flex"; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
5424
+ var DropdownDisplay = styled__default.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n color: black;\n padding: 8px 8px;\n text-decoration: none;\n display: block;\n text-align: center;\n background-color: ", ";\n line-height: 1em;\n min-height: 28px;\n display: ", ";\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n opacity: ", ";\n &:hover {\n opacity: .85;\n cursor: pointer;\n }\n"], ["\n color: black;\n padding: 8px 8px;\n text-decoration: none;\n display: block;\n text-align: center;\n background-color: ", ";\n line-height: 1em;\n min-height: 28px;\n display: ", ";\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n opacity: ", ";\n &:hover {\n opacity: .85;\n cursor: pointer;\n }\n"])), function (p) { return p.background || '#F4F7FF'; }, function (p) { return p.showCircles ? "inherit" : "flex"; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
5351
5425
  var DropdownItem$2 = styled__default.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n color: black;\n padding: 8px 8px;\n text-decoration: none;\n display: block;\n text-align: center;\n background-color: ", ";\n line-height: 1em;\n min-height: 30px;\n border-radius: ", ";\n opacity: ", ";\n &:hover {\n opacity: .85;\n cursor: pointer;\n }\n word-wrap: break-word;\n"], ["\n color: black;\n padding: 8px 8px;\n text-decoration: none;\n display: block;\n text-align: center;\n background-color: ", ";\n line-height: 1em;\n min-height: 30px;\n border-radius: ", ";\n opacity: ", ";\n &:hover {\n opacity: .85;\n cursor: pointer;\n }\n word-wrap: break-word;\n"])), function (p) { return p.background || '#F4F7FF'; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
5352
5426
  var DropDownContent$2 = styled__default.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: block;\n position: absolute;\n background-color: ", ";\n width: 100%;\n box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);\n z-index: 10;\n border-radius: 10px;\n text-align: left;\n overflow: hidden;\n ", "\n"], ["\n display: block;\n position: absolute;\n background-color: ", ";\n width: 100%;\n box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);\n z-index: 10;\n border-radius: 10px;\n text-align: left;\n overflow: hidden;\n ", "\n"])), function (p) { return getColor('white'); }, function (p) { return p.scrollContentHeight ? "max-height: ".concat(p.scrollContentHeight, "; overflow-y: auto;") : ''; });
5353
5427
  var Circles = function (_a) {
@@ -5399,7 +5473,7 @@ var StateDropdown = function (_a) {
5399
5473
  " ");
5400
5474
  }))));
5401
5475
  };
5402
- var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$e, templateObject_5$a, templateObject_6$9;
5476
+ var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$f, templateObject_5$a, templateObject_6$9;
5403
5477
 
5404
5478
  function _objectWithoutPropertiesLoose(source, excluded) {
5405
5479
  if (source == null) return {};
@@ -6294,7 +6368,7 @@ function NumberInput(props) {
6294
6368
  var InputStepperOuterContainer = styled__default.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n &&&{\n width: ", ";\n ", "\n ", "\n }\n"], ["\n &&&{\n width: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.width ? props.width : "160px"; }, SharedStyles, SizerCss);
6295
6369
  var InputStepperInnerContainer = styled__default.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n &&&{\n display: flex;\n width: 100%;\n flex-direction: row;\n justify-content: space-between;\n border-radius: 5px;\n background-color: white;\n ", "\n ", "\n }\n"], ["\n &&&{\n display: flex;\n width: 100%;\n flex-direction: row;\n justify-content: space-between;\n border-radius: 5px;\n background-color: white;\n ", "\n ", "\n }\n"])), SharedStyles, SizerCss);
6296
6370
  var InputStepperLabel = styled__default.label(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n &&&{\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n margin-bottom: 8px;\n color: ", "\n ", "\n ", "\n }\n"], ["\n &&&{\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n margin-bottom: 8px;\n color: ", "\n ", "\n ", "\n }\n"])), fontStyles.label.fontSize, fontStyles.label.fontFamily, fontStyles.label.lineHeight, neutrals.bodyText, SharedStyles, SizerCss);
6297
- var CurrentNumber = styled__default.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n &&&{\n display:flex;\n justify-content: center;\n align-items: center;\n height:38px;\n width:100%;\n border-top: 1px solid ", ";\n border-bottom: 1px solid ", ";\n color: ", ";\n text-align:center;\n vertical-align:middle;\n }\n"], ["\n &&&{\n display:flex;\n justify-content: center;\n align-items: center;\n height:38px;\n width:100%;\n border-top: 1px solid ", ";\n border-bottom: 1px solid ", ";\n color: ", ";\n text-align:center;\n vertical-align:middle;\n }\n"])), neutrals['60'], neutrals['60'], neutrals.bodyText);
6371
+ var CurrentNumber = styled__default.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n &&&{\n display:flex;\n justify-content: center;\n align-items: center;\n height:38px;\n width:100%;\n border-top: 1px solid ", ";\n border-bottom: 1px solid ", ";\n color: ", ";\n text-align:center;\n vertical-align:middle;\n }\n"], ["\n &&&{\n display:flex;\n justify-content: center;\n align-items: center;\n height:38px;\n width:100%;\n border-top: 1px solid ", ";\n border-bottom: 1px solid ", ";\n color: ", ";\n text-align:center;\n vertical-align:middle;\n }\n"])), neutrals['60'], neutrals['60'], neutrals.bodyText);
6298
6372
  function InputStepperStyled(props) {
6299
6373
  var containerWidth = props.containerWidth, inputDisabled = props.inputDisabled, label = props.label, labelStyle = props.labelStyle, containerStyle = props.containerStyle, style = props.style, onIncrement = props.onIncrement, onDecrement = props.onDecrement, _a = props.decrementButtonProps, decrementButtonProps = _a === void 0 ? {} : _a, _b = props.incrementButtonProps, incrementButtonProps = _b === void 0 ? {} : _b, rest = __rest(props, ["containerWidth", "inputDisabled", "label", "labelStyle", "containerStyle", "style", "onIncrement", "onDecrement", "decrementButtonProps", "incrementButtonProps"]);
6300
6374
  return (React__default.createElement(InputStepperOuterContainer, { width: containerWidth, style: containerStyle },
@@ -6376,7 +6450,7 @@ function InputStepper(props) {
6376
6450
  onIncrementMouseDown();
6377
6451
  }, onMouseOut: holdIncrement ? onIncrementMouseLeave : undefined, onMouseUp: holdIncrement ? onIncrementMouseUp : undefined, onTouchEnd: holdIncrement ? onIncrementTouchEnd : undefined, onTouchStart: holdIncrement ? onIncrementTouchStart : undefined }))));
6378
6452
  }
6379
- var templateObject_1$M, templateObject_2$y, templateObject_3$m, templateObject_4$f;
6453
+ var templateObject_1$M, templateObject_2$y, templateObject_3$m, templateObject_4$g;
6380
6454
 
6381
6455
  var VirtualTable = function (props) {
6382
6456
  var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? '' : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent, onSort = props.onSort, onResize = props.onResize, rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter;
@@ -6615,7 +6689,8 @@ var parseCskuStyles = function (p) {
6615
6689
  });
6616
6690
  return __spreadArray([stylesObj, sizeStylesObj], stylesArr, true);
6617
6691
  };
6618
- var Csku = styled__default.div(parseCskuStyles);
6692
+ var Csku = styled__default.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n", "\n ", "\n", "\n"], ["\n", "\n ", "\n", "\n"])), function (p) { return p.forceStyles ? '&&& {' : ''; }, parseCskuStyles, function (p) { return p.forceStyles ? '}' : ''; });
6693
+ var templateObject_1$O;
6619
6694
 
6620
6695
  var Grid = styled__default.div(function (p) {
6621
6696
  var params = {
@@ -6779,8 +6854,56 @@ var ConfirmPopup = function (props) {
6779
6854
  }, disabled: disableDelete }, "Delete"))));
6780
6855
  };
6781
6856
 
6782
- var StyledDayBody = styled__default(Col)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n position: relative;\n height: auto;\n border-right: 1px solid #eee;\n overflow: hidden;\n cursor: pointer;\n background: #fff;\n transition: 0.25s ease-out;\n font-size: 1em;\n overflow-y: auto;\n\n &:last-child {\n border-right: none;\n }\n\n &:hover {\n background: #f9f9f9;\n transition: 0.5s ease-out;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"], ["\n position: relative;\n height: auto;\n border-right: 1px solid #eee;\n overflow: hidden;\n cursor: pointer;\n background: #fff;\n transition: 0.25s ease-out;\n font-size: 1em;\n overflow-y: auto;\n\n &:last-child {\n border-right: none;\n }\n\n &:hover {\n background: #f9f9f9;\n transition: 0.5s ease-out;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (p) { return p.selected ? "\n background: #f9f9f9;\n " : ''; }, function (p) { return p.today ? "\n background: #f9f9f9;\n " : ''; }, function (p) { return p.row ? "\n border-bottom: 1px solid #eee;\n " : ''; }, function (p) { return p.disabled ? "\n color: #ccc;\n pointer-events: none;\n " : ''; });
6783
- var templateObject_1$O;
6857
+ var ConfirmAlertPopup = function (props) {
6858
+ var _a = props.padding, padding = _a === void 0 ? '16px' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? 555 : _b, _c = props.title, title = _c === void 0 ? '' : _c, _d = props.children, children = _d === void 0 ? 'Are you sure you want to perform this action?' : _d, _e = props.cancelButtonContent, cancelButtonContent = _e === void 0 ? 'Cancel' : _e, _f = props.actionButtonContent, actionButtonContent = _f === void 0 ? 'Delete' : _f, _g = props.disableActionButton, disableActionButton = _g === void 0 ? false : _g, onAction = props.onAction, onClose = props.onClose;
6859
+ return (React__default.createElement(Popup, { width: 'auto', height: 'auto', padding: padding, style: { borderRadius: 10, maxWidth: maxWidth, }, noHeader: true, noCloseButton: true },
6860
+ title ? React__default.createElement(PopupTitle, null, title) : null,
6861
+ React__default.createElement(PopupContent, null, children),
6862
+ React__default.createElement(Row, { style: { justifyContent: 'center', marginTop: 16, } },
6863
+ React__default.createElement(Col, { xs: true, md: 5.75, mdStyle: { marginRight: 16 } },
6864
+ React__default.createElement(Button, { size: "medium", variant: 'secondary', onClick: function () {
6865
+ onClose && onClose();
6866
+ }, style: { width: '100%' } }, cancelButtonContent)),
6867
+ React__default.createElement(Col, { xs: true, md: 5.75, xsStyle: { marginTop: 16 }, mdStyle: { marginTop: 0 } },
6868
+ React__default.createElement(Button, { size: "medium", variant: disableActionButton ? 'disabled' : 'error', onClick: function () {
6869
+ onAction && onAction();
6870
+ }, disabled: disableActionButton, style: { width: '100%' } }, actionButtonContent)))));
6871
+ };
6872
+ var PopupTitle = function (_a) {
6873
+ var children = _a.children;
6874
+ return (React__default.createElement("h2", { style: {
6875
+ fontFamily: 'var(--font-family-bold)',
6876
+ fontSize: fontStyles.h2.fontSize,
6877
+ lineHeight: fontStyles.h2.lineHeight,
6878
+ color: 'var(--color-neutrals-90)',
6879
+ paddingBottom: 16,
6880
+ margin: 0,
6881
+ } }, children));
6882
+ };
6883
+ var PopupContent = function (_a) {
6884
+ var children = _a.children;
6885
+ return (React__default.createElement("div", { style: {
6886
+ background: colors.errors[10],
6887
+ color: colors.errors.main,
6888
+ padding: 16,
6889
+ } },
6890
+ React__default.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
6891
+ React__default.createElement("div", { style: {
6892
+ paddingRight: 16,
6893
+ verticalAlign: 'middle',
6894
+ alignSelf: 'center',
6895
+ } },
6896
+ React__default.createElement(AlertIcon, { size: 'medium', color: colors.errors[70] })),
6897
+ React__default.createElement("div", { style: {
6898
+ fontFamily: 'var(--font-family-regular)',
6899
+ fontSize: fontStyles.p.large.fontSize,
6900
+ lineHeight: fontStyles.p.medium.lineHeight,
6901
+ color: colors.errors.main,
6902
+ } }, children))));
6903
+ };
6904
+
6905
+ var StyledDayBody = styled__default(Col)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n position: relative;\n height: auto;\n border-right: 1px solid #eee;\n overflow: hidden;\n cursor: pointer;\n background: #fff;\n transition: 0.25s ease-out;\n font-size: 1em;\n overflow-y: auto;\n\n &:last-child {\n border-right: none;\n }\n\n &:hover {\n background: #f9f9f9;\n transition: 0.5s ease-out;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"], ["\n position: relative;\n height: auto;\n border-right: 1px solid #eee;\n overflow: hidden;\n cursor: pointer;\n background: #fff;\n transition: 0.25s ease-out;\n font-size: 1em;\n overflow-y: auto;\n\n &:last-child {\n border-right: none;\n }\n\n &:hover {\n background: #f9f9f9;\n transition: 0.5s ease-out;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (p) { return p.selected ? "\n background: #f9f9f9;\n " : ''; }, function (p) { return p.today ? "\n background: #f9f9f9;\n " : ''; }, function (p) { return p.row ? "\n border-bottom: 1px solid #eee;\n " : ''; }, function (p) { return p.disabled ? "\n color: #ccc;\n pointer-events: none;\n " : ''; });
6906
+ var templateObject_1$P;
6784
6907
 
6785
6908
  var CalendarDayBody = function (_a) {
6786
6909
  var day = _a.day, selectedDate = _a.selectedDate, onClick = _a.onClick, children = _a.children, weekend = _a.weekend, props = __rest(_a, ["day", "selectedDate", "onClick", "children", "weekend"]);
@@ -6795,8 +6918,8 @@ var CalendarDayBody = function (_a) {
6795
6918
  return (React__default.createElement(StyledDayBody, __assign({ padded: true, totalCols: weekend ? 7 : 5, xs: 1, selected: isSelected, today: isToday, onClick: onClick, className: classNames }, props), children || React__default.createElement("span", { style: { padding: 10, } }, formattedDay)));
6796
6919
  };
6797
6920
 
6798
- var DaysBodyWrapper = styled__default.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n font-size: 1em;\n font-weight: 300;\n line-height: 1;\n color: #777;\n background: #f9f9f9;\n position: relative;\n border-bottom: 1px solid #eee;\n"], ["\n font-size: 1em;\n font-weight: 300;\n line-height: 1;\n color: #777;\n background: #f9f9f9;\n position: relative;\n border-bottom: 1px solid #eee;\n"])));
6799
- var templateObject_1$P;
6921
+ var DaysBodyWrapper = styled__default.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n font-size: 1em;\n font-weight: 300;\n line-height: 1;\n color: #777;\n background: #f9f9f9;\n position: relative;\n border-bottom: 1px solid #eee;\n"], ["\n font-size: 1em;\n font-weight: 300;\n line-height: 1;\n color: #777;\n background: #f9f9f9;\n position: relative;\n border-bottom: 1px solid #eee;\n"])));
6922
+ var templateObject_1$Q;
6800
6923
 
6801
6924
  var CalendarDaysBody = function (_a) {
6802
6925
  var _b = _a.days, days = _b === void 0 ? [] : _b, currentMonth = _a.currentMonth, selectedDate = _a.selectedDate, onClickDay = _a.onClickDay, components = _a.components, _c = _a.dayBodyProps, dayBodyProps = _c === void 0 ? {} : _c, _d = _a.weekend, weekend = _d === void 0 ? true : _d, props = __rest(_a, ["days", "currentMonth", "selectedDate", "onClickDay", "components", "dayBodyProps", "weekend"]);
@@ -6808,12 +6931,12 @@ var CalendarDaysBody = function (_a) {
6808
6931
  }))));
6809
6932
  };
6810
6933
 
6811
- var DaysHeaderWrapper = styled__default(Row)(templateObject_1$Q || (templateObject_1$Q = __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"])));
6812
- var templateObject_1$Q;
6813
-
6814
- var StyledDayText = styled__default(Text)(templateObject_1$R || (templateObject_1$R = __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 ") : ''; });
6934
+ var DaysHeaderWrapper = styled__default(Row)(templateObject_1$R || (templateObject_1$R = __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"])));
6815
6935
  var templateObject_1$R;
6816
6936
 
6937
+ var StyledDayText = styled__default(Text)(templateObject_1$S || (templateObject_1$S = __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 ") : ''; });
6938
+ var templateObject_1$S;
6939
+
6817
6940
  var CalendarDaysHeader = function (_a) {
6818
6941
  var currentMonth = _a.currentMonth, selectedDate = _a.selectedDate, weekend = _a.weekend;
6819
6942
  var startDate = dateFns.startOfWeek(currentMonth, { weekStartsOn: 1 });
@@ -6827,12 +6950,12 @@ var CalendarDaysHeader = function (_a) {
6827
6950
  })));
6828
6951
  };
6829
6952
 
6830
- var CalendarWrapper = styled__default.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: block;\n position: relative;\n width: 100%;\n background: #fff;\n .calendar-scroll {\n overflow-x: scroll;\n }\n .days-body-wrapper, .days-header-wrapper {\n min-width: 900px;\n }\n"], ["\n display: block;\n position: relative;\n width: 100%;\n background: #fff;\n .calendar-scroll {\n overflow-x: scroll;\n }\n .days-body-wrapper, .days-header-wrapper {\n min-width: 900px;\n }\n"])));
6831
- var templateObject_1$S;
6832
-
6833
- var HeaderWrapper = styled__default(Row)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n width: 100%;\n padding: 1.75em 0 !important;\n border-bottom: 1px solid #eee;\n background: #fff;\n font-weight: 700;\n font-size: 100%;\n"], ["\n width: 100%;\n padding: 1.75em 0 !important;\n border-bottom: 1px solid #eee;\n background: #fff;\n font-weight: 700;\n font-size: 100%;\n"])));
6953
+ var CalendarWrapper = styled__default.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: block;\n position: relative;\n width: 100%;\n background: #fff;\n .calendar-scroll {\n overflow-x: scroll;\n }\n .days-body-wrapper, .days-header-wrapper {\n min-width: 900px;\n }\n"], ["\n display: block;\n position: relative;\n width: 100%;\n background: #fff;\n .calendar-scroll {\n overflow-x: scroll;\n }\n .days-body-wrapper, .days-header-wrapper {\n min-width: 900px;\n }\n"])));
6834
6954
  var templateObject_1$T;
6835
6955
 
6956
+ var HeaderWrapper = styled__default(Row)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n width: 100%;\n padding: 1.75em 0 !important;\n border-bottom: 1px solid #eee;\n background: #fff;\n font-weight: 700;\n font-size: 100%;\n"], ["\n width: 100%;\n padding: 1.75em 0 !important;\n border-bottom: 1px solid #eee;\n background: #fff;\n font-weight: 700;\n font-size: 100%;\n"])));
6957
+ var templateObject_1$U;
6958
+
6836
6959
  var DefaultCalendarFooter = function (_a) {
6837
6960
  var currentWeek = _a.currentWeek;
6838
6961
  return (React__default.createElement(HeaderWrapper, { middle: true },
@@ -6864,7 +6987,7 @@ var TasksCalendarDayBody = function (_a) {
6864
6987
  React__default.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })));
6865
6988
  };
6866
6989
 
6867
- var WeekNav = styled__default(Text)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: inline-block;\n padding: 0;\n"], ["\n display: inline-block;\n padding: 0;\n"])));
6990
+ var WeekNav = styled__default(Text)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: inline-block;\n padding: 0;\n"], ["\n display: inline-block;\n padding: 0;\n"])));
6868
6991
  var CalendarIconDatePicker = React__default.forwardRef(function (_a, ref) {
6869
6992
  var value = _a.value, onClick = _a.onClick;
6870
6993
  return (React__default.createElement("span", { ref: ref, onClick: onClick },
@@ -6937,7 +7060,7 @@ var TasksCalendarHeader = function (_a) {
6937
7060
  } }, "+ Add Task")
6938
7061
  : null)));
6939
7062
  };
6940
- var templateObject_1$U;
7063
+ var templateObject_1$V;
6941
7064
 
6942
7065
  var TasksCalendarFooter = function (_a) {
6943
7066
  var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
@@ -7289,7 +7412,7 @@ var scrollbarWidth = function () {
7289
7412
  return scrollbarWidth;
7290
7413
  };
7291
7414
 
7292
- var SimpleWindowedTableStyles = styled__default.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n width: 100% !important;\n\n ", "\n}\n\n.table {\n display: inline-block;\n border-spacing: 0;\n width: 100%;\n min-width: 100% !important;\n\n ", "\n\n .header.tr, .table-footer.tr {\n width: 100% !important;\n min-width: 100% !important;\n overflow-x: hidden;\n }\n\n .tr {\n :last-child {\n .td {\n border-bottom: 0;\n }\n }\n }\n\n .th {\n border-bottom: 2px solid ", ";\n\n div {\n display: inline-block;\n }\n }\n\n .td {\n border-bottom: 1px solid ", ";\n }\n\n /* set hover styles */\n ", "\n\n /* row selected => if selectedRowStyle === true then set background color else set given styles */\n ", "\n\n .th,\n .td {\n margin: 0;\n padding: 0.5rem;\n }\n}\n"], ["\npadding: 1rem;\n\n.table-list-rows {\n width: 100% !important;\n\n ", "\n}\n\n.table {\n display: inline-block;\n border-spacing: 0;\n width: 100%;\n min-width: 100% !important;\n\n ", "\n\n .header.tr, .table-footer.tr {\n width: 100% !important;\n min-width: 100% !important;\n overflow-x: hidden;\n }\n\n .tr {\n :last-child {\n .td {\n border-bottom: 0;\n }\n }\n }\n\n .th {\n border-bottom: 2px solid ", ";\n\n div {\n display: inline-block;\n }\n }\n\n .td {\n border-bottom: 1px solid ", ";\n }\n\n /* set hover styles */\n ", "\n\n /* row selected => if selectedRowStyle === true then set background color else set given styles */\n ", "\n\n .th,\n .td {\n margin: 0;\n padding: 0.5rem;\n }\n}\n"])), function (p) { return p.rowClickable ? "\n .tr {\n cursor: pointer;\n }\n " : ''; }, function (p) { return p.bordered ?
7415
+ var SimpleWindowedTableStyles = styled__default.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n width: 100% !important;\n\n ", "\n}\n\n.table {\n display: inline-block;\n border-spacing: 0;\n width: 100%;\n min-width: 100% !important;\n\n ", "\n\n .header.tr, .table-footer.tr {\n width: 100% !important;\n min-width: 100% !important;\n overflow-x: hidden;\n }\n\n .tr {\n :last-child {\n .td {\n border-bottom: 0;\n }\n }\n }\n\n .th {\n border-bottom: 2px solid ", ";\n\n div {\n display: inline-block;\n }\n }\n\n .td {\n border-bottom: 1px solid ", ";\n }\n\n /* set hover styles */\n ", "\n\n /* row selected => if selectedRowStyle === true then set background color else set given styles */\n ", "\n\n .th,\n .td {\n margin: 0;\n padding: 0.5rem;\n }\n}\n"], ["\npadding: 1rem;\n\n.table-list-rows {\n width: 100% !important;\n\n ", "\n}\n\n.table {\n display: inline-block;\n border-spacing: 0;\n width: 100%;\n min-width: 100% !important;\n\n ", "\n\n .header.tr, .table-footer.tr {\n width: 100% !important;\n min-width: 100% !important;\n overflow-x: hidden;\n }\n\n .tr {\n :last-child {\n .td {\n border-bottom: 0;\n }\n }\n }\n\n .th {\n border-bottom: 2px solid ", ";\n\n div {\n display: inline-block;\n }\n }\n\n .td {\n border-bottom: 1px solid ", ";\n }\n\n /* set hover styles */\n ", "\n\n /* row selected => if selectedRowStyle === true then set background color else set given styles */\n ", "\n\n .th,\n .td {\n margin: 0;\n padding: 0.5rem;\n }\n}\n"])), function (p) { return p.rowClickable ? "\n .tr {\n cursor: pointer;\n }\n " : ''; }, function (p) { return p.bordered ?
7293
7416
  "border: ".concat(typeof p.bordered === 'string'
7294
7417
  ? p.bordered
7295
7418
  : "1px solid ".concat(getThemeColor(p, 'tableBorder', '#edf2f5')), ";")
@@ -7379,7 +7502,64 @@ function SimpleWindowedTable(_a) {
7379
7502
  React__default.createElement("div", __assign({}, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React__default.createElement(NoRowsFound, null) : React__default.createElement(reactWindow.FixedSizeList, { height: height, itemCount: rows.length, itemSize: itemSize, width: totalColumnsWidth + scrollBarSize, className: "table-list-rows", outerRef: rowsRef, onScroll: onScroll, useIsScrolling: true }, RenderRow)),
7380
7503
  !hideFooter ? React__default.createElement("div", __assign({}, tableFooterProps, { className: "table-footer-wrapper ".concat(tableFooterProps.className || '') }), footerGroups.map(function (footerGroup) { return (React__default.createElement("div", __assign({}, getHeaderGroupProps(footerGroup, true), { className: "table-footer tr", ref: footerRef }), footerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, true)), column.render("Footer"))); }))); })) : null));
7381
7504
  }
7382
- var templateObject_1$V;
7505
+ var templateObject_1$W;
7506
+
7507
+ var toggleSizes$1 = {
7508
+ small: {
7509
+ 'font-family': fontStyles.button.small.fontFamily,
7510
+ 'font-size': fontStyles.button.small.fontSize,
7511
+ 'line-height': fontStyles.button.small.lineHeight,
7512
+ padding: '8px 12px',
7513
+ borderRadius: '4px',
7514
+ height: '15px',
7515
+ },
7516
+ medium: {
7517
+ 'font-family': fontStyles.button.medium.fontFamily,
7518
+ 'font-size': fontStyles.button.medium.fontSize,
7519
+ 'line-height': fontStyles.button.medium.lineHeight,
7520
+ padding: '8px 16px',
7521
+ borderRadius: '4px',
7522
+ height: '20px',
7523
+ },
7524
+ large: {
7525
+ 'font-family': fontStyles.button.large.fontFamily,
7526
+ 'font-size': fontStyles.button.large.fontSize,
7527
+ 'line-height': fontStyles.button.large.lineHeight,
7528
+ padding: '12px 24px',
7529
+ borderRadius: '4px',
7530
+ height: '35px',
7531
+ }
7532
+ };
7533
+ var createAnimationLeftStyle = function (p) {
7534
+ if (p.stretch) {
7535
+ return "calc(100% * 1.5px)";
7536
+ }
7537
+ return "".concat(stripUnit(toggleSizes$1[p.size || 'medium'].height) * 1.5, "px");
7538
+ };
7539
+ var ContainerStyled = styled__default(Csku)(templateObject_1$X || (templateObject_1$X = __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
7540
+ ? getThemeColor(p, 'teal.main', 'var(--color-primary1-main)')
7541
+ : getThemeColor(p, 'teal.20', colors.teal['20']); }, function (p) { return p.stretch
7542
+ ? '100%'
7543
+ : "".concat(stripUnit(toggleSizes$1[p.size || 'medium'].height) * 2.5, "px"); }, createAnimationLeftStyle, createAnimationLeftStyle);
7544
+ var ToggleSwitchDotStyled = styled__default(Csku)(templateObject_2$z || (templateObject_2$z = __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$1[p.size || 'medium'].height; }, function (p) { return toggleSizes$1[p.size || 'medium'].height; }, function (p) { return p.selected
7545
+ ? 'switch-slide-to-right .3s forwards 1'
7546
+ : 'switch-slide-to-left .3s forwards 1'; });
7547
+ var ToggleSwitchStyled = function (_a) {
7548
+ var onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.stretch, stretch = _d === void 0 ? false : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["onClick", "size", "selected", "stretch", "style"]);
7549
+ return (React__default.createElement(ContainerStyled, __assign({ selected: selected, stretch: stretch, size: size, onClick: onClick, style: style }, props),
7550
+ React__default.createElement(ToggleSwitchDotStyled, { selected: selected, stretch: stretch, size: size })));
7551
+ };
7552
+ var ToggleSwitch = function (_a) {
7553
+ var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.initialSelected, initialSelected = _c === void 0 ? false : _c, _d = _a.stretch, stretch = _d === void 0 ? false : _d, onClick = _a.onClick, props = __rest(_a, ["size", "initialSelected", "stretch", "onClick"]);
7554
+ var _e = React.useState(initialSelected), state = _e[0], setState = _e[1];
7555
+ var handleToggle = function () {
7556
+ var value = !state;
7557
+ setState(value);
7558
+ onClick && onClick(value);
7559
+ };
7560
+ return (React__default.createElement(ToggleSwitchStyled, __assign({}, props, { selected: state, stretch: stretch, size: size, onClick: handleToggle })));
7561
+ };
7562
+ var templateObject_1$X, templateObject_2$z;
7383
7563
 
7384
7564
  Object.defineProperty(exports, 'components', {
7385
7565
  enumerable: true,
@@ -7433,6 +7613,7 @@ exports.CheckboxIcon = CheckboxIcon;
7433
7613
  exports.CheckboxLabel = CheckboxLabel;
7434
7614
  exports.CheckmarkIcon = CheckmarkIcon;
7435
7615
  exports.ChevronIcon = ChevronIcon;
7616
+ exports.ChevronPopup = ChevronPopup;
7436
7617
  exports.CircleProgressIcon = CircleProgressIcon;
7437
7618
  exports.ClientApprovedIcon = ClientApprovedIcon;
7438
7619
  exports.ClipboardIcon = ClipboardIcon;
@@ -7454,6 +7635,7 @@ exports.ColumnSelectIcon = ColumnSelectIcon;
7454
7635
  exports.CommentIcon = CommentIcon;
7455
7636
  exports.CommunityIcon = CommunityIcon;
7456
7637
  exports.CompletedCheckmarkIcon = CompletedCheckmarkIcon;
7638
+ exports.ConfirmAlertPopup = ConfirmAlertPopup;
7457
7639
  exports.ConfirmPopup = ConfirmPopup;
7458
7640
  exports.ConnectedIcon = ConnectedIcon;
7459
7641
  exports.ConnectedPlusIcon = ConnectedPlusIcon;
@@ -7481,6 +7663,7 @@ exports.Dropdown = Dropdown;
7481
7663
  exports.DropdownItem = DropdownItem;
7482
7664
  exports.Dropzoned = Dropzoned;
7483
7665
  exports.DropzonedPreviews = DropzonedPreviews;
7666
+ exports.DropzonedSimple = DropzonedSimple;
7484
7667
  exports.EPOIcon = EPOIcon;
7485
7668
  exports.EditIcon = EditIcon;
7486
7669
  exports.EllipsisIcon = EllipsisIcon;
@@ -7515,6 +7698,7 @@ exports.HelpIcon = HelpIcon;
7515
7698
  exports.HistoryIcon = HistoryIcon;
7516
7699
  exports.IconButton = IconButton;
7517
7700
  exports.IconDoc = IconDoc;
7701
+ exports.ImageIcon = ImageIcon;
7518
7702
  exports.Img = Img;
7519
7703
  exports.InfoIcon = InfoIcon;
7520
7704
  exports.Input = Input;
@@ -7640,6 +7824,8 @@ exports.Thermometer = Thermometer;
7640
7824
  exports.TilesIcon = TilesIcon;
7641
7825
  exports.Toggle = Toggle;
7642
7826
  exports.ToggleLink = ToggleLink;
7827
+ exports.ToggleSwitch = ToggleSwitch;
7828
+ exports.ToggleSwitchStyled = ToggleSwitchStyled;
7643
7829
  exports.TrashIcon = TrashIcon;
7644
7830
  exports.UploadIcon = UploadIcon;
7645
7831
  exports.UserIcon = UserIcon;