@sproutsocial/seeds-react-menu 1.7.2 → 1.7.6

package/dist/esm/index.js

@@ -1,1891 +1,47 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-// ../../node_modules/object-assign/index.js
-var require_object_assign = __commonJS({
-  "../../node_modules/object-assign/index.js"(exports, module) {
-    "use strict";
-    var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-    var hasOwnProperty = Object.prototype.hasOwnProperty;
-    var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-    function toObject(val) {
-      if (val === null || val === void 0) {
-        throw new TypeError("Object.assign cannot be called with null or undefined");
-      }
-      return Object(val);
-    }
-    function shouldUseNative() {
-      try {
-        if (!Object.assign) {
-          return false;
-        }
-        var test1 = new String("abc");
-        test1[5] = "de";
-        if (Object.getOwnPropertyNames(test1)[0] === "5") {
-          return false;
-        }
-        var test2 = {};
-        for (var i = 0; i < 10; i++) {
-          test2["_" + String.fromCharCode(i)] = i;
-        }
-        var order2 = Object.getOwnPropertyNames(test2).map(function(n) {
-          return test2[n];
-        });
-        if (order2.join("") !== "0123456789") {
-          return false;
-        }
-        var test3 = {};
-        "abcdefghijklmnopqrst".split("").forEach(function(letter) {
-          test3[letter] = letter;
-        });
-        if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
-          return false;
-        }
-        return true;
-      } catch (err) {
-        return false;
-      }
-    }
-    module.exports = shouldUseNative() ? Object.assign : function(target, source) {
-      var from;
-      var to = toObject(target);
-      var symbols;
-      for (var s = 1; s < arguments.length; s++) {
-        from = Object(arguments[s]);
-        for (var key in from) {
-          if (hasOwnProperty.call(from, key)) {
-            to[key] = from[key];
-          }
-        }
-        if (getOwnPropertySymbols) {
-          symbols = getOwnPropertySymbols(from);
-          for (var i = 0; i < symbols.length; i++) {
-            if (propIsEnumerable.call(from, symbols[i])) {
-              to[symbols[i]] = from[symbols[i]];
-            }
-          }
-        }
-      }
-      return to;
-    };
-  }
-});
-
-// src/MenuContext.tsx
-import React, { createContext, useMemo, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var defaultMenuContext = {
-  items: [],
-  itemsMap: {},
-  isItemSelected: () => false,
-  getInputComponentProps: () => ({}),
-  hasVisibleItems: false,
-  isInitialized: false
-};
-var getSelectedItemIds = (selectedItems) => selectedItems?.reduce(
-  (selected, item) => ({ ...selected, [item.id]: true }),
-  {}
-);
-var checkIfItemSelected = ({
-  id,
-  selectedItem,
-  selectedItemIds
-}) => selectedItemIds ? !!selectedItemIds[id] : selectedItem?.id === id;
-var useMenu = ({
-  items = [],
-  isListbox = false,
-  isOpen = false,
-  itemsMap: itemsMapFromProps,
-  selectedItemIds: selectedItemIdsFromProps,
-  selectedItem,
-  selectedItems,
-  getInputProps,
-  contentRef: contentRefFromProps,
-  autoCloseOnEmpty,
-  hiddenItemsCount,
-  ...rest
-} = {}) => {
-  const contentRef = contentRefFromProps || React.createRef();
-  const menuProps = useMemo(() => ({ ...rest }), [rest]);
-  const itemsMap = useMemo(
-    () => itemsMapFromProps || items.reduce((map, item) => {
-      map[`${item.id}`] = {
-        ...item
-      };
-      return map;
-    }, {}),
-    [items, itemsMapFromProps]
-  );
-  const selectedItemIds = useMemo(
-    () => selectedItemIdsFromProps || getSelectedItemIds(selectedItems),
-    [selectedItems, selectedItemIdsFromProps]
-  );
-  const isItemSelected = React.useCallback(
-    (id) => checkIfItemSelected({ id, selectedItem, selectedItemIds }),
-    [selectedItem?.id, selectedItemIds]
-  );
-  const getInputComponentProps = React.useCallback(
-    ({ inputProps, ...props }) => {
-      if (!getInputProps) return {};
-      const {
-        ["aria-activedescendant"]: activedescendant,
-        ["aria-autocomplete"]: autocomplete,
-        ["aria-controls"]: controls,
-        ["aria-expanded"]: expanded,
-        ["aria-labelledby"]: labelledby,
-        role,
-        autoComplete,
-        onClick,
-        value,
-        ...restProps
-      } = getInputProps(props);
-      return {
-        ...restProps,
-        inputProps: {
-          ["aria-activedescendant"]: activedescendant,
-          ["aria-autocomplete"]: autocomplete,
-          ["aria-controls"]: controls,
-          ["aria-expanded"]: expanded,
-          ["aria-labelledby"]: labelledby,
-          role,
-          autoComplete,
-          onClick,
-          value,
-          ...inputProps
-        }
-      };
-    },
-    [getInputProps]
-  );
-  const hasVisibleItems = useMemo(() => {
-    return (hiddenItemsCount ?? 0) < items.length;
-  }, [items, hiddenItemsCount]);
-  return {
-    isOpen,
-    isListbox,
-    items,
-    itemsMap,
-    selectedItem,
-    selectedItems,
-    selectedItemIds,
-    isItemSelected,
-    getInputProps,
-    getInputComponentProps,
-    contentRef,
-    hasVisibleItems,
-    autoCloseOnEmpty,
-    isInitialized: true,
-    ...menuProps
-  };
-};
-var MenuToggleContext = createContext(defaultMenuContext);
-var MenuToggleProvider = ({
-  children,
-  menuContext
-}) => {
-  return /* @__PURE__ */ jsx(MenuToggleContext.Provider, { value: { ...menuContext }, children });
-};
-var useMenuToggleContext = () => {
-  const menuContextValue = useContext(MenuToggleContext);
-  if (menuContextValue === null) {
-    throw new Error(
-      "useMenuToggleContext must be used within a <MenuToggleContext.Provider />"
-    );
-  }
-  return menuContextValue;
-};
-var MenuContentContext = createContext(defaultMenuContext);
-var MenuContentProvider = ({
-  children,
-  menuContext
-}) => {
-  return /* @__PURE__ */ jsx(MenuContentContext.Provider, { value: { ...menuContext }, children });
-};
-var useMenuContentContext = () => {
-  const menuContextValue = useContext(MenuContentContext);
-  if (menuContextValue === null) {
-    throw new Error(
-      "useMenuContentContext must be used within a <MenuContentContext.Provider />"
-    );
-  }
-  return menuContextValue;
-};
-
-// src/MenuItem/styles.tsx
-import styled, { css as css4 } from "styled-components";
-
-// ../../node_modules/@babel/runtime/helpers/esm/extends.js
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function(n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
-function _assertThisInitialized(e) {
-  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e;
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
-    return t2.__proto__ = e2, t2;
-  }, _setPrototypeOf(t, e);
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
-function _inheritsLoose(t, o) {
-  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
-function _getPrototypeOf(t) {
-  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t2) {
-    return t2.__proto__ || Object.getPrototypeOf(t2);
-  }, _getPrototypeOf(t);
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
-function _isNativeFunction(t) {
-  try {
-    return -1 !== Function.toString.call(t).indexOf("[native code]");
-  } catch (n) {
-    return "function" == typeof t;
-  }
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
-function _isNativeReflectConstruct() {
-  try {
-    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
-    }));
-  } catch (t2) {
-  }
-  return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
-    return !!t;
-  })();
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/construct.js
-function _construct(t, e, r) {
-  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
-  var o = [null];
-  o.push.apply(o, e);
-  var p = new (t.bind.apply(t, o))();
-  return r && _setPrototypeOf(p, r.prototype), p;
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
-function _wrapNativeSuper(t) {
-  var r = "function" == typeof Map ? /* @__PURE__ */ new Map() : void 0;
-  return _wrapNativeSuper = function _wrapNativeSuper2(t2) {
-    if (null === t2 || !_isNativeFunction(t2)) return t2;
-    if ("function" != typeof t2) throw new TypeError("Super expression must either be null or a function");
-    if (void 0 !== r) {
-      if (r.has(t2)) return r.get(t2);
-      r.set(t2, Wrapper);
-    }
-    function Wrapper() {
-      return _construct(t2, arguments, _getPrototypeOf(this).constructor);
-    }
-    return Wrapper.prototype = Object.create(t2.prototype, {
-      constructor: {
-        value: Wrapper,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    }), _setPrototypeOf(Wrapper, t2);
-  }, _wrapNativeSuper(t);
-}
-
-// ../../node_modules/polished/dist/polished.esm.js
-var ERRORS = {
-  "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
-  "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
-  "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
-  "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
-  "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
-  "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
-  "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
-  "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
-  "9": "Please provide a number of steps to the modularScale helper.\n\n",
-  "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-  "11": 'Invalid value passed as base to modularScale, expected number or em string but got "%s"\n\n',
-  "12": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got "%s" instead.\n\n',
-  "13": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got "%s" instead.\n\n',
-  "14": 'Passed invalid pixel value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
-  "15": 'Passed invalid base value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
-  "16": "You must provide a template to this method.\n\n",
-  "17": "You passed an unsupported selector state to this method.\n\n",
-  "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-  "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-  "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-  "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-  "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-  "23": "fontFace expects a name of a font-family.\n\n",
-  "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-  "25": "fontFace expects localFonts to be an array.\n\n",
-  "26": "fontFace expects fileFormats to be an array.\n\n",
-  "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-  "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
-  "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-  "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-  "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
-  "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
-  "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
-  "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-  "35": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
-  "36": "Property must be a string value.\n\n",
-  "37": "Syntax Error at %s.\n\n",
-  "38": "Formula contains a function that needs parentheses at %s.\n\n",
-  "39": "Formula is missing closing parenthesis at %s.\n\n",
-  "40": "Formula has too many closing parentheses at %s.\n\n",
-  "41": "All values in a formula must have the same unit or be unitless.\n\n",
-  "42": "Please provide a number of steps to the modularScale helper.\n\n",
-  "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-  "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
-  "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
-  "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
-  "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-  "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-  "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-  "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
-  "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
-  "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-  "53": "fontFace expects localFonts to be an array.\n\n",
-  "54": "fontFace expects fileFormats to be an array.\n\n",
-  "55": "fontFace expects a name of a font-family.\n\n",
-  "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
-  "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-  "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
-  "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-  "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-  "61": "Property must be a string value.\n\n",
-  "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-  "63": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
-  "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
-  "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
-  "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
-  "67": "You must provide a template to this method.\n\n",
-  "68": "You passed an unsupported selector state to this method.\n\n",
-  "69": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got %s instead.\n\n',
-  "70": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got %s instead.\n\n',
-  "71": 'Passed invalid pixel value %s to %s(), please pass a value like "12px" or 12.\n\n',
-  "72": 'Passed invalid base value %s to %s(), please pass a value like "12px" or 12.\n\n',
-  "73": "Please provide a valid CSS variable.\n\n",
-  "74": "CSS variable not found.\n\n",
-  "75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
-};
-function format() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  var a = args[0];
-  var b = [];
-  var c;
-  for (c = 1; c < args.length; c += 1) {
-    b.push(args[c]);
-  }
-  b.forEach(function(d) {
-    a = a.replace(/%[a-z]/, d);
-  });
-  return a;
-}
-var PolishedError = /* @__PURE__ */ function(_Error) {
-  _inheritsLoose(PolishedError2, _Error);
-  function PolishedError2(code) {
-    var _this;
-    if (process.env.NODE_ENV === "production") {
-      _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
-    } else {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
-    }
-    return _assertThisInitialized(_this);
-  }
-  return PolishedError2;
-}(/* @__PURE__ */ _wrapNativeSuper(Error));
-function colorToInt(color2) {
-  return Math.round(color2 * 255);
-}
-function convertToInt(red, green, blue) {
-  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
-}
-function hslToRgb(hue, saturation, lightness, convert) {
-  if (convert === void 0) {
-    convert = convertToInt;
-  }
-  if (saturation === 0) {
-    return convert(lightness, lightness, lightness);
-  }
-  var huePrime = (hue % 360 + 360) % 360 / 60;
-  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
-  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
-  var red = 0;
-  var green = 0;
-  var blue = 0;
-  if (huePrime >= 0 && huePrime < 1) {
-    red = chroma;
-    green = secondComponent;
-  } else if (huePrime >= 1 && huePrime < 2) {
-    red = secondComponent;
-    green = chroma;
-  } else if (huePrime >= 2 && huePrime < 3) {
-    green = chroma;
-    blue = secondComponent;
-  } else if (huePrime >= 3 && huePrime < 4) {
-    green = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 4 && huePrime < 5) {
-    red = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 5 && huePrime < 6) {
-    red = chroma;
-    blue = secondComponent;
-  }
-  var lightnessModification = lightness - chroma / 2;
-  var finalRed = red + lightnessModification;
-  var finalGreen = green + lightnessModification;
-  var finalBlue = blue + lightnessModification;
-  return convert(finalRed, finalGreen, finalBlue);
-}
-var namedColorMap = {
-  aliceblue: "f0f8ff",
-  antiquewhite: "faebd7",
-  aqua: "00ffff",
-  aquamarine: "7fffd4",
-  azure: "f0ffff",
-  beige: "f5f5dc",
-  bisque: "ffe4c4",
-  black: "000",
-  blanchedalmond: "ffebcd",
-  blue: "0000ff",
-  blueviolet: "8a2be2",
-  brown: "a52a2a",
-  burlywood: "deb887",
-  cadetblue: "5f9ea0",
-  chartreuse: "7fff00",
-  chocolate: "d2691e",
-  coral: "ff7f50",
-  cornflowerblue: "6495ed",
-  cornsilk: "fff8dc",
-  crimson: "dc143c",
-  cyan: "00ffff",
-  darkblue: "00008b",
-  darkcyan: "008b8b",
-  darkgoldenrod: "b8860b",
-  darkgray: "a9a9a9",
-  darkgreen: "006400",
-  darkgrey: "a9a9a9",
-  darkkhaki: "bdb76b",
-  darkmagenta: "8b008b",
-  darkolivegreen: "556b2f",
-  darkorange: "ff8c00",
-  darkorchid: "9932cc",
-  darkred: "8b0000",
-  darksalmon: "e9967a",
-  darkseagreen: "8fbc8f",
-  darkslateblue: "483d8b",
-  darkslategray: "2f4f4f",
-  darkslategrey: "2f4f4f",
-  darkturquoise: "00ced1",
-  darkviolet: "9400d3",
-  deeppink: "ff1493",
-  deepskyblue: "00bfff",
-  dimgray: "696969",
-  dimgrey: "696969",
-  dodgerblue: "1e90ff",
-  firebrick: "b22222",
-  floralwhite: "fffaf0",
-  forestgreen: "228b22",
-  fuchsia: "ff00ff",
-  gainsboro: "dcdcdc",
-  ghostwhite: "f8f8ff",
-  gold: "ffd700",
-  goldenrod: "daa520",
-  gray: "808080",
-  green: "008000",
-  greenyellow: "adff2f",
-  grey: "808080",
-  honeydew: "f0fff0",
-  hotpink: "ff69b4",
-  indianred: "cd5c5c",
-  indigo: "4b0082",
-  ivory: "fffff0",
-  khaki: "f0e68c",
-  lavender: "e6e6fa",
-  lavenderblush: "fff0f5",
-  lawngreen: "7cfc00",
-  lemonchiffon: "fffacd",
-  lightblue: "add8e6",
-  lightcoral: "f08080",
-  lightcyan: "e0ffff",
-  lightgoldenrodyellow: "fafad2",
-  lightgray: "d3d3d3",
-  lightgreen: "90ee90",
-  lightgrey: "d3d3d3",
-  lightpink: "ffb6c1",
-  lightsalmon: "ffa07a",
-  lightseagreen: "20b2aa",
-  lightskyblue: "87cefa",
-  lightslategray: "789",
-  lightslategrey: "789",
-  lightsteelblue: "b0c4de",
-  lightyellow: "ffffe0",
-  lime: "0f0",
-  limegreen: "32cd32",
-  linen: "faf0e6",
-  magenta: "f0f",
-  maroon: "800000",
-  mediumaquamarine: "66cdaa",
-  mediumblue: "0000cd",
-  mediumorchid: "ba55d3",
-  mediumpurple: "9370db",
-  mediumseagreen: "3cb371",
-  mediumslateblue: "7b68ee",
-  mediumspringgreen: "00fa9a",
-  mediumturquoise: "48d1cc",
-  mediumvioletred: "c71585",
-  midnightblue: "191970",
-  mintcream: "f5fffa",
-  mistyrose: "ffe4e1",
-  moccasin: "ffe4b5",
-  navajowhite: "ffdead",
-  navy: "000080",
-  oldlace: "fdf5e6",
-  olive: "808000",
-  olivedrab: "6b8e23",
-  orange: "ffa500",
-  orangered: "ff4500",
-  orchid: "da70d6",
-  palegoldenrod: "eee8aa",
-  palegreen: "98fb98",
-  paleturquoise: "afeeee",
-  palevioletred: "db7093",
-  papayawhip: "ffefd5",
-  peachpuff: "ffdab9",
-  peru: "cd853f",
-  pink: "ffc0cb",
-  plum: "dda0dd",
-  powderblue: "b0e0e6",
-  purple: "800080",
-  rebeccapurple: "639",
-  red: "f00",
-  rosybrown: "bc8f8f",
-  royalblue: "4169e1",
-  saddlebrown: "8b4513",
-  salmon: "fa8072",
-  sandybrown: "f4a460",
-  seagreen: "2e8b57",
-  seashell: "fff5ee",
-  sienna: "a0522d",
-  silver: "c0c0c0",
-  skyblue: "87ceeb",
-  slateblue: "6a5acd",
-  slategray: "708090",
-  slategrey: "708090",
-  snow: "fffafa",
-  springgreen: "00ff7f",
-  steelblue: "4682b4",
-  tan: "d2b48c",
-  teal: "008080",
-  thistle: "d8bfd8",
-  tomato: "ff6347",
-  turquoise: "40e0d0",
-  violet: "ee82ee",
-  wheat: "f5deb3",
-  white: "fff",
-  whitesmoke: "f5f5f5",
-  yellow: "ff0",
-  yellowgreen: "9acd32"
-};
-function nameToHex(color2) {
-  if (typeof color2 !== "string") return color2;
-  var normalizedColorName = color2.toLowerCase();
-  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color2;
-}
-var hexRegex = /^#[a-fA-F0-9]{6}$/;
-var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
-var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
-var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
-var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
-var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-function parseToRgb(color2) {
-  if (typeof color2 !== "string") {
-    throw new PolishedError(3);
-  }
-  var normalizedColor = nameToHex(color2);
-  if (normalizedColor.match(hexRegex)) {
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
-    };
-  }
-  if (normalizedColor.match(hexRgbaRegex)) {
-    var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
-      alpha
-    };
-  }
-  if (normalizedColor.match(reducedHexRegex)) {
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
-    };
-  }
-  if (normalizedColor.match(reducedRgbaHexRegex)) {
-    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
-      alpha: _alpha
-    };
-  }
-  var rgbMatched = rgbRegex.exec(normalizedColor);
-  if (rgbMatched) {
-    return {
-      red: parseInt("" + rgbMatched[1], 10),
-      green: parseInt("" + rgbMatched[2], 10),
-      blue: parseInt("" + rgbMatched[3], 10)
-    };
-  }
-  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
-  if (rgbaMatched) {
-    return {
-      red: parseInt("" + rgbaMatched[1], 10),
-      green: parseInt("" + rgbaMatched[2], 10),
-      blue: parseInt("" + rgbaMatched[3], 10),
-      alpha: parseFloat("" + rgbaMatched[4])
-    };
-  }
-  var hslMatched = hslRegex.exec(normalizedColor);
-  if (hslMatched) {
-    var hue = parseInt("" + hslMatched[1], 10);
-    var saturation = parseInt("" + hslMatched[2], 10) / 100;
-    var lightness = parseInt("" + hslMatched[3], 10) / 100;
-    var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
-    var hslRgbMatched = rgbRegex.exec(rgbColorString);
-    if (!hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, rgbColorString);
-    }
-    return {
-      red: parseInt("" + hslRgbMatched[1], 10),
-      green: parseInt("" + hslRgbMatched[2], 10),
-      blue: parseInt("" + hslRgbMatched[3], 10)
-    };
-  }
-  var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
-  if (hslaMatched) {
-    var _hue = parseInt("" + hslaMatched[1], 10);
-    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
-    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
-    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
-    if (!_hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, _rgbColorString);
-    }
-    return {
-      red: parseInt("" + _hslRgbMatched[1], 10),
-      green: parseInt("" + _hslRgbMatched[2], 10),
-      blue: parseInt("" + _hslRgbMatched[3], 10),
-      alpha: parseFloat("" + hslaMatched[4])
-    };
-  }
-  throw new PolishedError(5);
-}
-var reduceHexValue = function reduceHexValue2(value) {
-  if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
-    return "#" + value[1] + value[3] + value[5];
-  }
-  return value;
-};
-function numberToHex(value) {
-  var hex = value.toString(16);
-  return hex.length === 1 ? "0" + hex : hex;
-}
-function rgb(value, green, blue) {
-  if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
-    return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
-  } else if (typeof value === "object" && green === void 0 && blue === void 0) {
-    return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
-  }
-  throw new PolishedError(6);
-}
-function rgba(firstValue, secondValue, thirdValue, fourthValue) {
-  if (typeof firstValue === "string" && typeof secondValue === "number") {
-    var rgbValue = parseToRgb(firstValue);
-    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-  } else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
-    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-  } else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
-    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
-  }
-  throw new PolishedError(7);
-}
-function curried(f, length, acc) {
-  return function fn() {
-    var combined = acc.concat(Array.prototype.slice.call(arguments));
-    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
-  };
-}
-function curry(f) {
-  return curried(f, f.length, []);
-}
-function guard(lowerBoundary, upperBoundary, value) {
-  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
-}
-function transparentize(amount, color2) {
-  if (color2 === "transparent") return color2;
-  var parsedColor = parseToRgb(color2);
-  var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
-  var colorWithAlpha = _extends({}, parsedColor, {
-    alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
-  });
-  return rgba(colorWithAlpha);
-}
-var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
-
-// ../seeds-react-mixins/dist/esm/index.js
-import { css } from "styled-components";
-import { theme } from "@sproutsocial/seeds-react-theme";
-var visuallyHidden = css`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  border: 0;
-`;
-var focusRing = css`
-  box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
-    0 0px 0px 4px
-      ${curriedTransparentize(0.7, theme.colors.button.primary.background.base)};
-  outline: none;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-`;
-var pill = css`
-  min-width: ${theme.space[600]};
-  min-height: ${theme.space[600]};
-  padding: ${theme.space[300]};
-  border-radius: ${theme.radii.pill};
-`;
-var disabled = css`
-  opacity: 0.4;
-  pointer-events: none;
-`;
-
-// ../../node_modules/@styled-system/core/dist/index.esm.js
-var import_object_assign = __toESM(require_object_assign());
-var merge = function merge2(a, b) {
-  var result = (0, import_object_assign.default)({}, a, b);
-  for (var key in a) {
-    var _assign;
-    if (!a[key] || typeof b[key] !== "object") continue;
-    (0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a[key], b[key]), _assign));
-  }
-  return result;
-};
-var sort = function sort2(obj) {
-  var next = {};
-  Object.keys(obj).sort(function(a, b) {
-    return a.localeCompare(b, void 0, {
-      numeric: true,
-      sensitivity: "base"
-    });
-  }).forEach(function(key) {
-    next[key] = obj[key];
-  });
-  return next;
-};
-var defaults = {
-  breakpoints: [40, 52, 64].map(function(n) {
-    return n + "em";
-  })
-};
-var createMediaQuery = function createMediaQuery2(n) {
-  return "@media screen and (min-width: " + n + ")";
-};
-var getValue = function getValue2(n, scale) {
-  return get(scale, n, n);
-};
-var get = function get2(obj, key, def, p, undef) {
-  key = key && key.split ? key.split(".") : [key];
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
-  }
-  return obj === undef ? def : obj;
-};
-var createParser = function createParser2(config9) {
-  var cache = {};
-  var parse = function parse2(props) {
-    var styles = {};
-    var shouldSort = false;
-    var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
-    for (var key in props) {
-      if (!config9[key]) continue;
-      var sx = config9[key];
-      var raw = props[key];
-      var scale = get(props.theme, sx.scale, sx.defaults);
-      if (typeof raw === "object") {
-        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
-        if (Array.isArray(raw)) {
-          cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
-          styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
-          continue;
-        }
-        if (raw !== null) {
-          styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
-          shouldSort = true;
-        }
-        continue;
-      }
-      (0, import_object_assign.default)(styles, sx(raw, scale, props));
-    }
-    if (shouldSort) {
-      styles = sort(styles);
-    }
-    return styles;
-  };
-  parse.config = config9;
-  parse.propNames = Object.keys(config9);
-  parse.cache = cache;
-  var keys = Object.keys(config9).filter(function(k) {
-    return k !== "config";
-  });
-  if (keys.length > 1) {
-    keys.forEach(function(key) {
-      var _createParser;
-      parse[key] = createParser2((_createParser = {}, _createParser[key] = config9[key], _createParser));
-    });
-  }
-  return parse;
-};
-var parseResponsiveStyle = function parseResponsiveStyle2(mediaQueries, sx, scale, raw, _props) {
-  var styles = {};
-  raw.slice(0, mediaQueries.length).forEach(function(value, i) {
-    var media = mediaQueries[i];
-    var style = sx(value, scale, _props);
-    if (!media) {
-      (0, import_object_assign.default)(styles, style);
-    } else {
-      var _assign2;
-      (0, import_object_assign.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign.default)({}, styles[media], style), _assign2));
-    }
-  });
-  return styles;
-};
-var parseResponsiveObject = function parseResponsiveObject2(breakpoints, sx, scale, raw, _props) {
-  var styles = {};
-  for (var key in raw) {
-    var breakpoint = breakpoints[key];
-    var value = raw[key];
-    var style = sx(value, scale, _props);
-    if (!breakpoint) {
-      (0, import_object_assign.default)(styles, style);
-    } else {
-      var _assign3;
-      var media = createMediaQuery(breakpoint);
-      (0, import_object_assign.default)(styles, (_assign3 = {}, _assign3[media] = (0, import_object_assign.default)({}, styles[media], style), _assign3));
-    }
-  }
-  return styles;
-};
-var createStyleFunction = function createStyleFunction2(_ref) {
-  var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
-  properties = properties || [property];
-  var sx = function sx2(value, scale2, _props) {
-    var result = {};
-    var n = transform(value, scale2, _props);
-    if (n === null) return;
-    properties.forEach(function(prop) {
-      result[prop] = n;
-    });
-    return result;
-  };
-  sx.scale = scale;
-  sx.defaults = defaultScale;
-  return sx;
-};
-var system = function system2(args) {
-  if (args === void 0) {
-    args = {};
-  }
-  var config9 = {};
-  Object.keys(args).forEach(function(key) {
-    var conf = args[key];
-    if (conf === true) {
-      config9[key] = createStyleFunction({
-        property: key,
-        scale: key
-      });
-      return;
-    }
-    if (typeof conf === "function") {
-      config9[key] = conf;
-      return;
-    }
-    config9[key] = createStyleFunction(conf);
-  });
-  var parser = createParser(config9);
-  return parser;
-};
-var compose = function compose2() {
-  var config9 = {};
-  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
-    parsers[_key] = arguments[_key];
-  }
-  parsers.forEach(function(parser2) {
-    if (!parser2 || !parser2.config) return;
-    (0, import_object_assign.default)(config9, parser2.config);
-  });
-  var parser = createParser(config9);
-  return parser;
-};
-
-// ../../node_modules/@styled-system/layout/dist/index.esm.js
-var isNumber = function isNumber2(n) {
-  return typeof n === "number" && !isNaN(n);
-};
-var getWidth = function getWidth2(n, scale) {
-  return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
-};
-var config = {
-  width: {
-    property: "width",
-    scale: "sizes",
-    transform: getWidth
-  },
-  height: {
-    property: "height",
-    scale: "sizes"
-  },
-  minWidth: {
-    property: "minWidth",
-    scale: "sizes"
-  },
-  minHeight: {
-    property: "minHeight",
-    scale: "sizes"
-  },
-  maxWidth: {
-    property: "maxWidth",
-    scale: "sizes"
-  },
-  maxHeight: {
-    property: "maxHeight",
-    scale: "sizes"
-  },
-  size: {
-    properties: ["width", "height"],
-    scale: "sizes"
-  },
-  overflow: true,
-  overflowX: true,
-  overflowY: true,
-  display: true,
-  verticalAlign: true
-};
-var layout = system(config);
-var index_esm_default = layout;
-
-// ../../node_modules/@styled-system/color/dist/index.esm.js
-var config2 = {
-  color: {
-    property: "color",
-    scale: "colors"
-  },
-  backgroundColor: {
-    property: "backgroundColor",
-    scale: "colors"
-  },
-  opacity: true
-};
-config2.bg = config2.backgroundColor;
-var color = system(config2);
-var index_esm_default2 = color;
-
-// ../../node_modules/@styled-system/typography/dist/index.esm.js
-var defaults2 = {
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var config3 = {
-  fontFamily: {
-    property: "fontFamily",
-    scale: "fonts"
-  },
-  fontSize: {
-    property: "fontSize",
-    scale: "fontSizes",
-    defaultScale: defaults2.fontSizes
-  },
-  fontWeight: {
-    property: "fontWeight",
-    scale: "fontWeights"
-  },
-  lineHeight: {
-    property: "lineHeight",
-    scale: "lineHeights"
-  },
-  letterSpacing: {
-    property: "letterSpacing",
-    scale: "letterSpacings"
-  },
-  textAlign: true,
-  fontStyle: true
-};
-var typography = system(config3);
-var index_esm_default3 = typography;
-
-// ../../node_modules/@styled-system/flexbox/dist/index.esm.js
-var config4 = {
-  alignItems: true,
-  alignContent: true,
-  justifyItems: true,
-  justifyContent: true,
-  flexWrap: true,
-  flexDirection: true,
-  // item
-  flex: true,
-  flexGrow: true,
-  flexShrink: true,
-  flexBasis: true,
-  justifySelf: true,
-  alignSelf: true,
-  order: true
-};
-var flexbox = system(config4);
-var index_esm_default4 = flexbox;
-
-// ../../node_modules/@styled-system/grid/dist/index.esm.js
-var defaults3 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var config5 = {
-  gridGap: {
-    property: "gridGap",
-    scale: "space",
-    defaultScale: defaults3.space
-  },
-  gridColumnGap: {
-    property: "gridColumnGap",
-    scale: "space",
-    defaultScale: defaults3.space
-  },
-  gridRowGap: {
-    property: "gridRowGap",
-    scale: "space",
-    defaultScale: defaults3.space
-  },
-  gridColumn: true,
-  gridRow: true,
-  gridAutoFlow: true,
-  gridAutoColumns: true,
-  gridAutoRows: true,
-  gridTemplateColumns: true,
-  gridTemplateRows: true,
-  gridTemplateAreas: true,
-  gridArea: true
-};
-var grid = system(config5);
-var index_esm_default5 = grid;
-
-// ../../node_modules/@styled-system/border/dist/index.esm.js
-var config6 = {
-  border: {
-    property: "border",
-    scale: "borders"
-  },
-  borderWidth: {
-    property: "borderWidth",
-    scale: "borderWidths"
-  },
-  borderStyle: {
-    property: "borderStyle",
-    scale: "borderStyles"
-  },
-  borderColor: {
-    property: "borderColor",
-    scale: "colors"
-  },
-  borderRadius: {
-    property: "borderRadius",
-    scale: "radii"
-  },
-  borderTop: {
-    property: "borderTop",
-    scale: "borders"
-  },
-  borderTopLeftRadius: {
-    property: "borderTopLeftRadius",
-    scale: "radii"
-  },
-  borderTopRightRadius: {
-    property: "borderTopRightRadius",
-    scale: "radii"
-  },
-  borderRight: {
-    property: "borderRight",
-    scale: "borders"
-  },
-  borderBottom: {
-    property: "borderBottom",
-    scale: "borders"
-  },
-  borderBottomLeftRadius: {
-    property: "borderBottomLeftRadius",
-    scale: "radii"
-  },
-  borderBottomRightRadius: {
-    property: "borderBottomRightRadius",
-    scale: "radii"
-  },
-  borderLeft: {
-    property: "borderLeft",
-    scale: "borders"
-  },
-  borderX: {
-    properties: ["borderLeft", "borderRight"],
-    scale: "borders"
-  },
-  borderY: {
-    properties: ["borderTop", "borderBottom"],
-    scale: "borders"
-  }
-};
-config6.borderTopWidth = {
-  property: "borderTopWidth",
-  scale: "borderWidths"
-};
-config6.borderTopColor = {
-  property: "borderTopColor",
-  scale: "colors"
-};
-config6.borderTopStyle = {
-  property: "borderTopStyle",
-  scale: "borderStyles"
-};
-config6.borderTopLeftRadius = {
-  property: "borderTopLeftRadius",
-  scale: "radii"
-};
-config6.borderTopRightRadius = {
-  property: "borderTopRightRadius",
-  scale: "radii"
-};
-config6.borderBottomWidth = {
-  property: "borderBottomWidth",
-  scale: "borderWidths"
-};
-config6.borderBottomColor = {
-  property: "borderBottomColor",
-  scale: "colors"
-};
-config6.borderBottomStyle = {
-  property: "borderBottomStyle",
-  scale: "borderStyles"
-};
-config6.borderBottomLeftRadius = {
-  property: "borderBottomLeftRadius",
-  scale: "radii"
-};
-config6.borderBottomRightRadius = {
-  property: "borderBottomRightRadius",
-  scale: "radii"
-};
-config6.borderLeftWidth = {
-  property: "borderLeftWidth",
-  scale: "borderWidths"
-};
-config6.borderLeftColor = {
-  property: "borderLeftColor",
-  scale: "colors"
-};
-config6.borderLeftStyle = {
-  property: "borderLeftStyle",
-  scale: "borderStyles"
-};
-config6.borderRightWidth = {
-  property: "borderRightWidth",
-  scale: "borderWidths"
-};
-config6.borderRightColor = {
-  property: "borderRightColor",
-  scale: "colors"
-};
-config6.borderRightStyle = {
-  property: "borderRightStyle",
-  scale: "borderStyles"
-};
-var border = system(config6);
-var index_esm_default6 = border;
-
-// ../../node_modules/@styled-system/background/dist/index.esm.js
-var config7 = {
-  background: true,
-  backgroundImage: true,
-  backgroundSize: true,
-  backgroundPosition: true,
-  backgroundRepeat: true
-};
-config7.bgImage = config7.backgroundImage;
-config7.bgSize = config7.backgroundSize;
-config7.bgPosition = config7.backgroundPosition;
-config7.bgRepeat = config7.backgroundRepeat;
-var background = system(config7);
-var index_esm_default7 = background;
-
-// ../../node_modules/@styled-system/position/dist/index.esm.js
-var defaults4 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var config8 = {
-  position: true,
-  zIndex: {
-    property: "zIndex",
-    scale: "zIndices"
-  },
-  top: {
-    property: "top",
-    scale: "space",
-    defaultScale: defaults4.space
-  },
-  right: {
-    property: "right",
-    scale: "space",
-    defaultScale: defaults4.space
-  },
-  bottom: {
-    property: "bottom",
-    scale: "space",
-    defaultScale: defaults4.space
-  },
-  left: {
-    property: "left",
-    scale: "space",
-    defaultScale: defaults4.space
-  }
-};
-var position = system(config8);
-var index_esm_default8 = position;
-
-// ../../node_modules/@styled-system/space/dist/index.esm.js
-var defaults5 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var isNumber3 = function isNumber4(n) {
-  return typeof n === "number" && !isNaN(n);
-};
-var getMargin = function getMargin2(n, scale) {
-  if (!isNumber3(n)) {
-    return get(scale, n, n);
-  }
-  var isNegative = n < 0;
-  var absolute = Math.abs(n);
-  var value = get(scale, absolute, absolute);
-  if (!isNumber3(value)) {
-    return isNegative ? "-" + value : value;
-  }
-  return value * (isNegative ? -1 : 1);
-};
-var configs = {};
-configs.margin = {
-  margin: {
-    property: "margin",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginTop: {
-    property: "marginTop",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginRight: {
-    property: "marginRight",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginBottom: {
-    property: "marginBottom",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginLeft: {
-    property: "marginLeft",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginX: {
-    properties: ["marginLeft", "marginRight"],
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginY: {
-    properties: ["marginTop", "marginBottom"],
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  }
-};
-configs.margin.m = configs.margin.margin;
-configs.margin.mt = configs.margin.marginTop;
-configs.margin.mr = configs.margin.marginRight;
-configs.margin.mb = configs.margin.marginBottom;
-configs.margin.ml = configs.margin.marginLeft;
-configs.margin.mx = configs.margin.marginX;
-configs.margin.my = configs.margin.marginY;
-configs.padding = {
-  padding: {
-    property: "padding",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingTop: {
-    property: "paddingTop",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingRight: {
-    property: "paddingRight",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingBottom: {
-    property: "paddingBottom",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingLeft: {
-    property: "paddingLeft",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingX: {
-    properties: ["paddingLeft", "paddingRight"],
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingY: {
-    properties: ["paddingTop", "paddingBottom"],
-    scale: "space",
-    defaultScale: defaults5.space
-  }
-};
-configs.padding.p = configs.padding.padding;
-configs.padding.pt = configs.padding.paddingTop;
-configs.padding.pr = configs.padding.paddingRight;
-configs.padding.pb = configs.padding.paddingBottom;
-configs.padding.pl = configs.padding.paddingLeft;
-configs.padding.px = configs.padding.paddingX;
-configs.padding.py = configs.padding.paddingY;
-var margin = system(configs.margin);
-var padding = system(configs.padding);
-var space = compose(margin, padding);
-
-// ../../node_modules/@styled-system/shadow/dist/index.esm.js
-var shadow = system({
-  boxShadow: {
-    property: "boxShadow",
-    scale: "shadows"
-  },
-  textShadow: {
-    property: "textShadow",
-    scale: "shadows"
-  }
-});
-
-// ../../node_modules/@styled-system/css/dist/index.esm.js
-function _extends2() {
-  _extends2 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends2.apply(this, arguments);
-}
-var get3 = function get4(obj, key, def, p, undef) {
-  key = key && key.split ? key.split(".") : [key];
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
-  }
-  return obj === undef ? def : obj;
-};
-var defaultBreakpoints = [40, 52, 64].map(function(n) {
-  return n + "em";
-});
-var defaultTheme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var aliases = {
-  bg: "backgroundColor",
-  m: "margin",
-  mt: "marginTop",
-  mr: "marginRight",
-  mb: "marginBottom",
-  ml: "marginLeft",
-  mx: "marginX",
-  my: "marginY",
-  p: "padding",
-  pt: "paddingTop",
-  pr: "paddingRight",
-  pb: "paddingBottom",
-  pl: "paddingLeft",
-  px: "paddingX",
-  py: "paddingY"
-};
-var multiples = {
-  marginX: ["marginLeft", "marginRight"],
-  marginY: ["marginTop", "marginBottom"],
-  paddingX: ["paddingLeft", "paddingRight"],
-  paddingY: ["paddingTop", "paddingBottom"],
-  size: ["width", "height"]
-};
-var scales = {
-  color: "colors",
-  backgroundColor: "colors",
-  borderColor: "colors",
-  margin: "space",
-  marginTop: "space",
-  marginRight: "space",
-  marginBottom: "space",
-  marginLeft: "space",
-  marginX: "space",
-  marginY: "space",
-  padding: "space",
-  paddingTop: "space",
-  paddingRight: "space",
-  paddingBottom: "space",
-  paddingLeft: "space",
-  paddingX: "space",
-  paddingY: "space",
-  top: "space",
-  right: "space",
-  bottom: "space",
-  left: "space",
-  gridGap: "space",
-  gridColumnGap: "space",
-  gridRowGap: "space",
-  gap: "space",
-  columnGap: "space",
-  rowGap: "space",
-  fontFamily: "fonts",
-  fontSize: "fontSizes",
-  fontWeight: "fontWeights",
-  lineHeight: "lineHeights",
-  letterSpacing: "letterSpacings",
-  border: "borders",
-  borderTop: "borders",
-  borderRight: "borders",
-  borderBottom: "borders",
-  borderLeft: "borders",
-  borderWidth: "borderWidths",
-  borderStyle: "borderStyles",
-  borderRadius: "radii",
-  borderTopRightRadius: "radii",
-  borderTopLeftRadius: "radii",
-  borderBottomRightRadius: "radii",
-  borderBottomLeftRadius: "radii",
-  borderTopWidth: "borderWidths",
-  borderTopColor: "colors",
-  borderTopStyle: "borderStyles",
-  borderBottomWidth: "borderWidths",
-  borderBottomColor: "colors",
-  borderBottomStyle: "borderStyles",
-  borderLeftWidth: "borderWidths",
-  borderLeftColor: "colors",
-  borderLeftStyle: "borderStyles",
-  borderRightWidth: "borderWidths",
-  borderRightColor: "colors",
-  borderRightStyle: "borderStyles",
-  outlineColor: "colors",
-  boxShadow: "shadows",
-  textShadow: "shadows",
-  zIndex: "zIndices",
-  width: "sizes",
-  minWidth: "sizes",
-  maxWidth: "sizes",
-  height: "sizes",
-  minHeight: "sizes",
-  maxHeight: "sizes",
-  flexBasis: "sizes",
-  size: "sizes",
-  // svg
-  fill: "colors",
-  stroke: "colors"
-};
-var positiveOrNegative = function positiveOrNegative2(scale, value) {
-  if (typeof value !== "number" || value >= 0) {
-    return get3(scale, value, value);
-  }
-  var absolute = Math.abs(value);
-  var n = get3(scale, absolute, absolute);
-  if (typeof n === "string") return "-" + n;
-  return n * -1;
-};
-var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
-  var _extends22;
-  return _extends2({}, acc, (_extends22 = {}, _extends22[curr] = positiveOrNegative, _extends22));
-}, {});
-var responsive = function responsive2(styles) {
-  return function(theme2) {
-    var next = {};
-    var breakpoints = get3(theme2, "breakpoints", defaultBreakpoints);
-    var mediaQueries = [null].concat(breakpoints.map(function(n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
-    for (var key in styles) {
-      var value = typeof styles[key] === "function" ? styles[key](theme2) : styles[key];
-      if (value == null) continue;
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
-      }
-    }
-    return next;
-  };
-};
-var css2 = function css3(args) {
-  return function(props) {
-    if (props === void 0) {
-      props = {};
-    }
-    var theme2 = _extends2({}, defaultTheme, {}, props.theme || props);
-    var result = {};
-    var obj = typeof args === "function" ? args(theme2) : args;
-    var styles = responsive(obj)(theme2);
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === "function" ? x(theme2) : x;
-      if (key === "variant") {
-        var variant3 = css3(get3(theme2, val))(theme2);
-        result = _extends2({}, result, {}, variant3);
-        continue;
-      }
-      if (val && typeof val === "object") {
-        result[key] = css3(val)(theme2);
-        continue;
-      }
-      var prop = get3(aliases, key, key);
-      var scaleName = get3(scales, prop);
-      var scale = get3(theme2, scaleName, get3(theme2, prop, {}));
-      var transform = get3(transforms, prop, get3);
-      var value = transform(scale, val, val);
-      if (multiples[prop]) {
-        var dirs = multiples[prop];
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
-      }
-    }
-    return result;
-  };
-};
-var index_esm_default9 = css2;
-
-// ../../node_modules/@styled-system/variant/dist/index.esm.js
-var variant = function variant2(_ref) {
-  var _config;
-  var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
-  var sx;
-  if (Object.keys(variants).length) {
-    sx = function sx2(value, scale2, props) {
-      return index_esm_default9(get(scale2, value, null))(props.theme);
-    };
-  } else {
-    sx = function sx2(value, scale2) {
-      return get(scale2, value, null);
-    };
-  }
-  sx.scale = scale || key;
-  sx.defaults = variants;
-  var config9 = (_config = {}, _config[prop] = sx, _config);
-  var parser = createParser(config9);
-  return parser;
-};
-var buttonStyle = variant({
-  key: "buttons"
-});
-var textStyle = variant({
-  key: "textStyles",
-  prop: "textStyle"
-});
-var colorStyle = variant({
-  key: "colorStyles",
-  prop: "colors"
-});
-
-// ../../node_modules/styled-system/dist/index.esm.js
-var width = index_esm_default.width;
-var height = index_esm_default.height;
-var minWidth = index_esm_default.minWidth;
-var minHeight = index_esm_default.minHeight;
-var maxWidth = index_esm_default.maxWidth;
-var maxHeight = index_esm_default.maxHeight;
-var size = index_esm_default.size;
-var verticalAlign = index_esm_default.verticalAlign;
-var display = index_esm_default.display;
-var overflow = index_esm_default.overflow;
-var overflowX = index_esm_default.overflowX;
-var overflowY = index_esm_default.overflowY;
-var opacity = index_esm_default2.opacity;
-var fontSize = index_esm_default3.fontSize;
-var fontFamily = index_esm_default3.fontFamily;
-var fontWeight = index_esm_default3.fontWeight;
-var lineHeight = index_esm_default3.lineHeight;
-var textAlign = index_esm_default3.textAlign;
-var fontStyle = index_esm_default3.fontStyle;
-var letterSpacing = index_esm_default3.letterSpacing;
-var alignItems = index_esm_default4.alignItems;
-var alignContent = index_esm_default4.alignContent;
-var justifyItems = index_esm_default4.justifyItems;
-var justifyContent = index_esm_default4.justifyContent;
-var flexWrap = index_esm_default4.flexWrap;
-var flexDirection = index_esm_default4.flexDirection;
-var flex = index_esm_default4.flex;
-var flexGrow = index_esm_default4.flexGrow;
-var flexShrink = index_esm_default4.flexShrink;
-var flexBasis = index_esm_default4.flexBasis;
-var justifySelf = index_esm_default4.justifySelf;
-var alignSelf = index_esm_default4.alignSelf;
-var order = index_esm_default4.order;
-var gridGap = index_esm_default5.gridGap;
-var gridColumnGap = index_esm_default5.gridColumnGap;
-var gridRowGap = index_esm_default5.gridRowGap;
-var gridColumn = index_esm_default5.gridColumn;
-var gridRow = index_esm_default5.gridRow;
-var gridAutoFlow = index_esm_default5.gridAutoFlow;
-var gridAutoColumns = index_esm_default5.gridAutoColumns;
-var gridAutoRows = index_esm_default5.gridAutoRows;
-var gridTemplateColumns = index_esm_default5.gridTemplateColumns;
-var gridTemplateRows = index_esm_default5.gridTemplateRows;
-var gridTemplateAreas = index_esm_default5.gridTemplateAreas;
-var gridArea = index_esm_default5.gridArea;
-var borderWidth = index_esm_default6.borderWidth;
-var borderStyle = index_esm_default6.borderStyle;
-var borderColor = index_esm_default6.borderColor;
-var borderTop = index_esm_default6.borderTop;
-var borderRight = index_esm_default6.borderRight;
-var borderBottom = index_esm_default6.borderBottom;
-var borderLeft = index_esm_default6.borderLeft;
-var borderRadius = index_esm_default6.borderRadius;
-var backgroundImage = index_esm_default7.backgroundImage;
-var backgroundSize = index_esm_default7.backgroundSize;
-var backgroundPosition = index_esm_default7.backgroundPosition;
-var backgroundRepeat = index_esm_default7.backgroundRepeat;
-var zIndex = index_esm_default8.zIndex;
-var top = index_esm_default8.top;
-var right = index_esm_default8.right;
-var bottom = index_esm_default8.bottom;
-var left = index_esm_default8.left;
-
-// src/MenuItem/styles.tsx
 import {
-  CheckboxContainer,
-  InputWrapper,
-  PillInput,
-  checkboxContainerHoverStyles,
-  inputWrapperHoverStyles,
-  pillInputHoverStyles
-} from "@sproutsocial/seeds-react-checkbox";
-var highlightedStyles = css4`
-  cursor: pointer;
-  border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.border.base};
-  background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.hover};
-  color: ${({ theme: theme2 }) => theme2.colors.text.body};
-  text-decoration: none;
-`;
-var activeStyles = css4`
-  border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.border.base};
-  background-color: ${({ theme: theme2 }) => theme2.colors.menuItem.background.active};
-  color: ${({ theme: theme2 }) => theme2.colors.text.body};
-  text-decoration: none;
-`;
-var MenuItemContainer = styled.li`
-  box-sizing: border-box;
-  list-style-type: none;
-  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
-  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
-
-  &:first-child {
-    margin-top: ${({ theme: theme2 }) => theme2.space[300]};
-  }
-
-  &:last-child {
-    margin-bottom: ${({ theme: theme2 }) => theme2.space[300]};
-  }
-`;
-var StyledMenuItem = styled.button`
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: ${({ theme: theme2 }) => theme2.radii[500]};
-  background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.base};
-  border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.background.base};
-  color: ${({ theme: theme2 }) => theme2.colors.text.body};
-  font-family: ${({ theme: theme2 }) => theme2.fontFamily};
-  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.normal};
-  text-align: left;
-  text-decoration: none;
-  padding: ${({ theme: theme2 }) => theme2.space[300]};
-  outline: 0;
-  ${({ theme: theme2 }) => theme2.typography[200]};
-  transition: all ${({ theme: theme2 }) => theme2.duration["fast"]};
-
-  /* Highlighted */
-  ${({ $highlighted }) => $highlighted && highlightedStyles}
-
-  /* Hovered, but not focused */
-  &:hover {
-    ${highlightedStyles}
-    ${CheckboxContainer} {
-      ${checkboxContainerHoverStyles}
-    }
-    ${InputWrapper} {
-      ${inputWrapperHoverStyles}
-    }
-    ${PillInput} {
-      ${pillInputHoverStyles}
-    }
-  }
-
-  /* focused */
-  &:focus {
-    ${focusRing}
-  }
-
-  /* Active */
-  ${({ $active }) => $active && activeStyles}
-
-  /* Pressed state*/
-  &:active {
-    ${activeStyles}
-  }
-
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-    ${disabled}
-  }
-
-  ${border}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
-`;
-var MenuItemRow = styled.div`
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-`;
-var MenuItemAction = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-`;
-var MenuItemActionLeft = styled(MenuItemAction)`
-  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
-`;
-var MenuItemActionRight = styled(MenuItemAction)`
-  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
-`;
-var MenuItemText = styled.div`
-  word-break: break-word;
-  flex-grow: 1;
-  min-width: 0;
-`;
+  MenuContentContext,
+  MenuContentProvider,
+  MenuItemAction,
+  MenuItemActionLeft,
+  MenuItemActionRight,
+  MenuItemContainer,
+  MenuItemRow,
+  MenuItemText,
+  MenuToggleButton,
+  MenuToggleContext,
+  MenuToggleProvider,
+  StyledMenuContent,
+  StyledMenuItem,
+  checkIfItemSelected,
+  defaultMenuContext,
+  getSelectedItemIds,
+  useMenu,
+  useMenuContentContext,
+  useMenuToggleContext
+} from "./chunk-ROQATIB7.js";
 
 // src/MenuItem/useOptionProps.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo } from "react";
 import { Icon } from "@sproutsocial/seeds-react-icon";
 import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
 import { Switch } from "@sproutsocial/seeds-react-switch";
 import { Radio } from "@sproutsocial/seeds-react-radio";
 import { useTheme } from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var SelectionIndicator = ({
   id,
   inputType = "icon",
   "aria-labelledby": labeledBy,
   selected
 }) => {
-  const { space: space2 } = useTheme();
+  const { space: space3 } = useTheme();
   const inputStub = (e) => {
     e.stopPropagation();
   };
   switch (inputType) {
     case "checkbox":
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         Checkbox,
         {
           tabIndex: -1,
@@ -1897,7 +53,7 @@ var SelectionIndicator = ({
         }
       );
     case "switch":
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         Switch,
         {
           tabIndex: -1,
@@ -1908,7 +64,7 @@ var SelectionIndicator = ({
         }
       );
     case "radio":
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         Radio,
         {
           tabIndex: -1,
@@ -1920,9 +76,9 @@ var SelectionIndicator = ({
       );
     case "icon":
       if (selected) {
-        return /* @__PURE__ */ jsx2(Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
+        return /* @__PURE__ */ jsx(Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
       } else {
-        return /* @__PURE__ */ jsx2(Box, { width: space2["400"] });
+        return /* @__PURE__ */ jsx(Box, { width: space3["400"] });
       }
     default:
       return null;
@@ -1936,7 +92,7 @@ var useOptionProps = ({
   ...props
 }) => {
   const { selectedItem, selectedItemIds, isListbox, isItemSelected } = useMenuContentContext();
-  const selected = useMemo2(
+  const selected = useMemo(
     () => isItemSelected(id),
     [selectedItem?.id, selectedItemIds]
   );
@@ -1945,7 +101,7 @@ var useOptionProps = ({
     active: selected,
     ["aria-selected"]: selected,
     children: /* @__PURE__ */ jsxs(MenuItemRow, { children: [
-      /* @__PURE__ */ jsx2(MenuItemActionLeft, { children: /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx(MenuItemActionLeft, { children: /* @__PURE__ */ jsx(
         SelectionIndicator,
         {
           id,
@@ -1954,24 +110,24 @@ var useOptionProps = ({
           selected: !!selected
         }
       ) }),
-      /* @__PURE__ */ jsx2(MenuItemText, { id: label, children })
+      /* @__PURE__ */ jsx(MenuItemText, { id: label, children })
     ] }),
     ...props
   } : {};
 };
 
 // src/MenuItem/MenuItem.tsx
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 var MenuItem = ({
   id,
   children,
   onClick,
   onKeyDown,
-  disabled: disabled2 = false,
+  disabled = false,
   active,
   innerRef,
   href,
-  color: color2,
+  color: color3,
   ...props
 }) => {
   const {
@@ -1988,7 +144,7 @@ var MenuItem = ({
   });
   const item = itemsMap[id] || { index: 0, id };
   const highlighted = highlightedIndex === item?.index;
-  return hiddenItemsMap[item.id] ? /* @__PURE__ */ jsx3(Fragment, {}) : /* @__PURE__ */ jsx3(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx3(
+  return hiddenItemsMap[item.id] ? /* @__PURE__ */ jsx2(Fragment, {}) : /* @__PURE__ */ jsx2(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx2(
     StyledMenuItem,
     {
       id,
@@ -2027,17 +183,26 @@ var INPUT_TYPES = {
 import "react";
 
 // src/MenuHeader/styles.tsx
-import styled2 from "styled-components";
-var MenuHeaderContainer = styled2.div`
-  border-color: ${({ theme: theme2 }) => theme2.colors.container.border.base};
+import styled from "styled-components";
+import {
+  border,
+  color,
+  flexbox,
+  grid,
+  layout,
+  position,
+  space
+} from "styled-system";
+var MenuHeaderContainer = styled.div`
+  border-color: ${({ theme }) => theme.colors.container.border.base};
   border-bottom-width: 1px;
   border-bottom-style: solid;
   box-sizing: border-box;
   width: 100%;
-  font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
   display: flex;
   flex-direction: column;
-  padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
+  padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
 
   ${border}
   ${color}
@@ -2047,27 +212,27 @@ var MenuHeaderContainer = styled2.div`
   ${space}
   ${position}
 `;
-var MenuTitleText = styled2.h3`
-  color: ${({ theme: theme2 }) => theme2.colors.text.headline};
-  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.bold};
+var MenuTitleText = styled.h3`
+  color: ${({ theme }) => theme.colors.text.headline};
+  font-weight: ${({ theme }) => theme.fontWeights.bold};
   margin: 0px;
   flex-grow: 1;
 
-  ${({ theme: theme2 }) => theme2.typography[200]}
+  ${({ theme }) => theme.typography[200]}
 
-  ${({ $leftAction, theme: theme2 }) => $leftAction && `
-      padding-left: ${theme2.space[350]};
+  ${({ $leftAction, theme }) => $leftAction && `
+      padding-left: ${theme.space[350]};
     `}
 `;
-var MenuChildrenContainer = styled2.div`
+var MenuChildrenContainer = styled.div`
   grid-column: 1 / -1;
-  margin-top: ${({ theme: theme2 }) => theme2.space[300]};
+  margin-top: ${({ theme }) => theme.space[300]};
 
   &:first-child {
     margin-top: 0;
   }
 `;
-var MenuHeaderFeatures = styled2.div`
+var MenuHeaderFeatures = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2091,7 +256,7 @@ var MenuHeaderFeatures = styled2.div`
 `;
 
 // src/MenuHeader/MenuHeader.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MenuHeader = ({
   children,
   title,
@@ -2100,53 +265,32 @@ var MenuHeader = ({
   ...rest
 }) => {
   const showTopRow = title || leftAction || rightAction;
-  return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
+  return /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
     showTopRow && /* @__PURE__ */ jsxs2(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
       leftAction && leftAction,
-      title && /* @__PURE__ */ jsx4(MenuTitleText, { $leftAction: !!leftAction, children: title }),
-      rightAction && /* @__PURE__ */ jsx4("div", { className: "right-action", children: rightAction })
+      title && /* @__PURE__ */ jsx3(MenuTitleText, { $leftAction: !!leftAction, children: title }),
+      rightAction && /* @__PURE__ */ jsx3("div", { className: "right-action", children: rightAction })
     ] }),
-    children && /* @__PURE__ */ jsx4(MenuChildrenContainer, { children })
+    children && /* @__PURE__ */ jsx3(MenuChildrenContainer, { children })
   ] }) });
 };
 
-// src/MenuContent/styles.tsx
-import styled3 from "styled-components";
-var StyledMenuContent = styled3.ul`
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-
-  &:focus {
-    outline: none;
-    box-shadow: none;
-  }
-
-  ${border}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
-  ${position}
-`;
-
 // src/hooks/useMenuChildren.tsx
-import React4, { useMemo as useMemo3 } from "react";
-import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
+import React3, { useMemo as useMemo2 } from "react";
+import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
 var walkAllChildren = (children, callback) => {
   const walk = (element, parents2) => {
     if (element === null || element === void 0) return;
     callback(element, parents2);
     const newParents = [...parents2, element];
-    if (React4.isValidElement(element) && element.props?.children) {
-      React4.Children.toArray(element.props.children).forEach((child) => {
+    if (React3.isValidElement(element) && element.props?.children) {
+      React3.Children.toArray(element.props.children).forEach((child) => {
         walk(child, newParents);
       });
     }
   };
   const parents = [];
-  React4.Children.toArray(children).forEach((child) => {
+  React3.Children.toArray(children).forEach((child) => {
     walk(child, parents);
   });
 };
@@ -2187,9 +331,9 @@ var addItemsFromGroup = ({
       });
     });
   } else if (menuGroup.props.children) {
-    const children = React4.Children.toArray(menuGroup.props.children);
+    const children = React3.Children.toArray(menuGroup.props.children);
     children.forEach((menuItem) => {
-      if (React4.isValidElement(menuItem)) {
+      if (React3.isValidElement(menuItem)) {
         addMenuItem({
           itemProps: {
             id: menuItem.props.id,
@@ -2269,19 +413,19 @@ var mapMenuItems = ({
   menuItems,
   MenuItemComponent = MenuItem
 }) => {
-  return /* @__PURE__ */ jsx5(Fragment3, { children: menuItems.map((menuItemProps) => /* @__PURE__ */ jsx5(MenuItemComponent, { ...menuItemProps }, menuItemProps.id)) });
+  return /* @__PURE__ */ jsx4(Fragment3, { children: menuItems.map((menuItemProps) => /* @__PURE__ */ jsx4(MenuItemComponent, { ...menuItemProps }, menuItemProps.id)) });
 };
 var getChildrenFromMenuItems = ({
   menuItems,
   MenuItemComponent
-}) => /* @__PURE__ */ jsx5(MenuContent, { menuItems, MenuItemComponent });
+}) => /* @__PURE__ */ jsx4(MenuContent, { menuItems, MenuItemComponent });
 var useMenuChildren = ({
   children: childrenProp,
   menuItems,
   MenuItemComponent
 }) => {
-  const { allMenuItems, menuItemsMap, children } = useMemo3(() => {
-    let children2 = /* @__PURE__ */ jsx5(Fragment3, {});
+  const { allMenuItems, menuItemsMap, children } = useMemo2(() => {
+    let children2 = /* @__PURE__ */ jsx4(Fragment3, {});
     const menuItemsMap2 = {};
     const allMenuItems2 = [];
     if (menuItems && menuItems.length) {
@@ -2306,23 +450,23 @@ var useMenuChildren = ({
 import { useCallback } from "react";
 
 // src/MenuContent/DefaultMenuEmptyState.tsx
-import styled4 from "styled-components";
+import styled2 from "styled-components";
 import { Box as Box2 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var StyledEmptyState = styled4(Box2)`
-  padding: ${({ theme: theme2 }) => theme2.space[350]};
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StyledEmptyState = styled2(Box2)`
+  padding: ${({ theme }) => theme.space[350]};
   text-align: center;
-  font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
 `;
 var DefaultMenuEmptyState = ({
   children = "No items found",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx6(StyledEmptyState, { ...props, children });
+  return /* @__PURE__ */ jsx5(StyledEmptyState, { ...props, children });
 };
 
 // src/MenuContent/MenuContent.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var MenuContent = ({
   id = "menu_content",
   children: childrenProp,
@@ -2344,7 +488,7 @@ var MenuContent = ({
   const toggleButtonProps = getToggleButtonProps?.();
   const children = childrenProp || !menuItems || !menuItems.length ? childrenProp : mapMenuItems({ menuItems, MenuItemComponent });
   if (isInitialized && !hasVisibleItems && !autoCloseOnEmpty) {
-    return emptyStateElement ?? /* @__PURE__ */ jsx7(DefaultMenuEmptyState, {});
+    return emptyStateElement ?? /* @__PURE__ */ jsx6(DefaultMenuEmptyState, {});
   }
   if (!children) {
     return null;
@@ -2356,7 +500,7 @@ var MenuContent = ({
     },
     [onKeyDown, toggleButtonProps?.["onKeyDown"]]
   );
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     StyledMenuContent,
     {
       autoFocus: true,
@@ -2382,173 +526,67 @@ MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 import "react";
 
 // src/MenuFooter/styles.tsx
-import styled5 from "styled-components";
+import styled3 from "styled-components";
 import { Box as Box3 } from "@sproutsocial/seeds-react-box";
-var StyledMenuFooterBox = styled5(Box3)`
-  padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
+var StyledMenuFooterBox = styled3(Box3)`
+  padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;
 
 // src/MenuFooter/MenuFooter.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MenuFooter = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx8(StyledMenuFooterBox, { ...rest, children });
+  return /* @__PURE__ */ jsx7(StyledMenuFooterBox, { ...rest, children });
 };
 
 // src/MenuGroup/MenuGroup.tsx
 import "react";
 
 // src/MenuGroup/styles.tsx
-import styled7 from "styled-components";
-
-// ../seeds-react-text/dist/esm/index.js
-import "react";
-import styled22 from "styled-components";
-import styled6, { css as css5 } from "styled-components";
+import styled4 from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
 import {
-  COMMON,
-  LAYOUT,
-  FLEXBOX,
-  GRID,
-  TYPOGRAPHY
-} from "@sproutsocial/seeds-react-system-props";
-import { jsx as jsx9 } from "react/jsx-runtime";
-import "react";
-var Container = styled6.span`
-  margin: 0;
-  padding-left: 0;
-  padding-right: 0;
-  font-family: ${(props) => props.theme.fontFamily};
-  font-style: ${(props) => props.isItalicized && "italic"};
-
-  ${(props) => props.truncated && css5`
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    `}
-
-  ${(props) => props.breakWord && css5`
-      word-break: break-word;
-      hyphens: auto;
-    `}
-
-  ${COMMON}
-  ${LAYOUT}
-  ${FLEXBOX}
-  ${GRID}
-  ${TYPOGRAPHY}
-`;
-var styles_default = Container;
-var Headline = styled22(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[400]}
-`;
-var SubHeadline = styled22(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[300]}
-`;
-var SmallSubHeadline = styled22(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[200]}
-`;
-var Byline = styled22(styles_default)`
-  color: ${(props) => props.theme.colors.text.subtext};
-  ${(props) => props.theme.typography[200]}
-`;
-var SmallByline = styled22(styles_default)`
-  color: ${(props) => props.theme.colors.text.subtext};
-  ${(props) => props.theme.typography[100]}
-`;
-var BodyCopy = styled22(styles_default)`
-  color: ${(props) => props.theme.colors.text.body};
-  ${(props) => props.theme.typography[300]}
-`;
-var SmallBodyCopy = styled22(styles_default)`
-  color: ${(props) => props.theme.colors.text.body};
-  ${(props) => props.theme.typography[200]}
-`;
-var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
-  const qaText = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx9(
-    styles_default,
-    {
-      typeScale: fontSize2,
-      "data-qa-text": qaText,
-      color: color2,
-      ...qa,
-      ...rest,
-      children
-    }
-  );
-};
-var withTextLogic = (Component) => {
-  return ({ children, ...props }) => {
-    const qaText = typeof children === "string" ? children : void 0;
-    return /* @__PURE__ */ jsx9(Component, { "data-qa-text": qaText, ...props, children });
-  };
-};
-var HeadlineWithLogic = withTextLogic(Headline);
-HeadlineWithLogic.displayName = "Text.Headline";
-Text.Headline = HeadlineWithLogic;
-var SubHeadlineWithLogic = withTextLogic(SubHeadline);
-SubHeadlineWithLogic.displayName = "Text.SubHeadline";
-Text.SubHeadline = SubHeadlineWithLogic;
-var SmallSubHeadlineWithLogic = withTextLogic(SmallSubHeadline);
-SmallSubHeadlineWithLogic.displayName = "Text.SmallSubHeadline";
-Text.SmallSubHeadline = SmallSubHeadlineWithLogic;
-var BylineWithLogic = withTextLogic(Byline);
-BylineWithLogic.displayName = "Text.Byline";
-Text.Byline = BylineWithLogic;
-var SmallBylineWithLogic = withTextLogic(SmallByline);
-SmallBylineWithLogic.displayName = "Text.SmallByline";
-Text.SmallByline = SmallBylineWithLogic;
-var BodyCopyWithLogic = withTextLogic(BodyCopy);
-BodyCopyWithLogic.displayName = "Text.BodyCopy";
-Text.BodyCopy = BodyCopyWithLogic;
-var SmallBodyCopyWithLogic = withTextLogic(SmallBodyCopy);
-SmallBodyCopyWithLogic.displayName = "Text.SmallBodyCopy";
-Text.SmallBodyCopy = SmallBodyCopyWithLogic;
-var Text_default = Text;
-var index_default = Text_default;
-
-// src/MenuGroup/styles.tsx
-var StyledMenuGroup = styled7.li`
+  border as border2,
+  layout as layout2,
+  position as position2,
+  flexbox as flexbox2,
+  grid as grid2,
+  color as color2,
+  space as space2
+} from "styled-system";
+var StyledMenuGroup = styled4.li`
   &:not(:last-child) {
     border-bottom: 1px solid
-      ${({ theme: theme2 }) => theme2.colors.container.border.base};
+      ${({ theme }) => theme.colors.container.border.base};
   }
   list-style: none;
   margin: 0;
 
-  ${border}
-  ${position}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
+  ${border2}
+  ${position2}
+  ${color2}
+  ${flexbox2}
+  ${grid2}
+  ${layout2}
+  ${space2}
 `;
-var StyledTitle = styled7(index_default.SmallSubHeadline)`
-  font-size: ${({ theme: theme2 }) => theme2.typography[100].fontSize};
-  margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
-    0px ${({ theme: theme2 }) => theme2.space[400]};
+var StyledTitle = styled4(Text.SmallSubHeadline)`
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
+    0px ${({ theme }) => theme.space[400]};
 `;
-var StyledMenuGroupUl = styled7.ul`
+var StyledMenuGroupUl = styled4.ul`
   margin: 0;
   padding: 0;
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
   title,
-  color: color2,
+  color: color3,
   isSingleSelect,
   id,
   menuItems,
@@ -2567,11 +605,11 @@ var MenuGroup = ({
       id,
       isSingleSelect,
       "aria-labelledby": title ? titleId : void 0,
-      color: color2,
+      color: color3,
       ...rest,
       children: [
-        title && /* @__PURE__ */ jsx10(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ jsx10(StyledMenuGroupUl, { children })
+        title && /* @__PURE__ */ jsx8(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ jsx8(StyledMenuGroupUl, { children })
       ]
     }
   );
@@ -2579,23 +617,19 @@ var MenuGroup = ({
 MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-import React7, {
+import React6, {
   useCallback as useCallback2,
   useEffect,
   useLayoutEffect
 } from "react";
-import styled8 from "styled-components";
+import styled5 from "styled-components";
 import {
   Popout
 } from "@sproutsocial/seeds-react-popout";
 import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
-
-// ../../seeds-design-tokens/seeds-motion/dist/seeds-motion-unitless.esm.js
-var MOTION_DURATION_FAST = 0.15;
-
-// src/MenuRoot/MenuRoot.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var CustomPopoutContent = styled8(Popout.Content)`
+import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var CustomPopoutContent = styled5(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
@@ -2616,7 +650,6 @@ var menuPlacementOrigin = {
   ["right-end"]: { originX: 0, originY: 1 }
 };
 var menuAnimationConfig = {
-  layout: true,
   variants: {
     initial: (custom = { placement: "bottom" }) => ({
       ...menuPlacementOrigin[custom.placement],
@@ -2649,7 +682,7 @@ var menuAnimationConfig = {
 };
 var MenuPopout = ({
   content,
-  width: width2 = "300px",
+  width = "300px",
   isOpen,
   openMenu,
   closeMenu,
@@ -2662,12 +695,12 @@ var MenuPopout = ({
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx9(
     Popout,
     {
       isOpen: !!isOpen,
       setIsOpen,
-      content: (props) => /* @__PURE__ */ jsx11(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width2, children: typeof content === "function" ? content(props) : content }),
+      content: (props) => /* @__PURE__ */ jsx9(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width, children: typeof content === "function" ? content(props) : content }),
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
@@ -2684,7 +717,7 @@ var MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width: width2,
+  width,
   ...contextProps
 }) => {
   const {
@@ -2695,19 +728,19 @@ var MenuRoot = ({
     getMenuProps,
     autoCloseOnEmpty = false
   } = contextProps;
-  const toggleElementRef = React7.useRef(null);
-  const [finalWidth, setFinalWidth] = React7.useState();
+  const toggleElementRef = React6.useRef(null);
+  const [finalWidth, setFinalWidth] = React6.useState();
   const min_width = 200;
   useLayoutEffect(() => {
-    if (width2) {
-      setFinalWidth(width2);
+    if (width) {
+      setFinalWidth(width);
     } else if (toggleElementRef.current?.offsetWidth) {
       const toggleWidth = toggleElementRef.current.offsetWidth;
       setFinalWidth(Math.max(toggleWidth, min_width));
     } else {
       setFinalWidth(min_width);
     }
-  }, [width2, toggleElementRef.current?.offsetWidth]);
+  }, [width, toggleElementRef.current?.offsetWidth]);
   const menuContext = useMenu(contextProps);
   getMenuProps?.({}, { suppressRefError: true });
   useEffect(() => {
@@ -2716,17 +749,17 @@ var MenuRoot = ({
       closeMenu?.();
     }
   }, [menuContext.hasVisibleItems, isOpen, inputValue, autoCloseOnEmpty]);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx9(
     MenuPopout,
     {
       placement,
       isOpen: !!isOpen,
       openMenu,
       closeMenu,
-      content: /* @__PURE__ */ jsx11(MenuContentProvider, { menuContext, children }),
+      content: /* @__PURE__ */ jsx9(MenuContentProvider, { menuContext, children }),
       width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ jsx11(
+      children: (toggleProps) => /* @__PURE__ */ jsx9(
         MenuToggleProvider,
         {
           menuContext: {
@@ -2747,7 +780,7 @@ var MenuRoot = ({
 // src/MenuLabel.tsx
 import "react";
 import { Label } from "@sproutsocial/seeds-react-label";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var MenuLabel = ({
   children,
   required = false,
@@ -2756,7 +789,7 @@ var MenuLabel = ({
   const { getLabelProps } = useMenuToggleContext();
   return (
     // This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx10(
       Label,
       {
         htmlFor: "fallback_menu_label",
@@ -2769,51 +802,12 @@ var MenuLabel = ({
   );
 };
 
-// src/MenuToggleButton/MenuToggleButton.tsx
-import { Button } from "@sproutsocial/seeds-react-button";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var MenuToggleButton = (props) => {
-  const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  const {
-    onClick: userOnClick,
-    onKeyDown: userOnKeyDown,
-    onBlur: userOnBlur,
-    ...restProps
-  } = props;
-  const defaultDropdownProps = {
-    ref,
-    onClick: userOnClick,
-    onKeyDown: userOnKeyDown,
-    onBlur: userOnBlur
-  };
-  const dropdownProps = getDropdownProps?.({
-    ...defaultDropdownProps,
-    preventKeyAction: true
-  }) ?? defaultDropdownProps;
-  const toggleButtonProps = getToggleButtonProps?.({
-    ...dropdownProps,
-    refKey: "innerRef",
-    ...ariaProps,
-    ...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
-  });
-  if (toggleButtonProps && toggleButtonProps["aria-activedescendant"] === "") {
-    toggleButtonProps["aria-activedescendant"] = void 0;
-  }
-  if (toggleButtonProps && toggleButtonProps["aria-expanded"] === false) {
-    toggleButtonProps["aria-controls"] = void 0;
-  }
-  if (toggleButtonProps) {
-    toggleButtonProps["aria-labelledby"] = void 0;
-  }
-  return /* @__PURE__ */ jsx13(Button, { appearance: "secondary", ...toggleButtonProps, ...restProps });
-};
-
 // src/MenuSearchInput/MenuSearchInput.tsx
-import React10 from "react";
+import React9 from "react";
 import { Input } from "@sproutsocial/seeds-react-input";
 
 // src/hooks/useItemFiltering.tsx
-import React9 from "react";
+import React8 from "react";
 
 // src/utils/downshiftDefaults.ts
 var itemToString = (item) => {
@@ -2833,8 +827,8 @@ var useItemFiltering = ({
   getShouldFilter = defaultGetShouldFilter,
   setHiddenItemsMap: setHiddenItemsMapProp
 }) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = React9.useState({});
-  const updateFilteredItems = React9.useCallback(
+  const [hiddenItemsMap, setHiddenItemsMap] = React8.useState({});
+  const updateFilteredItems = React8.useCallback(
     ({ inputValue }) => {
       const newHiddenItems = getShouldFilter({ inputValue }) ? allMenuItems.reduce((map, item) => {
         const isItemVisible = getIsItemVisible(item, inputValue);
@@ -2852,7 +846,7 @@ var useItemFiltering = ({
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var MenuSearchInput = ({
   getIsItemVisible,
   inputProps,
@@ -2871,18 +865,18 @@ var MenuSearchInput = ({
     getIsItemVisible,
     setHiddenItemsMap
   });
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     updateFilteredItems({ inputValue: restInputProps.value || "" });
   }, [isOpen, restInputProps.value]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = React10.useCallback(
+  const handleKeyDown = React9.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx11(
     Input,
     {
       onChange: (e, value) => {
@@ -2902,13 +896,13 @@ var MenuSearchInput = ({
 };
 
 // src/MenuTokenInput.tsx
-import React11 from "react";
-import styled9 from "styled-components";
+import React10 from "react";
+import styled6 from "styled-components";
 import {
   TokenInput
 } from "@sproutsocial/seeds-react-token-input";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var StyledTokenInputWrapper = styled9.div`
+import { jsx as jsx12 } from "react/jsx-runtime";
+var StyledTokenInputWrapper = styled6.div`
   > div {
     padding: 4px;
   }
@@ -2937,12 +931,12 @@ var MenuTokenInput = ({
     removeSelectedItem,
     setActiveIndex,
     selectedItems = []
-  } = React11.useContext(MenuContext);
+  } = React10.useContext(MenuContext);
   const removeToken = (tokenId) => {
     const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
     tokenToRemove && removeSelectedItem?.(tokenToRemove);
   };
-  return /* @__PURE__ */ jsx15(StyledTokenInputWrapper, { children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx12(StyledTokenInputWrapper, { children: /* @__PURE__ */ jsx12(
     TokenInput,
     {
       onKeyDown: (e, value) => {
@@ -2991,8 +985,8 @@ var MenuTokenInput = ({
 };
 
 // src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
-import React12 from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import React11 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var MenuSearchTokenInput = ({
   getIsItemVisible,
   getTokenProps,
@@ -3015,10 +1009,10 @@ var MenuSearchTokenInput = ({
     setHiddenItemsMap
   });
   const controlledValue = value || inputPropsValue !== void 0 ? `${inputPropsValue}` : void 0;
-  const [internalValue, setInternalValue] = React12.useState(
+  const [internalValue, setInternalValue] = React11.useState(
     controlledValue || ""
   );
-  const updateFilteredState = React12.useCallback(
+  const updateFilteredState = React11.useCallback(
     // defaults to an empty string if no value is passed
     (value2 = "") => {
       setInternalValue(value2);
@@ -3026,21 +1020,21 @@ var MenuSearchTokenInput = ({
     },
     [updateFilteredItems]
   );
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [controlledValue]);
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [isOpen]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = React12.useCallback(
+  const handleKeyDown = React11.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx13(
     MenuTokenInput,
     {
       onChange: (e, value2) => {
@@ -3061,11 +1055,11 @@ var MenuSearchTokenInput = ({
 };
 
 // src/SubmenuItem/SubmenuItem.tsx
-import React13 from "react";
+import React12 from "react";
 import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box4 } from "@sproutsocial/seeds-react-box";
 import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
-import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var SubmenuItemTrigger = ({
   id,
   children,
@@ -3074,7 +1068,7 @@ var SubmenuItemTrigger = ({
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
   const toggleRef = ref && innerRef ? mergeRefs2([ref, innerRef].filter(Boolean)) : ref || innerRef;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx14(
     MenuItem,
     {
       ...rest,
@@ -3093,7 +1087,7 @@ var SubmenuItemTrigger = ({
       id,
       children: /* @__PURE__ */ jsxs4(Box4, { display: "flex", justifyContent: "space-between", children: [
         children,
-        /* @__PURE__ */ jsx17(MenuItemActionRight, { children: /* @__PURE__ */ jsx17(Icon2, { name: "chevron-right-outline" }) })
+        /* @__PURE__ */ jsx14(MenuItemActionRight, { children: /* @__PURE__ */ jsx14(Icon2, { name: "chevron-right-outline" }) })
       ] })
     }
   );
@@ -3123,17 +1117,17 @@ var SubmenuItem = ({
     itemsMap,
     isOpen: parentIsOpen
   } = useMenuContentContext();
-  const [submenuIsFocused, setSubmenuIsFocused] = React13.useState(false);
-  const [submenuIsOpen, setSubmenuIsOpen] = React13.useState(false);
-  const [submenuIsActive, setSubmenuIsActive] = React13.useState(false);
-  const submenuItemRef = React13.useRef(null);
-  const submenuRef = React13.useRef(null);
+  const [submenuIsFocused, setSubmenuIsFocused] = React12.useState(false);
+  const [submenuIsOpen, setSubmenuIsOpen] = React12.useState(false);
+  const [submenuIsActive, setSubmenuIsActive] = React12.useState(false);
+  const submenuItemRef = React12.useRef(null);
+  const submenuRef = React12.useRef(null);
   const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
   const item = itemsMap[id] || {
     index: 0,
     id
   };
-  React13.useEffect(() => {
+  React12.useEffect(() => {
     if (highlightedIndex === item.index) {
       !submenuIsOpen && setSubmenuIsOpen(true);
     } else if (submenuIsOpen && highlightedIndex !== -1) {
@@ -3141,7 +1135,7 @@ var SubmenuItem = ({
       setSubmenuIsActive(false);
     }
   }, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
-  const onSubmenuStateChange = React13.useCallback(
+  const onSubmenuStateChange = React12.useCallback(
     (state) => {
       if (state.isOpen !== void 0) {
         setSubmenuIsOpen(state.isOpen);
@@ -3185,7 +1179,7 @@ var SubmenuItem = ({
       onMenuItemClick();
     }
   };
-  React13.useEffect(() => {
+  React12.useEffect(() => {
     if (document && document.body) {
       document.body.addEventListener("click", onBodyClick, {
         capture: true
@@ -3203,7 +1197,7 @@ var SubmenuItem = ({
       };
     }
   }, [document, onSubmenuKeydown]);
-  const subMenuContent = /* @__PURE__ */ jsx17(
+  const subMenuContent = /* @__PURE__ */ jsx14(
     "div",
     {
       ref: submenuRef,
@@ -3214,13 +1208,13 @@ var SubmenuItem = ({
       children: menuContent
     }
   );
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx14(
     MenuComponent,
     {
       ...{
         ...menuProps,
         children: subMenuContent,
-        menuToggleElement: /* @__PURE__ */ jsx17(
+        menuToggleElement: /* @__PURE__ */ jsx14(
           SubmenuItemTrigger,
           {
             innerRef: submenuItemRef,
@@ -3252,28 +1246,28 @@ var SubmenuItem = ({
 SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/ListboxToggleButton.tsx
-import styled10, { css as css6 } from "styled-components";
+import styled7, { css } from "styled-components";
 import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
-var StyledListboxToggleButton = styled10(
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+var StyledListboxToggleButton = styled7(
   MenuToggleButton
 )`
-  ${(props) => props.invalid && css6`
+  ${(props) => props.invalid && css`
       border-color: ${(props2) => props2.theme.colors.form.border.error};
     `}
 `;
-var StyledChevron = styled10.div`
-  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
+var StyledChevron = styled7.div`
+  margin-left: ${({ theme }) => theme.space[300]};
   ${({ $isOpen }) => $isOpen && `
 		transform: rotate(-180deg);
 	`}
   transition: transform 0.15s;
 
-  ${({ invalid }) => invalid && css6`
+  ${({ invalid }) => invalid && css`
       color: ${(props) => props.theme.colors.icon.error};
     `}
 `;
-var StyledInnerButton = styled10.div`
+var StyledInnerButton = styled7.div`
   display: flex;
   justify-content: space-between;
 `;
@@ -3282,20 +1276,20 @@ var ListboxToggleButton = ({
   ...buttonProps
 }) => {
   const { isOpen } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx18(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ jsxs5(StyledInnerButton, { children: [
+  return /* @__PURE__ */ jsx15(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ jsxs5(StyledInnerButton, { children: [
     children,
-    /* @__PURE__ */ jsx18(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx18(Icon3, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+    /* @__PURE__ */ jsx15(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx15(Icon3, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
   ] }) });
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import React15, { useEffect as useEffect2 } from "react";
+import React14, { useEffect as useEffect2 } from "react";
 import {
   useSelect as useSelect2
 } from "downshift";
 
 // src/hooks/useDownshiftDefaults.tsx
-import React14 from "react";
+import React13 from "react";
 
 // src/reducers/useComboboxStateReducer.tsx
 import { useCombobox } from "downshift";
@@ -3419,12 +1413,12 @@ var useDownshiftDefaults = ({
   isMulti = false,
   multiSelectProps = {}
 } = {}) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = React14.useState({});
-  const hiddenItemsCount = React14.useMemo(
+  const [hiddenItemsMap, setHiddenItemsMap] = React13.useState({});
+  const hiddenItemsCount = React13.useMemo(
     () => Object.keys(hiddenItemsMap).filter(Boolean).length,
     [hiddenItemsMap]
   );
-  const isItemDisabled = React14.useCallback(
+  const isItemDisabled = React13.useCallback(
     (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
     [hiddenItemsMap]
   );
@@ -3455,7 +1449,7 @@ var useDownshiftDefaults = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -3503,7 +1497,7 @@ var ActionMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const [currentSelectedItem, setCurrentSelectedItem] = React15.useState(null);
+  const [currentSelectedItem, setCurrentSelectedItem] = React14.useState(null);
   const { isOpen, ...useSelectReturnProps } = useSelect2({
     ...defaultDownshiftProps.select,
     items: allMenuItems,
@@ -3518,7 +1512,7 @@ var ActionMenu = ({
   useEffect2(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx16(
     MenuRootComponent,
     {
       ...{
@@ -3539,7 +1533,7 @@ var ActionMenu = ({
 // src/SingleSelectMenu/SingleSelectMenu.tsx
 import "react";
 import { useSelect as useSelect3 } from "downshift";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var SingleSelectMenu = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3566,7 +1560,7 @@ var SingleSelectMenu = ({
     ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx17(
     MenuRootComponent,
     {
       ...{
@@ -3587,7 +1581,7 @@ var SingleSelectMenu = ({
 // src/MultiSelectMenu/MultiSelectMenu.tsx
 import "react";
 import { useSelect as useSelect4, useMultipleSelection } from "downshift";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var MultiSelectMenu = ({
   children: childrenProp,
   menuItems,
@@ -3660,7 +1654,7 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx18(
     MenuRootComponent,
     {
       ...{
@@ -3693,7 +1687,7 @@ import "react";
 // src/Autocomplete/SingleAutocomplete.tsx
 import "react";
 import { useCombobox as useCombobox2 } from "downshift";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SingleAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3731,7 +1725,7 @@ var SingleAutocomplete = ({
   });
   const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
   const { popoutProps: userPopoutProps } = useComboboxProps;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx19(
     MenuRootComponent,
     {
       ...{
@@ -3753,9 +1747,9 @@ var SingleAutocomplete = ({
 };
 
 // src/Autocomplete/MultiAutocomplete.tsx
-import React19 from "react";
+import React18 from "react";
 import { useCombobox as useCombobox3, useMultipleSelection as useMultipleSelection2 } from "downshift";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var MultiAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3781,22 +1775,22 @@ var MultiAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const [selectedItemsState, setSelectedItemsState] = React19.useState(initialSelectedItems);
-  const selectedItems = React19.useMemo(
+  const [selectedItemsState, setSelectedItemsState] = React18.useState(initialSelectedItems);
+  const selectedItems = React18.useMemo(
     () => selectedItemsProp || selectedItemsState,
     [selectedItemsProp, selectedItemsState]
   );
-  const selectedItemIds = React19.useMemo(
+  const selectedItemIds = React18.useMemo(
     () => getSelectedItemIds(selectedItems),
     [selectedItems]
   );
-  const getIsItemVisibleMulti = React19.useCallback(
+  const getIsItemVisibleMulti = React18.useCallback(
     (item, inputValue) => {
       return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
     },
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
-  const getShouldFilterMulti = React19.useCallback(
+  const getShouldFilterMulti = React18.useCallback(
     (args) => {
       return !showSelectedItemsInDropdown && Object.keys(selectedItemIds).length > 0 || defaultGetShouldFilter(args);
     },
@@ -3821,7 +1815,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  React19.useEffect(() => {
+  React18.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = useMultipleSelection2({
@@ -3866,7 +1860,7 @@ var MultiAutocomplete = ({
     ...useComboboxProps
   });
   const { popoutProps: userPopoutProps } = useComboboxProps;
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx20(
     MenuRootComponent,
     {
       ...{
@@ -3895,21 +1889,21 @@ var MultiAutocomplete = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Autocomplete = ({
   multiSelect = false,
   ...rest
 }) => {
   if (multiSelect) {
-    return /* @__PURE__ */ jsx24(MultiAutocomplete, { ...rest });
+    return /* @__PURE__ */ jsx21(MultiAutocomplete, { ...rest });
   }
-  return /* @__PURE__ */ jsx24(SingleAutocomplete, { ...rest });
+  return /* @__PURE__ */ jsx21(SingleAutocomplete, { ...rest });
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
 import "react";
 import { Input as Input2 } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -3920,7 +1914,7 @@ var AutocompleteInput = ({
   ...rest
 }) => {
   const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx22(
     Input2,
     {
       id: "autocomplete_input",
@@ -3946,7 +1940,7 @@ var AutocompleteInput = ({
 
 // src/Autocomplete/AutocompleteTokenInput.tsx
 import "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var AutocompleteTokenInput = ({
   onKeyDown,
   onChange,
@@ -3965,7 +1959,7 @@ var AutocompleteTokenInput = ({
     ref,
     ariaProps
   } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx23(
     MenuTokenInput,
     {
       id: "autocomplete_input",
@@ -3990,19 +1984,19 @@ var AutocompleteTokenInput = ({
 // src/Autocomplete/AutocompleteSelect.tsx
 import Icon4 from "@sproutsocial/seeds-react-icon";
 import "react";
-import styled11 from "styled-components";
+import styled8 from "styled-components";
 import { Accessory } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var StyledAutocompleteInput = styled11(AutocompleteInput)`
+import { jsx as jsx24 } from "react/jsx-runtime";
+var StyledAutocompleteInput = styled8(AutocompleteInput)`
   ${Accessory} {
     pointer-events: none;
   }
 `;
 var AutocompleteSelect = (props) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx24(
     StyledAutocompleteInput,
     {
-      elemAfter: /* @__PURE__ */ jsx27(Icon4, { name: "chevron-down" }),
+      elemAfter: /* @__PURE__ */ jsx24(Icon4, { name: "chevron-down" }),
       ...props
     }
   );
@@ -4039,8 +2033,9 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 };
 
 // src/NestedMenu/NestedMenuContext.tsx
-import { createContext as createContext2, useContext as useContext5 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { createContext, useContext as useContext4 } from "react";
+import { MOTION_DURATION_FAST as MOTION_DURATION_FAST2 } from "@sproutsocial/seeds-motion/unitless";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
   setSelectedMenuId: () => {
@@ -4055,19 +2050,19 @@ var defaultNestedMenuContext = {
   activeMenuContext: defaultMenuContext,
   setActiveMenuContext: () => {
   },
-  animationSpeed: MOTION_DURATION_FAST
+  animationSpeed: MOTION_DURATION_FAST2
 };
-var NestedMenuContext = createContext2(
+var NestedMenuContext = createContext(
   defaultNestedMenuContext
 );
 var NestedMenuProvider = ({
   children,
   ...nestedMenuProps
 }) => {
-  return /* @__PURE__ */ jsx28(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+  return /* @__PURE__ */ jsx25(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
-  const nestedMenuContextValue = useContext5(NestedMenuContext);
+  const nestedMenuContextValue = useContext4(NestedMenuContext);
   if (nestedMenuContextValue === null) {
     throw new Error(
       "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
@@ -4083,7 +2078,7 @@ import { mergeRefs as mergeRefs3 } from "@sproutsocial/seeds-react-utilities";
 // src/NestedMenu/NestedMenuItem.tsx
 import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box5 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx29, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs6 } from "react/jsx-runtime";
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -4099,15 +2094,15 @@ var NestedMenuItem = ({
       }
     }
   } : {};
-  return /* @__PURE__ */ jsx29(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box5, { display: "flex", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsx26(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box5, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ jsx29(MenuItemActionRight, { children: /* @__PURE__ */ jsx29(Icon5, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ jsx26(MenuItemActionRight, { children: /* @__PURE__ */ jsx26(Icon5, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -4144,7 +2139,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx27(
     MenuContent,
     {
       onKeyDown,
@@ -4157,20 +2152,20 @@ var NestedMenuContent = ({
 NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/NestedMenu/NestedMenuHeader.tsx
-import { Button as Button2 } from "@sproutsocial/seeds-react-button";
+import { Button } from "@sproutsocial/seeds-react-button";
 import { Icon as Icon6 } from "@sproutsocial/seeds-react-icon";
 import { AnimatePresence, motion } from "motion/react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var NestedMenuHeader = ({
   backArrowLabel,
   ...props
 }) => {
   const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
   const showBackArrow = selectedMenuPath.length > 1;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx28(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ jsx31(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx31(
+      leftAction: /* @__PURE__ */ jsx28(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx28(
         motion.div,
         {
           initial: { opacity: 0 },
@@ -4179,7 +2174,7 @@ var NestedMenuHeader = ({
             opacity: 0,
             transition: { duration: animationSpeed }
           },
-          children: showBackArrow ? /* @__PURE__ */ jsx31(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx31(Icon6, { name: "arrow-left" }) }) : void 0
+          children: showBackArrow ? /* @__PURE__ */ jsx28(Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx28(Icon6, { name: "arrow-left" }) }) : void 0
         },
         `${selectedMenuPath}-header--button`
       ) }),
@@ -4188,9 +2183,12 @@ var NestedMenuHeader = ({
   );
 };
 
+// src/NestedMenu/NestedMenu.tsx
+import { MOTION_DURATION_FAST as MOTION_DURATION_FAST3 } from "@sproutsocial/seeds-motion/unitless";
+
 // src/NestedMenu/NestedMenuRoot.tsx
-import React24 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import React23 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var NestedMenuRoot = ({
   children,
   menuToggleElement,
@@ -4198,32 +2196,32 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  React24.useEffect(() => {
+  React23.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
     menuContext.selectedItem,
     menuContext.selectedItems?.length
   ]);
-  return /* @__PURE__ */ jsx32(MenuContentProvider, { menuContext, children });
+  return /* @__PURE__ */ jsx29(MenuContentProvider, { menuContext, children });
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
 import { motion as motion2 } from "motion/react";
-import styled12 from "styled-components";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var StyledDiv = styled12(motion2.div)`
+import styled9 from "styled-components";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var StyledDiv = styled9(motion2.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
   content,
   menuToggleElement,
-  width: width2,
+  width,
   onClose,
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx30(
     MenuPopout,
     {
       lockPlacement: true,
@@ -4234,10 +2232,10 @@ var NestedMenuPopout = ({
       isOpen: !!rootMenuContextProps.isOpen,
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
-      width: width2,
-      content: (props) => /* @__PURE__ */ jsx33(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      width,
+      content: (props) => /* @__PURE__ */ jsx30(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ jsx33(
+      children: (toggleProps) => /* @__PURE__ */ jsx30(
         MenuToggleProvider,
         {
           menuContext: {
@@ -4253,7 +2251,7 @@ var NestedMenuPopout = ({
 };
 
 // src/NestedMenu/NestedMenu.tsx
-import { jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs7 } from "react/jsx-runtime";
 var useId = () => {
   const [id, setId] = useState();
   useEffect4(() => {
@@ -4272,7 +2270,7 @@ var NestedMenu = ({
     scheduleUpdateRef: externalPopoutUpdateRef,
     ...restPopoutProps
   } = {},
-  width: width2 = "300px",
+  width = "300px",
   stateReducer: rootExternalStateReducer,
   id: externalNestedMenuId,
   ...useSelectProps
@@ -4357,7 +2355,7 @@ var NestedMenu = ({
     nestedMenuStateReducer,
     externalStateReducer
   );
-  const animationSpeed = MOTION_DURATION_FAST;
+  const animationSpeed = MOTION_DURATION_FAST3;
   const contentVariants = {
     arrive: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
       opacity: 0,
@@ -4419,7 +2417,7 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ jsx34(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx31(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
         motion3.div,
         {
           variants: contentVariants,
@@ -4428,7 +2426,7 @@ var NestedMenu = ({
           exit: "leave",
           custom: { isAdding, hasLoadedOnce },
           children: [
-            MenuHeaderComponent && /* @__PURE__ */ jsx34(
+            MenuHeaderComponent && /* @__PURE__ */ jsx31(
               MenuHeaderComponent,
               {
                 backArrowLabel,
@@ -4436,7 +2434,7 @@ var NestedMenu = ({
               }
             ),
             children && children,
-            menuItems && !children && /* @__PURE__ */ jsx34(
+            menuItems && !children && /* @__PURE__ */ jsx31(
               NestedMenuContent,
               {
                 menuItems,
@@ -4453,7 +2451,7 @@ var NestedMenu = ({
   useEffect4(() => {
     popoutUpdateRef.current?.();
   }, [nestedMenuProps.children]);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx31(
     NestedMenuProvider,
     {
       ...{
@@ -4467,11 +2465,11 @@ var NestedMenu = ({
         setActiveMenuContext,
         animationSpeed
       },
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx31(
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ jsx34(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx31(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx31(
             motion3.div,
             {
               variants: menuVariants,
@@ -4479,12 +2477,12 @@ var NestedMenu = ({
               animate: "enter",
               exit: "leave",
               custom: { isAdding, hasLoadedOnce },
-              children: /* @__PURE__ */ jsx34(MenuComponent, { ...nestedMenuProps })
+              children: /* @__PURE__ */ jsx31(MenuComponent, { ...nestedMenuProps })
             },
             `${currentMenuId}-content`
           ) }),
           menuToggleElement,
-          width: width2,
+          width,
           scheduleUpdateRef: (callback) => {
             popoutUpdateRef.current = callback;
             externalPopoutUpdateRef?.(callback);
@@ -4556,13 +2554,4 @@ export {
   useSelectStateReducer,
   useSelectStateReducerForMulti
 };
-/*! Bundled license information:
-
-object-assign/index.js:
-  (*
-  object-assign
-  (c) Sindre Sorhus
-  @license MIT
-  *)
-*/
 //# sourceMappingURL=index.js.map