@splunk/react-ui 4.16.3 → 4.17.0

package/DualListbox.js

@@ -0,0 +1,1780 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 169);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes");
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+
+/***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Clickable");
+
+/***/ }),
+
+/***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ScreenReaderContent");
+
+/***/ }),
+
+/***/ 169:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ DualListbox_DualListbox; });
+__webpack_require__.d(__webpack_exports__, "Option", function() { return /* reexport */ DualListbox_Option; });
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(1);
+var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
+var i18n_ = __webpack_require__(4);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
+var keyboard_ = __webpack_require__(7);
+
+// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronLeft"
+var ChevronLeft_ = __webpack_require__(63);
+var ChevronLeft_default = /*#__PURE__*/__webpack_require__.n(ChevronLeft_);
+
+// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
+var ChevronRight_ = __webpack_require__(35);
+var ChevronRight_default = /*#__PURE__*/__webpack_require__.n(ChevronRight_);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/format"
+var format_ = __webpack_require__(28);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/useForceUpdate"
+var useForceUpdate_ = __webpack_require__(45);
+var useForceUpdate_default = /*#__PURE__*/__webpack_require__.n(useForceUpdate_);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
+var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
+
+// CONCATENATED MODULE: ./src/DualListbox/DualListboxContext.tsx
+
+
+/**
+ * A React context used to inform subcomponets of DualListbox of parent component values.
+ * The context interface is `DualListboxContextValue`.
+ * Defaults to `'{}'`.
+ * @public
+ */
+var DualListboxContext = /*#__PURE__*/external_react_default.a.createContext({});
+/* harmony default export */ var DualListbox_DualListboxContext = (DualListboxContext);
+// CONCATENATED MODULE: ./src/DualListbox/ScreenReaderWrapper.tsx
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+
+
+
+
+
+function ScreenReaderWrapper(_ref) {
+  var otherProps = _extends({}, _ref);
+
+  var forceUpdate = useForceUpdate_default()();
+  var contextValue = Object(external_react_["useContext"])(DualListbox_DualListboxContext);
+  var getScreenReaderMessage = contextValue.getScreenReaderMessage,
+      updateScreenReaderRefreshHook = contextValue.updateScreenReaderRefreshHook;
+  Object(external_react_["useEffect"])(function () {
+    updateScreenReaderRefreshHook === null || updateScreenReaderRefreshHook === void 0 ? void 0 : updateScreenReaderRefreshHook(forceUpdate);
+    return function () {
+      return updateScreenReaderRefreshHook === null || updateScreenReaderRefreshHook === void 0 ? void 0 : updateScreenReaderRefreshHook();
+    };
+  }, [updateScreenReaderRefreshHook, forceUpdate]);
+
+  if (!getScreenReaderMessage) {
+    return null;
+  }
+
+  return /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, _extends({
+    "aria-live": "assertive"
+  }, otherProps), getScreenReaderMessage() || '');
+}
+
+/* harmony default export */ var DualListbox_ScreenReaderWrapper = (ScreenReaderWrapper);
+// CONCATENATED MODULE: ./src/DualListbox/listboxUtils.ts
+var arrayWithToggledValue = function arrayWithToggledValue(valueArr, toggleValue) {
+  var newArray = valueArr.filter(function (value) {
+    return value !== toggleValue;
+  });
+
+  if (valueArr.length === newArray.length) {
+    newArray.push(toggleValue);
+  }
+
+  return newArray;
+};
+
+var arrayWithRemovedValues = function arrayWithRemovedValues(valueArr, removedValues) {
+  var removedSet = new Set(removedValues);
+  return valueArr.filter(function (value) {
+    return !removedSet.has(value);
+  });
+};
+
+var findNextValue = function findNextValue(index, originalValues, removedValues) {
+  if (index < 0) {
+    return undefined;
+  }
+
+  var currentValue = originalValues[index];
+  var removedSet = new Set(removedValues);
+
+  if (!removedSet.has(currentValue)) {
+    return currentValue;
+  }
+
+  for (var i = index + 1; i < originalValues.length; i += 1) {
+    var tempValue = originalValues[i];
+
+    if (!removedSet.has(tempValue)) {
+      return tempValue;
+    }
+  }
+
+  for (var _i = index - 1; _i > 0; _i -= 1) {
+    var _tempValue = originalValues[_i];
+
+    if (!removedSet.has(_tempValue)) {
+      return _tempValue;
+    }
+  }
+
+  return undefined;
+};
+
+
+// EXTERNAL MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
+var scrollIntoViewIfNeeded = __webpack_require__(89);
+
+// EXTERNAL MODULE: ./src/utils/fuzzyMatch.ts
+var fuzzyMatch = __webpack_require__(56);
+
+// 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 ToolbarContext = /*#__PURE__*/external_react_default.a.createContext({});
+/* harmony default export */ var DualListbox_ToolbarContext = (ToolbarContext);
+// EXTERNAL MODULE: external "@splunk/react-ui/Tooltip"
+var Tooltip_ = __webpack_require__(42);
+var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip_);
+
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(3);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+
+// EXTERNAL MODULE: external "@splunk/themes"
+var themes_ = __webpack_require__(0);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
+var Clickable_ = __webpack_require__(12);
+var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
+
+// CONCATENATED MODULE: ./src/DualListbox/ToolbarButtonStyles.ts
+
+
+
+var StyledClickable = external_styled_components_default()(Clickable_default.a).withConfig({
+  displayName: "ToolbarButtonStyles__StyledClickable",
+  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%;padding:", ";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;}", ";"], themes_["mixins"].reset('block'), Object(themes_["pick"])({
+  enterprise: '1px solid transparent'
+}), themes_["variables"].borderRadius, Object(themes_["pick"])({
+  enterprise: themes_["variables"].fontWeightSemiBold,
+  prisma: themes_["variables"].fontWeightSemiBold
+}), themes_["variables"].lineHeight, themes_["variables"].inputHeight, themes_["variables"].inputHeight, Object(themes_["pick"])({
+  enterprise: {
+    comfortable: '0 5px',
+    compact: '0 2px'
+  },
+  prisma: {
+    comfortable: Object(external_styled_components_["css"])(["0px calc(", " / 2 - 1px)"], themes_["variables"].inputHeight),
+    compact: Object(external_styled_components_["css"])(["0px calc(", " / 2 - 1px)"], themes_["variables"].inputHeight)
+  }
+}), themes_["variables"].inputHeight, themes_["variables"].focusShadow, Object(themes_["pickVariant"])('$disabled', {
+  "false": Object(themes_["pick"])({
+    enterprise: Object(external_styled_components_["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:", ";}"], Object(themes_["pick"])({
+      light: themes_["variables"].gray45,
+      dark: themes_["variables"].white
+    }), themes_["variables"].backgroundColorHover, Object(themes_["pick"])({
+      light: themes_["variables"].gray60,
+      dark: themes_["variables"].borderColor
+    }), Object(themes_["pick"])({
+      light: themes_["variables"].linkColor,
+      dark: themes_["variables"].white
+    }), Object(themes_["pick"])({
+      light: themes_["variables"].gray92,
+      dark: themes_["variables"].gray22
+    }), Object(themes_["pick"])({
+      light: themes_["variables"].linkColor,
+      dark: themes_["variables"].white
+    })),
+    prisma: Object(external_styled_components_["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:", ";}}"], themes_["variables"].contentColorActive, themes_["variables"].interactiveColorOverlayHover, themes_["variables"].interactiveColorBorderHover, themes_["variables"].hoverShadow, themes_["variables"].interactiveColorOverlayActive, themes_["variables"].interactiveColorOverlayActive)
+  }),
+  "true": Object(external_styled_components_["css"])(["border-color:", ";color:", ";cursor:not-allowed;"], Object(themes_["pick"])({
+    prisma: themes_["variables"].interactiveColorBorderDisabled
+  }), Object(themes_["pick"])({
+    enterprise: themes_["variables"].textDisabledColor,
+    prisma: themes_["variables"].contentColorDisabled
+  }))
+}));
+var StyledIcon = external_styled_components_default.a.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%;"], Object(themes_["pick"])({
+  enterprise: 'inherit',
+  prisma: {
+    comfortable: '21px',
+    compact: '16px'
+  }
+}));
+
+// CONCATENATED MODULE: ./src/DualListbox/ToolbarButton.tsx
+function ToolbarButton_extends() { ToolbarButton_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToolbarButton_extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+
+
+
+var propTypes = {
+  icon: external_prop_types_default.a.node.isRequired,
+  name: external_prop_types_default.a.string.isRequired,
+  tooltipLabel: external_prop_types_default.a.string.isRequired,
+  tooltipPlacement: external_prop_types_default.a.oneOf(['above', 'below', 'left', 'right'])
+};
+
+function ToolbarButton(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+      ariaKeyShortcuts = _ref.ariaKeyShortcuts,
+      icon = _ref.icon,
+      name = _ref.name,
+      tooltipLabel = _ref.tooltipLabel,
+      tooltipPlacement = _ref.tooltipPlacement,
+      otherProps = _objectWithoutProperties(_ref, ["ariaLabel", "ariaKeyShortcuts", "icon", "name", "tooltipLabel", "tooltipPlacement"]);
+
+  var contextValue = Object(external_react_["useContext"])(DualListbox_ToolbarContext);
+  var forceUpdate = useForceUpdate_default()();
+  var getButtonState = contextValue.getButtonState,
+      onButtonClick = contextValue.onButtonClick,
+      updateButtonRefreshHookByName = contextValue.updateButtonRefreshHookByName;
+  Object(external_react_["useEffect"])(function () {
+    updateButtonRefreshHookByName === null || updateButtonRefreshHookByName === void 0 ? void 0 : updateButtonRefreshHookByName(name, forceUpdate);
+    return function () {
+      return updateButtonRefreshHookByName === null || updateButtonRefreshHookByName === void 0 ? void 0 : updateButtonRefreshHookByName(name);
+    };
+  }, [name, updateButtonRefreshHookByName, forceUpdate]);
+  var handleClick = Object(external_react_["useCallback"])(function (event) {
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(event, {
+      name: name
+    });
+  }, [onButtonClick, name]);
+
+  if (!getButtonState) {
+    return null;
+  }
+
+  var _getButtonState = getButtonState(name),
+      disabled = _getButtonState.disabled;
+
+  return /*#__PURE__*/external_react_default.a.createElement(Tooltip_default.a, {
+    defaultPlacement: tooltipPlacement,
+    content: /*#__PURE__*/external_react_default.a.createElement("span", {
+      "aria-hidden": true
+    }, tooltipLabel)
+  }, /*#__PURE__*/external_react_default.a.createElement(StyledClickable, ToolbarButton_extends({
+    "aria-label": ariaLabel,
+    "aria-keyshortcuts": ariaKeyShortcuts,
+    "aria-disabled": disabled || undefined,
+    "data-test": "toolbar-button",
+    $disabled: disabled,
+    onClick: !disabled ? handleClick : undefined
+  }, otherProps), /*#__PURE__*/external_react_default.a.createElement(StyledIcon, null, icon)));
+}
+
+ToolbarButton.propsTypes = propTypes;
+/* harmony default export */ var DualListbox_ToolbarButton = (ToolbarButton);
+// EXTERNAL MODULE: external "@splunk/react-ui/Switch"
+var Switch_ = __webpack_require__(58);
+var Switch_default = /*#__PURE__*/__webpack_require__.n(Switch_);
+
+// CONCATENATED MODULE: ./src/DualListbox/OptionStyles.ts
+
+
+
+var StyledListItem = external_styled_components_default.a.li.withConfig({
+  displayName: "OptionStyles__StyledListItem",
+  componentId: "q275d9-0"
+})(["align-items:center;color:", ";cursor:pointer;display:flex;overflow:hidden;width:100%;word-wrap:break-word;", " ", ""], themes_["variables"].contentColorActive, Object(themes_["pickVariant"])('$active', {
+  "true": Object(external_styled_components_["css"])(["", ""], Object(themes_["pick"])({
+    prisma: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].interactiveColorOverlaySelected),
+    enterprise: {
+      light: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].accentColorL50),
+      dark: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].accentColorD50)
+    }
+  }))
+}), Object(themes_["pick"])({
+  prisma: Object(themes_["pickVariant"])('$selected', {
+    "true": Object(external_styled_components_["css"])(["&:hover{background:", ";}"], themes_["mixins"].overlayColors(themes_["variables"].interactiveColorOverlaySelected, themes_["variables"].interactiveColorOverlayHover)),
+    "false": Object(external_styled_components_["css"])(["&:hover{background:", ";}"], themes_["variables"].interactiveColorOverlayHover)
+  }),
+  enterprise: Object(external_styled_components_["css"])(["&:hover{background:", ";}"], themes_["variables"].backgroundColorHover)
+}));
+var StyledSwtich = external_styled_components_default()(Switch_default.a).withConfig({
+  displayName: "OptionStyles__StyledSwtich",
+  componentId: "q275d9-1"
+})(["padding-left:", ";"], themes_["variables"].spacingSmall);
+var StyledDiv = external_styled_components_default.a.div.withConfig({
+  displayName: "OptionStyles__StyledDiv",
+  componentId: "q275d9-2"
+})(["padding:", ";word-break:break-word;word-wrap:break-word;"], Object(themes_["pick"])({
+  prisma: {
+    compact: Object(external_styled_components_["css"])(["6px ", ""], themes_["variables"].spacingSmall),
+    comfortable: Object(external_styled_components_["css"])(["10px ", ""], themes_["variables"].spacingSmall)
+  },
+  enterprise: Object(external_styled_components_["css"])(["6px ", ""], themes_["variables"].spacingSmall)
+}));
+
+// 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 ListboxContext = /*#__PURE__*/external_react_default.a.createContext({});
+/* harmony default export */ var DualListbox_ListboxContext = (ListboxContext);
+// CONCATENATED MODULE: ./src/DualListbox/Option.tsx
+function Option_extends() { Option_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Option_extends.apply(this, arguments); }
+
+function Option_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Option_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function Option_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+
+
+var Option_propTypes = {
+  id: external_prop_types_default.a.string.isRequired,
+  label: external_prop_types_default.a.string.isRequired,
+  listName: external_prop_types_default.a.string,
+  selected: external_prop_types_default.a.bool,
+  value: external_prop_types_default.a.string.isRequired
+};
+
+function Option(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      selectedProp = _ref.selected,
+      value = _ref.value,
+      otherProps = Option_objectWithoutProperties(_ref, ["id", "label", "selected", "value"]);
+
+  var contextValue = Object(external_react_["useContext"])(DualListbox_ListboxContext);
+  var forceUpdate = useForceUpdate_default()();
+  var onOptionClick = contextValue.onOptionClick,
+      getOptionStateForValue = contextValue.getOptionStateForValue,
+      updateOptionRefreshHookByValue = contextValue.updateOptionRefreshHookByValue,
+      controlled = contextValue.controlled;
+  Object(external_react_["useEffect"])(function () {
+    updateOptionRefreshHookByValue === null || updateOptionRefreshHookByValue === void 0 ? void 0 : updateOptionRefreshHookByValue(value, forceUpdate);
+    return function () {
+      return updateOptionRefreshHookByValue === null || updateOptionRefreshHookByValue === void 0 ? void 0 : updateOptionRefreshHookByValue(value);
+    };
+  }, [value, updateOptionRefreshHookByValue, forceUpdate]);
+  var handleClick = Object(external_react_["useCallback"])(function (event) {
+    onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(event, {
+      value: value
+    });
+  }, [onOptionClick, value]);
+
+  if (!getOptionStateForValue) {
+    return null;
+  }
+
+  var _getOptionStateForVal = getOptionStateForValue(value),
+      active = _getOptionStateForVal.active,
+      selectedContext = _getOptionStateForVal.selected;
+
+  var selected = !!(controlled ? selectedProp : selectedContext);
+  return /*#__PURE__*/external_react_default.a.createElement(StyledListItem, Option_extends({
+    "aria-selected": selected,
+    "data-test": "option",
+    "data-test-value": value,
+    "data-test-active": active,
+    id: id,
+    onClick: handleClick,
+    role: "option",
+    $active: active,
+    $selected: selected
+  }, otherProps), /*#__PURE__*/external_react_default.a.createElement(StyledSwtich, {
+    interactive: false,
+    selected: selected,
+    appearance: "checkbox"
+  }), /*#__PURE__*/external_react_default.a.createElement(StyledDiv, null, label));
+}
+
+Option.propTypes = Option_propTypes;
+/* harmony default export */ var DualListbox_Option = (Option);
+// EXTERNAL MODULE: external "@splunk/ui-utils/id"
+var id_ = __webpack_require__(8);
+
+// CONCATENATED MODULE: ./src/DualListbox/LabelStyles.ts
+
+
+var StyledLabel = external_styled_components_default.a.label.withConfig({
+  displayName: "LabelStyles__StyledLabel",
+  componentId: "unwplx-0"
+})(["color:", ";flex:0 0 auto;"], themes_["variables"].contentColorActive);
+var StyledLabelContainer = external_styled_components_default.a.div.withConfig({
+  displayName: "LabelStyles__StyledLabelContainer",
+  componentId: "unwplx-1"
+})(["display:flex;flex-direction:column;"]);
+var StyledSwitchContainer = external_styled_components_default.a.div.withConfig({
+  displayName: "LabelStyles__StyledSwitchContainer",
+  componentId: "unwplx-2"
+})(["align-items:center;border:1px solid transparent;display:flex;gap:", ";grid-row:headers;padding:0 ", ";", ""], themes_["variables"].spacingSmall, themes_["variables"].spacingSmall, function (_ref) {
+  var $columnNumber = _ref.$columnNumber;
+  return Object(external_styled_components_["css"])(["grid-column:", ";"], "list".concat($columnNumber));
+});
+
+// CONCATENATED MODULE: ./src/DualListbox/Label.tsx
+
+
+
+
+
+
+
+
+
+
+var Label_propTypes = {
+  id: external_prop_types_default.a.string.isRequired,
+  index: external_prop_types_default.a.number.isRequired,
+  listId: external_prop_types_default.a.string.isRequired,
+  name: external_prop_types_default.a.string.isRequired,
+  onSwitchClick: external_prop_types_default.a.func,
+  value: external_prop_types_default.a.string.isRequired
+};
+
+function ListboxLabel(_ref) {
+  var id = _ref.id,
+      index = _ref.index,
+      listId = _ref.listId,
+      name = _ref.name,
+      onSwitchClick = _ref.onSwitchClick,
+      value = _ref.value;
+  var contextValue = Object(external_react_["useContext"])(DualListbox_ListboxContext);
+  var forceUpdate = useForceUpdate_default()();
+  var switchIdRef = Object(external_react_["useRef"])(Object(id_["createDOMID"])('switch'));
+  var updateLabelRefreshHookByName = contextValue.updateLabelRefreshHookByName,
+      getLabelState = contextValue.getLabelState;
+  Object(external_react_["useEffect"])(function () {
+    updateLabelRefreshHookByName === null || updateLabelRefreshHookByName === void 0 ? void 0 : updateLabelRefreshHookByName(name, forceUpdate);
+    return function () {
+      return updateLabelRefreshHookByName === null || updateLabelRefreshHookByName === void 0 ? void 0 : updateLabelRefreshHookByName(name);
+    };
+  }, [name, updateLabelRefreshHookByName, forceUpdate]);
+
+  if (!getLabelState) {
+    return null;
+  }
+
+  var _getLabelState = getLabelState(),
+      disabled = _getLabelState.disabled,
+      selected = _getLabelState.selected,
+      selectedValueCount = _getLabelState.selectedValueCount,
+      valueCount = _getLabelState.valueCount;
+
+  return /*#__PURE__*/external_react_default.a.createElement(StyledSwitchContainer, {
+    $columnNumber: index
+  }, /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
+    "aria-hidden": true,
+    id: switchIdRef.current
+  }, Object(format_["sprintf"])(Object(i18n_["_"])('Select All %(listName)s Options'), {
+    listName: value
+  })), /*#__PURE__*/external_react_default.a.createElement(Switch_default.a, {
+    appearance: "checkbox",
+    "data-test": "select-all",
+    disabled: disabled,
+    labelledBy: switchIdRef.current,
+    onClick: onSwitchClick,
+    selected: selected,
+    value: value
+  }), /*#__PURE__*/external_react_default.a.createElement(StyledLabelContainer, null, /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
+    id: id,
+    htmlFor: listId
+  }, value), /*#__PURE__*/external_react_default.a.createElement("span", {
+    "aria-hidden": true
+  }, "".concat(selectedValueCount, "/").concat(valueCount, " Selected"))));
+}
+
+ListboxLabel.propTypes = Label_propTypes;
+/* harmony default export */ var Label = (ListboxLabel);
+// CONCATENATED MODULE: ./src/DualListbox/ListboxStyles.ts
+
+
+var StyledListbox = external_styled_components_default.a.ul.withConfig({
+  displayName: "ListboxStyles__StyledListbox",
+  componentId: "sc-11oqtd-0"
+})(["background-color:", ";border:1px 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;}", ""], themes_["variables"].transparent, Object(themes_["pick"])({
+  enterprise: themes_["variables"].gray60,
+  prisma: themes_["variables"].interactiveColorBorder
+}), themes_["variables"].borderRadius, themes_["variables"].focusShadow, function (_ref) {
+  var $columnNumber = _ref.$columnNumber;
+  return Object(external_styled_components_["css"])(["grid-column:", ";"], "list".concat($columnNumber));
+});
+
+// CONCATENATED MODULE: ./src/DualListbox/Listbox.tsx
+function Listbox_extends() { Listbox_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Listbox_extends.apply(this, arguments); }
+
+function Listbox_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Listbox_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function Listbox_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+
+
+
+
+var Listbox_propTypes = {
+  children: external_prop_types_default.a.node,
+  index: external_prop_types_default.a.number.isRequired,
+  label: external_prop_types_default.a.string.isRequired,
+  multiSelect: external_prop_types_default.a.bool,
+  name: external_prop_types_default.a.string.isRequired,
+  onClick: external_prop_types_default.a.func,
+  onKeyDown: external_prop_types_default.a.func,
+  onSelectAllClick: external_prop_types_default.a.func
+};
+
+function Listbox(_ref) {
+  var children = _ref.children,
+      elementRef = _ref.elementRef,
+      index = _ref.index,
+      label = _ref.label,
+      name = _ref.name,
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
+      onSelectAllClick = _ref.onSelectAllClick,
+      otherProps = Listbox_objectWithoutProperties(_ref, ["children", "elementRef", "index", "label", "name", "onClick", "onKeyDown", "onSelectAllClick"]);
+
+  var labelIdRef = Object(external_react_["useRef"])(Object(id_["createDOMID"])('label'));
+  var idRef = Object(external_react_["useRef"])(Object(id_["createDOMID"])('listbox'));
+
+  var _useContext = Object(external_react_["useContext"])(DualListbox_DualListboxContext),
+      controlled = _useContext.controlled,
+      getSelectedStateForValue = _useContext.getSelectedStateForValue,
+      getActiveValue = _useContext.getActiveValue,
+      getSelectedValueCount = _useContext.getSelectedValueCount,
+      getValueCount = _useContext.getValueCount,
+      updateLabelRefreshHookByName = _useContext.updateLabelRefreshHookByName,
+      updateOptionRefreshHookByValue = _useContext.updateOptionRefreshHookByValue;
+
+  var handleClick = Object(external_react_["useCallback"])(function (event, _ref2) {
+    var value = _ref2.value;
+    onClick === null || onClick === void 0 ? void 0 : onClick(event, {
+      name: name,
+      value: value
+    });
+  }, [name, onClick]);
+  var getOptionStateForValue = Object(external_react_["useCallback"])(function (value) {
+    return {
+      active: (getActiveValue === null || getActiveValue === void 0 ? void 0 : getActiveValue(name)) === value,
+      selected: !!(getSelectedStateForValue === null || getSelectedStateForValue === void 0 ? void 0 : getSelectedStateForValue(value))
+    };
+  }, [name, getActiveValue, getSelectedStateForValue]);
+  var getLabelState = Object(external_react_["useCallback"])(function () {
+    var valueCount = (getValueCount === null || getValueCount === void 0 ? void 0 : getValueCount(name)) || 0;
+    var selectedValueCount = (getSelectedValueCount === null || getSelectedValueCount === void 0 ? void 0 : getSelectedValueCount(name)) || 0;
+    var switchSelected = false;
+
+    if (selectedValueCount > 0) {
+      switchSelected = selectedValueCount === valueCount ? true : 'some';
+    }
+
+    return {
+      disabled: valueCount < 1,
+      selected: switchSelected,
+      selectedValueCount: selectedValueCount,
+      valueCount: valueCount
+    };
+  }, [name, getSelectedValueCount, getValueCount]);
+
+  var handleKeyDown = function handleKeyDown(event) {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, {
+      name: name
+    });
+  };
+
+  var handleSwitchClick = function handleSwitchClick(event, _ref3) {
+    var selected = _ref3.selected;
+    onSelectAllClick === null || onSelectAllClick === void 0 ? void 0 : onSelectAllClick(event, {
+      name: name,
+      selected: selected
+    });
+  };
+
+  var handleMouseDown = function handleMouseDown(event) {
+    // this prevents default text selection when using shift + click
+    if (event.shiftKey && event.target !== event.currentTarget) {
+      event.preventDefault();
+    }
+  };
+
+  var contextValue = Object(external_react_["useMemo"])(function () {
+    return {
+      onOptionClick: handleClick,
+      updateLabelRefreshHookByName: updateLabelRefreshHookByName,
+      updateOptionRefreshHookByValue: updateOptionRefreshHookByValue,
+      getOptionStateForValue: getOptionStateForValue,
+      getLabelState: getLabelState,
+      controlled: controlled
+    };
+  }, [handleClick, updateLabelRefreshHookByName, updateOptionRefreshHookByValue, getOptionStateForValue, getLabelState, controlled]);
+  return /*#__PURE__*/external_react_default.a.createElement(DualListbox_ListboxContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/external_react_default.a.createElement(Label, {
+    id: labelIdRef.current,
+    index: index,
+    listId: idRef.current,
+    name: name,
+    onSwitchClick: handleSwitchClick,
+    value: label
+  }), /*#__PURE__*/external_react_default.a.createElement(StyledListbox, Listbox_extends({
+    "aria-activedescendant": "" // Important this value stays static, only updated via DOM maniupulation
+    ,
+    "aria-labelledby": labelIdRef.current,
+    "aria-multiselectable": true,
+    "data-test": "listbox",
+    id: idRef.current,
+    onKeyDown: handleKeyDown,
+    onMouseDown: handleMouseDown,
+    ref: elementRef,
+    role: "listbox",
+    tabIndex: 0,
+    $columnNumber: index
+  }, otherProps), children));
+}
+
+Listbox.propTypes = Listbox_propTypes;
+/* harmony default export */ var DualListbox_Listbox = (Listbox);
+// EXTERNAL MODULE: external "@splunk/react-ui/Box"
+var Box_ = __webpack_require__(6);
+var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
+
+// CONCATENATED MODULE: ./src/DualListbox/DualListboxStyles.ts
+
+
+
+var StyledBox = external_styled_components_default()(Box_default.a).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:", " ", ";", " ", ""], themes_["variables"].spacingXSmall, themes_["variables"].spacingSmall, function (_ref) {
+  var $inline = _ref.$inline;
+  return $inline && Object(external_styled_components_["css"])(["display:inline-grid;"]);
+}, function (_ref2) {
+  var $fill = _ref2.$fill;
+  return $fill && Object(external_styled_components_["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 StyledFlexColumn = external_styled_components_default.a.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;"], themes_["variables"].spacingSmall);
+
+// CONCATENATED MODULE: ./src/DualListbox/DualListbox.tsx
+function DualListbox_extends() { DualListbox_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return DualListbox_extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function DualListbox_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = DualListbox_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function DualListbox_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/** @public */
+
+var DualListbox_propTypes = {
+  children: external_prop_types_default.a.node,
+  controlled: external_prop_types_default.a.bool,
+  fill: external_prop_types_default.a.bool,
+  inline: external_prop_types_default.a.bool,
+  onChange: external_prop_types_default.a.func,
+  onSelect: external_prop_types_default.a.func,
+  lists: external_prop_types_default.a.arrayOf(external_prop_types_default.a.shape({
+    name: external_prop_types_default.a.string.isRequired,
+    label: external_prop_types_default.a.string.isRequired
+  })).isRequired
+};
+
+function DualListbox(_ref) {
+  var _lists$, _lists$2, _lists$3, _lists$4;
+
+  var children = _ref.children,
+      _ref$controlled = _ref.controlled,
+      controlled = _ref$controlled === void 0 ? false : _ref$controlled,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? false : _ref$fill,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      onChange = _ref.onChange,
+      onSelect = _ref.onSelect,
+      lists = _ref.lists,
+      otherProps = DualListbox_objectWithoutProperties(_ref, ["children", "controlled", "fill", "inline", "onChange", "onSelect", "lists"]);
+
+  // @docs-props-type DualListboxPropsBase
+  var forceUpdate = useForceUpdate_default()();
+  var mountedRef = Object(external_react_["useRef"])(false);
+  Object(external_react_["useEffect"])(function () {
+    mountedRef.current = true;
+  }, []); // TODO: Implement shared isControlled hook (SUI-5283).
+
+  var isControlledRef = Object(external_react_["useRef"])(controlled); // List One "Available" Refs
+
+  var listOneValues = Object(external_react_["useRef"])([]);
+  var listOneSelectedValues = Object(external_react_["useRef"])([]);
+  var listOneActiveValue = Object(external_react_["useRef"])();
+  var listOneNodeRef = Object(external_react_["useRef"])(null);
+  var listOneMatchOptions = Object(external_react_["useRef"])([]); // List Two "Selected" Refs
+
+  var listTwoValues = Object(external_react_["useRef"])([]);
+  var listTwoSelectedValues = Object(external_react_["useRef"])([]);
+  var listTwoActiveValue = Object(external_react_["useRef"])();
+  var listTwoNodeRef = Object(external_react_["useRef"])(null);
+  var listTwoMatchOptions = Object(external_react_["useRef"])([]); // Refresh Hook Stores, used to render indivual elements when uncontrolled
+
+  var buttonRefreshHookByName = Object(external_react_["useRef"])({});
+  var labelRefreshHookByName = Object(external_react_["useRef"])({});
+  var optionRefreshHookByValue = Object(external_react_["useRef"])({});
+  var screenReaderRefreshHook = Object(external_react_["useRef"])(); // Activity Values Refs
+
+  var screenReaderValueRef = Object(external_react_["useRef"])();
+  var selectedByValue = Object(external_react_["useRef"])({});
+  var idByValue = Object(external_react_["useRef"])({});
+  var indexByValue = Object(external_react_["useRef"])({});
+  var initialRangeIndex = Object(external_react_["useRef"])(0); // Key Match Refs
+
+  var matchCharacter = Object(external_react_["useRef"])();
+  var matchTimeout = Object(external_react_["useRef"])();
+  var matchOptions = Object(external_react_["useRef"])([]);
+
+  if (false) {}
+
+  if (false) {}
+
+  if (false) {} // Unpack names and labels instead of relying on `lists` being a consistent reference
+
+
+  var listOneName = (_lists$ = lists[0]) === null || _lists$ === void 0 ? void 0 : _lists$.name;
+  var listTwoName = (_lists$2 = lists[1]) === null || _lists$2 === void 0 ? void 0 : _lists$2.name;
+  var listOneLabel = (_lists$3 = lists[0]) === null || _lists$3 === void 0 ? void 0 : _lists$3.label;
+  var listTwoLabel = (_lists$4 = lists[1]) === null || _lists$4 === void 0 ? void 0 : _lists$4.label; // Copy previous state for uncontrolled render so it's not voided by following value reset
+
+  var internalValueSet = new Set(listTwoValues.current); // This ensures we recapture the indexes after batch moves, but will be refactored when sorting is implemented (SUI-5270).
+
+  listOneValues.current = [];
+  listTwoValues.current = [];
+  listOneMatchOptions.current = [];
+  listTwoMatchOptions.current = []; // Clean the data stores before we copy the references into listData
+
+  if (!mountedRef.current || isControlledRef.current) {
+    listOneSelectedValues.current = [];
+    listTwoSelectedValues.current = [];
+    selectedByValue.current = {};
+    indexByValue.current = {};
+    idByValue.current = {};
+  }
+
+  var listData = [{
+    options: [],
+    matchOptions: listOneMatchOptions.current,
+    values: listOneValues.current,
+    selectedValues: listOneSelectedValues.current,
+    activeValue: listOneActiveValue.current,
+    activeFound: !listOneActiveValue.current
+  }, {
+    options: [],
+    matchOptions: listTwoMatchOptions.current,
+    values: listTwoValues.current,
+    selectedValues: listTwoSelectedValues.current,
+    activeValue: listTwoActiveValue.current,
+    activeFound: !listTwoActiveValue.current
+  }];
+
+  if (!mountedRef.current || isControlledRef.current) {
+    external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).forEach(function (child) {
+      var _child$props = child.props,
+          value = _child$props.value,
+          label = _child$props.label;
+      var isListTwo = child.props.listName === listTwoName;
+      var data = listData[isListTwo ? 1 : 0]; // Ensure the active value is found on controlled renders
+
+      if (!data.activeFound && data.activeValue === value) {
+        data.activeFound = true;
+      }
+
+      data.values.push(value);
+      data.options.push(child);
+      data.matchOptions.push({
+        value: value,
+        label: label
+      });
+      var isSelected = !!child.props.selected;
+
+      if (isSelected) {
+        data.selectedValues.push(value);
+      }
+
+      selectedByValue.current[value] = isSelected;
+      indexByValue.current[value] = data.values.length - 1;
+      idByValue.current[value] = child.props.id;
+    });
+  } else {
+    external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).forEach(function (child) {
+      var _child$props2 = child.props,
+          value = _child$props2.value,
+          label = _child$props2.label;
+      var isListTwo = internalValueSet.has(value);
+      var data = listData[isListTwo ? 1 : 0];
+      data.values.push(value);
+      data.options.push(child);
+      data.matchOptions.push({
+        value: value,
+        label: label
+      });
+      indexByValue.current[value] = data.values.length - 1;
+    });
+  }
+
+  var setActiveValue = Object(external_react_["useCallback"])(function (name, value) {
+    if (name === listOneName) {
+      listOneActiveValue.current = value;
+    } else {
+      listTwoActiveValue.current = value;
+    }
+  }, [listOneName]);
+  var getActiveValue = Object(external_react_["useCallback"])(function (name) {
+    return name === listOneName ? listOneActiveValue.current : listTwoActiveValue.current;
+  }, [listOneName]);
+  var setSelectedValues = Object(external_react_["useCallback"])(function (name, values) {
+    if (name === listOneName) {
+      listOneSelectedValues.current = values;
+    } else {
+      listTwoSelectedValues.current = values;
+    }
+  }, [listOneName]);
+  var getSelectedValues = Object(external_react_["useCallback"])(function (name) {
+    return name === listOneName ? listOneSelectedValues.current : listTwoSelectedValues.current;
+  }, [listOneName]);
+  var getSelectedValueCount = Object(external_react_["useCallback"])(function (name) {
+    return getSelectedValues(name).length;
+  }, [getSelectedValues]);
+  var getScreenReaderMessage = Object(external_react_["useCallback"])(function () {
+    return screenReaderValueRef.current;
+  }, []);
+  var getSelectedStateForValue = Object(external_react_["useCallback"])(function (value) {
+    return selectedByValue.current[value];
+  }, []);
+  var setValues = Object(external_react_["useCallback"])(function (name, values) {
+    if (name === listOneName) {
+      listOneValues.current = values;
+    } else {
+      listTwoValues.current = values;
+    }
+  }, [listOneName]);
+  var getValues = Object(external_react_["useCallback"])(function (name) {
+    return name === listOneName ? listOneValues.current : listTwoValues.current;
+  }, [listOneName]);
+  var getValueCount = Object(external_react_["useCallback"])(function (name) {
+    return getValues(name).length;
+  }, [getValues]);
+  var getIsAllSelected = Object(external_react_["useCallback"])(function (name) {
+    var valueCount = getValueCount(name);
+    return valueCount > 0 && valueCount === getSelectedValueCount(name);
+  }, [getValueCount, getSelectedValueCount]);
+  var getAvailableMatchOptions = Object(external_react_["useCallback"])(function (name) {
+    return name === listOneName ? listOneMatchOptions.current : listTwoMatchOptions.current;
+  }, [listOneName]);
+  var getButtonState = Object(external_react_["useCallback"])(function (name) {
+    var valueCount = getValueCount(name);
+    var selectedValueCount = getSelectedValueCount(name);
+    return {
+      disabled: valueCount < 1 || selectedValueCount < 1
+    };
+  }, [getValueCount, getSelectedValueCount]);
+  var clearScreenReaderText = Object(external_react_["useCallback"])(function () {
+    if (screenReaderValueRef.current && screenReaderValueRef.current.length > 0) {
+      var _screenReaderRefreshH;
+
+      screenReaderValueRef.current = '';
+      (_screenReaderRefreshH = screenReaderRefreshHook.current) === null || _screenReaderRefreshH === void 0 ? void 0 : _screenReaderRefreshH.call(screenReaderRefreshHook);
+    }
+  }, []);
+  var resetMatches = Object(external_react_["useCallback"])(function () {
+    matchCharacter.current = undefined;
+    matchOptions.current = [];
+
+    if (matchTimeout.current) {
+      clearTimeout(matchTimeout.current);
+    }
+  }, []);
+  var updateScreenReaderRefreshHook = Object(external_react_["useCallback"])(function (callback) {
+    screenReaderRefreshHook.current = callback;
+  }, []);
+  var updateOptionRefreshHookByValue = Object(external_react_["useCallback"])(function (value, callback) {
+    if (callback) {
+      optionRefreshHookByValue.current[value] = callback;
+    } else {
+      delete optionRefreshHookByValue.current[value];
+    }
+  }, []);
+  var updateLabelRefreshHookByName = Object(external_react_["useCallback"])(function (name, callback) {
+    if (callback) {
+      labelRefreshHookByName.current[name] = callback;
+    } else {
+      delete labelRefreshHookByName.current[name];
+    }
+  }, []);
+  var updateButtonRefreshHookByName = Object(external_react_["useCallback"])(function (name, callback) {
+    if (callback) {
+      buttonRefreshHookByName.current[name] = callback;
+    } else {
+      delete buttonRefreshHookByName.current[name];
+    }
+  }, []);
+  var updateOption = Object(external_react_["useCallback"])(function (value) {
+    if (value) {
+      var _optionRefreshHookByV, _optionRefreshHookByV2;
+
+      (_optionRefreshHookByV = (_optionRefreshHookByV2 = optionRefreshHookByValue.current)[value]) === null || _optionRefreshHookByV === void 0 ? void 0 : _optionRefreshHookByV.call(_optionRefreshHookByV2);
+    }
+  }, []);
+  var updateLabel = Object(external_react_["useCallback"])(function (name) {
+    if (name) {
+      var _labelRefreshHookByNa, _labelRefreshHookByNa2;
+
+      (_labelRefreshHookByNa = (_labelRefreshHookByNa2 = labelRefreshHookByName.current)[name]) === null || _labelRefreshHookByNa === void 0 ? void 0 : _labelRefreshHookByNa.call(_labelRefreshHookByNa2);
+    }
+  }, []);
+  var updateButton = Object(external_react_["useCallback"])(function (name) {
+    if (name) {
+      var _buttonRefreshHookByN, _buttonRefreshHookByN2;
+
+      (_buttonRefreshHookByN = (_buttonRefreshHookByN2 = buttonRefreshHookByName.current)[name]) === null || _buttonRefreshHookByN === void 0 ? void 0 : _buttonRefreshHookByN.call(_buttonRefreshHookByN2);
+    }
+  }, []);
+  var updateInternalDisplay = Object(external_react_["useCallback"])(function (name) {
+    clearScreenReaderText();
+    updateLabel(name);
+    updateButton(listOneName);
+    updateButton(listTwoName);
+  }, [clearScreenReaderText, updateButton, updateLabel, listOneName, listTwoName]);
+  var updateActiveOption = Object(external_react_["useCallback"])(function (name, value) {
+    var skipRender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var listbox = name === listOneName ? listOneNodeRef.current : listTwoNodeRef.current;
+
+    if (!listbox) {
+      return;
+    }
+
+    var previousValue = getActiveValue(name);
+    setActiveValue(name, value);
+
+    if (!skipRender) {
+      // render new
+      updateOption(value);
+    }
+
+    if (value !== previousValue) {
+      if (!skipRender) {
+        // render previous
+        updateOption(previousValue);
+      }
+
+      var id = value ? idByValue.current[value] : ''; // update listbox via dom to avoid render + child render
+
+      listbox.setAttribute('aria-activedescendant', id);
+
+      if (!skipRender && id.length > 0) {
+        var element = listbox.querySelector("#".concat(id));
+        Object(scrollIntoViewIfNeeded["a" /* scrollIntoViewIfNeeded */])(element);
+      }
+    }
+  }, [getActiveValue, setActiveValue, updateOption, listOneName]);
+  var handleSingleSelection = Object(external_react_["useCallback"])(function (event, _ref2) {
+    var value = _ref2.value,
+        name = _ref2.name;
+    var sourceValues = getIsAllSelected(name) ? getValues(name) : getSelectedValues(name);
+    var newValues = arrayWithToggledValue(sourceValues, value);
+
+    if (!isControlledRef.current) {
+      selectedByValue.current[value] = !selectedByValue.current[value];
+      setSelectedValues(name, newValues);
+      updateInternalDisplay(name);
+    }
+
+    updateActiveOption(name, value);
+    event.preventDefault();
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
+      values: newValues,
+      listName: name
+    });
+  }, [getIsAllSelected, getSelectedValues, getValues, setSelectedValues, updateActiveOption, updateInternalDisplay, onSelect]);
+  var handleRangeSelection = Object(external_react_["useCallback"])(function (event, _ref3) {
+    var initialIndex = _ref3.initialIndex,
+        name = _ref3.name,
+        targetIndex = _ref3.targetIndex;
+    var valuesArr = getValues(name);
+    var startIndex = Math.min(initialIndex, targetIndex);
+    var endIndex = Math.max(initialIndex, targetIndex);
+    var newValues = [];
+
+    if (isControlledRef.current) {
+      newValues = valuesArr.slice(startIndex, endIndex + 1);
+    } else {
+      valuesArr.forEach(function (value, index) {
+        var newSelectedState = false;
+
+        if (index >= startIndex && index <= endIndex) {
+          newSelectedState = true;
+          newValues.push(value);
+        } else {
+          newSelectedState = false;
+        }
+
+        if (selectedByValue.current[value] !== newSelectedState) {
+          selectedByValue.current[value] = newSelectedState;
+          updateOption(value);
+        }
+      });
+      setSelectedValues(name, newValues);
+      updateInternalDisplay(name);
+    }
+
+    updateActiveOption(name, valuesArr[targetIndex]);
+    event.preventDefault();
+    event.stopPropagation();
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
+      values: newValues,
+      listName: name
+    });
+  }, [getValues, onSelect, setSelectedValues, updateActiveOption, updateInternalDisplay, updateOption]);
+  var handleSelectAll = Object(external_react_["useCallback"])(function (event, _ref4) {
+    var name = _ref4.name,
+        selected = _ref4.selected;
+    var listValues = getValues(name);
+    var newValues = selected === true ? [] : listValues;
+    var newState = selected !== true;
+
+    if (!isControlledRef.current) {
+      listValues === null || listValues === void 0 ? void 0 : listValues.forEach(function (value) {
+        if (selectedByValue.current[value] !== newState) {
+          selectedByValue.current[value] = newState;
+          updateOption(value);
+        }
+      });
+      setSelectedValues(name, newValues);
+      updateInternalDisplay(name);
+    }
+
+    event.preventDefault();
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
+      values: newValues,
+      listName: name
+    });
+  }, [getValues, onSelect, setSelectedValues, updateInternalDisplay, updateOption]); // handleMoveValues does not update the active value of the source, keyboard and mouse differ, only the target active value is updated
+
+  var handleMoveValues = Object(external_react_["useCallback"])(function (event, sourceName, targetName) {
+    var sourceValues = getValues(sourceName);
+    var sourceSelectedValues = getSelectedValues(sourceName);
+    var sourceIsAllSelected = getIsAllSelected(sourceName);
+    var targetValues = getValues(targetName);
+    var targetActiveValue = getActiveValue(targetName);
+
+    if (sourceValues.length === 0 || !sourceIsAllSelected && sourceSelectedValues.length === 0) {
+      return;
+    }
+
+    if (!targetActiveValue && sourceSelectedValues.length > 0) {
+      // target lacks an active value, default to the first
+      // skip the render it will be catch in batch
+      updateActiveOption(targetName, sourceSelectedValues[0], true);
+    }
+
+    var message = Object(format_["sprintf"])(Object(i18n_["_"])('Moved %(count)d items to %(listLabel)s list'), {
+      count: sourceSelectedValues.length,
+      listLabel: targetName === listOneName ? listOneLabel : listTwoLabel
+    }); // These new values do not perserve sort position, may need to be refactored with sort logic (SUI-5270).
+
+    var newSourceValues = sourceIsAllSelected ? [] : arrayWithRemovedValues(sourceValues, sourceSelectedValues);
+    var newTargetValues = targetValues.concat(sourceSelectedValues);
+
+    if (!isControlledRef.current) {
+      sourceSelectedValues.forEach(function (value) {
+        selectedByValue.current[value] = false;
+      });
+      setValues(targetName, newTargetValues);
+      setValues(sourceName, newSourceValues);
+      setSelectedValues(sourceName, []);
+      screenReaderValueRef.current = message; // move is a batch update, force a full render, no internal update needed
+
+      forceUpdate();
+    }
+
+    var data = {
+      affectedValues: sourceSelectedValues,
+      sourceListName: sourceName || '',
+      sourceValues: newSourceValues,
+      targetListName: targetName || '',
+      targetValues: newTargetValues,
+      screenReaderMessage: message || '',
+      values: sourceSelectedValues.slice()
+    };
+    event.preventDefault();
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, data);
+  }, [forceUpdate, getActiveValue, getIsAllSelected, getSelectedValues, getValues, onChange, setSelectedValues, setValues, updateActiveOption, listOneName, listOneLabel, listTwoLabel]);
+  var handleToolbarButtonClick = Object(external_react_["useCallback"])(function (event, _ref5) {
+    var name = _ref5.name;
+    var isAllSelected = getIsAllSelected(name);
+    var activeValue = getActiveValue(name);
+    var targetName = name === listOneName ? listTwoName : listOneName;
+
+    if (activeValue && (isAllSelected || !!selectedByValue.current[activeValue])) {
+      // active option was present in items to be removed, clear the active option
+      updateActiveOption(name);
+    }
+
+    handleMoveValues(event, name, targetName);
+  }, [getActiveValue, getIsAllSelected, handleMoveValues, updateActiveOption, listOneName, listTwoName]);
+  var handleOptionClick = Object(external_react_["useCallback"])(function (event, _ref6) {
+    var name = _ref6.name,
+        value = _ref6.value;
+
+    if (event.nativeEvent.shiftKey) {
+      handleRangeSelection(event, {
+        targetIndex: indexByValue.current[value],
+        initialIndex: initialRangeIndex.current,
+        name: name
+      });
+    } else {
+      handleSingleSelection(event, {
+        name: name,
+        value: value
+      });
+    }
+  }, [handleRangeSelection, handleSingleSelection]);
+  var handleSelectAllClick = Object(external_react_["useCallback"])(function (event, data) {
+    handleSelectAll(event, data);
+  }, [handleSelectAll]);
+  var handleKeyMatch = Object(external_react_["useCallback"])(function (e, name) {
+    var currentKey = e.nativeEvent.key;
+    var availableOptions = getAvailableMatchOptions(name); // Checking for a single character to avoid complications from double-byte languages and emojis.
+
+    if (currentKey.length === 1) {
+      var matches = [];
+      var character = {
+        index: 0,
+        value: currentKey
+      };
+
+      if (!matchCharacter.current) {
+        if (currentKey === ' ') {
+          resetMatches();
+          return;
+        }
+
+        matches = Object(fuzzyMatch["a" /* fuzzyMatch */])(availableOptions, character);
+      } else if (matchOptions.current.length > 1) {
+        character.index = matchCharacter.current.index + 1;
+        matches = Object(fuzzyMatch["a" /* fuzzyMatch */])(matchOptions.current, character);
+      }
+
+      if (matches.length) {
+        var matchIndex = 0; // If the active option is a first character match, cycle to the next matching option.
+
+        if (character.index === 0 && matches.length > 1) {
+          var activeValue = getActiveValue(name);
+
+          if (activeValue) {
+            var activeMatchIndex = matches.findIndex(function (match) {
+              return match.value === activeValue;
+            });
+
+            if (activeMatchIndex >= 0) {
+              matchIndex = activeMatchIndex === matches.length - 1 ? 0 : activeMatchIndex + 1;
+            }
+          }
+        }
+
+        updateActiveOption(name, matches[matchIndex].value);
+      }
+
+      matchOptions.current = matches;
+      matchCharacter.current = character;
+
+      if (matchTimeout.current) {
+        clearTimeout(matchTimeout.current);
+      }
+
+      matchTimeout.current = setTimeout(resetMatches, 500);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [getActiveValue, getAvailableMatchOptions, resetMatches, updateActiveOption]);
+  var handleListboxKeyDown = Object(external_react_["useCallback"])(function (event, _ref7) {
+    var name = _ref7.name;
+    var eventKeyCode = Object(keyboard_["keycode"])(event.nativeEvent);
+    var listboxValues = getValues(name);
+    var listboxSelectedValues = getSelectedValues(name);
+    var isAllSelected = getIsAllSelected(name);
+    var activeValue = getActiveValue(name);
+    var activeIndex = activeValue ? indexByValue.current[activeValue] : -1;
+    var initialIndex = initialRangeIndex.current >= 0 ? initialRangeIndex.current : 0;
+
+    if (screenReaderValueRef.current && screenReaderValueRef.current.length > 0) {
+      clearScreenReaderText();
+    }
+
+    var nextActiveValue = activeValue;
+
+    switch (eventKeyCode) {
+      case 'shift':
+        initialRangeIndex.current = activeIndex;
+        break;
+
+      case 'home':
+        if (event.nativeEvent.ctrlKey && event.nativeEvent.shiftKey) {
+          // handle select until start
+          handleRangeSelection(event, {
+            targetIndex: 0,
+            initialIndex: initialIndex,
+            name: name
+          });
+        } else {
+          var _listboxValues = _slicedToArray(listboxValues, 1);
+
+          nextActiveValue = _listboxValues[0];
+        }
+
+        break;
+
+      case 'end':
+        if (event.nativeEvent.ctrlKey && event.nativeEvent.shiftKey) {
+          // handle select until end
+          handleRangeSelection(event, {
+            targetIndex: listboxValues.length - 1,
+            initialIndex: initialIndex,
+            name: name
+          });
+        } else {
+          nextActiveValue = listboxValues[listboxValues.length - 1];
+        }
+
+        break;
+
+      case 'up':
+        if (event.nativeEvent.shiftKey) {
+          // handle select until previous
+          handleRangeSelection(event, {
+            targetIndex: Math.max(activeIndex - 1, 0),
+            initialIndex: initialIndex,
+            name: name
+          });
+        } else {
+          nextActiveValue = listboxValues[Math.max(activeIndex - 1, 0)];
+        }
+
+        break;
+
+      case 'down':
+        if (event.nativeEvent.shiftKey) {
+          // handle select until next
+          handleRangeSelection(event, {
+            targetIndex: Math.min(activeIndex + 1, listboxValues.length - 1),
+            initialIndex: initialIndex,
+            name: name
+          });
+        } else {
+          nextActiveValue = listboxValues[Math.min(activeIndex + 1, listboxValues.length - 1)];
+        }
+
+        break;
+
+      case 'space':
+        handleSingleSelection(event, {
+          name: name,
+          value: activeValue
+        });
+        break;
+
+      case 'enter':
+        if (name === listOneName) {
+          if (isAllSelected) {
+            // all values moved, no longer an active value
+            nextActiveValue = undefined;
+          } else if (listboxSelectedValues.length > 0) {
+            // somes values moved, determine next active value
+            nextActiveValue = findNextValue(activeIndex, listboxValues, listboxSelectedValues);
+          }
+
+          handleMoveValues(event, listOneName, listTwoName);
+        }
+
+        break;
+
+      case 'delete':
+        if (name === listTwoName) {
+          if (isAllSelected) {
+            // all values moved, no longer an active value
+            nextActiveValue = undefined;
+          } else if (listboxSelectedValues.length > 0) {
+            // somes values moved, determine next active value
+            nextActiveValue = findNextValue(activeIndex, listboxValues, listboxSelectedValues);
+          }
+
+          handleMoveValues(event, listTwoName, listOneName);
+        }
+
+        break;
+
+      default:
+        if (eventKeyCode === 'a' && (event.nativeEvent.ctrlKey || event.nativeEvent.metaKey)) {
+          // handle control + A, otherwise let 'a' passthrough
+          handleSelectAll(event, {
+            name: name,
+            selected: isAllSelected
+          });
+        } else {
+          // do fuzzy match
+          handleKeyMatch(event, name);
+        }
+
+        break;
+    }
+
+    if (nextActiveValue !== activeValue) {
+      event.preventDefault();
+      updateActiveOption(name, nextActiveValue);
+    }
+  }, [clearScreenReaderText, getActiveValue, getIsAllSelected, getSelectedValues, getValues, handleKeyMatch, handleMoveValues, handleRangeSelection, handleSingleSelection, handleSelectAll, updateActiveOption, listOneName, listTwoName]);
+  var toolbarContextValue = Object(external_react_["useMemo"])(function () {
+    return {
+      onButtonClick: handleToolbarButtonClick,
+      updateButtonRefreshHookByName: updateButtonRefreshHookByName,
+      getButtonState: getButtonState
+    };
+  }, [handleToolbarButtonClick, updateButtonRefreshHookByName, getButtonState]);
+  var dualContextValue = Object(external_react_["useMemo"])(function () {
+    return {
+      controlled: isControlledRef.current,
+      getActiveValue: getActiveValue,
+      getScreenReaderMessage: getScreenReaderMessage,
+      getSelectedStateForValue: getSelectedStateForValue,
+      getSelectedValueCount: getSelectedValueCount,
+      getValueCount: getValueCount,
+      updateLabelRefreshHookByName: updateLabelRefreshHookByName,
+      updateOptionRefreshHookByValue: updateOptionRefreshHookByValue,
+      updateScreenReaderRefreshHook: updateScreenReaderRefreshHook
+    };
+  }, [getActiveValue, getScreenReaderMessage, getSelectedStateForValue, getSelectedValueCount, getValueCount, updateLabelRefreshHookByName, updateOptionRefreshHookByValue, updateScreenReaderRefreshHook]);
+
+  if (isControlledRef.current && !listData[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
+    updateActiveOption(listOneName, undefined, true);
+  }
+
+  if (isControlledRef.current && !listData[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
+    updateActiveOption(listTwoName, undefined, true);
+  }
+
+  return /*#__PURE__*/external_react_default.a.createElement(StyledBox, DualListbox_extends({
+    "data-test": "dual-listbox",
+    $inline: fill ? false : inline,
+    $fill: fill
+  }, otherProps), /*#__PURE__*/external_react_default.a.createElement(DualListbox_DualListboxContext.Provider, {
+    value: dualContextValue
+  }, /*#__PURE__*/external_react_default.a.createElement(DualListbox_Listbox, {
+    index: 0,
+    elementRef: listOneNodeRef,
+    label: listOneLabel,
+    name: listOneName,
+    onClick: handleOptionClick,
+    onKeyDown: handleListboxKeyDown,
+    onSelectAllClick: handleSelectAllClick
+  }, listData[0].options), /*#__PURE__*/external_react_default.a.createElement(StyledFlexColumn, null, /*#__PURE__*/external_react_default.a.createElement(DualListbox_ToolbarContext.Provider, {
+    value: toolbarContextValue
+  }, /*#__PURE__*/external_react_default.a.createElement(DualListbox_ToolbarButton, {
+    ariaLabel: Object(format_["sprintf"])(Object(i18n_["_"])('Move selected options to %(listLabel)s list'), {
+      listLabel: listTwoLabel
+    }),
+    ariaKeyShortcuts: "Enter",
+    "data-test": "move-to-secondary",
+    icon: /*#__PURE__*/external_react_default.a.createElement(ChevronRight_default.a, {
+      hideDefaultTooltip: true,
+      screenReaderText: null
+    }),
+    name: listOneName,
+    tooltipLabel: Object(format_["sprintf"])(Object(i18n_["_"])('Move to %(listLabel)s'), {
+      listLabel: listTwoLabel
+    }),
+    tooltipPlacement: "left"
+  }), /*#__PURE__*/external_react_default.a.createElement(DualListbox_ToolbarButton, {
+    ariaLabel: Object(format_["sprintf"])(Object(i18n_["_"])('Move selected options to %(listLabel)s list'), {
+      listLabel: listOneLabel
+    }),
+    ariaKeyShortcuts: "Delete",
+    "data-test": "move-to-primary",
+    icon: /*#__PURE__*/external_react_default.a.createElement(ChevronLeft_default.a, {
+      hideDefaultTooltip: true,
+      screenReaderText: null
+    }),
+    name: listTwoName,
+    tooltipLabel: Object(format_["sprintf"])(Object(i18n_["_"])('Move to %(listLabel)s'), {
+      listLabel: listOneLabel
+    }),
+    tooltipPlacement: "right"
+  }))), /*#__PURE__*/external_react_default.a.createElement(DualListbox_Listbox, {
+    index: 1,
+    elementRef: listTwoNodeRef,
+    label: listTwoLabel,
+    name: listTwoName,
+    onClick: handleOptionClick,
+    onKeyDown: handleListboxKeyDown,
+    onSelectAllClick: handleSelectAllClick
+  }, listData[1].options), /*#__PURE__*/external_react_default.a.createElement(DualListbox_ScreenReaderWrapper, null)));
+}
+
+DualListbox.propTypes = DualListbox_propTypes;
+DualListbox.Option = DualListbox_Option;
+/* harmony default export */ var DualListbox_DualListbox = (DualListbox);
+
+// CONCATENATED MODULE: ./src/DualListbox/index.ts
+
+
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 28:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/format");
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 35:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/enterprise/ChevronRight");
+
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 42:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Tooltip");
+
+/***/ }),
+
+/***/ 45:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/useForceUpdate");
+
+/***/ }),
+
+/***/ 56:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* unused harmony export charFromMatchOption */
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return fuzzyMatch; });
+// A utility for matching keyboard characters to list values
+var charFromMatchOption = function charFromMatchOption(option, charIndex) {
+  return option ? option.label.charAt(charIndex).toLowerCase() : '';
+};
+
+var fuzzyMatch = function fuzzyMatch(options, matchChar) {
+  if (!options.length) {
+    return options;
+  }
+
+  var defaultMatch = null;
+  var hasMatch = false;
+  var matches = options.filter(function (option) {
+    var characterValue = charFromMatchOption(option, matchChar.index);
+
+    if (characterValue === matchChar.value) {
+      hasMatch = 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 (!hasMatch) {
+      var defaultValue = charFromMatchOption(defaultMatch, matchChar.index);
+
+      if (!defaultValue) {
+        defaultMatch = option;
+      } else if (characterValue > matchChar.value) {
+        if (defaultValue < matchChar.value) {
+          defaultMatch = option;
+        } else if (defaultValue > characterValue) {
+          defaultMatch = option;
+        }
+      } else if (characterValue > defaultValue) {
+        defaultMatch = option;
+      }
+    }
+
+    return false;
+  });
+  return matches.length === 0 && defaultMatch ? [defaultMatch] : matches;
+};
+
+
+
+/***/ }),
+
+/***/ 58:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Switch");
+
+/***/ }),
+
+/***/ 6:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Box");
+
+/***/ }),
+
+/***/ 63:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/enterprise/ChevronLeft");
+
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/keyboard");
+
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 89:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return scrollIntoViewIfNeeded; });
+// A utility that attempts to move an element into view by scrolling it's derived parent.
+var scrollIntoViewIfNeeded = function scrollIntoViewIfNeeded(el) {
+  if (!el) {
+    return;
+  }
+
+  var parentEl = el.offsetParent;
+
+  if (!parentEl) {
+    return;
+  } // Below the bottom of the container.
+
+
+  if (parentEl.scrollTop + parentEl.clientHeight < el.offsetTop + el.clientHeight) {
+    parentEl.scrollTop = el.offsetTop + el.clientHeight - parentEl.clientHeight; // Above the top of the container.
+  } else if (parentEl.scrollTop > el.offsetTop) {
+    parentEl.scrollTop = el.offsetTop;
+  }
+};
+
+
+
+/***/ })
+
+/******/ });