@sproutsocial/racine 25.11.0 → 26.1.0

package/dist/esm/index.js

@@ -0,0 +1,1461 @@
+// src/index.ts
+import { IllustrationNames } from "@sproutsocial/seeds-illustrations";
+import { LogoNamesWithoutVariants } from "@sproutsocial/seeds-partner-logos";
+export * from "@sproutsocial/seeds-react-system-props";
+export * from "@sproutsocial/seeds-react-theme";
+import { default as default2 } from "@sproutsocial/seeds-react-theme-provider";
+import {
+  useSelect,
+  useMultiselect,
+  useTextContent as useTextContent2,
+  useMeasure,
+  useInteractiveColor
+} from "@sproutsocial/seeds-react-hooks";
+export * from "@sproutsocial/seeds-react-mixins";
+export * from "@sproutsocial/seeds-react-avatar";
+export * from "@sproutsocial/seeds-react-badge";
+export * from "@sproutsocial/seeds-react-banner";
+export * from "@sproutsocial/seeds-react-box";
+
+// src/Breadcrumb/Breadcrumb.tsx
+import * as React from "react";
+import Icon2 from "@sproutsocial/seeds-react-icon";
+import Link from "@sproutsocial/seeds-react-link";
+
+// src/Menu/Menu.tsx
+import {
+  useCallback as useCallback2,
+  useContext as useContext3,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import styled2 from "styled-components";
+import uniqueId from "lodash.uniqueid";
+import { useTextContent } from "@sproutsocial/seeds-react-hooks";
+
+// src/Menu/utils/innertext.ts
+var hasOwnProperty = (obj, property) => {
+  return Object.prototype.hasOwnProperty.call(obj, property);
+};
+var hasChildren = (node) => {
+  return hasOwnProperty(node, "children");
+};
+var hasProps = (node) => {
+  return hasOwnProperty(node, "props");
+};
+var reduceNodeToString = (previous, current) => {
+  return previous.length ? `${previous} ${innerText(current)}` : innerText(current);
+};
+var innerText = (node) => {
+  if (node === null || typeof node === "undefined" || typeof node === "boolean") {
+    return "";
+  } else if (typeof node === "string") {
+    return node;
+  } else if (typeof node === "number") {
+    return node.toString();
+  } else if (Array.isArray(node)) {
+    return node.reduce(
+      reduceNodeToString,
+      ""
+    );
+  } else if (hasProps(node) && hasChildren(node.props)) {
+    return innerText(node.props.children);
+  }
+  return "";
+};
+
+// src/Menu/Menu.tsx
+import { disabled as disabled2 } from "@sproutsocial/seeds-react-mixins";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Checkbox from "@sproutsocial/seeds-react-checkbox";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Input from "@sproutsocial/seeds-react-input";
+import Popout from "@sproutsocial/seeds-react-popout";
+import Radio from "@sproutsocial/seeds-react-radio";
+import Switch2 from "@sproutsocial/seeds-react-switch";
+import Text from "@sproutsocial/seeds-react-text";
+
+// src/Menu/utils/constants.ts
+var MENU_ROLES = Object.freeze({
+  MENU: "menu",
+  LIST: "list",
+  LISTBOX: "listbox"
+});
+var MENU_ITEM_ROLES = Object.freeze({
+  MENUITEM: "menuitem",
+  LISTITEM: "listitem",
+  OPTION: "option",
+  RADIO: "menuitemradio",
+  CHECKBOX: "menuitemcheckbox"
+});
+
+// src/Menu/utils/descendants.tsx
+import {
+  createContext,
+  useState,
+  useLayoutEffect,
+  useEffect,
+  useContext,
+  useCallback,
+  useMemo,
+  useRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var noop = () => {
+};
+function usePrevious(value) {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+function wrapEvent(theirHandler, ourHandler) {
+  return (event) => {
+    theirHandler && theirHandler(event);
+    if (!event.defaultPrevented) {
+      return ourHandler(event);
+    }
+  };
+}
+function canUseDOM() {
+  return typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+}
+var useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
+function createNamedContext(name, defaultValue) {
+  const Ctx = createContext(defaultValue);
+  Ctx.displayName = name;
+  return Ctx;
+}
+function createDescendantContext(name, initialValue = {
+  descendants: [],
+  registerDescendant: noop,
+  unregisterDescendant: noop
+}) {
+  return createNamedContext(name, {
+    ...initialValue
+  });
+}
+function useDescendant({ context, element, ...rest }, indexProp) {
+  let [, forceUpdate] = useState();
+  let { registerDescendant, unregisterDescendant, descendants } = useContext(context);
+  useIsomorphicLayoutEffect(() => {
+    if (!element) forceUpdate({});
+    registerDescendant({
+      element,
+      ...rest
+    });
+    return () => unregisterDescendant(element);
+  }, [element, ...Object.values(rest)]);
+  return indexProp ? indexProp : descendants.findIndex((item) => item.element === element);
+}
+function useDescendants() {
+  return useState([]);
+}
+function DescendantProvider({
+  context: Ctx,
+  children,
+  items,
+  set
+}) {
+  let registerDescendant = useCallback(
+    ({ element, ...rest }) => {
+      if (!element) {
+        return;
+      }
+      set((items2) => {
+        let newItem;
+        let newItems;
+        if (items2.length === 0) {
+          newItem = {
+            element,
+            index: 0,
+            ...rest
+          };
+          newItems = [...items2, newItem];
+        } else if (items2.find((item) => item.element === element)) {
+          newItems = items2;
+        } else {
+          let index = items2.findIndex((item) => {
+            if (!item.element || !element) {
+              return false;
+            }
+            return Boolean(
+              item.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING
+            );
+          });
+          newItem = {
+            element,
+            index,
+            ...rest
+          };
+          if (index === -1) {
+            newItems = [...items2, newItem];
+          } else {
+            newItems = [
+              ...items2.slice(0, index),
+              newItem,
+              ...items2.slice(index)
+            ];
+          }
+        }
+        return newItems.map((item, index) => ({ ...item, index }));
+      });
+    },
+    // set is a state setter initialized by the useDescendants hook.
+    // We can safely ignore the lint warning here because it will not change
+    // between renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  let unregisterDescendant = useCallback(
+    (element) => {
+      if (!element) {
+        return;
+      }
+      set(
+        (items2) => items2.filter((item) => element !== item.element).map((item, index) => ({ ...item, index }))
+      );
+    },
+    // set is a state setter initialized by the useDescendants hook.
+    // We can safely ignore the lint warning here because it will not change
+    // between renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const value = useMemo(() => {
+    return {
+      descendants: items,
+      registerDescendant,
+      unregisterDescendant
+    };
+  }, [items, registerDescendant, unregisterDescendant]);
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value, children });
+}
+function useDescendantKeyDown(context, options) {
+  let { descendants } = useContext(context);
+  let {
+    callback,
+    currentIndex,
+    filter,
+    key = "index",
+    orientation = "vertical",
+    rotate = true,
+    rtl = false
+  } = options;
+  let index = currentIndex ? currentIndex : -1;
+  return function handleKeyDown(event) {
+    if (![
+      "ArrowDown",
+      "ArrowUp",
+      "ArrowLeft",
+      "ArrowRight",
+      "PageUp",
+      "PageDown",
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      return;
+    }
+    let selectableDescendants = filter ? descendants.filter(filter) : descendants;
+    if (filter) {
+      index = selectableDescendants.findIndex(
+        (descendant) => descendant.index === currentIndex
+      );
+    }
+    if (!selectableDescendants.length) {
+      return;
+    }
+    function getNextOption() {
+      let atBottom = index === selectableDescendants.length - 1;
+      return atBottom ? rotate ? getFirstOption() : selectableDescendants[index] : selectableDescendants[(index + 1) % selectableDescendants.length];
+    }
+    function getPreviousOption() {
+      let atTop = index === 0;
+      return atTop ? rotate ? getLastOption() : selectableDescendants[index] : selectableDescendants[(index - 1 + selectableDescendants.length) % selectableDescendants.length];
+    }
+    function getFirstOption() {
+      return selectableDescendants[0];
+    }
+    function getLastOption() {
+      return selectableDescendants[selectableDescendants.length - 1];
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        if (orientation === "vertical" || orientation === "both") {
+          event.preventDefault();
+          let next = getNextOption();
+          callback(key === "option" ? next : next[key]);
+        }
+        break;
+      case "ArrowUp":
+        if (orientation === "vertical" || orientation === "both") {
+          event.preventDefault();
+          let prev = getPreviousOption();
+          callback(key === "option" ? prev : prev[key]);
+        }
+        break;
+      case "ArrowLeft":
+        if (orientation === "horizontal" || orientation === "both") {
+          event.preventDefault();
+          let nextOrPrev = (rtl ? getNextOption : getPreviousOption)();
+          callback(key === "option" ? nextOrPrev : nextOrPrev[key]);
+        }
+        break;
+      case "ArrowRight":
+        if (orientation === "horizontal" || orientation === "both") {
+          event.preventDefault();
+          let prevOrNext = (rtl ? getPreviousOption : getNextOption)();
+          callback(key === "option" ? prevOrNext : prevOrNext[key]);
+        }
+        break;
+      case "PageUp":
+        event.preventDefault();
+        let prevOrFirst = (event.ctrlKey ? getPreviousOption : getFirstOption)();
+        callback(key === "option" ? prevOrFirst : prevOrFirst[key]);
+        break;
+      case "Home":
+        event.preventDefault();
+        let first = getFirstOption();
+        callback(key === "option" ? first : first[key]);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        let nextOrLast = (event.ctrlKey ? getNextOption : getLastOption)();
+        callback(key === "option" ? nextOrLast : nextOrLast[key]);
+        break;
+      case "End":
+        event.preventDefault();
+        let last = getLastOption();
+        callback(key === "option" ? last : last[key]);
+        break;
+    }
+  };
+}
+
+// src/Menu/utils/hooks.ts
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect2 } from "react";
+import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
+var MenuContext = createContext2({
+  role: MENU_ROLES.MENU,
+  menuRef: {
+    current: null
+  },
+  value: void 0,
+  multiselect: false,
+  onChange: void 0,
+  state: {
+    selectionIndex: 0,
+    filterQuery: "",
+    filteredItems: null,
+    isFilterInputFocused: false,
+    isFooterFocused: false
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setState: () => {
+  },
+  selectCallbacks: {
+    current: []
+  }
+});
+var MenuButtonContext = createContext2({
+  closeOnItemClick: void 0,
+  closePopout: void 0
+});
+var MenuDescendantContext = createDescendantContext(
+  "MenuDescendantContext"
+);
+function filterItemsFromTypeahead(items, string = "") {
+  if (!string) {
+    return null;
+  }
+  return items.filter(
+    ({ value, label }) => value?.toLowerCase().includes(string.toLocaleLowerCase()) || label?.toLowerCase().includes(string.toLocaleLowerCase())
+  ).map(({ index }) => index);
+}
+function useMenuKeyDown() {
+  const {
+    onChange,
+    selectCallbacks,
+    setState,
+    multiselect,
+    state: {
+      filterQuery,
+      selectionIndex,
+      filteredItems,
+      isFilterInputFocused,
+      isFooterFocused
+    }
+  } = useContext2(MenuContext);
+  const { closePopout, closeOnItemClick } = useContext2(MenuButtonContext);
+  const { descendants: items } = useContext2(MenuDescendantContext);
+  const shouldClosePopout = closeOnItemClick && !multiselect;
+  const prevMenuItemsLength = usePrevious(items.length);
+  const prevSelected = usePrevious(items[selectionIndex]);
+  const prevSelectionIndex = usePrevious(selectionIndex);
+  useEffect2(() => {
+    if (items.length && selectionIndex > items.length - 1) {
+      setState({
+        selectionIndex: items.length - 1
+      });
+    } else if (
+      // Checks if
+      //  - menu length has changed
+      //  - selection index has not changed BUT selected item has changed
+      //
+      // This prevents any dynamic adding/removing of menu items from actually
+      // changing a user's expected selection.
+      prevMenuItemsLength !== items.length && selectionIndex > -1 && prevSelected && prevSelectionIndex === selectionIndex && items[selectionIndex] !== prevSelected
+    ) {
+      setState({
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore I'm just going to ignore this one because its really hard to estimate where this stuff is coming from at any given time
+        selectionIndex: items.findIndex((i) => i.index === prevSelected.index)
+      });
+    }
+  }, [
+    setState,
+    items,
+    prevMenuItemsLength,
+    prevSelected,
+    prevSelectionIndex,
+    selectionIndex
+  ]);
+  useEffect2(() => {
+    const newFilteredItems = filterItemsFromTypeahead(items, filterQuery);
+    if (filterQuery && newFilteredItems && filteredItems?.length !== newFilteredItems?.length) {
+      setState({
+        filteredItems: newFilteredItems,
+        selectionIndex: newFilteredItems[0]
+      });
+    } else if (!filterQuery && filteredItems !== null) {
+      setState({
+        filteredItems: null
+      });
+    }
+  }, [filterQuery, items, setState, filteredItems]);
+  const index = items.findIndex(({ index: index2 }) => index2 === selectionIndex);
+  return {
+    activeDescendent: items[selectionIndex],
+    handleKeyDown: wrapEvent(
+      function(event) {
+        const { key } = event;
+        if (isFooterFocused) {
+          return;
+        }
+        switch (key) {
+          case " ":
+            if (isFilterInputFocused) {
+              return;
+            }
+          // falls through
+          // eslint-disable-next-line no-fallthrough
+          case "Enter":
+            const selected = items[selectionIndex];
+            if (selected && !selected.disabled) {
+              event.preventDefault();
+              const func = selectCallbacks.current[selected.index];
+              func?.call && func();
+              onChange && selected.value && onChange(selected.value);
+              shouldClosePopout && closePopout && closePopout();
+            }
+            return;
+          default:
+            return;
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      useDescendantKeyDown(MenuDescendantContext, {
+        currentIndex: index,
+        orientation: "vertical",
+        key: "option",
+        rotate: true,
+        filter: (option) => !option.disabled && (!filteredItems || filteredItems.includes(option.index)),
+        callback(item) {
+          if (item.element) {
+            scrollIntoViewIfNeeded(item.element, {
+              block: "nearest",
+              scrollMode: "if-needed"
+            });
+          }
+          setState({
+            selectionIndex: item.index
+          });
+        }
+      })
+    )
+  };
+}
+
+// src/Menu/styles.ts
+import styled, { css } from "styled-components";
+import { disabled, focusRing } from "@sproutsocial/seeds-react-mixins";
+import Box from "@sproutsocial/seeds-react-box";
+import { StyledSwitchButton as Switch } from "@sproutsocial/seeds-react-switch";
+var MenuItemContainer = styled(Box)`
+  ${(props) => !props.hidden && css`
+      display: block;
+    `};
+  width: 100%;
+  border-radius: ${(props) => props.theme.radii[500]};
+  background-color: ${(props) => props.theme.colors.listItem.background.base};
+  border: none;
+  text-align: left;
+  color: ${(props) => props.theme.colors.text.body};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  padding: ${(props) => `6px ${props.theme.space[300]}`};
+  list-style-type: none;
+  outline: 0;
+  ${(props) => css`
+    ${props.theme.typography[200]};
+  `};
+
+  ${(props) => props.selected && !props.isCheckboxOrRadio && css`
+      font-weight: ${(props2) => props2.theme.fontWeights.semibold};
+    `}
+
+  ${(props) => props.active && !props.disabled && css`
+      color: ${(props2) => props2.theme.colors.text.inverse};
+      background-color: ${props.theme.colors.listItem.background.selected};
+
+      .Icon-svg {
+        color: ${(props2) => props2.theme.colors.text.inverse};
+      }
+    `}
+
+  // Add border to Switches inside of active Menu Items so they do not disappear into the background.
+   ${Switch} {
+    ${(props) => props.active && !props.disabled && css`
+        border-color: ${(props2) => props2.theme.colors.container.border.base};
+      `}
+  }
+
+  ${(props) => !props.disabled && css`
+      &:focus,
+      &:hover {
+        color: ${(props2) => props2.theme.colors.text.body};
+        background-color: ${(props2) => props2.theme.colors.listItem.background.hover};
+
+        .Icon-svg {
+          color: unset;
+        }
+      }
+    `}
+
+  ${(props) => props.interactive && !props.disabled ? css`
+          &:hover {
+            cursor: pointer;
+          }
+        ` : css`
+          &:hover {
+            cursor: default;
+          }
+        `}
+  ${(props) => props.disabled && disabled}
+`;
+var MenuItemsContainer = styled(Box)`
+  list-style-type: none;
+  &:focus {
+    ${focusRing}
+  }
+  & > div[role="group"]:first-of-type {
+    border-top: none;
+  }
+`;
+
+// src/Menu/Menu.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var noop2 = () => {
+};
+var getMenuItemRole = (menuRole) => {
+  switch (menuRole) {
+    case MENU_ROLES.LIST:
+      return MENU_ITEM_ROLES.LISTITEM;
+    case MENU_ROLES.LISTBOX:
+      return MENU_ITEM_ROLES.OPTION;
+    case MENU_ROLES.MENU:
+    default:
+      return MENU_ITEM_ROLES.MENUITEM;
+  }
+};
+function isValueSelected(menuValue, value) {
+  if (!menuValue) return false;
+  if (typeof menuValue === "string") {
+    return Boolean(menuValue && value && menuValue === value);
+  } else if (Array.isArray(menuValue)) {
+    return menuValue.includes(value);
+  }
+  return false;
+}
+var MenuItem = ({
+  id: idProp,
+  index: indexProp,
+  as,
+  children,
+  role: roleProp,
+  elemBefore,
+  elemAfter,
+  value: valueProp,
+  onKeyPress,
+  onClick,
+  selected,
+  disabled: disabled3,
+  indeterminate,
+  label: labelProp,
+  active: activeProp,
+  ...props
+}) => {
+  const {
+    role: menuRole,
+    onChange,
+    value,
+    multiselect,
+    state: menuState,
+    selectCallbacks,
+    menuRef
+  } = useContext3(MenuContext);
+  const { selectionIndex, filteredItems } = menuState;
+  const { closePopout, closeOnItemClick } = useContext3(MenuButtonContext);
+  const isSelected = selected || isValueSelected(value, valueProp);
+  const shouldClosePopout = closeOnItemClick && !multiselect;
+  const itemRole = roleProp || getMenuItemRole(menuRole);
+  const id = useMemo2(() => idProp || uniqueId("MenuItem-"), [idProp]);
+  const textContent = useTextContent("");
+  const label = labelProp || textContent.current;
+  const ref = useRef2(null);
+  const index = useDescendant(
+    {
+      context: MenuDescendantContext,
+      element: ref.current,
+      value: valueProp || label,
+      label,
+      disabled: disabled3,
+      id
+    },
+    indexProp
+  );
+  const isHidden = filteredItems && !filteredItems.includes(index);
+  const isFocused = index === selectionIndex;
+  selectCallbacks.current[index] = onClick;
+  const [keyPressed, setKeyPressed] = useState2(false);
+  const isActive = useMemo2(
+    () => activeProp || isFocused && keyPressed,
+    [activeProp, isFocused, keyPressed]
+  );
+  const isCheckboxOrRadio = [
+    MENU_ITEM_ROLES.CHECKBOX,
+    MENU_ITEM_ROLES.RADIO
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ].includes(itemRole);
+  const interactive = onClick || onKeyPress || [
+    MENU_ITEM_ROLES.OPTION,
+    MENU_ITEM_ROLES.MENUITEM,
+    MENU_ITEM_ROLES.CHECKBOX,
+    MENU_ITEM_ROLES.RADIO
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ].includes(itemRole);
+  useEffect3(() => {
+    if (isCheckboxOrRadio && ref.current) {
+      const input = ref.current.querySelector("input");
+      if (input) {
+        input.tabIndex = -1;
+      }
+    }
+  }, [ref, isCheckboxOrRadio]);
+  useEffect3(() => {
+    if (filteredItems) {
+      setKeyPressed(true);
+    } else if (selectionIndex !== 0) {
+      setKeyPressed(true);
+    }
+  }, [selectionIndex, filteredItems]);
+  const handleClick = useCallback2(
+    (e) => {
+      menuRef.current?.focus();
+      if (onChange && itemRole !== MENU_ITEM_ROLES.LISTITEM) {
+        onChange(valueProp || label);
+      }
+      shouldClosePopout && closePopout && closePopout();
+      onClick && onClick(e);
+    },
+    [
+      menuRef,
+      onChange,
+      itemRole,
+      shouldClosePopout,
+      closePopout,
+      onClick,
+      valueProp,
+      label
+    ]
+  );
+  const before = useMemo2(() => {
+    if (elemBefore) return elemBefore;
+    if (itemRole === MENU_ITEM_ROLES.CHECKBOX) {
+      return /* @__PURE__ */ jsx2(
+        Checkbox,
+        {
+          id: `Checkbox-${id}`,
+          checked: isSelected,
+          "aria-hidden": "true",
+          onChange: noop2,
+          indeterminate,
+          mr: 300
+        }
+      );
+    } else if (itemRole === MENU_ITEM_ROLES.RADIO) {
+      return /* @__PURE__ */ jsx2(
+        Radio,
+        {
+          id: `Radio-${id}`,
+          name: `Radio-${id}`,
+          checked: isSelected,
+          "aria-hidden": "true",
+          onChange: noop2,
+          mr: 300
+        }
+      );
+    }
+  }, [elemBefore, id, indeterminate, isSelected, itemRole]);
+  const after = useMemo2(() => {
+    if (elemAfter) return elemAfter;
+    if (isSelected && !isCheckboxOrRadio) {
+      return /* @__PURE__ */ jsx2(Icon, { name: "check-solid", "aria-hidden": true, size: "small", ml: 300 });
+    }
+  }, [elemAfter, isCheckboxOrRadio, isSelected]);
+  return /* @__PURE__ */ jsx2(
+    MenuItemContainer,
+    {
+      "data-qa-menu-item": label,
+      ...props,
+      active: isActive,
+      "data-qa-is-active": isActive,
+      id,
+      "aria-label": labelProp,
+      value: valueProp,
+      "data-value": valueProp,
+      forwardedAs: as || "li",
+      "aria-checked": isCheckboxOrRadio ? isSelected : void 0,
+      "aria-selected": itemRole === MENU_ITEM_ROLES.OPTION ? isSelected : void 0,
+      disabled: disabled3,
+      "aria-disabled": disabled3,
+      isCheckboxOrRadio,
+      hidden: Boolean(isHidden),
+      interactive: Boolean(interactive),
+      onClick: !disabled3 ? handleClick : void 0,
+      role: itemRole,
+      selected: isSelected,
+      tabIndex: itemRole !== MENU_ITEM_ROLES.LISTITEM && !disabled3 ? -1 : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          style: {
+            display: "flex",
+            alignItems: props.alignItems || "center",
+            justifyContent: "space-between"
+          },
+          children: [
+            before,
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  flexGrow: 1,
+                  wordBreak: "break-word",
+                  minWidth: 0
+                },
+                ref: textContent,
+                children
+              }
+            ),
+            after
+          ]
+        }
+      )
+    }
+  );
+};
+var MenuCheckbox = (props) => /* @__PURE__ */ jsx2(MenuItem, { role: MENU_ITEM_ROLES.CHECKBOX, ...props });
+var MenuRadio = (props) => /* @__PURE__ */ jsx2(MenuItem, { role: MENU_ITEM_ROLES.RADIO, ...props });
+var MenuSwitch = (props) => {
+  const { value: menuValue } = useContext3(MenuContext);
+  const {
+    placement,
+    labelProps = {},
+    switchProps = {},
+    children,
+    id,
+    label,
+    ...rest
+  } = props;
+  const menuItemId = useMemo2(() => id || uniqueId("MenuItem-"), [id]);
+  const labelId = `${menuItemId}-label`;
+  const switchElement = /* @__PURE__ */ jsx2(
+    Switch2,
+    {
+      id: `${menuItemId}-switch`,
+      checked: props.selected || isValueSelected(menuValue, props.value),
+      "aria-hidden": "true",
+      tabIndex: -1,
+      "aria-labelledby": labelId,
+      ...placement === "before" ? { mr: 300 } : { ml: 300 },
+      ...switchProps,
+      onClick: noop2
+    }
+  );
+  const menuItemProps = {
+    id: menuItemId,
+    label,
+    elemBefore: placement === "before" ? switchElement : void 0,
+    // Empty fragment prevents a check icon in elemAfter when the switch is checked. Can be overridden.
+    elemAfter: placement === "before" ? /* @__PURE__ */ jsx2(Fragment, {}) : switchElement,
+    ...rest
+  };
+  return /* @__PURE__ */ jsx2(MenuItem, { ...menuItemProps, children: /* @__PURE__ */ jsx2(
+    Text,
+    {
+      id: labelId,
+      ...labelProps,
+      children: children || label
+    }
+  ) });
+};
+var MenuTitle = styled2(Text)`
+  font-weight: 600;
+  padding-left: ${({ theme }) => theme.space[300]};
+  padding-top: ${({ theme }) => theme.space[200]};
+  padding-bottom: ${({ theme }) => theme.space[300]};
+  color: ${({ theme }) => theme.colors.text.headline};
+`;
+var MenuGroup = ({
+  children,
+  title,
+  titleAs,
+  disabled: isDisabled = false,
+  ...props
+}) => {
+  const menuTitleId = useMemo2(() => uniqueId("menu-title-"), []);
+  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsxs(
+    Box2,
+    {
+      p: 300,
+      role: "group",
+      "aria-labelledby": title ? menuTitleId : void 0,
+      borderTop: "1px solid",
+      borderColor: "container.border.base",
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx2(
+          MenuTitle,
+          {
+            id: menuTitleId,
+            role: "presentation",
+            fontSize: 200,
+            forwardedAs: titleAs || "li",
+            css: isDisabled ? disabled2 : void 0,
+            children: title
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+};
+var MenuDivider = (props) => /* @__PURE__ */ jsx2(
+  Box2,
+  {
+    as: "li",
+    role: "separator",
+    borderTop: "1px solid",
+    borderColor: "container.border.base",
+    ...props
+  }
+);
+var MenuFilterInput = ({ type = "search", ...props }) => {
+  const { onChange, onFocus, onBlur } = props;
+  const { state, setState } = useContext3(MenuContext);
+  const handleOnChange = useCallback2(
+    (event, value) => {
+      onChange && onChange(event, value);
+      setState({
+        filterQuery: value
+      });
+    },
+    [setState, onChange]
+  );
+  const handleOnFocus = useCallback2(
+    (event) => {
+      onFocus && onFocus(event);
+      setState({
+        isFilterInputFocused: true
+      });
+    },
+    [setState, onFocus]
+  );
+  const handleOnBlur = useCallback2(
+    (event) => {
+      onBlur && onBlur(event);
+      setState({
+        isFilterInputFocused: false
+      });
+    },
+    [setState, onBlur]
+  );
+  return /* @__PURE__ */ jsx2(
+    Input,
+    {
+      ...props,
+      type,
+      value: state.filterQuery,
+      onChange: handleOnChange,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur
+    }
+  );
+};
+var MenuItems = ({
+  children,
+  role,
+  multiselect,
+  innerRef,
+  ...props
+}) => {
+  const { handleKeyDown, activeDescendent } = useMenuKeyDown();
+  return /* @__PURE__ */ jsx2(
+    MenuItemsContainer,
+    {
+      ...props,
+      forwardedAs: "ul",
+      ref: innerRef,
+      role,
+      "aria-activedescendant": activeDescendent?.id,
+      "aria-multiselectable": multiselect ? true : void 0,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      margin: 0,
+      padding: 0,
+      overflow: "hidden",
+      children
+    }
+  );
+};
+var MenuFooter = ({ children }) => {
+  const { setState } = useContext3(MenuContext);
+  const handleOnBlur = useCallback2(() => {
+    setState({
+      isFooterFocused: false
+    });
+  }, [setState]);
+  const handleOnFocus = useCallback2(() => {
+    setState({
+      isFooterFocused: true
+    });
+  }, [setState]);
+  return /* @__PURE__ */ jsx2(Box2, { onBlur: handleOnBlur, onFocus: handleOnFocus, children });
+};
+var Menu = ({
+  role = MENU_ROLES.MENU,
+  children,
+  onChange,
+  value,
+  multiselect,
+  innerRef,
+  footerContent,
+  ...props
+}) => {
+  const [descendants, setDescendants] = useDescendants();
+  const [state, setState] = useState2({
+    selectionIndex: 0,
+    filterQuery: "",
+    filteredItems: null,
+    isFilterInputFocused: false,
+    isFooterFocused: false
+  });
+  const selectCallbacks = useRef2([]);
+  const menuRef = useRef2(null);
+  const setContextState = useCallback2(
+    (newState) => {
+      setState({ ...state, ...newState });
+    },
+    [state]
+  );
+  return /* @__PURE__ */ jsx2(
+    DescendantProvider,
+    {
+      context: MenuDescendantContext,
+      items: descendants,
+      set: setDescendants,
+      children: /* @__PURE__ */ jsxs(
+        MenuContext.Provider,
+        {
+          value: {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            menuRef: innerRef || menuRef,
+            role,
+            onChange,
+            value,
+            multiselect,
+            state,
+            setState: setContextState,
+            selectCallbacks
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              MenuItems,
+              {
+                ...props,
+                role,
+                multiselect,
+                innerRef: menuRef,
+                children
+              }
+            ),
+            footerContent ? /* @__PURE__ */ jsx2(MenuFooter, { children: footerContent }) : null
+          ]
+        }
+      )
+    }
+  );
+};
+MenuGroup.displayName = "Menu.Group";
+MenuItem.displayName = "Menu.Item";
+MenuCheckbox.displayName = "Menu.Checkbox";
+MenuRadio.displayName = "Menu.Radio";
+MenuSwitch.displayName = "Menu.Switch";
+MenuDivider.displayName = "Menu.Divider";
+MenuFilterInput.displayName = "Menu.FilterInput";
+Menu.displayName = "Menu";
+Menu.Group = MenuGroup;
+Menu.Item = MenuItem;
+Menu.Checkbox = MenuCheckbox;
+Menu.Radio = MenuRadio;
+Menu.Switch = MenuSwitch;
+Menu.Divider = MenuDivider;
+Menu.FilterInput = MenuFilterInput;
+var CustomPopoutContent = styled2(Popout.Content)`
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+`;
+var MenuButton = ({
+  content,
+  popoutProps,
+  children,
+  onClick,
+  closeOnItemClick = true,
+  id = uniqueId("MenuButton-"),
+  placement = "bottom",
+  isOpen,
+  setIsOpen,
+  ...props
+}) => {
+  const [isInternalShown, setIsInternalShown] = useState2(false);
+  const isControlled = typeof isOpen === "boolean";
+  const isShown = isControlled ? isOpen : isInternalShown;
+  const setIsShown = useMemo2(
+    () => isControlled && setIsOpen ? setIsOpen : (nextIsShown) => setIsInternalShown(nextIsShown),
+    [isControlled, setIsOpen]
+  );
+  const closePopout = useCallback2(() => setIsShown(false), [setIsShown]);
+  const ariaLabelledBy = props["aria-labelledby"] ? `${props["aria-labelledby"]} ${id}` : void 0;
+  const ariaLabel = props["aria-label"] ? `${props["aria-label"]} ${innerText(children)}` : void 0;
+  return /* @__PURE__ */ jsx2(
+    MenuButtonContext.Provider,
+    {
+      value: {
+        closePopout,
+        closeOnItemClick
+      },
+      children: /* @__PURE__ */ jsx2(
+        Popout,
+        {
+          isOpen: isShown,
+          setIsOpen: setIsShown,
+          content: /* @__PURE__ */ jsx2(CustomPopoutContent, { children: content }),
+          placement,
+          ...popoutProps,
+          width: props.width,
+          children: /* @__PURE__ */ jsx2(
+            Button,
+            {
+              ...props,
+              id,
+              "aria-labelledby": ariaLabelledBy?.trim(),
+              "aria-label": ariaLabel?.trim(),
+              active: isShown,
+              onKeyDown: (e) => {
+                if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                  onClick && onClick(e);
+                  setIsShown(true);
+                }
+              },
+              onClick: (e) => {
+                onClick && onClick(e);
+                setIsShown(!isShown);
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var Menu_default = Menu;
+
+// src/Menu/index.ts
+var Menu_default2 = Menu_default;
+
+// src/Breadcrumb/styles.ts
+import styled3 from "styled-components";
+var Nav = styled3.nav`
+  ol {
+    ${(props) => props.theme.typography[200]};
+    margin: 0;
+    font-family: ${(props) => props.theme.fontFamily};
+    padding: 0;
+    display: flex;
+  }
+
+  li {
+    margin-right: ${(props) => props.theme.space[200]};
+    display: flex;
+  }
+
+  a,
+  button {
+    ${(props) => props.theme.typography[200]};
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:not(.overflow--menu) {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  ol > div + li::before {
+    content: "/";
+    margin-right: ${(props) => props.theme.space[200]};
+  }
+
+  li:last-child a,
+  li:last-child button {
+    color: ${(props) => props.theme.colors.text.body};
+    font-weight: bold;
+  }
+
+  li:not(:last-child)::after {
+    content: "/";
+    color: ${(props) => props.theme.colors.text.body};
+    margin-left: ${(props) => props.theme.space[200]};
+  }
+`;
+var styles_default = Nav;
+
+// src/Breadcrumb/Breadcrumb.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var BreadcrumbItem = ({
+  children,
+  href,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link, { href, ...rest, children }) });
+};
+var Breadcrumb = ({
+  ariaLabel,
+  overflow,
+  children,
+  ...rest
+}) => {
+  const listItems = React.Children.toArray(children);
+  const lastItem = listItems[listItems.length - 1];
+  return /* @__PURE__ */ jsx3(styles_default, { "aria-label": ariaLabel, "data-qa-breadcrumb": ariaLabel, ...rest, children: /* @__PURE__ */ jsxs2("ol", { children: [
+    overflow && /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
+      MenuButton,
+      {
+        appearance: "secondary",
+        content: overflow.menu,
+        "aria-label": overflow.label,
+        className: "overflow--menu",
+        px: 200,
+        py: 0,
+        children: /* @__PURE__ */ jsx3(Icon2, { name: "ellipsis-horizontal-solid", "aria-hidden": true })
+      }
+    ) }),
+    listItems.map((item, i) => {
+      const itemElem = typeof item === "object" && "props" in item ? item : /* @__PURE__ */ jsx3("span", { children: "item" });
+      return React.cloneElement(itemElem, {
+        ...itemElem.props,
+        "aria-current": listItems[i] === lastItem ? "page" : void 0
+      });
+    })
+  ] }) });
+};
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+Breadcrumb.Item = BreadcrumbItem;
+var Breadcrumb_default = Breadcrumb;
+
+// src/index.ts
+export * from "@sproutsocial/seeds-react-button";
+export * from "@sproutsocial/seeds-react-card";
+export * from "@sproutsocial/seeds-react-character-counter";
+export * from "@sproutsocial/seeds-react-chart-legend";
+export * from "@sproutsocial/seeds-react-checkbox";
+export * from "@sproutsocial/seeds-react-collapsible";
+export * from "@sproutsocial/seeds-react-datepicker";
+export * from "@sproutsocial/seeds-react-drawer";
+export * from "@sproutsocial/seeds-react-duration";
+export * from "@sproutsocial/seeds-react-empty-state";
+export * from "@sproutsocial/seeds-react-fieldset";
+export * from "@sproutsocial/seeds-react-form-field";
+export * from "@sproutsocial/seeds-react-icon";
+export * from "@sproutsocial/seeds-react-image";
+export * from "@sproutsocial/seeds-react-indicator";
+export * from "@sproutsocial/seeds-react-input";
+export * from "@sproutsocial/seeds-react-keyboard-key";
+export * from "@sproutsocial/seeds-react-label";
+export * from "@sproutsocial/seeds-react-link";
+
+// src/Listbox/Listbox.tsx
+import styled4, { css as css2 } from "styled-components";
+import { Arrow } from "@sproutsocial/seeds-react-select";
+import Icon3 from "@sproutsocial/seeds-react-icon";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Listbox = ({
+  role = MENU_ROLES.LISTBOX,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx4(Menu_default2, { ...rest, role, children });
+};
+var ListboxButtonContainer = styled4(MenuButton)`
+  position: relative;
+  width: 100%;
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  background-color: ${(props) => props.theme.colors.form.background.base};
+  color: ${(props) => props.theme.colors.text.body};
+  cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
+  outline: none;
+  appearance: none;
+  transition: border-color ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in},
+    box-shadow ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  text-align: left;
+  margin: 0;
+  &:active {
+    transform: none;
+  }
+
+  padding: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return `${props.theme.space[400]} ${props.theme.space[600]} ${props.theme.space[400]} ${props.theme.space[400]}`;
+    case "small":
+      return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;
+    case "default":
+    default:
+      return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;
+  }
+}};
+  font-size: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return props.theme.typography[300].fontSize;
+    case "small":
+    case "default":
+    default:
+      return props.theme.typography[200].fontSize;
+  }
+}};
+
+  ${(props) => props.invalid && css2`
+      border-color: ${(props2) => props2.theme.colors.form.border.error};
+      ${Arrow} {
+        color: ${(props2) => props2.theme.colors.icon.error};
+      }
+    `}
+`;
+var ListboxButton = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsxs3(
+  ListboxButtonContainer,
+  {
+    ...restProps,
+    popoutProps: {
+      placement: "bottom-start",
+      ...restProps.popoutProps || {}
+    },
+    children: [
+      children,
+      /* @__PURE__ */ jsx4(Arrow, { size: restProps.size, children: /* @__PURE__ */ jsx4(Icon3, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+    ]
+  }
+);
+Listbox.Option = Listbox.Item = Menu_default2.Item;
+Listbox.Checkbox = Menu_default2.Checkbox;
+Listbox.Radio = Menu_default2.Radio;
+Listbox.Switch = Menu_default2.Switch;
+Listbox.Group = Menu_default2.Group;
+Listbox.Divider = Menu_default2.Divider;
+Listbox.FilterInput = Menu_default2.FilterInput;
+var Listbox_default = Listbox;
+
+// src/index.ts
+export * from "@sproutsocial/seeds-react-loader";
+export * from "@sproutsocial/seeds-react-loader-button";
+export * from "@sproutsocial/seeds-react-modal";
+export * from "@sproutsocial/seeds-react-message";
+export * from "@sproutsocial/seeds-react-numeral";
+export * from "@sproutsocial/seeds-react-partner-logo";
+export * from "@sproutsocial/seeds-react-popout";
+export * from "@sproutsocial/seeds-react-portal";
+export * from "@sproutsocial/seeds-react-radio";
+export * from "@sproutsocial/seeds-react-segmented-control";
+export * from "@sproutsocial/seeds-react-select";
+export * from "@sproutsocial/seeds-react-skeleton";
+export * from "@sproutsocial/seeds-react-spot-illustration";
+export * from "@sproutsocial/seeds-react-stack";
+export * from "@sproutsocial/seeds-react-switch";
+export * from "@sproutsocial/seeds-react-table";
+export * from "@sproutsocial/seeds-react-table/TableCell";
+export * from "@sproutsocial/seeds-react-table/TableHeaderCell";
+export * from "@sproutsocial/seeds-react-table/TableRowAccordion";
+export * from "@sproutsocial/seeds-react-tabs";
+export * from "@sproutsocial/seeds-react-text";
+export * from "@sproutsocial/seeds-react-textarea";
+export * from "@sproutsocial/seeds-react-toast";
+
+// src/ToggleHint/ToggleHint.tsx
+import * as React2 from "react";
+import Icon4 from "@sproutsocial/seeds-react-icon";
+
+// src/ToggleHint/styles.ts
+import styled5, { css as css3 } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
+var Container = styled5.div`
+  position: relative;
+  display: inline-block;
+  padding: ${(props) => props.theme.space[100]};
+  color: currentColor;
+
+  ${(props) => props.icon === "chevron" && css3`
+      transition: transform
+        ${(props2) => `${props2.theme.duration.medium} ${props2.theme.easing.ease_inout}`};
+
+      ${props.isOpen && css3`
+        transform: rotateX(180deg);
+      `}
+    `}
+
+  ${COMMON}
+`;
+var IconText = styled5.div`
+  ${visuallyHidden}
+`;
+var styles_default2 = Container;
+
+// src/ToggleHint/ToggleHint.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var ToggleHint = class extends React2.Component {
+  static defaultProps = {
+    isOpen: false,
+    icon: "chevron"
+  };
+  getIcon = () => {
+    if (this.props.icon === "chevron") {
+      return /* @__PURE__ */ jsx5(Icon4, { name: "chevron-down-outline", "aria-hidden": true });
+    }
+    return /* @__PURE__ */ jsx5(
+      Icon4,
+      {
+        name: this.props.isOpen ? "minus-outline" : "plus-outline",
+        "aria-hidden": true
+      }
+    );
+  };
+  render() {
+    const {
+      icon,
+      isOpen,
+      openString,
+      closeString,
+      qa,
+      className,
+      color,
+      ...rest
+    } = this.props;
+    return /* @__PURE__ */ jsxs4(
+      styles_default2,
+      {
+        icon,
+        isOpen,
+        className: `ToggleHint ${className}`,
+        "data-qa-togglehint-isopen": isOpen,
+        color,
+        ...qa,
+        ...rest,
+        children: [
+          this.getIcon(),
+          /* @__PURE__ */ jsx5(IconText, { children: isOpen ? closeString : openString })
+        ]
+      }
+    );
+  }
+};
+
+// src/index.ts
+export * from "@sproutsocial/seeds-react-token";
+export * from "@sproutsocial/seeds-react-token-input";
+export * from "@sproutsocial/seeds-react-tooltip";
+export * from "@sproutsocial/seeds-react-visually-hidden";
+import { Banner } from "@sproutsocial/seeds-react-banner";
+export {
+  Banner as Alert,
+  Breadcrumb_default as Breadcrumb,
+  DescendantProvider,
+  Listbox_default as Listbox,
+  ListboxButton,
+  MENU_ITEM_ROLES,
+  MENU_ROLES,
+  Menu_default as Menu,
+  MenuButton,
+  MenuButtonContext,
+  MenuContext,
+  MenuDescendantContext,
+  MenuItemContainer,
+  MenuItemsContainer,
+  LogoNamesWithoutVariants as PartnerLogoNames,
+  IllustrationNames as SpotIllustrationNames,
+  default2 as ThemeProvider,
+  ToggleHint,
+  canUseDOM,
+  createDescendantContext,
+  createNamedContext,
+  useDescendant,
+  useDescendantKeyDown,
+  useDescendants,
+  useInteractiveColor,
+  useMeasure,
+  useMenuKeyDown,
+  useMultiselect,
+  usePrevious,
+  useSelect,
+  useTextContent2 as useTextContent,
+  wrapEvent
+};
+//# sourceMappingURL=index.js.map