@commonsku/styles 1.16.14 → 1.16.16

package/dist/index.es.js

@@ -13,6 +13,7 @@ import BaseDatePicker from 'react-datepicker';
 import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout, useFlexLayout, useExpanded } from 'react-table';
 import { useSticky } from 'react-table-sticky';
 import { areEqual, FixedSizeList, VariableSizeList } from 'react-window';
+import * as reactIs from 'react-is';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1189,7 +1190,7 @@ function GearIcon(_a) {
         React.createElement("path", { d: renderPath, fill: color }));
 }
 
-var datepickerStyles = "\n.commonsku-styles-datepicker {\n  &.react-datepicker-wrapper {\n    width: 100%;\n  }\n\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n\n  .react-datepicker {\n    border: 1px solid var(--color-primary1-60);\n    outline: none;\n    box-shadow: 1px  1px 0px var(--color-primary1-60),\n              -1px -1px 0px var(--color-primary1-60),\n              1px -1px 0px var(--color-primary1-60),\n              -1px  1px 0px var(--color-primary1-60);\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header,\n  .react-datepicker__header {\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header,\n  .react-datepicker__today-button {\n    background: var(--color-neutrals-20);\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__day {\n    outline: none;\n  }\n\n  .react-datepicker__day :not(\n    .react-datepicker__day--outside-month,\n    .react-datepicker__day--selected\n  ) {\n    color: var(--color-neutrals-90);\n  }\n\n  .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n  .react-datepicker__month-text:hover,\n  .react-datepicker__quarter-text:hover,\n  .react-datepicker__year-text:hover {\n    background-color: var(--color-neutrals-20);\n  }\n\n  .react-datepicker__day--outside-month {\n    color: var(--color-neutrals-70);\n  }\n\n  .react-datepicker__day--weekend {\n    color: var(--color-errors-main);\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected\n   {\n    background-color: var(--color-primary1-60);\n    color: #fff;\n  }\n\n  .react-datepicker__triangle {\n    border-bottom-color: var(--color-neutrals-20) !important;\n  }\n\n  .react-datepicker__triangle::before {\n    border-bottom-color: var(--color-primary1-60) !important;\n    border-top-color: var(--color-primary1-60) !important;\n  }\n\n  .react-datepicker__month-select,\n  .react-datepicker__year-select {\n    height: 30px;\n    border: 2px solid var(--color-primary1-60);\n    padding: 3px;\n    border-radius: 5px;\n    outline: none;\n  }\n\n  .react-datepicker__navigation {\n    border: 0.45rem solid transparent;\n\n    &.react-datepicker__navigation--next {\n      border-left: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  \n    &.react-datepicker__navigation--previous {\n      border-right: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  }\n\n  .react-datepicker__aria-live {\n    display: none;\n  }\n}\n";
+var datepickerStyles = "\n.commonsku-styles-datepicker {\n  &.react-datepicker-wrapper {\n    width: 100%;\n  }\n\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n\n  .react-datepicker {\n    border: 1px solid var(--color-primary1-60);\n    outline: none;\n    box-shadow: 1px  1px 0px var(--color-primary1-60),\n              -1px -1px 0px var(--color-primary1-60),\n              1px -1px 0px var(--color-primary1-60),\n              -1px  1px 0px var(--color-primary1-60);\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header,\n  .react-datepicker__header {\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header,\n  .react-datepicker__today-button {\n    background: var(--color-neutrals-20);\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__day {\n    outline: none;\n  }\n\n  .react-datepicker__day :not(\n    .react-datepicker__day--outside-month,\n    .react-datepicker__day--selected\n  ) {\n    color: var(--color-neutrals-90);\n  }\n\n  .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n  .react-datepicker__month-text:hover,\n  .react-datepicker__quarter-text:hover,\n  .react-datepicker__year-text:hover {\n    background-color: var(--color-neutrals-20);\n  }\n\n  .react-datepicker__day--outside-month {\n    color: var(--color-neutrals-70);\n  }\n\n  .react-datepicker__day--weekend {\n    color: var(--color-errors-main);\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected\n   {\n    background-color: var(--color-primary1-60);\n    color: #fff;\n  }\n\n  .react-datepicker__triangle {\n    border-bottom-color: var(--color-neutrals-20) !important;\n  }\n\n  .react-datepicker__triangle::before {\n    border-bottom-color: var(--color-primary1-60) !important;\n    border-top-color: var(--color-primary1-60) !important;\n  }\n\n  .react-datepicker__month-select,\n  .react-datepicker__year-select {\n    height: 30px;\n    border: 2px solid var(--color-primary1-60);\n    padding: 3px;\n    border-radius: 5px;\n    outline: none;\n  }\n\n  .react-datepicker__time-container {\n    margin-top: -2px;\n    border-top-left-radius: 0px;\n    border-right: 2px solid var(--color-primary1-60);\n    border-bottom: 2px solid var(--color-primary1-60);\n    border-top: 2px solid var(--color-primary1-60);\n  }\n\n  .react-datepicker__navigation {\n    border: 0.45rem solid transparent;\n\n    &.react-datepicker__navigation--next {\n      border-left: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  \n    &.react-datepicker__navigation--previous {\n      border-right: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  }\n\n  .react-datepicker__aria-live {\n    display: none;\n  }\n\n  @media only screen and (min-height: 600px) and (max-height: 800px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 15vh !important;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 5vh !important;\n    }\n\n    .react-datepicker__time-container {\n      margin-top: -2px;\n      border-top-left-radius: 0px;\n      border-right: 2px solid var(--color-primary1-60);\n      border-bottom: 2px solid var(--color-primary1-60);\n      border-top: 2px solid var(--color-primary1-60);\n    }\n  }\n}\n";
 
 var parseColorVars = function (colors, prefix) {
     if (prefix === void 0) { prefix = ''; }
@@ -2729,6 +2730,43 @@ function StarDarkIcon(_a) {
                     React.createElement("path", { d: "M816.161,1280.05C816.87,1278.39 818.503,1277.31 820.31,1277.31C822.117,1277.31 823.75,1278.39 824.459,1280.05L844.406,1326.83L895.064,1331.35C896.864,1331.51 898.395,1332.73 898.954,1334.44C899.512,1336.16 898.991,1338.05 897.628,1339.24L859.299,1372.67L870.66,1422.24C871.064,1424 870.377,1425.83 868.914,1426.9C867.452,1427.96 865.497,1428.05 863.946,1427.12L820.31,1400.99L776.674,1427.12C775.123,1428.05 773.168,1427.96 771.706,1426.9C770.243,1425.83 769.556,1424 769.96,1422.24L781.321,1372.67L742.992,1339.24C741.629,1338.05 741.108,1336.16 741.666,1334.44C742.225,1332.73 743.756,1331.51 745.556,1331.35L796.214,1326.83L816.161,1280.05Z", style: { fill: 'rgb(18,57,82)' } }))))));
 }
 
