@sproutsocial/seeds-react-menu 1.7.2 → 1.7.6

package/dist/index.js

@@ -5,9 +5,6 @@ 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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -30,79 +27,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/object-assign/index.js
-var require_object_assign = __commonJS({
-  "../../node_modules/object-assign/index.js"(exports2, module2) {
-    "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;
-      }
-    }
-    module2.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/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   ActionMenu: () => ActionMenu,
   Autocomplete: () => Autocomplete,
   AutocompleteInput: () => AutocompleteInput,
@@ -163,7 +90,7 @@ __export(index_exports, {
   useSelectStateReducer: () => useSelectStateReducer,
   useSelectStateReducerForMulti: () => useSelectStateReducerForMulti
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/MenuContext.tsx
 var import_react = __toESM(require("react"));
@@ -306,1562 +233,56 @@ var useMenuContentContext = () => {
 };
 
 // src/MenuItem/styles.tsx
-var import_styled_components2 = __toESM(require("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
-var import_styled_components = require("styled-components");
-var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
-var visuallyHidden = import_styled_components.css`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  border: 0;
-`;
-var focusRing = import_styled_components.css`
-  box-shadow: 0 0 0 1px ${import_seeds_react_theme.theme.colors.button.primary.background.base},
-    0 0px 0px 4px
-      ${curriedTransparentize(0.7, import_seeds_react_theme.theme.colors.button.primary.background.base)};
-  outline: none;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-`;
-var pill = import_styled_components.css`
-  min-width: ${import_seeds_react_theme.theme.space[600]};
-  min-height: ${import_seeds_react_theme.theme.space[600]};
-  padding: ${import_seeds_react_theme.theme.space[300]};
-  border-radius: ${import_seeds_react_theme.theme.radii.pill};
-`;
-var disabled = import_styled_components.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
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var import_styled_system = require("styled-system");
 var import_seeds_react_checkbox = require("@sproutsocial/seeds-react-checkbox");
-var highlightedStyles = import_styled_components2.css`
+var highlightedStyles = import_styled_components.css`
   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};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+  color: ${({ theme }) => theme.colors.text.body};
   text-decoration: none;
 `;
-var activeStyles = import_styled_components2.css`
-  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};
+var activeStyles = import_styled_components.css`
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.menuItem.background.active};
+  color: ${({ theme }) => theme.colors.text.body};
   text-decoration: none;
 `;
-var MenuItemContainer = import_styled_components2.default.li`
+var selectedStyles = import_styled_components.css`
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+`;
+var MenuItemContainer = import_styled_components.default.li`
   box-sizing: border-box;
   list-style-type: none;
-  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
-  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
+  margin-left: ${({ theme }) => theme.space[300]};
+  margin-right: ${({ theme }) => theme.space[300]};
 
   &:first-child {
-    margin-top: ${({ theme: theme2 }) => theme2.space[300]};
+    margin-top: ${({ theme }) => theme.space[300]};
   }
 
   &:last-child {
-    margin-bottom: ${({ theme: theme2 }) => theme2.space[300]};
+    margin-bottom: ${({ theme }) => theme.space[300]};
   }
 `;
-var StyledMenuItem = import_styled_components2.default.button`
+var StyledMenuItem = import_styled_components.default.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};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  background-color: ${({ theme }) => theme.colors.listItem.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-family: ${({ theme }) => theme.fontFamily};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
   text-align: left;
   text-decoration: none;
-  padding: ${({ theme: theme2 }) => theme2.space[300]};
+  padding: ${({ theme }) => theme.space[300]};
   outline: 0;
-  ${({ theme: theme2 }) => theme2.typography[200]};
-  transition: all ${({ theme: theme2 }) => theme2.duration["fast"]};
+  ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration["fast"]};
 
   /* Highlighted */
   ${({ $highlighted }) => $highlighted && highlightedStyles}
@@ -1882,7 +303,7 @@ var StyledMenuItem = import_styled_components2.default.button`
 
   /* focused */
   &:focus {
-    ${focusRing}
+    ${import_seeds_react_mixins.focusRing}
   }
 
   /* Active */
@@ -1895,34 +316,36 @@ var StyledMenuItem = import_styled_components2.default.button`
 
   &[aria-disabled="true"] {
     cursor: not-allowed;
-    ${disabled}
+    ${import_seeds_react_mixins.disabled}
   }
 
-  ${border}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
+  ${({ $selected }) => $selected && selectedStyles}
+
+  ${import_styled_system.border}
+  ${import_styled_system.color}
+  ${import_styled_system.flexbox}
+  ${import_styled_system.grid}
+  ${import_styled_system.layout}
+  ${import_styled_system.space}
 `;
-var MenuItemRow = import_styled_components2.default.div`
+var MenuItemRow = import_styled_components.default.div`
   display: flex;
   align-items: center;
   pointer-events: none;
 `;
-var MenuItemAction = import_styled_components2.default.div`
+var MenuItemAction = import_styled_components.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 `;
-var MenuItemActionLeft = (0, import_styled_components2.default)(MenuItemAction)`
-  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
+var MenuItemActionLeft = (0, import_styled_components.default)(MenuItemAction)`
+  margin-right: ${({ theme }) => theme.space[300]};
 `;
-var MenuItemActionRight = (0, import_styled_components2.default)(MenuItemAction)`
-  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
+var MenuItemActionRight = (0, import_styled_components.default)(MenuItemAction)`
+  margin-left: ${({ theme }) => theme.space[300]};
 `;
-var MenuItemText = import_styled_components2.default.div`
+var MenuItemText = import_styled_components.default.div`
   word-break: break-word;
   flex-grow: 1;
   min-width: 0;
@@ -1934,7 +357,7 @@ var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_checkbox2 = require("@sproutsocial/seeds-react-checkbox");
 var import_seeds_react_switch = require("@sproutsocial/seeds-react-switch");
 var import_seeds_react_radio = require("@sproutsocial/seeds-react-radio");
-var import_styled_components3 = require("styled-components");
+var import_styled_components2 = require("styled-components");
 var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SelectionIndicator = ({
@@ -1943,7 +366,7 @@ var SelectionIndicator = ({
   "aria-labelledby": labeledBy,
   selected
 }) => {
-  const { space: space2 } = (0, import_styled_components3.useTheme)();
+  const { space: space5 } = (0, import_styled_components2.useTheme)();
   const inputStub = (e) => {
     e.stopPropagation();
   };
@@ -1986,7 +409,7 @@ var SelectionIndicator = ({
       if (selected) {
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon.Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box.Box, { width: space2["400"] });
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box.Box, { width: space5["400"] });
       }
     default:
       return null;
@@ -2035,7 +458,7 @@ var MenuItem = ({
   active,
   innerRef,
   href,
-  color: color2,
+  color: color5,
   ...props
 }) => {
   const {
@@ -2091,47 +514,48 @@ var INPUT_TYPES = {
 var import_react3 = require("react");
 
 // src/MenuHeader/styles.tsx
-var import_styled_components4 = __toESM(require("styled-components"));
-var MenuHeaderContainer = import_styled_components4.default.div`
-  border-color: ${({ theme: theme2 }) => theme2.colors.container.border.base};
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_styled_system2 = require("styled-system");
+var MenuHeaderContainer = import_styled_components3.default.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]};
-
-  ${border}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
-  ${position}
+  padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
+
+  ${import_styled_system2.border}
+  ${import_styled_system2.color}
+  ${import_styled_system2.flexbox}
+  ${import_styled_system2.grid}
+  ${import_styled_system2.layout}
+  ${import_styled_system2.space}
+  ${import_styled_system2.position}
 `;
-var MenuTitleText = import_styled_components4.default.h3`
-  color: ${({ theme: theme2 }) => theme2.colors.text.headline};
-  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.bold};
+var MenuTitleText = import_styled_components3.default.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 = import_styled_components4.default.div`
+var MenuChildrenContainer = import_styled_components3.default.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 = import_styled_components4.default.div`
+var MenuHeaderFeatures = import_styled_components3.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2175,8 +599,9 @@ var MenuHeader = ({
 };
 
 // src/MenuContent/styles.tsx
-var import_styled_components5 = __toESM(require("styled-components"));
-var StyledMenuContent = import_styled_components5.default.ul`
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_styled_system3 = require("styled-system");
+var StyledMenuContent = import_styled_components4.default.ul`
   margin: 0;
   padding: 0;
   overflow: auto;
@@ -2186,13 +611,13 @@ var StyledMenuContent = import_styled_components5.default.ul`
     box-shadow: none;
   }
 
-  ${border}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
-  ${position}
+  ${import_styled_system3.border}
+  ${import_styled_system3.color}
+  ${import_styled_system3.flexbox}
+  ${import_styled_system3.grid}
+  ${import_styled_system3.layout}
+  ${import_styled_system3.space}
+  ${import_styled_system3.position}
 `;
 
 // src/hooks/useMenuChildren.tsx
@@ -2370,13 +795,13 @@ var useMenuChildren = ({
 var import_react5 = require("react");
 
 // src/MenuContent/DefaultMenuEmptyState.tsx
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_styled_components5 = __toESM(require("styled-components"));
 var import_seeds_react_box2 = require("@sproutsocial/seeds-react-box");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var StyledEmptyState = (0, import_styled_components6.default)(import_seeds_react_box2.Box)`
-  padding: ${({ theme: theme2 }) => theme2.space[350]};
+var StyledEmptyState = (0, import_styled_components5.default)(import_seeds_react_box2.Box)`
+  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",
@@ -2446,10 +871,10 @@ MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 var import_react6 = require("react");
 
 // src/MenuFooter/styles.tsx
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_components6 = __toESM(require("styled-components"));
 var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
-var StyledMenuFooterBox = (0, import_styled_components7.default)(import_seeds_react_box3.Box)`
-  padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
+var StyledMenuFooterBox = (0, import_styled_components6.default)(import_seeds_react_box3.Box)`
+  padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;
 
@@ -2460,153 +885,45 @@ var MenuFooter = ({ children, ...rest }) => {
 };
 
 // src/MenuGroup/MenuGroup.tsx
-var import_react9 = require("react");
-
-// src/MenuGroup/styles.tsx
-var import_styled_components10 = __toESM(require("styled-components"));
-
-// ../seeds-react-text/dist/esm/index.js
 var import_react7 = require("react");
-var import_styled_components8 = __toESM(require("styled-components"));
-var import_styled_components9 = __toESM(require("styled-components"));
-var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var import_react8 = require("react");
-var Container = import_styled_components9.default.span`
-  margin: 0;
-  padding-left: 0;
-  padding-right: 0;
-  font-family: ${(props) => props.theme.fontFamily};
-  font-style: ${(props) => props.isItalicized && "italic"};
-
-  ${(props) => props.truncated && import_styled_components9.css`
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    `}
-
-  ${(props) => props.breakWord && import_styled_components9.css`
-      word-break: break-word;
-      hyphens: auto;
-    `}
-
-  ${import_seeds_react_system_props.COMMON}
-  ${import_seeds_react_system_props.LAYOUT}
-  ${import_seeds_react_system_props.FLEXBOX}
-  ${import_seeds_react_system_props.GRID}
-  ${import_seeds_react_system_props.TYPOGRAPHY}
-`;
-var styles_default = Container;
-var Headline = (0, import_styled_components8.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[400]}
-`;
-var SubHeadline = (0, import_styled_components8.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[300]}
-`;
-var SmallSubHeadline = (0, import_styled_components8.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[200]}
-`;
-var Byline = (0, import_styled_components8.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.subtext};
-  ${(props) => props.theme.typography[200]}
-`;
-var SmallByline = (0, import_styled_components8.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.subtext};
-  ${(props) => props.theme.typography[100]}
-`;
-var BodyCopy = (0, import_styled_components8.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.body};
-  ${(props) => props.theme.typography[300]}
-`;
-var SmallBodyCopy = (0, import_styled_components8.default)(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__ */ (0, import_jsx_runtime9.jsx)(
-    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__ */ (0, import_jsx_runtime9.jsx)(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 = import_styled_components10.default.li`
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_styled_system4 = require("styled-system");
+var StyledMenuGroup = import_styled_components7.default.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}
+  ${import_styled_system4.border}
+  ${import_styled_system4.position}
+  ${import_styled_system4.color}
+  ${import_styled_system4.flexbox}
+  ${import_styled_system4.grid}
+  ${import_styled_system4.layout}
+  ${import_styled_system4.space}
 `;
-var StyledTitle = (0, import_styled_components10.default)(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 = (0, import_styled_components7.default)(import_seeds_react_text.default.SmallSubHeadline)`
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
+    0px ${({ theme }) => theme.space[400]};
 `;
-var StyledMenuGroupUl = import_styled_components10.default.ul`
+var StyledMenuGroupUl = import_styled_components7.default.ul`
   margin: 0;
   padding: 0;
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
   title,
-  color: color2,
+  color: color5,
   isSingleSelect,
   id,
   menuItems,
@@ -2618,18 +935,18 @@ var MenuGroup = ({
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     StyledMenuGroup,
     {
       role: "group",
       id,
       isSingleSelect,
       "aria-labelledby": title ? titleId : void 0,
-      color: color2,
+      color: color5,
       ...rest,
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledMenuGroupUl, { children })
+        title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledMenuGroupUl, { children })
       ]
     }
   );
@@ -2637,17 +954,13 @@ var MenuGroup = ({
 MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-var import_react10 = __toESM(require("react"));
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_react8 = __toESM(require("react"));
+var import_styled_components8 = __toESM(require("styled-components"));
 var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
 var import_seeds_react_utilities = require("@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
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var CustomPopoutContent = (0, import_styled_components11.default)(import_seeds_react_popout.Popout.Content)`
+var import_unitless = require("@sproutsocial/seeds-motion/unitless");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CustomPopoutContent = (0, import_styled_components8.default)(import_seeds_react_popout.Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
@@ -2668,7 +981,6 @@ var menuPlacementOrigin = {
   ["right-end"]: { originX: 0, originY: 1 }
 };
 var menuAnimationConfig = {
-  layout: true,
   variants: {
     initial: (custom = { placement: "bottom" }) => ({
       ...menuPlacementOrigin[custom.placement],
@@ -2681,7 +993,7 @@ var menuAnimationConfig = {
       scale: 1,
       transition: {
         type: "tween",
-        duration: MOTION_DURATION_FAST,
+        duration: import_unitless.MOTION_DURATION_FAST,
         ease: "circOut"
       }
     }),
@@ -2690,7 +1002,7 @@ var menuAnimationConfig = {
       scale: 1,
       transition: {
         type: "tween",
-        duration: MOTION_DURATION_FAST,
+        duration: import_unitless.MOTION_DURATION_FAST,
         ease: "circIn"
       }
     }
@@ -2701,25 +1013,25 @@ var menuAnimationConfig = {
 };
 var MenuPopout = ({
   content,
-  width: width2 = "300px",
+  width = "300px",
   isOpen,
   openMenu,
   closeMenu,
   focusLockProps,
   ...popoutProps
 }) => {
-  const setIsOpen = (0, import_react10.useCallback)(
+  const setIsOpen = (0, import_react8.useCallback)(
     (newIsOpen) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_seeds_react_popout.Popout,
     {
       isOpen: !!isOpen,
       setIsOpen,
-      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width2, children: typeof content === "function" ? content(props) : content }),
+      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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,
@@ -2736,7 +1048,7 @@ var MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width: width2,
+  width,
   ...contextProps
 }) => {
   const {
@@ -2747,38 +1059,38 @@ var MenuRoot = ({
     getMenuProps,
     autoCloseOnEmpty = false
   } = contextProps;
-  const toggleElementRef = import_react10.default.useRef(null);
-  const [finalWidth, setFinalWidth] = import_react10.default.useState();
+  const toggleElementRef = import_react8.default.useRef(null);
+  const [finalWidth, setFinalWidth] = import_react8.default.useState();
   const min_width = 200;
-  (0, import_react10.useLayoutEffect)(() => {
-    if (width2) {
-      setFinalWidth(width2);
+  (0, import_react8.useLayoutEffect)(() => {
+    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 });
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!inputValue || !autoCloseOnEmpty) return;
     if (!menuContext.hasVisibleItems && isOpen) {
       closeMenu?.();
     }
   }, [menuContext.hasVisibleItems, isOpen, inputValue, autoCloseOnEmpty]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     MenuPopout,
     {
       placement,
       isOpen: !!isOpen,
       openMenu,
       closeMenu,
-      content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MenuContentProvider, { menuContext, children }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children }),
       width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         MenuToggleProvider,
         {
           menuContext: {
@@ -2797,9 +1109,9 @@ var MenuRoot = ({
 };
 
 // src/MenuLabel.tsx
-var import_react11 = require("react");
+var import_react9 = require("react");
 var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
-var import_jsx_runtime12 = (
+var import_jsx_runtime11 = (
   // This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
   require("react/jsx-runtime")
 );
@@ -2809,7 +1121,7 @@ var MenuLabel = ({
   ...rest
 }) => {
   const { getLabelProps } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_seeds_react_label.Label,
     {
       htmlFor: "fallback_menu_label",
@@ -2823,7 +1135,7 @@ var MenuLabel = ({
 
 // src/MenuToggleButton/MenuToggleButton.tsx
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MenuToggleButton = (props) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
   const {
@@ -2857,15 +1169,15 @@ var MenuToggleButton = (props) => {
   if (toggleButtonProps) {
     toggleButtonProps["aria-labelledby"] = void 0;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_button.Button, { appearance: "secondary", ...toggleButtonProps, ...restProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_button.Button, { appearance: "secondary", ...toggleButtonProps, ...restProps });
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-var import_react13 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
 
 // src/hooks/useItemFiltering.tsx
-var import_react12 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/utils/downshiftDefaults.ts
 var itemToString = (item) => {
@@ -2885,8 +1197,8 @@ var useItemFiltering = ({
   getShouldFilter = defaultGetShouldFilter,
   setHiddenItemsMap: setHiddenItemsMapProp
 }) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = import_react12.default.useState({});
-  const updateFilteredItems = import_react12.default.useCallback(
+  const [hiddenItemsMap, setHiddenItemsMap] = import_react10.default.useState({});
+  const updateFilteredItems = import_react10.default.useCallback(
     ({ inputValue }) => {
       const newHiddenItems = getShouldFilter({ inputValue }) ? allMenuItems.reduce((map, item) => {
         const isItemVisible = getIsItemVisible(item, inputValue);
@@ -2904,7 +1216,7 @@ var useItemFiltering = ({
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MenuSearchInput = ({
   getIsItemVisible,
   inputProps,
@@ -2923,18 +1235,18 @@ var MenuSearchInput = ({
     getIsItemVisible,
     setHiddenItemsMap
   });
-  import_react13.default.useEffect(() => {
+  import_react11.default.useEffect(() => {
     updateFilteredItems({ inputValue: restInputProps.value || "" });
   }, [isOpen, restInputProps.value]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = import_react13.default.useCallback(
+  const handleKeyDown = import_react11.default.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_seeds_react_input.Input,
     {
       onChange: (e, value) => {
@@ -2954,11 +1266,11 @@ var MenuSearchInput = ({
 };
 
 // src/MenuTokenInput.tsx
-var import_react14 = __toESM(require("react"));
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_react12 = __toESM(require("react"));
+var import_styled_components9 = __toESM(require("styled-components"));
 var import_seeds_react_token_input = require("@sproutsocial/seeds-react-token-input");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var StyledTokenInputWrapper = import_styled_components12.default.div`
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var StyledTokenInputWrapper = import_styled_components9.default.div`
   > div {
     padding: 4px;
   }
@@ -2987,12 +1299,12 @@ var MenuTokenInput = ({
     removeSelectedItem,
     setActiveIndex,
     selectedItems = []
-  } = import_react14.default.useContext(MenuContext);
+  } = import_react12.default.useContext(MenuContext);
   const removeToken = (tokenId) => {
     const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
     tokenToRemove && removeSelectedItem?.(tokenToRemove);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledTokenInputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledTokenInputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_seeds_react_token_input.TokenInput,
     {
       onKeyDown: (e, value) => {
@@ -3041,8 +1353,8 @@ var MenuTokenInput = ({
 };
 
 // src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
-var import_react15 = __toESM(require("react"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react13 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var MenuSearchTokenInput = ({
   getIsItemVisible,
   getTokenProps,
@@ -3065,10 +1377,10 @@ var MenuSearchTokenInput = ({
     setHiddenItemsMap
   });
   const controlledValue = value || inputPropsValue !== void 0 ? `${inputPropsValue}` : void 0;
-  const [internalValue, setInternalValue] = import_react15.default.useState(
+  const [internalValue, setInternalValue] = import_react13.default.useState(
     controlledValue || ""
   );
-  const updateFilteredState = import_react15.default.useCallback(
+  const updateFilteredState = import_react13.default.useCallback(
     // defaults to an empty string if no value is passed
     (value2 = "") => {
       setInternalValue(value2);
@@ -3076,21 +1388,21 @@ var MenuSearchTokenInput = ({
     },
     [updateFilteredItems]
   );
-  import_react15.default.useEffect(() => {
+  import_react13.default.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [controlledValue]);
-  import_react15.default.useEffect(() => {
+  import_react13.default.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [isOpen]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = import_react15.default.useCallback(
+  const handleKeyDown = import_react13.default.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     MenuTokenInput,
     {
       onChange: (e, value2) => {
@@ -3111,11 +1423,11 @@ var MenuSearchTokenInput = ({
 };
 
 // src/SubmenuItem/SubmenuItem.tsx
-var import_react16 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box4 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var SubmenuItemTrigger = ({
   id,
   children,
@@ -3124,7 +1436,7 @@ var SubmenuItemTrigger = ({
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
   const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities2.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuItem,
     {
       ...rest,
@@ -3141,9 +1453,9 @@ var SubmenuItemTrigger = ({
         { suppressRefError: true }
       ),
       id,
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-right-outline" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-right-outline" }) })
       ] })
     }
   );
@@ -3173,17 +1485,17 @@ var SubmenuItem = ({
     itemsMap,
     isOpen: parentIsOpen
   } = useMenuContentContext();
-  const [submenuIsFocused, setSubmenuIsFocused] = import_react16.default.useState(false);
-  const [submenuIsOpen, setSubmenuIsOpen] = import_react16.default.useState(false);
-  const [submenuIsActive, setSubmenuIsActive] = import_react16.default.useState(false);
-  const submenuItemRef = import_react16.default.useRef(null);
-  const submenuRef = import_react16.default.useRef(null);
+  const [submenuIsFocused, setSubmenuIsFocused] = import_react14.default.useState(false);
+  const [submenuIsOpen, setSubmenuIsOpen] = import_react14.default.useState(false);
+  const [submenuIsActive, setSubmenuIsActive] = import_react14.default.useState(false);
+  const submenuItemRef = import_react14.default.useRef(null);
+  const submenuRef = import_react14.default.useRef(null);
   const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
   const item = itemsMap[id] || {
     index: 0,
     id
   };
-  import_react16.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     if (highlightedIndex === item.index) {
       !submenuIsOpen && setSubmenuIsOpen(true);
     } else if (submenuIsOpen && highlightedIndex !== -1) {
@@ -3191,7 +1503,7 @@ var SubmenuItem = ({
       setSubmenuIsActive(false);
     }
   }, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
-  const onSubmenuStateChange = import_react16.default.useCallback(
+  const onSubmenuStateChange = import_react14.default.useCallback(
     (state) => {
       if (state.isOpen !== void 0) {
         setSubmenuIsOpen(state.isOpen);
@@ -3235,7 +1547,7 @@ var SubmenuItem = ({
       onMenuItemClick();
     }
   };
-  import_react16.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     if (document && document.body) {
       document.body.addEventListener("click", onBodyClick, {
         capture: true
@@ -3253,7 +1565,7 @@ var SubmenuItem = ({
       };
     }
   }, [document, onSubmenuKeydown]);
-  const subMenuContent = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const subMenuContent = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ref: submenuRef,
@@ -3264,13 +1576,13 @@ var SubmenuItem = ({
       children: menuContent
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuComponent,
     {
       ...{
         ...menuProps,
         children: subMenuContent,
-        menuToggleElement: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        menuToggleElement: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           SubmenuItemTrigger,
           {
             innerRef: submenuItemRef,
@@ -3302,28 +1614,28 @@ var SubmenuItem = ({
 SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/ListboxToggleButton.tsx
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var StyledListboxToggleButton = (0, import_styled_components13.default)(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var StyledListboxToggleButton = (0, import_styled_components10.default)(
   MenuToggleButton
 )`
-  ${(props) => props.invalid && import_styled_components13.css`
+  ${(props) => props.invalid && import_styled_components10.css`
       border-color: ${(props2) => props2.theme.colors.form.border.error};
     `}
 `;
-var StyledChevron = import_styled_components13.default.div`
-  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
+var StyledChevron = import_styled_components10.default.div`
+  margin-left: ${({ theme }) => theme.space[300]};
   ${({ $isOpen }) => $isOpen && `
 		transform: rotate(-180deg);
 	`}
   transition: transform 0.15s;
 
-  ${({ invalid }) => invalid && import_styled_components13.css`
+  ${({ invalid }) => invalid && import_styled_components10.css`
       color: ${(props) => props.theme.colors.icon.error};
     `}
 `;
-var StyledInnerButton = import_styled_components13.default.div`
+var StyledInnerButton = import_styled_components10.default.div`
   display: flex;
   justify-content: space-between;
 `;
@@ -3332,18 +1644,18 @@ var ListboxToggleButton = ({
   ...buttonProps
 }) => {
   const { isOpen } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledInnerButton, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StyledInnerButton, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
   ] }) });
 };
 
 // src/ActionMenu/ActionMenu.tsx
-var import_react18 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_downshift3 = require("downshift");
 
 // src/hooks/useDownshiftDefaults.tsx
-var import_react17 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/reducers/useComboboxStateReducer.tsx
 var import_downshift = require("downshift");
@@ -3467,12 +1779,12 @@ var useDownshiftDefaults = ({
   isMulti = false,
   multiSelectProps = {}
 } = {}) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = import_react17.default.useState({});
-  const hiddenItemsCount = import_react17.default.useMemo(
+  const [hiddenItemsMap, setHiddenItemsMap] = import_react15.default.useState({});
+  const hiddenItemsCount = import_react15.default.useMemo(
     () => Object.keys(hiddenItemsMap).filter(Boolean).length,
     [hiddenItemsMap]
   );
-  const isItemDisabled = import_react17.default.useCallback(
+  const isItemDisabled = import_react15.default.useCallback(
     (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
     [hiddenItemsMap]
   );
@@ -3503,7 +1815,7 @@ var useDownshiftDefaults = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === import_downshift3.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift3.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -3551,7 +1863,7 @@ var ActionMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const [currentSelectedItem, setCurrentSelectedItem] = import_react18.default.useState(null);
+  const [currentSelectedItem, setCurrentSelectedItem] = import_react16.default.useState(null);
   const { isOpen, ...useSelectReturnProps } = (0, import_downshift3.useSelect)({
     ...defaultDownshiftProps.select,
     items: allMenuItems,
@@ -3563,10 +1875,10 @@ var ActionMenu = ({
     ),
     ...useSelectProps
   });
-  (0, import_react18.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3585,9 +1897,9 @@ var ActionMenu = ({
 };
 
 // src/SingleSelectMenu/SingleSelectMenu.tsx
-var import_react19 = require("react");
+var import_react17 = require("react");
 var import_downshift4 = require("downshift");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SingleSelectMenu = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3614,7 +1926,7 @@ var SingleSelectMenu = ({
     ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3633,9 +1945,9 @@ var SingleSelectMenu = ({
 };
 
 // src/MultiSelectMenu/MultiSelectMenu.tsx
-var import_react20 = require("react");
+var import_react18 = require("react");
 var import_downshift5 = require("downshift");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var MultiSelectMenu = ({
   children: childrenProp,
   menuItems,
@@ -3708,7 +2020,7 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3736,12 +2048,12 @@ var MultiSelectMenu = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react23 = require("react");
+var import_react21 = require("react");
 
 // src/Autocomplete/SingleAutocomplete.tsx
-var import_react21 = require("react");
+var import_react19 = require("react");
 var import_downshift6 = require("downshift");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SingleAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3779,7 +2091,7 @@ var SingleAutocomplete = ({
   });
   const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
   const { popoutProps: userPopoutProps } = useComboboxProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3801,9 +2113,9 @@ var SingleAutocomplete = ({
 };
 
 // src/Autocomplete/MultiAutocomplete.tsx
-var import_react22 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_downshift7 = require("downshift");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var MultiAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3829,22 +2141,22 @@ var MultiAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const [selectedItemsState, setSelectedItemsState] = import_react22.default.useState(initialSelectedItems);
-  const selectedItems = import_react22.default.useMemo(
+  const [selectedItemsState, setSelectedItemsState] = import_react20.default.useState(initialSelectedItems);
+  const selectedItems = import_react20.default.useMemo(
     () => selectedItemsProp || selectedItemsState,
     [selectedItemsProp, selectedItemsState]
   );
-  const selectedItemIds = import_react22.default.useMemo(
+  const selectedItemIds = import_react20.default.useMemo(
     () => getSelectedItemIds(selectedItems),
     [selectedItems]
   );
-  const getIsItemVisibleMulti = import_react22.default.useCallback(
+  const getIsItemVisibleMulti = import_react20.default.useCallback(
     (item, inputValue) => {
       return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
     },
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
-  const getShouldFilterMulti = import_react22.default.useCallback(
+  const getShouldFilterMulti = import_react20.default.useCallback(
     (args) => {
       return !showSelectedItemsInDropdown && Object.keys(selectedItemIds).length > 0 || defaultGetShouldFilter(args);
     },
@@ -3869,7 +2181,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  import_react22.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = (0, import_downshift7.useMultipleSelection)({
@@ -3914,7 +2226,7 @@ var MultiAutocomplete = ({
     ...useComboboxProps
   });
   const { popoutProps: userPopoutProps } = useComboboxProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3943,21 +2255,21 @@ var MultiAutocomplete = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Autocomplete = ({
   multiSelect = false,
   ...rest
 }) => {
   if (multiSelect) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MultiAutocomplete, { ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MultiAutocomplete, { ...rest });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SingleAutocomplete, { ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SingleAutocomplete, { ...rest });
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
-var import_react24 = require("react");
+var import_react22 = require("react");
 var import_seeds_react_input2 = require("@sproutsocial/seeds-react-input");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -3968,7 +2280,7 @@ var AutocompleteInput = ({
   ...rest
 }) => {
   const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_seeds_react_input2.Input,
     {
       id: "autocomplete_input",
@@ -3993,8 +2305,8 @@ var AutocompleteInput = ({
 };
 
 // src/Autocomplete/AutocompleteTokenInput.tsx
-var import_react25 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var AutocompleteTokenInput = ({
   onKeyDown,
   onChange,
@@ -4013,7 +2325,7 @@ var AutocompleteTokenInput = ({
     ref,
     ariaProps
   } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     MenuTokenInput,
     {
       id: "autocomplete_input",
@@ -4037,28 +2349,28 @@ var AutocompleteTokenInput = ({
 
 // src/Autocomplete/AutocompleteSelect.tsx
 var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
-var import_react26 = require("react");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_react24 = require("react");
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_seeds_react_input3 = require("@sproutsocial/seeds-react-input");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var StyledAutocompleteInput = (0, import_styled_components14.default)(AutocompleteInput)`
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var StyledAutocompleteInput = (0, import_styled_components11.default)(AutocompleteInput)`
   ${import_seeds_react_input3.Accessory} {
     pointer-events: none;
   }
 `;
 var AutocompleteSelect = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     StyledAutocompleteInput,
     {
-      elemAfter: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_icon4.default, { name: "chevron-down" }),
+      elemAfter: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_seeds_react_icon4.default, { name: "chevron-down" }),
       ...props
     }
   );
 };
 
 // src/NestedMenu/NestedMenu.tsx
-var import_react32 = require("react");
-var import_react33 = require("motion/react");
+var import_react30 = require("react");
+var import_react31 = require("motion/react");
 var import_downshift9 = require("downshift");
 var import_lodash = __toESM(require("lodash.uniqueid"));
 
@@ -4087,8 +2399,9 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 };
 
 // src/NestedMenu/NestedMenuContext.tsx
-var import_react27 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_unitless2 = require("@sproutsocial/seeds-motion/unitless");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
   setSelectedMenuId: () => {
@@ -4103,19 +2416,19 @@ var defaultNestedMenuContext = {
   activeMenuContext: defaultMenuContext,
   setActiveMenuContext: () => {
   },
-  animationSpeed: MOTION_DURATION_FAST
+  animationSpeed: import_unitless2.MOTION_DURATION_FAST
 };
-var NestedMenuContext = (0, import_react27.createContext)(
+var NestedMenuContext = (0, import_react25.createContext)(
   defaultNestedMenuContext
 );
 var NestedMenuProvider = ({
   children,
   ...nestedMenuProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
-  const nestedMenuContextValue = (0, import_react27.useContext)(NestedMenuContext);
+  const nestedMenuContextValue = (0, import_react25.useContext)(NestedMenuContext);
   if (nestedMenuContextValue === null) {
     throw new Error(
       "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
@@ -4125,13 +2438,13 @@ var useNestedMenuContext = () => {
 };
 
 // src/NestedMenu/NestedMenuContent.tsx
-var import_react28 = require("react");
+var import_react26 = require("react");
 var import_seeds_react_utilities3 = require("@sproutsocial/seeds-react-utilities");
 
 // src/NestedMenu/NestedMenuItem.tsx
 var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box5 = require("@sproutsocial/seeds-react-box");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -4147,15 +2460,15 @@ var NestedMenuItem = ({
       }
     }
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_seeds_react_box5.Box, { display: "flex", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_seeds_react_box5.Box, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_seeds_react_icon5.Icon, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_seeds_react_icon5.Icon, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -4166,10 +2479,10 @@ var NestedMenuContent = ({
 }) => {
   const { highlightedIndex, items } = useMenuContentContext();
   const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
-  const internalRef = (0, import_react28.useRef)(null);
+  const internalRef = (0, import_react26.useRef)(null);
   const innerRef = (0, import_seeds_react_utilities3.mergeRefs)(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     internalRef?.current?.focus();
   }, []);
   const onKeyDown = (e) => {
@@ -4192,7 +2505,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     MenuContent,
     {
       onKeyDown,
@@ -4207,19 +2520,19 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 // src/NestedMenu/NestedMenuHeader.tsx
 var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
 var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
-var import_react29 = require("motion/react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react27 = require("motion/react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var NestedMenuHeader = ({
   backArrowLabel,
   ...props
 }) => {
   const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
   const showBackArrow = selectedMenuPath.length > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react29.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-        import_react29.motion.div,
+      leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react27.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react27.motion.div,
         {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
@@ -4227,7 +2540,7 @@ var NestedMenuHeader = ({
             opacity: 0,
             transition: { duration: animationSpeed }
           },
-          children: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_seeds_react_icon6.Icon, { name: "arrow-left" }) }) : void 0
+          children: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_seeds_react_icon6.Icon, { name: "arrow-left" }) }) : void 0
         },
         `${selectedMenuPath}-header--button`
       ) }),
@@ -4236,9 +2549,12 @@ var NestedMenuHeader = ({
   );
 };
 
+// src/NestedMenu/NestedMenu.tsx
+var import_unitless3 = require("@sproutsocial/seeds-motion/unitless");
+
 // src/NestedMenu/NestedMenuRoot.tsx
-var import_react30 = __toESM(require("react"));
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react28 = __toESM(require("react"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var NestedMenuRoot = ({
   children,
   menuToggleElement,
@@ -4246,32 +2562,32 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  import_react30.default.useEffect(() => {
+  import_react28.default.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
     menuContext.selectedItem,
     menuContext.selectedItems?.length
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MenuContentProvider, { menuContext, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MenuContentProvider, { menuContext, children });
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
-var import_react31 = require("motion/react");
-var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var StyledDiv = (0, import_styled_components15.default)(import_react31.motion.div)`
+var import_react29 = require("motion/react");
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var StyledDiv = (0, import_styled_components12.default)(import_react29.motion.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
   content,
   menuToggleElement,
-  width: width2,
+  width,
   onClose,
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     MenuPopout,
     {
       lockPlacement: true,
@@ -4282,10 +2598,10 @@ var NestedMenuPopout = ({
       isOpen: !!rootMenuContextProps.isOpen,
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
-      width: width2,
-      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      width,
+      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         MenuToggleProvider,
         {
           menuContext: {
@@ -4301,10 +2617,10 @@ var NestedMenuPopout = ({
 };
 
 // src/NestedMenu/NestedMenu.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var useId = () => {
-  const [id, setId] = (0, import_react32.useState)();
-  (0, import_react32.useEffect)(() => {
+  const [id, setId] = (0, import_react30.useState)();
+  (0, import_react30.useEffect)(() => {
     const uId = (0, import_lodash.default)();
     setId(uId);
   }, []);
@@ -4320,7 +2636,7 @@ var NestedMenu = ({
     scheduleUpdateRef: externalPopoutUpdateRef,
     ...restPopoutProps
   } = {},
-  width: width2 = "300px",
+  width = "300px",
   stateReducer: rootExternalStateReducer,
   id: externalNestedMenuId,
   ...useSelectProps
@@ -4330,7 +2646,7 @@ var NestedMenu = ({
   });
   const uniqueId2 = useId();
   const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId2}`;
-  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react32.useState)(false);
+  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react30.useState)(false);
   const useSelectReturnProps = (0, import_downshift9.useSelect)({
     ...defaultDownshiftProps.select,
     id: nestedMenuId,
@@ -4346,7 +2662,7 @@ var NestedMenu = ({
     ...useSelectReturnProps,
     ...restDefaults
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!useSelectReturnProps.isOpen) {
       setHasLoadedOnce(false);
     } else {
@@ -4364,16 +2680,16 @@ var NestedMenu = ({
     onIsOpenChange: onNestedIsOpenChange
   };
   rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
-  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react32.useState)([initialMenuId]);
-  const [activeMenuContext, setActiveMenuContext] = (0, import_react32.useState)(defaultMenuContext);
-  const [currentMenuId, setCurrentMenuId] = (0, import_react32.useState)(initialMenuId);
-  const [isAdding, setIsAdding] = (0, import_react32.useState)(false);
-  const popoutUpdateRef = (0, import_react32.useRef)();
+  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react30.useState)([initialMenuId]);
+  const [activeMenuContext, setActiveMenuContext] = (0, import_react30.useState)(defaultMenuContext);
+  const [currentMenuId, setCurrentMenuId] = (0, import_react30.useState)(initialMenuId);
+  const [isAdding, setIsAdding] = (0, import_react30.useState)(false);
+  const popoutUpdateRef = (0, import_react30.useRef)();
   const setSelectedMenuId = (id) => {
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
@@ -4405,7 +2721,7 @@ var NestedMenu = ({
     nestedMenuStateReducer,
     externalStateReducer
   );
-  const animationSpeed = MOTION_DURATION_FAST;
+  const animationSpeed = import_unitless3.MOTION_DURATION_FAST;
   const contentVariants = {
     arrive: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
       opacity: 0,
@@ -4467,8 +2783,8 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-        import_react33.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react31.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        import_react31.motion.div,
         {
           variants: contentVariants,
           initial: "arrive",
@@ -4476,7 +2792,7 @@ var NestedMenu = ({
           exit: "leave",
           custom: { isAdding, hasLoadedOnce },
           children: [
-            MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               MenuHeaderComponent,
               {
                 backArrowLabel,
@@ -4484,7 +2800,7 @@ var NestedMenu = ({
               }
             ),
             children && children,
-            menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               NestedMenuContent,
               {
                 menuItems,
@@ -4498,10 +2814,10 @@ var NestedMenu = ({
     ),
     ...restMenuProps
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     popoutUpdateRef.current?.();
   }, [nestedMenuProps.children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     NestedMenuProvider,
     {
       ...{
@@ -4515,24 +2831,24 @@ var NestedMenu = ({
         setActiveMenuContext,
         animationSpeed
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            import_react33.motion.div,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react31.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            import_react31.motion.div,
             {
               variants: menuVariants,
               initial: "arrive",
               animate: "enter",
               exit: "leave",
               custom: { isAdding, hasLoadedOnce },
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MenuComponent, { ...nestedMenuProps })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuComponent, { ...nestedMenuProps })
             },
             `${currentMenuId}-content`
           ) }),
           menuToggleElement,
-          width: width2,
+          width,
           scheduleUpdateRef: (callback) => {
             popoutUpdateRef.current = callback;
             externalPopoutUpdateRef?.(callback);
@@ -4605,13 +2921,4 @@ var NestedMenu = ({
   useSelectStateReducer,
   useSelectStateReducerForMulti
 });
-/*! Bundled license information:
-
-object-assign/index.js:
-  (*
-  object-assign
-  (c) Sindre Sorhus
-  @license MIT
-  *)
-*/
 //# sourceMappingURL=index.js.map