@commonsku/styles 1.17.24 → 1.17.26

package/dist/index.mjs

@@ -2,10 +2,10 @@ import _, { map, pick, keys, isUndefined, get, uniqueId, assign, range as range$
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
 import React, { useCallback, useMemo, Fragment, useState, useEffect, useRef, useImperativeHandle, Component, useLayoutEffect, forwardRef, createContext, memo } from 'react';
 import { useDropzone } from 'react-dropzone';
-import BaseSelect from 'react-select';
+import BaseSelect, { components } from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
-import BaseCreatableSelect from 'react-select/creatable';
 import BaseAsyncSelect from 'react-select/async';
+import BaseCreatableSelect from 'react-select/creatable';
 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, lastDayOfWeek, isDate } from 'date-fns';
@@ -4092,20 +4092,24 @@ function skuSelectStyles(props) {
         valueContainer: function (provided, state) {
             return __assign(__assign(__assign({}, provided), { padding: '2px 8px' }), props.valueContainerStyles);
         },
+        multiValue: function (provided, state) {
+            return __assign(__assign(__assign({}, provided), { backgroundColor: getThemeColor(props, 'primary10', colors$1.primary10), color: getThemeColor(props, 'textbody', colors$1.textbody), borderRadius: 20, padding: '0.25rem' }), props.multiValueStyles);
+        },
     };
 }