+function MagicIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c; _a.hover; _a.filled; var _f = _a.altText, altText = _f === void 0 ? "AI" : _f, props = __rest(_a, ["color", "size", "hover", "filled", "altText"]);
+    return React.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "MagicIcon" }, props),
+        React.createElement("title", { id: "MagicIcon" }, altText),
+        React.createElement("path", { d: "M19 9L20.25 6.25L23 5L20.25 3.75L19 1L17.75 3.75L15 5L17.75 6.25L19 9Z", fill: color }),
+        React.createElement("path", { d: "M19 15L17.75 17.75L15 19L17.75 20.25L19 23L20.25 20.25L23 19L20.25 17.75L19 15Z", fill: color }),
+        React.createElement("path", { d: "M11.5 9.5L9 4L6.5 9.5L1 12L6.5 14.5L9 20L11.5 14.5L17 12L11.5 9.5ZM9.99 12.99L9 15.17L8.01 12.99L5.83 12L8.01 11.01L9 8.83L9.99 11.01L12.17 12L9.99 12.99Z", fill: color }));
+}
+
+function MagicEraserIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c; _a.hover; _a.filled; var _f = _a.altText, altText = _f === void 0 ? "AI Eraser" : _f, props = __rest(_a, ["color", "size", "hover", "filled", "altText"]);
+    return React.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "MagicEraserIcon" }, props),
+        React.createElement("title", { id: "MagicEraserIcon" }, altText),
+        React.createElement("path", { d: "M20.4214 6.40604L21.3574 4.3783L23.4088 3.45302L21.3574 2.52774L20.4214 0.5L19.4853 2.52774L17.4339 3.45302L19.4853 4.3783L20.4214 6.40604Z", fill: color }),
+        React.createElement("path", { d: "M8.96951 6.40604L9.90558 4.3783L11.957 3.45302L9.90558 2.52774L8.96951 0.5L8.03345 2.52774L5.98207 3.45302L8.03345 4.3783L8.96951 6.40604Z", fill: color }),
+        React.createElement("path", { d: "M20.4214 11.8199L19.4853 13.8477L17.4339 14.7729L19.4853 15.6982L20.4214 17.7259L21.3574 15.6982L23.4088 14.7729L21.3574 13.8477L20.4214 11.8199Z", fill: color }),
+        React.createElement("path", { d: "M19.4853 9.8217L14.2374 4.62438C14.0382 4.43736 13.7892 4.33893 13.5303 4.33893C13.2714 4.33893 13.0225 4.43736 12.8233 4.62438L1.70006 15.6195C1.31169 16.0034 1.31169 16.6235 1.70006 17.0074L6.94801 22.2047C7.14717 22.4016 7.39613 22.5 7.65504 22.5C7.91395 22.5 8.1629 22.4016 8.36207 22.2145L19.4853 11.2195C19.8737 10.8356 19.8737 10.2056 19.4853 9.8217ZM13.5303 6.72103L17.3642 10.5206L14.9344 12.8928L11.1005 9.09329L13.5303 6.72103ZM7.65504 20.1277L3.82114 16.3282L9.69643 10.4812L13.5303 14.2808L7.65504 20.1277Z", fill: color }));
+}
+
+function TrendIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.direction, direction = _c === void 0 ? "up" : _c, _d = _a.altText, altText = _d === void 0 ? "Trend Direction" : _d, props = __rest(_a, ["size", "direction", "altText"]);
+    return React.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "Trend" }, props),
+        React.createElement("title", { id: "Trend" }, altText),
+        {
+            'up': React.createElement("path", { d: "M16 6L18.29 8.29L13.41 13.17L9.41 9.17L2 16.59L3.41 18L9.41 12L13.41 16L19.71 9.71L22 12V6H16Z", fill: green['60'] }),
+            'down': React.createElement("path", { d: "M16 18L18.29 15.71L13.41 10.83L9.41 14.83L2 7.41L3.41 6L9.41 12L13.41 8L19.71 14.29L22 12V18H16Z", fill: errors['60'] }),
+            'flat': React.createElement("path", { d: "M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z", fill: neutrals['60'] })
+        }[direction]);
+}
+
+function SlideInIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c; _a.hover; _a.filled; var _f = _a.altText, altText = _f === void 0 ? "Open panel" : _f, props = __rest(_a, ["color", "size", "hover", "filled", "altText"]);
+    return React.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "SlideInIcon" }, props),
+        React.createElement("title", { id: "SlideInIcon" }, altText),
+        React.createElement("path", { d: "M3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999ZM3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999Z", fill: color }));
+}
+
 var avatarSizes = {
     tiny: {
         size: '24px',
@@ -2934,20 +2972,6 @@ function DropzonedPreviews(_a) {
                 ? React.createElement(ThumbsContainer, null, thumbs)
                 : React.createElement(PlaceHolder, null, placeholder))));
 }
