@sproutsocial/seeds-react-menu 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,2651 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../../node_modules/object-assign/index.js
+var require_object_assign = __commonJS({
+  "../../node_modules/object-assign/index.js"(exports, module) {
+    "use strict";
+    var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+    var hasOwnProperty = Object.prototype.hasOwnProperty;
+    var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+    function toObject(val) {
+      if (val === null || val === void 0) {
+        throw new TypeError("Object.assign cannot be called with null or undefined");
+      }
+      return Object(val);
+    }
+    function shouldUseNative() {
+      try {
+        if (!Object.assign) {
+          return false;
+        }
+        var test1 = new String("abc");
+        test1[5] = "de";
+        if (Object.getOwnPropertyNames(test1)[0] === "5") {
+          return false;
+        }
+        var test2 = {};
+        for (var i = 0; i < 10; i++) {
+          test2["_" + String.fromCharCode(i)] = i;
+        }
+        var order2 = Object.getOwnPropertyNames(test2).map(function(n) {
+          return test2[n];
+        });
+        if (order2.join("") !== "0123456789") {
+          return false;
+        }
+        var test3 = {};
+        "abcdefghijklmnopqrst".split("").forEach(function(letter) {
+          test3[letter] = letter;
+        });
+        if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
+          return false;
+        }
+        return true;
+      } catch (err) {
+        return false;
+      }
+    }
+    module.exports = shouldUseNative() ? Object.assign : function(target, source) {
+      var from;
+      var to = toObject(target);
+      var symbols;
+      for (var s = 1; s < arguments.length; s++) {
+        from = Object(arguments[s]);
+        for (var key in from) {
+          if (hasOwnProperty.call(from, key)) {
+            to[key] = from[key];
+          }
+        }
+        if (getOwnPropertySymbols) {
+          symbols = getOwnPropertySymbols(from);
+          for (var i = 0; i < symbols.length; i++) {
+            if (propIsEnumerable.call(from, symbols[i])) {
+              to[symbols[i]] = from[symbols[i]];
+            }
+          }
+        }
+      }
+      return to;
+    };
+  }
+});
+
+// src/MenuItem/MenuItem.tsx
+import { useContext as useContext2 } from "react";
+
+// src/MenuContext.tsx
+import {
+  createContext,
+  useMemo,
+  useContext
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultMenuContext = {
+  items: [],
+  itemsMap: {}
+};
+var useMenu = ({
+  items = [],
+  isListbox = false,
+  isOpen = false,
+  ...rest
+} = {}) => {
+  const menuProps = useMemo(() => ({ ...rest }), [rest]);
+  const itemsMap = useMemo(
+    () => items.reduce((map, item) => {
+      map[`${item.id}`] = item;
+      return map;
+    }, {}),
+    [items]
+  );
+  return {
+    isOpen,
+    isListbox,
+    items,
+    itemsMap,
+    ...menuProps
+  };
+};
+var MenuContext = createContext(defaultMenuContext);
+var MenuProvider = ({
+  children,
+  ...overrides
+}) => {
+  const filterContext = useMenu(overrides);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { ...filterContext }, children });
+};
+var useMenuContext = () => {
+  const menuContextValue = useContext(MenuContext);
+  if (menuContextValue === null) {
+    throw new Error(
+      "useMenuContext must be used within a <MenuContext.Provider />"
+    );
+  }
+  return menuContextValue;
+};
+
+// src/constants.ts
+var MENU_ITEM_ROLES = {
+  MENUITEM: "menuitem",
+  LISTITEM: "listitem",
+  OPTION: "option",
+  RADIO: "menuitemradio",
+  CHECKBOX: "menuitemcheckbox"
+};
+
+// src/MenuItem/styles.tsx
+import styled, { css as css4 } from "styled-components";
+
+// ../../node_modules/@babel/runtime/helpers/esm/extends.js
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p2) {
+    o2.__proto__ = p2;
+    return o2;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o2) {
+    return o2.__proto__ || Object.getPrototypeOf(o2);
+  };
+  return _getPrototypeOf(o);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
+function _isNativeFunction(fn) {
+  try {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+  } catch (e) {
+    return typeof fn === "function";
+  }
+}
+
+// ../../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(Class) {
+  var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
+  _wrapNativeSuper = function _wrapNativeSuper2(Class2) {
+    if (Class2 === null || !_isNativeFunction(Class2))
+      return Class2;
+    if (typeof Class2 !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class2))
+        return _cache.get(Class2);
+      _cache.set(Class2, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(Class2, arguments, _getPrototypeOf(this).constructor);
+    }
+    Wrapper.prototype = Object.create(Class2.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    return _setPrototypeOf(Wrapper, Class2);
+  };
+  return _wrapNativeSuper(Class);
+}
+
+// ../../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/src/index.ts
+import { css } from "styled-components";
+import { theme } from "@sproutsocial/seeds-react-theme";
+var visuallyHidden = css`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+`;
+var focusRing = css`
+  box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
+    0 0px 0px 4px
+      ${curriedTransparentize(0.7, theme.colors.button.primary.background.base)};
+  outline: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+`;
+var pill = css`
+  min-width: ${theme.space[600]};
+  min-height: ${theme.space[600]};
+  padding: ${theme.space[300]};
+  border-radius: ${theme.radii.pill};
+`;
+var disabled = css`
+  opacity: 0.4;
+  pointer-events: none;
+`;
+
+// ../../node_modules/@styled-system/core/dist/index.esm.js
+var import_object_assign = __toESM(require_object_assign());
+var merge = function merge2(a, b) {
+  var result = (0, import_object_assign.default)({}, a, b);
+  for (var key in a) {
+    var _assign;
+    if (!a[key] || typeof b[key] !== "object")
+      continue;
+    (0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a[key], b[key]), _assign));
+  }
+  return result;
+};
+var sort = function sort2(obj) {
+  var next = {};
+  Object.keys(obj).sort(function(a, b) {
+    return a.localeCompare(b, void 0, {
+      numeric: true,
+      sensitivity: "base"
+    });
+  }).forEach(function(key) {
+    next[key] = obj[key];
+  });
+  return next;
+};
+var defaults = {
+  breakpoints: [40, 52, 64].map(function(n) {
+    return n + "em";
+  })
+};
+var createMediaQuery = function createMediaQuery2(n) {
+  return "@media screen and (min-width: " + n + ")";
+};
+var getValue = function getValue2(n, scale) {
+  return get(scale, n, n);
+};
+var get = function get2(obj, key, def, p, undef) {
+  key = key && key.split ? key.split(".") : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var createParser = function createParser2(config9) {
+  var cache = {};
+  var parse = function parse2(props) {
+    var styles = {};
+    var shouldSort = false;
+    var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+    for (var key in props) {
+      if (!config9[key])
+        continue;
+      var sx = config9[key];
+      var raw = props[key];
+      var scale = get(props.theme, sx.scale, sx.defaults);
+      if (typeof raw === "object") {
+        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
+        if (Array.isArray(raw)) {
+          cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
+          styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+          continue;
+        }
+        if (raw !== null) {
+          styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
+          shouldSort = true;
+        }
+        continue;
+      }
+      (0, import_object_assign.default)(styles, sx(raw, scale, props));
+    }
+    if (shouldSort) {
+      styles = sort(styles);
+    }
+    return styles;
+  };
+  parse.config = config9;
+  parse.propNames = Object.keys(config9);
+  parse.cache = cache;
+  var keys = Object.keys(config9).filter(function(k) {
+    return k !== "config";
+  });
+  if (keys.length > 1) {
+    keys.forEach(function(key) {
+      var _createParser;
+      parse[key] = createParser2((_createParser = {}, _createParser[key] = config9[key], _createParser));
+    });
+  }
+  return parse;
+};
+var parseResponsiveStyle = function parseResponsiveStyle2(mediaQueries, sx, scale, raw, _props) {
+  var styles = {};
+  raw.slice(0, mediaQueries.length).forEach(function(value, i) {
+    var media = mediaQueries[i];
+    var style = sx(value, scale, _props);
+    if (!media) {
+      (0, import_object_assign.default)(styles, style);
+    } else {
+      var _assign2;
+      (0, import_object_assign.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign.default)({}, styles[media], style), _assign2));
+    }
+  });
+  return styles;
+};
+var parseResponsiveObject = function parseResponsiveObject2(breakpoints, sx, scale, raw, _props) {
+  var styles = {};
+  for (var key in raw) {
+    var breakpoint = breakpoints[key];
+    var value = raw[key];
+    var style = sx(value, scale, _props);
+    if (!breakpoint) {
+      (0, import_object_assign.default)(styles, style);
+    } else {
+      var _assign3;
+      var media = createMediaQuery(breakpoint);
+      (0, import_object_assign.default)(styles, (_assign3 = {}, _assign3[media] = (0, import_object_assign.default)({}, styles[media], style), _assign3));
+    }
+  }
+  return styles;
+};
+var createStyleFunction = function createStyleFunction2(_ref) {
+  var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
+  properties = properties || [property];
+  var sx = function sx2(value, scale2, _props) {
+    var result = {};
+    var n = transform(value, scale2, _props);
+    if (n === null)
+      return;
+    properties.forEach(function(prop) {
+      result[prop] = n;
+    });
+    return result;
+  };
+  sx.scale = scale;
+  sx.defaults = defaultScale;
+  return sx;
+};
+var system = function system2(args) {
+  if (args === void 0) {
+    args = {};
+  }
+  var config9 = {};
+  Object.keys(args).forEach(function(key) {
+    var conf = args[key];
+    if (conf === true) {
+      config9[key] = createStyleFunction({
+        property: key,
+        scale: key
+      });
+      return;
+    }
+    if (typeof conf === "function") {
+      config9[key] = conf;
+      return;
+    }
+    config9[key] = createStyleFunction(conf);
+  });
+  var parser = createParser(config9);
+  return parser;
+};
+var compose = function compose2() {
+  var config9 = {};
+  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
+    parsers[_key] = arguments[_key];
+  }
+  parsers.forEach(function(parser2) {
+    if (!parser2 || !parser2.config)
+      return;
+    (0, import_object_assign.default)(config9, parser2.config);
+  });
+  var parser = createParser(config9);
+  return parser;
+};
+
+// ../../node_modules/@styled-system/layout/dist/index.esm.js
+var isNumber = function isNumber2(n) {
+  return typeof n === "number" && !isNaN(n);
+};
+var getWidth = function getWidth2(n, scale) {
+  return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
+};
+var config = {
+  width: {
+    property: "width",
+    scale: "sizes",
+    transform: getWidth
+  },
+  height: {
+    property: "height",
+    scale: "sizes"
+  },
+  minWidth: {
+    property: "minWidth",
+    scale: "sizes"
+  },
+  minHeight: {
+    property: "minHeight",
+    scale: "sizes"
+  },
+  maxWidth: {
+    property: "maxWidth",
+    scale: "sizes"
+  },
+  maxHeight: {
+    property: "maxHeight",
+    scale: "sizes"
+  },
+  size: {
+    properties: ["width", "height"],
+    scale: "sizes"
+  },
+  overflow: true,
+  overflowX: true,
+  overflowY: true,
+  display: true,
+  verticalAlign: true
+};
+var layout = system(config);
+var index_esm_default = layout;
+
+// ../../node_modules/@styled-system/color/dist/index.esm.js
+var config2 = {
+  color: {
+    property: "color",
+    scale: "colors"
+  },
+  backgroundColor: {
+    property: "backgroundColor",
+    scale: "colors"
+  },
+  opacity: true
+};
+config2.bg = config2.backgroundColor;
+var color = system(config2);
+var index_esm_default2 = color;
+
+// ../../node_modules/@styled-system/typography/dist/index.esm.js
+var defaults2 = {
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var config3 = {
+  fontFamily: {
+    property: "fontFamily",
+    scale: "fonts"
+  },
+  fontSize: {
+    property: "fontSize",
+    scale: "fontSizes",
+    defaultScale: defaults2.fontSizes
+  },
+  fontWeight: {
+    property: "fontWeight",
+    scale: "fontWeights"
+  },
+  lineHeight: {
+    property: "lineHeight",
+    scale: "lineHeights"
+  },
+  letterSpacing: {
+    property: "letterSpacing",
+    scale: "letterSpacings"
+  },
+  textAlign: true,
+  fontStyle: true
+};
+var typography = system(config3);
+var index_esm_default3 = typography;
+
+// ../../node_modules/@styled-system/flexbox/dist/index.esm.js
+var config4 = {
+  alignItems: true,
+  alignContent: true,
+  justifyItems: true,
+  justifyContent: true,
+  flexWrap: true,
+  flexDirection: true,
+  // item
+  flex: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexBasis: true,
+  justifySelf: true,
+  alignSelf: true,
+  order: true
+};
+var flexbox = system(config4);
+var index_esm_default4 = flexbox;
+
+// ../../node_modules/@styled-system/grid/dist/index.esm.js
+var defaults3 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config5 = {
+  gridGap: {
+    property: "gridGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridColumnGap: {
+    property: "gridColumnGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridRowGap: {
+    property: "gridRowGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridColumn: true,
+  gridRow: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridAutoRows: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridArea: true
+};
+var grid = system(config5);
+var index_esm_default5 = grid;
+
+// ../../node_modules/@styled-system/border/dist/index.esm.js
+var config6 = {
+  border: {
+    property: "border",
+    scale: "borders"
+  },
+  borderWidth: {
+    property: "borderWidth",
+    scale: "borderWidths"
+  },
+  borderStyle: {
+    property: "borderStyle",
+    scale: "borderStyles"
+  },
+  borderColor: {
+    property: "borderColor",
+    scale: "colors"
+  },
+  borderRadius: {
+    property: "borderRadius",
+    scale: "radii"
+  },
+  borderTop: {
+    property: "borderTop",
+    scale: "borders"
+  },
+  borderTopLeftRadius: {
+    property: "borderTopLeftRadius",
+    scale: "radii"
+  },
+  borderTopRightRadius: {
+    property: "borderTopRightRadius",
+    scale: "radii"
+  },
+  borderRight: {
+    property: "borderRight",
+    scale: "borders"
+  },
+  borderBottom: {
+    property: "borderBottom",
+    scale: "borders"
+  },
+  borderBottomLeftRadius: {
+    property: "borderBottomLeftRadius",
+    scale: "radii"
+  },
+  borderBottomRightRadius: {
+    property: "borderBottomRightRadius",
+    scale: "radii"
+  },
+  borderLeft: {
+    property: "borderLeft",
+    scale: "borders"
+  },
+  borderX: {
+    properties: ["borderLeft", "borderRight"],
+    scale: "borders"
+  },
+  borderY: {
+    properties: ["borderTop", "borderBottom"],
+    scale: "borders"
+  }
+};
+config6.borderTopWidth = {
+  property: "borderTopWidth",
+  scale: "borderWidths"
+};
+config6.borderTopColor = {
+  property: "borderTopColor",
+  scale: "colors"
+};
+config6.borderTopStyle = {
+  property: "borderTopStyle",
+  scale: "borderStyles"
+};
+config6.borderTopLeftRadius = {
+  property: "borderTopLeftRadius",
+  scale: "radii"
+};
+config6.borderTopRightRadius = {
+  property: "borderTopRightRadius",
+  scale: "radii"
+};
+config6.borderBottomWidth = {
+  property: "borderBottomWidth",
+  scale: "borderWidths"
+};
+config6.borderBottomColor = {
+  property: "borderBottomColor",
+  scale: "colors"
+};
+config6.borderBottomStyle = {
+  property: "borderBottomStyle",
+  scale: "borderStyles"
+};
+config6.borderBottomLeftRadius = {
+  property: "borderBottomLeftRadius",
+  scale: "radii"
+};
+config6.borderBottomRightRadius = {
+  property: "borderBottomRightRadius",
+  scale: "radii"
+};
+config6.borderLeftWidth = {
+  property: "borderLeftWidth",
+  scale: "borderWidths"
+};
+config6.borderLeftColor = {
+  property: "borderLeftColor",
+  scale: "colors"
+};
+config6.borderLeftStyle = {
+  property: "borderLeftStyle",
+  scale: "borderStyles"
+};
+config6.borderRightWidth = {
+  property: "borderRightWidth",
+  scale: "borderWidths"
+};
+config6.borderRightColor = {
+  property: "borderRightColor",
+  scale: "colors"
+};
+config6.borderRightStyle = {
+  property: "borderRightStyle",
+  scale: "borderStyles"
+};
+var border = system(config6);
+var index_esm_default6 = border;
+
+// ../../node_modules/@styled-system/background/dist/index.esm.js
+var config7 = {
+  background: true,
+  backgroundImage: true,
+  backgroundSize: true,
+  backgroundPosition: true,
+  backgroundRepeat: true
+};
+config7.bgImage = config7.backgroundImage;
+config7.bgSize = config7.backgroundSize;
+config7.bgPosition = config7.backgroundPosition;
+config7.bgRepeat = config7.backgroundRepeat;
+var background = system(config7);
+var index_esm_default7 = background;
+
+// ../../node_modules/@styled-system/position/dist/index.esm.js
+var defaults4 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config8 = {
+  position: true,
+  zIndex: {
+    property: "zIndex",
+    scale: "zIndices"
+  },
+  top: {
+    property: "top",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  right: {
+    property: "right",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  bottom: {
+    property: "bottom",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  left: {
+    property: "left",
+    scale: "space",
+    defaultScale: defaults4.space
+  }
+};
+var position = system(config8);
+var index_esm_default8 = position;
+
+// ../../node_modules/@styled-system/space/dist/index.esm.js
+var defaults5 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var isNumber3 = function isNumber4(n) {
+  return typeof n === "number" && !isNaN(n);
+};
+var getMargin = function getMargin2(n, scale) {
+  if (!isNumber3(n)) {
+    return get(scale, n, n);
+  }
+  var isNegative = n < 0;
+  var absolute = Math.abs(n);
+  var value = get(scale, absolute, absolute);
+  if (!isNumber3(value)) {
+    return isNegative ? "-" + value : value;
+  }
+  return value * (isNegative ? -1 : 1);
+};
+var configs = {};
+configs.margin = {
+  margin: {
+    property: "margin",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginTop: {
+    property: "marginTop",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginRight: {
+    property: "marginRight",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginBottom: {
+    property: "marginBottom",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginLeft: {
+    property: "marginLeft",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginX: {
+    properties: ["marginLeft", "marginRight"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginY: {
+    properties: ["marginTop", "marginBottom"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  }
+};
+configs.margin.m = configs.margin.margin;
+configs.margin.mt = configs.margin.marginTop;
+configs.margin.mr = configs.margin.marginRight;
+configs.margin.mb = configs.margin.marginBottom;
+configs.margin.ml = configs.margin.marginLeft;
+configs.margin.mx = configs.margin.marginX;
+configs.margin.my = configs.margin.marginY;
+configs.padding = {
+  padding: {
+    property: "padding",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingTop: {
+    property: "paddingTop",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingRight: {
+    property: "paddingRight",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingBottom: {
+    property: "paddingBottom",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingLeft: {
+    property: "paddingLeft",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingX: {
+    properties: ["paddingLeft", "paddingRight"],
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingY: {
+    properties: ["paddingTop", "paddingBottom"],
+    scale: "space",
+    defaultScale: defaults5.space
+  }
+};
+configs.padding.p = configs.padding.padding;
+configs.padding.pt = configs.padding.paddingTop;
+configs.padding.pr = configs.padding.paddingRight;
+configs.padding.pb = configs.padding.paddingBottom;
+configs.padding.pl = configs.padding.paddingLeft;
+configs.padding.px = configs.padding.paddingX;
+configs.padding.py = configs.padding.paddingY;
+var margin = system(configs.margin);
+var padding = system(configs.padding);
+var space = compose(margin, padding);
+
+// ../../node_modules/@styled-system/shadow/dist/index.esm.js
+var shadow = system({
+  boxShadow: {
+    property: "boxShadow",
+    scale: "shadows"
+  },
+  textShadow: {
+    property: "textShadow",
+    scale: "shadows"
+  }
+});
+
+// ../../node_modules/@styled-system/css/dist/index.esm.js
+function _extends2() {
+  _extends2 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends2.apply(this, arguments);
+}
+var get3 = function get4(obj, key, def, p, undef) {
+  key = key && key.split ? key.split(".") : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var defaultBreakpoints = [40, 52, 64].map(function(n) {
+  return n + "em";
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var aliases = {
+  bg: "backgroundColor",
+  m: "margin",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  mx: "marginX",
+  my: "marginY",
+  p: "padding",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  px: "paddingX",
+  py: "paddingY"
+};
+var multiples = {
+  marginX: ["marginLeft", "marginRight"],
+  marginY: ["marginTop", "marginBottom"],
+  paddingX: ["paddingLeft", "paddingRight"],
+  paddingY: ["paddingTop", "paddingBottom"],
+  size: ["width", "height"]
+};
+var scales = {
+  color: "colors",
+  backgroundColor: "colors",
+  borderColor: "colors",
+  margin: "space",
+  marginTop: "space",
+  marginRight: "space",
+  marginBottom: "space",
+  marginLeft: "space",
+  marginX: "space",
+  marginY: "space",
+  padding: "space",
+  paddingTop: "space",
+  paddingRight: "space",
+  paddingBottom: "space",
+  paddingLeft: "space",
+  paddingX: "space",
+  paddingY: "space",
+  top: "space",
+  right: "space",
+  bottom: "space",
+  left: "space",
+  gridGap: "space",
+  gridColumnGap: "space",
+  gridRowGap: "space",
+  gap: "space",
+  columnGap: "space",
+  rowGap: "space",
+  fontFamily: "fonts",
+  fontSize: "fontSizes",
+  fontWeight: "fontWeights",
+  lineHeight: "lineHeights",
+  letterSpacing: "letterSpacings",
+  border: "borders",
+  borderTop: "borders",
+  borderRight: "borders",
+  borderBottom: "borders",
+  borderLeft: "borders",
+  borderWidth: "borderWidths",
+  borderStyle: "borderStyles",
+  borderRadius: "radii",
+  borderTopRightRadius: "radii",
+  borderTopLeftRadius: "radii",
+  borderBottomRightRadius: "radii",
+  borderBottomLeftRadius: "radii",
+  borderTopWidth: "borderWidths",
+  borderTopColor: "colors",
+  borderTopStyle: "borderStyles",
+  borderBottomWidth: "borderWidths",
+  borderBottomColor: "colors",
+  borderBottomStyle: "borderStyles",
+  borderLeftWidth: "borderWidths",
+  borderLeftColor: "colors",
+  borderLeftStyle: "borderStyles",
+  borderRightWidth: "borderWidths",
+  borderRightColor: "colors",
+  borderRightStyle: "borderStyles",
+  outlineColor: "colors",
+  boxShadow: "shadows",
+  textShadow: "shadows",
+  zIndex: "zIndices",
+  width: "sizes",
+  minWidth: "sizes",
+  maxWidth: "sizes",
+  height: "sizes",
+  minHeight: "sizes",
+  maxHeight: "sizes",
+  flexBasis: "sizes",
+  size: "sizes",
+  // svg
+  fill: "colors",
+  stroke: "colors"
+};
+var positiveOrNegative = function positiveOrNegative2(scale, value) {
+  if (typeof value !== "number" || value >= 0) {
+    return get3(scale, value, value);
+  }
+  var absolute = Math.abs(value);
+  var n = get3(scale, absolute, absolute);
+  if (typeof n === "string")
+    return "-" + n;
+  return n * -1;
+};
+var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
+  var _extends22;
+  return _extends2({}, acc, (_extends22 = {}, _extends22[curr] = positiveOrNegative, _extends22));
+}, {});
+var responsive = function responsive2(styles) {
+  return function(theme2) {
+    var next = {};
+    var breakpoints = get3(theme2, "breakpoints", defaultBreakpoints);
+    var mediaQueries = [null].concat(breakpoints.map(function(n) {
+      return "@media screen and (min-width: " + n + ")";
+    }));
+    for (var key in styles) {
+      var value = typeof styles[key] === "function" ? styles[key](theme2) : styles[key];
+      if (value == null)
+        continue;
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+        next[media] = next[media] || {};
+        if (value[i] == null)
+          continue;
+        next[media][key] = value[i];
+      }
+    }
+    return next;
+  };
+};
+var css2 = function css3(args) {
+  return function(props) {
+    if (props === void 0) {
+      props = {};
+    }
+    var theme2 = _extends2({}, defaultTheme, {}, props.theme || props);
+    var result = {};
+    var obj = typeof args === "function" ? args(theme2) : args;
+    var styles = responsive(obj)(theme2);
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === "function" ? x(theme2) : x;
+      if (key === "variant") {
+        var variant3 = css3(get3(theme2, val))(theme2);
+        result = _extends2({}, result, {}, variant3);
+        continue;
+      }
+      if (val && typeof val === "object") {
+        result[key] = css3(val)(theme2);
+        continue;
+      }
+      var prop = get3(aliases, key, key);
+      var scaleName = get3(scales, prop);
+      var scale = get3(theme2, scaleName, get3(theme2, prop, {}));
+      var transform = get3(transforms, prop, get3);
+      var value = transform(scale, val, val);
+      if (multiples[prop]) {
+        var dirs = multiples[prop];
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+    return result;
+  };
+};
+var index_esm_default9 = css2;
+
+// ../../node_modules/@styled-system/variant/dist/index.esm.js
+var variant = function variant2(_ref) {
+  var _config;
+  var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
+  var sx;
+  if (Object.keys(variants).length) {
+    sx = function sx2(value, scale2, props) {
+      return index_esm_default9(get(scale2, value, null))(props.theme);
+    };
+  } else {
+    sx = function sx2(value, scale2) {
+      return get(scale2, value, null);
+    };
+  }
+  sx.scale = scale || key;
+  sx.defaults = variants;
+  var config9 = (_config = {}, _config[prop] = sx, _config);
+  var parser = createParser(config9);
+  return parser;
+};
+var buttonStyle = variant({
+  key: "buttons"
+});
+var textStyle = variant({
+  key: "textStyles",
+  prop: "textStyle"
+});
+var colorStyle = variant({
+  key: "colorStyles",
+  prop: "colors"
+});
+
+// ../../node_modules/styled-system/dist/index.esm.js
+var width = index_esm_default.width;
+var height = index_esm_default.height;
+var minWidth = index_esm_default.minWidth;
+var minHeight = index_esm_default.minHeight;
+var maxWidth = index_esm_default.maxWidth;
+var maxHeight = index_esm_default.maxHeight;
+var size = index_esm_default.size;
+var verticalAlign = index_esm_default.verticalAlign;
+var display = index_esm_default.display;
+var overflow = index_esm_default.overflow;
+var overflowX = index_esm_default.overflowX;
+var overflowY = index_esm_default.overflowY;
+var opacity = index_esm_default2.opacity;
+var fontSize = index_esm_default3.fontSize;
+var fontFamily = index_esm_default3.fontFamily;
+var fontWeight = index_esm_default3.fontWeight;
+var lineHeight = index_esm_default3.lineHeight;
+var textAlign = index_esm_default3.textAlign;
+var fontStyle = index_esm_default3.fontStyle;
+var letterSpacing = index_esm_default3.letterSpacing;
+var alignItems = index_esm_default4.alignItems;
+var alignContent = index_esm_default4.alignContent;
+var justifyItems = index_esm_default4.justifyItems;
+var justifyContent = index_esm_default4.justifyContent;
+var flexWrap = index_esm_default4.flexWrap;
+var flexDirection = index_esm_default4.flexDirection;
+var flex = index_esm_default4.flex;
+var flexGrow = index_esm_default4.flexGrow;
+var flexShrink = index_esm_default4.flexShrink;
+var flexBasis = index_esm_default4.flexBasis;
+var justifySelf = index_esm_default4.justifySelf;
+var alignSelf = index_esm_default4.alignSelf;
+var order = index_esm_default4.order;
+var gridGap = index_esm_default5.gridGap;
+var gridColumnGap = index_esm_default5.gridColumnGap;
+var gridRowGap = index_esm_default5.gridRowGap;
+var gridColumn = index_esm_default5.gridColumn;
+var gridRow = index_esm_default5.gridRow;
+var gridAutoFlow = index_esm_default5.gridAutoFlow;
+var gridAutoColumns = index_esm_default5.gridAutoColumns;
+var gridAutoRows = index_esm_default5.gridAutoRows;
+var gridTemplateColumns = index_esm_default5.gridTemplateColumns;
+var gridTemplateRows = index_esm_default5.gridTemplateRows;
+var gridTemplateAreas = index_esm_default5.gridTemplateAreas;
+var gridArea = index_esm_default5.gridArea;
+var borderWidth = index_esm_default6.borderWidth;
+var borderStyle = index_esm_default6.borderStyle;
+var borderColor = index_esm_default6.borderColor;
+var borderTop = index_esm_default6.borderTop;
+var borderRight = index_esm_default6.borderRight;
+var borderBottom = index_esm_default6.borderBottom;
+var borderLeft = index_esm_default6.borderLeft;
+var borderRadius = index_esm_default6.borderRadius;
+var backgroundImage = index_esm_default7.backgroundImage;
+var backgroundSize = index_esm_default7.backgroundSize;
+var backgroundPosition = index_esm_default7.backgroundPosition;
+var backgroundRepeat = index_esm_default7.backgroundRepeat;
+var zIndex = index_esm_default8.zIndex;
+var top = index_esm_default8.top;
+var right = index_esm_default8.right;
+var bottom = index_esm_default8.bottom;
+var left = index_esm_default8.left;
+
+// src/MenuItem/styles.tsx
+import {
+  CheckboxContainer,
+  InputWrapper,
+  PillInput,
+  checkboxContainerHoverStyles,
+  inputWrapperHoverStyles,
+  pillInputHoverStyles
+} from "@sproutsocial/seeds-react-checkbox";
+var highlightedStyles = css4`
+  cursor: pointer;
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.border.base};
+  background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.hover};
+`;
+var MenuItemContainer = styled.li`
+  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};
+  padding: ${({ theme: theme2 }) => theme2.space[300]};
+  list-style-type: none;
+  outline: 0;
+  ${({ theme: theme2 }) => theme2.typography[200]};
+  transition: all ${({ theme: theme2 }) => theme2.duration["fast"]};
+
+  /* Highlighted */
+  ${({ $highlighted }) => $highlighted && highlightedStyles}
+
+  /* Hovered, but not focused */
+  &:hover {
+    ${highlightedStyles}
+    ${CheckboxContainer} {
+      ${checkboxContainerHoverStyles}
+    }
+    ${InputWrapper} {
+      ${inputWrapperHoverStyles}
+    }
+    ${PillInput} {
+      ${pillInputHoverStyles}
+    }
+  }
+
+  /* focused */
+  &:focus {
+    ${focusRing}
+  }
+
+  /* Pressed state*/
+  &:active {
+    background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.active};
+    color: ${({ theme: theme2 }) => theme2.colors.text.inverse};
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    ${disabled}
+  }
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;
+
+// src/MenuItem/MenuItem.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MenuItem = ({
+  id,
+  children,
+  role = "menuitem",
+  label,
+  onClick,
+  onKeyDown,
+  disabled: disabled2 = false,
+  ref,
+  color: color2,
+  ...props
+}) => {
+  const { getItemProps, itemsMap, highlightedIndex, isListbox } = useContext2(MenuContext);
+  const item = itemsMap[id] || { index: 0, id };
+  const highlighted = highlightedIndex === item?.index;
+  return /* @__PURE__ */ jsx2(
+    MenuItemContainer,
+    {
+      id,
+      tabIndex: role !== MENU_ITEM_ROLES.LISTITEM && !disabled2 ? -1 : void 0,
+      $highlighted: highlighted,
+      ...getItemProps?.({
+        ...isListbox ? {} : { role: "menuitem" },
+        item,
+        index: item.index,
+        // This prop no longer supported in downshift
+        // disabled,
+        onClick,
+        onKeyDown
+      }),
+      ...props,
+      children
+    }
+  );
+};
+
+// src/MenuItemSelectable/MenuItemSelectable.tsx
+import { useContext as useContext3, useMemo as useMemo2 } from "react";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
+import { Switch } from "@sproutsocial/seeds-react-switch";
+import { Radio } from "@sproutsocial/seeds-react-radio";
+import { useTheme } from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
+
+// src/MenuItemSelectable/styles.tsx
+import styled2 from "styled-components";
+var MenuItemSelectableRow = styled2.div`
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+`;
+var MenuItemSelectableAction = styled2.div`
+  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+var MenuItemSelectableText = styled2.div`
+  word-break: break-word;
+  flex-grow: 1;
+  min-width: 0;
+`;
+
+// src/MenuItemSelectable/MenuItemSelectable.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var SelectionIndicator = ({
+  id,
+  inputType = "icon",
+  "aria-labelledby": labeledBy,
+  selected
+}) => {
+  const { space: space2 } = useTheme();
+  const inputStub = (e) => {
+    e.stopPropagation();
+  };
+  switch (inputType) {
+    case "checkbox":
+      return /* @__PURE__ */ jsx3(
+        Checkbox,
+        {
+          onChange: () => {
+          },
+          checked: selected,
+          "aria-labelledby": labeledBy,
+          id: `MenuItemSelectable-${inputType}-${id}`
+        }
+      );
+    case "switch":
+      return /* @__PURE__ */ jsx3(
+        Switch,
+        {
+          onClick: inputStub,
+          checked: !!selected,
+          "aria-labelledby": labeledBy,
+          id: `MenuItemSelectable-${inputType}-${id}`
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ jsx3(
+        Radio,
+        {
+          checked: selected,
+          id: `MenuItemSelectable-${inputType}-${id}`,
+          name: `MenuItemSelectable-${inputType}`,
+          "aria-labelledby": labeledBy
+        }
+      );
+    case "icon":
+      if (selected) {
+        return /* @__PURE__ */ jsx3(Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
+      } else {
+        return /* @__PURE__ */ jsx3(Box, { width: space2["400"] });
+      }
+    default:
+      return null;
+  }
+};
+var MenuItemSelectable = ({
+  id,
+  children,
+  inputType = "icon",
+  inputLabel,
+  ...props
+}) => {
+  const { selectedItem, selectedItems, isListbox } = useContext3(MenuContext);
+  const selected = useMemo2(
+    () => selectedItem?.id === id || !!selectedItems?.find((item) => item?.id === id),
+    [selectedItem, selectedItems]
+  );
+  if (isListbox === false) {
+    console.warn(
+      "MenuItemSelectable is invalid when isListbox is false (Menu)"
+    );
+  }
+  const label = inputLabel || `menu-item-child-${id}`;
+  return /* @__PURE__ */ jsx3(
+    MenuItem,
+    {
+      active: selected,
+      id,
+      "aria-selected": selected,
+      ...props,
+      children: /* @__PURE__ */ jsxs(MenuItemSelectableRow, { children: [
+        /* @__PURE__ */ jsx3(MenuItemSelectableAction, { children: /* @__PURE__ */ jsx3(
+          SelectionIndicator,
+          {
+            id,
+            "aria-labelledby": label,
+            inputType,
+            selected: !!selected
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(MenuItemSelectableText, { id: label, children })
+      ] })
+    }
+  );
+};
+
+// src/MenuItemSelectable/MenuItemSelectableTypes.ts
+var INPUT_TYPES = {
+  CHECKBOX: "checkbox",
+  RADIO: "radio",
+  SWITCH: "switch",
+  ICON: "icon"
+};
+
+// src/MenuHeader/MenuHeader.tsx
+import "react";
+
+// src/MenuHeader/styles.tsx
+import styled3 from "styled-components";
+var MenuHeaderContainer = styled3.div`
+  border-color: ${({ theme: theme2 }) => theme2.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};
+  display: flex;
+  padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
+
+  > a {
+    white-space: nowrap;
+  }
+
+  &:first-child {
+    flex-grow: 1;
+    justify-self: start;
+  }
+
+  &:last-child {
+    flex-grow: 1;
+    justify-self: end;
+  }
+
+  ${({ $leftAction, theme: theme2 }) => $leftAction && `
+			padding-left: ${theme2.space[350]};
+	`}
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+  ${position}
+`;
+var MenuTitleText = styled3.h3`
+  color: ${({ theme: theme2 }) => theme2.colors.text.headline};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.bold};
+  margin: 0px;
+  flex-grow: 2;
+  justify-self: start;
+
+  ${({ $leftAction, theme: theme2 }) => $leftAction && `
+			padding-left: ${theme2.space[350]};
+	`}
+
+  ${({ theme: theme2 }) => theme2.typography[200]}
+`;
+var MenuChildrenContainer = styled3.div`
+  grid-column: 1 / -1;
+  margin-top: ${({ theme: theme2 }) => theme2.space[300]};
+`;
+
+// src/MenuHeader/MenuHeader.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var MenuHeader = ({
+  children,
+  title,
+  leftAction,
+  rightAction,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
+    leftAction && leftAction,
+    title && /* @__PURE__ */ jsx4(MenuTitleText, { $leftAction: !!leftAction, children: title }),
+    rightAction && rightAction,
+    children && /* @__PURE__ */ jsx4(MenuChildrenContainer, { children })
+  ] }) });
+};
+
+// src/MenuContent/styles.tsx
+import styled4 from "styled-components";
+var StyledMenuContent = styled4.ul`
+  margin: 0;
+  padding: ${({ theme: theme2 }) => theme2.space[300]} 0;
+  &:focus {
+    ${focusRing}
+  }
+`;
+
+// src/MenuContent/MenuContent.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MenuContent = ({
+  id = "menu_content",
+  children,
+  ...rest
+}) => {
+  const { getToggleButtonProps } = useMenuContext();
+  return /* @__PURE__ */ jsx5(
+    StyledMenuContent,
+    {
+      autoFocus: true,
+      id,
+      tabIndex: 0,
+      onKeyDown: getToggleButtonProps?.().onKeyDown,
+      "aria-activedescendant": getToggleButtonProps?.()["aria-activedescendant"],
+      ...rest,
+      children
+    }
+  );
+};
+
+// src/MenuFooter/MenuFooter.tsx
+import "react";
+
+// src/MenuFooter/styles.tsx
+import styled5 from "styled-components";
+import { Box as Box2 } from "@sproutsocial/seeds-react-box";
+var StyledMenuFooterBox = styled5(Box2)`
+  padding: ${(p) => p.theme.space[350]};
+  border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
+`;
+
+// src/MenuFooter/MenuFooter.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MenuFooter = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx6(StyledMenuFooterBox, { ...rest, children });
+};
+
+// src/MenuGroup/MenuGroup.tsx
+import "react";
+
+// src/MenuGroup/styles.tsx
+import styled7 from "styled-components";
+
+// ../seeds-react-text/dist/esm/index.js
+import "react";
+import styled22 from "styled-components";
+import styled6, { css as css5 } from "styled-components";
+import {
+  COMMON,
+  LAYOUT,
+  FLEXBOX,
+  GRID,
+  TYPOGRAPHY
+} from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx7 } from "react/jsx-runtime";
+import "react";
+var Container = styled6.span`
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+  font-family: ${(props) => props.theme.fontFamily};
+  font-style: ${(props) => {
+  return props.isItalicized && "italic";
+}};
+
+  ${(props) => props.truncated && css5`
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    `}
+
+  ${(props) => props.breakWord && css5`
+      word-break: break-word;
+      hyphens: auto;
+    `}
+
+  ${COMMON}
+  ${LAYOUT}
+  ${FLEXBOX}
+  ${GRID}
+  ${TYPOGRAPHY}
+`;
+var styles_default = Container;
+var Headline = styled22(styles_default)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[400]}
+`;
+var SubHeadline = styled22(styles_default)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[300]}
+`;
+var SmallSubHeadline = styled22(styles_default)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[200]}
+`;
+var Byline = styled22(styles_default)`
+  color: ${(props) => props.theme.colors.text.subtext};
+  ${(props) => props.theme.typography[200]}
+`;
+var SmallByline = styled22(styles_default)`
+  color: ${(props) => props.theme.colors.text.subtext};
+  ${(props) => props.theme.typography[100]}
+`;
+var BodyCopy = styled22(styles_default)`
+  color: ${(props) => props.theme.colors.text.body};
+  ${(props) => props.theme.typography[300]}
+`;
+var SmallBodyCopy = styled22(styles_default)`
+  color: ${(props) => props.theme.colors.text.body};
+  ${(props) => props.theme.typography[200]}
+`;
+var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
+  const qaText = typeof children === "string" ? children : void 0;
+  return /* @__PURE__ */ jsx7(
+    styles_default,
+    {
+      typeScale: fontSize2,
+      "data-qa-text": qaText,
+      color: color2,
+      ...qa,
+      ...rest,
+      children
+    }
+  );
+};
+Headline.displayName = "Text.Headline";
+SubHeadline.displayName = "Text.SubHeadline";
+SmallSubHeadline.displayName = "Text.SmallSubHeadline";
+Byline.displayName = "Text.Byline";
+SmallByline.displayName = "Text.SmallByline";
+BodyCopy.displayName = "Text.BodyCopy";
+SmallBodyCopy.displayName = "Text.SmallBodyCopy";
+Text.Headline = Headline;
+Text.SubHeadline = SubHeadline;
+Text.SmallSubHeadline = SmallSubHeadline;
+Text.Byline = Byline;
+Text.SmallByline = SmallByline;
+Text.BodyCopy = BodyCopy;
+Text.SmallBodyCopy = SmallBodyCopy;
+var Text_default = Text;
+var src_default = Text_default;
+
+// src/MenuGroup/styles.tsx
+var StyledMenuGroup = styled7.li`
+  &:not(:last-child) {
+    border-bottom: 1px solid
+      ${({ theme: theme2 }) => theme2.colors.container.border.base};
+  }
+  list-style: none;
+  margin: 0;
+  ${border}
+  ${position}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;
+var StyledTitle = styled7(src_default.SmallSubHeadline)`
+  margin: ${({ theme: theme2 }) => theme2.space[200]} 0px
+    ${({ theme: theme2 }) => theme2.space[300]} ${({ theme: theme2 }) => theme2.space[300]};
+`;
+var StyledMenuGroupUl = styled7.ul`
+  margin: 0;
+  padding: ${({ theme: theme2 }) => theme2.space[300]};
+`;
+
+// src/MenuGroup/MenuGroup.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var MenuGroup = ({
+  titleAs = "h3",
+  children,
+  title,
+  color: color2,
+  ...rest
+}) => {
+  const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
+  return /* @__PURE__ */ jsxs3(
+    StyledMenuGroup,
+    {
+      role: "group",
+      "aria-labelledby": title ? titleId : void 0,
+      color: color2,
+      ...rest,
+      children: [
+        title && /* @__PURE__ */ jsx8(StyledTitle, { as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ jsx8(StyledMenuGroupUl, { children })
+      ]
+    }
+  );
+};
+
+// src/MenuRoot/MenuRoot.tsx
+import { useCallback } from "react";
+import styled8 from "styled-components";
+import { Popout } from "@sproutsocial/seeds-react-popout";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var CustomPopoutContent = styled8(Popout.Content)`
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+`;
+var MenuRoot = ({
+  children,
+  triggerElement,
+  popoutProps,
+  width: width2 = "300px",
+  ...contextProps
+}) => {
+  const { isListbox, isOpen, openMenu, closeMenu, getMenuProps } = contextProps;
+  const setIsOpen = useCallback(
+    (newIsOpen) => {
+      newIsOpen ? openMenu?.() : closeMenu?.();
+    },
+    [openMenu, closeMenu]
+  );
+  return /* @__PURE__ */ jsx9(MenuProvider, { ...contextProps, children: /* @__PURE__ */ jsx9(
+    Popout,
+    {
+      isOpen: !!isOpen,
+      setIsOpen,
+      content: /* @__PURE__ */ jsx9(CustomPopoutContent, { width: width2, children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ...getMenuProps?.(
+            {
+              ...isListbox ? {} : { role: "menu" }
+            },
+            // Suppress ref error for now
+            { suppressRefError: true }
+          ),
+          children
+        }
+      ) }),
+      focusLockProps: {
+        // correct jerking motion when scrolling while the Popout is open
+        // returnFocus: false,
+        crossFrame: false
+      },
+      disableWrapperAria: true,
+      ...popoutProps,
+      children: triggerElement
+    }
+  ) });
+};
+
+// src/MenuLabel.tsx
+import "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var MenuLabel = ({ children, ...rest }) => {
+  const { getLabelProps } = useMenuContext();
+  return /* @__PURE__ */ jsx10(Text_default, { as: "label", color: "text.body", ...getLabelProps?.(), ...rest, children });
+};
+
+// src/MenuToggleButton.tsx
+import { useContext as useContext4 } from "react";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var MenuToggleButton = ({
+  children,
+  ...rest
+}) => {
+  const { getToggleButtonProps, isListbox, getDropdownProps } = useContext4(MenuContext);
+  return /* @__PURE__ */ jsx11(
+    Button,
+    {
+      appearance: "secondary",
+      ...getToggleButtonProps?.({
+        // Decide if we want the preventKeyAction stuff. Maybe create a prop to allow for this to be overriden.
+        ...getDropdownProps?.({ preventKeyAction: true }),
+        refKey: "innerRef",
+        ...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
+      }),
+      ...rest,
+      children
+    }
+  );
+};
+
+// src/ActionMenu/ActionMenu.tsx
+import "react";
+import {
+  useSelect as useSelect2
+} from "downshift";
+
+// src/hooks/useItemsFromChildren.tsx
+import React10, { useMemo as useMemo3 } from "react";
+var walkAllChildren = (children, callback) => {
+  const walk = (element, parents2) => {
+    if (element === null || element === void 0)
+      return;
+    callback(element, parents2);
+    const newParents = [...parents2, element];
+    const children2 = element.props?.children;
+    React10.Children.toArray(children2).forEach((child) => {
+      walk(child, newParents);
+    });
+  };
+  const parents = [];
+  React10.Children.toArray(children).forEach((child) => {
+    walk(child, parents);
+  });
+};
+var checkIfIsElement = (element, name) => {
+  return !!(element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string" && element.type.name === name);
+};
+var getAllMenuItems = (children) => {
+  const allMenuItems = [];
+  walkAllChildren(children, (element, parents) => {
+    if (checkIfIsElement(element, "MenuItem") || checkIfIsElement(element, "MenuItemSelectable")) {
+      allMenuItems.push({
+        element,
+        parents
+      });
+    }
+  });
+  return allMenuItems;
+};
+var useItemsFromChildren = ({
+  children
+}) => {
+  const { allMenuItems, menuItemsMap } = useMemo3(() => {
+    const allMenuItemElements = getAllMenuItems(children);
+    const menuItemsMap2 = {};
+    const allMenuItems2 = allMenuItemElements.map(
+      ({ element, parents }, index) => {
+        const item = {
+          id: element.props.id,
+          disabled: element.props.disabled,
+          index,
+          element,
+          parents
+        };
+        menuItemsMap2[`${item.id}`] = item;
+        return item;
+      }
+    );
+    return { allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2 };
+  }, [children]);
+  return { allMenuItems, menuItemsMap };
+};
+
+// src/reducers/useSelectStateReducer.tsx
+import { useSelect } from "downshift";
+var useSelectStateReducer = (state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonBlur:
+      return {
+        ...changes,
+        // keep menu open on blur
+        isOpen: true
+      };
+    default:
+      return changes;
+  }
+};
+var defaultUseSelectProps = {
+  stateReducer: useSelectStateReducer,
+  isItemDisabled: (item) => !!item.disabled
+};
+
+// src/utils/itemToString.ts
+var itemToString = (item) => {
+  return item ? item.id : "";
+};
+
+// src/ActionMenu/ActionMenu.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ActionMenu = ({
+  children,
+  stateReducer: externalStateReducer,
+  ...useSelectProps
+}) => {
+  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const handleStateChange = (changes) => {
+    const { selectedItem } = changes;
+    if (selectedItem.element?.props?.disabled) {
+      return;
+    }
+    if (changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton) {
+      const isEnterKeyDown = changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter;
+      const selectedItemProps = selectedItem.element?.props;
+      const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
+        key: isEnterKeyDown ? "Enter" : " ",
+        code: isEnterKeyDown ? "Enter" : "Space",
+        bubbles: true,
+        cancelable: true,
+        view: window
+      });
+      selectedItemProps?.onClick?.(
+        syntheticKeyboardEvent
+      );
+    }
+  };
+  const { isOpen, ...useSelectReturnProps } = useSelect2({
+    ...defaultUseSelectProps,
+    items: allMenuItems,
+    itemToString,
+    onSelectedItemChange: handleStateChange,
+    stateReducer: (state, actionAndChanges) => {
+      let newState;
+      newState = useSelectStateReducer(state, actionAndChanges);
+      return externalStateReducer ? externalStateReducer(state, {
+        ...actionAndChanges,
+        changes: newState
+      }) : newState;
+    },
+    ...useSelectProps
+  });
+  return /* @__PURE__ */ jsx12(
+    MenuRoot,
+    {
+      ...{
+        isListbox: false,
+        items: allMenuItems,
+        itemsMap: menuItemsMap,
+        itemToString,
+        isOpen,
+        ...useSelectProps,
+        ...useSelectReturnProps
+      },
+      children
+    }
+  );
+};
+
+// src/SingleSelectMenu/SingleSelectMenu.tsx
+import "react";
+import { useSelect as useSelect3 } from "downshift";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var SingleSelectMenu = ({
+  children,
+  stateReducer: externalStateReducer,
+  ...useSelectProps
+}) => {
+  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const { isOpen, ...useSelectReturnProps } = useSelect3({
+    ...defaultUseSelectProps,
+    items: allMenuItems,
+    itemToString,
+    stateReducer: (state, actionAndChanges) => {
+      let newState;
+      newState = useSelectStateReducer(state, actionAndChanges);
+      return externalStateReducer ? externalStateReducer(state, {
+        ...actionAndChanges,
+        changes: newState
+      }) : newState;
+    },
+    ...useSelectProps
+  });
+  return /* @__PURE__ */ jsx13(
+    MenuRoot,
+    {
+      ...{
+        isListbox: true,
+        items: allMenuItems,
+        itemsMap: menuItemsMap,
+        itemToString,
+        isOpen,
+        ...useSelectProps,
+        ...useSelectReturnProps
+      },
+      children
+    }
+  );
+};
+
+// src/MultiSelectMenu/MultiSelectMenu.tsx
+import "react";
+import {
+  useSelect as useSelect4,
+  useMultipleSelection
+} from "downshift";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var selectReducerForMultiSelect = (state, actionAndChanges) => {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case useSelect4.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect4.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect4.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        // keep the menu open after selection.
+        // TODO: Confirm that keeping highlightedIndex the same is the desired UX
+        // highlightedIndex: 0, // with the first option highlighted.
+        highlightedIndex: state.highlightedIndex
+        // keep highlightedIndex the same instead of returning to 0
+      };
+  }
+  return changes;
+};
+var MultiSelectMenu = ({
+  children,
+  stateReducer: externalStateReducer,
+  getA11yMultiStatusMessage,
+  onMultiSelectStateChange,
+  multiSelectStateReducer,
+  ...useSelectProps
+}) => {
+  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const multiSelectOverrides = Object.entries({
+    ...useSelectProps,
+    getA11yStatusMessage: getA11yMultiStatusMessage,
+    onStateChange: onMultiSelectStateChange,
+    stateReducer: multiSelectStateReducer
+  }).reduce(
+    (a, [k, v]) => v ? (a[k] = v, a) : a,
+    {}
+  );
+  const {
+    getSelectedItemProps,
+    addSelectedItem,
+    removeSelectedItem,
+    selectedItems,
+    getDropdownProps,
+    ...useMultipleSelectionReturnProps
+  } = useMultipleSelection(multiSelectOverrides);
+  const { isOpen, ...useSelectReturnProps } = useSelect4({
+    ...defaultUseSelectProps,
+    items: allMenuItems,
+    itemToString,
+    selectedItem: null,
+    defaultHighlightedIndex: 0,
+    stateReducer: (state, actionAndChanges) => {
+      let newState;
+      newState = useSelectStateReducer(state, actionAndChanges);
+      newState = selectReducerForMultiSelect(state, {
+        ...actionAndChanges,
+        changes: newState
+      });
+      return externalStateReducer ? externalStateReducer(state, {
+        ...actionAndChanges,
+        changes: newState
+      }) : newState;
+    },
+    onStateChange: ({ type, selectedItem: newSelectedItem }) => {
+      switch (type) {
+        case useSelect4.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect4.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+        case useSelect4.stateChangeTypes.ItemClick:
+        case useSelect4.stateChangeTypes.ToggleButtonBlur:
+          if (!newSelectedItem)
+            break;
+          if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
+            removeSelectedItem(newSelectedItem);
+          } else {
+            addSelectedItem(newSelectedItem);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    ...useSelectProps
+  });
+  return /* @__PURE__ */ jsx14(
+    MenuRoot,
+    {
+      ...{
+        isListbox: true,
+        items: allMenuItems,
+        itemsMap: menuItemsMap,
+        itemToString,
+        isOpen,
+        getSelectedItemProps,
+        addSelectedItem,
+        removeSelectedItem,
+        selectedItems,
+        getDropdownProps,
+        getA11yMultiStatusMessage,
+        onMultiSelectStateChange,
+        multiSelectStateReducer,
+        ...useSelectProps,
+        ...useSelectReturnProps,
+        ...useMultipleSelectionReturnProps
+      },
+      children
+    }
+  );
+};
+export {
+  ActionMenu,
+  INPUT_TYPES,
+  MenuContent,
+  MenuContext,
+  MenuFooter,
+  MenuGroup,
+  MenuHeader,
+  MenuItem,
+  MenuItemContainer,
+  MenuItemSelectable,
+  MenuItemSelectableAction,
+  MenuItemSelectableRow,
+  MenuItemSelectableText,
+  MenuLabel,
+  MenuProvider,
+  MenuRoot,
+  MenuToggleButton,
+  MultiSelectMenu,
+  SelectionIndicator,
+  SingleSelectMenu,
+  StyledMenuGroup,
+  StyledMenuGroupUl,
+  StyledTitle,
+  defaultUseSelectProps,
+  useItemsFromChildren,
+  useMenu,
+  useMenuContext,
+  useSelectStateReducer
+};
+/*! Bundled license information:
+
+object-assign/index.js:
+  (*
+  object-assign
+  (c) Sindre Sorhus
+  @license MIT
+  *)
+*/
+//# sourceMappingURL=index.js.map