@splunk/react-ui 5.0.0 → 5.1.0

package/DualListbox.js

@@ -61,7 +61,7 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Option: () => /* reexport */ ne,
+        Option: () => /* reexport */ ae,
         default: () => /* reexport */ Ve
     });
     // CONCATENATED MODULE: external "react"
@@ -70,22 +70,21 @@
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
     var l =  e.n(a);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const i = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronLeft"
-    const o = require("@splunk/react-icons/ChevronLeft");
-    var u =  e.n(o);
+    const i = require("@splunk/react-icons/ChevronLeft");
+    var u =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const c = require("@splunk/react-icons/ChevronRight");
-    var s =  e.n(c);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const v = require("@splunk/ui-utils/format");
+    const o = require("@splunk/react-icons/ChevronRight");
+    var c =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/useForceUpdate"
-    const f = require("@splunk/react-ui/useForceUpdate");
-    var d =  e.n(f);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const p = require("@splunk/react-ui/ScreenReaderContent");
-    var b =  e.n(p);
+    const s = require("@splunk/react-ui/useForceUpdate");
+    var v =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
+    const d = require("@splunk/ui-utils/format");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const f = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
+    const p = require("@splunk/ui-utils/scroll");
     // CONCATENATED MODULE: ./src/DualListbox/DualListboxContext.tsx
     /**
  * A React context used to inform subcomponets of DualListbox of parent component values.
@@ -93,164 +92,123 @@
  * Defaults to `'{}'`.
  * @public
  */
-    var m =  n().createContext({});
-    /* harmony default export */    const h = m;
-    // CONCATENATED MODULE: ./src/DualListbox/ScreenReaderWrapper.tsx
-    function g() {
-        return g = Object.assign ? Object.assign.bind() : function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
-                }
-            }
-            return e;
-        }, g.apply(null, arguments);
-    }
-    function y(e) {
-        var r = g({}, e);
-        var a = d()();
-        var l = (0, t.useContext)(h);
-        var i = l.getScreenReaderMessage, o = l.updateScreenReaderRefreshHook;
+    var b =  n().createContext({});
+    /* harmony default export */    const m = b;
+    // CONCATENATED MODULE: external "styled-components"
+    const h = require("styled-components");
+    var g =  e.n(h);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
+    const y = require("@splunk/react-ui/Box");
+    var k =  e.n(y);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const C = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/DualListbox/DualListboxStyles.ts
+    var S = g()(k()).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:", " ", ";", " ", "" ], C.variables.spacingXSmall, C.variables.spacingSmall, (function(e) {
+        var r = e.$inline;
+        return r && (0, h.css)([ "display:inline-grid;" ]);
+    }), (function(e) {
+        var r = e.$fill;
+        return r && (0, h.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 w = g().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;" ], C.variables.spacingSmall);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const x = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const O = require("@splunk/react-ui/ScreenReaderContent");
+    var R =  e.n(O);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
+    const E = require("@splunk/react-ui/Switch");
+    var I =  e.n(E);
+    // CONCATENATED MODULE: ./src/DualListbox/LabelStyles.ts
+    var q = g().label.withConfig({
+        displayName: "LabelStyles__StyledLabel",
+        componentId: "unwplx-0"
+    })([ "color:", ";flex:0 0 auto;" ], C.variables.contentColorActive);
+    var L = g().div.withConfig({
+        displayName: "LabelStyles__StyledLabelContainer",
+        componentId: "unwplx-1"
+    })([ "display:flex;flex-direction:column;" ]);
+    var N = g().div.withConfig({
+        displayName: "LabelStyles__StyledSwitchContainer",
+        componentId: "unwplx-2"
+    })([ "align-items:center;border:", " solid transparent;display:flex;gap:", ";grid-row:headers;padding:0 ", ";", "" ], C.variables.inputBorderWidth, C.variables.spacingSmall, C.variables.spacingSmall, (function(e) {
+        var r = e.$columnNumber;
+        return (0, h.css)([ "grid-column:", ";" ], "list".concat(r));
+    }));
+    // CONCATENATED MODULE: ./src/DualListbox/ListboxContext.tsx
+    /**
+ * A React context used to inform subcomponets of Listbox of parent component values.
+ * The context interface is `ListboxContextValue`.
+ * Defaults to `'{}'`.
+ * @public
+ */
+    var P =  n().createContext({});
+    /* harmony default export */    const _ = P;
+    // CONCATENATED MODULE: ./src/DualListbox/Label.tsx
+    var j = {
+        id: l().string.isRequired,
+        index: l().number.isRequired,
+        listId: l().string.isRequired,
+        name: l().string.isRequired,
+        onSwitchClick: l().func,
+        value: l().string.isRequired
+    };
+    function V(e) {
+        var r = e.id, a = e.index, l = e.listId, i = e.name, u = e.onSwitchClick, o = e.value;
+        var c = (0, t.useContext)(_);
+        var s = v()();
+        var p = (0, t.useRef)((0, x.createDOMID)("switch"));
+        var b = c.updateLabelRefreshHookByName, m = c.getLabelState;
         (0, t.useEffect)((function() {
-            o === null || o === void 0 ? void 0 : o(a);
+            b === null || b === void 0 ? void 0 : b(i, s);
             return function() {
-                return o === null || o === void 0 ? void 0 : o();
+                return b === null || b === void 0 ? void 0 : b(i);
             };
-        }), [ o, a ]);
-        if (!i) {
+        }), [ i, b, s ]);
+        if (!m) {
             return null;
         }
+        var h = m(), g = h.disabled, y = h.selected, k = h.selectedValueCount, C = h.valueCount;
         
-        return n().createElement(b(), g({
-            "aria-live": "assertive"
-        }, r), i() || "");
+        return n().createElement(N, {
+            $columnNumber: a
+        },  n().createElement(R(), {
+            "aria-hidden": true,
+            id: p.current
+        }, (0, d.sprintf)((0, f._)("Select all %(listName)s Options"), {
+            listName: o
+        })),  n().createElement(I(), {
+            appearance: "checkbox",
+            "data-test": "select-all",
+            disabled: g,
+            labelledBy: p.current,
+            onClick: u,
+            selected: y,
+            value: o
+        }),  n().createElement(L, null,  n().createElement(q, {
+            id: r,
+            htmlFor: l
+        }, o),  n().createElement("span", {
+            "aria-hidden": true
+        }, "".concat(k, "/").concat(C, " selected"))));
     }
-    /* harmony default export */    const k = y;
-    // CONCATENATED MODULE: ./src/DualListbox/listboxUtils.ts
-    var C = function e(r, t) {
-        var n = r.filter((function(e) {
-            return e !== t;
-        }));
-        if (r.length === n.length) {
-            n.push(t);
-        }
-        return n;
-    };
-    var S = 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) {
-        if (r < 0) {
-            return undefined;
-        }
-        var a = t[r];
-        var l = new Set(n);
-        if (!l.has(a)) {
-            return a;
-        }
-        for (var i = r + 1; i < t.length; i += 1) {
-            var o = t[i];
-            if (!l.has(o)) {
-                return o;
-            }
-        }
-        for (var u = r - 1; u > 0; u -= 1) {
-            var c = t[u];
-            if (!l.has(c)) {
-                return c;
-            }
-        }
-        return undefined;
-    };
-    // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
-    // A utility that attempts to move an element into view by scrolling it's derived parent.
-    var x = function e(r) {
-        if (!r) {
-            return;
-        }
-        var t = r.offsetParent;
-        if (!t) {
-            return;
-        }
-        // Below the bottom of the container.
-                if (t.scrollTop + t.clientHeight < r.offsetTop + r.clientHeight) {
-            t.scrollTop = r.offsetTop + r.clientHeight - t.clientHeight;
-            // Above the top of the container.
-                } else if (t.scrollTop > r.offsetTop) {
-            t.scrollTop = r.offsetTop;
-        }
-    };
-    // CONCATENATED MODULE: ./src/utils/fuzzyMatch.ts
-    // A utility for matching keyboard characters to list values
-    var O = function e(r, t) {
-        return r ? r.label.charAt(t).toLowerCase() : "";
-    };
-    var R = function e(r, t) {
-        if (!r.length) {
-            return r;
-        }
-        var n = null;
-        var a = false;
-        var l = r.filter((function(e) {
-            var r = O(e, t.index);
-            if (r === t.value) {
-                a = true;
-                return true;
-            }
-            // 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 l = O(n, t.index);
-                if (!l) {
-                    n = e;
-                } else if (r > t.value) {
-                    if (l < t.value) {
-                        n = e;
-                    } else if (l > r) {
-                        n = e;
-                    }
-                } else if (r > l) {
-                    n = e;
-                }
-            }
-            return false;
-        }));
-        return l.length === 0 && n ? [ n ] : l;
-    };
-    // CONCATENATED MODULE: ./src/DualListbox/ToolbarContext.tsx
-    /**
- * A React context used to inform subcomponets of Toolbar of parent component values.
- * The context interface is `ToolbarContextValue`.
- * Defaults to `'{}'`.
- * @public
- */
-    var E =  n().createContext({});
-    /* harmony default export */    const I = E;
-    // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-    const L = require("@splunk/react-ui/Tooltip");
-    var q =  e.n(L);
-    // CONCATENATED MODULE: external "styled-components"
-    const P = require("styled-components");
-    var N =  e.n(P);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const _ = require("@splunk/react-ui/ButtonSimple");
-    var j =  e.n(_);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const V = require("@splunk/themes");
-    // CONCATENATED MODULE: ./src/DualListbox/ToolbarButtonStyles.ts
-    var B = N()(j()).withConfig({
-        displayName: "ToolbarButtonStyles__StyledButtonSimple",
-        componentId: "k7zksz-0"
-    })([ "height:", ";width:", ";" ], V.variables.inputHeight, V.variables.inputHeight);
-    var D = N().span.withConfig({
-        displayName: "ToolbarButtonStyles__StyledIcon",
-        componentId: "k7zksz-1"
-    })([ "align-items:center;display:flex;flex-direction:row;flex-shrink:0;justify-content:center;max-width:100%;" ]);
-    // CONCATENATED MODULE: ./src/DualListbox/ToolbarButton.tsx
+    V.propTypes = j;
+    /* harmony default export */    const B = V;
+    // CONCATENATED MODULE: ./src/DualListbox/ListboxStyles.ts
+    var D = g().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;}", "" ], C.variables.transparent, C.variables.inputBorderWidth, C.variables.interactiveColorBorder, C.variables.borderRadius, C.variables.focusShadow, (function(e) {
+        var r = e.$columnNumber;
+        return (0, h.css)([ "grid-column:", ";" ], "list".concat(r));
+    }));
+    // CONCATENATED MODULE: ./src/DualListbox/Listbox.tsx
     function M() {
         return M = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
@@ -262,9 +220,9 @@
             return e;
         }, M.apply(null, arguments);
     }