-function DropzonedSimple(_a) {
-    var accept = _a.accept, children = _a.children, props = __rest(_a, ["accept", "children"]);
-    var _b = 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.Children.only(children);
-    if (!Child) {
-        return null;
-    }
-    var ChildElem = React.cloneElement(Child, {
-        acceptedFiles: acceptedFiles,
-        inputProps: getInputProps(),
-        rootProps: getRootProps({ isDragActive: isDragActive, isDragAccept: isDragAccept, isDragReject: isDragReject }),
-    });
-    return ChildElem;
-}
 var templateObject_1$L, templateObject_2$r, templateObject_3$j, templateObject_4$e, templateObject_5$8, templateObject_6$8;
 
 /*
@@ -3692,10 +3716,13 @@ var popupStyles = {
 };
 function skuSelectStyles(props) {
     return {
+        container: function (provided, state) {
+            return __assign(__assign({}, provided), props.containerStyles);
+        },
         clearIndicator: function (provided, state) {
-            return __assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color), ':hover': {
+            return __assign(__assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color), ':hover': {
                     color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color),
-                } });
+                } }), props.clearIndicatorStyles);
         },
         dropdownIndicator: function (provided, state) {
             var styles = {
@@ -3711,16 +3738,16 @@ function skuSelectStyles(props) {
             if (state.isDisabled) {
                 styles['color'] = getThemeColor(props, 'select.dropdownIcon.disabled', colors.select.dropdownIcon.disabled);
             }
-            return __assign(__assign({}, provided), styles);
+            return __assign(__assign(__assign({}, provided), styles), props.dropdownIndicatorStyles);
         },
-        indicatorSeparator: function (provided, state) { return (__assign(__assign({}, provided), { display: 'none' })); },
+        indicatorSeparator: function (provided, state) { return (__assign(__assign(__assign({}, provided), { display: 'none' }), props.indicatorSeparatorStyles)); },
         option: function (provided, state) {
-            return (__assign(__assign(__assign({}, provided), (get(state.data, 'styles') || {})), { borderBottom: 'none', padding: 10 }));
+            return __assign(__assign(__assign(__assign({}, provided), (get(state.data, 'styles') || {})), { borderBottom: 'none', padding: 10 }), props.optionStyles);
         },
         input: function (provided, state) {
-            return __assign(__assign({}, provided), { height: 'auto', borderColor: props.error
+            return __assign(__assign(__assign({}, provided), { height: 'auto', borderColor: props.error
                     ? getThemeColor(props, 'select.error.border', colors.select.error.border)
-                    : getThemeColor(props, 'select.border', colors.select.border) });
+                    : getThemeColor(props, 'select.border', colors.select.border) }), props.inputStyles);
         },
         control: function (provided, state) {
             var styles = {
@@ -3760,11 +3787,11 @@ function skuSelectStyles(props) {
                     ? getThemeColor(props, 'select.error.border', colors.select.error.border)
                     : provided.borderColor;
             }
-            return (__assign(__assign(__assign({}, provided), styles), { ':hover': {
+            return (__assign(__assign(__assign(__assign({}, provided), styles), { ':hover': {
                     borderColor: props.error
                         ? getThemeColor(props, 'select.error.border', colors.select.error.border)
                         : getThemeColor(props, 'select.active.border', colors.select.active.border),
-                } }));
+                } }), props.controlStyles));
         },
         menu: function (provided, state) {
             var borderColor = props.error
@@ -3793,21 +3820,21 @@ function skuSelectStyles(props) {
                 styles['marginTop'] = '0px';
                 styles['marginBottom'] = '0px';
             }
-            return (__assign(__assign({}, provided), styles));
+            return __assign(__assign(__assign({}, provided), styles), props.menuStyles);
         },
         menuList: function (provided, state) {
-            return __assign(__assign({}, provided), { paddingBottom: 0 });
+            return __assign(__assign(__assign({}, provided), { paddingBottom: 0 }), props.menuListStyles);
         },
         menuPortal: function (provided, state) {
-            return __assign(__assign({}, provided), { zIndex: 9999 });
+            return __assign(__assign(__assign({}, provided), { zIndex: 9999 }), props.menuPortalStyles);
         },
         singleValue: function (provided, state) {
             var opacity = state.isDisabled ? 0.5 : 1;
             var transition = 'opacity 300ms';
-            return __assign(__assign({}, provided), { opacity: opacity, transition: transition });
+            return __assign(__assign(__assign({}, provided), { opacity: opacity, transition: transition }), props.singleValueStyles);
         },
         valueContainer: function (provided, state) {
-            return __assign(__assign({}, provided), { padding: '2px 8px' });
+            return __assign(__assign(__assign({}, provided), { padding: '2px 8px' }), props.valueContainerStyles);
         },
     };
 }
@@ -3823,9 +3850,9 @@ var SKUSelect = React.forwardRef(function (_a, ref) {
     return React.createElement(BaseSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
 });
 var LabeledSelect = React.forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
-        React.createElement(Label, { htmlFor: props.name },
+        React.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -3839,9 +3866,9 @@ var SKUCreatableSelect = React.forwardRef(function (_a, ref) {
     return (React.createElement(BaseCreatableSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledCreatableSelect = React.forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
-        React.createElement(Label, { htmlFor: props.name },
+        React.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -3855,9 +3882,9 @@ var SKUAsyncSelect = React.forwardRef(function (_a, ref) {
     return (React.createElement(BaseAsyncSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledAsyncSelect = React.forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
-        React.createElement(Label, { htmlFor: props.name },
+        React.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -4937,12 +4964,12 @@ var templateObject_1$p, templateObject_2$c, templateObject_3$7, templateObject_4
 var CustomDateInput = React.forwardRef(function (_a, ref) {
     var error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable, props = __rest(_a, ["error", "noMargin", "onClick", "isClearable"]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input, __assign({ ref: ref, noMargin: noMargin, error: error, style: { marginRight: '2rem', display: 'inline-block' }, className: "react-datepicker-ignore-onclickoutside", type: "text", autoComplete: "off" }, props)),
+        React.createElement(Input, __assign({ ref: ref, noMargin: noMargin, error: error, style: { marginRight: '2rem', display: 'inline-block' }, type: "text", autoComplete: "off" }, props)),
         React.createElement("span", { style: { fontStyle: 'normal', cursor: 'pointer', position: 'absolute', top: '8px', right: '5px' }, onClick: onClick }, !isClearable ? React.createElement(CalendarIcon, { style: { width: '1.9rem', verticalAlign: 'middle', } }) : null)));
 });
 var Datepicker = React.forwardRef(function (_a, ref) {
-    var error = _a.error, value = _a.value, customInput = _a.customInput, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.todayButton, todayButton = _c === void 0 ? 'Today' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'yyyy-MM-dd' : _d, _e = _a.placeholderText, placeholderText = _e === void 0 ? 'yyyy-MM-dd' : _e, _f = _a.dateFormat, dateFormat = _f === void 0 ? 'yyyy-MM-dd' : _f, _g = _a.isClearable, isClearable = _g === void 0 ? false : _g, _h = _a.peekNextMonth, peekNextMonth = _h === void 0 ? true : _h, _j = _a.showMonthDropdown, showMonthDropdown = _j === void 0 ? true : _j, _k = _a.showYearDropdown, showYearDropdown = _k === void 0 ? true : _k, _l = _a.showPopperArrow, showPopperArrow = _l === void 0 ? false : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? "select" : _m, _o = _a.nextMonthButtonLabel, nextMonthButtonLabel = _o === void 0 ? "" : _o, _p = _a.nextYearButtonLabel, nextYearButtonLabel = _p === void 0 ? "" : _p, _q = _a.previousMonthButtonLabel, previousMonthButtonLabel = _q === void 0 ? "" : _q, _r = _a.previousYearButtonLabel, previousYearButtonLabel = _r === void 0 ? "" : _r, popperClassName = _a.popperClassName, wrapperClassName = _a.wrapperClassName, props = __rest(_a, ["error", "value", "customInput", "locale", "todayButton", "placeholder", "placeholderText", "dateFormat", "isClearable", "peekNextMonth", "showMonthDropdown", "showYearDropdown", "showPopperArrow", "dropdownMode", "nextMonthButtonLabel", "nextYearButtonLabel", "previousMonthButtonLabel", "previousYearButtonLabel", "popperClassName", "wrapperClassName"]);
-    return (React.createElement(BaseDatePicker, __assign({ locale: locale, selected: value || props.selected, todayButton: todayButton, customInput: customInput || React.createElement(CustomDateInput, { noMargin: true, error: error, isClearable: isClearable }), dateFormat: dateFormat, placeholderText: placeholder || placeholderText, isClearable: isClearable, showMonthDropdown: showMonthDropdown, showYearDropdown: showYearDropdown, nextMonthButtonLabel: nextMonthButtonLabel, nextYearButtonLabel: nextYearButtonLabel, previousMonthButtonLabel: previousMonthButtonLabel, previousYearButtonLabel: previousYearButtonLabel, dropdownMode: dropdownMode, peekNextMonth: peekNextMonth, popperClassName: "commonsku-styles-datepicker ".concat(popperClassName || ''), wrapperClassName: "commonsku-styles-datepicker ".concat(wrapperClassName || ''), showPopperArrow: showPopperArrow }, props, { ref: ref })));
+    var error = _a.error, value = _a.value, customInput = _a.customInput, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.todayButton, todayButton = _c === void 0 ? 'Today' : _c, placeholder = _a.placeholder, placeholderText = _a.placeholderText, _d = _a.dateFormat, dateFormat = _d === void 0 ? 'yyyy-MM-dd' : _d, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.peekNextMonth, peekNextMonth = _f === void 0 ? true : _f, _g = _a.showMonthDropdown, showMonthDropdown = _g === void 0 ? true : _g, _h = _a.showYearDropdown, showYearDropdown = _h === void 0 ? true : _h, _j = _a.showPopperArrow, showPopperArrow = _j === void 0 ? false : _j, _k = _a.dropdownMode, dropdownMode = _k === void 0 ? "select" : _k, _l = _a.nextMonthButtonLabel, nextMonthButtonLabel = _l === void 0 ? "" : _l, _m = _a.nextYearButtonLabel, nextYearButtonLabel = _m === void 0 ? "" : _m, _o = _a.previousMonthButtonLabel, previousMonthButtonLabel = _o === void 0 ? "" : _o, _p = _a.previousYearButtonLabel, previousYearButtonLabel = _p === void 0 ? "" : _p, popperClassName = _a.popperClassName, wrapperClassName = _a.wrapperClassName, props = __rest(_a, ["error", "value", "customInput", "locale", "todayButton", "placeholder", "placeholderText", "dateFormat", "isClearable", "peekNextMonth", "showMonthDropdown", "showYearDropdown", "showPopperArrow", "dropdownMode", "nextMonthButtonLabel", "nextYearButtonLabel", "previousMonthButtonLabel", "previousYearButtonLabel", "popperClassName", "wrapperClassName"]);
+    return (React.createElement(BaseDatePicker, __assign({ locale: locale, selected: value || props.selected, todayButton: todayButton, customInput: customInput || React.createElement(CustomDateInput, { noMargin: true, error: error, isClearable: isClearable }), dateFormat: dateFormat, placeholderText: placeholder || placeholderText || 'yyyy-MM-dd', isClearable: isClearable, showMonthDropdown: showMonthDropdown, showYearDropdown: showYearDropdown, nextMonthButtonLabel: nextMonthButtonLabel, nextYearButtonLabel: nextYearButtonLabel, previousMonthButtonLabel: previousMonthButtonLabel, previousYearButtonLabel: previousYearButtonLabel, dropdownMode: dropdownMode, peekNextMonth: peekNextMonth, popperClassName: "commonsku-styles-datepicker ".concat(popperClassName || ''), wrapperClassName: "commonsku-styles-datepicker ".concat(wrapperClassName || ''), showPopperArrow: showPopperArrow }, props, { ref: ref })));
 });
 
 var StyledDropdown$2 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n&&& {\n    position: relative;\n    display: inline-block;\n}\n"], ["\n&&& {\n    position: relative;\n    display: inline-block;\n}\n"])));
@@ -5305,11 +5332,12 @@ function HeadlessTable(_a) {
                               }, 1000, { 'trailing': true })
                             } */
                         }, onDrop: column.noDrag ? undefined : onDrop, className: "th", width: column.width, onClick: function () {
+                            var _a, _b, _c;
                             column.isSorted
                                 ? column.isSortedDesc
-                                    ? column.clearSortBy()
-                                    : column.toggleSortBy(true)
-                                : column.toggleSortBy(false);
+                                    ? (_a = column.clearSortBy) === null || _a === void 0 ? void 0 : _a.call(column)
+                                    : (_b = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _b === void 0 ? void 0 : _b.call(column, true)
+                                : (_c = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _c === void 0 ? void 0 : _c.call(column, false);
                             var direction;
                             if (column.isSorted) {
                                 if (column.isSortedDesc) {
@@ -5361,18 +5389,19 @@ function HeadlessTable(_a) {
                                         scrollOffsetDivRef.current.innerText = scrollOffset;
                                     }
                                 }, onDragStart: onDragStart, onDrop: onDrop, onHeaderColumnClick: function (column) {
+                                    var _a, _b;
                                     var sortDirectionState = {};
                                     if (column.isSorted) {
                                         if (column.isSortedDesc) {
                                             column.clearSortBy();
                                         }
                                         else {
-                                            column.toggleSortBy(true);
+                                            (_a = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _a === void 0 ? void 0 : _a.call(column, true);
                                             sortDirectionState = { accessor: column.id, direction: 'DESC' };
                                         }
                                     }
                                     else {
-                                        column.toggleSortBy(false);
+                                        (_b = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _b === void 0 ? void 0 : _b.call(column, false);
                                         sortDirectionState = { accessor: column.id, direction: 'ASC' };
                                     }
                                     setSortDirection(sortDirectionState);
@@ -6358,6 +6387,32 @@ var AlertNotification = function (_a) {
 };
 var templateObject_1$c;
 
+var RenderChild = React.forwardRef(function (_a, ref) {
+    var children = _a.children, parseProps = _a.parseProps, props = __rest(_a, ["children", "parseProps"]);
+    var ChildElement = React.Children.only(children);
+    var elementProps = useMemo(function () {
+        if (typeof ChildElement === 'string'
+            || typeof ChildElement === 'number'
+            || typeof ChildElement === 'boolean'
+            || typeof ChildElement === 'undefined'
+            || ChildElement === null) {
+            return props;
+        }
+        return __assign(__assign({}, (parseProps ? parseProps(props, ChildElement) : props)), { ref: ref });
+    }, [parseProps, props, ChildElement, ref]);
+    if (typeof ChildElement === 'string'
+        || typeof ChildElement === 'number'
+        || typeof ChildElement === 'boolean'
+        || typeof ChildElement === 'undefined'
+        || ChildElement === null) {
+        return (React.createElement(React.Fragment, null, ChildElement));
+    }
+    if (reactIs.isElement(ChildElement)) {
+        return React.cloneElement(ChildElement, elementProps);
+    }
+    return (React.createElement(ChildElement, __assign({}, elementProps, { ref: ref })));
+});
+
 function useNumberInput(props) {
     var _a = props.defaultValue, defaultValue = _a === void 0 ? "" : _a, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, inputMode = props.inputMode, _b = props.localeOptions, localeOptions = _b === void 0 ? {} : _b;
     var inputRef = useRef(null);
@@ -6445,7 +6500,8 @@ function NumberInput(props) {
             ? React.createElement(LabeledInput, __assign({}, inputProps, { label: label, ref: ref }))
             : React.createElement(Input, __assign({}, inputProps, { ref: ref })),
         icon && type !== 'number'
-            ? React.createElement("span", { style: iconWrapperStyles, onClick: handleClickIcon }, icon)
+            ? React.createElement("span", { style: iconWrapperStyles, onClick: handleClickIcon },
+                React.createElement(RenderChild, null, icon))
             : null));
 }
 
@@ -6562,8 +6618,9 @@ var VirtualTable = function (props) {
         return '100%';
     }, [windowSize, rowsRef]);
     var handleSort = useCallback(function (column) {
+        var _a;
         listRef.current && listRef.current.resetAfterIndex(0);
-        column.toggleSortBy();
+        (_a = column.toggleSortBy) === null || _a === void 0 ? void 0 : _a.call(column);
         onSort && onSort({ column: column });
     }, [onSort]);
     function onListScroll(e) {
@@ -7645,5 +7702,49 @@ var ToggleSwitch = function (_a) {
 };
 var templateObject_1, templateObject_2;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzoned, DropzonedPreviews, DropzonedSimple, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+/**
+ * Dropzone
+ *
+ * if `useDropzoneProps={true}` is passed then dropzone options props will passed to child element
+ *
+ * Example with `useDropzoneProps={true}` (dropzone props will be passed in children):
+ * ```
+ * const DropzoneChild = ({ open, ...dropzoneOptions }) => {
+ *   // do something with dropzoneOptions...
+ *   return (
+ *     <>
+ *       <button onClick={open}>Upload</button>
+ *       <div>{draggedFiles.map(f => <div>{f.name (f.type)}</div>)}</div>
+ *     </>
+ *   );
+ * };
+ *
+ * <Dropzone useDropzoneProps={true} noClick={true} onDrop={...}>
+ *   <DropzoneChild />
+ * </Dropzone>
+ * ```
+ *
+ * ---------------------------------------------------------
+ *
+ * Example without `useDropzoneProps` (dropzone props will NOT be passed in children):
+ * ```
+ * <Dropzone onDrop={...}>
+ *   <button onClick={() => {}}>Upload</button>
+ * </Dropzone>
+ * ```
+ *
+ */
+var Dropzone = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rootProps = _a.rootProps, inputProps = _a.inputProps, _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.useDropzoneProps, useDropzoneProps = _c === void 0 ? false : _c, props = __rest(_a, ["children", "className", "rootProps", "inputProps", "style", "useDropzoneProps"]);
+    var _d = useDropzone(props), getRootProps = _d.getRootProps, rootRef = _d.rootRef, getInputProps = _d.getInputProps, inputRef = _d.inputRef, rest = __rest(_d, ["getRootProps", "rootRef", "getInputProps", "inputRef"]);
+    useImperativeHandle(ref, function () { return ({ open: rest.open }); }, [rest.open]);
+    var allRootProps = getRootProps(rootProps);
+    var parseChildProps = useCallback(function (p, Child) { return (useDropzoneProps ? rest : {}); }, [rest, useDropzoneProps]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({}, allRootProps, { ref: rootRef, className: className, style: __assign(__assign({}, allRootProps.style), style) }),
+            React.createElement("input", __assign({}, getInputProps(inputProps), { ref: inputRef })),
+            React.createElement(RenderChild, { parseProps: parseChildProps }, children))));
+});
+
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
 //# sourceMappingURL=index.es.js.map