@commonsku/styles 1.16.15 → 1.16.16

package/dist/index.js

@@ -1223,7 +1223,7 @@ function GearIcon(_a) {
         React__default["default"].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 = ''; }
@@ -2763,6 +2763,43 @@ function StarDarkIcon(_a) {
                     React__default["default"].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__default["default"].createElement(SVG$1, __assign({ size: size, "aria-labelledby": "MagicIcon" }, props),
+        React__default["default"].createElement("title", { id: "MagicIcon" }, altText),
+        React__default["default"].createElement("path", { d: "M19 9L20.25 6.25L23 5L20.25 3.75L19 1L17.75 3.75L15 5L17.75 6.25L19 9Z", fill: color }),
+        React__default["default"].createElement("path", { d: "M19 15L17.75 17.75L15 19L17.75 20.25L19 23L20.25 20.25L23 19L20.25 17.75L19 15Z", fill: color }),
+        React__default["default"].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__default["default"].createElement(SVG$1, __assign({ size: size, "aria-labelledby": "MagicEraserIcon" }, props),
+        React__default["default"].createElement("title", { id: "MagicEraserIcon" }, altText),
+        React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement(SVG$1, __assign({ size: size, "aria-labelledby": "Trend" }, props),
+        React__default["default"].createElement("title", { id: "Trend" }, altText),
+        {
+            'up': React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement(SVG$1, __assign({ size: size, "aria-labelledby": "SlideInIcon" }, props),
+        React__default["default"].createElement("title", { id: "SlideInIcon" }, altText),
+        React__default["default"].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',
@@ -4960,12 +4997,12 @@ var templateObject_1$p, templateObject_2$c, templateObject_3$7, templateObject_4
 var CustomDateInput = React__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].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__default["default"].createElement(Input, __assign({ ref: ref, noMargin: noMargin, error: error, style: { marginRight: '2rem', display: 'inline-block' }, type: "text", autoComplete: "off" }, props)),
         React__default["default"].createElement("span", { style: { fontStyle: 'normal', cursor: 'pointer', position: 'absolute', top: '8px', right: '5px' }, onClick: onClick }, !isClearable ? React__default["default"].createElement(CalendarIcon, { style: { width: '1.9rem', verticalAlign: 'middle', } }) : null)));
 });
 var Datepicker = React__default["default"].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__default["default"].createElement(BaseDatePicker__default["default"], __assign({ locale: locale, selected: value || props.selected, todayButton: todayButton, customInput: customInput || React__default["default"].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__default["default"].createElement(BaseDatePicker__default["default"], __assign({ locale: locale, selected: value || props.selected, todayButton: todayButton, customInput: customInput || React__default["default"].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__default["default"].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"])));
@@ -6383,7 +6420,7 @@ var AlertNotification = function (_a) {
 };
 var templateObject_1$c;
 
-var RenderChild = function (_a) {
+var RenderChild = React__default["default"].forwardRef(function (_a, ref) {
     var children = _a.children, parseProps = _a.parseProps, props = __rest(_a, ["children", "parseProps"]);
     var ChildElement = React__default["default"].Children.only(children);
     var elementProps = React.useMemo(function () {
@@ -6394,8 +6431,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'
@@ -6406,8 +6443,8 @@ var RenderChild = function (_a) {
     if (reactIs__namespace.isElement(ChildElement)) {
         return React__default["default"].cloneElement(ChildElement, elementProps);
     }
-    return (React__default["default"].createElement(ChildElement, __assign({}, elementProps)));
-};
+    return (React__default["default"].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;
@@ -7699,7 +7736,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
  *
@@ -7715,22 +7752,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__default["default"].forwardRef(function (_a, ref) {
+var Dropzone = React__default["default"].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 = reactDropzone.useDropzone(props), getRootProps = _d.getRootProps, rootRef = _d.rootRef, getInputProps = _d.getInputProps, inputRef = _d.inputRef, rest = __rest(_d, ["getRootProps", "rootRef", "getInputProps", "inputRef"]);
     React.useImperativeHandle(ref, function () { return ({ open: rest.open }); }, [rest.open]);
@@ -7834,9 +7871,9 @@ exports.DragIcon = DragIcon;
 exports.DraggableTasksCalendar = DraggableTasksCalendar;
 exports.DropArea = DropArea;
 exports.DropDownContent = DropDownContent$2;
-exports.DropZone = DropZone;
 exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem$2;
+exports.Dropzone = Dropzone;
 exports.Dropzoned = Dropzoned;
 exports.DropzonedPreviews = DropzonedPreviews;
 exports.EPOIcon = EPOIcon;
@@ -7903,6 +7940,8 @@ exports.LinkWithIcon = LinkWithIcon;
 exports.ListIcon = ListIcon;
 exports.Loading = Loading;
 exports.LockIcon = LockIcon;
+exports.MagicEraserIcon = MagicEraserIcon;
+exports.MagicIcon = MagicIcon;
 exports.MailIcon = MailIcon;
 exports.MarketingStatusIcon = MarketingStatusIcon;
 exports.MenuIcon = MenuIcon;
@@ -7956,6 +7995,7 @@ exports.SimpleWindowedTable = SimpleWindowedTable;
 exports.SimpleWindowedTableStyles = SimpleWindowedTableStyles;
 exports.SizerCss = SizerCss;
 exports.SizerWrapper = SizerWrapper;
+exports.SlideInIcon = SlideInIcon;
 exports.Sparkles = Sparkles;
 exports.Spinner = Spinner;
 exports.StarDarkIcon = StarDarkIcon;
@@ -8005,6 +8045,7 @@ exports.ToggleLink = ToggleLink;
 exports.ToggleSwitch = ToggleSwitch;
 exports.ToggleSwitchStyled = ToggleSwitchStyled;
 exports.TrashIcon = TrashIcon;
+exports.TrendIcon = TrendIcon;
 exports.UploadIcon = UploadIcon;
 exports.UserIcon = UserIcon;
 exports.UsersIcon = UsersIcon;