@splunk/react-ui 5.0.0-beta.4 → 5.0.0-beta.5

package/DualListbox.js

@@ -62,29 +62,29 @@
     // EXPORTS
         e.d(r, {
         Option: () => /* reexport */ ne,
-        default: () => /* reexport */ je
+        default: () => /* reexport */ Ve
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
-    var i =  e.n(a);
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const l = require("@splunk/ui-utils/i18n");
+    const i = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const o = require("@splunk/ui-utils/keyboard");
+    const u = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronLeft"
-    const u = require("@splunk/react-icons/ChevronLeft");
-    var c =  e.n(u);
+    const o = require("@splunk/react-icons/ChevronLeft");
+    var c =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
     const s = require("@splunk/react-icons/ChevronRight");
     var v =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const d = require("@splunk/ui-utils/format");
+    const f = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/react-ui/useForceUpdate"
-    const f = require("@splunk/react-ui/useForceUpdate");
-    var p =  e.n(f);
+    const d = require("@splunk/react-ui/useForceUpdate");
+    var p =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const b = require("@splunk/react-ui/ScreenReaderContent");
     var m =  e.n(b);
@@ -112,25 +112,25 @@
     function k(e) {
         var r = y({}, e);
         var a = p()();
-        var i = (0, t.useContext)(g);
-        var l = i.getScreenReaderMessage, o = i.updateScreenReaderRefreshHook;
+        var l = (0, t.useContext)(g);
+        var i = l.getScreenReaderMessage, u = l.updateScreenReaderRefreshHook;
         (0, t.useEffect)((function() {
-            o === null || o === void 0 ? void 0 : o(a);
+            u === null || u === void 0 ? void 0 : u(a);
             return function() {
-                return o === null || o === void 0 ? void 0 : o();
+                return u === null || u === void 0 ? void 0 : u();
             };
-        }), [ o, a ]);
-        if (!l) {
+        }), [ u, a ]);
+        if (!i) {
             return null;
         }
         
         return n().createElement(m(), y({
             "aria-live": "assertive"
-        }, r), l() || "");
+        }, r), i() || "");
     }
     /* harmony default export */    const C = k;
     // CONCATENATED MODULE: ./src/DualListbox/listboxUtils.ts
-    var x = function e(r, t) {
+    var S = function e(r, t) {
         var n = r.filter((function(e) {
             return e !== t;
         }));
@@ -139,30 +139,30 @@
         }
         return n;
     };