-    function T(e, r) {
+    function A(e, r) {
         if (null == e) return {};
-        var t, n, a = A(e, r);
+        var t, n, a = H(e, r);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (n = 0; n < l.length; n++) {
@@ -273,7 +231,7 @@
         }
         return a;
     }
-    function A(e, r) {
+    function H(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -284,85 +242,167 @@
         }
         return t;
     }
-    var H = {
-        icon: l().node.isRequired,
+    var T = {
+        children: l().node,
+        index: l().number.isRequired,
+        label: l().string.isRequired,
+        multiSelect: l().bool,
         name: l().string.isRequired,
-        tooltipLabel: l().string.isRequired,
-        tooltipPlacement: l().oneOf([ "above", "below", "left", "right" ])
+        onClick: l().func,
+        onKeyDown: l().func,
+        onSelectAllClick: l().func
     };
     function K(e) {
-        var r = e.ariaLabel, a = e.ariaKeyShortcuts, l = e.icon, i = e.name, o = e.tooltipLabel, u = e.tooltipPlacement, c = T(e, [ "ariaLabel", "ariaKeyShortcuts", "icon", "name", "tooltipLabel", "tooltipPlacement" ]);
-        var s = (0, t.useContext)(I);
-        var v = d()();
-        var f = s.getButtonState, p = s.onButtonClick, b = s.updateButtonRefreshHookByName;
-        (0, t.useEffect)((function() {
-            b === null || b === void 0 ? void 0 : b(i, v);
-            return function() {
-                return b === null || b === void 0 ? void 0 : b(i);
+        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 = A(e, [ "children", "elementRef", "index", "label", "name", "onClick", "onKeyDown", "onSelectAllClick" ]);
+        var d = (0, t.useRef)((0, x.createDOMID)("label"));
+        var f = (0, t.useRef)((0, x.createDOMID)("listbox"));
+        var p = (0, t.useContext)(m), b = p.controlled, h = p.getSelectedStateForValue, g = 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;
+            o === null || o === void 0 ? void 0 : o(e, {
+                name: u,
+                value: t
+            });
+        }), [ u, o ]);
+        var O = (0, t.useCallback)((function(e) {
+            return {
+                active: (g === null || g === void 0 ? void 0 : g(u)) === e,
+                selected: !!(h === null || h === void 0 ? void 0 : h(e))
             };
-        }), [ i, b, v ]);
-        var m = (0, t.useCallback)((function(e) {
-            p === null || p === void 0 ? void 0 : p(e, {
-                name: i
+        }), [ u, g, h ]);
+        var R = (0, t.useCallback)((function() {
+            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";
+            }
+            return {
+                disabled: e < 1,
+                selected: t,
+                selectedValueCount: r,
+                valueCount: e
+            };
+        }), [ u, y, k ]);
+        var E = function e(r) {
+            c === null || c === void 0 ? void 0 : c(r, {
+                name: u
             });
-        }), [ p, i ]);
-        if (!f) {
-            return null;
-        }
-        var h = f(i), g = h.disabled;
+        };
+        var I = function e(r, t) {
+            var n = t.selected;
+            s === null || s === void 0 ? void 0 : s(r, {
+                name: u,
+                selected: n
+            });
+        };
+        var q = function e(r) {
+            // this prevents default text selection when using shift + click
+            if (r.shiftKey && r.target !== r.currentTarget) {
+                r.preventDefault();
+            }
+        };
+        var L = (0, t.useMemo)((function() {
+            return {
+                onOptionClick: w,
+                updateLabelRefreshHookByName: C,
+                updateOptionRefreshHookByValue: S,
+                getOptionStateForValue: O,
+                getLabelState: R,
+                controlled: b
+            };
+        }), [ w, C, S, O, R, b ]);
         
-        return n().createElement(q(), {
-            defaultPlacement: u,
-            content:  n().createElement("span", {
-                "aria-hidden": true
-            }, o)
-        },  n().createElement(B, M({
-            appearance: "subtle",
-            "aria-label": r,
-            "aria-keyshortcuts": a,
-            "aria-disabled": g || undefined,
-            "data-test": "toolbar-button",
-            disabled: g,
-            onClick: m
-        }, c),  n().createElement(D, null, l)));
+        return n().createElement(_.Provider, {
+            value: L
+        },  n().createElement(B, {
+            id: d.current,
+            index: l,
+            listId: f.current,
+            name: u,
+            onSwitchClick: I,
+            value: i
+        }),  n().createElement(D, M({
+            "aria-activedescendant": "",
+            "aria-labelledby": d.current,
+            "aria-multiselectable": true,
+            "data-test": "listbox",
+            id: f.current,
+            onKeyDown: E,
+            onMouseDown: q,
+            ref: a,
+            role: "listbox",
+            tabIndex: 0,
+            $columnNumber: l
+        }, v), r));
     }
-    K.propsTypes = H;
+    K.propTypes = T;
     /* harmony default export */    const F = K;
+    // CONCATENATED MODULE: ./src/DualListbox/listboxUtils.ts
+    var $ = function e(r, t) {
+        var n = r.filter((function(e) {
+            return e !== t;
+        }));
+        if (r.length === n.length) {
+            n.push(t);
+        }
+        return n;
+    };
+    var z = function e(r, t) {
+        var n = new Set(t);
+        return r.filter((function(e) {
+            return !n.has(e);
+        }));
+    };
+    var U = function e(r, t, n) {
+        if (r < 0) {
+            return undefined;
+        }
+        var a = t[r];
+        var l = new Set(n);
+        if (!l.has(a)) {
+            return a;
+        }
+        for (var i = r + 1; i < t.length; i += 1) {
+            var u = t[i];
+            if (!l.has(u)) {
+                return u;
+            }
+        }
+        for (var o = r - 1; o > 0; o -= 1) {
+            var c = t[o];
+            if (!l.has(c)) {
+                return c;
+            }
+        }
+        return undefined;
+    };
     // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
-    const $ = require("@splunk/react-ui/NonInteractiveCheckbox");
-    var z =  e.n($);
+    const W = require("@splunk/react-ui/NonInteractiveCheckbox");
+    var X =  e.n(W);
     // CONCATENATED MODULE: ./src/DualListbox/OptionStyles.ts
-    var U = (0, P.css)([ "background:", ";font-weight:", ";" ], V.mixins.overlayColors(V.variables.interactiveColorOverlaySelected, V.variables.interactiveColorOverlayActive), V.variables.fontWeightBold);
-    var W = N().li.withConfig({
+    var G = (0, h.css)([ "background:", ";font-weight:", ";" ], C.mixins.overlayColors(C.variables.interactiveColorOverlaySelected, C.variables.interactiveColorOverlayActive), C.variables.fontWeightBold);
+    var J = g().li.withConfig({
         displayName: "OptionStyles__StyledListItem",
         componentId: "q275d9-0"
-    })([ "align-items:center;color:", ";cursor:pointer;display:flex;min-height:", ";overflow:hidden;padding:0 ", ";word-wrap:break-word;line-height:20px;", " &:active{", "}", "" ], V.variables.contentColorActive, V.variables.inputHeight, V.variables.spacingSmall, (function(e) {
+    })([ "align-items:center;color:", ";cursor:pointer;display:flex;min-height:", ";overflow:hidden;padding:0 ", ";word-wrap:break-word;line-height:20px;", " &:active{", "}", "" ], C.variables.contentColorActive, C.variables.inputHeight, C.variables.spacingSmall, (function(e) {
         var r = e.$active;
-        return r && U;
-    }), U, (0, V.pickVariant)("$selected", {
-        true: (0, P.css)([ "background:", ";&:hover{background:", ";}" ], V.variables.interactiveColorOverlaySelected, V.mixins.overlayColors(V.variables.interactiveColorOverlaySelected, V.variables.interactiveColorOverlayHover)),
-        false: (0, P.css)([ "&:hover{background:", ";}" ], V.variables.interactiveColorOverlayHover)
+        return r && G;
+    }), G, (0, C.pickVariant)("$selected", {
+        true: (0, h.css)([ "background:", ";&:hover{background:", ";}" ], C.variables.interactiveColorOverlaySelected, C.mixins.overlayColors(C.variables.interactiveColorOverlaySelected, C.variables.interactiveColorOverlayHover)),
+        false: (0, h.css)([ "&:hover{background:", ";}" ], C.variables.interactiveColorOverlayHover)
     }));
-    var X = N()(z()).withConfig({
+    var Q = g()(X()).withConfig({
         displayName: "OptionStyles__StyledNonInteractiveCheckbox",
         componentId: "q275d9-1"
-    })([ "", " padding-inline-end:", ";" ], V.mixins.reset("min-height"), V.variables.spacingSmall);
-    var G = N().div.withConfig({
+    })([ "", " padding-inline-end:", ";" ], C.mixins.reset("min-height"), C.variables.spacingSmall);
+    var Y = g().div.withConfig({
         displayName: "OptionStyles__StyledDiv",
         componentId: "q275d9-2"
     })([ "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.
- * The context interface is `ListboxContextValue`.
- * Defaults to `'{}'`.
- * @public
- */
-    var J =  n().createContext({});
-    /* harmony default export */    const Q = J;
     // CONCATENATED MODULE: ./src/DualListbox/Option.tsx
-    function Y() {
-        return Y = Object.assign ? Object.assign.bind() : function(e) {
+    function Z() {
+        return Z = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -370,11 +410,11 @@
                 }
             }
             return e;
-        }, Y.apply(null, arguments);
+        }, Z.apply(null, arguments);
     }
-    function Z(e, r) {
+    function ee(e, r) {
         if (null == e) return {};
-        var t, n, a = ee(e, r);
+        var t, n, a = re(e, r);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (n = 0; n < l.length; n++) {
@@ -383,7 +423,7 @@
         }
         return a;
     }
-    function ee(e, r) {
+    function re(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -394,18 +434,18 @@
         }
         return t;
     }
-    var re = {
+    var te = {
         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, l = e.selected, i = e.value, o = Z(e, [ "id", "label", "selected", "value" ]);
-        var u = (0, t.useContext)(Q);
-        var c = d()();
-        var s = u.onOptionClick, v = u.getOptionStateForValue, f = u.updateOptionRefreshHookByValue, p = u.controlled;
+    function ne(e) {
+        var r = e.id, a = e.label, l = e.selected, i = e.value, u = ee(e, [ "id", "label", "selected", "value" ]);
+        var o = (0, t.useContext)(_);
+        var c = v()();
+        var s = o.onOptionClick, d = o.getOptionStateForValue, f = o.updateOptionRefreshHookByValue, p = o.controlled;
         (0, t.useEffect)((function() {
             f === null || f === void 0 ? void 0 : f(i, c);
             return function() {
@@ -417,13 +457,13 @@
                 value: i
             });
         }), [ s, i ]);
-        if (!v) {
+        if (!d) {
             return null;
         }
-        var m = v(i), h = m.active, g = m.selected;
+        var m = d(i), h = m.active, g = m.selected;
         var y = !!(p ? l : g);
         
-        return n().createElement(W, Y({
+        return n().createElement(J, Z({
             "aria-selected": y,
             "data-test": "option",
             "data-test-value": i,
@@ -433,94 +473,71 @@
             role: "option",
             $active: h,
             $selected: y
-        }, o),  n().createElement(X, {
+        }, u),  n().createElement(Q, {
             selected: y
-        }),  n().createElement(G, null, a));
+        }),  n().createElement(Y, null, a));
     }
-    te.propTypes = re;
-    /* harmony default export */    const ne = te;
-    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const ae = require("@splunk/ui-utils/id");
-    // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
-    const le = require("@splunk/react-ui/Switch");
-    var ie =  e.n(le);
-    // CONCATENATED MODULE: ./src/DualListbox/LabelStyles.ts
-    var oe = N().label.withConfig({
-        displayName: "LabelStyles__StyledLabel",
-        componentId: "unwplx-0"
-    })([ "color:", ";flex:0 0 auto;" ], V.variables.contentColorActive);
-    var ue = N().div.withConfig({
-        displayName: "LabelStyles__StyledLabelContainer",
-        componentId: "unwplx-1"
-    })([ "display:flex;flex-direction:column;" ]);
-    var ce = N().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) {
-        var r = e.$columnNumber;
-        return (0, P.css)([ "grid-column:", ";" ], "list".concat(r));
-    }));
-    // CONCATENATED MODULE: ./src/DualListbox/Label.tsx
-    var se = {
-        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, l = e.listId, o = e.name, u = e.onSwitchClick, c = e.value;
-        var s = (0, t.useContext)(Q);
-        var f = d()();
-        var p = (0, t.useRef)((0, ae.createDOMID)("switch"));
-        var m = s.updateLabelRefreshHookByName, h = s.getLabelState;
+    ne.propTypes = te;
+    /* harmony default export */    const ae = ne;
+    // CONCATENATED MODULE: ./src/DualListbox/ScreenReaderWrapper.tsx
+    function le() {
+        return le = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+                }
+            }
+            return e;
+        }, le.apply(null, arguments);
+    }
+    function ie(e) {
+        var r = le({}, e);
+        var a = v()();
+        var l = (0, t.useContext)(m);
+        var i = l.getScreenReaderMessage, u = l.updateScreenReaderRefreshHook;
         (0, t.useEffect)((function() {
-            m === null || m === void 0 ? void 0 : m(o, f);
+            u === null || u === void 0 ? void 0 : u(a);
             return function() {
-                return m === null || m === void 0 ? void 0 : m(o);
+                return u === null || u === void 0 ? void 0 : u();
             };
-        }), [ o, m, f ]);
-        if (!h) {
+        }), [ u, a ]);
+        if (!i) {
             return null;
         }
-        var g = h(), y = g.disabled, k = g.selected, C = g.selectedValueCount, S = g.valueCount;
         
-        return n().createElement(ce, {
-            $columnNumber: a
-        },  n().createElement(b(), {
-            "aria-hidden": true,
-            id: p.current
-        }, (0, v.sprintf)((0, i._)("Select all %(listName)s Options"), {
-            listName: c
-        })),  n().createElement(ie(), {
-            appearance: "checkbox",
-            "data-test": "select-all",
-            disabled: y,
-            labelledBy: p.current,
-            onClick: u,
-            selected: k,
-            value: c
-        }),  n().createElement(ue, null,  n().createElement(oe, {
-            id: r,
-            htmlFor: l
-        }, c),  n().createElement("span", {
-            "aria-hidden": true
-        }, "".concat(C, "/").concat(S, " selected"))));
+        return n().createElement(R(), le({
+            "aria-live": "assertive"
+        }, r), i() || "");
     }
-    ve.propTypes = se;
-    /* harmony default export */    const fe = ve;
-    // CONCATENATED MODULE: ./src/DualListbox/ListboxStyles.ts
-    var de = N().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, V.variables.interactiveColorBorder, V.variables.borderRadius, V.variables.focusShadow, (function(e) {
-        var r = e.$columnNumber;
-        return (0, P.css)([ "grid-column:", ";" ], "list".concat(r));
-    }));
-    // CONCATENATED MODULE: ./src/DualListbox/Listbox.tsx
-    function pe() {
-        return pe = Object.assign ? Object.assign.bind() : function(e) {
+    /* harmony default export */    const ue = ie;
+    // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
+    const oe = require("@splunk/react-ui/Tooltip");
+    var ce =  e.n(oe);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
+    const se = require("@splunk/react-ui/ButtonSimple");
+    var ve =  e.n(se);
+    // CONCATENATED MODULE: ./src/DualListbox/ToolbarButtonStyles.ts
+    var de = g()(ve()).withConfig({
+        displayName: "ToolbarButtonStyles__StyledButtonSimple",
+        componentId: "k7zksz-0"
+    })([ "height:", ";width:", ";" ], C.variables.inputHeight, C.variables.inputHeight);
+    var fe = g().span.withConfig({
+        displayName: "ToolbarButtonStyles__StyledIcon",
+        componentId: "k7zksz-1"
+    })([ "align-items:center;display:flex;flex-direction:row;flex-shrink:0;justify-content:center;max-width:100%;" ]);
+    // CONCATENATED MODULE: ./src/DualListbox/ToolbarContext.tsx
+    /**
+ * A React context used to inform subcomponets of Toolbar of parent component values.
+ * The context interface is `ToolbarContextValue`.
+ * Defaults to `'{}'`.
+ * @public
+ */
+    var pe =  n().createContext({});
+    /* harmony default export */    const be = pe;
+    // CONCATENATED MODULE: ./src/DualListbox/ToolbarButton.tsx
+    function me() {
+        return me = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -528,11 +545,11 @@
                 }
             }
             return e;
-        }, pe.apply(null, arguments);
+        }, me.apply(null, arguments);
     }
