@commonsku/styles 1.16.15 → 1.17.0

package/dist/{index.es.js → index.mjs}

@@ -1,6 +1,6 @@
 import _, { map, pick, keys, isUndefined, get, uniqueId, assign, range as range$1, isEmpty, tail, toNumber, isString, filter, partial, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
-import React, { useMemo, Fragment, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, createContext, memo, forwardRef, useLayoutEffect } from 'react';
+import React, { useMemo, Fragment, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, forwardRef, createContext, memo, useLayoutEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
 import BaseSelect from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
@@ -8,12 +8,12 @@ import BaseCreatableSelect from 'react-select/creatable';
 import BaseAsyncSelect from 'react-select/async';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import ReactDOM from 'react-dom';
-import { getWeek, addDays, subWeeks, addWeeks, getMonth, getYear, isSameDay, subMonths, addMonths, format, startOfWeek, isDate, lastDayOfWeek } from 'date-fns';
-import BaseDatePicker from 'react-datepicker';
+import { getWeek, addDays, subWeeks, addWeeks, getMonth, getYear, isSameDay, subMonths, addMonths, format, startOfWeek, lastDayOfWeek, isDate } from 'date-fns';
+import ReactDatePicker 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';
+import * as require$$0 from 'react-is';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1190,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  @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}\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 = ''; }
@@ -2730,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',
@@ -4924,16 +4961,18 @@ var ErrorBoundary = /** @class */ (function (_super) {
 }(Component));
 var templateObject_1$p, templateObject_2$c, templateObject_3$7, templateObject_4$3;
 
-var CustomDateInput = React.forwardRef(function (_a, ref) {
+var CustomDateInput = 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 })));
-});
+// @ts-ignore
+var ReactDatePickerComponent = ReactDatePicker.default || ReactDatePicker;
+var Datepicker = function (_a) {
+    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(ReactDatePickerComponent, __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)));
+};
 
 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"])));
 var DropdownItem$2 = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n&&& {\n    color: ", ";\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    ", "\n    :last-child {\n        border-bottom: none;\n    }\n\n    &:hover {\n        background-color: ", ";\n        border-radius: 5px;\n        cursor: pointer;\n    }\n}\n"], ["\n&&& {\n    color: ", ";\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    ", "\n    :last-child {\n        border-bottom: none;\n    }\n\n    &:hover {\n        background-color: ", ";\n        border-radius: 5px;\n        cursor: pointer;\n    }\n}\n"])), function (p) { return getColor$1('primary'); }, function (p) { return p.underlined &&
@@ -6350,7 +6389,7 @@ var AlertNotification = function (_a) {
 };
 var templateObject_1$c;
 