-    var S = function e(r, t) {
+    var w = function e(r, t) {
         var n = new Set(t);
         return r.filter((function(e) {
             return !n.has(e);
         }));
     };
-    var w = function e(r, t, n) {
+    var x = function e(r, t, n) {
         if (r < 0) {
             return undefined;
         }
         var a = t[r];
-        var i = new Set(n);
-        if (!i.has(a)) {
+        var l = new Set(n);
+        if (!l.has(a)) {
             return a;
         }
-        for (var l = r + 1; l < t.length; l += 1) {
-            var o = t[l];
-            if (!i.has(o)) {
-                return o;
+        for (var i = r + 1; i < t.length; i += 1) {
+            var u = t[i];
+            if (!l.has(u)) {
+                return u;
             }
         }
-        for (var u = r - 1; u > 0; u -= 1) {
-            var c = t[u];
-            if (!i.has(c)) {
+        for (var o = r - 1; o > 0; o -= 1) {
+            var c = t[o];
+            if (!l.has(c)) {
                 return c;
             }
         }
@@ -197,7 +197,7 @@
         }
         var n = null;
         var a = false;
-        var i = r.filter((function(e) {
+        var l = r.filter((function(e) {
             var r = R(e, t.index);
             if (r === t.value) {
                 a = true;
@@ -206,22 +206,22 @@
             // If we haven't found a match yet, keep track of the next closest match.
             // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
                         if (!a) {
-                var i = R(n, t.index);
-                if (!i) {
+                var l = R(n, t.index);
+                if (!l) {
                     n = e;
                 } else if (r > t.value) {
-                    if (i < t.value) {
+                    if (l < t.value) {
                         n = e;
-                    } else if (i > r) {
+                    } else if (l > r) {
                         n = e;
                     }
-                } else if (r > i) {
+                } else if (r > l) {
                     n = e;
                 }
             }
             return false;
         }));
-        return i.length === 0 && n ? [ n ] : i;
+        return l.length === 0 && n ? [ n ] : l;
     };
     // CONCATENATED MODULE: ./src/DualListbox/ToolbarContext.tsx
     /**
@@ -231,77 +231,30 @@
  * @public
  */
     var I =  n().createContext({});
-    /* harmony default export */    const L = I;
+    /* harmony default export */    const q = I;
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-    const q = require("@splunk/react-ui/Tooltip");
-    var P =  e.n(q);
+    const L = require("@splunk/react-ui/Tooltip");
+    var P =  e.n(L);
     // CONCATENATED MODULE: external "styled-components"
     const N = require("styled-components");
     var _ =  e.n(N);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
+    const j = require("@splunk/react-ui/ButtonSimple");
+    var V =  e.n(j);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const V = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const j = require("@splunk/react-ui/Clickable");
-    var B =  e.n(j);
+    const B = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/DualListbox/ToolbarButtonStyles.ts
-    var D = _()(B()).withConfig({
-        displayName: "ToolbarButtonStyles__StyledClickable",
+    var M = _()(V()).withConfig({
+        displayName: "ToolbarButtonStyles__StyledButtonSimple",
         componentId: "k7zksz-0"
-    })([ "", " border:", ";border-radius:", ";box-sizing:border-box;cursor:pointer;flex-grow:1;font-weight:", ";line-height:", ";min-height:", ";min-width:", ";max-width:100%;", ";position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;width:", ";&:active{transition:none;}&:focus{box-shadow:", ";}&:focus,&:hover{z-index:3;}", ";" ], V.mixins.reset("block"), (0, 
-    V.pick)({
-        enterprise: "".concat(V.variables.inputBorderWidth, " solid transparent")
-    }), V.variables.borderRadius, (0, V.pick)({
-        enterprise: V.variables.fontWeightSemiBold,
-        prisma: V.variables.fontWeightSemiBold
-    }), V.variables.lineHeight, V.variables.inputHeight, V.variables.inputHeight, (0, 
-    V.pick)({
-        enterprise: {
-            comfortable: (0, N.css)([ "padding:0 5px;" ]),
-            compact: (0, N.css)([ "padding:0 2px;" ])
-        },
-        prisma: (0, N.css)([ "padding:0 calc(", " / 2 - 1px);" ], V.variables.inputHeight)
-    }), V.variables.inputHeight, V.variables.focusShadow, (0, V.pickVariant)("$disabled", {
-        false: (0, V.pick)({
-            enterprise: (0, N.css)([ "color:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";transition:none;}&:focus{color:", ";}" ], (0, 
-            V.pick)({
-                light: V.variables.gray45,
-                dark: V.variables.white
-            }), V.variables.backgroundColorHover, (0, V.pick)({
-                light: V.variables.gray60,
-                dark: V.variables.borderColor
-            }), (0, V.pick)({
-                light: V.variables.contentColorLink,
-                dark: V.variables.white
-            }), (0, V.pick)({
-                light: V.variables.gray92,
-                dark: V.variables.gray22
-            }), (0, V.pick)({
-                light: V.variables.contentColorLink,
-                dark: V.variables.white
-            })),
-            prisma: (0, N.css)([ "color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";box-shadow:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";}}" ], V.variables.contentColorActive, V.variables.interactiveColorOverlayHover, V.variables.interactiveColorBorderHover, V.variables.hoverShadow, V.variables.interactiveColorOverlayActive, V.variables.interactiveColorOverlayActive)
-        }),
-        true: (0, N.css)([ "border-color:", ";color:", ";" ], (0, V.pick)({
-            prisma: V.variables.interactiveColorBorderDisabled
-        }), (0, V.pick)({
-            enterprise: V.variables.textDisabledColor,
-            prisma: V.variables.contentColorDisabled
-        }))
-    }));
-    var H = _().span.withConfig({
+    })([ "height:", ";width:", ";" ], B.variables.inputHeight, B.variables.inputHeight);
+    var D = _().span.withConfig({
         displayName: "ToolbarButtonStyles__StyledIcon",
         componentId: "k7zksz-1"
-    })([ "align-items:center;display:flex;flex-direction:row;flex-shrink:0;font-size:", ";justify-content:center;max-width:100%;" ], (0, 
-    V.pick)({
-        enterprise: "inherit",
-        prisma: {
-            comfortable: "21px",
-            compact: "16px"
-        }
-    }));
+    })([ "align-items:center;display:flex;flex-direction:row;flex-shrink:0;justify-content:center;max-width:100%;" ]);
     // CONCATENATED MODULE: ./src/DualListbox/ToolbarButton.tsx
-    function M() {
-        return M = Object.assign ? Object.assign.bind() : function(e) {
+    function T() {
+        return T = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -309,15 +262,15 @@
                 }
             }
             return e;
-        }, M.apply(null, arguments);
+        }, T.apply(null, arguments);
     }
-    function T(e, r) {
+    function H(e, r) {
         if (null == e) return {};
         var t, n, a = A(e, r);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < l.length; n++) {
+                t = l[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
         return a;
@@ -334,85 +287,71 @@
         return t;
     }
     var K = {
-        icon: i().node.isRequired,
-        name: i().string.isRequired,
-        tooltipLabel: i().string.isRequired,
-        tooltipPlacement: i().oneOf([ "above", "below", "left", "right" ])
+        icon: l().node.isRequired,
+        name: l().string.isRequired,
+        tooltipLabel: l().string.isRequired,
+        tooltipPlacement: l().oneOf([ "above", "below", "left", "right" ])
     };
-    function $(e) {
-        var r = e.ariaLabel, a = e.ariaKeyShortcuts, i = e.icon, l = e.name, o = e.tooltipLabel, u = e.tooltipPlacement, c = T(e, [ "ariaLabel", "ariaKeyShortcuts", "icon", "name", "tooltipLabel", "tooltipPlacement" ]);
-        var s = (0, t.useContext)(L);
+    function F(e) {
+        var r = e.ariaLabel, a = e.ariaKeyShortcuts, l = e.icon, i = e.name, u = e.tooltipLabel, o = e.tooltipPlacement, c = H(e, [ "ariaLabel", "ariaKeyShortcuts", "icon", "name", "tooltipLabel", "tooltipPlacement" ]);
+        var s = (0, t.useContext)(q);
         var v = p()();
-        var d = s.getButtonState, f = s.onButtonClick, b = s.updateButtonRefreshHookByName;
+        var f = s.getButtonState, d = s.onButtonClick, b = s.updateButtonRefreshHookByName;
         (0, t.useEffect)((function() {
-            b === null || b === void 0 ? void 0 : b(l, v);
+            b === null || b === void 0 ? void 0 : b(i, v);
             return function() {
-                return b === null || b === void 0 ? void 0 : b(l);
+                return b === null || b === void 0 ? void 0 : b(i);
             };
-        }), [ l, b, v ]);
+        }), [ i, b, v ]);
         var m = (0, t.useCallback)((function(e) {
-            f === null || f === void 0 ? void 0 : f(e, {
-                name: l
+            d === null || d === void 0 ? void 0 : d(e, {
+                name: i
             });
-        }), [ f, l ]);
-        if (!d) {
+        }), [ d, i ]);
+        if (!f) {
             return null;
         }
-        var h = d(l), g = h.disabled;
+        var h = f(i), g = h.disabled;
         
         return n().createElement(P(), {
-            defaultPlacement: u,
+            defaultPlacement: o,
             content:  n().createElement("span", {
                 "aria-hidden": true
-            }, o)
-        },  n().createElement(D, M({
+            }, u)
+        },  n().createElement(M, T({
+            appearance: "subtle",
             "aria-label": r,
             "aria-keyshortcuts": a,
             "aria-disabled": g || undefined,
             "data-test": "toolbar-button",
-            $disabled: g,
-            onClick: !g ? m : undefined
-        }, c),  n().createElement(H, null, i)));
+            disabled: g,
+            onClick: m
+        }, c),  n().createElement(D, null, l)));
     }
-    $.propsTypes = K;
-    /* harmony default export */    const F = $;
+    F.propsTypes = K;
+    /* harmony default export */    const $ = F;
     // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
     const z = require("@splunk/react-ui/NonInteractiveCheckbox");
-    var W =  e.n(z);
+    var U =  e.n(z);
     // CONCATENATED MODULE: ./src/DualListbox/OptionStyles.ts
-    var U = _().li.withConfig({
+    var W = _().li.withConfig({
         displayName: "OptionStyles__StyledListItem",
         componentId: "q275d9-0"
-    })([ "align-items:center;color:", ";cursor:pointer;display:flex;overflow:hidden;width:100%;word-wrap:break-word;line-height:20px;", " ", "" ], V.variables.contentColorActive, (0, 
-    V.pickVariant)("$active", {
-        true: (0, N.css)([ "", "" ], (0, V.pick)({
-            prisma: (0, N.css)([ "background:", ";" ], V.variables.interactiveColorOverlaySelected),
-            enterprise: {
-                light: (0, N.css)([ "background:", ";" ], V.variables.accentColorL50),
-                dark: (0, N.css)([ "background:", ";" ], V.variables.accentColorD50)
-            }
-        }))
-    }), (0, V.pick)({
-        prisma: (0, V.pickVariant)("$selected", {
-            true: (0, N.css)([ "&:hover{background:", ";}" ], V.mixins.overlayColors(V.variables.interactiveColorOverlaySelected, V.variables.interactiveColorOverlayHover)),
-            false: (0, N.css)([ "&:hover{background:", ";}" ], V.variables.interactiveColorOverlayHover)
-        }),
-        enterprise: (0, N.css)([ "&:hover{background:", ";}" ], V.variables.backgroundColorHover)
+    })([ "align-items:center;color:", ";cursor:pointer;display:flex;min-height:", ";overflow:hidden;padding:0 ", ";word-wrap:break-word;line-height:20px;", " ", "" ], B.variables.contentColorActive, B.variables.inputHeight, B.variables.spacingSmall, (0, 
+    B.pickVariant)("$active", {
+        true: (0, N.css)([ "background:", ";" ], B.mixins.overlayColors(B.variables.interactiveColorOverlaySelected, B.variables.interactiveColorOverlayActive))
+    }), (0, B.pickVariant)("$selected", {
+        true: (0, N.css)([ "background:", ";&:hover{background:", ";}" ], B.variables.interactiveColorOverlaySelected, B.mixins.overlayColors(B.variables.interactiveColorOverlaySelected, B.variables.interactiveColorOverlayHover)),
+        false: (0, N.css)([ "&:hover{background:", ";}" ], B.variables.interactiveColorOverlayHover)
     }));
-    var X = _()(W()).withConfig({
+    var X = _()(U()).withConfig({
         displayName: "OptionStyles__StyledNonInteractiveCheckbox",
         componentId: "q275d9-1"
-    })([ "padding-left:", ";" ], V.variables.spacingSmall);
+    })([ "", " padding-inline-end:", ";" ], B.mixins.reset("min-height"), B.variables.spacingSmall);
     var G = _().div.withConfig({
         displayName: "OptionStyles__StyledDiv",
         componentId: "q275d9-2"
-    })([ "", ";word-break:break-word;word-wrap:break-word;" ], (0, V.pick)({
-        prisma: {
-            compact: (0, N.css)([ "padding:6px ", ";" ], V.variables.spacingSmall),
-            comfortable: (0, N.css)([ "padding:10px ", ";" ], V.variables.spacingSmall)
-        },
-        enterprise: (0, N.css)([ "padding:6px ", ";" ], V.variables.spacingSmall)
-    }));
+    })([ "word-break:break-word;word-wrap:break-word;" ]);
     // CONCATENATED MODULE: ./src/DualListbox/ListboxContext.tsx
     /**
  * A React context used to inform subcomponets of Listbox of parent component values.
@@ -438,9 +377,9 @@
         if (null == e) return {};
         var t, n, a = ee(e, r);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < l.length; n++) {
+                t = l[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
         return a;
@@ -457,45 +396,45 @@
         return t;
     }
     var re = {
-        id: i().string.isRequired,
-        label: i().string.isRequired,
-        listName: i().string,
-        selected: i().bool,
-        value: i().string.isRequired
+        id: l().string.isRequired,
+        label: l().string.isRequired,
+        listName: l().string,
+        selected: l().bool,
+        value: l().string.isRequired
     };
     function te(e) {
-        var r = e.id, a = e.label, i = e.selected, l = e.value, o = Z(e, [ "id", "label", "selected", "value" ]);
-        var u = (0, t.useContext)(Q);
+        var r = e.id, a = e.label, l = e.selected, i = e.value, u = Z(e, [ "id", "label", "selected", "value" ]);
+        var o = (0, t.useContext)(Q);
         var c = p()();
-        var s = u.onOptionClick, v = u.getOptionStateForValue, d = u.updateOptionRefreshHookByValue, f = u.controlled;
+        var s = o.onOptionClick, v = o.getOptionStateForValue, f = o.updateOptionRefreshHookByValue, d = o.controlled;
         (0, t.useEffect)((function() {
-            d === null || d === void 0 ? void 0 : d(l, c);
+            f === null || f === void 0 ? void 0 : f(i, c);
             return function() {
-                return d === null || d === void 0 ? void 0 : d(l);
+                return f === null || f === void 0 ? void 0 : f(i);
             };
-        }), [ l, d, c ]);
+        }), [ i, f, c ]);
         var b = (0, t.useCallback)((function(e) {
             s === null || s === void 0 ? void 0 : s(e, {
-                value: l
+                value: i
             });
-        }), [ s, l ]);
+        }), [ s, i ]);
         if (!v) {
             return null;
         }
-        var m = v(l), h = m.active, g = m.selected;
-        var y = !!(f ? i : g);
+        var m = v(i), h = m.active, g = m.selected;
+        var y = !!(d ? l : g);
         
-        return n().createElement(U, Y({
+        return n().createElement(W, Y({
             "aria-selected": y,
             "data-test": "option",
-            "data-test-value": l,
+            "data-test-value": i,
             "data-test-active": h,
             id: r,
             onClick: b,
             role: "option",
             $active: h,
             $selected: y
-        }, o),  n().createElement(X, {
+        }, u),  n().createElement(X, {
             selected: y
         }),  n().createElement(G, null, a));
     }
@@ -504,83 +443,79 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
     const ae = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
-    const ie = require("@splunk/react-ui/Switch");
-    var le =  e.n(ie);
+    const le = require("@splunk/react-ui/Switch");
+    var ie =  e.n(le);
     // CONCATENATED MODULE: ./src/DualListbox/LabelStyles.ts
-    var oe = _().label.withConfig({
+    var ue = _().label.withConfig({
         displayName: "LabelStyles__StyledLabel",
         componentId: "unwplx-0"
-    })([ "color:", ";flex:0 0 auto;" ], V.variables.contentColorActive);
-    var ue = _().div.withConfig({
+    })([ "color:", ";flex:0 0 auto;" ], B.variables.contentColorActive);
+    var oe = _().div.withConfig({
         displayName: "LabelStyles__StyledLabelContainer",
         componentId: "unwplx-1"
     })([ "display:flex;flex-direction:column;" ]);
     var ce = _().div.withConfig({
         displayName: "LabelStyles__StyledSwitchContainer",
         componentId: "unwplx-2"
-    })([ "align-items:center;border:", " solid transparent;display:flex;gap:", ";grid-row:headers;padding:0 ", ";", "" ], V.variables.inputBorderWidth, V.variables.spacingSmall, V.variables.spacingSmall, (function(e) {
+    })([ "align-items:center;border:", " solid transparent;display:flex;gap:", ";grid-row:headers;padding:0 ", ";", "" ], B.variables.inputBorderWidth, B.variables.spacingSmall, B.variables.spacingSmall, (function(e) {
         var r = e.$columnNumber;
         return (0, N.css)([ "grid-column:", ";" ], "list".concat(r));
     }));
     // CONCATENATED MODULE: ./src/DualListbox/Label.tsx
     var se = {
-        id: i().string.isRequired,
-        index: i().number.isRequired,
-        listId: i().string.isRequired,
-        name: i().string.isRequired,
-        onSwitchClick: i().func,
-        value: i().string.isRequired
+        id: l().string.isRequired,
+        index: l().number.isRequired,
+        listId: l().string.isRequired,
+        name: l().string.isRequired,
+        onSwitchClick: l().func,
+        value: l().string.isRequired
     };
     function ve(e) {
-        var r = e.id, a = e.index, i = e.listId, o = e.name, u = e.onSwitchClick, c = e.value;
+        var r = e.id, a = e.index, l = e.listId, u = e.name, o = e.onSwitchClick, c = e.value;
         var s = (0, t.useContext)(Q);
         var v = p()();
-        var f = (0, t.useRef)((0, ae.createDOMID)("switch"));
+        var d = (0, t.useRef)((0, ae.createDOMID)("switch"));
         var b = s.updateLabelRefreshHookByName, h = s.getLabelState;
         (0, t.useEffect)((function() {
-            b === null || b === void 0 ? void 0 : b(o, v);
+            b === null || b === void 0 ? void 0 : b(u, v);
             return function() {
-                return b === null || b === void 0 ? void 0 : b(o);
+                return b === null || b === void 0 ? void 0 : b(u);
             };
-        }), [ o, b, v ]);
+        }), [ u, b, v ]);
         if (!h) {
             return null;
         }
-        var g = h(), y = g.disabled, k = g.selected, C = g.selectedValueCount, x = g.valueCount;
+        var g = h(), y = g.disabled, k = g.selected, C = g.selectedValueCount, S = g.valueCount;
         
         return n().createElement(ce, {
             $columnNumber: a
         },  n().createElement(m(), {
             "aria-hidden": true,
-            id: f.current
-        }, (0, d.sprintf)((0, l._)("Select all %(listName)s Options"), {
+            id: d.current
+        }, (0, f.sprintf)((0, i._)("Select all %(listName)s Options"), {
             listName: c
-        })),  n().createElement(le(), {
+        })),  n().createElement(ie(), {
             appearance: "checkbox",
             "data-test": "select-all",
             disabled: y,
-            labelledBy: f.current,
-            onClick: u,
+            labelledBy: d.current,
+            onClick: o,
             selected: k,
             value: c
-        }),  n().createElement(ue, null,  n().createElement(oe, {
+        }),  n().createElement(oe, null,  n().createElement(ue, {
             id: r,
-            htmlFor: i
+            htmlFor: l
         }, c),  n().createElement("span", {
             "aria-hidden": true
-        }, "".concat(C, "/").concat(x, " selected"))));
+        }, "".concat(C, "/").concat(S, " selected"))));
     }
     ve.propTypes = se;
-    /* harmony default export */    const de = ve;
+    /* harmony default export */    const fe = ve;
     // CONCATENATED MODULE: ./src/DualListbox/ListboxStyles.ts
-    var fe = _().ul.withConfig({
+    var de = _().ul.withConfig({
         displayName: "ListboxStyles__StyledListbox",
         componentId: "sc-11oqtd-0"
-    })([ "background-color:", ";border:", " solid ", ";border-radius:", ";grid-row:lists;list-style:none;margin:0;min-height:0;min-width:0;overflow:auto;padding:0;position:relative;&:focus{box-shadow:", ";outline:none;}", "" ], V.variables.transparent, V.variables.inputBorderWidth, (0, 
-    V.pick)({
-        enterprise: V.variables.gray60,
-        prisma: V.variables.interactiveColorBorder
-    }), V.variables.borderRadius, V.variables.focusShadow, (function(e) {
+    })([ "background-color:", ";border:", " solid ", ";border-radius:", ";grid-row:lists;list-style:none;margin:0;min-height:0;min-width:0;overflow:auto;padding:0;position:relative;&:focus{box-shadow:", ";outline:none;}", "" ], B.variables.transparent, B.variables.inputBorderWidth, B.variables.interactiveColorBorder, B.variables.borderRadius, B.variables.focusShadow, (function(e) {
         var r = e.$columnNumber;
         return (0, N.css)([ "grid-column:", ";" ], "list".concat(r));
     }));
@@ -600,9 +535,9 @@
         if (null == e) return {};
         var t, n, a = me(e, r);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < l.length; n++) {
+                t = l[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
         return a;
@@ -619,36 +554,36 @@
         return t;
     }
     var he = {
-        children: i().node,
-        index: i().number.isRequired,
-        label: i().string.isRequired,
-        multiSelect: i().bool,
-        name: i().string.isRequired,
-        onClick: i().func,
-        onKeyDown: i().func,
-        onSelectAllClick: i().func
+        children: l().node,
+        index: l().number.isRequired,
+        label: l().string.isRequired,
+        multiSelect: l().bool,
+        name: l().string.isRequired,
+        onClick: l().func,
+        onKeyDown: l().func,
+        onSelectAllClick: l().func
     };
     function ge(e) {
-        var r = e.children, a = e.elementRef, i = e.index, l = e.label, o = e.name, u = e.onClick, c = e.onKeyDown, s = e.onSelectAllClick, v = be(e, [ "children", "elementRef", "index", "label", "name", "onClick", "onKeyDown", "onSelectAllClick" ]);
-        var d = (0, t.useRef)((0, ae.createDOMID)("label"));
-        var f = (0, t.useRef)((0, ae.createDOMID)("listbox"));
-        var p = (0, t.useContext)(g), b = p.controlled, m = p.getSelectedStateForValue, h = p.getActiveValue, y = p.getSelectedValueCount, k = p.getValueCount, C = p.updateLabelRefreshHookByName, x = p.updateOptionRefreshHookByValue;
-        var S = (0, t.useCallback)((function(e, r) {
+        var r = e.children, a = e.elementRef, l = e.index, i = e.label, u = e.name, o = e.onClick, c = e.onKeyDown, s = e.onSelectAllClick, v = be(e, [ "children", "elementRef", "index", "label", "name", "onClick", "onKeyDown", "onSelectAllClick" ]);
+        var f = (0, t.useRef)((0, ae.createDOMID)("label"));
+        var d = (0, t.useRef)((0, ae.createDOMID)("listbox"));
+        var p = (0, t.useContext)(g), b = p.controlled, m = p.getSelectedStateForValue, h = p.getActiveValue, y = p.getSelectedValueCount, k = p.getValueCount, C = p.updateLabelRefreshHookByName, S = p.updateOptionRefreshHookByValue;
+        var w = (0, t.useCallback)((function(e, r) {
             var t = r.value;
-            u === null || u === void 0 ? void 0 : u(e, {
-                name: o,
+            o === null || o === void 0 ? void 0 : o(e, {
+                name: u,
                 value: t
             });
-        }), [ o, u ]);
-        var w = (0, t.useCallback)((function(e) {
+        }), [ u, o ]);
+        var x = (0, t.useCallback)((function(e) {
             return {
-                active: (h === null || h === void 0 ? void 0 : h(o)) === e,
+                active: (h === null || h === void 0 ? void 0 : h(u)) === e,
                 selected: !!(m === null || m === void 0 ? void 0 : m(e))
             };
-        }), [ o, h, m ]);
+        }), [ u, h, m ]);
         var O = (0, t.useCallback)((function() {
-            var e = (k === null || k === void 0 ? void 0 : k(o)) || 0;
-            var r = (y === null || y === void 0 ? void 0 : y(o)) || 0;
+            var e = (k === null || k === void 0 ? void 0 : k(u)) || 0;
+            var r = (y === null || y === void 0 ? void 0 : y(u)) || 0;
             var t = false;
             if (r > 0) {
                 t = r === e ? true : "some";
@@ -659,16 +594,16 @@
                 selectedValueCount: r,
                 valueCount: e
             };
-        }), [ o, y, k ]);
+        }), [ u, y, k ]);
         var R = function e(r) {
             c === null || c === void 0 ? void 0 : c(r, {
-                name: o
+                name: u
             });
         };
         var E = function e(r, t) {
             var n = t.selected;
             s === null || s === void 0 ? void 0 : s(r, {
-                name: o,
+                name: u,
                 selected: n
             });
         };
@@ -678,38 +613,38 @@
                 r.preventDefault();
             }
         };
-        var L = (0, t.useMemo)((function() {
+        var q = (0, t.useMemo)((function() {
             return {
-                onOptionClick: S,
+                onOptionClick: w,
                 updateLabelRefreshHookByName: C,
-                updateOptionRefreshHookByValue: x,
-                getOptionStateForValue: w,
+                updateOptionRefreshHookByValue: S,
+                getOptionStateForValue: x,
                 getLabelState: O,
                 controlled: b
             };
-        }), [ S, C, x, w, O, b ]);
+        }), [ w, C, S, x, O, b ]);
         
         return n().createElement(Q.Provider, {
-            value: L
-        },  n().createElement(de, {
-            id: d.current,
-            index: i,
-            listId: f.current,
-            name: o,
+            value: q
+        },  n().createElement(fe, {
+            id: f.current,
+            index: l,
+            listId: d.current,
+            name: u,
             onSwitchClick: E,
-            value: l
-        }),  n().createElement(fe, pe({
+            value: i
+        }),  n().createElement(de, pe({
             "aria-activedescendant": "",
-            "aria-labelledby": d.current,
+            "aria-labelledby": f.current,
             "aria-multiselectable": true,
             "data-test": "listbox",
-            id: f.current,
+            id: d.current,
             onKeyDown: R,
             onMouseDown: I,
             ref: a,
             role: "listbox",
             tabIndex: 0,
-            $columnNumber: i
+            $columnNumber: l
         }, v), r));
     }
     ge.propTypes = he;
@@ -718,23 +653,23 @@
     const ke = require("@splunk/react-ui/Box");
     var Ce =  e.n(ke);
     // CONCATENATED MODULE: ./src/DualListbox/DualListboxStyles.ts
-    var xe = _()(Ce()).withConfig({
+    var Se = _()(Ce()).withConfig({
         displayName: "DualListboxStyles__StyledBox",
         componentId: "sc-1te6bz0-0"
-    })([ "display:grid;grid-template-columns:[list0] 180px [actions] min-content [list1] 180px;grid-template-rows:[headers] min-content [lists] 160px;gap:", " ", ";", " ", "" ], V.variables.spacingXSmall, V.variables.spacingSmall, (function(e) {
+    })([ "display:grid;grid-template-columns:[list0] 180px [actions] min-content [list1] 180px;grid-template-rows:[headers] min-content [lists] 160px;gap:", " ", ";", " ", "" ], B.variables.spacingXSmall, B.variables.spacingSmall, (function(e) {
         var r = e.$inline;
         return r && (0, N.css)([ "display:inline-grid;" ]);
     }), (function(e) {
         var r = e.$fill;
         return r && (0, N.css)([ "height:100%;grid-template-columns:[list0] 1fr [actions] min-content [list1] 1fr;grid-template-rows:[headers] min-content [lists] 1fr;position:relative;width:100%;" ]);
     }));
-    var Se = _().div.withConfig({
+    var we = _().div.withConfig({
         displayName: "DualListboxStyles__StyledFlexColumn",
         componentId: "sc-1te6bz0-1"
-    })([ "&::before{content:'';grid-column:headers;grid-row:lists;}align-items:center;display:flex;flex-direction:column;gap:", ";grid-column:actions;grid-row:lists;justify-content:center;" ], V.variables.spacingSmall);
+    })([ "&::before{content:'';grid-column:headers;grid-row:lists;}align-items:center;display:flex;flex-direction:column;gap:", ";grid-column:actions;grid-row:lists;justify-content:center;" ], B.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/DualListbox/DualListbox.tsx
-    function we() {
-        return we = Object.assign ? Object.assign.bind() : function(e) {
+    function xe() {
+        return xe = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -742,10 +677,10 @@
                 }
             }
             return e;
-        }, we.apply(null, arguments);
+        }, xe.apply(null, arguments);
     }
     function Oe(e, r) {
-        return qe(e) || Le(e, r) || Ee(e, r) || Re();
+        return Le(e) || qe(e, r) || Ee(e, r) || Re();
     }
     function Re() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -764,38 +699,38 @@
         }
         return n;
     }
-    function Le(e, r) {
+    function qe(e, r) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
-            var n, a, i, l, o = [], u = !0, c = !1;
+            var n, a, l, i, u = [], o = !0, c = !1;
             try {
-                if (i = (t = t.call(e)).next, 0 === r) {
+                if (l = (t = t.call(e)).next, 0 === r) {
                     if (Object(t) !== t) return;
-                    u = !1;
-                } else for (;!(u = (n = i.call(t)).done) && (o.push(n.value), o.length !== r); u = !0) {
+                    o = !1;
+                } else for (;!(o = (n = l.call(t)).done) && (u.push(n.value), u.length !== r); o = !0) {
                 }
             } catch (e) {
                 c = !0, a = e;
             } finally {
                 try {
-                    if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
+                    if (!o && null != t["return"] && (i = t["return"](), Object(i) !== i)) return;
                 } finally {
                     if (c) throw a;
                 }
             }
-            return o;
+            return u;
         }
     }
-    function qe(e) {
+    function Le(e) {
         if (Array.isArray(e)) return e;
     }
     function Pe(e, r) {
         if (null == e) return {};
         var t, n, a = Ne(e, r);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < l.length; n++) {
+                t = l[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
         return a;
@@ -813,43 +748,43 @@
     }
     /** @public */
     /** @public */    var _e = {
-        children: i().node,
-        controlled: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        fill: i().bool,
-        inline: i().bool,
-        onChange: i().func,
-        onSelect: i().func,
-        lists: i().arrayOf(i().shape({
-            name: i().string.isRequired,
-            label: i().string.isRequired
+        children: l().node,
+        controlled: l().bool,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        fill: l().bool,
+        inline: l().bool,
+        onChange: l().func,
+        onSelect: l().func,
+        lists: l().arrayOf(l().shape({
+            name: l().string.isRequired,
+            label: l().string.isRequired
         })).isRequired
     };
-    function Ve(e) {
-        var r, a, i, u;
-        var s = e.children, f = e.controlled, b = f === void 0 ? false : f, m = e.elementRef, h = e.fill, y = h === void 0 ? false : h, k = e.inline, R = k === void 0 ? false : k, I = e.onChange, q = e.onSelect, P = e.lists, N = Pe(e, [ "children", "controlled", "elementRef", "fill", "inline", "onChange", "onSelect", "lists" ]);
+    function je(e) {
+        var r, a, l, o;
+        var s = e.children, d = e.controlled, b = d === void 0 ? false : d, m = e.elementRef, h = e.fill, y = h === void 0 ? false : h, k = e.inline, R = k === void 0 ? false : k, I = e.onChange, L = e.onSelect, P = e.lists, N = Pe(e, [ "children", "controlled", "elementRef", "fill", "inline", "onChange", "onSelect", "lists" ]);
         // @docs-props-type DualListboxPropsBase
                 var _ = p()();
-        var V = (0, t.useRef)(false);
+        var j = (0, t.useRef)(false);
         (0, t.useEffect)((function() {
-            V.current = true;
+            j.current = true;
         }), []);
         // TODO: Implement shared isControlled hook (SUI-5283).
-                var j = (0, t.useRef)(b);
+                var V = (0, t.useRef)(b);
         // List One "Available" Refs
                 var B = (0, t.useRef)([]);
-        var D = (0, t.useRef)([]);
-        var H = (0, t.useRef)();
-        var M = (0, t.useRef)(null);
-        var T = (0, t.useRef)([]);
+        var M = (0, t.useRef)([]);
+        var D = (0, t.useRef)();
+        var T = (0, t.useRef)(null);
+        var H = (0, t.useRef)([]);
         // List Two "Selected" Refs
                 var A = (0, t.useRef)([]);
         var K = (0, t.useRef)([]);
-        var $ = (0, t.useRef)();
+        var F = (0, t.useRef)();
         var z = (0, t.useRef)(null);
-        var W = (0, t.useRef)([]);
+        var U = (0, t.useRef)([]);
         // Refresh Hook Stores, used to render indivual elements when uncontrolled
-                var U = (0, t.useRef)({});
+                var W = (0, t.useRef)({});
         var X = (0, t.useRef)({});
         var G = (0, t.useRef)({});
         var J = (0, t.useRef)();
@@ -867,20 +802,20 @@
         if (false) {}
         if (false) {}
         // Unpack names and labels instead of relying on `lists` being a consistent reference
-                var ie = (r = P[0]) === null || r === void 0 ? void 0 : r.name;
-        var le = (a = P[1]) === null || a === void 0 ? void 0 : a.name;
-        var oe = (i = P[0]) === null || i === void 0 ? void 0 : i.label;
-        var ue = (u = P[1]) === null || u === void 0 ? void 0 : u.label;
+                var le = (r = P[0]) === null || r === void 0 ? void 0 : r.name;
+        var ie = (a = P[1]) === null || a === void 0 ? void 0 : a.name;
+        var ue = (l = P[0]) === null || l === void 0 ? void 0 : l.label;
+        var oe = (o = P[1]) === null || o === void 0 ? void 0 : o.label;
         // Copy previous state for uncontrolled render so it's not voided by following value reset
                 var ce = new Set(A.current);
         // This ensures we recapture the indexes after batch moves, but will be refactored when sorting is implemented (SUI-5270).
                 B.current = [];
         A.current = [];
-        T.current = [];
-        W.current = [];
+        H.current = [];
+        U.current = [];
         // Clean the data stores before we copy the references into listData
-                if (!V.current || j.current) {
-            D.current = [];
+                if (!j.current || V.current) {
+            M.current = [];
             K.current = [];
             Y.current = {};
             ee.current = {};
@@ -888,76 +823,76 @@
         }
         var se = [ {
             options: [],
-            matchOptions: T.current,
+            matchOptions: H.current,
             values: B.current,
-            selectedValues: D.current,
-            activeValue: H.current,
-            activeFound: !H.current
+            selectedValues: M.current,
+            activeValue: D.current,
+            activeFound: !D.current
         }, {
             options: [],
-            matchOptions: W.current,
+            matchOptions: U.current,
             values: A.current,
             selectedValues: K.current,
-            activeValue: $.current,
-            activeFound: !$.current
+            activeValue: F.current,
+            activeFound: !F.current
         } ];
-        if (!V.current || j.current) {
+        if (!j.current || V.current) {
             t.Children.toArray(s).filter(t.isValidElement).forEach((function(e) {
                 var r = e.props, t = r.value, n = r.label;
-                var a = e.props.listName === le;
-                var i = se[a ? 1 : 0];
+                var a = e.props.listName === ie;
+                var l = se[a ? 1 : 0];
                 // Ensure the active value is found on controlled renders
-                                if (!i.activeFound && i.activeValue === t) {
-                    i.activeFound = true;
+                                if (!l.activeFound && l.activeValue === t) {
+                    l.activeFound = true;
                 }
-                i.values.push(t);
-                i.options.push(e);
-                i.matchOptions.push({
+                l.values.push(t);
+                l.options.push(e);
+                l.matchOptions.push({
                     value: t,
                     label: n
                 });
-                var l = !!e.props.selected;
-                if (l) {
-                    i.selectedValues.push(t);
+                var i = !!e.props.selected;
+                if (i) {
+                    l.selectedValues.push(t);
                 }
-                Y.current[t] = l;
-                ee.current[t] = i.values.length - 1;
+                Y.current[t] = i;
+                ee.current[t] = l.values.length - 1;
                 Z.current[t] = e.props.id;
             }));
         } else {
             t.Children.toArray(s).filter(t.isValidElement).forEach((function(e) {
                 var r = e.props, t = r.value, n = r.label;
                 var a = ce.has(t);
-                var i = se[a ? 1 : 0];
-                i.values.push(t);
-                i.options.push(e);
-                i.matchOptions.push({
+                var l = se[a ? 1 : 0];
+                l.values.push(t);
+                l.options.push(e);
+                l.matchOptions.push({
                     value: t,
                     label: n
                 });
-                ee.current[t] = i.values.length - 1;
+                ee.current[t] = l.values.length - 1;
             }));
         }
         var ve = (0, t.useCallback)((function(e, r) {
-            if (e === ie) {
-                H.current = r;
+            if (e === le) {
+                D.current = r;
             } else {
-                $.current = r;
+                F.current = r;
             }
-        }), [ ie ]);
-        var de = (0, t.useCallback)((function(e) {
-            return e === ie ? H.current : $.current;
-        }), [ ie ]);
-        var fe = (0, t.useCallback)((function(e, r) {
-            if (e === ie) {
-                D.current = r;
+        }), [ le ]);
+        var fe = (0, t.useCallback)((function(e) {
+            return e === le ? D.current : F.current;
+        }), [ le ]);
+        var de = (0, t.useCallback)((function(e, r) {
+            if (e === le) {
+                M.current = r;
             } else {
                 K.current = r;
             }
-        }), [ ie ]);
+        }), [ le ]);
         var pe = (0, t.useCallback)((function(e) {
-            return e === ie ? D.current : K.current;
-        }), [ ie ]);
+            return e === le ? M.current : K.current;
+        }), [ le ]);
         var be = (0, t.useCallback)((function(e) {
             return pe(e).length;
         }), [ pe ]);
@@ -968,15 +903,15 @@
             return Y.current[e];
         }), []);
         var ge = (0, t.useCallback)((function(e, r) {
-            if (e === ie) {
+            if (e === le) {
                 B.current = r;
             } else {
                 A.current = r;
             }
-        }), [ ie ]);
+        }), [ le ]);
         var ke = (0, t.useCallback)((function(e) {
-            return e === ie ? B.current : A.current;
-        }), [ ie ]);
+            return e === le ? B.current : A.current;
+        }), [ le ]);
         var Ce = (0, t.useCallback)((function(e) {
             return ke(e).length;
         }), [ ke ]);
@@ -985,8 +920,8 @@
             return r > 0 && r === be(e);
         }), [ Ce, be ]);
         var Ee = (0, t.useCallback)((function(e) {
-            return e === ie ? T.current : W.current;
-        }), [ ie ]);
+            return e === le ? H.current : U.current;
+        }), [ le ]);
         var Ie = (0, t.useCallback)((function(e) {
             var r = Ce(e);
             var t = be(e);
@@ -994,14 +929,14 @@
                 disabled: r < 1 || t < 1
             };
         }), [ Ce, be ]);
-        var Le = (0, t.useCallback)((function() {
+        var qe = (0, t.useCallback)((function() {
             if (Q.current && Q.current.length > 0) {
                 var e;
                 Q.current = "";
                 (e = J.current) === null || e === void 0 ? void 0 : e.call(J);
             }
         }), []);
-        var qe = (0, t.useCallback)((function() {
+        var Le = (0, t.useCallback)((function() {
             te.current = undefined;
             ae.current = [];
             if (ne.current) {
@@ -1018,18 +953,18 @@
                 delete G.current[e];
             }
         }), []);
-        var Ve = (0, t.useCallback)((function(e, r) {
+        var je = (0, t.useCallback)((function(e, r) {
             if (r) {
                 X.current[e] = r;
             } else {
                 delete X.current[e];
             }
         }), []);
-        var je = (0, t.useCallback)((function(e, r) {
+        var Ve = (0, t.useCallback)((function(e, r) {
             if (r) {
-                U.current[e] = r;
+                W.current[e] = r;
             } else {
-                delete U.current[e];
+                delete W.current[e];
             }
         }), []);
         var Be = (0, t.useCallback)((function(e) {
@@ -1038,31 +973,31 @@
                 (r = (t = G.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
             }
         }), []);
-        var De = (0, t.useCallback)((function(e) {
+        var Me = (0, t.useCallback)((function(e) {
             if (e) {
                 var r, t;
                 (r = (t = X.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
             }
         }), []);
-        var He = (0, t.useCallback)((function(e) {
+        var De = (0, t.useCallback)((function(e) {
             if (e) {
                 var r, t;
-                (r = (t = U.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
+                (r = (t = W.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
             }
         }), []);
-        var Me = (0, t.useCallback)((function(e) {
-            Le();
-            De(e);
-            He(ie);
-            He(le);
-        }), [ Le, He, De, ie, le ]);
-        var Te = (0, t.useCallback)((function(e, r) {
+        var Te = (0, t.useCallback)((function(e) {
+            qe();
+            Me(e);
+            De(le);
+            De(ie);
+        }), [ qe, De, Me, le, ie ]);
+        var He = (0, t.useCallback)((function(e, r) {
             var t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-            var n = e === ie ? M.current : z.current;
+            var n = e === le ? T.current : z.current;
             if (!n) {
                 return;
             }
-            var a = de(e);
+            var a = fe(e);
             ve(e, r);
             if (!t) {
                 // render new
@@ -1073,45 +1008,45 @@
                     // render previous
                     Be(a);
                 }
-                var i = r ? Z.current[r] : "";
+                var l = r ? Z.current[r] : "";
                 // update listbox via dom to avoid render + child render
-                                n.setAttribute("aria-activedescendant", i);
-                if (!t && i.length > 0) {
-                    var l = n.querySelector("#".concat(i));
-                    O(l);
+                                n.setAttribute("aria-activedescendant", l);
+                if (!t && l.length > 0) {
+                    var i = n.querySelector("#".concat(l));
+                    O(i);
                 }
             }
-        }), [ de, ve, Be, ie ]);
+        }), [ fe, ve, Be, le ]);
         var Ae = (0, t.useCallback)((function(e, r) {
             var t = r.value, n = r.name;
             var a = Re(n) ? ke(n) : pe(n);
-            var i = x(a, t);
-            if (!j.current) {
+            var l = S(a, t);
+            if (!V.current) {
                 Y.current[t] = !Y.current[t];
-                fe(n, i);
-                Me(n);
+                de(n, l);
+                Te(n);
             }
-            Te(n, t);
+            He(n, t);
             e.preventDefault();
-            q === null || q === void 0 ? void 0 : q(e, {
-                values: i,
+            L === null || L === void 0 ? void 0 : L(e, {
+                values: l,
                 listName: n
             });
-        }), [ Re, pe, ke, fe, Te, Me, q ]);
+        }), [ Re, pe, ke, de, He, Te, L ]);
         var Ke = (0, t.useCallback)((function(e, r) {
             var t = r.initialIndex, n = r.name, a = r.targetIndex;
-            var i = ke(n);
-            var l = Math.min(t, a);
-            var o = Math.max(t, a);
-            var u = [];
-            if (j.current) {
-                u = i.slice(l, o + 1);
+            var l = ke(n);
+            var i = Math.min(t, a);
+            var u = Math.max(t, a);
+            var o = [];
+            if (V.current) {
+                o = l.slice(i, u + 1);
             } else {
-                i.forEach((function(e, r) {
+                l.forEach((function(e, r) {
                     var t = false;
-                    if (r >= l && r <= o) {
+                    if (r >= i && r <= u) {
                         t = true;
-                        u.push(e);
+                        o.push(e);
                     } else {
                         t = false;
                     }
@@ -1120,72 +1055,72 @@
                         Be(e);
                     }
                 }));
-                fe(n, u);
-                Me(n);
+                de(n, o);
+                Te(n);
             }
-            Te(n, i[a]);
+            He(n, l[a]);
             e.preventDefault();
             e.stopPropagation();
-            q === null || q === void 0 ? void 0 : q(e, {
-                values: u,
+            L === null || L === void 0 ? void 0 : L(e, {
+                values: o,
                 listName: n
             });
-        }), [ ke, q, fe, Te, Me, Be ]);
-        var $e = (0, t.useCallback)((function(e, r) {
+        }), [ ke, L, de, He, Te, Be ]);
+        var Fe = (0, t.useCallback)((function(e, r) {
             var t = r.name, n = r.selected;
             var a = ke(t);
-            var i = n === true ? [] : a;
-            var l = n !== true;
-            if (!j.current) {
+            var l = n === true ? [] : a;
+            var i = n !== true;
+            if (!V.current) {
                 a === null || a === void 0 ? void 0 : a.forEach((function(e) {
-                    if (Y.current[e] !== l) {
-                        Y.current[e] = l;
+                    if (Y.current[e] !== i) {
+                        Y.current[e] = i;
                         Be(e);
                     }
                 }));
-                fe(t, i);
-                Me(t);
+                de(t, l);
+                Te(t);
             }
             e.preventDefault();
-            q === null || q === void 0 ? void 0 : q(e, {
-                values: i,
+            L === null || L === void 0 ? void 0 : L(e, {
+                values: l,
                 listName: t
             });
-        }), [ ke, q, fe, Me, Be ]);
+        }), [ ke, L, de, Te, Be ]);
         // handleMoveValues does not update the active value of the source, keyboard and mouse differ, only the target active value is updated
-                var Fe = (0, t.useCallback)((function(e, r, t) {
+                var $e = (0, t.useCallback)((function(e, r, t) {
             var n = ke(r);
             var a = pe(r);
-            var i = Re(r);
-            var o = ke(t);
-            var u = de(t);
-            if (n.length === 0 || !i && a.length === 0) {
+            var l = Re(r);
+            var u = ke(t);
+            var o = fe(t);
+            if (n.length === 0 || !l && a.length === 0) {
                 return;
             }
-            if (!u && a.length > 0) {
+            if (!o && a.length > 0) {
                 // target lacks an active value, default to the first
                 // skip the render it will be catch in batch
-                Te(t, a[0], true);
+                He(t, a[0], true);
             }
-            var c = (0, d.sprintf)((0, l._)("Moved %(count)d items to %(listLabel)s list"), {
+            var c = (0, f.sprintf)((0, i._)("Moved %(count)d items to %(listLabel)s list"), {
                 count: a.length,
-                listLabel: t === ie ? oe : ue
+                listLabel: t === le ? ue : oe
             });
             // These new values do not perserve sort position, may need to be refactored with sort logic (SUI-5270).
-                        var s = i ? [] : S(n, a);
-            var v = o.concat(a);
-            if (!j.current) {
+                        var s = l ? [] : w(n, a);
+            var v = u.concat(a);
+            if (!V.current) {
                 a.forEach((function(e) {
                     Y.current[e] = false;
                 }));
                 ge(t, v);
                 ge(r, s);
-                fe(r, []);
+                de(r, []);
                 Q.current = c;
                 // move is a batch update, force a full render, no internal update needed
                                 _();
             }
-            var f = {
+            var d = {
                 affectedValues: a,
                 sourceListName: r || "",
                 sourceValues: s,
@@ -1195,20 +1130,20 @@
                 values: a.slice()
             };
             e.preventDefault();
-            I === null || I === void 0 ? void 0 : I(e, f);
-        }), [ _, de, Re, pe, ke, I, fe, ge, Te, ie, oe, ue ]);
+            I === null || I === void 0 ? void 0 : I(e, d);
+        }), [ _, fe, Re, pe, ke, I, de, ge, He, le, ue, oe ]);
         var ze = (0, t.useCallback)((function(e, r) {
             var t = r.name;
             var n = Re(t);
-            var a = de(t);
-            var i = t === ie ? le : ie;
+            var a = fe(t);
+            var l = t === le ? ie : le;
             if (a && (n || !!Y.current[a])) {
                 // active option was present in items to be removed, clear the active option
-                Te(t);
+                He(t);
             }
-            Fe(e, t, i);
-        }), [ de, Re, Fe, Te, ie, le ]);
-        var We = (0, t.useCallback)((function(e, r) {
+            $e(e, t, l);
+        }), [ fe, Re, $e, He, le, ie ]);
+        var Ue = (0, t.useCallback)((function(e, r) {
             var t = r.name, n = r.value;
             if (e.nativeEvent.shiftKey) {
                 Ke(e, {
@@ -1223,68 +1158,68 @@
                 });
             }
         }), [ Ke, Ae ]);
-        var Ue = (0, t.useCallback)((function(e, r) {
-            $e(e, r);
-        }), [ $e ]);
+        var We = (0, t.useCallback)((function(e, r) {
+            Fe(e, r);
+        }), [ Fe ]);
         var Xe = (0, t.useCallback)((function(e, r) {
             var t = e.nativeEvent.key;
             var n = Ee(r);
             // Checking for a single character to avoid complications from double-byte languages and emojis.
                         if (t.length === 1) {
                 var a = [];
-                var i = {
+                var l = {
                     index: 0,
                     value: t
                 };
                 if (!te.current) {
                     if (t === " ") {
-                        qe();
+                        Le();
                         return;
                     }
-                    a = E(n, i);
+                    a = E(n, l);
                 } else if (ae.current.length > 1) {
-                    i.index = te.current.index + 1;
-                    a = E(ae.current, i);
+                    l.index = te.current.index + 1;
+                    a = E(ae.current, l);
                 }
                 if (a.length) {
-                    var l = 0;
+                    var i = 0;
                     // If the active option is a first character match, cycle to the next matching option.
-                                        if (i.index === 0 && a.length > 1) {
-                        var o = de(r);
-                        if (o) {
-                            var u = a.findIndex((function(e) {
-                                return e.value === o;
+                                        if (l.index === 0 && a.length > 1) {
+                        var u = fe(r);
+                        if (u) {
+                            var o = a.findIndex((function(e) {
+                                return e.value === u;
                             }));
-                            if (u >= 0) {
-                                l = u === a.length - 1 ? 0 : u + 1;
+                            if (o >= 0) {
+                                i = o === a.length - 1 ? 0 : o + 1;
                             }
                         }
                     }
-                    Te(r, a[l].value);
+                    He(r, a[i].value);
                 }
                 ae.current = a;
-                te.current = i;
+                te.current = l;
                 if (ne.current) {
                     clearTimeout(ne.current);
                 }
-                ne.current = setTimeout(qe, 500);
+                ne.current = setTimeout(Le, 500);
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }), [ de, Ee, qe, Te ]);
+        }), [ fe, Ee, Le, He ]);
         var Ge = (0, t.useCallback)((function(e, r) {
             var t = r.name;
-            var n = (0, o.keycode)(e.nativeEvent);
+            var n = (0, u.keycode)(e.nativeEvent);
             var a = ke(t);
-            var i = pe(t);
-            var l = Re(t);
-            var u = de(t);
-            var c = u ? ee.current[u] : -1;
+            var l = pe(t);
+            var i = Re(t);
+            var o = fe(t);
+            var c = o ? ee.current[o] : -1;
             var s = re.current >= 0 ? re.current : 0;
             if (Q.current && Q.current.length > 0) {
-                Le();
+                qe();
             }
-            var v = u;
+            var v = o;
             switch (n) {
               case "shift":
                 re.current = c;
@@ -1299,8 +1234,8 @@
                         name: t
                     });
                 } else {
-                    var d = Oe(a, 1);
-                    v = d[0];
+                    var f = Oe(a, 1);
+                    v = f[0];
                 }
                 break;
 
@@ -1344,46 +1279,46 @@
                 break;
 
               case "space":
-                if (u != null) {
+                if (o != null) {
                     Ae(e, {
                         name: t,
-                        value: u
+                        value: o
                     });
                 }
                 break;
 
               case "enter":
-                if (t === ie) {
-                    if (l) {
+                if (t === le) {
+                    if (i) {
                         // all values moved, no longer an active value
                         v = undefined;
-                    } else if (i.length > 0) {
+                    } else if (l.length > 0) {
                         // somes values moved, determine next active value
-                        v = w(c, a, i);
+                        v = x(c, a, l);
                     }
-                    Fe(e, ie, le);
+                    $e(e, le, ie);
                 }
                 break;
 
               case "delete":
-                if (t === le) {
-                    if (l) {
+                if (t === ie) {
+                    if (i) {
                         // all values moved, no longer an active value
                         v = undefined;
-                    } else if (i.length > 0) {
+                    } else if (l.length > 0) {
                         // somes values moved, determine next active value
-                        v = w(c, a, i);
+                        v = x(c, a, l);
                     }
-                    Fe(e, le, ie);
+                    $e(e, ie, le);
                 }
                 break;
 
               default:
                 if (n === "a" && (e.nativeEvent.ctrlKey || e.nativeEvent.metaKey)) {
                     // handle control + A, otherwise let 'a' passthrough
-                    $e(e, {
+                    Fe(e, {
                         name: t,
-                        selected: l
+                        selected: i
                     });
                 } else {
                     // do fuzzy match
@@ -1391,43 +1326,43 @@
                 }
                 break;
             }
-            if (v !== u) {
+            if (v !== o) {
                 e.preventDefault();
-                Te(t, v);
+                He(t, v);
             }
-        }), [ Le, de, Re, pe, ke, Xe, Fe, Ke, Ae, $e, Te, ie, le ]);
+        }), [ qe, fe, Re, pe, ke, Xe, $e, Ke, Ae, Fe, He, le, ie ]);
         var Je = (0, t.useMemo)((function() {
             return {
                 onButtonClick: ze,
-                updateButtonRefreshHookByName: je,
+                updateButtonRefreshHookByName: Ve,
                 getButtonState: Ie
             };
-        }), [ ze, je, Ie ]);
+        }), [ ze, Ve, Ie ]);
         var Qe = (0, t.useMemo)((function() {
             return {
-                controlled: j.current,
-                getActiveValue: de,
+                controlled: V.current,
+                getActiveValue: fe,
                 getScreenReaderMessage: me,
                 getSelectedStateForValue: he,
                 getSelectedValueCount: be,
                 getValueCount: Ce,
-                updateLabelRefreshHookByName: Ve,
+                updateLabelRefreshHookByName: je,
                 updateOptionRefreshHookByValue: _e,
                 updateScreenReaderRefreshHook: Ne
             };
-        }), [ de, me, he, be, Ce, Ve, _e, Ne ]);
-        if (j.current && !se[0].activeFound) {
+        }), [ fe, me, he, be, Ce, je, _e, Ne ]);
+        if (V.current && !se[0].activeFound) {
             // listOne active value wasn't found, likely the result of a controlled state reset
             // update interal values, skip the render it will be caught in batch
-            Te(ie, undefined, true);
+            He(le, undefined, true);
         }
-        if (j.current && !se[1].activeFound) {
+        if (V.current && !se[1].activeFound) {
             // listTwo active value wasn't found, likely the result of a controlled state reset
             // update interal values, skip the render it will be caught in batch
-            Te(le, undefined, true);
+            He(ie, undefined, true);
         }
         
-        return n().createElement(xe, we({
+        return n().createElement(Se, xe({
             "data-test": "dual-listbox",
             elementRef: m,
             $inline: y ? false : R,
@@ -1436,51 +1371,51 @@
             value: Qe
         },  n().createElement(ye, {
             index: 0,
-            elementRef: M,
-            label: oe,
-            name: ie,
-            onClick: We,
+            elementRef: T,
+            label: ue,
+            name: le,
+            onClick: Ue,
             onKeyDown: Ge,
-            onSelectAllClick: Ue
-        }, se[0].options),  n().createElement(Se, null,  n().createElement(L.Provider, {
+            onSelectAllClick: We
+        }, se[0].options),  n().createElement(we, null,  n().createElement(q.Provider, {
             value: Je
-        },  n().createElement(F, {
-            ariaLabel: (0, d.sprintf)((0, l._)("Move selected options to %(listLabel)s list"), {
-                listLabel: ue
+        },  n().createElement($, {
+            ariaLabel: (0, f.sprintf)((0, i._)("Move selected options to %(listLabel)s list"), {
+                listLabel: oe
             }),
             ariaKeyShortcuts: "Enter",
             "data-test": "move-to-secondary",
             icon:  n().createElement(v(), null),
-            name: ie,
-            tooltipLabel: (0, d.sprintf)((0, l._)("Move to %(listLabel)s"), {
-                listLabel: ue
+            name: le,
+            tooltipLabel: (0, f.sprintf)((0, i._)("Move to %(listLabel)s"), {
+                listLabel: oe
             }),
             tooltipPlacement: "left"
-        }),  n().createElement(F, {
-            ariaLabel: (0, d.sprintf)((0, l._)("Move selected options to %(listLabel)s list"), {
-                listLabel: oe
+        }),  n().createElement($, {
+            ariaLabel: (0, f.sprintf)((0, i._)("Move selected options to %(listLabel)s list"), {
+                listLabel: ue
             }),
             ariaKeyShortcuts: "Delete",
             "data-test": "move-to-primary",
             icon:  n().createElement(c(), null),
-            name: le,
-            tooltipLabel: (0, d.sprintf)((0, l._)("Move to %(listLabel)s"), {
-                listLabel: oe
+            name: ie,
+            tooltipLabel: (0, f.sprintf)((0, i._)("Move to %(listLabel)s"), {
+                listLabel: ue
             }),
             tooltipPlacement: "right"
         }))),  n().createElement(ye, {
             index: 1,
             elementRef: z,
-            label: ue,
-            name: le,
-            onClick: We,
+            label: oe,
+            name: ie,
+            onClick: Ue,
             onKeyDown: Ge,
-            onSelectAllClick: Ue
+            onSelectAllClick: We
         }, se[1].options),  n().createElement(C, null)));
     }
-    Ve.propTypes = _e;
-    Ve.Option = ne;
-    /* harmony default export */    const je = Ve;
+    je.propTypes = _e;
+    je.Option = ne;
+    /* harmony default export */    const Ve = je;
     // CONCATENATED MODULE: ./src/DualListbox/index.ts
     module.exports = r;
     /******/})();