@commonsku/styles 1.16.10 → 1.16.12-1

package/dist/index.js

@@ -369,10 +369,14 @@ var getUnit = function (measurement) {
     var matchedMeasurement = measurement.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/);
     return matchedMeasurement ? matchedMeasurement[2] : "px";
 };
+var isCalOrPercent = function (measurement) { return (measurement.endsWith('%') || measurement.includes('calc')); };
 var stripUnit = function (measurement) {
     return (typeof measurement === "number") ? measurement : parseFloat(measurement);
 };
-var parseMeasurement = function (measurement) { return stripUnit(measurement) + getUnit(measurement); };
+var parseMeasurement = function (measurement) {
+    return typeof measurement === 'string' && isCalOrPercent(measurement)
+        ? measurement : stripUnit(measurement) + getUnit(measurement);
+};
 var wait = function (time) {
     var timeoutId;
     var promise = new Promise(function (resolve) {
@@ -2604,6 +2608,49 @@ function DoubleArrowIcon(_a) {
         React__default.createElement("path", { d: directionPaths[1], fill: color })));
 }
 
+var iconSizes$5 = {
+    tiny: {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 32 32",
+    },
+    small: {
+        width: 24,
+        height: 24,
+        viewBox: "0 0 32 32",
+    },
+    medium: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+    },
+    large: {
+        width: 40,
+        height: 40,
+        viewBox: "0 0 32 32",
+    },
+    huge: {
+        width: 48,
+        height: 48,
+        viewBox: "0 0 32 32",
+    },
+    default: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+    },
+};
+function ImageIcon(props) {
+    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"]);
+    var id = _.uniqueId('clip0_1244_70960');
+    return (React__default.createElement(SVG, __assign({ size: size, iconSizes: iconSizes$5, "aria-labelledby": altText, fill: "none" }, rest),
+        React__default.createElement("g", { clipPath: "url(#".concat(id, ")") },
+            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 })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: id },
+                React__default.createElement("rect", { width: "32", height: "32", fill: "white" })))));
+}
+
 var avatarSizes = {
     tiny: {
         size: '24px',
@@ -2809,6 +2856,20 @@ function DropzonedPreviews(_a) {
                 ? React__default.createElement(ThumbsContainer, null, thumbs)
                 : React__default.createElement(PlaceHolder, null, placeholder))));
 }