-    function be(e, r) {
+    function he(e, r) {
         if (null == e) return {};
-        var t, n, a = me(e, r);
+        var t, n, a = ge(e, r);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (n = 0; n < l.length; n++) {
@@ -541,7 +558,7 @@
         }
         return a;
     }
-    function me(e, r) {
+    function ge(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -552,120 +569,87 @@
         }
         return t;
     }
-    var he = {
-        children: l().node,
-        index: l().number.isRequired,
-        label: l().string.isRequired,
-        multiSelect: l().bool,
+    var ye = {
+        icon: l().node.isRequired,
         name: l().string.isRequired,
-        onClick: l().func,
-        onKeyDown: l().func,
-        onSelectAllClick: l().func
+        tooltipLabel: l().string.isRequired,
+        tooltipPlacement: l().oneOf([ "above", "below", "left", "right" ])
     };
-    function ge(e) {
-        var r = e.children, a = e.elementRef, l = e.index, i = 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 f = (0, t.useRef)((0, ae.createDOMID)("label"));
-        var d = (0, t.useRef)((0, ae.createDOMID)("listbox"));
-        var p = (0, t.useContext)(h), b = p.controlled, m = p.getSelectedStateForValue, g = 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,
-                value: t
-            });
-        }), [ o, u ]);
-        var x = (0, t.useCallback)((function(e) {
-            return {
-                active: (g === null || g === void 0 ? void 0 : g(o)) === e,
-                selected: !!(m === null || m === void 0 ? void 0 : m(e))
-            };
-        }), [ o, g, 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 t = false;
-            if (r > 0) {
-                t = r === e ? true : "some";
-            }
-            return {
-                disabled: e < 1,
-                selected: t,
-                selectedValueCount: r,
-                valueCount: e
+    function ke(e) {
+        var r = e.ariaLabel, a = e.ariaKeyShortcuts, l = e.icon, i = e.name, u = e.tooltipLabel, o = e.tooltipPlacement, c = he(e, [ "ariaLabel", "ariaKeyShortcuts", "icon", "name", "tooltipLabel", "tooltipPlacement" ]);
+        var s = (0, t.useContext)(be);
+        var d = v()();
+        var f = s.getButtonState, p = s.onButtonClick, b = s.updateButtonRefreshHookByName;
+        (0, t.useEffect)((function() {
+            b === null || b === void 0 ? void 0 : b(i, d);
+            return function() {
+                return b === null || b === void 0 ? void 0 : b(i);
             };
-        }), [ o, y, k ]);
-        var R = function e(r) {
-            c === null || c === void 0 ? void 0 : c(r, {
-                name: o
-            });
-        };
-        var E = function e(r, t) {
-            var n = t.selected;
-            s === null || s === void 0 ? void 0 : s(r, {
-                name: o,
-                selected: n
+        }), [ i, b, d ]);
+        var m = (0, t.useCallback)((function(e) {
+            p === null || p === void 0 ? void 0 : p(e, {
+                name: i
             });
-        };
-        var I = function e(r) {
-            // this prevents default text selection when using shift + click
-            if (r.shiftKey && r.target !== r.currentTarget) {
-                r.preventDefault();
-            }
-        };
-        var L = (0, t.useMemo)((function() {
-            return {
-                onOptionClick: w,
-                updateLabelRefreshHookByName: C,
-                updateOptionRefreshHookByValue: S,
-                getOptionStateForValue: x,
-                getLabelState: O,
-                controlled: b
-            };
-        }), [ w, C, S, x, O, b ]);
+        }), [ p, i ]);
+        if (!f) {
+            return null;
+        }
+        var h = f(i), g = h.disabled;
         
-        return n().createElement(Q.Provider, {
-            value: L
-        },  n().createElement(fe, {
-            id: f.current,
-            index: l,
-            listId: d.current,
-            name: o,
-            onSwitchClick: E,
-            value: i
-        }),  n().createElement(de, pe({
-            "aria-activedescendant": "",
-            "aria-labelledby": f.current,
-            "aria-multiselectable": true,
-            "data-test": "listbox",
-            id: d.current,
-            onKeyDown: R,
-            onMouseDown: I,
-            ref: a,
-            role: "listbox",
-            tabIndex: 0,
-            $columnNumber: l
-        }, v), r));
+        return n().createElement(ce(), {
+            defaultPlacement: o,
+            content:  n().createElement("span", {
+                "aria-hidden": true
+            }, u)
+        },  n().createElement(de, me({
+            appearance: "subtle",
+            "aria-label": r,
+            "aria-keyshortcuts": a,
+            "aria-disabled": g || undefined,
+            "data-test": "toolbar-button",
+            disabled: g,
+            onClick: m
+        }, c),  n().createElement(fe, null, l)));
     }
-    ge.propTypes = he;
-    /* harmony default export */    const ye = ge;
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const ke = require("@splunk/react-ui/Box");
-    var Ce =  e.n(ke);
-    // CONCATENATED MODULE: ./src/DualListbox/DualListboxStyles.ts
-    var Se = N()(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) {
-        var r = e.$inline;
-        return r && (0, P.css)([ "display:inline-grid;" ]);
-    }), (function(e) {
-        var r = e.$fill;
-        return r && (0, P.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 we = N().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);
+    ke.propsTypes = ye;
+    /* harmony default export */    const Ce = ke;
+    // CONCATENATED MODULE: ./src/utils/fuzzyMatch.ts
+    // A utility for matching keyboard characters to list values
+    var Se = function e(r, t) {
+        return r ? r.label.charAt(t).toLowerCase() : "";
+    };
+    var we = function e(r, t) {
+        if (!r.length) {
+            return r;
+        }
+        var n = null;
+        var a = false;
+        var l = r.filter((function(e) {
+            var r = Se(e, t.index);
+            if (r === t.value) {
+                a = true;
+                return true;
+            }
+            // 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 l = Se(n, t.index);
+                if (!l) {
+                    n = e;
+                } else if (r > t.value) {
+                    if (l < t.value) {
+                        n = e;
+                    } else if (l > r) {
+                        n = e;
+                    }
+                } else if (r > l) {
+                    n = e;
+                }
+            }
+            return false;
+        }));
+        return l.length === 0 && n ? [ n ] : l;
+    };
     // CONCATENATED MODULE: ./src/DualListbox/DualListbox.tsx
     function xe() {
         return xe = Object.assign ? Object.assign.bind() : function(e) {
@@ -679,7 +663,7 @@
         }, 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.");
@@ -698,34 +682,34 @@
         }
         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, l, i, o = [], u = !0, c = !1;
+            var n, a, l, i, u = [], o = !0, c = !1;
             try {
                 if (l = (t = t.call(e)).next, 0 === r) {
                     if (Object(t) !== t) return;
-                    u = !1;
-                } else for (;!(u = (n = l.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"] && (i = t["return"](), Object(i) !== i)) 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) {
+    function Ne(e, r) {
         if (null == e) return {};
-        var t, n, a = Ne(e, r);
+        var t, n, a = Pe(e, r);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (n = 0; n < l.length; n++) {
@@ -734,7 +718,7 @@
         }
         return a;
     }
-    function Ne(e, r) {
+    function Pe(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -760,85 +744,85 @@
         })).isRequired
     };
     function je(e) {
-        var r, a, l, o;
-        var c = e.children, f = e.controlled, p = f === void 0 ? false : f, b = e.elementRef, m = e.fill, g = m === void 0 ? false : m, y = e.inline, O = y === void 0 ? false : y, E = e.onChange, L = e.onSelect, q = e.lists, P = Pe(e, [ "children", "controlled", "elementRef", "fill", "inline", "onChange", "onSelect", "lists" ]);
+        var r, a, l, i;
+        var o = e.children, s = e.controlled, b = s === void 0 ? false : s, h = e.elementRef, g = e.fill, y = g === void 0 ? false : g, k = e.inline, C = k === void 0 ? false : k, x = e.onChange, O = e.onSelect, R = e.lists, E = Ne(e, [ "children", "controlled", "elementRef", "fill", "inline", "onChange", "onSelect", "lists" ]);
         // @docs-props-type DualListboxPropsBase
-                var N = d()();
-        var _ = (0, t.useRef)(false);
+                var I = v()();
+        var q = (0, t.useRef)(false);
         (0, t.useEffect)((function() {
-            _.current = true;
+            q.current = true;
         }), []);
         // TODO: Implement shared isControlled hook (SUI-5283).
-                var j = (0, t.useRef)(p);
+                var L = (0, t.useRef)(b);
         // List One "Available" Refs
-                var V = (0, t.useRef)([]);
-        var B = (0, t.useRef)([]);
-        var D = (0, t.useRef)();
-        var M = (0, t.useRef)(null);
-        var T = (0, t.useRef)([]);
+                var N = (0, t.useRef)([]);
+        var P = (0, t.useRef)([]);
+        var _ = (0, t.useRef)();
+        var j = (0, t.useRef)(null);
+        var V = (0, t.useRef)([]);
         // List Two "Selected" Refs
-                var A = (0, t.useRef)([]);
+                var B = (0, t.useRef)([]);
+        var D = (0, t.useRef)([]);
+        var M = (0, t.useRef)();
+        var A = (0, t.useRef)(null);
         var H = (0, t.useRef)([]);
-        var K = (0, t.useRef)();
-        var $ = (0, t.useRef)(null);
-        var z = (0, t.useRef)([]);
         // Refresh Hook Stores, used to render indivual elements when uncontrolled
-                var U = (0, t.useRef)({});
+                var T = (0, t.useRef)({});
+        var K = (0, t.useRef)({});
         var W = (0, t.useRef)({});
-        var X = (0, t.useRef)({});
-        var G = (0, t.useRef)();
+        var X = (0, t.useRef)();
         // Activity Values Refs
-                var J = (0, t.useRef)();
+                var G = (0, t.useRef)();
+        var J = (0, t.useRef)({});
         var Q = (0, t.useRef)({});
         var Y = (0, t.useRef)({});
-        var Z = (0, t.useRef)({});
-        var ee = (0, t.useRef)(0);
+        var Z = (0, t.useRef)(0);
         // Key Match Refs
-                var re = (0, t.useRef)();
-        var te = (0, t.useRef)();
-        var ne = (0, t.useRef)([]);
+                var ee = (0, t.useRef)();
+        var re = (0, t.useRef)();
+        var te = (0, t.useRef)([]);
         if (false) {}
         if (false) {}
         if (false) {}
         // Unpack names and labels instead of relying on `lists` being a consistent reference
-                var ae = (r = q[0]) === null || r === void 0 ? void 0 : r.name;
-        var le = (a = q[1]) === null || a === void 0 ? void 0 : a.name;
-        var ie = (l = q[0]) === null || l === void 0 ? void 0 : l.label;
-        var oe = (o = q[1]) === null || o === void 0 ? void 0 : o.label;
+                var ne = (r = R[0]) === null || r === void 0 ? void 0 : r.name;
+        var ae = (a = R[1]) === null || a === void 0 ? void 0 : a.name;
+        var le = (l = R[0]) === null || l === void 0 ? void 0 : l.label;
+        var ie = (i = R[1]) === null || i === void 0 ? void 0 : i.label;
         // Copy previous state for uncontrolled render so it's not voided by following value reset
-                var ue = new Set(A.current);
+                var oe = new Set(B.current);
         // This ensures we recapture the indexes after batch moves, but will be refactored when sorting is implemented (SUI-5270).
-                V.current = [];
-        A.current = [];
-        T.current = [];
-        z.current = [];
+                N.current = [];
+        B.current = [];
+        V.current = [];
+        H.current = [];
         // Clean the data stores before we copy the references into listData
-                if (!_.current || j.current) {
-            B.current = [];
-            H.current = [];
-            Q.current = {};
-            Z.current = {};
+                if (!q.current || L.current) {
+            P.current = [];
+            D.current = [];
+            J.current = {};
             Y.current = {};
+            Q.current = {};
         }
         var ce = [ {
             options: [],
-            matchOptions: T.current,
-            values: V.current,
-            selectedValues: B.current,
-            activeValue: D.current,
-            activeFound: !D.current
+            matchOptions: V.current,
+            values: N.current,
+            selectedValues: P.current,
+            activeValue: _.current,
+            activeFound: !_.current
         }, {
             options: [],
-            matchOptions: z.current,
-            values: A.current,
-            selectedValues: H.current,
-            activeValue: K.current,
-            activeFound: !K.current
+            matchOptions: H.current,
+            values: B.current,
+            selectedValues: D.current,
+            activeValue: M.current,
+            activeFound: !M.current
         } ];
-        if (!_.current || j.current) {
-            t.Children.toArray(c).filter(t.isValidElement).forEach((function(e) {
+        if (!q.current || L.current) {
+            t.Children.toArray(o).filter(t.isValidElement).forEach((function(e) {
                 var r = e.props, t = r.value, n = r.label;
-                var a = e.props.listName === le;
+                var a = e.props.listName === ae;
                 var l = ce[a ? 1 : 0];
                 // Ensure the active value is found on controlled renders
                                 if (!l.activeFound && l.activeValue === t) {
@@ -854,14 +838,14 @@
                 if (i) {
                     l.selectedValues.push(t);
                 }
-                Q.current[t] = i;
-                Z.current[t] = l.values.length - 1;
-                Y.current[t] = e.props.id;
+                J.current[t] = i;
+                Y.current[t] = l.values.length - 1;
+                Q.current[t] = e.props.id;
             }));
         } else {
-            t.Children.toArray(c).filter(t.isValidElement).forEach((function(e) {
+            t.Children.toArray(o).filter(t.isValidElement).forEach((function(e) {
                 var r = e.props, t = r.value, n = r.label;
-                var a = ue.has(t);
+                var a = oe.has(t);
                 var l = ce[a ? 1 : 0];
                 l.values.push(t);
                 l.options.push(e);
@@ -869,58 +853,58 @@
                     value: t,
                     label: n
                 });
-                Z.current[t] = l.values.length - 1;
+                Y.current[t] = l.values.length - 1;
             }));
         }
         var se = (0, t.useCallback)((function(e, r) {
-            if (e === ae) {
-                D.current = r;
+            if (e === ne) {
+                _.current = r;
             } else {
-                K.current = r;
+                M.current = r;
             }
-        }), [ ae ]);
+        }), [ ne ]);
         var ve = (0, t.useCallback)((function(e) {
-            return e === ae ? D.current : K.current;
-        }), [ ae ]);
-        var fe = (0, t.useCallback)((function(e, r) {
-            if (e === ae) {
-                B.current = r;
+            return e === ne ? _.current : M.current;
+        }), [ ne ]);
+        var de = (0, t.useCallback)((function(e, r) {
+            if (e === ne) {
+                P.current = r;
             } else {
-                H.current = r;
+                D.current = r;
             }
-        }), [ ae ]);
-        var de = (0, t.useCallback)((function(e) {
-            return e === ae ? B.current : H.current;
-        }), [ ae ]);
+        }), [ ne ]);
+        var fe = (0, t.useCallback)((function(e) {
+            return e === ne ? P.current : D.current;
+        }), [ ne ]);
         var pe = (0, t.useCallback)((function(e) {
-            return de(e).length;
-        }), [ de ]);
-        var be = (0, t.useCallback)((function() {
-            return J.current;
+            return fe(e).length;
+        }), [ fe ]);
+        var me = (0, t.useCallback)((function() {
+            return G.current;
         }), []);
-        var me = (0, t.useCallback)((function(e) {
-            return Q.current[e];
+        var he = (0, t.useCallback)((function(e) {
+            return J.current[e];
         }), []);
-        var he = (0, t.useCallback)((function(e, r) {
-            if (e === ae) {
-                V.current = r;
+        var ge = (0, t.useCallback)((function(e, r) {
+            if (e === ne) {
+                N.current = r;
             } else {
-                A.current = r;
+                B.current = r;
             }
-        }), [ ae ]);
-        var ge = (0, t.useCallback)((function(e) {
-            return e === ae ? V.current : A.current;
-        }), [ ae ]);
+        }), [ ne ]);
+        var ye = (0, t.useCallback)((function(e) {
+            return e === ne ? N.current : B.current;
+        }), [ ne ]);
         var ke = (0, t.useCallback)((function(e) {
-            return ge(e).length;
-        }), [ ge ]);
-        var Ce = (0, t.useCallback)((function(e) {
+            return ye(e).length;
+        }), [ ye ]);
+        var Se = (0, t.useCallback)((function(e) {
             var r = ke(e);
             return r > 0 && r === pe(e);
         }), [ ke, pe ]);
         var Re = (0, t.useCallback)((function(e) {
-            return e === ae ? T.current : z.current;
-        }), [ ae ]);
+            return e === ne ? V.current : H.current;
+        }), [ ne ]);
         var Ee = (0, t.useCallback)((function(e) {
             var r = ke(e);
             var t = pe(e);
@@ -929,70 +913,70 @@
             };
         }), [ ke, pe ]);
         var Ie = (0, t.useCallback)((function() {
-            if (J.current && J.current.length > 0) {
+            if (G.current && G.current.length > 0) {
                 var e;
-                J.current = "";
-                (e = G.current) === null || e === void 0 ? void 0 : e.call(G);
+                G.current = "";
+                (e = X.current) === null || e === void 0 ? void 0 : e.call(X);
             }
         }), []);
-        var Le = (0, t.useCallback)((function() {
-            re.current = undefined;
-            ne.current = [];
-            if (te.current) {
-                clearTimeout(te.current);
+        var qe = (0, t.useCallback)((function() {
+            ee.current = undefined;
+            te.current = [];
+            if (re.current) {
+                clearTimeout(re.current);
             }
         }), []);
-        var qe = (0, t.useCallback)((function(e) {
-            G.current = e;
+        var Le = (0, t.useCallback)((function(e) {
+            X.current = e;
         }), []);
-        var Ne = (0, t.useCallback)((function(e, r) {
+        var Pe = (0, t.useCallback)((function(e, r) {
             if (r) {
-                X.current[e] = r;
+                W.current[e] = r;
             } else {
-                delete X.current[e];
+                delete W.current[e];
             }
         }), []);
         var _e = (0, t.useCallback)((function(e, r) {
             if (r) {
-                W.current[e] = r;
+                K.current[e] = r;
             } else {
-                delete W.current[e];
+                delete K.current[e];
             }
         }), []);
         var je = (0, t.useCallback)((function(e, r) {
             if (r) {
-                U.current[e] = r;
+                T.current[e] = r;
             } else {
-                delete U.current[e];
+                delete T.current[e];
             }
         }), []);
         var Ve = (0, t.useCallback)((function(e) {
             if (e) {
                 var r, t;
-                (r = (t = X.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 Be = (0, t.useCallback)((function(e) {
             if (e) {
                 var r, t;
-                (r = (t = W.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
+                (r = (t = K.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
             }
         }), []);
         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 = T.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
             }
         }), []);
         var Me = (0, t.useCallback)((function(e) {
             Ie();
             Be(e);
+            De(ne);
             De(ae);
-            De(le);
-        }), [ Ie, De, Be, ae, le ]);
-        var Te = (0, t.useCallback)((function(e, r) {
+        }), [ Ie, De, Be, ne, ae ]);
+        var Ae = (0, t.useCallback)((function(e, r) {
             var t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-            var n = e === ae ? M.current : $.current;
+            var n = e === ne ? j.current : A.current;
             if (!n) {
                 return;
             }
@@ -1007,91 +991,91 @@
                     // render previous
                     Ve(a);
                 }
-                var l = r ? Y.current[r] : "";
+                var l = r ? Q.current[r] : "";
                 // update listbox via dom to avoid render + child render
                                 n.setAttribute("aria-activedescendant", l);
                 if (!t && l.length > 0) {
                     var i = n.querySelector("#".concat(l));
-                    x(i);
+                    (0, p.scrollIntoViewIfNeeded)(i);
                 }
             }
-        }), [ ve, se, Ve, ae ]);
-        var Ae = (0, t.useCallback)((function(e, r) {
+        }), [ ve, se, Ve, ne ]);
+        var He = (0, t.useCallback)((function(e, r) {
             var t = r.value, n = r.name;
-            var a = Ce(n) ? ge(n) : de(n);
-            var l = C(a, t);
-            if (!j.current) {
-                Q.current[t] = !Q.current[t];
-                fe(n, l);
+            var a = Se(n) ? ye(n) : fe(n);
+            var l = $(a, t);
+            if (!L.current) {
+                J.current[t] = !J.current[t];
+                de(n, l);
                 Me(n);
             }
-            Te(n, t);
+            Ae(n, t);
             e.preventDefault();
-            L === null || L === void 0 ? void 0 : L(e, {
+            O === null || O === void 0 ? void 0 : O(e, {
                 values: l,
                 listName: n
             });
-        }), [ Ce, de, ge, fe, Te, Me, L ]);
-        var He = (0, t.useCallback)((function(e, r) {
+        }), [ Se, fe, ye, de, Ae, Me, O ]);
+        var Te = (0, t.useCallback)((function(e, r) {
             var t = r.initialIndex, n = r.name, a = r.targetIndex;
-            var l = ge(n);
+            var l = ye(n);
             var i = Math.min(t, a);
-            var o = Math.max(t, a);
-            var u = [];
-            if (j.current) {
-                u = l.slice(i, o + 1);
+            var u = Math.max(t, a);
+            var o = [];
+            if (L.current) {
+                o = l.slice(i, u + 1);
             } else {
                 l.forEach((function(e, r) {
                     var t = false;
-                    if (r >= i && r <= o) {
+                    if (r >= i && r <= u) {
                         t = true;
-                        u.push(e);
+                        o.push(e);
                     } else {
                         t = false;
                     }
-                    if (Q.current[e] !== t) {
-                        Q.current[e] = t;
+                    if (J.current[e] !== t) {
+                        J.current[e] = t;
                         Ve(e);
                     }
                 }));
-                fe(n, u);
+                de(n, o);
                 Me(n);
             }
-            Te(n, l[a]);
+            Ae(n, l[a]);
             e.preventDefault();
             e.stopPropagation();
-            L === null || L === void 0 ? void 0 : L(e, {
-                values: u,
+            O === null || O === void 0 ? void 0 : O(e, {
+                values: o,
                 listName: n
             });
-        }), [ ge, L, fe, Te, Me, Ve ]);
+        }), [ ye, O, de, Ae, Me, Ve ]);
         var Ke = (0, t.useCallback)((function(e, r) {
             var t = r.name, n = r.selected;
-            var a = ge(t);
+            var a = ye(t);
             var l = n === true ? [] : a;
             var i = n !== true;
-            if (!j.current) {
+            if (!L.current) {
                 a === null || a === void 0 ? void 0 : a.forEach((function(e) {
-                    if (Q.current[e] !== i) {
-                        Q.current[e] = i;
+                    if (J.current[e] !== i) {
+                        J.current[e] = i;
                         Ve(e);
                     }
                 }));
-                fe(t, l);
+                de(t, l);
                 Me(t);
             }
             e.preventDefault();
-            L === null || L === void 0 ? void 0 : L(e, {
+            O === null || O === void 0 ? void 0 : O(e, {
                 values: l,
                 listName: t
             });
-        }), [ ge, L, fe, Me, Ve ]);
+        }), [ ye, O, de, Me, Ve ]);
         // 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 n = ge(r);
-            var a = de(r);
-            var l = Ce(r);
-            var o = ge(t);
+            var n = ye(r);
+            var a = fe(r);
+            var l = Se(r);
+            var i = ye(t);
             var u = ve(t);
             if (n.length === 0 || !l && a.length === 0) {
                 return;
@@ -1099,64 +1083,64 @@
             if (!u && 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);
+                Ae(t, a[0], true);
             }
-            var c = (0, v.sprintf)((0, i._)("Moved %(count)d items to %(listLabel)s list"), {
+            var o = (0, d.sprintf)((0, f._)("Moved %(count)d items to %(listLabel)s list"), {
                 count: a.length,
-                listLabel: t === ae ? ie : oe
+                listLabel: t === ne ? le : ie
             });
             // These new values do not perserve sort position, may need to be refactored with sort logic (SUI-5270).
-                        var s = l ? [] : S(n, a);
-            var f = o.concat(a);
-            if (!j.current) {
+                        var c = l ? [] : z(n, a);
+            var s = i.concat(a);
+            if (!L.current) {
                 a.forEach((function(e) {
-                    Q.current[e] = false;
+                    J.current[e] = false;
                 }));
-                he(t, f);
-                he(r, s);
-                fe(r, []);
-                J.current = c;
+                ge(t, s);
+                ge(r, c);
+                de(r, []);
+                G.current = o;
                 // move is a batch update, force a full render, no internal update needed
-                                N();
+                                I();
             }
-            var d = {
+            var v = {
                 affectedValues: a,
                 sourceListName: r || "",
-                sourceValues: s,
+                sourceValues: c,
                 targetListName: t || "",
-                targetValues: f,
-                screenReaderMessage: c || "",
+                targetValues: s,
+                screenReaderMessage: o || "",
                 values: a.slice()
             };
             e.preventDefault();
-            E === null || E === void 0 ? void 0 : E(e, d);
-        }), [ N, ve, Ce, de, ge, E, fe, he, Te, ae, ie, oe ]);
+            x === null || x === void 0 ? void 0 : x(e, v);
+        }), [ I, ve, Se, fe, ye, x, de, ge, Ae, ne, le, ie ]);
         var $e = (0, t.useCallback)((function(e, r) {
             var t = r.name;
-            var n = Ce(t);
+            var n = Se(t);
             var a = ve(t);
-            var l = t === ae ? le : ae;
-            if (a && (n || !!Q.current[a])) {
+            var l = t === ne ? ae : ne;
+            if (a && (n || !!J.current[a])) {
                 // active option was present in items to be removed, clear the active option
-                Te(t);
+                Ae(t);
             }
             Fe(e, t, l);
-        }), [ ve, Ce, Fe, Te, ae, le ]);
+        }), [ ve, Se, Fe, Ae, ne, ae ]);
         var ze = (0, t.useCallback)((function(e, r) {
             var t = r.name, n = r.value;
             if (e.nativeEvent.shiftKey) {
-                He(e, {
-                    targetIndex: Z.current[n],
-                    initialIndex: ee.current,
+                Te(e, {
+                    targetIndex: Y.current[n],
+                    initialIndex: Z.current,
                     name: t
                 });
             } else {
-                Ae(e, {
+                He(e, {
                     name: t,
                     value: n
                 });
             }
-        }), [ He, Ae ]);
+        }), [ Te, He ]);
         var Ue = (0, t.useCallback)((function(e, r) {
             Ke(e, r);
         }), [ Ke ]);
@@ -1170,116 +1154,116 @@
                     index: 0,
                     value: t
                 };
-                if (!re.current) {
+                if (!ee.current) {
                     if (t === " ") {
-                        Le();
+                        qe();
                         return;
                     }
-                    a = R(n, l);
-                } else if (ne.current.length > 1) {
-                    l.index = re.current.index + 1;
-                    a = R(ne.current, l);
+                    a = we(n, l);
+                } else if (te.current.length > 1) {
+                    l.index = ee.current.index + 1;
+                    a = we(te.current, l);
                 }
                 if (a.length) {
                     var i = 0;
                     // If the active option is a first character match, cycle to the next matching option.
                                         if (l.index === 0 && a.length > 1) {
-                        var o = ve(r);
-                        if (o) {
-                            var u = a.findIndex((function(e) {
-                                return e.value === o;
+                        var u = ve(r);
+                        if (u) {
+                            var o = a.findIndex((function(e) {
+                                return e.value === u;
                             }));
-                            if (u >= 0) {
-                                i = u === a.length - 1 ? 0 : u + 1;
+                            if (o >= 0) {
+                                i = o === a.length - 1 ? 0 : o + 1;
                             }
                         }
                     }
-                    Te(r, a[i].value);
+                    Ae(r, a[i].value);
                 }
-                ne.current = a;
-                re.current = l;
-                if (te.current) {
-                    clearTimeout(te.current);
+                te.current = a;
+                ee.current = l;
+                if (re.current) {
+                    clearTimeout(re.current);
                 }
-                te.current = setTimeout(Le, 500);
+                re.current = setTimeout(qe, 500);
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }), [ ve, Re, Le, Te ]);
+        }), [ ve, Re, qe, Ae ]);
         var Xe = (0, t.useCallback)((function(e, r) {
             var t = r.name;
             var n = e.ctrlKey, a = e.key, l = e.metaKey, i = e.shiftKey;
-            var o = ge(t);
-            var u = de(t);
-            var c = Ce(t);
+            var u = ye(t);
+            var o = fe(t);
+            var c = Se(t);
             var s = ve(t);
-            var v = s ? Z.current[s] : -1;
-            var f = ee.current >= 0 ? ee.current : 0;
-            if (J.current && J.current.length > 0) {
+            var v = s ? Y.current[s] : -1;
+            var d = Z.current >= 0 ? Z.current : 0;
+            if (G.current && G.current.length > 0) {
                 Ie();
             }
-            var d = s;
+            var f = s;
             switch (a) {
               case "Shift":
-                ee.current = v;
+                Z.current = v;
                 break;
 
               case "Home":
                 if (n && i) {
                     // handle select until start
-                    He(e, {
+                    Te(e, {
                         targetIndex: 0,
-                        initialIndex: f,
+                        initialIndex: d,
                         name: t
                     });
                 } else {
-                    var p = Oe(o, 1);
-                    d = p[0];
+                    var p = Oe(u, 1);
+                    f = p[0];
                 }
                 break;
 
               case "End":
                 if (n && i) {
                     // handle select until end
-                    He(e, {
-                        targetIndex: o.length - 1,
-                        initialIndex: f,
+                    Te(e, {
+                        targetIndex: u.length - 1,
+                        initialIndex: d,
                         name: t
                     });
                 } else {
-                    d = o[o.length - 1];
+                    f = u[u.length - 1];
                 }
                 break;
 
               case "ArrowUp":
                 if (i) {
                     // handle select until previous
-                    He(e, {
+                    Te(e, {
                         targetIndex: Math.max(v - 1, 0),
-                        initialIndex: f,
+                        initialIndex: d,
                         name: t
                     });
                 } else {
-                    d = o[Math.max(v - 1, 0)];
+                    f = u[Math.max(v - 1, 0)];
                 }
                 break;
 
               case "ArrowDown":
                 if (i) {
                     // handle select until next
-                    He(e, {
-                        targetIndex: Math.min(v + 1, o.length - 1),
-                        initialIndex: f,
+                    Te(e, {
+                        targetIndex: Math.min(v + 1, u.length - 1),
+                        initialIndex: d,
                         name: t
                     });
                 } else {
-                    d = o[Math.min(v + 1, o.length - 1)];
+                    f = u[Math.min(v + 1, u.length - 1)];
                 }
                 break;
 
               case " ":
                 if (s != null) {
-                    Ae(e, {
+                    He(e, {
                         name: t,
                         value: s
                     });
@@ -1287,28 +1271,28 @@
                 break;
 
               case "Enter":
-                if (t === ae) {
+                if (t === ne) {
                     if (c) {
                         // all values moved, no longer an active value
-                        d = undefined;
-                    } else if (u.length > 0) {
+                        f = undefined;
+                    } else if (o.length > 0) {
                         // somes values moved, determine next active value
-                        d = w(v, o, u);
+                        f = U(v, u, o);
                     }
-                    Fe(e, ae, le);
+                    Fe(e, ne, ae);
                 }
                 break;
 
               case "Delete":
-                if (t === le) {
+                if (t === ae) {
                     if (c) {
                         // all values moved, no longer an active value
-                        d = undefined;
-                    } else if (u.length > 0) {
+                        f = undefined;
+                    } else if (o.length > 0) {
                         // somes values moved, determine next active value
-                        d = w(v, o, u);
+                        f = U(v, u, o);
                     }
-                    Fe(e, le, ae);
+                    Fe(e, ae, ne);
                 }
                 break;
 
@@ -1325,11 +1309,11 @@
                 }
                 break;
             }
-            if (d !== s) {
+            if (f !== s) {
                 e.preventDefault();
-                Te(t, d);
+                Ae(t, f);
             }
-        }), [ Ie, ve, Ce, de, ge, We, Fe, He, Ae, Ke, Te, ae, le ]);
+        }), [ Ie, ve, Se, fe, ye, We, Fe, Te, He, Ke, Ae, ne, ae ]);
         var Ge = (0, t.useMemo)((function() {
             return {
                 onButtonClick: $e,
@@ -1339,81 +1323,81 @@
         }), [ $e, je, Ee ]);
         var Je = (0, t.useMemo)((function() {
             return {
-                controlled: j.current,
+                controlled: L.current,
                 getActiveValue: ve,
-                getScreenReaderMessage: be,
-                getSelectedStateForValue: me,
+                getScreenReaderMessage: me,
+                getSelectedStateForValue: he,
                 getSelectedValueCount: pe,
                 getValueCount: ke,
                 updateLabelRefreshHookByName: _e,
-                updateOptionRefreshHookByValue: Ne,
-                updateScreenReaderRefreshHook: qe
+                updateOptionRefreshHookByValue: Pe,
+                updateScreenReaderRefreshHook: Le
             };
-        }), [ ve, be, me, pe, ke, _e, Ne, qe ]);
-        if (j.current && !ce[0].activeFound) {
+        }), [ ve, me, he, pe, ke, _e, Pe, Le ]);
+        if (L.current && !ce[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(ae, undefined, true);
+            Ae(ne, undefined, true);
         }
-        if (j.current && !ce[1].activeFound) {
+        if (L.current && !ce[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);
+            Ae(ae, undefined, true);
         }
         
-        return n().createElement(Se, xe({
+        return n().createElement(S, xe({
             "data-test": "dual-listbox",
-            elementRef: b,
-            $inline: g ? false : O,
-            $fill: g
-        }, P),  n().createElement(h.Provider, {
+            elementRef: h,
+            $inline: y ? false : C,
+            $fill: y
+        }, E),  n().createElement(m.Provider, {
             value: Je
-        },  n().createElement(ye, {
+        },  n().createElement(F, {
             index: 0,
-            elementRef: M,
-            label: ie,
-            name: ae,
+            elementRef: j,
+            label: le,
+            name: ne,
             onClick: ze,
             onKeyDown: Xe,
             onSelectAllClick: Ue
-        }, ce[0].options),  n().createElement(we, null,  n().createElement(I.Provider, {
+        }, ce[0].options),  n().createElement(w, null,  n().createElement(be.Provider, {
             value: Ge
-        },  n().createElement(F, {
-            ariaLabel: (0, v.sprintf)((0, i._)("Move selected options to %(listLabel)s list"), {
-                listLabel: oe
+        },  n().createElement(Ce, {
+            ariaLabel: (0, d.sprintf)((0, f._)("Move selected options to %(listLabel)s list"), {
+                listLabel: ie
             }),
             ariaKeyShortcuts: "Enter",
             "data-test": "move-to-secondary",
-            icon:  n().createElement(s(), null),
-            name: ae,
-            tooltipLabel: (0, v.sprintf)((0, i._)("Move to %(listLabel)s"), {
-                listLabel: oe
+            icon:  n().createElement(c(), null),
+            name: ne,
+            tooltipLabel: (0, d.sprintf)((0, f._)("Move to %(listLabel)s"), {
+                listLabel: ie
             }),
             tooltipPlacement: "left"
-        }),  n().createElement(F, {
-            ariaLabel: (0, v.sprintf)((0, i._)("Move selected options to %(listLabel)s list"), {
-                listLabel: ie
+        }),  n().createElement(Ce, {
+            ariaLabel: (0, d.sprintf)((0, f._)("Move selected options to %(listLabel)s list"), {
+                listLabel: le
             }),
             ariaKeyShortcuts: "Delete",
             "data-test": "move-to-primary",
             icon:  n().createElement(u(), null),
-            name: le,
-            tooltipLabel: (0, v.sprintf)((0, i._)("Move to %(listLabel)s"), {
-                listLabel: ie
+            name: ae,
+            tooltipLabel: (0, d.sprintf)((0, f._)("Move to %(listLabel)s"), {
+                listLabel: le
             }),
             tooltipPlacement: "right"
-        }))),  n().createElement(ye, {
+        }))),  n().createElement(F, {
             index: 1,
-            elementRef: $,
-            label: oe,
-            name: le,
+            elementRef: A,
+            label: ie,
+            name: ae,
             onClick: ze,
             onKeyDown: Xe,
             onSelectAllClick: Ue
-        }, ce[1].options),  n().createElement(k, null)));
+        }, ce[1].options),  n().createElement(ue, null)));
     }
     je.propTypes = _e;
-    je.Option = ne;
+    je.Option = ae;
     /* harmony default export */    const Ve = je;
     // CONCATENATED MODULE: ./src/DualListbox/index.ts
     module.exports = r;