@commonsku/styles 1.17.23 → 1.17.25

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import _, { map, pick, keys, isUndefined, get, uniqueId, assign, range as range$1, isEmpty, tail, toNumber, isString, filter, round, partial, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
-import React, { useMemo, Fragment, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, useLayoutEffect, forwardRef, createContext, memo } from 'react';
+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';
@@ -1421,58 +1421,86 @@ var Theme = function (_a) {
         children));
 };
 
+var iconSizes$9 = {
+    tiny: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+        fontSize: ".6em",
+        defaultStrokeWidth: 3,
+    },
+    small: {
+        width: 40,
+        height: 40,
+        viewBox: "0 0 40 40",
+        fontSize: ".6em",
+        defaultStrokeWidth: 3,
+    },
+    medium: {
+        width: 48,
+        height: 48,
+        viewBox: "0 0 48 48",
+        fontSize: ".8em",
+        defaultStrokeWidth: 5,
+    },
+    large: {
+        width: 72,
+        height: 72,
+        viewBox: "0 0 72 72",
+        fontSize: "1em",
+        defaultStrokeWidth: 5,
+    },
+    huge: {
+        width: 96,
+        height: 96,
+        viewBox: "0 0 96 96",
+        fontSize: "1em",
+        defaultStrokeWidth: 5,
+    },
+    default: {
+        height: 48,
+        width: 48,
+        viewBox: "0 0 48 48",
+        fontSize: ".8em",
+        defaultStrokeWidth: 5,
+    },
+};
 function CircleProgressIcon(_a) {
-    var sqSize = _a.sqSize, strokeWidth = _a.strokeWidth, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? teal.main : _c, _d = _a.textColor, textColor = _d === void 0 ? teal.main : _d, _e = _a.text, text = _e === void 0 ? '' : _e, _f = _a.textStyle, textStyle = _f === void 0 ? {} : _f, _g = _a.color; _g === void 0 ? teal.main : _g; var _h = _a.size, size = _h === void 0 ? "medium" : _h, _j = _a.altText, altText = _j === void 0 ? "Progress level" : _j, props = __rest(_a, ["sqSize", "strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle", "color", "size", "altText"]);
-    var iconSizes = {
-        tiny: {
-            width: 32,
-            height: 32,
-            viewBox: "0 0 32 32",
-        },
-        small: {
-            width: 40,
-            height: 40,
-            viewBox: "0 0 40 40",
-        },
-        medium: {
-            width: 48,
-            height: 48,
-            viewBox: "0 0 48 48",
-        },
-        large: {
-            width: 72,
-            height: 72,
-            viewBox: "0 0 72 72",
-        },
-        huge: {
-            width: 96,
-            height: 96,
-            viewBox: "0 0 96 96",
-        },
-        default: {
-            height: 48,
-            width: 48,
-            viewBox: "0 0 48 48",
-        },
-    };
-    sqSize = iconSizes[size]["width"];
-    strokeWidth = size === "tiny" || size === "small" ? 3 : 5;
-    var radius = (sqSize - strokeWidth) / 2;
-    // const viewBox = `0 0 ${sqSize} ${sqSize}`;
+    var strokeWidth = _a.strokeWidth, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? teal.main : _c, _d = _a.textColor, textColor = _d === void 0 ? teal.main : _d, _e = _a.text, text = _e === void 0 ? "" : _e, _f = _a.textStyle, textStyle = _f === void 0 ? {} : _f, _g = _a.showCheckMarkOnComplete, showCheckMarkOnComplete = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? "medium" : _h, _j = _a.altText, altText = _j === void 0 ? "Progress level" : _j, props = __rest(_a, ["strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle", "showCheckMarkOnComplete", "size", "altText"]);
+    var _k = iconSizes$9[size], width = _k.width, defaultStrokeWidth = _k.defaultStrokeWidth, fontSize = _k.fontSize; _k.viewBox;
+    strokeWidth = strokeWidth || defaultStrokeWidth;
+    var squareSize = width;
+    var radius = (squareSize - strokeWidth) / 2;
     var dashArray = radius * Math.PI * 2;
-    var dashOffset = dashArray - dashArray * percentage / 100;
-    return React.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes, "aria-labelledby": "CircleProgressIcon" }, props),
-        React.createElement("title", { id: "CircleProgressIcon" }, text !== '' ? "".concat(text, " stage") : percentage ? "".concat(percentage, "% completed") : altText),
-        React.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: 'none', stroke: colors$1.disabledButtonBorder, } }),
-        React.createElement("circle", { className: "circle-progress", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"), style: {
+    var dashOffset = dashArray - (dashArray * percentage) / 100;
+    var isComplete = percentage === 100;
+    var renderInnerText = useCallback(function () { return (React.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: fontSize, fontWeight: "bold", fill: textColor }, textStyle) }, text || "".concat(percentage, "%"))); }, [fontSize, textColor, textStyle, text, percentage]);
+    var renderCheckMark = useCallback(function () {
+        var preferredViewBox = 40;
+        var scale = squareSize / preferredViewBox;
+        var scaledPath = [
+            { x: 12.0006 * scale, y: 21.599 * scale },
+            { x: 17.5629 * scale, y: 27.1617 * scale },
+            { x: 29.1621 * scale, y: 15.5625 * scale },
+        ]
+            .map(function (p) { return "".concat(p.x, ",").concat(p.y); })
+            .join(" L");
+        return (React.createElement("path", { d: "M".concat(scaledPath), stroke: strokeColor, strokeWidth: "".concat(strokeWidth, "px"), fill: "none" }));
+    }, [squareSize, strokeColor, strokeWidth]);
+    return (React.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes$9, "aria-labelledby": "CircleProgressIcon" }, props),
+        React.createElement("title", { id: "CircleProgressIcon" }, altText || (text ? "".concat(text, " stage") : "".concat(percentage, "% completed"))),
+        React.createElement("circle", { className: "circle-background", cx: squareSize / 2, cy: squareSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: "none", stroke: colors$1.disabledButtonBorder } }),
+        React.createElement("circle", { className: "circle-progress", cx: squareSize / 2, cy: squareSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(squareSize / 2, " ").concat(squareSize / 2, ")"), style: {
                 strokeDasharray: dashArray,
                 strokeDashoffset: dashOffset,
-                fill: 'none',
+                fill: "none",
                 stroke: strokeColor,
-                strokeLinecap: 'round',
-                strokeLinejoin: 'round',
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
             } }),
-        React.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: size === "small" || size === "tiny" ? ".6em" : size === "medium" ? ".8em" : "1em", fontWeight: 'bold', fill: textColor }, textStyle) }, text || "".concat(percentage, "%")));
+        showCheckMarkOnComplete && isComplete
+            ? renderCheckMark()
+            : renderInnerText()));
 }
 
 var SVG = styled.svg(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
@@ -4064,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 },
@@ -4085,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;
@@ -5604,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;
 
@@ -8535,5 +8676,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