+function DropzonedSimple(_a) {
+    var accept = _a.accept, children = _a.children, props = __rest(_a, ["accept", "children"]);
+    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;
+    var Child = React__default.Children.only(children);
+    if (!Child) {
+        return null;
+    }
+    var ChildElem = React__default.cloneElement(Child, {
+        acceptedFiles: acceptedFiles,
+        inputProps: getInputProps(),
+        rootProps: getRootProps({ isDragActive: isDragActive, isDragAccept: isDragAccept, isDragReject: isDragReject }),
+    });
+    return ChildElem;
+}
 var templateObject_1$c, templateObject_2$7, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$1;
 
 /*
@@ -6615,7 +6676,8 @@ var parseCskuStyles = function (p) {
     });
     return __spreadArray([stylesObj, sizeStylesObj], stylesArr, true);
 };
-var Csku = styled__default.div(parseCskuStyles);
+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 ? '}' : ''; });
+var templateObject_1$O;
 
 var Grid = styled__default.div(function (p) {
     var params = {
@@ -6779,8 +6841,56 @@ var ConfirmPopup = function (props) {
                 }, disabled: disableDelete }, "Delete"))));
 };
 
-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    " : ''; });
-var templateObject_1$O;
+var ConfirmAlertPopup = function (props) {
+    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;
+    return (React__default.createElement(Popup, { width: 'auto', height: 'auto', padding: padding, style: { borderRadius: 10, maxWidth: maxWidth, }, noHeader: true, noCloseButton: true },
+        title ? React__default.createElement(PopupTitle, null, title) : null,
+        React__default.createElement(PopupContent, null, children),
+        React__default.createElement(Row, { style: { justifyContent: 'center', marginTop: 16, } },
+            React__default.createElement(Col, { xs: true, md: 5.75, mdStyle: { marginRight: 16 } },
+                React__default.createElement(Button, { size: "medium", variant: 'secondary', onClick: function () {
+                        onClose && onClose();
+                    }, style: { width: '100%' } }, cancelButtonContent)),
+            React__default.createElement(Col, { xs: true, md: 5.75, xsStyle: { marginTop: 16 }, mdStyle: { marginTop: 0 } },
+                React__default.createElement(Button, { size: "medium", variant: disableActionButton ? 'disabled' : 'error', onClick: function () {
+                        onAction && onAction();
+                    }, disabled: disableActionButton, style: { width: '100%' } }, actionButtonContent)))));
+};
+var PopupTitle = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("h2", { style: {
+            fontFamily: 'var(--font-family-bold)',
+            fontSize: fontStyles.h2.fontSize,
+            lineHeight: fontStyles.h2.lineHeight,
+            color: 'var(--color-neutrals-90)',
+            paddingBottom: 16,
+            margin: 0,
+        } }, children));
+};
+var PopupContent = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("div", { style: {
+            background: colors.errors[10],
+            color: colors.errors.main,
+            padding: 16,
+        } },
+        React__default.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
+            React__default.createElement("div", { style: {
+                    paddingRight: 16,
+                    verticalAlign: 'middle',
+                    alignSelf: 'center',
+                } },
+                React__default.createElement(AlertIcon, { size: 'medium', color: colors.errors[70] })),
+            React__default.createElement("div", { style: {
+                    fontFamily: 'var(--font-family-regular)',
+                    fontSize: fontStyles.p.large.fontSize,
+                    lineHeight: fontStyles.p.medium.lineHeight,
+                    color: colors.errors.main,
+                } }, children))));
+};
+
+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    " : ''; });
+var templateObject_1$P;
 
 var CalendarDayBody = function (_a) {
     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 +6905,8 @@ var CalendarDayBody = function (_a) {
     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)));
 };
 
-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"])));
-var templateObject_1$P;
+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"])));
+var templateObject_1$Q;
 
 var CalendarDaysBody = function (_a) {
     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 +6918,12 @@ var CalendarDaysBody = function (_a) {
         }))));
 };
 
-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"])));
-var templateObject_1$Q;
-
-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    ") : ''; });
+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"])));
 var templateObject_1$R;
 
+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    ") : ''; });
+var templateObject_1$S;
+
 var CalendarDaysHeader = function (_a) {
     var currentMonth = _a.currentMonth, selectedDate = _a.selectedDate, weekend = _a.weekend;
     var startDate = dateFns.startOfWeek(currentMonth, { weekStartsOn: 1 });
@@ -6827,12 +6937,12 @@ var CalendarDaysHeader = function (_a) {
     })));
 };
 
-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"])));
-var templateObject_1$S;
-
-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"])));
+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"])));
 var templateObject_1$T;
 
+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"])));
+var templateObject_1$U;
+
 var DefaultCalendarFooter = function (_a) {
     var currentWeek = _a.currentWeek;
     return (React__default.createElement(HeaderWrapper, { middle: true },
@@ -6864,7 +6974,7 @@ var TasksCalendarDayBody = function (_a) {
         React__default.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })));
 };
 
-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"])));
+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"])));
 var CalendarIconDatePicker = React__default.forwardRef(function (_a, ref) {
     var value = _a.value, onClick = _a.onClick;
     return (React__default.createElement("span", { ref: ref, onClick: onClick },
@@ -6937,7 +7047,7 @@ var TasksCalendarHeader = function (_a) {
                 } }, "+ Add Task")
             : null)));
 };
-var templateObject_1$U;
+var templateObject_1$V;
 
 var TasksCalendarFooter = function (_a) {
     var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
@@ -7289,7 +7399,7 @@ var scrollbarWidth = function () {
     return scrollbarWidth;
 };
 
-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 ?
+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 ?
     "border: ".concat(typeof p.bordered === 'string'
         ? p.bordered
         : "1px solid ".concat(getThemeColor(p, 'tableBorder', '#edf2f5')), ";")
@@ -7379,7 +7489,64 @@ function SimpleWindowedTable(_a) {
         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)),
         !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));
 }
-var templateObject_1$V;
+var templateObject_1$W;
+
+var toggleSizes$1 = {
+    small: {
+        'font-family': fontStyles.button.small.fontFamily,
+        'font-size': fontStyles.button.small.fontSize,
+        'line-height': fontStyles.button.small.lineHeight,
+        padding: '8px 12px',
+        borderRadius: '4px',
+        height: '15px',
+    },
+    medium: {
+        'font-family': fontStyles.button.medium.fontFamily,
+        'font-size': fontStyles.button.medium.fontSize,
+        'line-height': fontStyles.button.medium.lineHeight,
+        padding: '8px 16px',
+        borderRadius: '4px',
+        height: '20px',
+    },
+    large: {
+        'font-family': fontStyles.button.large.fontFamily,
+        'font-size': fontStyles.button.large.fontSize,
+        'line-height': fontStyles.button.large.lineHeight,
+        padding: '12px 24px',
+        borderRadius: '4px',
+        height: '35px',
+    }
+};
+var createAnimationLeftStyle = function (p) {
+    if (p.stretch) {
+        return "calc(100% * 1.5px)";
+    }
+    return "".concat(stripUnit(toggleSizes$1[p.size || 'medium'].height) * 1.5, "px");
+};
+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
+    ? getThemeColor(p, 'teal.main', 'var(--color-primary1-main)')
+    : getThemeColor(p, 'teal.20', colors.teal['20']); }, function (p) { return p.stretch
+    ? '100%'
+    : "".concat(stripUnit(toggleSizes$1[p.size || 'medium'].height) * 2.5, "px"); }, createAnimationLeftStyle, createAnimationLeftStyle);
+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
+    ? 'switch-slide-to-right .3s forwards 1'
+    : 'switch-slide-to-left .3s forwards 1'; });
+var ToggleSwitchStyled = function (_a) {
+    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"]);
+    return (React__default.createElement(ContainerStyled, __assign({ selected: selected, stretch: stretch, size: size, onClick: onClick, style: style }, props),
+        React__default.createElement(ToggleSwitchDotStyled, { selected: selected, stretch: stretch, size: size })));
+};
+var ToggleSwitch = function (_a) {
+    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"]);
+    var _e = React.useState(initialSelected), state = _e[0], setState = _e[1];
+    var handleToggle = function () {
+        var value = !state;
+        setState(value);
+        onClick && onClick(value);
+    };
+    return (React__default.createElement(ToggleSwitchStyled, __assign({}, props, { selected: state, stretch: stretch, size: size, onClick: handleToggle })));
+};
+var templateObject_1$X, templateObject_2$z;
 
 Object.defineProperty(exports, 'components', {
     enumerable: true,
@@ -7454,6 +7621,7 @@ exports.ColumnSelectIcon = ColumnSelectIcon;
 exports.CommentIcon = CommentIcon;
 exports.CommunityIcon = CommunityIcon;
 exports.CompletedCheckmarkIcon = CompletedCheckmarkIcon;
+exports.ConfirmAlertPopup = ConfirmAlertPopup;
 exports.ConfirmPopup = ConfirmPopup;
 exports.ConnectedIcon = ConnectedIcon;
 exports.ConnectedPlusIcon = ConnectedPlusIcon;
@@ -7481,6 +7649,7 @@ exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem;
 exports.Dropzoned = Dropzoned;
 exports.DropzonedPreviews = DropzonedPreviews;
+exports.DropzonedSimple = DropzonedSimple;
 exports.EPOIcon = EPOIcon;
 exports.EditIcon = EditIcon;
 exports.EllipsisIcon = EllipsisIcon;
@@ -7515,6 +7684,7 @@ exports.HelpIcon = HelpIcon;
 exports.HistoryIcon = HistoryIcon;
 exports.IconButton = IconButton;
 exports.IconDoc = IconDoc;
+exports.ImageIcon = ImageIcon;
 exports.Img = Img;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;
@@ -7640,6 +7810,8 @@ exports.Thermometer = Thermometer;
 exports.TilesIcon = TilesIcon;
 exports.Toggle = Toggle;
 exports.ToggleLink = ToggleLink;
+exports.ToggleSwitch = ToggleSwitch;
+exports.ToggleSwitchStyled = ToggleSwitchStyled;
 exports.TrashIcon = TrashIcon;
 exports.UploadIcon = UploadIcon;
 exports.UserIcon = UserIcon;