-var RenderChild = function (_a) {
+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 () {
@@ -6361,8 +6400,8 @@ var RenderChild = function (_a) {
             || ChildElement === null) {
             return props;
         }
-        return parseProps ? parseProps(props, ChildElement) : props;
-    }, [parseProps, props, ChildElement]);
+        return __assign(__assign({}, (parseProps ? parseProps(props, ChildElement) : props)), { ref: ref });
+    }, [parseProps, props, ChildElement, ref]);
     if (typeof ChildElement === 'string'
         || typeof ChildElement === 'number'
         || typeof ChildElement === 'boolean'
@@ -6370,11 +6409,11 @@ var RenderChild = function (_a) {
         || ChildElement === null) {
         return (React.createElement(React.Fragment, null, ChildElement));
     }
-    if (reactIs.isElement(ChildElement)) {
+    if (require$$0.isElement(ChildElement)) {
         return React.cloneElement(ChildElement, elementProps);
     }
-    return (React.createElement(ChildElement, __assign({}, 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;
@@ -7091,6 +7130,58 @@ var TasksCalendarDayBody = function (_a) {
         React.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })));
 };
 
+var TasksCalendarFooter = function (_a) {
+    var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
+    return (React.createElement(HeaderWrapper, null,
+        React.createElement(Col, { start: true, xs: true },
+            React.createElement("span", { style: { display: 'inline-flex' } }, "Overdue: "),
+            React.createElement("span", { style: { display: 'inline-flex' } },
+                React.createElement(Row, null, tasks
+                    /* eslint-disable eqeqeq */
+                    .filter(function (t) { return t.date ? currentWeek == getWeek(t.date) : true; })
+                    .map(function (t) { return (React.createElement(Col, { xs: true, md: 3, padded: true },
+                    React.createElement(CalendarTask, __assign({}, t, { date: undefined })))); }))))));
+};
+
+var Calendar = function (_a) {
+    var _b = _a.components, components = _b === void 0 ? {} : _b, extraProps = _a.extraProps, props = __rest(_a, ["components", "extraProps"]);
+    var _c = useCalendar({}), currentMonth = _c.currentMonth, currentWeek = _c.currentWeek, selectedDate = _c.selectedDate, onNextWeek = _c.onNextWeek, onPrevWeek = _c.onPrevWeek, onNextMonth = _c.onNextMonth, onPrevMonth = _c.onPrevMonth, onClickDay = _c.onClickDay;
+    /* eslint-disable  @typescript-eslint/no-unused-vars */
+    var _d = useState(getDatesBetween(startOfWeek(currentMonth, { weekStartsOn: 1 }), lastDayOfWeek(currentMonth, { weekStartsOn: 1 })).map(function (day, i) { return ({ __id__: "day-".concat(getWeek(day), "-").concat(i), day: day, }); })), days = _d[0]; _d[1];
+    var headerProps = {
+        onNextWeek: onNextWeek,
+        onPrevWeek: onPrevWeek,
+        onNextMonth: onNextMonth,
+        onPrevMonth: onPrevMonth,
+        currentMonth: currentMonth,
+        currentWeek: currentWeek,
+        selectedDate: selectedDate,
+    };
+    var renderHeader = function () {
+        if (props.showHeader === false) {
+            return;
+        }
+        if (components.Header) {
+            return React.createElement(components.Header, __assign({}, headerProps, extraProps === null || extraProps === void 0 ? void 0 : extraProps.header));
+        }
+        return (React.createElement(DefaultCalendarHeader, __assign({}, headerProps, extraProps === null || extraProps === void 0 ? void 0 : extraProps.header)));
+    };
+    var renderFooter = function () {
+        if (props.showFooter === false) {
+            return;
+        }
+        if (components.Footer) {
+            return React.createElement(components.Footer, __assign({}, headerProps, extraProps === null || extraProps === void 0 ? void 0 : extraProps.footer));
+        }
+        return React.createElement(DefaultCalendarFooter, __assign({}, headerProps, extraProps === null || extraProps === void 0 ? void 0 : extraProps.footer));
+    };
+    return (React.createElement(CalendarWrapper, null,
+        React.createElement(CalendarDaysHeader, { currentMonth: currentMonth, selectedDate: selectedDate, weekendsCheckbox: React.createElement("div", null), weekend: true }),
+        renderHeader(),
+        React.createElement(CalendarDaysBody, { currentMonth: currentMonth, selectedDate: selectedDate, onClickDay: onClickDay, dayBodyProps: extraProps === null || extraProps === void 0 ? void 0 : extraProps.dayBody, components: { DayBody: components === null || components === void 0 ? void 0 : components.DayBody, }, days: days }),
+        renderFooter()));
+};
+
 var WeekNav = styled(Text)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 0;\n"], ["\n  display: inline-block;\n  padding: 0;\n"])));
 var CalendarIconDatePicker = React.forwardRef(function (_a, ref) {
     _a.value; var onClick = _a.onClick;
@@ -7166,58 +7257,6 @@ var TasksCalendarHeader = function (_a) {
 };
 var templateObject_1$2;
 
-var TasksCalendarFooter = function (_a) {
-    var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
-    return (React.createElement(HeaderWrapper, null,
-        React.createElement(Col, { start: true, xs: true },
-            React.createElement("span", { style: { display: 'inline-flex' } }, "Overdue: "),
-            React.createElement("span", { style: { display: 'inline-flex' } },
-                React.createElement(Row, null, tasks
-                    /* eslint-disable eqeqeq */
-                    .filter(function (t) { return t.date ? currentWeek == getWeek(t.date) : true; })
-                    .map(function (t) { return (React.createElement(Col, { xs: true, md: 3, padded: true },
-                    React.createElement(CalendarTask, __assign({}, t, { date: undefined })))); }))))));
-};
-
-var Calendar = function (_a) {
-    var _b = _a.components, components = _b === void 0 ? {} : _b, extraProps = _a.extraProps, props = __rest(_a, ["components", "extraProps"]);
-    var _c = useCalendar({}), currentMonth = _c.currentMonth, currentWeek = _c.currentWeek, selectedDate = _c.selectedDate, onNextWeek = _c.onNextWeek, onPrevWeek = _c.onPrevWeek, onNextMonth = _c.onNextMonth, onPrevMonth = _c.onPrevMonth, onClickDay = _c.onClickDay;
-    /* eslint-disable  @typescript-eslint/no-unused-vars */
-    var _d = useState(getDatesBetween(startOfWeek(currentMonth, { weekStartsOn: 1 }), lastDayOfWeek(currentMonth, { weekStartsOn: 1 })).map(function (day, i) { return ({ __id__: "day-".concat(getWeek(day), "-").concat(i), day: day, }); })), days = _d[0]; _d[1];
-    var headerProps = {
-        onNextWeek: onNextWeek,
-        onPrevWeek: onPrevWeek,
-        onNextMonth: onNextMonth,
-        onPrevMonth: onPrevMonth,
-        currentMonth: currentMonth,
-        currentWeek: currentWeek,
-        selectedDate: selectedDate,
-    };
-    var renderHeader = function () {
-        if (props.showHeader === false) {
-            return;
-        }
-        if (components.Header) {
-            return React.createElement(components.Header, __assign({}, headerProps, extraProps === null || extraProps === void 0 ? void 0 : extraProps.header));
-        }
-        return (React.createElement(DefaultCalendarHeader, __assign({}, headerProps, extraProps === null || extraProps === void 0 ? void 0 : extraProps.header)));
-    };
-    var renderFooter = function () {
-        if (props.showFooter === false) {
-            return;
-        }
-        if (components.Footer) {
-            return React.createElement(components.Footer, __assign({}, headerProps, extraProps === null || extraProps === void 0 ? void 0 : extraProps.footer));
-        }
-        return React.createElement(DefaultCalendarFooter, __assign({}, headerProps, extraProps === null || extraProps === void 0 ? void 0 : extraProps.footer));
-    };
-    return (React.createElement(CalendarWrapper, null,
-        React.createElement(CalendarDaysHeader, { currentMonth: currentMonth, selectedDate: selectedDate, weekendsCheckbox: React.createElement("div", null), weekend: true }),
-        renderHeader(),
-        React.createElement(CalendarDaysBody, { currentMonth: currentMonth, selectedDate: selectedDate, onClickDay: onClickDay, dayBodyProps: extraProps === null || extraProps === void 0 ? void 0 : extraProps.dayBody, components: { DayBody: components === null || components === void 0 ? void 0 : components.DayBody, }, days: days }),
-        renderFooter()));
-};
-
 function convertTasksToDays(_a) {
     var currentMonth = _a.currentMonth; _a.currentWeek; var tasks = _a.tasks;
     return getDatesBetween(startOfWeek(currentMonth, { weekStartsOn: 1 }), lastDayOfWeek(currentMonth, { weekStartsOn: 1 })).map(function (day, i) {
@@ -7666,7 +7705,7 @@ var ToggleSwitch = function (_a) {
 var templateObject_1, templateObject_2;
 
 /**
- * DropZone
+ * Dropzone
  *
  * if `useDropzoneProps={true}` is passed then dropzone options props will passed to child element
  *
@@ -7682,22 +7721,22 @@ var templateObject_1, templateObject_2;
  *   );
  * };
  *
- * <DropZone useDropzoneProps={true} noClick={true} onDrop={...}>
+ * <Dropzone useDropzoneProps={true} noClick={true} onDrop={...}>
  *   <DropzoneChild />
- * </DropZone>
+ * </Dropzone>
  * ```
  *
  * ---------------------------------------------------------
  *
  * Example without `useDropzoneProps` (dropzone props will NOT be passed in children):
  * ```
- * <DropZone onDrop={...}>
+ * <Dropzone onDrop={...}>
  *   <button onClick={() => {}}>Upload</button>
- * </DropZone>
+ * </Dropzone>
  * ```
  *
  */
-var DropZone = React.forwardRef(function (_a, ref) {
+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]);
@@ -7709,5 +7748,5 @@ var DropZone = React.forwardRef(function (_a, ref) {
             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, DropZone, Dropdown, DropdownItem$2 as DropdownItem, 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, 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, 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 };
-//# sourceMappingURL=index.es.js.map
+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, 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, 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, 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, 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.mjs.map