@razorpay/blade 10.7.0 → 10.8.0

package/build/components/index.production.web.js

@@ -1,1575 +1,974 @@
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import * as React from 'react';
 import React__default, { useMemo, useCallback, useState, useEffect, useRef, useContext, createContext, Fragment as Fragment$1, Children, cloneElement, forwardRef } from 'react';
-import _toConsumableArray$1 from '@babel/runtime/helpers/toConsumableArray';
-import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
+import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import { FloatingDelayGroup, useFloating, offset, flip, size as size$1, autoUpdate, useTransitionStyles, FloatingOverlay, FloatingPortal, FloatingFocusManager, shift, arrow, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
 import '@babel/runtime/helpers/typeof';
+import _toConsumableArray$1 from '@babel/runtime/helpers/toConsumableArray';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * This software or document includes material copied from or derived from
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html.
- * Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang)
- */
-
-var componentIds$1 = {
-  DropdownOverlay: 'DropdownOverlay',
-  Dropdown: 'Dropdown',
-  triggers: {
-    SelectInput: 'SelectInput',
-    DropdownButton: 'DropdownButton',
-    DropdownLink: 'DropdownLink'
+var getColorScheme = function getColorScheme() {
+  var colorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
+  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there
+  var colorSchemeMediaQueryMap = {
+    light: '(prefers-color-scheme: light)',
+    dark: '(prefers-color-scheme: dark)',
+    system: 'default'
+  };
+  var supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+  if (colorScheme === 'light' || colorScheme === 'dark') {
+    return colorScheme;
+  }
+  if (colorScheme === 'system' && supportsMatchMedia && window.matchMedia(colorSchemeMediaQueryMap.dark).matches) {
+    return 'dark';
   }
+  return 'light';
 };
 
-// Save a list of named combobox actions, for future readability
-var SelectActions = {
-  Close: 'Close',
-  CloseSelect: 'CloseSelect',
-  First: 'First',
-  Last: 'Last',
-  Next: 'Next',
-  Open: 'Open',
-  PageDown: 'PageDown',
-  PageUp: 'PageUp',
-  Previous: 'Previous',
-  Select: 'Select',
-  Type: 'Type'
+var getMediaQuery = function getMediaQuery(_ref) {
+  var min = _ref.min,
+    max = _ref.max;
+  return "screen and (min-width: ".concat(min, "px)").concat(max ? " and (max-width: ".concat(max, "px)") : '');
 };
 
-/**
- * Filter an array of options against an input string
- * returns an array of options that begin with the filter string, case-independent
- *
- */
-function filterOptions() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var filter = arguments.length > 1 ? arguments[1] : undefined;
-  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return options.filter(function (option) {
-    var matches = option.toLowerCase().startsWith(filter.toLowerCase());
-    return matches && !exclude.includes(option);
-  });
-}
-
-/**
- * Map a keypress to action
- */
-function getActionFromKey(e, isOpen) {
-  if (!e) {
-    return undefined;
-  }
-  var altKey = e.altKey,
-    ctrlKey = e.ctrlKey,
-    metaKey = e.metaKey;
-  var key = '';
-  if ('key' in e) {
-    key = e.key;
-  }
-  var openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' ']; // all keys that will do the default open action
-  if (!key) return undefined;
-  // handle opening when closed
-  if (!isOpen && key && openKeys.includes(key)) {
-    return SelectActions.Open;
-  }
-
-  // home and end move the selected option when open or closed
-  if (key === 'Home') {
-    return SelectActions.First;
+var getPlatformType = function getPlatformType() {
+  if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+    return 'react-native';
   }
-  if (key === 'End') {
-    return SelectActions.Last;
+  if (typeof document !== 'undefined') {
+    return 'browser';
   }
-
-  // handle typing characters when open or closed
-  if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) {
-    return SelectActions.Type;
+  if (typeof process !== 'undefined') {
+    return 'node';
   }
+  return 'unknown';
+};
 
-  // handle keys when open
-  if (isOpen) {
-    if (key === 'ArrowUp' && altKey) {
-      return SelectActions.CloseSelect;
-    } else if (key === 'ArrowDown' && !altKey) {
-      return SelectActions.Next;
-    } else if (key === 'ArrowUp') {
-      return SelectActions.Previous;
-    } else if (key === 'PageUp') {
-      return SelectActions.PageUp;
-    } else if (key === 'PageDown') {
-      return SelectActions.PageDown;
-    } else if (key === 'Escape') {
-      return SelectActions.Close;
-    } else if (key === 'Enter' || key === ' ') {
-      return SelectActions.CloseSelect;
+var deviceType = {
+  desktop: 'desktop',
+  mobile: 'mobile'
+};
+var useBreakpoint = function useBreakpoint(_ref) {
+  var _window;
+  var breakpoints = _ref.breakpoints;
+  var supportsMatchMedia = typeof document !== 'undefined' && typeof window !== 'undefined' && typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) === 'function';
+  var breakpointsTokenAndQueryCollection = useMemo(function () {
+    return supportsMatchMedia ? Object.entries(breakpoints).map(function (_ref2, index, breakpointsArray) {
+      var _breakpointsArray;
+      var _ref3 = _slicedToArray(_ref2, 2),
+        token = _ref3[0],
+        screenSize = _ref3[1];
+      var min = screenSize;
+      var maxValue = (_breakpointsArray = breakpointsArray[index + 1]) === null || _breakpointsArray === void 0 ? void 0 : _breakpointsArray[1];
+      var mediaQuery = getMediaQuery({
+        min: min,
+        max: maxValue ? maxValue - 1 : undefined
+      });
+      return {
+        token: token,
+        screenSize: screenSize,
+        mediaQuery: mediaQuery
+      };
+    }) : [];
+  }, [breakpoints, supportsMatchMedia]);
+  var getMatchedDeviceType = useCallback(function (matchedBreakpoint) {
+    var matchedDeviceType = deviceType.mobile;
+    var platform = getPlatformType();
+    if (platform === 'react-native') {
+      matchedDeviceType = deviceType.mobile;
+    } else if (platform === 'browser') {
+      if (matchedBreakpoint && ['base', 'xs', 's'].includes(matchedBreakpoint)) {
+        // tablet is also categorised as mobile
+        matchedDeviceType = deviceType.mobile;
+      } else {
+        matchedDeviceType = deviceType.desktop;
+      }
+    } else if (platform === 'node') {
+      //@TODO: Check for useragent for node
+      matchedDeviceType = deviceType.desktop;
     }
-  }
-  return undefined;
-}
-
-/**
- * Return the index of an option from an array of options, based on a search string
- *
- * if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
- **/
-function getIndexByLetter(options, filter) {
-  var startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var orderedOptions = [].concat(_toConsumableArray$1(options.slice(startIndex)), _toConsumableArray$1(options.slice(0, startIndex)));
-  var firstMatch = filterOptions(orderedOptions, filter)[0];
-  var allSameLetter = function allSameLetter(array) {
-    return array.every(function (letter) {
-      return letter === array[0];
+    return matchedDeviceType;
+  }, []);
+  var getMatchedBreakpoint = useCallback(function (event) {
+    var _breakpointsTokenAndQ, _breakpointsTokenAndQ2;
+    var matchedBreakpoint = (_breakpointsTokenAndQ = (_breakpointsTokenAndQ2 = breakpointsTokenAndQueryCollection.find(function (_ref4) {
+      var _ref4$mediaQuery = _ref4.mediaQuery,
+        mediaQuery = _ref4$mediaQuery === void 0 ? '' : _ref4$mediaQuery;
+      // this will run whenever mediaQuery change event is triggered
+      if ((event === null || event === void 0 ? void 0 : event.media) === mediaQuery) {
+        return true;
+      }
+      // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object
+      if (window.matchMedia(mediaQuery).matches) {
+        return true;
+      }
+      return false;
+    })) === null || _breakpointsTokenAndQ2 === void 0 ? void 0 : _breakpointsTokenAndQ2.token) !== null && _breakpointsTokenAndQ !== void 0 ? _breakpointsTokenAndQ : undefined;
+    return matchedBreakpoint;
+  }, [breakpointsTokenAndQueryCollection]);
+  var _useState = useState(function () {
+      var matchedBreakpoint = getMatchedBreakpoint();
+      var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
+      return {
+        matchedBreakpoint: matchedBreakpoint,
+        matchedDeviceType: matchedDeviceType
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    breakpointAndDevice = _useState2[0],
+    setBreakpointAndDevice = _useState2[1];
+  useEffect(function () {
+    if (!supportsMatchMedia) {
+      return undefined;
+    }
+    var handleMediaQueryChange = function handleMediaQueryChange(event) {
+      setBreakpointAndDevice(function () {
+        var matchedBreakpoint = getMatchedBreakpoint(event);
+        var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
+        return {
+          matchedBreakpoint: matchedBreakpoint,
+          matchedDeviceType: matchedDeviceType
+        };
+      });
+    };
+    var mediaQueryInstances = breakpointsTokenAndQueryCollection.map(function (_ref5) {
+      var _ref5$mediaQuery = _ref5.mediaQuery,
+        mediaQuery = _ref5$mediaQuery === void 0 ? '' : _ref5$mediaQuery;
+      var mediaQueryInstance = window.matchMedia(mediaQuery);
+      /**
+       * the mediaquery event listener is available on mediaQuery instances and not `window`
+       * we iterate over all the breakpoints we have, register each instance and store them as `mediaQueryInstances` so we can later unregister all of them.
+       */
+      if (mediaQueryInstance.addEventListener) {
+        mediaQueryInstance.addEventListener('change', handleMediaQueryChange);
+      } else {
+        // In older browsers MediaQueryList do not yet inherit from EventTarget, So using addListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
+        mediaQueryInstance.addListener(handleMediaQueryChange);
+      }
+      return mediaQueryInstance;
     });
-  };
-
-  // first check if there is an exact match for the typed string
-  if (firstMatch) {
-    return options.indexOf(firstMatch);
-  }
+    return function () {
+      mediaQueryInstances.forEach(function (mediaQueryInstance) {
+        if (mediaQueryInstance.removeEventListener) {
+          mediaQueryInstance.removeEventListener('change', handleMediaQueryChange);
+        } else {
+          // In older browsers MediaQueryList do not yet inherit from EventTarget, So using removeListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener
+          mediaQueryInstance.removeListener(handleMediaQueryChange);
+        }
+      });
+    };
+  }, [breakpointsTokenAndQueryCollection, getMatchedBreakpoint, getMatchedDeviceType, supportsMatchMedia]);
 
-  // if the same letter is being repeated, cycle through first-letter matches
-  else if (allSameLetter(filter.split(''))) {
-    var matches = filterOptions(orderedOptions, filter[0]);
-    return options.indexOf(matches[0]);
-  }
+  // @TODO: handle SSR scenarios
+  return breakpointAndDevice;
+};
 
-  // if no matches, return -1
-  else {
-    return -1;
-  }
-}
+var throwBladeError = function throwBladeError(_ref) {
+  _ref.message;
+    _ref.moduleName;
+};
+var logger = function logger(_ref2) {
+  _ref2.message;
+    _ref2.moduleName;
+    _ref2.type;
+};
 
-/**
- * This functions makes sure the optionsIndex is not going out of possible options
- */
-function getUpdatedIndex(currentIndex, maxIndex, action) {
-  // On PageUP or PageDown, we jump focus by 10 items or to the first or last element
-  // Details: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html#:~:text=PageUp,to%20last%20option).
-  var pageSize = 10;
-  switch (action) {
-    case SelectActions.First:
-      return 0;
-    case SelectActions.Last:
-      return maxIndex;
-    case SelectActions.Previous:
-      return Math.max(0, currentIndex - 1);
-    case SelectActions.Next:
-      return Math.min(maxIndex, currentIndex + 1);
-    case SelectActions.PageUp:
-      return Math.max(0, currentIndex - pageSize);
-    case SelectActions.PageDown:
-      return Math.min(maxIndex, currentIndex + pageSize);
-    default:
-      return currentIndex;
-  }
-}
+var useColorScheme = function useColorScheme() {
+  var initialColorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
+  // if colorScheme defined use that else fallback to 'light'
+  var _useState = useState(function () {
+      return getColorScheme(initialColorScheme);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    colorSchemeState = _useState2[0],
+    setColorSchemeState = _useState2[1];
+  var setColorScheme = useCallback(function setThemeMode(colorScheme) {
+    setColorSchemeState(getColorScheme(colorScheme));
+  }, []);
+  return {
+    colorScheme: colorSchemeState,
+    setColorScheme: setColorScheme
+  };
+};
 
-/**
- * Checks if the given HTML element is visible on screen
- */
-function isElementVisibleOnScreen(element) {
-  var bounding = element.getBoundingClientRect();
-  return bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
-}
+var isBrowser$1 = getPlatformType() == 'browser';
 
 /**
- * Checks if the dropdown is scrollable
- */
-function isScrollable(element) {
-  return element && element.clientHeight < element.scrollHeight;
-}
-/**
- * Performs the action when actionType is passed
+ * useIsomorphicLayoutEffect enables us to safely call `useLayoutEffect` on the browser
+ * (for SSR reasons)
  *
- * This function handles all the keydown actions.
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser.
+ *
+ * @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
  */
-var performAction = function performAction(action, payload, actions) {
-  var event = payload.event;
-  switch (action) {
-    case SelectActions.Last:
-    // @ts-expect-error: intentional fallthrough, ignoring the warning
-    case SelectActions.First:
-      actions.setIsOpen(true);
-    // intentional fallthrough
-    case SelectActions.Next:
-    case SelectActions.Previous:
-    case SelectActions.PageUp:
-    case SelectActions.PageDown:
-      event.preventDefault();
-      actions.onOptionChange(action);
-      return true;
-    case SelectActions.CloseSelect:
-      event.preventDefault();
-      actions.selectCurrentOption();
-      return true;
-    case SelectActions.Close:
-      event.preventDefault();
-      actions.close();
-      return true;
-    case SelectActions.Type:
-      actions.onComboType(event.key, action);
-      return true;
-    case SelectActions.Open:
-      event.preventDefault();
-      actions.setIsOpen(true);
-      return true;
-  }
-  return false;
+var useIsomorphicLayoutEffect = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
+
+/* eslint-disable consistent-return */
+function useInterval(callback, _ref) {
+  var delay = _ref.delay,
+    enable = _ref.enable;
+  var intervalRef = React__default.useRef(null);
+  var savedCallback = React__default.useRef(callback);
+
+  // keep the callback updated
+  useIsomorphicLayoutEffect(function () {
+    savedCallback.current = callback;
+  }, [callback]);
+  React__default.useEffect(function () {
+    var tick = function tick() {
+      return savedCallback.current();
+    };
+    if (enable) {
+      intervalRef.current = window.setInterval(tick, delay);
+      return function () {
+        return window.clearInterval(intervalRef.current);
+      };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return function () {};
+  }, [delay, enable]);
+}
+
+/* eslint-disable @typescript-eslint/no-namespace */
+var isReactNative$4 = function isReactNative() {
+  return getPlatformType() === 'react-native';
 };
 
 /**
- * When options list is large, it can have a scrollbar.
+ * @description
  *
- * This function ensures the active option is always in the viewport
+ * Casts a Platform.Select<> type to web type
+ *
+ * @example
+ *
+ * ```ts
+ * type Example = Platform.Select<{ web: string; native: number }>;
+ *
+ * const extractedWebType = castWebType('' as Example);
+ * //    ^ string
+ * ```
  */
-var ensureScrollVisiblity = function ensureScrollVisiblity(newActiveIndex, containerElement, options) {
-  // ensure the new option is in view
-  if (containerElement) {
-    if (isScrollable(containerElement)) {
-      var optionEl = containerElement.querySelectorAll('[role="option"]');
-      // Making sure its the same element as the one from options state
-      if (newActiveIndex >= 0 && optionEl[newActiveIndex].dataset.value === options[newActiveIndex]) {
-        var activeElement = optionEl[newActiveIndex];
-        var bodyRect = containerElement.getBoundingClientRect().top;
-        var elementRect = activeElement.getBoundingClientRect().top;
-        var elementPosition = elementRect - bodyRect;
-        var offsetPosition = elementPosition;
-        containerElement.scrollTo({
-          top: offsetPosition
-        });
-        if (!isElementVisibleOnScreen(optionEl[newActiveIndex])) {
-          activeElement.scrollIntoView({
-            behavior: 'smooth'
-          });
-        }
-      }
-    }
-  }
+var castWebType = function castWebType(value) {
+  return value;
 };
 
 /**
- * value that is set in the actual form input
+ * @description
+ *
+ * Casts a Platform.Select<> type to native type
+ *
+ * @example
+ *
+ * ```ts
+ * type Example = Platform.Select<{ web: string; native: number }>;
+ *
+ * const extractedNativeType = castNativeType('' as Example);
+ * //    ^ number
+ * ```
  */
-var makeInputValue = function makeInputValue(selectedIndices, options) {
-  if (options.length === 0) {
-    return '';
-  }
-  return selectedIndices.map(function (selectedIndex) {
-    var _options$selectedInde;
-    return (_options$selectedInde = options[selectedIndex]) === null || _options$selectedInde === void 0 ? void 0 : _options$selectedInde.value;
-  }).join(', ');
+var castNativeType = function castNativeType(value) {
+  return value;
 };
 
-/**
- * Value that is displayed inside the select field
- */
-var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, options) {
-  // When no item is selected or no item is present
-  if (options.length === 0 || selectedIndices.length === 0) {
-    return '';
+function makeBorderSize(size) {
+  if (typeof size === 'number') {
+    return "".concat(size, "px");
   }
+  return size;
+}
 
-  // When one item is selected, we display that item's title in input
-  if (selectedIndices.length === 1) {
-    return options[selectedIndices[0]].title;
-  }
+var makeMotionTime = function makeMotionTime(time) {
+  return "".concat(time, "ms");
+};
 
-  // When more than one item is selected, we display the count of items
-  return "".concat(selectedIndices.length, " items selected");
+var makeSpace = function makeSpace(size) {
+  return "".concat(size, "px");
 };
 
-var getColorScheme = function getColorScheme() {
-  var colorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there
-  var colorSchemeMediaQueryMap = {
-    light: '(prefers-color-scheme: light)',
-    dark: '(prefers-color-scheme: dark)',
-    system: 'default'
-  };
-  var supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
-  if (colorScheme === 'light' || colorScheme === 'dark') {
-    return colorScheme;
-  }
-  if (colorScheme === 'system' && supportsMatchMedia && window.matchMedia(colorSchemeMediaQueryMap.dark).matches) {
-    return 'dark';
-  }
-  return 'light';
+var makeTypographySize = function makeTypographySize(size) {
+  var remValue = size / 16;
+  return "".concat(remValue, "rem");
 };
 
-var getMediaQuery = function getMediaQuery(_ref) {
-  var min = _ref.min,
-    max = _ref.max;
-  return "screen and (min-width: ".concat(min, "px)").concat(max ? " and (max-width: ".concat(max, "px)") : '');
-};
-
-var getPlatformType = function getPlatformType() {
-  if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-    return 'react-native';
-  }
-  if (typeof document !== 'undefined') {
-    return 'browser';
-  }
-  if (typeof process !== 'undefined') {
-    return 'node';
-  }
-  return 'unknown';
-};
-
-var deviceType = {
-  desktop: 'desktop',
-  mobile: 'mobile'
-};
-var useBreakpoint = function useBreakpoint(_ref) {
-  var _window;
-  var breakpoints = _ref.breakpoints;
-  var supportsMatchMedia = typeof document !== 'undefined' && typeof window !== 'undefined' && typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) === 'function';
-  var breakpointsTokenAndQueryCollection = useMemo(function () {
-    return supportsMatchMedia ? Object.entries(breakpoints).map(function (_ref2, index, breakpointsArray) {
-      var _breakpointsArray;
-      var _ref3 = _slicedToArray(_ref2, 2),
-        token = _ref3[0],
-        screenSize = _ref3[1];
-      var min = screenSize;
-      var maxValue = (_breakpointsArray = breakpointsArray[index + 1]) === null || _breakpointsArray === void 0 ? void 0 : _breakpointsArray[1];
-      var mediaQuery = getMediaQuery({
-        min: min,
-        max: maxValue ? maxValue - 1 : undefined
-      });
-      return {
-        token: token,
-        screenSize: screenSize,
-        mediaQuery: mediaQuery
-      };
-    }) : [];
-  }, [breakpoints, supportsMatchMedia]);
-  var getMatchedDeviceType = useCallback(function (matchedBreakpoint) {
-    var matchedDeviceType = deviceType.mobile;
-    var platform = getPlatformType();
-    if (platform === 'react-native') {
-      matchedDeviceType = deviceType.mobile;
-    } else if (platform === 'browser') {
-      if (matchedBreakpoint && ['base', 'xs', 's'].includes(matchedBreakpoint)) {
-        // tablet is also categorised as mobile
-        matchedDeviceType = deviceType.mobile;
-      } else {
-        matchedDeviceType = deviceType.desktop;
-      }
-    } else if (platform === 'node') {
-      //@TODO: Check for useragent for node
-      matchedDeviceType = deviceType.desktop;
-    }
-    return matchedDeviceType;
-  }, []);
-  var getMatchedBreakpoint = useCallback(function (event) {
-    var _breakpointsTokenAndQ, _breakpointsTokenAndQ2;
-    var matchedBreakpoint = (_breakpointsTokenAndQ = (_breakpointsTokenAndQ2 = breakpointsTokenAndQueryCollection.find(function (_ref4) {
-      var _ref4$mediaQuery = _ref4.mediaQuery,
-        mediaQuery = _ref4$mediaQuery === void 0 ? '' : _ref4$mediaQuery;
-      // this will run whenever mediaQuery change event is triggered
-      if ((event === null || event === void 0 ? void 0 : event.media) === mediaQuery) {
-        return true;
-      }
-      // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object
-      if (window.matchMedia(mediaQuery).matches) {
-        return true;
-      }
-      return false;
-    })) === null || _breakpointsTokenAndQ2 === void 0 ? void 0 : _breakpointsTokenAndQ2.token) !== null && _breakpointsTokenAndQ !== void 0 ? _breakpointsTokenAndQ : undefined;
-    return matchedBreakpoint;
-  }, [breakpointsTokenAndQueryCollection]);
-  var _useState = useState(function () {
-      var matchedBreakpoint = getMatchedBreakpoint();
-      var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
-      return {
-        matchedBreakpoint: matchedBreakpoint,
-        matchedDeviceType: matchedDeviceType
-      };
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    breakpointAndDevice = _useState2[0],
-    setBreakpointAndDevice = _useState2[1];
-  useEffect(function () {
-    if (!supportsMatchMedia) {
-      return undefined;
-    }
-    var handleMediaQueryChange = function handleMediaQueryChange(event) {
-      setBreakpointAndDevice(function () {
-        var matchedBreakpoint = getMatchedBreakpoint(event);
-        var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
-        return {
-          matchedBreakpoint: matchedBreakpoint,
-          matchedDeviceType: matchedDeviceType
-        };
-      });
-    };
-    var mediaQueryInstances = breakpointsTokenAndQueryCollection.map(function (_ref5) {
-      var _ref5$mediaQuery = _ref5.mediaQuery,
-        mediaQuery = _ref5$mediaQuery === void 0 ? '' : _ref5$mediaQuery;
-      var mediaQueryInstance = window.matchMedia(mediaQuery);
-      /**
-       * the mediaquery event listener is available on mediaQuery instances and not `window`
-       * we iterate over all the breakpoints we have, register each instance and store them as `mediaQueryInstances` so we can later unregister all of them.
-       */
-      if (mediaQueryInstance.addEventListener) {
-        mediaQueryInstance.addEventListener('change', handleMediaQueryChange);
-      } else {
-        // In older browsers MediaQueryList do not yet inherit from EventTarget, So using addListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
-        mediaQueryInstance.addListener(handleMediaQueryChange);
-      }
-      return mediaQueryInstance;
-    });
-    return function () {
-      mediaQueryInstances.forEach(function (mediaQueryInstance) {
-        if (mediaQueryInstance.removeEventListener) {
-          mediaQueryInstance.removeEventListener('change', handleMediaQueryChange);
-        } else {
-          // In older browsers MediaQueryList do not yet inherit from EventTarget, So using removeListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener
-          mediaQueryInstance.removeListener(handleMediaQueryChange);
-        }
-      });
-    };
-  }, [breakpointsTokenAndQueryCollection, getMatchedBreakpoint, getMatchedDeviceType, supportsMatchMedia]);
-
-  // @TODO: handle SSR scenarios
-  return breakpointAndDevice;
-};
-
-var throwBladeError = function throwBladeError(_ref) {
-  _ref.message;
-    _ref.moduleName;
-};
-var logger = function logger(_ref2) {
-  _ref2.message;
-    _ref2.moduleName;
-    _ref2.type;
+var makeSize = function makeSize(size) {
+  return "".concat(size, "px");
 };
 
-var useColorScheme = function useColorScheme() {
-  var initialColorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  // if colorScheme defined use that else fallback to 'light'
-  var _useState = useState(function () {
-      return getColorScheme(initialColorScheme);
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    colorSchemeState = _useState2[0],
-    setColorSchemeState = _useState2[1];
-  var setColorScheme = useCallback(function setThemeMode(colorScheme) {
-    setColorSchemeState(getColorScheme(colorScheme));
-  }, []);
-  return {
-    colorScheme: colorSchemeState,
-    setColorScheme: setColorScheme
-  };
+/**
+ * @deprecated This utility will be deprecated in subsequent version.
+ */
+var toTitleCase = function toTitleCase(inputString) {
+  return inputString.toLowerCase().split(' ').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
 };
 
-var isBrowser$1 = getPlatformType() == 'browser';
-
 /**
- * useIsomorphicLayoutEffect enables us to safely call `useLayoutEffect` on the browser
- * (for SSR reasons)
- *
- * React currently throws a warning when using useLayoutEffect on the server.
- * To get around it, we can conditionally useEffect on the server (no-op) and
- * useLayoutEffect in the browser.
- *
- * @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * a type-safe version of the `usePrevious` hook described here:
+ * @see {@link https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state}
+ * @deprecated This utility will be deprecated in subsequent version.
  */
-var useIsomorphicLayoutEffect = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
-
-/* eslint-disable consistent-return */
-function useInterval(callback, _ref) {
-  var delay = _ref.delay,
-    enable = _ref.enable;
-  var intervalRef = React__default.useRef(null);
-  var savedCallback = React__default.useRef(callback);
-
-  // keep the callback updated
-  useIsomorphicLayoutEffect(function () {
-    savedCallback.current = callback;
-  }, [callback]);
-  React__default.useEffect(function () {
-    var tick = function tick() {
-      return savedCallback.current();
-    };
-    if (enable) {
-      intervalRef.current = window.setInterval(tick, delay);
-      return function () {
-        return window.clearInterval(intervalRef.current);
-      };
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return function () {};
-  }, [delay, enable]);
+function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
 }
 
-/* eslint-disable @typescript-eslint/no-namespace */
-var isReactNative$4 = function isReactNative() {
-  return getPlatformType() === 'react-native';
+var ThemeContext = /*#__PURE__*/createContext({
+  // @ts-expect-error set null
+  theme: null,
+  colorScheme: 'light',
+  platform: 'onDesktop',
+  setColorScheme: function setColorScheme() {
+    return null;
+  }
+});
+var useTheme = function useTheme() {
+  var themeContext = useContext(ThemeContext);
+  return themeContext;
 };
 
 /**
- * @description
- *
- * Casts a Platform.Select<> type to web type
- *
- * @example
- *
- * ```ts
- * type Example = Platform.Select<{ web: string; native: number }>;
- *
- * const extractedWebType = castWebType('' as Example);
- * //    ^ string
- * ```
+ * is the role supposed to be `menu`
  */
-var castWebType = function castWebType(value) {
-  return value;
+var isRoleMenu = function isRoleMenu(dropdownTriggerer) {
+  return isReactNative$4() || dropdownTriggerer !== 'SelectInput';
 };
 
 /**
- * @description
- *
- * Casts a Platform.Select<> type to native type
+ * We switch between accessibility of `dialog` with `listbox` and buttons as a child and just `listbox` when there are action items on footer
  *
- * @example
+ * Not announcing `dialog` helps not throw users off for simple dropdowns.
  *
- * ```ts
- * type Example = Platform.Select<{ web: string; native: number }>;
+ * and having `dialog` is neccessary when there are buttons on footer
  *
- * const extractedNativeType = castNativeType('' as Example);
- * //    ^ number
- * ```
+ * `menu` role is required for react native.
  */
-var castNativeType = function castNativeType(value) {
-  return value;
+var getActionListContainerRole = function getActionListContainerRole(hasFooterAction, dropdownTriggerer) {
+  if (hasFooterAction) {
+    return 'dialog';
+  }
+  if (isRoleMenu(dropdownTriggerer)) {
+    return 'menu';
+  }
+  return 'listbox';
 };
-
-function makeBorderSize(size) {
-  if (typeof size === 'number') {
-    return "".concat(size, "px");
+var getActionListSectionRole = function getActionListSectionRole() {
+  if (isReactNative$4()) {
+    return undefined;
   }
-  return size;
-}
-
-var makeMotionTime = function makeMotionTime(time) {
-  return "".concat(time, "ms");
+  return 'group';
 };
-
-var makeSpace = function makeSpace(size) {
-  return "".concat(size, "px");
+var getSeparatorRole = function getSeparatorRole() {
+  if (isReactNative$4()) {
+    // Its not really announced so ignoring it in native.
+    return undefined;
+  }
+  return 'separator';
 };
-
-var makeTypographySize = function makeTypographySize(size) {
-  var remValue = size / 16;
-  return "".concat(remValue, "rem");
+var getActionListItemWrapperRole = function getActionListItemWrapperRole(hasFooterAction, dropdownTriggerer) {
+  if (isRoleMenu(dropdownTriggerer)) {
+    return undefined;
+  }
+  if (hasFooterAction) {
+    return 'listbox';
+  }
+  return undefined;
 };
-
-var makeSize = function makeSize(size) {
-  return "".concat(size, "px");
+var getActionListItemRole = function getActionListItemRole(dropdownTriggerer, href, selectionType) {
+  if (href) {
+    return 'link';
+  }
+  if (isRoleMenu(dropdownTriggerer)) {
+    if (selectionType === 'multiple') {
+      return 'menuitemcheckbox';
+    }
+    return 'menuitem';
+  }
+  return 'option';
 };
 
-/**
- * @deprecated This utility will be deprecated in subsequent version.
- */
-var toTitleCase = function toTitleCase(inputString) {
-  return inputString.toLowerCase().split(' ').map(function (word) {
-    return word.charAt(0).toUpperCase() + word.slice(1);
-  }).join(' ');
+var componentIds$1 = {
+  ActionList: 'ActionList',
+  ActionListItem: 'ActionListItem',
+  ActionListItemAsset: 'ActionListItemAsset',
+  ActionListItemIcon: 'ActionListItemIcon',
+  ActionListItemText: 'ActionListItemText',
+  ActionListSection: 'ActionListSection'
 };
 
+/* eslint-disable no-restricted-properties */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /**
- * a type-safe version of the `usePrevious` hook described here:
- * @see {@link https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state}
- * @deprecated This utility will be deprecated in subsequent version.
+ * Gets the `componentId` prop of React component if it exists.
  */
-function usePrevious(value) {
-  var ref = useRef();
-  useEffect(function () {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
-var ThemeContext = /*#__PURE__*/createContext({
-  // @ts-expect-error set null
-  theme: null,
-  colorScheme: 'light',
-  platform: 'onDesktop',
-  setColorScheme: function setColorScheme() {
-    return null;
-  }
-});
-var useTheme = function useTheme() {
-  var themeContext = useContext(ThemeContext);
-  return themeContext;
-};
+var getComponentId = function getComponentId(component) {
+  var _component$props, _component$props2, _component$props2$ori, _component$type;
+  if (! /*#__PURE__*/React__default.isValidElement(component)) return null;
 
-/* eslint-disable @typescript-eslint/no-empty-function */
-var BottomSheetContext = /*#__PURE__*/React__default.createContext({
-  headerHeight: 0,
-  contentHeight: 0,
-  footerHeight: 0,
-  isHeaderFloating: false,
-  setContentHeight: function setContentHeight() {},
-  setHeaderHeight: function setHeaderHeight() {},
-  setFooterHeight: function setFooterHeight() {},
-  setHasBodyPadding: function setHasBodyPadding() {},
-  setIsHeaderEmpty: function setIsHeaderEmpty() {},
-  close: function close() {},
-  scrollRef: null,
-  bind: null,
-  isOpen: false,
-  positionY: 0,
-  isInBottomSheet: false,
-  defaultInitialFocusRef: {
-    current: null
+  // Storybook wraps MDX components in a wrapper component, so we need to get componentId from originalType
+  if (component !== null && component !== void 0 && (_component$props = component.props) !== null && _component$props !== void 0 && _component$props.mdxType && component !== null && component !== void 0 && (_component$props2 = component.props) !== null && _component$props2 !== void 0 && (_component$props2$ori = _component$props2.originalType) !== null && _component$props2$ori !== void 0 && _component$props2$ori.componentId) {
+    return component.props.originalType.componentId;
   }
-});
-var useBottomSheetContext = function useBottomSheetContext() {
-  var state = React__default.useContext(BottomSheetContext);
-  return state;
+  return (_component$type = component.type) === null || _component$type === void 0 ? void 0 : _component$type.componentId;
 };
-var BottomSheetAndDropdownGlueContext = /*#__PURE__*/React__default.createContext(null);
 
 /**
- * This hook provides the bridge between Dropdown And BottomSheet
- *
- * You can hover over the return types to get jsdoc and more information about each
+ * Checks if the `component` matches the `componentId`
  */
-var useBottomSheetAndDropdownGlue = function useBottomSheetAndDropdownGlue() {
-  var state = React__default.useContext(BottomSheetAndDropdownGlueContext);
-  return state;
+var isValidAllowedChildren = function isValidAllowedChildren(component, id) {
+  return getComponentId(component) === id;
 };
 
-var _excluded$51 = ["isOpen", "setIsOpen", "close", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType", "changeCallbackTriggerer", "setChangeCallbackTriggerer", "isControlled", "setControlledValueIndices"];
 function ownKeys$6f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$6e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6f(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-var noop$1 = function noop() {};
-var DropdownContext = /*#__PURE__*/React__default.createContext({
-  isOpen: false,
-  setIsOpen: noop$1,
-  close: noop$1,
-  selectedIndices: [],
-  setSelectedIndices: noop$1,
-  controlledValueIndices: [],
-  setControlledValueIndices: noop$1,
-  options: [],
-  setOptions: noop$1,
-  activeIndex: -1,
-  setActiveIndex: noop$1,
-  shouldIgnoreBlur: false,
-  setShouldIgnoreBlur: noop$1,
-  shouldIgnoreBlurAnimation: false,
-  setShouldIgnoreBlurAnimation: noop$1,
-  hasFooterAction: false,
-  setHasFooterAction: noop$1,
-  hasLabelOnLeft: false,
-  setHasLabelOnLeft: noop$1,
-  isKeydownPressed: false,
-  setIsKeydownPressed: noop$1,
-  changeCallbackTriggerer: 0,
-  setChangeCallbackTriggerer: noop$1,
-  isControlled: false,
-  setIsControlled: noop$1,
-  dropdownBaseId: '',
-  actionListItemRef: {
-    current: null
-  },
-  triggererRef: {
-    current: null
-  },
-  triggererWrapperRef: {
-    current: null
-  }
-});
-var searchTimeout;
-var searchString = '';
 /**
- * Handles almost all the functionality of dropdown.
- *
- * Returns the values from DropdownContext along with some helper functions and event handlers
+ * Returns if there is ActionListItem after ActionListSection
+ * and an index of last ActionListSection
  *
+ * It is used to decide if ActionListSection add divider at the end
  */
-var useDropdown = function useDropdown() {
-  var _React$useContext = React__default.useContext(DropdownContext),
-    isOpen = _React$useContext.isOpen,
-    setIsOpen = _React$useContext.setIsOpen,
-    close = _React$useContext.close,
-    selectedIndices = _React$useContext.selectedIndices,
-    setSelectedIndices = _React$useContext.setSelectedIndices,
-    activeIndex = _React$useContext.activeIndex,
-    setActiveIndex = _React$useContext.setActiveIndex,
-    shouldIgnoreBlur = _React$useContext.shouldIgnoreBlur,
-    setShouldIgnoreBlur = _React$useContext.setShouldIgnoreBlur,
-    isKeydownPressed = _React$useContext.isKeydownPressed,
-    setIsKeydownPressed = _React$useContext.setIsKeydownPressed,
-    options = _React$useContext.options,
-    selectionType = _React$useContext.selectionType,
-    changeCallbackTriggerer = _React$useContext.changeCallbackTriggerer,
-    setChangeCallbackTriggerer = _React$useContext.setChangeCallbackTriggerer,
-    isControlled = _React$useContext.isControlled,
-    setControlledValueIndices = _React$useContext.setControlledValueIndices,
-    rest = _objectWithoutProperties$1(_React$useContext, _excluded$51);
-  var bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();
-  var setIndices = function setIndices(indices) {
-    if (isControlled) {
-      setControlledValueIndices(indices);
-    } else {
-      setSelectedIndices(indices);
-    }
-  };
-  /**
-   * Marks the given index as selected.
-   *
-   * In single select, it also closes the menu.
-   * In multiselect, it keeps the menu open for more selections
-   */
-  var selectOption = function selectOption(index) {
-    var properties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      closeOnSelection: true
-    };
-    var isSelected = false;
-    if (index < 0 || index > options.length - 1) {
-      return isSelected;
-    }
-    if (selectionType === 'multiple') {
-      if (selectedIndices.includes(index)) {
-        // remove existing item
-        var existingItemIndex = selectedIndices.indexOf(index);
-        setIndices([].concat(_toConsumableArray$1(selectedIndices.slice(0, existingItemIndex)), _toConsumableArray$1(selectedIndices.slice(existingItemIndex + 1))));
-        isSelected = false;
-      } else {
-        setIndices([].concat(_toConsumableArray$1(selectedIndices), [index]));
-        isSelected = true;
-      }
-    } else {
-      setIndices([index]);
-      isSelected = true;
-    }
+var getActionListSectionPosition = function getActionListSectionPosition(children) {
+  // Creating an array of componentIds
+  var childComponentIdArray = React__default.Children.toArray(children).map(function (child) {
+    return getComponentId(child);
+  });
 
-    // Triggers `onChange` on SelectInput
-    setChangeCallbackTriggerer(changeCallbackTriggerer + 1);
-    if (activeIndex !== index) {
-      setActiveIndex(index);
-    }
-    if (properties !== null && properties !== void 0 && properties.closeOnSelection && selectionType !== 'multiple') {
-      close();
-    }
-    return isSelected;
-  };
+  // Reading the last `ActionListSection` component's index
+  var lastActionListSectionIndex = childComponentIdArray.lastIndexOf(componentIds$1.ActionListSection);
 
-  /**
-   * Click listener for combobox (or any triggerer of the dropdown)
-   */
-  var onTriggerClick = function onTriggerClick() {
-    if (isOpen) {
-      close();
-    } else {
-      setIsOpen(true);
+  // Checking if there is any `ActionListItem` present after `ActionListSection`
+  var isActionListItemPresentAfterSection = childComponentIdArray.slice(lastActionListSectionIndex).includes(componentIds$1.ActionListItem);
+  return {
+    isActionListItemPresentAfterSection: isActionListItemPresentAfterSection,
+    lastActionListSectionIndex: lastActionListSectionIndex
+  };
+};
+/**
+ * Loops over action list items and returns different properties from children like option values, header and footer child, etc
+ */
+var getActionListProperties = function getActionListProperties(children) {
+  var sectionData = [];
+  var currentSection = null;
+  var actionListOptions = [];
+  var getActionListItemWithId = function getActionListItemWithId(child, hideDivider) {
+    if ( /*#__PURE__*/React__default.isValidElement(child) && !child.props.isDisabled) {
+      actionListOptions.push({
+        title: child.props.title,
+        value: child.props.value,
+        onClickTrigger: function onClickTrigger(value) {
+          var _child$props$onClick, _child$props, _child$props$isSelect;
+          var anchorLink = child.props.href;
+          (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, {
+            name: child.props.value,
+            value: (_child$props$isSelect = child.props.isSelected) !== null && _child$props$isSelect !== void 0 ? _child$props$isSelect : value
+          });
+          if (anchorLink && !isReactNative$4()) {
+            var _child$props$target;
+            var target = (_child$props$target = child.props.target) !== null && _child$props$target !== void 0 ? _child$props$target : '_self';
+            window.open(anchorLink, target);
+            if (window.top) {
+              window.top.open(anchorLink, target);
+            }
+          }
+        }
+      });
+      var currentIndex = actionListOptions.length - 1;
+      var foundSection = sectionData.find(function (v) {
+        return v.title === currentSection;
+      });
+      // push the item in the appropriate bucket
+      if (foundSection) {
+        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$6e(_objectSpread$6e({}, child.props), {}, {
+          _index: currentIndex
+        }));
+      } else {
+        // create a new bucket
+        sectionData.push({
+          title: currentSection,
+          hideDivider: hideDivider,
+          data: [_objectSpread$6e(_objectSpread$6e({}, child.props), {}, {
+            _index: currentIndex
+          })]
+        });
+      }
+      var clonedChild = /*#__PURE__*/React__default.cloneElement(child, {
+        // @ts-expect-error: TS doesn't understand the child's props
+        _index: currentIndex
+      });
+      return clonedChild;
     }
+    return child;
   };
+  var isActionListItemPresentAfterSection;
+  // eslint-disable-next-line one-var
+  var lastActionListSectionIndex;
+  if (isReactNative$4()) {
+    // We're reading this so that we can decide whether to show the divider or not.
+    // If ActionListSection is final item and no ActionListItem is present after that, we hide the divider
+    // On web, we do it using descendant styling
+    var _getActionListSection = getActionListSectionPosition(children);
+    isActionListItemPresentAfterSection = _getActionListSection.isActionListItemPresentAfterSection;
+    lastActionListSectionIndex = _getActionListSection.lastActionListSectionIndex;
+  }
 
-  /**
-   * Blur handler on combobox. Also handles the selection logic when user moves focus
-   */
-  var onTriggerBlur = function onTriggerBlur(_ref) {
-    var name = _ref.name,
-      value = _ref.value,
-      onBlurCallback = _ref.onBlurCallback;
-    if (rest.hasFooterAction) {
-      // When Footer has action buttons, we ignore the blur (by setting shouldIgnoreBlur to true in onTriggerKeyDown)
-      // And we remove the active item (by setting it to -1) so that we can shift focus on action buttons
-      setActiveIndex(-1);
-    }
-    if (bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet) {
-      setShouldIgnoreBlur(true);
-      return;
-    }
-    if (shouldIgnoreBlur) {
-      setShouldIgnoreBlur(false);
-      return;
-    }
-    onBlurCallback === null || onBlurCallback === void 0 ? void 0 : onBlurCallback({
-      name: name,
-      value: value
-    });
-    if (isOpen) {
-      if (selectionType !== 'multiple') {
-        selectOption(activeIndex);
+  // Looping through ActionListItems to add index to them and get an options array for moving focus between items
+  var childrenWithId = React__default.Children.map(children, function (child, index) {
+    if ( /*#__PURE__*/React__default.isValidElement(child)) {
+      if (isValidAllowedChildren(child, componentIds$1.ActionListSection)) {
+        var shouldHideDivider = index === lastActionListSectionIndex && !isActionListItemPresentAfterSection;
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          // @ts-expect-error: TS doesn't understand the child's props
+          children: React__default.Children.map(child.props.children, function (childInSection) {
+            currentSection = child.props.title;
+            if (isValidAllowedChildren(childInSection, componentIds$1.ActionListItem)) {
+              return getActionListItemWithId(childInSection, shouldHideDivider);
+            }
+            return childInSection;
+          }),
+          // On web, we handle it with descendant styling in css so no need of JS there
+          _hideDivider: isReactNative$4() ? shouldHideDivider : undefined
+        });
       }
-      if (!(bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet)) {
-        close();
+      if (isValidAllowedChildren(child, componentIds$1.ActionListItem)) {
+        return getActionListItemWithId(child, true);
       }
     }
+    return child;
+  });
+  return {
+    sectionData: sectionData,
+    childrenWithId: childrenWithId,
+    actionListOptions: actionListOptions
   };
+};
+var validateActionListItemProps = function validateActionListItemProps(_ref) {
+  _ref.leading;
+    _ref.trailing;
+};
+var getNormalTextColor = function getNormalTextColor(isDisabled) {
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    isMuted = _ref2.isMuted;
+  if (isDisabled) {
+    return 'surface.text.placeholder.lowContrast';
+  }
+  if (isMuted) {
+    return 'surface.text.muted.lowContrast';
+  }
+  return 'surface.text.normal.lowContrast';
+};
 
-  /**
-   * Function that we call when we want to move focus from one option to other
-   */
-  var onOptionChange = function onOptionChange(actionType, index) {
-    var max = options.length - 1;
-    var newIndex = index !== null && index !== void 0 ? index : activeIndex;
-    setActiveIndex(getUpdatedIndex(newIndex, max, actionType));
-    var optionValues = options.map(function (option) {
-      return option.value;
-    });
-    ensureScrollVisiblity(newIndex, rest.actionListItemRef.current, optionValues);
-  };
-
-  /**
-   * Click handler when user clicks on any particular option.
-   *
-   * It
-   * - changes the option focus
-   * - selects that option
-   * - moves focus to combobox
-   */
-  var onOptionClick = function onOptionClick(e, index) {
-    var actionType = getActionFromKey(e, isOpen);
-    if (typeof actionType === 'number') {
-      onOptionChange(actionType, index);
-    }
-    selectOption(index);
-    if (!isReactNative$4()) {
-      var _rest$triggererRef$cu;
-      (_rest$triggererRef$cu = rest.triggererRef.current) === null || _rest$triggererRef$cu === void 0 ? void 0 : _rest$triggererRef$cu.focus();
-    }
-  };
+var breakpoints = {
+  base: 0,
+  xs: 320,
+  s: 480,
+  m: 768,
+  l: 1024,
+  xl: 1200
+};
 
-  /**
-   * Function we call to handle the typeahead.
-   *
-   * It takes a letter, stores that letter in searchString (and clears it after timeout) to maintain a word
-   *
-   * Then searches for that word in options and moves focus there.
-   */
-  var onComboType = function onComboType(letter, actionType) {
-    // open the listbox if it is closed
-    setIsOpen(true);
-    if (typeof searchTimeout === 'number') {
-      window.clearTimeout(searchTimeout);
-    }
-    searchTimeout = window.setTimeout(function () {
-      searchString = '';
-    }, 500);
-    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-    searchString = searchString + letter;
-    var optionTitles = options.map(function (option) {
-      return option.title;
-    });
-    var searchIndex = getIndexByLetter(optionTitles, searchString, activeIndex + 1);
+var fontFamily = {
+  text: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  code: 'monospace'
+};
 
-    // if a match was found, go to it
-    if (searchIndex >= 0) {
-      onOptionChange(actionType, searchIndex);
-    }
-    // if no matches, clear the timeout and search string
-    else {
-      window.clearTimeout(searchTimeout);
-      searchString = '';
-    }
-  };
+function ownKeys$6e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-  /**
-   * Keydown event of combobox. Handles most of the keyboard accessibility of dropdown
-   */
-  var onTriggerKeydown = function onTriggerKeydown(e) {
-    if (e.event.key === 'Tab' && rest.hasFooterAction) {
-      // When footer has Action Buttons, we ignore the blur event so that we can move focus to action item than bluring out of dropdown
-      setShouldIgnoreBlur(true);
-    }
+/**
+ * For font size and line-heights we can’t say from xl to 2xl the value will necessary increase.
+ * it might decrease or remain same because these are alias tokens and we need aliases for cross platform.
+ * so for example xl on mobile can be 32px and on desktop xl can be 34px,
+ * similarly 2xl on mobile can be 34px but on desktop doesn’t necessarily mean 2xl will be more than xl(34px) it can be 32 as well since visually they make better hierarchy.
+ */
 
-    // disable closing the select on blur events if we are using a bottomsheet
-    if (bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet) {
-      setShouldIgnoreBlur(true);
-    }
-    if (!isKeydownPressed && ![' ', 'Enter', 'Escape', 'Meta'].includes(e.event.key)) {
-      // When keydown is not already pressed and its not Enter, Space, Command, or Escape key (those are generic keys and we only want to handle arrow keys or home buttons etc)
-      setIsKeydownPressed(true);
-    }
-    var actionType = getActionFromKey(e.event, isOpen);
-    if (actionType) {
-      performAction(actionType, e, {
-        setIsOpen: setIsOpen,
-        close: close,
-        onOptionChange: onOptionChange,
-        onComboType: onComboType,
-        selectCurrentOption: function selectCurrentOption() {
-          var _options$activeIndex$, _options$activeIndex;
-          var isSelected = selectOption(activeIndex);
-          if (rest.hasFooterAction && !isReactNative$4()) {
-            var _rest$triggererRef$cu2;
-            (_rest$triggererRef$cu2 = rest.triggererRef.current) === null || _rest$triggererRef$cu2 === void 0 ? void 0 : _rest$triggererRef$cu2.focus();
-          }
-          (_options$activeIndex$ = (_options$activeIndex = options[activeIndex]).onClickTrigger) === null || _options$activeIndex$ === void 0 ? void 0 : _options$activeIndex$.call(_options$activeIndex, isSelected);
-        }
-      });
-    }
-  };
-  return _objectSpread$6e({
-    isOpen: isOpen,
-    setIsOpen: setIsOpen,
-    close: close,
-    selectedIndices: selectedIndices,
-    setSelectedIndices: setSelectedIndices,
-    setControlledValueIndices: setControlledValueIndices,
-    onTriggerClick: onTriggerClick,
-    onTriggerKeydown: onTriggerKeydown,
-    onTriggerBlur: onTriggerBlur,
-    onOptionClick: onOptionClick,
-    activeIndex: activeIndex,
-    setActiveIndex: setActiveIndex,
-    shouldIgnoreBlur: shouldIgnoreBlur,
-    setShouldIgnoreBlur: setShouldIgnoreBlur,
-    isKeydownPressed: isKeydownPressed,
-    setIsKeydownPressed: setIsKeydownPressed,
-    changeCallbackTriggerer: changeCallbackTriggerer,
-    setChangeCallbackTriggerer: setChangeCallbackTriggerer,
-    isControlled: isControlled,
-    options: options,
-    value: makeInputValue(selectedIndices, options),
-    displayValue: makeInputDisplayValue(selectedIndices, options),
-    selectionType: selectionType
-  }, rest);
+var fontWeight = {
+  regular: 400,
+  bold: 700
 };
+({
+  onDesktop: {
+    fonts: {
+      family: _objectSpread$6d({}, fontFamily),
+      size: {
+        10: 9,
+        25: 10,
+        50: 11,
+        75: 12,
+        100: 14,
+        200: 16,
+        300: 18,
+        400: 20,
+        500: 22,
+        600: 24,
+        700: 28,
+        800: 32,
+        900: 36,
+        1000: 40,
+        1100: 48,
+        1200: 56,
+        1300: 64,
+        1600: 88
+      },
+      weight: _objectSpread$6d({}, fontWeight)
+    },
+    lineHeights: {
+      0: 0,
+      25: 14,
+      50: 16,
+      75: 18,
+      100: 20,
+      200: 24,
+      300: 24,
+      400: 28,
+      500: 32,
+      600: 40,
+      700: 40,
+      800: 48,
+      900: 56,
+      1000: 64,
+      1100: 72,
+      1500: 104
+    }
+    // letterSpacings: {},
+  },
+
+  onMobile: {
+    fonts: {
+      family: _objectSpread$6d({}, fontFamily),
+      size: {
+        10: 9,
+        25: 10,
+        50: 11,
+        75: 12,
+        100: 14,
+        200: 16,
+        300: 16,
+        400: 18,
+        500: 20,
+        600: 20,
+        700: 24,
+        800: 28,
+        900: 32,
+        1000: 32,
+        1100: 40,
+        1200: 48,
+        1300: 56,
+        1600: 64
+      },
+      weight: _objectSpread$6d({}, fontWeight)
+    },
+    lineHeights: {
+      0: 0,
+      25: 14,
+      50: 16,
+      75: 18,
+      100: 20,
+      200: 20,
+      300: 24,
+      400: 24,
+      500: 28,
+      600: 32,
+      700: 40,
+      800: 40,
+      900: 48,
+      1000: 56,
+      1100: 64,
+      1500: 72
+    }
+    // letterSpacings: {},
+  }
+});
 
 /**
- * is the role supposed to be `menu`
+ * Size tokens are currently not exposed for users (therefore not available in theme)
  */
-var isRoleMenu = function isRoleMenu(dropdownTriggerer) {
-  return isReactNative$4() || dropdownTriggerer !== 'SelectInput';
+var size = {
+  /** 0 px */
+  0: 0,
+  /** 1 px */
+  1: 1,
+  /** 2 px */
+  2: 2,
+  /** 3 px */
+  3: 3,
+  /** 4 px */
+  4: 4,
+  /** 5 px */
+  5: 5,
+  /** 6 px */
+  6: 6,
+  /** 8 px */
+  8: 8,
+  /** 10 px */
+  10: 10,
+  /** 12 px */
+  12: 12,
+  /** 16 px */
+  16: 16,
+  /** 18 px */
+  18: 18,
+  /** 20 px */
+  20: 20,
+  /** 24 px */
+  24: 24,
+  /** 28 px */
+  28: 28,
+  /** 32 px */
+  32: 32,
+  /** 36 px */
+  36: 36,
+  /** 40 px */
+  40: 40,
+  /** 44 px */
+  44: 44,
+  /** 48 px */
+  48: 48,
+  /** 60 px */
+  56: 56,
+  /** 100 px */
+  100: 100,
+  /** 120 px */
+  120: 120,
+  /** 140 px */
+  140: 140,
+  /** 160 px */
+  160: 160,
+  /** 200 px */
+  200: 200,
+  /** 240 px */
+  240: 240,
+  /** 300 px */
+  300: 300,
+  /** 360 px */
+  360: 360,
+  /** 400 px */
+  400: 400,
+  /** 584 px */
+  584: 584,
+  /** 640 px */
+  640: 640,
+  /** 760 px */
+  760: 760,
+  /** 800 px */
+  800: 800,
+  /** 1024 px */
+  1024: 1024,
+  /** 1136 px */
+  1136: 1136
+};
+
+var getBaseListBoxWrapperStyles = function getBaseListBoxWrapperStyles(props) {
+  return {
+    maxHeight: props.isInBottomSheet ? undefined : makeSize(size[300]),
+    padding: props.isInBottomSheet ? undefined : makeSize(props.theme.spacing[3])
+  };
 };
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 /**
- * We switch between accessibility of `dialog` with `listbox` and buttons as a child and just `listbox` when there are action items on footer
+ * Checks if `value` is classified as an `Array` object.
  *
- * Not announcing `dialog` helps not throw users off for simple dropdowns.
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
  *
- * and having `dialog` is neccessary when there are buttons on footer
+ * _.isArray([1, 2, 3]);
+ * // => true
  *
- * `menu` role is required for react native.
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
  */
-var getActionListContainerRole = function getActionListContainerRole(hasFooterAction, dropdownTriggerer) {
-  if (hasFooterAction) {
-    return 'dialog';
-  }
-  if (isRoleMenu(dropdownTriggerer)) {
-    return 'menu';
-  }
-  return 'listbox';
-};
-var getActionListSectionRole = function getActionListSectionRole() {
-  if (isReactNative$4()) {
-    return undefined;
-  }
-  return 'group';
-};
-var getSeparatorRole = function getSeparatorRole() {
-  if (isReactNative$4()) {
-    // Its not really announced so ignoring it in native.
-    return undefined;
-  }
-  return 'separator';
-};
-var getActionListItemWrapperRole = function getActionListItemWrapperRole(hasFooterAction, dropdownTriggerer) {
-  if (isRoleMenu(dropdownTriggerer)) {
-    return undefined;
-  }
-  if (hasFooterAction) {
-    return 'listbox';
-  }
-  return undefined;
-};
-var getActionListItemRole = function getActionListItemRole(dropdownTriggerer, href, selectionType) {
-  if (href) {
-    return 'link';
-  }
-  if (isRoleMenu(dropdownTriggerer)) {
-    if (selectionType === 'multiple') {
-      return 'menuitemcheckbox';
-    }
-    return 'menuitem';
-  }
-  return 'option';
-};
 
-var componentIds = {
-  ActionList: 'ActionList',
-  ActionListItem: 'ActionListItem',
-  ActionListItemAsset: 'ActionListItemAsset',
-  ActionListItemIcon: 'ActionListItemIcon',
-  ActionListItemText: 'ActionListItemText',
-  ActionListSection: 'ActionListSection'
-};
+var isArray$4 = Array.isArray;
 
-/* eslint-disable no-restricted-properties */
+var isArray_1 = isArray$4;
 
-/**
- * Gets the `componentId` prop of React component if it exists.
- */
-var getComponentId = function getComponentId(component) {
-  var _component$props, _component$props2, _component$props2$ori, _component$type;
-  if (! /*#__PURE__*/React__default.isValidElement(component)) return null;
+/** Detect free variable `global` from Node.js. */
 
-  // Storybook wraps MDX components in a wrapper component, so we need to get componentId from originalType
-  if (component !== null && component !== void 0 && (_component$props = component.props) !== null && _component$props !== void 0 && _component$props.mdxType && component !== null && component !== void 0 && (_component$props2 = component.props) !== null && _component$props2 !== void 0 && (_component$props2$ori = _component$props2.originalType) !== null && _component$props2$ori !== void 0 && _component$props2$ori.componentId) {
-    return component.props.originalType.componentId;
-  }
-  return (_component$type = component.type) === null || _component$type === void 0 ? void 0 : _component$type.componentId;
-};
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
 
-/**
- * Checks if the `component` matches the `componentId`
- */
-var isValidAllowedChildren = function isValidAllowedChildren(component, id) {
-  return getComponentId(component) === id;
-};
+var _freeGlobal = freeGlobal$1;
 
-function ownKeys$6e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$8 = freeGlobal || freeSelf || Function('return this')();
+
+var _root = root$8;
+
+var root$7 = _root;
+
+/** Built-in value references. */
+var Symbol$4 = root$7.Symbol;
+
+var _Symbol = Symbol$4;
+
+var Symbol$3 = _Symbol;
+
+/** Used for built-in method references. */
+var objectProto$8 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty$6 = objectProto$8.hasOwnProperty;
 
 /**
- * Returns if there is ActionListItem after ActionListSection
- * and an index of last ActionListSection
- *
- * It is used to decide if ActionListSection add divider at the end
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
  */
-var getActionListSectionPosition = function getActionListSectionPosition(children) {
-  // Creating an array of componentIds
-  var childComponentIdArray = React__default.Children.toArray(children).map(function (child) {
-    return getComponentId(child);
-  });
+var nativeObjectToString$1 = objectProto$8.toString;
 
-  // Reading the last `ActionListSection` component's index
-  var lastActionListSectionIndex = childComponentIdArray.lastIndexOf(componentIds.ActionListSection);
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$3 ? Symbol$3.toStringTag : undefined;
 
-  // Checking if there is any `ActionListItem` present after `ActionListSection`
-  var isActionListItemPresentAfterSection = childComponentIdArray.slice(lastActionListSectionIndex).includes(componentIds.ActionListItem);
-  return {
-    isActionListItemPresentAfterSection: isActionListItemPresentAfterSection,
-    lastActionListSectionIndex: lastActionListSectionIndex
-  };
-};
 /**
- * Loops over action list items and returns different properties from children like option values, header and footer child, etc
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
  */
-var getActionListProperties = function getActionListProperties(children) {
-  var sectionData = [];
-  var currentSection = null;
-  var actionListOptions = [];
-  var getActionListItemWithId = function getActionListItemWithId(child, hideDivider) {
-    if ( /*#__PURE__*/React__default.isValidElement(child) && !child.props.isDisabled) {
-      actionListOptions.push({
-        title: child.props.title,
-        value: child.props.value,
-        onClickTrigger: function onClickTrigger(value) {
-          var _child$props$onClick, _child$props, _child$props$isSelect;
-          var anchorLink = child.props.href;
-          (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, {
-            name: child.props.value,
-            value: (_child$props$isSelect = child.props.isSelected) !== null && _child$props$isSelect !== void 0 ? _child$props$isSelect : value
-          });
-          if (anchorLink && !isReactNative$4()) {
-            var _child$props$target;
-            var target = (_child$props$target = child.props.target) !== null && _child$props$target !== void 0 ? _child$props$target : '_self';
-            window.open(anchorLink, target);
-            if (window.top) {
-              window.top.open(anchorLink, target);
-            }
-          }
-        }
-      });
-      var currentIndex = actionListOptions.length - 1;
-      var foundSection = sectionData.find(function (v) {
-        return v.title === currentSection;
-      });
-      // push the item in the appropriate bucket
-      if (foundSection) {
-        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$6d(_objectSpread$6d({}, child.props), {}, {
-          _index: currentIndex
-        }));
-      } else {
-        // create a new bucket
-        sectionData.push({
-          title: currentSection,
-          hideDivider: hideDivider,
-          data: [_objectSpread$6d(_objectSpread$6d({}, child.props), {}, {
-            _index: currentIndex
-          })]
-        });
-      }
-      var clonedChild = /*#__PURE__*/React__default.cloneElement(child, {
-        // @ts-expect-error: TS doesn't understand the child's props
-        _index: currentIndex
-      });
-      return clonedChild;
-    }
-    return child;
-  };
-  var isActionListItemPresentAfterSection;
-  // eslint-disable-next-line one-var
-  var lastActionListSectionIndex;
-  if (isReactNative$4()) {
-    // We're reading this so that we can decide whether to show the divider or not.
-    // If ActionListSection is final item and no ActionListItem is present after that, we hide the divider
-    // On web, we do it using descendant styling
-    var _getActionListSection = getActionListSectionPosition(children);
-    isActionListItemPresentAfterSection = _getActionListSection.isActionListItemPresentAfterSection;
-    lastActionListSectionIndex = _getActionListSection.lastActionListSectionIndex;
-  }
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty$6.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
 
-  // Looping through ActionListItems to add index to them and get an options array for moving focus between items
-  var childrenWithId = React__default.Children.map(children, function (child, index) {
-    if ( /*#__PURE__*/React__default.isValidElement(child)) {
-      if (isValidAllowedChildren(child, componentIds.ActionListSection)) {
-        var shouldHideDivider = index === lastActionListSectionIndex && !isActionListItemPresentAfterSection;
-        return /*#__PURE__*/React__default.cloneElement(child, {
-          // @ts-expect-error: TS doesn't understand the child's props
-          children: React__default.Children.map(child.props.children, function (childInSection) {
-            currentSection = child.props.title;
-            if (isValidAllowedChildren(childInSection, componentIds.ActionListItem)) {
-              return getActionListItemWithId(childInSection, shouldHideDivider);
-            }
-            return childInSection;
-          }),
-          // On web, we handle it with descendant styling in css so no need of JS there
-          _hideDivider: isReactNative$4() ? shouldHideDivider : undefined
-        });
-      }
-      if (isValidAllowedChildren(child, componentIds.ActionListItem)) {
-        return getActionListItemWithId(child, true);
-      }
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
     }
-    return child;
-  });
-  return {
-    sectionData: sectionData,
-    childrenWithId: childrenWithId,
-    actionListOptions: actionListOptions
-  };
-};
-var validateActionListItemProps = function validateActionListItemProps(_ref) {
-  _ref.leading;
-    _ref.trailing;
-};
-var getNormalTextColor = function getNormalTextColor(isDisabled) {
-  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    isMuted = _ref2.isMuted;
-  if (isDisabled) {
-    return 'surface.text.placeholder.lowContrast';
-  }
-  if (isMuted) {
-    return 'surface.text.muted.lowContrast';
   }
-  return 'surface.text.normal.lowContrast';
-};
+  return result;
+}
 
-var breakpoints = {
-  base: 0,
-  xs: 320,
-  s: 480,
-  m: 768,
-  l: 1024,
-  xl: 1200
-};
+var _getRawTag = getRawTag$1;
 
-var fontFamily = {
-  text: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  code: 'monospace'
-};
+/** Used for built-in method references. */
 
-function ownKeys$6d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6d(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var objectProto$7 = Object.prototype;
 
 /**
- * For font size and line-heights we can’t say from xl to 2xl the value will necessary increase.
- * it might decrease or remain same because these are alias tokens and we need aliases for cross platform.
- * so for example xl on mobile can be 32px and on desktop xl can be 34px,
- * similarly 2xl on mobile can be 34px but on desktop doesn’t necessarily mean 2xl will be more than xl(34px) it can be 32 as well since visually they make better hierarchy.
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
  */
+var nativeObjectToString = objectProto$7.toString;
 
-var fontWeight = {
-  regular: 400,
-  bold: 700
-};
-({
-  onDesktop: {
-    fonts: {
-      family: _objectSpread$6c({}, fontFamily),
-      size: {
-        10: 9,
-        25: 10,
-        50: 11,
-        75: 12,
-        100: 14,
-        200: 16,
-        300: 18,
-        400: 20,
-        500: 22,
-        600: 24,
-        700: 28,
-        800: 32,
-        900: 36,
-        1000: 40,
-        1100: 48,
-        1200: 56,
-        1300: 64,
-        1600: 88
-      },
-      weight: _objectSpread$6c({}, fontWeight)
-    },
-    lineHeights: {
-      0: 0,
-      25: 14,
-      50: 16,
-      75: 18,
-      100: 20,
-      200: 24,
-      300: 24,
-      400: 28,
-      500: 32,
-      600: 40,
-      700: 40,
-      800: 48,
-      900: 56,
-      1000: 64,
-      1100: 72,
-      1500: 104
-    }
-    // letterSpacings: {},
-  },
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
 
-  onMobile: {
-    fonts: {
-      family: _objectSpread$6c({}, fontFamily),
-      size: {
-        10: 9,
-        25: 10,
-        50: 11,
-        75: 12,
-        100: 14,
-        200: 16,
-        300: 16,
-        400: 18,
-        500: 20,
-        600: 20,
-        700: 24,
-        800: 28,
-        900: 32,
-        1000: 32,
-        1100: 40,
-        1200: 48,
-        1300: 56,
-        1600: 64
-      },
-      weight: _objectSpread$6c({}, fontWeight)
-    },
-    lineHeights: {
-      0: 0,
-      25: 14,
-      50: 16,
-      75: 18,
-      100: 20,
-      200: 20,
-      300: 24,
-      400: 24,
-      500: 28,
-      600: 32,
-      700: 40,
-      800: 40,
-      900: 48,
-      1000: 56,
-      1100: 64,
-      1500: 72
-    }
-    // letterSpacings: {},
-  }
-});
+var _objectToString = objectToString$1;
+
+var Symbol$2 = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : undefined;
 
 /**
- * Size tokens are currently not exposed for users (therefore not available in theme)
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
  */
-var size = {
-  /** 0 px */
-  0: 0,
-  /** 1 px */
-  1: 1,
-  /** 2 px */
-  2: 2,
-  /** 3 px */
-  3: 3,
-  /** 4 px */
-  4: 4,
-  /** 5 px */
-  5: 5,
-  /** 6 px */
-  6: 6,
-  /** 8 px */
-  8: 8,
-  /** 10 px */
-  10: 10,
-  /** 12 px */
-  12: 12,
-  /** 16 px */
-  16: 16,
-  /** 18 px */
-  18: 18,
-  /** 20 px */
-  20: 20,
-  /** 24 px */
-  24: 24,
-  /** 28 px */
-  28: 28,
-  /** 32 px */
-  32: 32,
-  /** 36 px */
-  36: 36,
-  /** 40 px */
-  40: 40,
-  /** 44 px */
-  44: 44,
-  /** 48 px */
-  48: 48,
-  /** 60 px */
-  56: 56,
-  /** 100 px */
-  100: 100,
-  /** 120 px */
-  120: 120,
-  /** 140 px */
-  140: 140,
-  /** 160 px */
-  160: 160,
-  /** 200 px */
-  200: 200,
-  /** 240 px */
-  240: 240,
-  /** 300 px */
-  300: 300,
-  /** 360 px */
-  360: 360,
-  /** 400 px */
-  400: 400,
-  /** 584 px */
-  584: 584,
-  /** 640 px */
-  640: 640,
-  /** 760 px */
-  760: 760,
-  /** 800 px */
-  800: 800,
-  /** 1024 px */
-  1024: 1024,
-  /** 1136 px */
-  1136: 1136
-};
-
-var getBaseListBoxWrapperStyles = function getBaseListBoxWrapperStyles(props) {
-  return {
-    maxHeight: props.isInBottomSheet ? undefined : makeSize(size[300]),
-    padding: props.isInBottomSheet ? undefined : makeSize(props.theme.spacing[3])
-  };
-};
+function baseGetTag$6(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+var _baseGetTag = baseGetTag$6;
 
 /**
- * Checks if `value` is classified as an `Array` object.
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
  *
  * @static
  * @memberOf _
- * @since 0.1.0
+ * @since 4.0.0
  * @category Lang
  * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
  * @example
  *
- * _.isArray([1, 2, 3]);
+ * _.isObjectLike({});
  * // => true
  *
- * _.isArray(document.body.children);
- * // => false
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
  *
- * _.isArray('abc');
+ * _.isObjectLike(_.noop);
  * // => false
  *
- * _.isArray(_.noop);
+ * _.isObjectLike(null);
  * // => false
  */
 
-var isArray$4 = Array.isArray;
-
-var isArray_1 = isArray$4;
-
-/** Detect free variable `global` from Node.js. */
-
-var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-var _freeGlobal = freeGlobal$1;
-
-var freeGlobal = _freeGlobal;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root$8 = freeGlobal || freeSelf || Function('return this')();
+function isObjectLike$5(value) {
+  return value != null && typeof value == 'object';
+}
 
-var _root = root$8;
+var isObjectLike_1 = isObjectLike$5;
 
-var root$7 = _root;
+var baseGetTag$5 = _baseGetTag,
+    isObjectLike$4 = isObjectLike_1;
 
-/** Built-in value references. */
-var Symbol$4 = root$7.Symbol;
-
-var _Symbol = Symbol$4;
-
-var Symbol$3 = _Symbol;
-
-/** Used for built-in method references. */
-var objectProto$8 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$6 = objectProto$8.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString$1 = objectProto$8.toString;
-
-/** Built-in value references. */
-var symToStringTag$1 = Symbol$3 ? Symbol$3.toStringTag : undefined;
-
-/**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
-function getRawTag$1(value) {
-  var isOwn = hasOwnProperty$6.call(value, symToStringTag$1),
-      tag = value[symToStringTag$1];
-
-  try {
-    value[symToStringTag$1] = undefined;
-    var unmasked = true;
-  } catch (e) {}
-
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-
-var _getRawTag = getRawTag$1;
-
-/** Used for built-in method references. */
-
-var objectProto$7 = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto$7.toString;
-
-/**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
-function objectToString$1(value) {
-  return nativeObjectToString.call(value);
-}
-
-var _objectToString = objectToString$1;
-
-var Symbol$2 = _Symbol,
-    getRawTag = _getRawTag,
-    objectToString = _objectToString;
-
-/** `Object#toString` result references. */
-var nullTag = '[object Null]',
-    undefinedTag = '[object Undefined]';
-
-/** Built-in value references. */
-var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : undefined;
-
-/**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag$6(value) {
-  if (value == null) {
-    return value === undefined ? undefinedTag : nullTag;
-  }
-  return (symToStringTag && symToStringTag in Object(value))
-    ? getRawTag(value)
-    : objectToString(value);
-}
-
-var _baseGetTag = baseGetTag$6;
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-
-function isObjectLike$5(value) {
-  return value != null && typeof value == 'object';
-}
-
-var isObjectLike_1 = isObjectLike$5;
-
-var baseGetTag$5 = _baseGetTag,
-    isObjectLike$4 = isObjectLike_1;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
 
 /**
  * Checks if `value` is classified as a `Symbol` primitive or object.
@@ -2693,6 +2092,8 @@ function get(object, path, defaultValue) {
 
 var get_1 = get;
 
+var getIn = /*@__PURE__*/getDefaultExportFromCjs(get_1);
+
 /** Used for built-in method references. */
 
 var objectProto$3 = Object.prototype;
@@ -3008,46 +2409,50 @@ function stubFalse() {
 
 var stubFalse_1 = stubFalse;
 
-(function (module, exports) {
-var root = _root,
-    stubFalse = stubFalse_1;
-
-/** Detect free variable `exports`. */
-var freeExports = exports && !exports.nodeType && exports;
-
-/** Detect free variable `module`. */
-var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
-
-/** Detect the popular CommonJS extension `module.exports`. */
-var moduleExports = freeModule && freeModule.exports === freeExports;
-
-/** Built-in value references. */
-var Buffer = moduleExports ? root.Buffer : undefined;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;
-
-/**
- * Checks if `value` is a buffer.
- *
- * @static
- * @memberOf _
- * @since 4.3.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
- * @example
- *
- * _.isBuffer(new Buffer(2));
- * // => true
- *
- * _.isBuffer(new Uint8Array(2));
- * // => false
- */
-var isBuffer = nativeIsBuffer || stubFalse;
+isBuffer$1.exports;
 
-module.exports = isBuffer;
-}(isBuffer$1, isBuffer$1.exports));
+(function (module, exports) {
+	var root = _root,
+	    stubFalse = stubFalse_1;
+
+	/** Detect free variable `exports`. */
+	var freeExports = exports && !exports.nodeType && exports;
+
+	/** Detect free variable `module`. */
+	var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
+
+	/** Detect the popular CommonJS extension `module.exports`. */
+	var moduleExports = freeModule && freeModule.exports === freeExports;
+
+	/** Built-in value references. */
+	var Buffer = moduleExports ? root.Buffer : undefined;
+
+	/* Built-in method references for those with the same name as other `lodash` methods. */
+	var nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;
+
+	/**
+	 * Checks if `value` is a buffer.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.3.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
+	 * @example
+	 *
+	 * _.isBuffer(new Buffer(2));
+	 * // => true
+	 *
+	 * _.isBuffer(new Uint8Array(2));
+	 * // => false
+	 */
+	var isBuffer = nativeIsBuffer || stubFalse;
+
+	module.exports = isBuffer; 
+} (isBuffer$1, isBuffer$1.exports));
+
+var isBufferExports = isBuffer$1.exports;
 
 var baseGetTag$1 = _baseGetTag,
     isLength = isLength_1,
@@ -3128,42 +2533,46 @@ var _baseUnary = baseUnary$1;
 
 var _nodeUtil = {exports: {}};
 
+_nodeUtil.exports;
+
 (function (module, exports) {
-var freeGlobal = _freeGlobal;
+	var freeGlobal = _freeGlobal;
 
-/** Detect free variable `exports`. */
-var freeExports = exports && !exports.nodeType && exports;
+	/** Detect free variable `exports`. */
+	var freeExports = exports && !exports.nodeType && exports;
 
-/** Detect free variable `module`. */
-var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
+	/** Detect free variable `module`. */
+	var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
 
-/** Detect the popular CommonJS extension `module.exports`. */
-var moduleExports = freeModule && freeModule.exports === freeExports;
+	/** Detect the popular CommonJS extension `module.exports`. */
+	var moduleExports = freeModule && freeModule.exports === freeExports;
 
-/** Detect free variable `process` from Node.js. */
-var freeProcess = moduleExports && freeGlobal.process;
+	/** Detect free variable `process` from Node.js. */
+	var freeProcess = moduleExports && freeGlobal.process;
 
-/** Used to access faster Node.js helpers. */
-var nodeUtil = (function() {
-  try {
-    // Use `util.types` for Node.js 10+.
-    var types = freeModule && freeModule.require && freeModule.require('util').types;
+	/** Used to access faster Node.js helpers. */
+	var nodeUtil = (function() {
+	  try {
+	    // Use `util.types` for Node.js 10+.
+	    var types = freeModule && freeModule.require && freeModule.require('util').types;
 
-    if (types) {
-      return types;
-    }
+	    if (types) {
+	      return types;
+	    }
 
-    // Legacy `process.binding('util')` for Node.js < 10.
-    return freeProcess && freeProcess.binding && freeProcess.binding('util');
-  } catch (e) {}
-}());
+	    // Legacy `process.binding('util')` for Node.js < 10.
+	    return freeProcess && freeProcess.binding && freeProcess.binding('util');
+	  } catch (e) {}
+	}());
+
+	module.exports = nodeUtil; 
+} (_nodeUtil, _nodeUtil.exports));
 
-module.exports = nodeUtil;
-}(_nodeUtil, _nodeUtil.exports));
+var _nodeUtilExports = _nodeUtil.exports;
 
 var baseIsTypedArray = _baseIsTypedArray,
     baseUnary = _baseUnary,
-    nodeUtil = _nodeUtil.exports;
+    nodeUtil = _nodeUtilExports;
 
 /* Node.js helper references. */
 var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
@@ -3194,7 +2603,7 @@ var baseKeys = _baseKeys,
     isArguments = isArguments_1,
     isArray = isArray_1,
     isArrayLike = isArrayLike_1,
-    isBuffer = isBuffer$1.exports,
+    isBuffer = isBufferExports,
     isPrototype = _isPrototype,
     isTypedArray = isTypedArray_1;
 
@@ -3267,6 +2676,8 @@ function isEmpty(value) {
 
 var isEmpty_1 = isEmpty;
 
+var isEmpty$1 = /*@__PURE__*/getDefaultExportFromCjs(isEmpty_1);
+
 /**
  * A helper function that returns the exact value for that breakpoint on passing the prop and breakpoint
  *
@@ -3322,21 +2733,21 @@ var getResponsiveValue = function getResponsiveValue(value) {
     }
     return undefined;
   }
-  if (isEmpty_1(value)) {
+  if (isEmpty$1(value)) {
     return undefined;
   }
   return value[breakpoint];
 };
 
-var _excluded$50 = ["base"];
-function ownKeys$6c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$51 = ["base"];
+function ownKeys$6d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6d(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getSpacingValue = function getSpacingValue(spacingValue, theme, breakpoint) {
-  if (isEmpty_1(spacingValue)) {
+  if (isEmpty$1(spacingValue)) {
     return undefined;
   }
   var responsiveSpacingValue = getResponsiveValue(spacingValue, breakpoint);
-  if (isEmpty_1(responsiveSpacingValue)) {
+  if (isEmpty$1(responsiveSpacingValue)) {
     return undefined;
   }
   if (responsiveSpacingValue === 'auto') {
@@ -3348,8 +2759,8 @@ var getSpacingValue = function getSpacingValue(spacingValue, theme, breakpoint)
     }).join(' ');
   }
   if (typeof responsiveSpacingValue === 'string' && responsiveSpacingValue.startsWith('spacing.')) {
-    var spacingReturnValue = get_1(theme, responsiveSpacingValue);
-    return isEmpty_1(spacingReturnValue) ? makeSpace(spacingReturnValue) : undefined;
+    var spacingReturnValue = getIn(theme, responsiveSpacingValue);
+    return isEmpty$1(spacingReturnValue) ? makeSpace(spacingReturnValue) : undefined;
   }
 
   // pixel or with unit values
@@ -3357,25 +2768,25 @@ var getSpacingValue = function getSpacingValue(spacingValue, theme, breakpoint)
 };
 var getColorValue = function getColorValue(color, theme, breakpoint) {
   var responsiveBackgroundValue = getResponsiveValue(color, breakpoint);
-  var tokenValue = get_1(theme, "colors.".concat(responsiveBackgroundValue));
+  var tokenValue = getIn(theme, "colors.".concat(responsiveBackgroundValue));
   return tokenValue !== null && tokenValue !== void 0 ? tokenValue : responsiveBackgroundValue;
 };
 var getBorderRadiusValue = function getBorderRadiusValue(borderRadius, theme, breakpoint) {
   var responsiveBorderRadiusValue = getResponsiveValue(borderRadius, breakpoint);
-  return isEmpty_1(responsiveBorderRadiusValue) ? undefined : makeBorderSize(get_1(theme, "border.radius.".concat(responsiveBorderRadiusValue)));
+  return isEmpty$1(responsiveBorderRadiusValue) ? undefined : makeBorderSize(getIn(theme, "border.radius.".concat(responsiveBorderRadiusValue)));
 };
 var getBorderWidthValue = function getBorderWidthValue(borderWidth, theme, breakpoint) {
   var responsiveBorderWidthValue = getResponsiveValue(borderWidth, breakpoint);
-  return isEmpty_1(responsiveBorderWidthValue) ? undefined : makeBorderSize(get_1(theme, "border.width.".concat(responsiveBorderWidthValue)));
+  return isEmpty$1(responsiveBorderWidthValue) ? undefined : makeBorderSize(getIn(theme, "border.width.".concat(responsiveBorderWidthValue)));
 };
 var getElevationValue = function getElevationValue(elevation, theme, breakpoint) {
   var responsiveElevationValue = getResponsiveValue(elevation, breakpoint);
-  return isEmpty_1(responsiveElevationValue) ? undefined : get_1(theme, "elevation.".concat(responsiveElevationValue));
+  return isEmpty$1(responsiveElevationValue) ? undefined : getIn(theme, "elevation.".concat(responsiveElevationValue));
 };
 var getAllProps = function getAllProps(props, breakpoint) {
   var _props$paddingTop, _props$paddingBottom, _props$paddingRight, _props$paddingLeft, _props$marginBottom, _props$marginTop, _props$marginRight, _props$marginLeft;
   var hasBorder = props.borderBottom || props.borderTop || props.borderLeft || props.borderRight || props.borderBottomColor || props.borderTopColor || props.borderLeftColor || props.borderRightColor || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth || props.borderWidth || props.borderColor;
-  return _objectSpread$6b({
+  return _objectSpread$6c({
     display: getResponsiveValue(props.display, breakpoint),
     overflow: getResponsiveValue(props.overflow, breakpoint),
     overflowX: getResponsiveValue(props.overflowX, breakpoint),
@@ -3487,7 +2898,7 @@ var getAllMediaQueries = function getAllMediaQueries(props) {
     return {};
   }
   breakpoints.base;
-    var breakpointsWithoutBase = _objectWithoutProperties$1(breakpoints, _excluded$50);
+    var breakpointsWithoutBase = _objectWithoutProperties$1(breakpoints, _excluded$51);
   return Object.fromEntries(Object.entries(breakpointsWithoutBase).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       breakpointKey = _ref2[0],
@@ -3503,11 +2914,11 @@ var getAllMediaQueries = function getAllMediaQueries(props) {
   }));
 };
 var getBaseBoxStyles = function getBaseBoxStyles(props) {
-  return _objectSpread$6b(_objectSpread$6b({}, getAllProps(props)), getAllMediaQueries(props));
+  return _objectSpread$6c(_objectSpread$6c({}, getAllProps(props)), getAllMediaQueries(props));
 };
 
-function ownKeys$6b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
  * Reusable hook to be used in BladeProvider.native & BladeProvider.web file
  *
@@ -3526,7 +2937,7 @@ var useBladeProvider = function useBladeProvider(_ref) {
     matchedDeviceType = _useBreakpoint.matchedDeviceType;
   var onColorMode = "on".concat(toTitleCase(colorScheme));
   var onDeviceType = "on".concat(toTitleCase(matchedDeviceType));
-  var theme = _objectSpread$6a(_objectSpread$6a({}, themeTokens), {}, {
+  var theme = _objectSpread$6b(_objectSpread$6b({}, themeTokens), {}, {
     colors: themeTokens.colors[onColorMode],
     elevation: themeTokens.elevation[onColorMode],
     typography: themeTokens.typography[onDeviceType]
@@ -3629,9 +3040,9 @@ var BladeProvider = function BladeProvider(_ref) {
   });
 };
 
-var _excluded$4$ = ["theme", "colorScheme", "children", "className", "id"];
-function ownKeys$6a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$69(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6a(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$50 = ["theme", "colorScheme", "children", "className", "id"];
+function ownKeys$6b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getMemoDependency = function getMemoDependency(props) {
   // These are the props that change nothing in the getBaseBoxStyles calculations
   var theme = props.theme,
@@ -3639,7 +3050,7 @@ var getMemoDependency = function getMemoDependency(props) {
     props.children;
     props.className;
     props.id;
-    var rest = _objectWithoutProperties$1(props, _excluded$4$);
+    var rest = _objectWithoutProperties$1(props, _excluded$50);
   var dependencyPropString = '';
   try {
     // I know this looks illegal but Dan approves it - https://twitter.com/dan_abramov/status/1104414272753487872?s=20
@@ -3665,11 +3076,11 @@ var getMemoDependency = function getMemoDependency(props) {
 var useMemoizedStyles = function useMemoizedStyles(boxProps) {
   var _useTheme = useTheme(),
     colorScheme = _useTheme.colorScheme;
-  var boxPropsMemoDependency = getMemoDependency(_objectSpread$69(_objectSpread$69({}, boxProps), {}, {
+  var boxPropsMemoDependency = getMemoDependency(_objectSpread$6a(_objectSpread$6a({}, boxProps), {}, {
     colorScheme: colorScheme
   }));
   var boxPropsCSSObject = React__default.useMemo(function () {
-    return getBaseBoxStyles(_objectSpread$69(_objectSpread$69({}, boxProps), {}, {
+    return getBaseBoxStyles(_objectSpread$6a(_objectSpread$6a({}, boxProps), {}, {
       theme: boxProps.theme
     }));
   },
@@ -3771,18 +3182,18 @@ var MetaConstants = {
   Skeleton: 'skeleton'
 };
 
-function ownKeys$69(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$68(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$69(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$69(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$69(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6a(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var metaAttribute = function metaAttribute(_ref) {
   var name = _ref.name,
     testID = _ref.testID;
-  return _objectSpread$68(_objectSpread$68({}, name ? _defineProperty$1({}, "data-".concat(MetaConstants.Component), name) : {}), testID ? _defineProperty$1({}, "data-testid", testID) : {});
+  return _objectSpread$69(_objectSpread$69({}, name ? _defineProperty$1({}, "data-".concat(MetaConstants.Component), name) : {}), testID ? _defineProperty$1({}, "data-testid", testID) : {});
 };
 
-function ownKeys$68(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$67(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$68(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$68(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$69(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$68(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$69(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$69(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BaseBox = /*#__PURE__*/styled.div.attrs(function (props) {
-  return _objectSpread$67({}, metaAttribute({
+  return _objectSpread$68({}, metaAttribute({
     name: props['data-blade-component'] || MetaConstants.BaseBox,
     testID: props['data-testid'] || props.testID
   }));
@@ -3794,14 +3205,14 @@ var BaseBox = /*#__PURE__*/styled.div.attrs(function (props) {
   return cssObject;
 });
 
-function ownKeys$67(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$66(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$67(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$67(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$68(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$67(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$68(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$68(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledListBoxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledListBoxWrapperweb__StyledListBoxWrapper",
   componentId: "sc-1eo4pr6-0"
 })(function (props) {
   var _objectSpread2;
-  return _objectSpread$66((_objectSpread2 = {}, _defineProperty$1(_objectSpread2, "& [role=group]:last-child > [role=separator]:last-child", {
+  return _objectSpread$67((_objectSpread2 = {}, _defineProperty$1(_objectSpread2, "& [role=group]:last-child > [role=separator]:last-child", {
     display: 'none'
   }), _defineProperty$1(_objectSpread2, "overflowY", 'auto'), _objectSpread2), getBaseListBoxWrapperStyles({
     theme: props.theme,
@@ -3809,6 +3220,45 @@ var StyledListBoxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   }));
 });
 
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+var BottomSheetContext = /*#__PURE__*/React__default.createContext({
+  headerHeight: 0,
+  contentHeight: 0,
+  footerHeight: 0,
+  isHeaderFloating: false,
+  setContentHeight: function setContentHeight() {},
+  setHeaderHeight: function setHeaderHeight() {},
+  setFooterHeight: function setFooterHeight() {},
+  setHasBodyPadding: function setHasBodyPadding() {},
+  setIsHeaderEmpty: function setIsHeaderEmpty() {},
+  close: function close() {},
+  scrollRef: null,
+  bind: null,
+  isOpen: false,
+  positionY: 0,
+  isInBottomSheet: false,
+  defaultInitialFocusRef: {
+    current: null
+  }
+});
+var useBottomSheetContext = function useBottomSheetContext() {
+  var state = React__default.useContext(BottomSheetContext);
+  return state;
+};
+var BottomSheetAndDropdownGlueContext = /*#__PURE__*/React__default.createContext(null);
+
+/**
+ * This hook provides the bridge between Dropdown And BottomSheet
+ *
+ * You can hover over the return types to get jsdoc and more information about each
+ */
+var useBottomSheetAndDropdownGlue = function useBottomSheetAndDropdownGlue() {
+  var state = React__default.useContext(BottomSheetAndDropdownGlueContext);
+  return state;
+};
+
 /**
  * Do you want to define `displayName` or `componentId` on your component? Use this instead to make sure treeshaking doesn't break.
  *
@@ -3847,104 +3297,673 @@ var assignWithoutSideEffects = function assignWithoutSideEffects(component, sour
   return /*#__PURE__*/Object.assign(component, sourceObj);
 };
 
-function ownKeys$66(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$65(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$66(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$66(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var accessibilityValue = {
-  valueMax: 'aria-valuemax',
-  valueMin: 'aria-valuemin',
-  valueNow: 'aria-valuenow',
-  valueText: 'aria-valuetext'
-};
-var accessibilityState = {
-  selected: 'aria-selected',
-  disabled: 'aria-disabled',
-  expanded: 'aria-expanded',
-  busy: 'aria-busy',
-  checked: 'aria-checked'
-};
+function ownKeys$67(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$66(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$67(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$67(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var accessibilityValue = {
+  valueMax: 'aria-valuemax',
+  valueMin: 'aria-valuemin',
+  valueNow: 'aria-valuenow',
+  valueText: 'aria-valuetext'
+};
+var accessibilityState = {
+  selected: 'aria-selected',
+  disabled: 'aria-disabled',
+  expanded: 'aria-expanded',
+  busy: 'aria-busy',
+  checked: 'aria-checked'
+};
+
+// TODO:
+// accessibilityViewIsModal
+var accessibilityMap = _objectSpread$66(_objectSpread$66(_objectSpread$66({}, accessibilityState), accessibilityValue), {}, {
+  activeDescendant: 'aria-activedescendant',
+  atomic: 'aria-atomic',
+  autoComplete: 'aria-autocomplete',
+  colCount: 'aria-colcount',
+  colIndex: 'aria-colindex',
+  colSpan: 'aria-colspan',
+  controls: 'aria-controls',
+  describedBy: 'aria-describedby',
+  details: 'aria-details',
+  errorMessage: 'aria-errormessage',
+  flowTo: 'aria-flowto',
+  hasPopup: 'aria-haspopup',
+  hidden: 'aria-hidden',
+  invalid: 'aria-invalid',
+  keyShortcuts: 'aria-keyshortcuts',
+  label: 'aria-label',
+  labelledBy: 'aria-labelledby',
+  liveRegion: 'aria-live',
+  modal: 'aria-modal',
+  multiline: 'aria-multiline',
+  multiSelectable: 'aria-multiselectable',
+  orientation: 'aria-orientation',
+  owns: 'aria-owns',
+  placeholder: 'aria-placeholder',
+  posInSet: 'aria-posinset',
+  pressed: 'aria-pressed',
+  readOnly: 'aria-readonly',
+  required: 'aria-required',
+  role: 'role',
+  roleDescription: 'aria-roledescription',
+  rowCount: 'aria-rowcount',
+  rowIndex: 'aria-rowindex',
+  rowSpan: 'aria-rowspan',
+  setSize: 'aria-setsize',
+  sort: 'aria-sort',
+  current: 'aria-current',
+  dropEffect: 'aria-dropeffect',
+  grabbed: 'aria-grabbed',
+  level: 'aria-level',
+  relevant: 'aria-relevant'
+});
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var makeAccessible = function makeAccessible(props) {
+  var newProps = {};
+
+  // eslint-disable-next-line guard-for-in
+  for (var key in props) {
+    var propKey = key;
+    var propValue = props[propKey];
+    var accessibilityAttribute = accessibilityMap[propKey];
+    if (accessibilityAttribute) {
+      newProps[accessibilityAttribute] = propValue;
+    }
+  }
+  return newProps;
+};
+
+function ownKeys$66(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$65(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$66(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$66(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _ActionListBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var childrenWithId = _ref.childrenWithId,
+    actionListItemWrapperRole = _ref.actionListItemWrapperRole,
+    isMultiSelectable = _ref.isMultiSelectable;
+  var _useBottomSheetContex = useBottomSheetContext(),
+    isInBottomSheet = _useBottomSheetContex.isInBottomSheet;
+  return /*#__PURE__*/jsx(StyledListBoxWrapper, _objectSpread$65(_objectSpread$65({
+    isInBottomSheet: isInBottomSheet,
+    ref: ref
+  }, makeAccessible({
+    role: actionListItemWrapperRole,
+    multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined
+  })), {}, {
+    children: childrenWithId
+  }));
+});
+var ActionListBox = /*#__PURE__*/assignWithoutSideEffects(_ActionListBox, {
+  displayName: 'ActionListBox'
+});
+
+/*
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * This software or document includes material copied from or derived from
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html.
+ * Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang)
+ */
+
+var componentIds = {
+  DropdownOverlay: 'DropdownOverlay',
+  Dropdown: 'Dropdown',
+  triggers: {
+    SelectInput: 'SelectInput',
+    DropdownButton: 'DropdownButton',
+    DropdownLink: 'DropdownLink'
+  }
+};
+
+// Save a list of named combobox actions, for future readability
+var SelectActions = {
+  Close: 'Close',
+  CloseSelect: 'CloseSelect',
+  First: 'First',
+  Last: 'Last',
+  Next: 'Next',
+  Open: 'Open',
+  PageDown: 'PageDown',
+  PageUp: 'PageUp',
+  Previous: 'Previous',
+  Select: 'Select',
+  Type: 'Type'
+};
+
+/**
+ * Filter an array of options against an input string
+ * returns an array of options that begin with the filter string, case-independent
+ *
+ */
+function filterOptions() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var filter = arguments.length > 1 ? arguments[1] : undefined;
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return options.filter(function (option) {
+    var matches = option.toLowerCase().startsWith(filter.toLowerCase());
+    return matches && !exclude.includes(option);
+  });
+}
+
+/**
+ * Map a keypress to action
+ */
+function getActionFromKey(e, isOpen) {
+  if (!e) {
+    return undefined;
+  }
+  var altKey = e.altKey,
+    ctrlKey = e.ctrlKey,
+    metaKey = e.metaKey;
+  var key = '';
+  if ('key' in e) {
+    key = e.key;
+  }
+  var openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' ']; // all keys that will do the default open action
+  if (!key) return undefined;
+  // handle opening when closed
+  if (!isOpen && key && openKeys.includes(key)) {
+    return SelectActions.Open;
+  }
+
+  // home and end move the selected option when open or closed
+  if (key === 'Home') {
+    return SelectActions.First;
+  }
+  if (key === 'End') {
+    return SelectActions.Last;
+  }
+
+  // handle typing characters when open or closed
+  if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) {
+    return SelectActions.Type;
+  }
+
+  // handle keys when open
+  if (isOpen) {
+    if (key === 'ArrowUp' && altKey) {
+      return SelectActions.CloseSelect;
+    } else if (key === 'ArrowDown' && !altKey) {
+      return SelectActions.Next;
+    } else if (key === 'ArrowUp') {
+      return SelectActions.Previous;
+    } else if (key === 'PageUp') {
+      return SelectActions.PageUp;
+    } else if (key === 'PageDown') {
+      return SelectActions.PageDown;
+    } else if (key === 'Escape') {
+      return SelectActions.Close;
+    } else if (key === 'Enter' || key === ' ') {
+      return SelectActions.CloseSelect;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Return the index of an option from an array of options, based on a search string
+ *
+ * if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
+ **/
+function getIndexByLetter(options, filter) {
+  var startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var orderedOptions = [].concat(_toConsumableArray$1(options.slice(startIndex)), _toConsumableArray$1(options.slice(0, startIndex)));
+  var firstMatch = filterOptions(orderedOptions, filter)[0];
+  var allSameLetter = function allSameLetter(array) {
+    return array.every(function (letter) {
+      return letter === array[0];
+    });
+  };
+
+  // first check if there is an exact match for the typed string
+  if (firstMatch) {
+    return options.indexOf(firstMatch);
+  }
+
+  // if the same letter is being repeated, cycle through first-letter matches
+  else if (allSameLetter(filter.split(''))) {
+    var matches = filterOptions(orderedOptions, filter[0]);
+    return options.indexOf(matches[0]);
+  }
+
+  // if no matches, return -1
+  else {
+    return -1;
+  }
+}
+
+/**
+ * This functions makes sure the optionsIndex is not going out of possible options
+ */
+function getUpdatedIndex(currentIndex, maxIndex, action) {
+  // On PageUP or PageDown, we jump focus by 10 items or to the first or last element
+  // Details: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html#:~:text=PageUp,to%20last%20option).
+  var pageSize = 10;
+  switch (action) {
+    case SelectActions.First:
+      return 0;
+    case SelectActions.Last:
+      return maxIndex;
+    case SelectActions.Previous:
+      return Math.max(0, currentIndex - 1);
+    case SelectActions.Next:
+      return Math.min(maxIndex, currentIndex + 1);
+    case SelectActions.PageUp:
+      return Math.max(0, currentIndex - pageSize);
+    case SelectActions.PageDown:
+      return Math.min(maxIndex, currentIndex + pageSize);
+    default:
+      return currentIndex;
+  }
+}
+
+/**
+ * Checks if the given HTML element is visible on screen
+ */
+function isElementVisibleOnScreen(element) {
+  var bounding = element.getBoundingClientRect();
+  return bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
+
+/**
+ * Checks if the dropdown is scrollable
+ */
+function isScrollable(element) {
+  return element && element.clientHeight < element.scrollHeight;
+}
+/**
+ * Performs the action when actionType is passed
+ *
+ * This function handles all the keydown actions.
+ */
+var performAction = function performAction(action, payload, actions) {
+  var event = payload.event;
+  switch (action) {
+    case SelectActions.Last:
+    // @ts-expect-error: intentional fallthrough, ignoring the warning
+    case SelectActions.First:
+      actions.setIsOpen(true);
+    // intentional fallthrough
+    case SelectActions.Next:
+    case SelectActions.Previous:
+    case SelectActions.PageUp:
+    case SelectActions.PageDown:
+      event.preventDefault();
+      actions.onOptionChange(action);
+      return true;
+    case SelectActions.CloseSelect:
+      event.preventDefault();
+      actions.selectCurrentOption();
+      return true;
+    case SelectActions.Close:
+      event.preventDefault();
+      actions.close();
+      return true;
+    case SelectActions.Type:
+      actions.onComboType(event.key, action);
+      return true;
+    case SelectActions.Open:
+      event.preventDefault();
+      actions.setIsOpen(true);
+      return true;
+  }
+  return false;
+};
+
+/**
+ * When options list is large, it can have a scrollbar.
+ *
+ * This function ensures the active option is always in the viewport
+ */
+var ensureScrollVisiblity = function ensureScrollVisiblity(newActiveIndex, containerElement, options) {
+  // ensure the new option is in view
+  if (containerElement) {
+    if (isScrollable(containerElement)) {
+      var optionEl = containerElement.querySelectorAll('[role="option"]');
+      // Making sure its the same element as the one from options state
+      if (newActiveIndex >= 0 && optionEl[newActiveIndex].dataset.value === options[newActiveIndex]) {
+        var activeElement = optionEl[newActiveIndex];
+        var bodyRect = containerElement.getBoundingClientRect().top;
+        var elementRect = activeElement.getBoundingClientRect().top;
+        var elementPosition = elementRect - bodyRect;
+        var offsetPosition = elementPosition;
+        containerElement.scrollTo({
+          top: offsetPosition
+        });
+        if (!isElementVisibleOnScreen(optionEl[newActiveIndex])) {
+          activeElement.scrollIntoView({
+            behavior: 'smooth'
+          });
+        }
+      }
+    }
+  }
+};
+
+/**
+ * value that is set in the actual form input
+ */
+var makeInputValue = function makeInputValue(selectedIndices, options) {
+  if (options.length === 0) {
+    return '';
+  }
+  return selectedIndices.map(function (selectedIndex) {
+    var _options$selectedInde;
+    return (_options$selectedInde = options[selectedIndex]) === null || _options$selectedInde === void 0 ? void 0 : _options$selectedInde.value;
+  }).join(', ');
+};
+
+/**
+ * Value that is displayed inside the select field
+ */
+var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, options) {
+  // When no item is selected or no item is present
+  if (options.length === 0 || selectedIndices.length === 0) {
+    return '';
+  }
+
+  // When one item is selected, we display that item's title in input
+  if (selectedIndices.length === 1) {
+    return options[selectedIndices[0]].title;
+  }
+
+  // When more than one item is selected, we display the count of items
+  return "".concat(selectedIndices.length, " items selected");
+};
+
+var _excluded$4$ = ["isOpen", "setIsOpen", "close", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType", "changeCallbackTriggerer", "setChangeCallbackTriggerer", "isControlled", "setControlledValueIndices"];
+function ownKeys$65(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$64(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$65(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$65(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+var noop$1 = function noop() {};
+var DropdownContext = /*#__PURE__*/React__default.createContext({
+  isOpen: false,
+  setIsOpen: noop$1,
+  close: noop$1,
+  selectedIndices: [],
+  setSelectedIndices: noop$1,
+  controlledValueIndices: [],
+  setControlledValueIndices: noop$1,
+  options: [],
+  setOptions: noop$1,
+  activeIndex: -1,
+  setActiveIndex: noop$1,
+  shouldIgnoreBlur: false,
+  setShouldIgnoreBlur: noop$1,
+  shouldIgnoreBlurAnimation: false,
+  setShouldIgnoreBlurAnimation: noop$1,
+  hasFooterAction: false,
+  setHasFooterAction: noop$1,
+  hasLabelOnLeft: false,
+  setHasLabelOnLeft: noop$1,
+  isKeydownPressed: false,
+  setIsKeydownPressed: noop$1,
+  changeCallbackTriggerer: 0,
+  setChangeCallbackTriggerer: noop$1,
+  isControlled: false,
+  setIsControlled: noop$1,
+  dropdownBaseId: '',
+  actionListItemRef: {
+    current: null
+  },
+  triggererRef: {
+    current: null
+  },
+  triggererWrapperRef: {
+    current: null
+  }
+});
+var searchTimeout;
+var searchString = '';
+/**
+ * Handles almost all the functionality of dropdown.
+ *
+ * Returns the values from DropdownContext along with some helper functions and event handlers
+ *
+ */
+var useDropdown = function useDropdown() {
+  var _React$useContext = React__default.useContext(DropdownContext),
+    isOpen = _React$useContext.isOpen,
+    setIsOpen = _React$useContext.setIsOpen,
+    close = _React$useContext.close,
+    selectedIndices = _React$useContext.selectedIndices,
+    setSelectedIndices = _React$useContext.setSelectedIndices,
+    activeIndex = _React$useContext.activeIndex,
+    setActiveIndex = _React$useContext.setActiveIndex,
+    shouldIgnoreBlur = _React$useContext.shouldIgnoreBlur,
+    setShouldIgnoreBlur = _React$useContext.setShouldIgnoreBlur,
+    isKeydownPressed = _React$useContext.isKeydownPressed,
+    setIsKeydownPressed = _React$useContext.setIsKeydownPressed,
+    options = _React$useContext.options,
+    selectionType = _React$useContext.selectionType,
+    changeCallbackTriggerer = _React$useContext.changeCallbackTriggerer,
+    setChangeCallbackTriggerer = _React$useContext.setChangeCallbackTriggerer,
+    isControlled = _React$useContext.isControlled,
+    setControlledValueIndices = _React$useContext.setControlledValueIndices,
+    rest = _objectWithoutProperties$1(_React$useContext, _excluded$4$);
+  var bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();
+  var setIndices = function setIndices(indices) {
+    if (isControlled) {
+      setControlledValueIndices(indices);
+    } else {
+      setSelectedIndices(indices);
+    }
+  };
+  /**
+   * Marks the given index as selected.
+   *
+   * In single select, it also closes the menu.
+   * In multiselect, it keeps the menu open for more selections
+   */
+  var selectOption = function selectOption(index) {
+    var properties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      closeOnSelection: true
+    };
+    var isSelected = false;
+    if (index < 0 || index > options.length - 1) {
+      return isSelected;
+    }
+    if (selectionType === 'multiple') {
+      if (selectedIndices.includes(index)) {
+        // remove existing item
+        var existingItemIndex = selectedIndices.indexOf(index);
+        setIndices([].concat(_toConsumableArray$1(selectedIndices.slice(0, existingItemIndex)), _toConsumableArray$1(selectedIndices.slice(existingItemIndex + 1))));
+        isSelected = false;
+      } else {
+        setIndices([].concat(_toConsumableArray$1(selectedIndices), [index]));
+        isSelected = true;
+      }
+    } else {
+      setIndices([index]);
+      isSelected = true;
+    }
+
+    // Triggers `onChange` on SelectInput
+    setChangeCallbackTriggerer(changeCallbackTriggerer + 1);
+    if (activeIndex !== index) {
+      setActiveIndex(index);
+    }
+    if (properties !== null && properties !== void 0 && properties.closeOnSelection && selectionType !== 'multiple') {
+      close();
+    }
+    return isSelected;
+  };
+
+  /**
+   * Click listener for combobox (or any triggerer of the dropdown)
+   */
+  var onTriggerClick = function onTriggerClick() {
+    if (isOpen) {
+      close();
+    } else {
+      setIsOpen(true);
+    }
+  };
+
+  /**
+   * Blur handler on combobox. Also handles the selection logic when user moves focus
+   */
+  var onTriggerBlur = function onTriggerBlur(_ref) {
+    var name = _ref.name,
+      value = _ref.value,
+      onBlurCallback = _ref.onBlurCallback;
+    if (rest.hasFooterAction) {
+      // When Footer has action buttons, we ignore the blur (by setting shouldIgnoreBlur to true in onTriggerKeyDown)
+      // And we remove the active item (by setting it to -1) so that we can shift focus on action buttons
+      setActiveIndex(-1);
+    }
+    if (bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet) {
+      setShouldIgnoreBlur(true);
+      return;
+    }
+    if (shouldIgnoreBlur) {
+      setShouldIgnoreBlur(false);
+      return;
+    }
+    onBlurCallback === null || onBlurCallback === void 0 ? void 0 : onBlurCallback({
+      name: name,
+      value: value
+    });
+    if (isOpen) {
+      if (selectionType !== 'multiple') {
+        selectOption(activeIndex);
+      }
+      if (!(bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet)) {
+        close();
+      }
+    }
+  };
+
+  /**
+   * Function that we call when we want to move focus from one option to other
+   */
+  var onOptionChange = function onOptionChange(actionType, index) {
+    var max = options.length - 1;
+    var newIndex = index !== null && index !== void 0 ? index : activeIndex;
+    setActiveIndex(getUpdatedIndex(newIndex, max, actionType));
+    var optionValues = options.map(function (option) {
+      return option.value;
+    });
+    ensureScrollVisiblity(newIndex, rest.actionListItemRef.current, optionValues);
+  };
 
-// TODO:
-// accessibilityViewIsModal
-var accessibilityMap = _objectSpread$65(_objectSpread$65(_objectSpread$65({}, accessibilityState), accessibilityValue), {}, {
-  activeDescendant: 'aria-activedescendant',
-  atomic: 'aria-atomic',
-  autoComplete: 'aria-autocomplete',
-  colCount: 'aria-colcount',
-  colIndex: 'aria-colindex',
-  colSpan: 'aria-colspan',
-  controls: 'aria-controls',
-  describedBy: 'aria-describedby',
-  details: 'aria-details',
-  errorMessage: 'aria-errormessage',
-  flowTo: 'aria-flowto',
-  hasPopup: 'aria-haspopup',
-  hidden: 'aria-hidden',
-  invalid: 'aria-invalid',
-  keyShortcuts: 'aria-keyshortcuts',
-  label: 'aria-label',
-  labelledBy: 'aria-labelledby',
-  liveRegion: 'aria-live',
-  modal: 'aria-modal',
-  multiline: 'aria-multiline',
-  multiSelectable: 'aria-multiselectable',
-  orientation: 'aria-orientation',
-  owns: 'aria-owns',
-  placeholder: 'aria-placeholder',
-  posInSet: 'aria-posinset',
-  pressed: 'aria-pressed',
-  readOnly: 'aria-readonly',
-  required: 'aria-required',
-  role: 'role',
-  roleDescription: 'aria-roledescription',
-  rowCount: 'aria-rowcount',
-  rowIndex: 'aria-rowindex',
-  rowSpan: 'aria-rowspan',
-  setSize: 'aria-setsize',
-  sort: 'aria-sort',
-  current: 'aria-current',
-  dropEffect: 'aria-dropeffect',
-  grabbed: 'aria-grabbed',
-  level: 'aria-level',
-  relevant: 'aria-relevant'
-});
+  /**
+   * Click handler when user clicks on any particular option.
+   *
+   * It
+   * - changes the option focus
+   * - selects that option
+   * - moves focus to combobox
+   */
+  var onOptionClick = function onOptionClick(e, index) {
+    var actionType = getActionFromKey(e, isOpen);
+    if (typeof actionType === 'number') {
+      onOptionChange(actionType, index);
+    }
+    selectOption(index);
+    if (!isReactNative$4()) {
+      var _rest$triggererRef$cu;
+      (_rest$triggererRef$cu = rest.triggererRef.current) === null || _rest$triggererRef$cu === void 0 ? void 0 : _rest$triggererRef$cu.focus();
+    }
+  };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-var makeAccessible = function makeAccessible(props) {
-  var newProps = {};
+  /**
+   * Function we call to handle the typeahead.
+   *
+   * It takes a letter, stores that letter in searchString (and clears it after timeout) to maintain a word
+   *
+   * Then searches for that word in options and moves focus there.
+   */
+  var onComboType = function onComboType(letter, actionType) {
+    // open the listbox if it is closed
+    setIsOpen(true);
+    if (typeof searchTimeout === 'number') {
+      window.clearTimeout(searchTimeout);
+    }
+    searchTimeout = window.setTimeout(function () {
+      searchString = '';
+    }, 500);
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    searchString = searchString + letter;
+    var optionTitles = options.map(function (option) {
+      return option.title;
+    });
+    var searchIndex = getIndexByLetter(optionTitles, searchString, activeIndex + 1);
 
-  // eslint-disable-next-line guard-for-in
-  for (var key in props) {
-    var propKey = key;
-    var propValue = props[propKey];
-    var accessibilityAttribute = accessibilityMap[propKey];
-    if (accessibilityAttribute) {
-      newProps[accessibilityAttribute] = propValue;
+    // if a match was found, go to it
+    if (searchIndex >= 0) {
+      onOptionChange(actionType, searchIndex);
     }
-  }
-  return newProps;
-};
+    // if no matches, clear the timeout and search string
+    else {
+      window.clearTimeout(searchTimeout);
+      searchString = '';
+    }
+  };
 
-function ownKeys$65(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$64(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$65(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$65(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var _ActionListBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var childrenWithId = _ref.childrenWithId,
-    actionListItemWrapperRole = _ref.actionListItemWrapperRole,
-    isMultiSelectable = _ref.isMultiSelectable;
-  var _useBottomSheetContex = useBottomSheetContext(),
-    isInBottomSheet = _useBottomSheetContex.isInBottomSheet;
-  return /*#__PURE__*/jsx(StyledListBoxWrapper, _objectSpread$64(_objectSpread$64({
-    isInBottomSheet: isInBottomSheet,
-    ref: ref
-  }, makeAccessible({
-    role: actionListItemWrapperRole,
-    multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined
-  })), {}, {
-    children: childrenWithId
-  }));
-});
-var ActionListBox = /*#__PURE__*/assignWithoutSideEffects(_ActionListBox, {
-  displayName: 'ActionListBox'
-});
+  /**
+   * Keydown event of combobox. Handles most of the keyboard accessibility of dropdown
+   */
+  var onTriggerKeydown = function onTriggerKeydown(e) {
+    if (e.event.key === 'Tab' && rest.hasFooterAction) {
+      // When footer has Action Buttons, we ignore the blur event so that we can move focus to action item than bluring out of dropdown
+      setShouldIgnoreBlur(true);
+    }
+
+    // disable closing the select on blur events if we are using a bottomsheet
+    if (bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet) {
+      setShouldIgnoreBlur(true);
+    }
+    if (!isKeydownPressed && ![' ', 'Enter', 'Escape', 'Meta'].includes(e.event.key)) {
+      // When keydown is not already pressed and its not Enter, Space, Command, or Escape key (those are generic keys and we only want to handle arrow keys or home buttons etc)
+      setIsKeydownPressed(true);
+    }
+    var actionType = getActionFromKey(e.event, isOpen);
+    if (actionType) {
+      performAction(actionType, e, {
+        setIsOpen: setIsOpen,
+        close: close,
+        onOptionChange: onOptionChange,
+        onComboType: onComboType,
+        selectCurrentOption: function selectCurrentOption() {
+          var _options$activeIndex$, _options$activeIndex;
+          var isSelected = selectOption(activeIndex);
+          if (rest.hasFooterAction && !isReactNative$4()) {
+            var _rest$triggererRef$cu2;
+            (_rest$triggererRef$cu2 = rest.triggererRef.current) === null || _rest$triggererRef$cu2 === void 0 ? void 0 : _rest$triggererRef$cu2.focus();
+          }
+          (_options$activeIndex$ = (_options$activeIndex = options[activeIndex]).onClickTrigger) === null || _options$activeIndex$ === void 0 ? void 0 : _options$activeIndex$.call(_options$activeIndex, isSelected);
+        }
+      });
+    }
+  };
+  return _objectSpread$64({
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    close: close,
+    selectedIndices: selectedIndices,
+    setSelectedIndices: setSelectedIndices,
+    setControlledValueIndices: setControlledValueIndices,
+    onTriggerClick: onTriggerClick,
+    onTriggerKeydown: onTriggerKeydown,
+    onTriggerBlur: onTriggerBlur,
+    onOptionClick: onOptionClick,
+    activeIndex: activeIndex,
+    setActiveIndex: setActiveIndex,
+    shouldIgnoreBlur: shouldIgnoreBlur,
+    setShouldIgnoreBlur: setShouldIgnoreBlur,
+    isKeydownPressed: isKeydownPressed,
+    setIsKeydownPressed: setIsKeydownPressed,
+    changeCallbackTriggerer: changeCallbackTriggerer,
+    setChangeCallbackTriggerer: setChangeCallbackTriggerer,
+    isControlled: isControlled,
+    options: options,
+    value: makeInputValue(selectedIndices, options),
+    displayValue: makeInputDisplayValue(selectedIndices, options),
+    selectionType: selectionType
+  }, rest);
+};
 
 function ownKeys$64(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$63(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$64(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$64(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -4055,8 +4074,8 @@ var _ActionList = function _ActionList(_ref) {
   });
 };
 var ActionList = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionList), {
-  displayName: componentIds.ActionList,
-  componentId: componentIds.ActionList
+  displayName: componentIds$1.ActionList,
+  componentId: componentIds$1.ActionList
 });
 
 var getBaseActionListItemStyles = function getBaseActionListItemStyles(props) {
@@ -4261,7 +4280,8 @@ var _Box = function _Box(props, ref) {
   return /*#__PURE__*/jsx(BaseBox
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _objectSpread$61(_objectSpread$61({
-    ref: ref
+    ref: ref,
+    id: props.id
   }, metaAttribute({
     name: MetaConstants.Box,
     testID: props.testID
@@ -4557,7 +4577,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
     lineHeight = _ref$lineHeight === void 0 ? 100 : _ref$lineHeight,
     textAlign = _ref.textAlign,
     theme = _ref.theme;
-  var textColor = get_1(theme.colors, color);
+  var textColor = getIn(theme.colors, color);
   var themeFontFamily = theme.typography.fonts.family[fontFamily];
   var themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);
   var themeFontWeight = theme.typography.fonts.weight[fontWeight];
@@ -5177,7 +5197,10 @@ function isUndefined(value) {
 
 var isUndefined_1 = isUndefined;
 
+var isUndefined$1 = /*@__PURE__*/getDefaultExportFromCjs(isUndefined_1);
+
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 var CheckboxGroupContext = /*#__PURE__*/React__default.createContext({});
 var CheckboxGroupProvider = CheckboxGroupContext.Provider;
 var useCheckboxGroupContext = function useCheckboxGroupContext() {
@@ -5268,8 +5291,8 @@ var getCheckboxIconWrapperStyles = function getCheckboxIconWrapperStyles(_ref) {
   var checked = isChecked ? 'checked' : 'unchecked';
   var background = checkboxIconColors.variants[variant].background[checked];
   var border = checkboxIconColors.variants[variant].border[checked];
-  var backgroundColor = background === 'transparent' ? background : get_1(theme, background);
-  var borderColor = border === 'transparent' ? border : get_1(theme, border);
+  var backgroundColor = background === 'transparent' ? background : getIn(theme, background);
+  var borderColor = border === 'transparent' ? border : getIn(theme, border);
   return {
     position: 'relative',
     display: 'flex',
@@ -5549,8 +5572,8 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
     size = _ref3.size;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var defaultIconColor = get_1(theme, 'colors.brand.gray.200.lowContrast');
-  var disabledIconColor = get_1(theme, 'colors.brand.gray.500.lowContrast');
+  var defaultIconColor = getIn(theme, 'colors.brand.gray.200.lowContrast');
+  var disabledIconColor = getIn(theme, 'colors.brand.gray.500.lowContrast');
   var iconColor = isDisabled ? disabledIconColor : defaultIconColor;
   return /*#__PURE__*/jsxs(CheckboxIconWrapper, _objectSpread$5L(_objectSpread$5L({
     size: size,
@@ -5626,6 +5649,7 @@ var useId = function useId(prefix, idProp) {
 };
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 /**
  * hook to generate unique ids for a form element
@@ -5816,7 +5840,7 @@ function useIconProps(_ref) {
     theme = _useTheme.theme;
   var height = makeSize(iconSize$1[size]);
   var width = makeSize(iconSize$1[size]);
-  var iconColor = color === 'currentColor' ? 'currentColor' : get_1(theme.colors, color, '');
+  var iconColor = color === 'currentColor' ? 'currentColor' : getIn(theme.colors, color, '');
   return {
     height: height,
     width: width,
@@ -14545,6 +14569,7 @@ var BulkPayoutsIcon = function BulkPayoutsIcon(_ref) {
 };
 
 /* eslint-disable react/display-name */
+
 var HintText = function HintText(_ref) {
   var Icon = _ref.icon,
     children = _ref.children,
@@ -14847,6 +14872,7 @@ var SelectorSupportText = function SelectorSupportText(_ref) {
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 function assignRef(ref, value) {
   if (ref == null) return;
   if (typeof ref === 'function') {
@@ -14910,8 +14936,8 @@ var getHoverStyles = function getHoverStyles(_ref) {
   var backgroundColor = hoverTokens["default"].background[checked];
   var borderColor = (_hoverTokens$default$ = hoverTokens["default"].border) === null || _hoverTokens$default$ === void 0 ? void 0 : _hoverTokens$default$[checked];
   return {
-    borderColor: borderColor ? get_1(theme, borderColor) : undefined,
-    backgroundColor: get_1(theme, backgroundColor),
+    borderColor: borderColor ? getIn(theme, borderColor) : undefined,
+    backgroundColor: getIn(theme, backgroundColor),
     transitionTimingFunction: theme.motion.easing.standard.effective,
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick']))
   };
@@ -14993,6 +15019,13 @@ var _Checkbox = function _Checkbox(_ref, ref) {
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$D);
   var groupProps = useCheckboxGroupContext();
+
+  // ban certain props in checkbox while inside group
+  !isUndefined$1(validationState);
+  !isUndefined$1(name);
+  !isUndefined$1(defaultChecked);
+  !isUndefined$1(isChecked);
+  !isUndefined$1(onChange);
   var _validationState = validationState !== null && validationState !== void 0 ? validationState : groupProps === null || groupProps === void 0 ? void 0 : groupProps.validationState;
   var _hasError = _validationState === 'error';
   var _isDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : groupProps === null || groupProps === void 0 ? void 0 : groupProps.isDisabled;
@@ -15356,7 +15389,7 @@ var _ActionListSection = function _ActionListSection(_ref) {
   }));
 };
 var ActionListSection = /*#__PURE__*/assignWithoutSideEffects(_ActionListSection, {
-  componentId: componentIds.ActionListSection
+  componentId: componentIds$1.ActionListSection
 });
 var _ActionListItemIcon = function _ActionListItemIcon(_ref2) {
   var icon = _ref2.icon;
@@ -15372,7 +15405,7 @@ var _ActionListItemIcon = function _ActionListItemIcon(_ref2) {
   });
 };
 var ActionListItemIcon = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemIcon, {
-  componentId: componentIds.ActionListItemIcon
+  componentId: componentIds$1.ActionListItemIcon
 });
 var _ActionListItemText = function _ActionListItemText(_ref3) {
   var children = _ref3.children;
@@ -15387,7 +15420,7 @@ var _ActionListItemText = function _ActionListItemText(_ref3) {
   });
 };
 var ActionListItemText = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemText, {
-  componentId: componentIds.ActionListItemText
+  componentId: componentIds$1.ActionListItemText
 });
 var ActionListCheckboxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ActionListItem__ActionListCheckboxWrapper",
@@ -15593,8 +15626,8 @@ var _ActionListItem = function _ActionListItem(props) {
   });
 };
 var ActionListItem = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionListItem), {
-  componentId: componentIds.ActionListItem,
-  displayName: componentIds.ActionListItem
+  componentId: componentIds$1.ActionListItem,
+  displayName: componentIds$1.ActionListItem
 });
 
 var _ActionListItemAsset = function _ActionListItemAsset(props) {
@@ -15606,7 +15639,7 @@ var _ActionListItemAsset = function _ActionListItemAsset(props) {
   });
 };
 var ActionListItemAsset = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemAsset, {
-  componentId: componentIds.ActionListItemAsset
+  componentId: componentIds$1.ActionListItemAsset
 });
 
 var MAX_WIDTH$2 = size[584];
@@ -15719,6 +15752,7 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
 });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/display-name */
 /**
  * Component for making clickable icons with transparent background.
  * For other cases please use `Button` component with `icon` prop.
@@ -15806,8 +15840,8 @@ var StyledBaseButton = /*#__PURE__*/styled.button.withConfig({
   return _objectSpread$1l(_objectSpread$1l({}, getBaseButtonStyles(props)), {}, {
     display: 'inline-flex',
     transitionProperty: 'background-color, border-color, box-shadow',
-    transitionTimingFunction: get_1(props.theme.motion, props.motionEasing),
-    transitionDuration: castWebType(makeMotionTime(get_1(props.theme.motion, props.motionDuration))),
+    transitionTimingFunction: getIn(props.theme.motion, props.motionEasing),
+    transitionDuration: castWebType(makeMotionTime(getIn(props.theme.motion, props.motionDuration))),
     position: 'relative',
     '&:hover': {
       backgroundColor: props.hoverBackgroundColor,
@@ -15825,8 +15859,8 @@ var StyledBaseButton = /*#__PURE__*/styled.button.withConfig({
     },
     '*': {
       transitionProperty: 'color, fill',
-      transitionDuration: castWebType(makeMotionTime(get_1(props.theme.motion, props.motionDuration))),
-      transitionTimingFunction: get_1(props.theme.motion, props.motionEasing)
+      transitionDuration: castWebType(makeMotionTime(getIn(props.theme.motion, props.motionDuration))),
+      transitionTimingFunction: getIn(props.theme.motion, props.motionEasing)
     }
   }, styledPropsCSSObject);
 });
@@ -16069,7 +16103,7 @@ var SpinningBox = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "zswieh-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(["padding:1px;width:max-content;display:inline-flex;animation:", " ", " ", " infinite;"], rotate, makeMotionTime(get_1(theme.motion, motion.duration)), get_1(theme.motion, motion.easing));
+  return css(["padding:1px;width:max-content;display:inline-flex;animation:", " ", " ", " infinite;"], rotate, makeMotionTime(getIn(theme.motion, motion.duration)), getIn(theme.motion, motion.easing));
 });
 
 var _excluded$B = ["label", "labelPosition", "accessibilityLabel", "contrast", "intent", "size", "testID"];
@@ -16080,11 +16114,11 @@ var getColor = function getColor(_ref) {
     intent = _ref.intent,
     theme = _ref.theme;
   if (intent) {
-    return get_1(theme.colors, "feedback.".concat(intent, ".action.icon.primary.disabled.").concat(contrast, "Contrast"));
+    return getIn(theme.colors, "feedback.".concat(intent, ".action.icon.primary.disabled.").concat(contrast, "Contrast"));
   } else if (contrast == 'low') {
-    return get_1(theme.colors, 'brand.gray.700.lowContrast');
+    return getIn(theme.colors, 'brand.gray.700.lowContrast');
   } else {
-    return get_1(theme.colors, 'brand.gray.700.highContrast');
+    return getIn(theme.colors, 'brand.gray.700.highContrast');
   }
 };
 var BaseSpinner = function BaseSpinner(_ref2) {
@@ -16139,7 +16173,7 @@ var BaseSpinner = function BaseSpinner(_ref2) {
 };
 
 var getStringFromReactText = function getStringFromReactText(childReactText) {
-  if (isEmpty_1(childReactText)) {
+  if (isEmpty$1(childReactText)) {
     return undefined;
   }
   if (Array.isArray(childReactText)) {
@@ -16210,77 +16244,77 @@ var getProps$1 = function getProps(_ref2) {
     buttonPaddingLeft: isIconOnly ? makeSpace(theme.spacing[buttonIconOnlyPadding[size].left]) : makeSpace(theme.spacing[buttonPadding[size].left]),
     buttonPaddingRight: isIconOnly ? makeSpace(theme.spacing[buttonIconOnlyPadding[size].right]) : makeSpace(theme.spacing[buttonPadding[size].right]),
     text: size === 'xsmall' ? children === null || children === void 0 ? void 0 : children.trim().toUpperCase() : children === null || children === void 0 ? void 0 : children.trim(),
-    defaultBackgroundColor: get_1(theme.colors, getColorToken$1({
+    defaultBackgroundColor: getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'default'
     })),
-    defaultBorderColor: get_1(theme.colors, getColorToken$1({
+    defaultBorderColor: getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'default'
     })),
-    hoverBackgroundColor: get_1(theme.colors, getColorToken$1({
+    hoverBackgroundColor: getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'hover'
     })),
-    hoverBorderColor: get_1(theme.colors, getColorToken$1({
+    hoverBorderColor: getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'hover'
     })),
-    activeBackgroundColor: get_1(theme.colors, getColorToken$1({
+    activeBackgroundColor: getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'active'
     })),
-    activeBorderColor: get_1(theme.colors, getColorToken$1({
+    activeBorderColor: getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'active'
     })),
-    focusBackgroundColor: get_1(theme.colors, getColorToken$1({
+    focusBackgroundColor: getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'focus'
     })),
-    focusBorderColor: get_1(theme.colors, getColorToken$1({
+    focusBorderColor: getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'focus'
     })),
-    focusRingColor: get_1(theme.colors, 'brand.primary.400'),
+    focusRingColor: getIn(theme.colors, 'brand.primary.400'),
     borderWidth: makeBorderSize(theme.border.width.thin),
     borderRadius: makeBorderSize(theme.border.radius.small),
     motionDuration: 'duration.xquick',
     motionEasing: 'easing.standard.effective'
   };
   if (isDisabled) {
-    var disabledBackgroundColor = get_1(theme.colors, getColorToken$1({
+    var disabledBackgroundColor = getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
       contrast: contrast,
       intent: intent,
       state: 'disabled'
     }));
-    var disabledBorderColor = get_1(theme.colors, getColorToken$1({
+    var disabledBorderColor = getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
       contrast: contrast,
@@ -16540,8 +16574,8 @@ var StyledLink$1 = /*#__PURE__*/styled.button.withConfig({
     display: 'inline-block',
     borderRadius: makeBorderSize(props.theme.border.radius.small),
     transitionProperty: 'box-shadow',
-    transitionTimingFunction: get_1(props.theme.motion, props.motionEasing),
-    transitionDuration: castWebType(makeMotionTime(get_1(props.theme.motion, props.motionDuration))),
+    transitionTimingFunction: getIn(props.theme.motion, props.motionEasing),
+    transitionDuration: castWebType(makeMotionTime(getIn(props.theme.motion, props.motionDuration))),
     '.content-container': {
       width: 'max-content',
       borderRadius: makeBorderSize(props.theme.border.radius.small)
@@ -16553,8 +16587,8 @@ var StyledLink$1 = /*#__PURE__*/styled.button.withConfig({
     },
     '*': {
       transitionProperty: 'color, fill',
-      transitionTimingFunction: get_1(props.theme.motion, props.motionEasing),
-      transitionDuration: castWebType(makeMotionTime(get_1(props.theme.motion, props.motionDuration)))
+      transitionTimingFunction: getIn(props.theme.motion, props.motionEasing),
+      transitionDuration: castWebType(makeMotionTime(getIn(props.theme.motion, props.motionDuration)))
     }
   }, styledPropsCSSObject);
 });
@@ -16662,7 +16696,7 @@ var getProps = function getProps(_ref2) {
       isDisabled: isDisabled,
       isVisited: isVisited
     }),
-    focusRingColor: get_1(theme.colors, 'brand.primary.400'),
+    focusRingColor: getIn(theme.colors, 'brand.primary.400'),
     motionDuration: 'duration.2xquick',
     motionEasing: 'easing.standard.effective',
     cursor: isButton && isDisabled ? 'not-allowed' : 'pointer',
@@ -17043,7 +17077,7 @@ var getStyledBadgeStyles = function getStyledBadgeStyles(_ref) {
   var theme = _ref.theme,
     backgroundColor = _ref.backgroundColor;
   return {
-    backgroundColor: get_1(theme.colors, backgroundColor),
+    backgroundColor: getIn(theme.colors, backgroundColor),
     borderRadius: makeBorderSize(theme.border.radius.max),
     display: 'flex',
     flexWrap: 'nowrap'
@@ -17624,7 +17658,7 @@ var getStyledCounterStyles = function getStyledCounterStyles(_ref) {
     platform = _ref.platform,
     backgroundColor = _ref.backgroundColor;
   return {
-    backgroundColor: get_1(theme.colors, backgroundColor),
+    backgroundColor: getIn(theme.colors, backgroundColor),
     borderRadius: makeBorderSize(theme.border.radius.max),
     maxWidth: makeSize(maxWidth[platform]),
     display: 'flex',
@@ -18294,6 +18328,8 @@ function debounce$1(func, wait, options) {
 
 var debounce_1 = debounce$1;
 
+var debounce$2 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
+
 var debounce = debounce_1,
     isObject = isObject_1;
 
@@ -18364,6 +18400,8 @@ function throttle(func, wait, options) {
 
 var throttle_1 = throttle;
 
+var throttle$1 = /*@__PURE__*/getDefaultExportFromCjs(throttle_1);
+
 var CarouselContext = /*#__PURE__*/React__default.createContext(null);
 var useCarouselContext = function useCarouselContext() {
   var state = React__default.useContext(CarouselContext);
@@ -18704,7 +18742,7 @@ var CarouselContainer = /*#__PURE__*/styled(BaseBox).withConfig({
     scrollOverlayColor = _ref2.scrollOverlayColor,
     isScrollAtStart = _ref2.isScrollAtStart,
     isScrollAtEnd = _ref2.isScrollAtEnd;
-  var gradientStop1 = get_1(theme.colors, scrollOverlayColor);
+  var gradientStop1 = getIn(theme.colors, scrollOverlayColor);
   var gradientStop2 = 'hsla(0, 0%, 100%, 0)';
   var overlayCommonStyle = {
     content: "''",
@@ -18758,7 +18796,8 @@ var CarouselBody = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref)
     isScrollAtStart = _ref3.isScrollAtStart,
     isScrollAtEnd = _ref3.isScrollAtEnd,
     carouselItemAlignment = _ref3.carouselItemAlignment,
-    accessibilityLabel = _ref3.accessibilityLabel;
+    accessibilityLabel = _ref3.accessibilityLabel,
+    startEndMargin = _ref3.startEndMargin;
   return /*#__PURE__*/jsx(CarouselContainer, _objectSpread$10(_objectSpread$10({
     tabIndex: 0,
     ref: ref,
@@ -18777,12 +18816,26 @@ var CarouselBody = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref)
     label: accessibilityLabel
   })), {}, {
     children: React__default.Children.map(children, function (child, index) {
-      return /*#__PURE__*/React__default.cloneElement(child, {
+      var shouldHaveStartSpacing = shouldAddStartEndSpacing && index === 0;
+      var shouldHaveEndSpacing = shouldAddStartEndSpacing && index === totalSlides - 1;
+      var carouselItemNode = /*#__PURE__*/React__default.cloneElement(child, {
         index: index,
         id: "".concat(idPrefix, "-carousel-item-").concat(index),
-        shouldHaveStartSpacing: shouldAddStartEndSpacing && index === 0,
-        shouldHaveEndSpacing: shouldAddStartEndSpacing && index === totalSlides - 1
+        shouldHaveStartSpacing: shouldHaveStartSpacing,
+        shouldHaveEndSpacing: shouldHaveEndSpacing
       });
+
+      // Safari doesn't include the margin in the bounding box calculation
+      // Thus have to add an additional box to the end of the carousel to ensure we can scroll past the last item
+      // https://stackoverflow.com/questions/75509058/safari-does-not-include-margins-to-the-scroll-width
+      if (shouldHaveEndSpacing) {
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [carouselItemNode, /*#__PURE__*/jsx(BaseBox, {
+            minWidth: "".concat(startEndMargin, "px")
+          })]
+        });
+      }
+      return carouselItemNode;
     })
   }));
 });
@@ -18930,7 +18983,7 @@ var Carousel = function Carousel(_ref4) {
     if (isMobile) return;
     var carouselContainer = containerRef.current;
     if (!carouselContainer) return;
-    var handleScroll = throttle_1(function () {
+    var handleScroll = throttle$1(function () {
       var scrollWidth = (carouselContainer === null || carouselContainer === void 0 ? void 0 : carouselContainer.scrollWidth) - carouselContainer.offsetWidth;
       setScrollStart((carouselContainer === null || carouselContainer === void 0 ? void 0 : carouselContainer.scrollLeft) === 0);
       setScrollEnd((carouselContainer === null || carouselContainer === void 0 ? void 0 : carouselContainer.scrollLeft) === scrollWidth);
@@ -18947,7 +19000,7 @@ var Carousel = function Carousel(_ref4) {
     if (!isMobile) return;
     var carouselContainer = containerRef.current;
     if (!carouselContainer) return;
-    var handleScroll = debounce_1(function () {
+    var handleScroll = debounce$2(function () {
       // carousel bounding box
       var carouselBB = carouselContainer.getBoundingClientRect();
       // By default we check the far left side of the screen
@@ -19055,6 +19108,7 @@ var Carousel = function Carousel(_ref4) {
           onClick: goToPreviousSlide
         }) : null, /*#__PURE__*/jsx(CarouselBody, {
           idPrefix: id,
+          startEndMargin: startEndMargin,
           totalSlides: totalNumberOfSlides,
           shouldAddStartEndSpacing: shouldAddStartEndSpacing,
           scrollOverlayColor: scrollOverlayColor,
@@ -19103,7 +19157,6 @@ var StyledCarouselItem = /*#__PURE__*/styled(BaseBox).withConfig({
     isResponsive = _ref.isResponsive,
     shouldAddStartEndSpacing = _ref.shouldAddStartEndSpacing,
     shouldHaveStartSpacing = _ref.shouldHaveStartSpacing,
-    shouldHaveEndSpacing = _ref.shouldHaveEndSpacing,
     theme = _ref.theme;
   var _useBreakpoint = useBreakpoint({
       breakpoints: theme.breakpoints
@@ -19121,8 +19174,7 @@ var StyledCarouselItem = /*#__PURE__*/styled(BaseBox).withConfig({
   }, isResponsive && {
     width: '100%',
     scrollSnapAlign: isMobile || !shouldAddStartEndSpacing ? 'start' : 'center',
-    marginLeft: shouldHaveStartSpacing ? '100%' : 0,
-    marginRight: shouldHaveEndSpacing ? '100%' : 0
+    marginLeft: shouldHaveStartSpacing ? '100%' : 0
   });
 });
 var CarouselItem = function CarouselItem(_ref2) {
@@ -19329,10 +19381,10 @@ var getAnimatedChipStyles = function getAnimatedChipStyles(_ref) {
     isDisabled = _ref.isDisabled,
     borderColor = _ref.borderColor;
   return {
-    backgroundColor: isDisabled ? 'transparent' : get_1(theme.colors, 'surface.background.level2.lowContrast'),
+    backgroundColor: isDisabled ? 'transparent' : getIn(theme.colors, 'surface.background.level2.lowContrast'),
     borderRadius: makeBorderSize(theme.border.radius.max),
-    borderColor: get_1(theme.colors, borderColor),
-    borderWidth: get_1(theme, 'border.width.thin'),
+    borderColor: getIn(theme.colors, borderColor),
+    borderWidth: getIn(theme, 'border.width.thin'),
     display: 'flex',
     flexWrap: 'nowrap',
     flexDirection: 'row',
@@ -19350,8 +19402,8 @@ var AnimatedChip = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "AnimatedChipweb__AnimatedChip",
   componentId: "sc-1xiynj1-0"
 })(function (props) {
-  var easing = get_1(props.theme, chipMotionTokens.easing);
-  var duration = castWebType(makeMotionTime(get_1(props.theme, chipMotionTokens.duration)));
+  var easing = getIn(props.theme, chipMotionTokens.easing);
+  var duration = castWebType(makeMotionTime(getIn(props.theme, chipMotionTokens.duration)));
   return _objectSpread$_(_objectSpread$_({}, getAnimatedChipStyles(props)), {}, {
     width: 'fit-content',
     transform: "scale(".concat(props.isPressed ? '0.92' : '1', ")"),
@@ -19371,14 +19423,14 @@ var StyledChipWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     isChecked = _ref.isChecked,
     isDisabled = _ref.isDisabled,
     intent = _ref.intent;
-  var easing = get_1(theme, chipMotionTokens.easing);
-  var duration = castWebType(makeMotionTime(get_1(theme, chipMotionTokens.duration)));
+  var easing = getIn(theme, chipMotionTokens.easing);
+  var duration = castWebType(makeMotionTime(getIn(theme, chipMotionTokens.duration)));
   return _objectSpread$Z({
     display: 'flex',
-    borderColor: isChecked ? get_1(theme.colors, borderColor) : 'transparent'
+    borderColor: isChecked ? getIn(theme.colors, borderColor) : 'transparent'
   }, !isDisabled && {
     '&:hover': {
-      backgroundColor: get_1(theme.colors, chipColorTokens.background[isChecked && intent ? intent : 'unchecked'].hover),
+      backgroundColor: getIn(theme.colors, chipColorTokens.background[isChecked && intent ? intent : 'unchecked'].hover),
       transitionTimingFunction: easing,
       transitionDuration: duration
     }
@@ -19486,7 +19538,7 @@ var _Chip = function _Chip(_ref, ref) {
     }),
     matchedDeviceType = _useBreakpoint.matchedDeviceType;
   var groupProps = useChipGroupContext();
-  !isEmpty_1(groupProps);
+  !isEmpty$1(groupProps);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isPressed = _React$useState2[0],
@@ -19665,7 +19717,7 @@ var useChipGroup = function useChipGroup(_ref) {
       value: checkedValues,
       isChecked: function isChecked(value) {
         if (selectionType === 'single') {
-          if (isUndefined_1(value) || isUndefined_1(checkedValues)) return false;
+          if (isUndefined$1(value) || isUndefined$1(checkedValues)) return false;
           return checkedValues[0] === value;
         }
         return checkedValues.includes(value);
@@ -19909,10 +19961,10 @@ var _Dropdown = function _Dropdown(_ref) {
   }, [onDismiss]);
   React__default.Children.map(children, function (child) {
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
-      if (isValidAllowedChildren(child, componentIds$1.triggers.SelectInput)) {
+      if (isValidAllowedChildren(child, componentIds.triggers.SelectInput)) {
         dropdownTriggerer.current = 'SelectInput';
       }
-      if (isValidAllowedChildren(child, componentIds$1.triggers.DropdownButton)) {
+      if (isValidAllowedChildren(child, componentIds.triggers.DropdownButton)) {
         dropdownTriggerer.current = 'DropdownButton';
       }
     }
@@ -19982,7 +20034,7 @@ var _Dropdown = function _Dropdown(_ref) {
   });
 };
 var Dropdown = /*#__PURE__*/assignWithoutSideEffects(_Dropdown, {
-  componentId: componentIds$1.Dropdown
+  componentId: componentIds.Dropdown
 });
 
 var StyledDropdownOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
@@ -20100,7 +20152,7 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
   });
 };
 var DropdownOverlay = /*#__PURE__*/assignWithoutSideEffects(_DropdownOverlay, {
-  componentId: componentIds$1.DropdownOverlay
+  componentId: componentIds.DropdownOverlay
 });
 
 var _excluded$n = ["children", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "onBlur", "onKeyDown", "size", "type", "variant", "accessibilityLabel", "testID"];
@@ -20195,7 +20247,7 @@ var _DropdownButton = function _DropdownButton(_ref) {
   );
 };
 var DropdownButton = /*#__PURE__*/assignWithoutSideEffects(_DropdownButton, {
-  componentId: componentIds$1.triggers.DropdownButton
+  componentId: componentIds.triggers.DropdownButton
 });
 
 var _excluded$m = ["children", "icon", "iconPosition", "onClick", "onBlur", "onKeyDown", "isDisabled", "href", "target", "rel", "accessibilityLabel", "size", "testID", "hitSlop", "htmlTitle"];
@@ -20286,7 +20338,7 @@ var _DropdownLink = function _DropdownLink(_ref) {
   );
 };
 var DropdownLink = /*#__PURE__*/assignWithoutSideEffects(_DropdownLink, {
-  componentId: componentIds$1.triggers.DropdownLink
+  componentId: componentIds.triggers.DropdownLink
 });
 
 function ownKeys$S(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -21694,7 +21746,7 @@ var _TextInput = function _TextInput(_ref2, ref) {
         icon: CloseIcon,
         onClick: function onClick() {
           var _textInputRef$current;
-          if (isEmpty_1(value) && textInputRef.current) {
+          if (isEmpty$1(value) && textInputRef.current) {
             // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function
             if (isReactNative$2(textInputRef.current)) {
               textInputRef.current.clear();
@@ -21948,7 +22000,7 @@ var _TextArea = function _TextArea(_ref, ref) {
           accessibilityLabel: "Clear textarea content",
           onClick: function onClick() {
             var _inputRef$current;
-            if (isEmpty_1(value) && inputRef.current) {
+            if (isEmpty$1(value) && inputRef.current) {
               // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function
               if (isReactNative$1(inputRef.current)) {
                 inputRef.current.clear();
@@ -22121,13 +22173,13 @@ var OTPInput = function OTPInput(_ref) {
     */
     otpValue.forEach(function (otp, index) {
       // Set inputType as 'password' only when a value is entered when isMasked is set
-      if (!isEmpty_1(otp) && !inputType[index] && isMasked) {
+      if (!isEmpty$1(otp) && !inputType[index] && isMasked) {
         var newInputType = Array.from(inputType);
         newInputType[index] = 'password';
         setInputType(newInputType);
       }
       // Cleanup the inputType array whenever the value is empty but inputType[index] is set
-      if (isEmpty_1(otp) && inputType[index]) {
+      if (isEmpty$1(otp) && inputType[index]) {
         var _newInputType = Array.from(inputType);
         _newInputType[index] = undefined;
         setInputType(_newInputType);
@@ -22425,7 +22477,7 @@ var _SelectInput = function _SelectInput(props, ref) {
   var selectValues = function selectValues(valuesToSelect) {
     if (options.length > 0) {
       // we use empty `''` for clearing the input
-      if (isEmpty_1(valuesToSelect)) {
+      if (isEmpty$1(valuesToSelect)) {
         setSelectedIndices([]);
       } else if (typeof valuesToSelect === 'string') {
         // single select control
@@ -22591,7 +22643,7 @@ var _SelectInput = function _SelectInput(props, ref) {
  */
 
 var SelectInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SelectInput), {
-  componentId: componentIds$1.triggers.SelectInput
+  componentId: componentIds.triggers.SelectInput
 });
 
 var _excluded$c = ["accessibilityLabel", "children", "size", "intent", "testID"];
@@ -22717,7 +22769,7 @@ var StyledOrderedList = /*#__PURE__*/styled(OrderedList).withConfig({
   var marginTop = _ref.marginTop,
     theme = _ref.theme;
   return {
-    marginTop: marginTop ? makeSpace(get_1(theme, marginTop)) : undefined
+    marginTop: marginTop ? makeSpace(getIn(theme, marginTop)) : undefined
   };
 });
 var StyledUnorderedList = /*#__PURE__*/styled(UnorderedList).withConfig({
@@ -22727,7 +22779,7 @@ var StyledUnorderedList = /*#__PURE__*/styled(UnorderedList).withConfig({
   var marginTop = _ref2.marginTop,
     theme = _ref2.theme;
   return {
-    marginTop: marginTop ? makeSpace(get_1(theme, marginTop)) : undefined
+    marginTop: marginTop ? makeSpace(getIn(theme, marginTop)) : undefined
   };
 });
 
@@ -23089,7 +23141,7 @@ var StyledListItem = /*#__PURE__*/styled(ListItemElement).withConfig({
     variant = _ref.variant,
     hasIcon = _ref.hasIcon;
   return {
-    marginLeft: level ? get_1(theme, listItemMarginLeft["".concat(variant).concat(variant === 'unordered' && hasIcon ? 'WithIcon' : '')][level]) : 0
+    marginLeft: level ? getIn(theme, listItemMarginLeft["".concat(variant).concat(variant === 'unordered' && hasIcon ? 'WithIcon' : '')][level]) : 0
   };
 });
 var ListItemContentChildren = function ListItemContentChildren(_ref2) {
@@ -23182,7 +23234,7 @@ var _ListItem = function _ListItem(_ref3) {
         alignSelf: "flex-start",
         alignItems: "center",
         borderRadius: variant === 'ordered-filled' ? 'max' : undefined,
-        backgroundColor: variant === 'ordered-filled' ? get_1(theme, 'colors.brand.gray.a100.lowContrast') : undefined,
+        backgroundColor: variant === 'ordered-filled' ? getIn(theme, 'colors.brand.gray.a100.lowContrast') : undefined,
         children: /*#__PURE__*/jsx(Text, {
           variant: "body",
           type: "subtle",
@@ -23667,6 +23719,8 @@ function clamp$1(number, lower, upper) {
 
 var clamp_1 = clamp$1;
 
+var clamp$2 = /*@__PURE__*/getDefaultExportFromCjs(clamp_1);
+
 var indeterminateAnimation = {
   scaleXInitial: 1,
   scaleXMid: 5,
@@ -23697,7 +23751,7 @@ var BoxWithIndeterminateAnimation = /*#__PURE__*/styled(BaseBox).withConfig({
 })(function (_ref2) {
   var theme = _ref2.theme,
     indeterminateMotionDuration = _ref2.indeterminateMotionDuration;
-  var duration = castWebType(makeMotionTime(get_1(theme.motion, indeterminateMotionDuration)));
+  var duration = castWebType(makeMotionTime(getIn(theme.motion, indeterminateMotionDuration)));
   var easing = 'linear'; // TODO: Add this in motion tokens
 
   return css(["animation:", " ", " ", " infinite;position:absolute;width:", ";height:100%;"], slideAndScaleKeyframes, duration, easing, indeterminateAnimation.fillWidth);
@@ -23720,9 +23774,9 @@ var IndeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithIndeterminateAnimat
     pulseMotionDelay = _ref4.pulseMotionDelay,
     motionEasing = _ref4.motionEasing,
     variant = _ref4.variant;
-  var duration = castWebType(makeMotionTime(get_1(theme.motion, pulseMotionDuration)));
-  var easing = castWebType(get_1(theme.motion, motionEasing));
-  var delay = castWebType(makeMotionTime(get_1(theme.motion, pulseMotionDelay)));
+  var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
+  var easing = castWebType(getIn(theme.motion, motionEasing));
+  var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
   return variant === 'progress' ? getPulseAnimationStyles({
     duration: duration,
     easing: easing,
@@ -23738,8 +23792,8 @@ var BoxWithProgressFillTransition = /*#__PURE__*/styled(BaseBox).withConfig({
     motionEasing = _ref5.motionEasing;
   return {
     transitionProperty: 'width',
-    transitionDuration: castWebType(makeMotionTime(get_1(theme.motion, fillMotionDuration))),
-    transitionTimingFunction: castWebType(get_1(theme.motion, motionEasing))
+    transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, fillMotionDuration))),
+    transitionTimingFunction: castWebType(getIn(theme.motion, motionEasing))
   };
 });
 var DeterminateFilledContainer = /*#__PURE__*/styled(BoxWithProgressFillTransition).withConfig({
@@ -23763,9 +23817,9 @@ var DeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithProgressFillTransitio
     pulseMotionDelay = _ref7.pulseMotionDelay,
     motionEasing = _ref7.motionEasing,
     variant = _ref7.variant;
-  var duration = castWebType(makeMotionTime(get_1(theme.motion, pulseMotionDuration)));
-  var easing = castWebType(get_1(theme.motion, motionEasing));
-  var delay = castWebType(makeMotionTime(get_1(theme.motion, pulseMotionDelay)));
+  var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
+  var easing = castWebType(getIn(theme.motion, motionEasing));
+  var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
   return variant === 'progress' ? getPulseAnimationStyles({
     duration: duration,
     easing: easing,
@@ -23836,7 +23890,7 @@ var ProgressBar = function ProgressBar(_ref) {
   var filledBackgroundColor = intent ? theme.colors.feedback.background[intent].highContrast : theme.colors.brand.primary[500];
   var hasLabel = label && ((_label$trim = label.trim()) === null || _label$trim === void 0 ? void 0 : _label$trim.length) > 0;
   var isMeter = variant === 'meter';
-  var progressValue = clamp_1(value, min, max);
+  var progressValue = clamp$2(value, min, max);
   var percentageProgressValue = Math.floor((progressValue - min) * 100 / (max - min));
   var shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;
   var accessibilityProps = {
@@ -24017,8 +24071,8 @@ var getRadioIconWrapperStyles = function getRadioIconWrapperStyles(_ref) {
   var checked = isChecked ? 'checked' : 'unchecked';
   var background = radioIconColors.variants[variant].background[checked];
   var border = radioIconColors.variants[variant].border[checked];
-  var backgroundColor = background === 'transparent' ? background : get_1(theme, background);
-  var borderColor = border === 'transparent' ? border : get_1(theme, border);
+  var backgroundColor = background === 'transparent' ? background : getIn(theme, background);
+  var borderColor = border === 'transparent' ? border : getIn(theme, border);
   return _objectSpread$t({
     position: 'relative',
     display: 'flex',
@@ -24046,6 +24100,8 @@ var RadioIconWrapper = /*#__PURE__*/styled.div.withConfig({
 });
 
 /* eslint-disable react/jsx-no-useless-fragment */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 var scaleIn = /*#__PURE__*/keyframes(["from{transform:scale(.3);opacity:0;}to{transform:scale(1);opacity:1;}"]);
 var fadeOut = /*#__PURE__*/keyframes(["from{transform:scale(1);opacity:1;}to{transform:scale(1);opacity:0;}"]);
 var AnimatedFade = /*#__PURE__*/styled.div.withConfig({
@@ -24119,7 +24175,7 @@ var RadioIcon = function RadioIcon(_ref2) {
   var variant = 'default';
   if (isDisabled) variant = 'disabled';
   if (isNegative) variant = 'negative';
-  var dotColor = get_1(theme, radioIconColors.variants[variant].dot[state]);
+  var dotColor = getIn(theme, radioIconColors.variants[variant].dot[state]);
   return /*#__PURE__*/jsx(RadioIconWrapper, _objectSpread$s(_objectSpread$s({
     size: size,
     isDisabled: isDisabled,
@@ -24143,6 +24199,7 @@ var RadioIcon = function RadioIcon(_ref2) {
 };
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 var RadioGroupContext = /*#__PURE__*/React__default.createContext({});
 var RadioGroupProvider = RadioGroupContext.Provider;
 var useRadioGroupContext = function useRadioGroupContext() {
@@ -24164,7 +24221,7 @@ var _Radio = function _Radio(_ref, ref) {
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$8);
   var groupProps = useRadioGroupContext();
-  !isEmpty_1(groupProps);
+  !isEmpty$1(groupProps);
   var isChecked = groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state = groupProps.state) === null || _groupProps$state === void 0 ? void 0 : _groupProps$state.isChecked(value);
   var defaultChecked = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.defaultValue) === undefined ? undefined : (groupProps === null || groupProps === void 0 ? void 0 : groupProps.defaultValue) === value;
   var validationState = groupProps === null || groupProps === void 0 ? void 0 : groupProps.validationState;
@@ -24299,7 +24356,7 @@ var useRadioGroup = function useRadioGroup(_ref) {
         setValue(undefined);
       },
       isChecked: function isChecked(v) {
-        if (isUndefined_1(v) || isUndefined_1(checkedValue)) return false;
+        if (isUndefined$1(v) || isUndefined$1(checkedValue)) return false;
         return checkedValue === v;
       }
     };
@@ -24499,6 +24556,8 @@ function isNumber(value) {
 
 var isNumber_1 = isNumber;
 
+var isNumber$1 = /*@__PURE__*/getDefaultExportFromCjs(isNumber_1);
+
 var switchSizes = {
   track: {
     desktop: {
@@ -24604,8 +24663,8 @@ var AnimatedThumbIcon = /*#__PURE__*/styled(Svg).withConfig({
 })(function (_ref) {
   var isChecked = _ref.isChecked,
     theme = _ref.theme;
-  var easing = get_1(theme, switchMotion.easing.thumbIcon);
-  var duration = get_1(theme, switchMotion.duration.thumbIcon);
+  var easing = getIn(theme, switchMotion.easing.thumbIcon);
+  var duration = getIn(theme, switchMotion.duration.thumbIcon);
   return {
     transitionDuration: "".concat(makeMotionTime(duration)),
     transitionTimingFunction: easing,
@@ -24637,10 +24696,10 @@ var ThumbIcon = function ThumbIcon(_ref) {
     matchedDeviceType = _useBreakpoint.matchedDeviceType;
   var width = switchIconSize[matchedDeviceType][size];
   var height = switchIconSize[matchedDeviceType][size];
-  var finalWidth = isNumber_1(width) ? makeSize(width) : makeSpace(get_1(theme, width));
-  var finalHeight = isNumber_1(height) ? makeSize(height) : makeSpace(get_1(theme, height));
+  var finalWidth = isNumber$1(width) ? makeSize(width) : makeSpace(getIn(theme, width));
+  var finalHeight = isNumber$1(height) ? makeSize(height) : makeSpace(getIn(theme, height));
   var variant = isDisabled ? 'disabled' : 'default';
-  var fillColor = get_1(theme, switchColors.thumbIcon[variant].fill);
+  var fillColor = getIn(theme, switchColors.thumbIcon[variant].fill);
   return /*#__PURE__*/jsx(AnimatedThumbIcon, {
     isChecked: Boolean(isChecked),
     width: finalWidth,
@@ -24670,8 +24729,8 @@ var Thumb = /*#__PURE__*/styled(BaseBox).withConfig({
     deviceType = _ref.deviceType;
   var width = switchSizes.thumb[deviceType][size].width;
   var height = switchSizes.thumb[deviceType][size].height;
-  var finalWidth = isNumber_1(width) ? makeSize(width) : makeSpace(get_1(theme, width));
-  var finalHeight = isNumber_1(height) ? makeSize(height) : makeSpace(get_1(theme, height));
+  var finalWidth = isNumber$1(width) ? makeSize(width) : makeSpace(getIn(theme, width));
+  var finalHeight = isNumber$1(height) ? makeSize(height) : makeSpace(getIn(theme, height));
   var reactNativeStyles = {
     left: 0,
     margin: makeSpace(theme.spacing[1])
@@ -24695,8 +24754,8 @@ var AnimatedThumb = /*#__PURE__*/styled(BaseBox).withConfig({
     isDisabled = _ref.isDisabled,
     isPressed = _ref.isPressed;
   var variant = isDisabled ? 'disabled' : 'default';
-  var backgroundColor = get_1(theme, switchColors.thumb[variant].background);
-  var duration = makeMotionTime(get_1(theme, switchMotion.duration.thumb));
+  var backgroundColor = getIn(theme, switchColors.thumb[variant].background);
+  var duration = makeMotionTime(getIn(theme, switchMotion.duration.thumb));
   // offset the thumb x% left because we change the width and width changes from the center origin of thumb
   var offset = isChecked ? '-39%' : '12.5%';
   return css(["display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;position:relative;will-change:transform,left;width:", ";left:", ";transform:translateX(", ");transition:", ";border-radius:", ";animation-duration:", ";background-color:", ";"], isPressed ? '125%' : '100%', isPressed ? offset : '0%', isChecked ? '100%' : '0%', duration, makeBorderSize(theme.border.radius.max), duration, backgroundColor);
@@ -24712,11 +24771,11 @@ var getTrackStyles = function getTrackStyles(_ref) {
   if (isDisabled) variant = 'disabled';
   var checked = isChecked ? 'checked' : 'unchecked';
   var background = switchColors.track[variant].background[checked];
-  var backgroundColor = get_1(theme, background);
+  var backgroundColor = getIn(theme, background);
   var widthToken = switchSizes.track[deviceType][size].width;
   var heightToken = switchSizes.track[deviceType][size].height;
-  var width = isNumber_1(widthToken) ? makeSize(widthToken) : makeSpace(get_1(theme, widthToken));
-  var height = isNumber_1(heightToken) ? makeSize(heightToken) : makeSpace(get_1(theme, heightToken));
+  var width = isNumber$1(widthToken) ? makeSize(widthToken) : makeSpace(getIn(theme, widthToken));
+  var height = isNumber$1(heightToken) ? makeSize(heightToken) : makeSpace(getIn(theme, heightToken));
   return {
     pointerEvents: 'none',
     position: 'relative',
@@ -25002,6 +25061,7 @@ var Tag = function Tag(_ref) {
 };
 
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
+
 var pulseKeyframes = function pulseKeyframes(_ref) {
   var theme = _ref.theme,
     contrast = _ref.contrast;
@@ -27542,7 +27602,7 @@ var _BottomSheetBody = function _BottomSheetBody(_ref) {
   React__default.useEffect(function () {
     setBottomSheetHasActionList(false);
     React__default.Children.forEach(children, function (child) {
-      if (isValidAllowedChildren(child, componentIds.ActionList)) {
+      if (isValidAllowedChildren(child, componentIds$1.ActionList)) {
         setBottomSheetHasActionList(true);
       }
     });
@@ -27708,6 +27768,7 @@ var BottomSheetGrabHandle = /*#__PURE__*/styled.div.withConfig({
 });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-function */
 /**
  * Modified from: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/src/hooks/useScrollLock.tsx
  * Handle scroll locking to ensure a good dragging experience on Android and iOS.