-var skuSelectThemeByProps = function (props) { return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors$1.primary0), primary75: getThemeColor(props, 'primary0', colors$1.primary0), primary50: getThemeColor(props, 'primary10', colors$1.primary10), primary: getThemeColor(props, 'primary', colors$1.primary), neutral20: getThemeColor(props, 'select.border', colors$1.select.border), neutral30: getThemeColor(props, 'select.border', colors$1.select.border), neutral80: getThemeColor(props, 'textbody', colors$1.textbody), neutral90: getThemeColor(props, 'textbody', colors$1.textbody) }) })); }; };
-// duplicate styles to overide .resku global styles
-// : React.ForwardRefExoticComponent<SKUSelectProps & React.RefAttributes<BaseSelect>>
-//   React.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | ... 27 more ... | "form"> & InexactPartial<...> & InexactPartial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & React.RefAttributes<...>>
-var SKUSelect = React.forwardRef(function (_a, ref) {
-    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
-    var skuSelectTheme = skuSelectThemeByProps(props);
+function skuSelectThemeByProps(props) {
+    return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors$1.primary0), primary75: getThemeColor(props, 'primary0', colors$1.primary0), primary50: getThemeColor(props, 'primary10', colors$1.primary10), primary: getThemeColor(props, 'primary', colors$1.primary), neutral20: getThemeColor(props, 'select.border', colors$1.select.border), neutral30: getThemeColor(props, 'select.border', colors$1.select.border), neutral80: getThemeColor(props, 'textbody', colors$1.textbody), neutral90: getThemeColor(props, 'textbody', colors$1.textbody) }) })); };
+}
+
+function ForwardedSKUSelect(_a, ref) {
+    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, value = _a.value, isMulti = _a.isMulti, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error", "value", "isMulti"]);
+    var skuSelectTheme = skuSelectThemeByProps(__assign({ value: value, isMulti: isMulti }, props));
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
-    var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    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 selectStyleProps = __assign(__assign({}, props), { value: value, isMulti: isMulti, noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
+    return (React.createElement(BaseSelect, __assign({ value: value, isMulti: isMulti, ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+}
+var SKUSelect = React.forwardRef(ForwardedSKUSelect);
+function ForwardedLabeledSelect(_a, ref) {
     var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
         React.createElement(Label, { htmlFor: props.name, style: labelStyle },
@@ -4113,39 +4117,46 @@ var LabeledSelect = React.forwardRef(function (_a, ref) {
             " ",
             props.required && '*'),
         React.createElement(SKUSelect, __assign({}, props, { ref: ref }))));
-});
-var SKUCreatableSelect = React.forwardRef(function (_a, ref) {
-    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
-    var skuSelectTheme = skuSelectThemeByProps(props);
+}
+var LabeledSelect = React.forwardRef(ForwardedLabeledSelect);
+
+function ForwardedSKUAsyncSelect(_a, ref) {
+    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, value = _a.value, isMulti = _a.isMulti, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error", "value", "isMulti"]);
+    var skuSelectTheme = skuSelectThemeByProps(__assign({ value: value, isMulti: isMulti }, props));
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
-    var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    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 selectStyleProps = __assign(__assign({}, props), { value: value, isMulti: isMulti, noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
+    return (React.createElement(BaseAsyncSelect, __assign({ value: value, isMulti: isMulti, ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+}
+var SKUAsyncSelect = React.forwardRef(ForwardedSKUAsyncSelect);
+function ForwardedLabeledAsyncSelect(_a, ref) {
     var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
         React.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
-        React.createElement(SKUCreatableSelect, __assign({}, props, { ref: ref }))));
-});
-var SKUAsyncSelect = React.forwardRef(function (_a, ref) {
-    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
-    var skuSelectTheme = skuSelectThemeByProps(props);
+        React.createElement(SKUAsyncSelect, __assign({}, props, { ref: ref }))));
+}
+var LabeledAsyncSelect = React.forwardRef(ForwardedLabeledAsyncSelect);
+
+function ForwardedSKUCreatableSelect(_a, ref) {
+    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, value = _a.value, isMulti = _a.isMulti, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error", "value", "isMulti"]);
+    var skuSelectTheme = skuSelectThemeByProps(__assign({ value: value, isMulti: isMulti }, props));
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
-    var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    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 selectStyleProps = __assign(__assign({}, props), { value: value, isMulti: isMulti, noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
+    return (React.createElement(BaseCreatableSelect, __assign({ value: value, isMulti: isMulti, ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+}
+var SKUCreatableSelect = React.forwardRef(ForwardedSKUCreatableSelect);
+function ForwardedLabeledCreatableSelect(_a, ref) {
     var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
         React.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
-        React.createElement(SKUAsyncSelect, __assign({}, props, { ref: ref }))));
-});
+        React.createElement(SKUCreatableSelect, __assign({}, props, { ref: ref }))));
+}
+var LabeledCreatableSelect = React.forwardRef(ForwardedLabeledCreatableSelect);
 
 var Backdrop = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(67, 83, 91, .3);\n    z-index: 100;\n    transition: all ", "s ease-in-out;\n    -moz-transition: all ", "s ease-in-out;\n    -webkit-transition: all ", "s ease-in-out;\n    opacity: 0.8;\n"], ["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(67, 83, 91, .3);\n    z-index: 100;\n    transition: all ", "s ease-in-out;\n    -moz-transition: all ", "s ease-in-out;\n    -webkit-transition: all ", "s ease-in-out;\n    opacity: 0.8;\n"])), function (p) { return ((p.animationDuration || 300) / 1000); }, function (p) { return ((p.animationDuration || 300) / 1000); }, function (p) { return ((p.animationDuration || 300) / 1000); });
 var templateObject_1$G;
@@ -5632,6 +5643,108 @@ var Dropdown = function (_a) {
 };
 var templateObject_1$p, templateObject_2$b, templateObject_3$6;
 
+var menuContainerStyles = {
+    position: 'absolute',
+    width: '100%',
+};
+var subMenuContainerStyles = {
+    position: 'absolute',
+    width: 'max-content',
+};
+var menuStyles = {
+    position: 'relative',
+    marginBottom: '0px !important',
+};
+var subMenuStyles = {
+    position: 'relative',
+    borderTop: '1px solid',
+    borderTopRightRadius: '5px',
+    marginTop: 0,
+};
+var ParentOption = function (_a) {
+    var setFocusedOption = _a.setFocusedOption, OptionComponent = _a.OptionComponent, props = __rest(_a, ["setFocusedOption", "OptionComponent"]);
+    var option = props.data, isFocused = props.isFocused;
+    useEffect(function () {
+        if (isFocused) {
+            setFocusedOption(option);
+        }
+    }, [option, isFocused, setFocusedOption]);
+    if (OptionComponent != null) {
+        return (React.createElement(OptionComponent, __assign({}, props)));
+    }
+    return (React.createElement(components.Option, __assign({}, props)));
+};
+var BasePanelledSelect = function (_a, ref) {
+    var value = _a.value, options = _a.options, onChange = _a.onChange, subMenuProps = _a.subMenuProps, components$1 = _a.components, closeMenuOnSelect = _a.closeMenuOnSelect, _b = _a.hideSelectedOptions, hideSelectedOptions = _b === void 0 ? false : _b, props = __rest(_a, ["value", "options", "onChange", "subMenuProps", "components", "closeMenuOnSelect", "hideSelectedOptions"]);
+    var error = props.error, isMulti = props.isMulti;
+    var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
+    var _d = useState(undefined), focusedOption = _d[0], setFocusedOption = _d[1];
+    var _e = useState(0), menuHeight = _e[0], setMenuHeight = _e[1];
+    var _f = useState(0), controlHeight = _f[0], setControlHeight = _f[1];
+    var menuRef = useRef(null);
+    var controlRef = useRef(null);
+    var windowSize = useWindowSize();
+    useLayoutEffect(function () {
+        if (menuRef.current != null) {
+            setMenuHeight(menuRef.current.offsetHeight);
+        }
+        if (controlRef.current != null) {
+            setControlHeight(controlRef.current.offsetHeight);
+        }
+    }, [windowSize, isOpen, value]);
+    var hasSubOptions = useCallback(function (option) {
+        return option != null && option.subOptions != null && option.subOptions.length > 0;
+    }, []);
+    var currentSubOptions = useMemo(function () {
+        if (focusedOption != null && hasSubOptions(focusedOption)) {
+            return focusedOption.subOptions;
+        }
+        return undefined;
+    }, [hasSubOptions, focusedOption]);
+    var onValueChange = function (newValue, actionMeta) {
+        if (onChange == null)
+            return;
+        if (newValue == null) {
+            onChange(newValue, actionMeta);
+        }
+        if (isMulti) {
+            var multiValue = newValue;
+            var singleValues = multiValue.filter(function (opt) { return !hasSubOptions(opt); });
+            onChange(singleValues, actionMeta);
+            return;
+        }
+        if (!hasSubOptions(newValue)) {
+            onChange(newValue, actionMeta);
+            if (closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : !isMulti) {
+                setOpen(false);
+            }
+        }
+    };
+    var onSubValueChange = function (newSubValue, actionMeta) {
+        if (onChange != null) {
+            onChange(newSubValue, actionMeta);
+        }
+        if (closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : !isMulti) {
+            setOpen(false);
+        }
+    };
+    var renderParentOption = useCallback(function (props) { return (React.createElement(ParentOption, __assign({ setFocusedOption: setFocusedOption, OptionComponent: components$1 === null || components$1 === void 0 ? void 0 : components$1.Option }, props))); }, [setFocusedOption, components$1 === null || components$1 === void 0 ? void 0 : components$1.Option]);
+    var renderMenu = useCallback(function (props) { return (React.createElement("div", { style: __assign(__assign({}, menuContainerStyles), { top: controlHeight }), ref: menuRef },
+        React.createElement(components.Menu, __assign({}, props)))); }, [controlHeight]);
+    var renderSubMenu = useCallback(function (props) { return (React.createElement("div", { style: subMenuContainerStyles },
+        React.createElement(components.Menu, __assign({}, props)))); }, []);
+    var renderControl = useCallback(function (props) { return (React.createElement("div", { ref: controlRef },
+        React.createElement(components.Control, __assign({}, props)))); }, []);
+    return (React.createElement("div", null,
+        React.createElement(Row, null,
+            React.createElement(SKUSelect, __assign({ value: value, options: options, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); }, menuIsOpen: isOpen, ref: ref, components: __assign(__assign({}, components$1), { Option: renderParentOption, Menu: renderMenu, Control: renderControl }), onChange: onValueChange, menuStyles: menuStyles, hideSelectedOptions: hideSelectedOptions, closeMenuOnSelect: false }, props)),
+            currentSubOptions != null &&
+                React.createElement(SKUSelect, __assign({ value: value, options: currentSubOptions, menuIsOpen: isOpen, onChange: onSubValueChange, menuStyles: __assign(__assign({}, subMenuStyles), { height: menuHeight, top: controlHeight, borderTopColor: error
+                            ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
+                            : getThemeColor(props, 'select.active.border', colors$1.select.active.border) }), hideSelectedOptions: hideSelectedOptions, closeMenuOnSelect: false, isMulti: isMulti }, subMenuProps, { components: __assign(__assign({ Control: function () { return null; } }, (subMenuProps === null || subMenuProps === void 0 ? void 0 : subMenuProps.components)), { Menu: renderSubMenu }) })))));
+};
+var PanelledSelect = forwardRef(BasePanelledSelect);
+
 var Badge = styled.span(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: inline-block;\n  min-width: 10px;\n  padding: 3px 7px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 10px;\n  ", "\n"], ["\n  display: inline-block;\n  min-width: 10px;\n  padding: 3px 7px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 10px;\n  ", "\n"])), function (p) { return p.color === 'cta' ? colors$1.cta : p.color === 'grey' ? colors$1.primary0 : colors$1.primary; }, function (p) { return p.color === 'grey' ? colors$1.primary100 : colors$1.white; }, SharedStyles);
 var templateObject_1$o;
 
@@ -7172,7 +7285,7 @@ function InputStepper(props) {
 var templateObject_1$c, templateObject_2$1, templateObject_3, templateObject_4;
 
 var VirtualTable = function (props) {
-    var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? '' : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent; props.onResize; var rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter, onSortChange = props.onSortChange;
+    var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? "" : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent; props.onResize; var rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter, onSortChange = props.onSortChange;
     var defaultColumn = useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
@@ -7300,6 +7413,12 @@ var VirtualTable = function (props) {
     useEffect(function () {
         onSortChange && onSortChange({ sortBy: sortBy });
     }, [sortBy]);
+    var scrollToTop = useCallback(function () {
+        listRef.current && listRef.current.scrollTo(0);
+    }, []);
+    useEffect(function () {
+        scrollToTop();
+    }, [data, scrollToTop]);
     return (React.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
         renderTableHeader(),
         React.createElement("div", __assign({ className: "tbody" }, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React.createElement(NoRowsFound, null) :
@@ -8563,5 +8682,5 @@ var Dropzone = React.forwardRef(function (_a, ref) {
 var Tooltip = styled(Tooltip$1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 400px;\n  &.type-dark.place-top {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-top-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-bottom {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-bottom-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-left {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-left-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-right {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-right-color: ", ";\n      background-color: ", ";\n    }\n  }\n\n  &.type-success.place-top,\n  &.type-success.place-bottom,\n  &.type-success.place-left,\n  &.type-success.place-right {\n    background-color: ", ";\n    color: ", ";\n    padding: 0.3rem 1rem;\n  }\n  &.type-success.place-top {\n    &:after {\n      border-top-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-bottom {\n    &:after {\n      border-bottom-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-left {\n    &:after {\n      border-left-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-right {\n    &:after {\n      border-right-color: ", ";\n      background-color: ", ";\n    }\n  }\n"], ["\n  max-width: 400px;\n  &.type-dark.place-top {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-top-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-bottom {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-bottom-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-left {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-left-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-dark.place-right {\n    background-color: ", ";\n    padding: 0.3rem 1rem;\n\n    &:after {\n      border-right-color: ", ";\n      background-color: ", ";\n    }\n  }\n\n  &.type-success.place-top,\n  &.type-success.place-bottom,\n  &.type-success.place-left,\n  &.type-success.place-right {\n    background-color: ", ";\n    color: ", ";\n    padding: 0.3rem 1rem;\n  }\n  &.type-success.place-top {\n    &:after {\n      border-top-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-bottom {\n    &:after {\n      border-bottom-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-left {\n    &:after {\n      border-left-color: ", ";\n      background-color: ", ";\n    }\n  }\n  &.type-success.place-right {\n    &:after {\n      border-right-color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'neutrals.100', colors$1.neutrals['100']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.90', colors$1.green['90']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); }, function (p) { return getThemeColor(p, 'green.20', colors$1.green['20']); });
 var templateObject_1;
 
-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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, DateRangeDropdown, DateRangeInput, DateRangePicker, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, 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, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResizableIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SkubotLogo, SkubotSpinner, 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, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors$1 as 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 };
+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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, DateRangeDropdown, DateRangeInput, DateRangePicker, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, 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, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PanelledSelect, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResizableIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SkubotLogo, SkubotSpinner, 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, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors$1 as 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