storybook 10.1.0-beta.4 → 10.1.0-beta.6

package/dist/components/index.js

@@ -730,12 +730,15 @@ var LEFT_BUTTON = 0, isPlainLeftClick = (e) => e.button === LEFT_BUTTON && !e.al
     containsIcon = !1,
     className = void 0,
     style = void 0,
+    isButton: isButton2 = !1,
     ...rest
   }, ref) => React6.createElement(
     A2,
     {
       ...rest,
       ref,
+      isButton: isButton2,
+      role: isButton2 ? "button" : void 0,
       onClick: onClick && cancel ? (e) => cancelled(e, onClick) : onClick,
       className
     },
@@ -1030,12 +1033,127 @@ var DocumentWrapper = styled25.div(({ theme }) => ({
   }
 }));
 
-// src/components/components/Collapsible/Collapsible.tsx
-import React7, {
-  useCallback,
-  useEffect,
-  useState
-} from "react";
+// src/components/components/ActionList/ActionList.tsx
+import React16, { forwardRef as forwardRef6 } from "react";
+import { styled as styled30 } from "storybook/theming";
+
+// src/components/components/Button/Button.tsx
+import React14, { forwardRef as forwardRef4, useEffect, useMemo as useMemo2, useState as useState3 } from "react";
+import { deprecate as deprecate2 } from "storybook/internal/client-logger";
+
+// ../node_modules/@radix-ui/react-slot/dist/index.mjs
+import * as React8 from "react";
+
+// ../node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+import * as React7 from "react";
+function setRef(ref, value) {
+  if (typeof ref == "function")
+    return ref(value);
+  ref != null && (ref.current = value);
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = !1, cleanups = refs.map((ref) => {
+      let cleanup = setRef(ref, node);
+      return !hasCleanup && typeof cleanup == "function" && (hasCleanup = !0), cleanup;
+    });
+    if (hasCleanup)
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          let cleanup = cleanups[i];
+          typeof cleanup == "function" ? cleanup() : setRef(refs[i], null);
+        }
+      };
+  };
+}
+
+// ../node_modules/@radix-ui/react-slot/dist/index.mjs
+import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
+var REACT_LAZY_TYPE = Symbol.for("react.lazy"), use = React8[" use ".trim().toString()];
+function isPromiseLike(value) {
+  return typeof value == "object" && value !== null && "then" in value;
+}
+function isLazyComponent(element) {
+  return element != null && typeof element == "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+function createSlot(ownerName) {
+  let SlotClone = createSlotClone(ownerName), Slot2 = React8.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    isLazyComponent(children) && typeof use == "function" && (children = use(children._payload));
+    let childrenArray = React8.Children.toArray(children), slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      let newElement = slottable.props.children, newChildren = childrenArray.map((child) => child === slottable ? React8.Children.count(newElement) > 1 ? React8.Children.only(null) : React8.isValidElement(newElement) ? newElement.props.children : null : child);
+      return jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  return Slot2.displayName = `${ownerName}.Slot`, Slot2;
+}
+var Slot = createSlot("Slot");
+function createSlotClone(ownerName) {
+  let SlotClone = React8.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use == "function" && (children = use(children._payload)), React8.isValidElement(children)) {
+      let childrenRef = getElementRef(children), props2 = mergeProps(slotProps, children.props);
+      return children.type !== React8.Fragment && (props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef), React8.cloneElement(children, props2);
+    }
+    return React8.Children.count(children) > 1 ? React8.Children.only(null) : null;
+  });
+  return SlotClone.displayName = `${ownerName}.SlotClone`, SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function createSlottable(ownerName) {
+  let Slottable2 = ({ children }) => jsx(Fragment2, { children });
+  return Slottable2.displayName = `${ownerName}.Slottable`, Slottable2.__radixId = SLOTTABLE_IDENTIFIER, Slottable2;
+}
+var Slottable = createSlottable("Slottable");
+function isSlottable(child) {
+  return React8.isValidElement(child) && typeof child.type == "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  let overrideProps = { ...childProps };
+  for (let propName in childProps) {
+    let slotPropValue = slotProps[propName], childPropValue = childProps[propName];
+    /^on[A-Z]/.test(propName) ? slotPropValue && childPropValue ? overrideProps[propName] = (...args) => {
+      let result = childPropValue(...args);
+      return slotPropValue(...args), result;
+    } : slotPropValue && (overrideProps[propName] = slotPropValue) : propName === "style" ? overrideProps[propName] = { ...slotPropValue, ...childPropValue } : propName === "className" && (overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" "));
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
+}
+
+// src/components/components/Button/Button.tsx
+import { shortcutToAriaKeyshortcuts } from "storybook/manager-api";
+import { isPropValid, styled as styled28 } from "storybook/theming";
+
+// src/components/components/Button/helpers/InteractiveTooltipWrapper.tsx
+import React12, { useMemo } from "react";
+import { shortcutToHumanString } from "storybook/manager-api";
+
+// src/components/components/tooltip/TooltipNote.tsx
+import React9 from "react";
+import { styled as styled26 } from "storybook/theming";
+var Note = styled26.div(({ theme }) => ({
+  padding: "2px 6px",
+  lineHeight: "16px",
+  fontSize: 10,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.color.lightest,
+  boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.3)",
+  borderRadius: 4,
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+  zIndex: -1,
+  background: theme.base === "light" ? "rgba(60, 60, 60, 0.9)" : "rgba(0, 0, 0, 0.95)"
+})), TooltipNote = ({ note, ...props }) => React9.createElement(Note, { ...props }, note);
+
+// src/components/components/tooltip/TooltipProvider.tsx
+import React11, { useCallback as useCallback2, useState as useState2 } from "react";
+import { deprecate } from "storybook/internal/client-logger";
 
 // ../node_modules/@react-aria/utils/dist/useLayoutEffect.mjs
 import $HgANd$react from "react";
@@ -2079,300 +2197,32 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
   $3whtM$useEffect(() => {
     let wasControlled = isControlledRef.current;
     wasControlled !== isControlled && process.env.NODE_ENV !== "production" && console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`), isControlledRef.current = isControlled;
-  }, [
-    isControlled
-  ]);
-  let currentValue = isControlled ? value : stateValue, setValue = $3whtM$useCallback((value2, ...args) => {
-    let onChangeCaller = (value3, ...onChangeArgs) => {
-      onChange && (Object.is(currentValue, value3) || onChange(value3, ...onChangeArgs)), isControlled || (currentValue = value3);
-    };
-    typeof value2 == "function" ? (process.env.NODE_ENV !== "production" && console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320"), setStateValue((oldValue, ...functionArgs) => {
-      let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
-      return onChangeCaller(interceptedValue, ...args), isControlled ? oldValue : interceptedValue;
-    })) : (isControlled || setStateValue(value2), onChangeCaller(value2, ...args));
-  }, [
-    isControlled,
-    currentValue,
-    onChange
-  ]);
-  return [
-    currentValue,
-    setValue
-  ];
-}
-
-// ../node_modules/@react-stately/utils/dist/number.mjs
-function $9446cca9a3875146$export$7d15b64cf5a3a4c4(value, min = -1 / 0, max = 1 / 0) {
-  return Math.min(Math.max(value, min), max);
-}
-
-// src/components/components/Collapsible/Collapsible.tsx
-import { styled as styled26 } from "storybook/theming";
-var CollapsibleContent = styled26.div(({ collapsed = !1 }) => ({
-  blockSize: collapsed ? 0 : "auto",
-  contentVisibility: collapsed ? "hidden" : "visible",
-  transform: collapsed ? "translateY(-10px)" : "translateY(0)",
-  opacity: collapsed ? 0 : 1,
-  overflow: "hidden",
-  "@supports (interpolate-size: allow-keywords)": {
-    interpolateSize: "allow-keywords",
-    transition: "all var(--transition-duration, 0.2s)",
-    transitionBehavior: "allow-discrete"
-  },
-  "@media (prefers-reduced-motion: reduce)": {
-    transition: "none"
-  }
-})), Collapsible = Object.assign(
-  function({
-    children,
-    summary,
-    collapsed,
-    disabled,
-    state: providedState,
-    ...props
-  }) {
-    let internalState = useCollapsible(collapsed, disabled), state = providedState || internalState;
-    return React7.createElement(React7.Fragment, null, typeof summary == "function" ? summary(state) : summary, React7.createElement(
-      CollapsibleContent,
-      {
-        ...props,
-        id: state.contentId,
-        collapsed: state.isCollapsed,
-        "aria-hidden": state.isCollapsed
-      },
-      typeof children == "function" ? children(state) : children
-    ));
-  },
-  {
-    Content: CollapsibleContent
-  }
-), useCollapsible = (collapsed, disabled) => {
-  let [isCollapsed, setCollapsed] = useState(!!collapsed);
-  useEffect(() => {
-    collapsed !== void 0 && setCollapsed(collapsed);
-  }, [collapsed]);
-  let toggleCollapsed = useCallback(
-    (event) => {
-      event?.stopPropagation(), disabled || setCollapsed((value) => !value);
-    },
-    [disabled]
-  ), contentId = $bdb11010cef70236$export$f680877a34711e37();
-  return {
-    contentId,
-    isCollapsed,
-    isDisabled: !!disabled,
-    setCollapsed,
-    toggleCollapsed,
-    toggleProps: {
-      disabled,
-      onClick: toggleCollapsed,
-      "aria-controls": contentId,
-      "aria-expanded": !isCollapsed
-    }
-  };
-};
-
-// src/components/components/Card/Card.tsx
-import React8, { forwardRef as forwardRef2 } from "react";
-import { keyframes, styled as styled27 } from "storybook/theming";
-var fadeInOut = keyframes({
-  "0%": { opacity: 0 },
-  "5%": { opacity: 1 },
-  "25%": { opacity: 1 },
-  "30%": { opacity: 0 }
-}), spin = keyframes({
-  "0%": { transform: "rotate(0deg)" },
-  "10%": { transform: "rotate(10deg)" },
-  "40%": { transform: "rotate(170deg)" },
-  "50%": { transform: "rotate(180deg)" },
-  "60%": { transform: "rotate(190deg)" },
-  "90%": { transform: "rotate(350deg)" },
-  "100%": { transform: "rotate(360deg)" }
-}), slide = keyframes({
-  to: {
-    backgroundPositionX: "36%"
-  }
-}), CardContent = styled27.div(({ theme }) => ({
-  borderRadius: theme.appBorderRadius,
-  backgroundColor: theme.background.content,
-  position: "relative"
-})), CardOutline = styled27.div(({ animation = "none", color: color4, theme }) => ({
-  position: "relative",
-  width: "100%",
-  padding: 1,
-  overflow: "hidden",
-  backgroundColor: theme.background.content,
-  borderRadius: theme.appBorderRadius + 1,
-  boxShadow: `inset 0 0 0 1px ${animation === "none" && color4 && theme.color[color4] || theme.appBorderColor}, var(--card-box-shadow, transparent 0 0)`,
-  transition: "box-shadow 1s",
-  "@supports (interpolate-size: allow-keywords)": {
-    interpolateSize: "allow-keywords",
-    transition: "all var(--transition-duration, 0.2s), box-shadow 1s",
-    transitionBehavior: "allow-discrete"
-  },
-  "@media (prefers-reduced-motion: reduce)": {
-    transition: "box-shadow 1s"
-  },
-  "&:before": {
-    content: '""',
-    display: animation === "none" ? "none" : "block",
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    opacity: 1,
-    ...animation === "rainbow" && {
-      animation: `${slide} 10s infinite linear, ${fadeInOut} 60s infinite linear`,
-      backgroundImage: "linear-gradient(45deg,rgb(234, 0, 0),rgb(255, 157, 0),rgb(255, 208, 0),rgb(0, 172, 0),rgb(0, 166, 255),rgb(181, 0, 181), rgb(234, 0, 0),rgb(255, 157, 0),rgb(255, 208, 0),rgb(0, 172, 0),rgb(0, 166, 255),rgb(181, 0, 181))",
-      backgroundSize: "1000%",
-      backgroundPositionX: "100%"
-    },
-    ...animation === "spin" && {
-      left: "50%",
-      top: "50%",
-      marginLeft: "calc(max(100vw, 100vh) * -0.5)",
-      marginTop: "calc(max(100vw, 100vh) * -0.5)",
-      height: "max(100vw, 100vh)",
-      width: "max(100vw, 100vh)",
-      animation: `${spin} 3s linear infinite`,
-      backgroundImage: color4 === "negative" ? (
-        // Hardcoded colors to prevent themes from messing with them (orange+gold, secondary+seafoam)
-        "conic-gradient(transparent 90deg, #FC521F 150deg, #FFAE00 210deg, transparent 270deg)"
-      ) : "conic-gradient(transparent 90deg, #029CFD 150deg, #37D5D3 210deg, transparent 270deg)"
-    }
-  }
-})), Card = Object.assign(
-  forwardRef2(function({ outlineAnimation = "none", outlineColor, ...props }, ref) {
-    return React8.createElement(CardOutline, { animation: outlineAnimation, color: outlineColor, ref }, React8.createElement(CardContent, { ...props }));
-  }),
-  {
-    Content: CardContent,
-    Outline: CardOutline
-  }
-);
-
-// src/components/components/Listbox/Listbox.tsx
-import React17, { forwardRef as forwardRef6 } from "react";
-import { styled as styled31 } from "storybook/theming";
-
-// src/components/components/Button/Button.tsx
-import React16, { forwardRef as forwardRef5, useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
-import { deprecate as deprecate2 } from "storybook/internal/client-logger";
-
-// ../node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React10 from "react";
-
-// ../node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import * as React9 from "react";
-function setRef(ref, value) {
-  if (typeof ref == "function")
-    return ref(value);
-  ref != null && (ref.current = value);
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = !1, cleanups = refs.map((ref) => {
-      let cleanup = setRef(ref, node);
-      return !hasCleanup && typeof cleanup == "function" && (hasCleanup = !0), cleanup;
-    });
-    if (hasCleanup)
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          let cleanup = cleanups[i];
-          typeof cleanup == "function" ? cleanup() : setRef(refs[i], null);
-        }
-      };
-  };
-}
-
-// ../node_modules/@radix-ui/react-slot/dist/index.mjs
-import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
-var REACT_LAZY_TYPE = Symbol.for("react.lazy"), use = React10[" use ".trim().toString()];
-function isPromiseLike(value) {
-  return typeof value == "object" && value !== null && "then" in value;
-}
-function isLazyComponent(element) {
-  return element != null && typeof element == "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
-}
-function createSlot(ownerName) {
-  let SlotClone = createSlotClone(ownerName), Slot2 = React10.forwardRef((props, forwardedRef) => {
-    let { children, ...slotProps } = props;
-    isLazyComponent(children) && typeof use == "function" && (children = use(children._payload));
-    let childrenArray = React10.Children.toArray(children), slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      let newElement = slottable.props.children, newChildren = childrenArray.map((child) => child === slottable ? React10.Children.count(newElement) > 1 ? React10.Children.only(null) : React10.isValidElement(newElement) ? newElement.props.children : null : child);
-      return jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React10.isValidElement(newElement) ? React10.cloneElement(newElement, void 0, newChildren) : null });
-    }
-    return jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
-  });
-  return Slot2.displayName = `${ownerName}.Slot`, Slot2;
-}
-var Slot = createSlot("Slot");
-function createSlotClone(ownerName) {
-  let SlotClone = React10.forwardRef((props, forwardedRef) => {
-    let { children, ...slotProps } = props;
-    if (isLazyComponent(children) && typeof use == "function" && (children = use(children._payload)), React10.isValidElement(children)) {
-      let childrenRef = getElementRef(children), props2 = mergeProps(slotProps, children.props);
-      return children.type !== React10.Fragment && (props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef), React10.cloneElement(children, props2);
-    }
-    return React10.Children.count(children) > 1 ? React10.Children.only(null) : null;
-  });
-  return SlotClone.displayName = `${ownerName}.SlotClone`, SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function createSlottable(ownerName) {
-  let Slottable2 = ({ children }) => jsx(Fragment2, { children });
-  return Slottable2.displayName = `${ownerName}.Slottable`, Slottable2.__radixId = SLOTTABLE_IDENTIFIER, Slottable2;
-}
-var Slottable = createSlottable("Slottable");
-function isSlottable(child) {
-  return React10.isValidElement(child) && typeof child.type == "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
-function mergeProps(slotProps, childProps) {
-  let overrideProps = { ...childProps };
-  for (let propName in childProps) {
-    let slotPropValue = slotProps[propName], childPropValue = childProps[propName];
-    /^on[A-Z]/.test(propName) ? slotPropValue && childPropValue ? overrideProps[propName] = (...args) => {
-      let result = childPropValue(...args);
-      return slotPropValue(...args), result;
-    } : slotPropValue && (overrideProps[propName] = slotPropValue) : propName === "style" ? overrideProps[propName] = { ...slotPropValue, ...childPropValue } : propName === "className" && (overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" "));
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function getElementRef(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
+  }, [
+    isControlled
+  ]);
+  let currentValue = isControlled ? value : stateValue, setValue = $3whtM$useCallback((value2, ...args) => {
+    let onChangeCaller = (value3, ...onChangeArgs) => {
+      onChange && (Object.is(currentValue, value3) || onChange(value3, ...onChangeArgs)), isControlled || (currentValue = value3);
+    };
+    typeof value2 == "function" ? (process.env.NODE_ENV !== "production" && console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320"), setStateValue((oldValue, ...functionArgs) => {
+      let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
+      return onChangeCaller(interceptedValue, ...args), isControlled ? oldValue : interceptedValue;
+    })) : (isControlled || setStateValue(value2), onChangeCaller(value2, ...args));
+  }, [
+    isControlled,
+    currentValue,
+    onChange
+  ]);
+  return [
+    currentValue,
+    setValue
+  ];
 }
 
-// src/components/components/Button/Button.tsx
-import { shortcutToAriaKeyshortcuts } from "storybook/manager-api";
-import { isPropValid, styled as styled30 } from "storybook/theming";
-
-// src/components/components/Button/helpers/InteractiveTooltipWrapper.tsx
-import React14, { useMemo } from "react";
-import { shortcutToHumanString } from "storybook/manager-api";
-
-// src/components/components/tooltip/TooltipNote.tsx
-import React11 from "react";
-import { styled as styled28 } from "storybook/theming";
-var Note = styled28.div(({ theme }) => ({
-  padding: "2px 6px",
-  lineHeight: "16px",
-  fontSize: 10,
-  fontWeight: theme.typography.weight.bold,
-  color: theme.color.lightest,
-  boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.3)",
-  borderRadius: 4,
-  whiteSpace: "nowrap",
-  pointerEvents: "none",
-  zIndex: -1,
-  background: theme.base === "light" ? "rgba(60, 60, 60, 0.9)" : "rgba(0, 0, 0, 0.95)"
-})), TooltipNote = ({ note, ...props }) => React11.createElement(Note, { ...props }, note);
-
-// src/components/components/tooltip/TooltipProvider.tsx
-import React13, { useCallback as useCallback3, useState as useState3 } from "react";
-import { deprecate } from "storybook/internal/client-logger";
+// ../node_modules/@react-stately/utils/dist/number.mjs
+function $9446cca9a3875146$export$7d15b64cf5a3a4c4(value, min = -1 / 0, max = 1 / 0) {
+  return Math.min(Math.max(value, min), max);
+}
 
 // ../node_modules/@react-aria/interactions/dist/utils.mjs
 import { useRef as $6dfIe$useRef, useCallback as $6dfIe$useCallback } from "react";
@@ -8642,17 +8492,17 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
 }
 
 // src/components/components/shared/overlayHelpers.tsx
-import React12, { forwardRef as forwardRef4, useState as useState2 } from "react";
+import React10, { forwardRef as forwardRef3, useState } from "react";
 var import_memoizerific = __toESM(require_memoizerific(), 1);
-import { styled as styled29 } from "storybook/theming";
-var convertToReactAriaPlacement = (0, import_memoizerific.default)(1e3)((p) => p === "left-end" ? "left bottom" : p === "right-end" ? "right bottom" : p === "left-start" ? "left top" : p === "right-start" ? "right top" : p.replace("-", " ")), Container = styled29.div({
+import { styled as styled27 } from "storybook/theming";
+var convertToReactAriaPlacement = (0, import_memoizerific.default)(1e3)((p) => p === "left-end" ? "left bottom" : p === "right-end" ? "right bottom" : p === "left-start" ? "left top" : p === "right-start" ? "right top" : p.replace("-", " ")), Container = styled27.div({
   width: 500,
   height: 500,
   paddingTop: 100,
   overflowY: "scroll",
   background: "#eee",
   position: "relative"
-}), Trigger = forwardRef4((props, ref) => React12.createElement(
+}), Trigger = forwardRef3((props, ref) => React10.createElement(
   "button",
   {
     ...props,
@@ -8681,15 +8531,15 @@ var TooltipProvider = ({
   onVisibleChange,
   ...props
 }) => {
-  let placement = convertToReactAriaPlacement(placementProp), child = React13.Children.only(children);
+  let placement = convertToReactAriaPlacement(placementProp), child = React11.Children.only(children);
   startOpen !== void 0 && deprecate("The `startOpen` prop is deprecated. Please use `defaultVisible` instead.");
-  let [isOpen, setIsOpen] = useState3(defaultVisible ?? startOpen ?? !1), onOpenChange = useCallback3(
+  let [isOpen, setIsOpen] = useState2(defaultVisible ?? startOpen ?? !1), onOpenChange = useCallback2(
     (isOpen2) => {
       setIsOpen(isOpen2), onVisibleChange?.(isOpen2);
     },
     [onVisibleChange]
   );
-  return React13.createElement(
+  return React11.createElement(
     $4e3b923658d69c60$export$8c610744efcf8a1d,
     {
       delay: delayShow,
@@ -8699,8 +8549,8 @@ var TooltipProvider = ({
       trigger: triggerOnFocusOnly ? "focus" : void 0,
       ...props
     },
-    React13.createElement($f645667febf57a63$export$35a3bebf7ef2d934, null, React13.cloneElement(child, { "aria-describedby": null })),
-    React13.createElement(
+    React11.createElement($f645667febf57a63$export$35a3bebf7ef2d934, null, React11.cloneElement(child, { "aria-describedby": null })),
+    React11.createElement(
       $4e3b923658d69c60$export$28c660c63b792dea,
       {
         "data-testid": "tooltip",
@@ -8722,32 +8572,32 @@ var InteractiveTooltipWrapper = ({ children, disableAllTooltips, shortcut, toolt
     if (!(!tooltip && (!shortcut || !hasShortcuts)))
       return [tooltip, shortcut && hasShortcuts && `[${shortcutToHumanString(shortcut)}]`].filter(Boolean).join(" ");
   }, [shortcut, tooltip]);
-  return tooltipLabel ? React14.createElement(
+  return tooltipLabel ? React12.createElement(
     TooltipProvider,
     {
       placement: "top",
-      tooltip: React14.createElement(TooltipNote, { note: tooltipLabel }),
+      tooltip: React12.createElement(TooltipNote, { note: tooltipLabel }),
       visible: disableAllTooltips ? !1 : void 0
     },
     children
-  ) : React14.createElement(React14.Fragment, null, children);
+  ) : React12.createElement(React12.Fragment, null, children);
 };
 InteractiveTooltipWrapper.displayName = "InteractiveTooltipWrapper";
 
 // src/components/components/Button/helpers/useAriaDescription.tsx
-import React15 from "react";
+import React13 from "react";
 function useAriaDescription(description = "") {
   let describedbyId = description.toLowerCase().trim().replace(/\s+/g, "-");
   return {
     ariaDescriptionAttrs: {
       "aria-describedby": description ? describedbyId : void 0
     },
-    AriaDescription: () => description ? React15.createElement("span", { id: describedbyId, hidden: !0 }, description) : null
+    AriaDescription: () => description ? React13.createElement("span", { id: describedbyId, hidden: !0 }, description) : null
   };
 }
 
 // src/components/components/Button/Button.tsx
-var Button = forwardRef5(
+var Button = forwardRef4(
   ({
     as = "button",
     asChild = !1,
@@ -8766,30 +8616,31 @@ var Button = forwardRef5(
     disableAllTooltips = !1,
     ...props
   }, ref) => {
-    let Comp2 = asChild ? Slot : as;
-    (ariaLabel === void 0 || ariaLabel === "") && deprecate2(
+    let Comp2 = asChild ? Slot : as, deprecated;
+    !readOnly && (ariaLabel === void 0 || ariaLabel === "") && (deprecated = "ariaLabel", deprecate2(
       `The 'ariaLabel' prop on 'Button' will become mandatory in Storybook 11. Buttons with text content should set 'ariaLabel={false}' to indicate that they are accessible as-is. Buttons without text content must provide a meaningful 'ariaLabel' for accessibility. The button content is: ${props.children}.`
-    ), active !== void 0 && deprecate2(
+    )), active !== void 0 && (deprecated = "active", deprecate2(
       "The `active` prop on `Button` is deprecated and will be removed in Storybook 11. Use specialized components like `ToggleButton` or `Select` instead."
-    );
-    let { ariaDescriptionAttrs, AriaDescription } = useAriaDescription(ariaDescription), shortcutAttribute = useMemo2(() => shortcut ? shortcutToAriaKeyshortcuts(shortcut) : void 0, [shortcut]), [isAnimating, setIsAnimating] = useState4(!1), handleClick = (event) => {
+    ));
+    let { ariaDescriptionAttrs, AriaDescription } = useAriaDescription(ariaDescription), shortcutAttribute = useMemo2(() => shortcut ? shortcutToAriaKeyshortcuts(shortcut) : void 0, [shortcut]), [isAnimating, setIsAnimating] = useState3(!1), handleClick = (event) => {
       onClick && onClick(event), animation !== "none" && setIsAnimating(!0);
     };
-    return useEffect2(() => {
+    return useEffect(() => {
       let timer = setTimeout(() => {
         isAnimating && setIsAnimating(!1);
       }, 1e3);
       return () => clearTimeout(timer);
-    }, [isAnimating]), React16.createElement(React16.Fragment, null, React16.createElement(
+    }, [isAnimating]), React14.createElement(React14.Fragment, null, React14.createElement(
       InteractiveTooltipWrapper,
       {
         disableAllTooltips,
         shortcut,
         tooltip: tooltip || (ariaLabel !== !1 ? ariaLabel : void 0)
       },
-      React16.createElement(
+      React14.createElement(
         StyledButton,
         {
+          "data-deprecated": deprecated,
           as: Comp2,
           ref,
           variant,
@@ -8807,11 +8658,11 @@ var Button = forwardRef5(
           ...props
         }
       )
-    ), React16.createElement(AriaDescription, null));
+    ), React14.createElement(AriaDescription, null));
   }
 );
 Button.displayName = "Button";
-var StyledButton = styled30("button", {
+var StyledButton = styled28("button", {
   shouldForwardProp: (prop) => isPropValid(prop)
 })(
   ({
@@ -8884,13 +8735,39 @@ var StyledButton = styled30("button", {
       animation: animating && animation !== "none" ? `${theme.animation[animation]} 1000ms ease-out` : ""
     }
   })
-), IconButton = forwardRef5((props, ref) => (deprecate2(
+), IconButton = forwardRef4((props, ref) => (deprecate2(
   "`IconButton` is deprecated and will be removed in Storybook 11, use `Button` instead."
-), React16.createElement(Button, { ref, ...props })));
+), React14.createElement(Button, { ref, ...props, "data-deprecated": "IconButton" })));
 IconButton.displayName = "IconButton";
 
-// src/components/components/Listbox/Listbox.tsx
-var ListboxItem = styled31.div(
+// src/components/components/ToggleButton/ToggleButton.tsx
+import React15, { forwardRef as forwardRef5 } from "react";
+import { styled as styled29 } from "storybook/theming";
+var ToggleButton = forwardRef5(
+  ({ pressed, ...props }, ref) => React15.createElement(StyledToggle, { role: "switch", "aria-checked": pressed, ref, pressed, ...props })
+);
+ToggleButton.displayName = "ToggleButton";
+var StyledToggle = styled29(Button)(
+  ({ theme, variant = "outline", pressed }) => ({
+    ...pressed ? {
+      ...variant === "solid" ? {
+        background: theme.base === "lighten" ? curriedDarken$1(0.1, theme.color.secondary) : curriedDarken$1(0.2, theme.color.secondary)
+      } : {},
+      ...variant === "outline" ? {
+        background: curriedTransparentize$1(0.94, theme.barSelectedColor),
+        boxShadow: `${theme.barSelectedColor} 0 0 0 1px inset`,
+        color: theme.barSelectedColor
+      } : {},
+      ...variant === "ghost" ? {
+        background: curriedTransparentize$1(0.93, theme.barSelectedColor),
+        color: theme.base === "light" ? curriedDarken$1(0.1, theme.color.secondary) : theme.color.secondary
+      } : {}
+    } : {}
+  })
+);
+
+// src/components/components/ActionList/ActionList.tsx
+var ActionListItem = styled30.li(
   ({ active, theme }) => ({
     display: "flex",
     alignItems: "center",
@@ -8902,6 +8779,10 @@ var ListboxItem = styled31.div(
     fontWeight: active ? theme.typography.weight.bold : theme.typography.weight.regular,
     color: active ? theme.color.secondary : theme.color.defaultText,
     "--listbox-item-muted-color": active ? theme.color.secondary : theme.color.mediumdark,
+    "&:not(:hover, :has(:focus-visible)) svg + input": {
+      position: "absolute",
+      opacity: 0
+    },
     "@supports (interpolate-size: allow-keywords)": {
       interpolateSize: "allow-keywords",
       transition: "all var(--transition-duration, 0.2s)",
@@ -8929,7 +8810,7 @@ var ListboxItem = styled31.div(
         };
     }
   }
-), ListboxHoverItem = styled31(ListboxItem)(({ targetId }) => ({
+), ActionListHoverItem = styled30(ActionListItem)(({ targetId }) => ({
   gap: 0,
   [`& [data-target-id="${targetId}"]`]: {
     inlineSize: "auto",
@@ -8937,7 +8818,8 @@ var ListboxItem = styled31.div(
     opacity: 1,
     "@supports (interpolate-size: allow-keywords)": {
       interpolateSize: "allow-keywords",
-      transition: "all var(--transition-duration, 0.2s)"
+      transitionProperty: "inline-size, margin-left, opacity, padding-inline",
+      transitionDuration: "var(--transition-duration, 0.2s)"
     }
   },
   [`&:not(:hover, :has(:focus-visible)) [data-target-id="${targetId}"]`]: {
@@ -8946,11 +8828,25 @@ var ListboxItem = styled31.div(
     opacity: 0,
     paddingInline: 0
   }
-})), ListboxButton = forwardRef6(
+})), StyledButton2 = styled30(Button)({
+  "&:focus-visible": {
+    // Prevent focus outline from being cut off by overflow: hidden
+    outlineOffset: -2
+  }
+}), StyledToggleButton = styled30(ToggleButton)({
+  "&:focus-visible": {
+    // Prevent focus outline from being cut off by overflow: hidden
+    outlineOffset: -2
+  }
+}), ActionListButton = forwardRef6(
+  function({ padding = "small", size = "medium", variant = "ghost", ...props }, ref) {
+    return React16.createElement(StyledButton2, { ...props, variant, padding, size, ref });
+  }
+), ActionListToggle = forwardRef6(
   function({ padding = "small", size = "medium", variant = "ghost", ...props }, ref) {
-    return React17.createElement(Button, { ...props, variant, padding, size, ref });
+    return React16.createElement(StyledToggleButton, { ...props, variant, padding, size, ref });
   }
-), ListboxAction = styled31(ListboxButton)({
+), ActionListAction = styled30(ActionListButton)(({ theme }) => ({
   flex: "0 1 100%",
   textAlign: "start",
   justifyContent: "space-between",
@@ -8958,8 +8854,15 @@ var ListboxItem = styled31.div(
   color: "inherit",
   "&:hover": {
     color: "inherit"
+  },
+  "& input:enabled:focus-visible": {
+    outline: "none"
+  },
+  "&:has(input:focus-visible)": {
+    outline: `2px solid ${theme.color.secondary}`,
+    outlineOffset: -2
   }
-}), ListboxText = styled31.div({
+})), ActionListLink = (props) => React16.createElement(ActionListAction, { as: "a", ...props }), ActionListText = styled30.div({
   display: "flex",
   alignItems: "center",
   gap: 8,
@@ -8984,7 +8887,7 @@ var ListboxItem = styled31.div(
   "button > &:last-child": {
     paddingRight: 0
   }
-}), ListboxIcon = styled31.div({
+}), ActionListIcon = styled30.div({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -8992,8 +8895,8 @@ var ListboxItem = styled31.div(
   width: 14,
   height: 14,
   color: "var(--listbox-item-muted-color)"
-}), Listbox = Object.assign(
-  styled31.div(({ theme, onClick }) => ({
+}), ActionList = Object.assign(
+  styled30.ul(({ theme, onClick }) => ({
     listStyle: "none",
     margin: 0,
     padding: 4,
@@ -9003,17 +8906,170 @@ var ListboxItem = styled31.div(
     }
   })),
   {
-    Item: ListboxItem,
-    HoverItem: ListboxHoverItem,
-    Button: ListboxButton,
-    Action: ListboxAction,
-    Text: ListboxText,
-    Icon: ListboxIcon
+    Item: ActionListItem,
+    HoverItem: ActionListHoverItem,
+    Button: ActionListButton,
+    Toggle: ActionListToggle,
+    Action: ActionListAction,
+    Link: ActionListLink,
+    Text: ActionListText,
+    Icon: ActionListIcon
+  }
+);
+
+// src/components/components/Collapsible/Collapsible.tsx
+import React17, {
+  useCallback as useCallback3,
+  useEffect as useEffect2,
+  useState as useState4
+} from "react";
+import { styled as styled31 } from "storybook/theming";
+var CollapsibleContent = styled31.div(({ collapsed = !1 }) => ({
+  blockSize: collapsed ? 0 : "auto",
+  contentVisibility: collapsed ? "hidden" : "visible",
+  transform: collapsed ? "translateY(-10px)" : "translateY(0)",
+  opacity: collapsed ? 0 : 1,
+  overflow: "hidden",
+  "@supports (interpolate-size: allow-keywords)": {
+    interpolateSize: "allow-keywords",
+    transition: "all var(--transition-duration, 0.2s)",
+    transitionBehavior: "allow-discrete"
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "none"
+  }
+})), Collapsible = Object.assign(
+  function({
+    children,
+    summary,
+    collapsed,
+    disabled,
+    state: providedState,
+    ...props
+  }) {
+    let internalState = useCollapsible(collapsed, disabled), state = providedState || internalState;
+    return React17.createElement(React17.Fragment, null, typeof summary == "function" ? summary(state) : summary, React17.createElement(
+      CollapsibleContent,
+      {
+        ...props,
+        id: state.contentId,
+        collapsed: state.isCollapsed,
+        "aria-hidden": state.isCollapsed
+      },
+      typeof children == "function" ? children(state) : children
+    ));
+  },
+  {
+    Content: CollapsibleContent
+  }
+), useCollapsible = (collapsed, disabled) => {
+  let [isCollapsed, setCollapsed] = useState4(!!collapsed);
+  useEffect2(() => {
+    collapsed !== void 0 && setCollapsed(collapsed);
+  }, [collapsed]);
+  let toggleCollapsed = useCallback3(
+    (event) => {
+      event?.stopPropagation(), disabled || setCollapsed((value) => !value);
+    },
+    [disabled]
+  ), contentId = $bdb11010cef70236$export$f680877a34711e37();
+  return {
+    contentId,
+    isCollapsed,
+    isDisabled: !!disabled,
+    setCollapsed,
+    toggleCollapsed,
+    toggleProps: {
+      disabled,
+      onClick: toggleCollapsed,
+      "aria-controls": contentId,
+      "aria-expanded": !isCollapsed
+    }
+  };
+};
+
+// src/components/components/Card/Card.tsx
+import React18, { forwardRef as forwardRef7 } from "react";
+import { keyframes, styled as styled32 } from "storybook/theming";
+var fadeInOut = keyframes({
+  "0%": { opacity: 0 },
+  "5%": { opacity: 1 },
+  "25%": { opacity: 1 },
+  "30%": { opacity: 0 }
+}), spin = keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "10%": { transform: "rotate(10deg)" },
+  "40%": { transform: "rotate(170deg)" },
+  "50%": { transform: "rotate(180deg)" },
+  "60%": { transform: "rotate(190deg)" },
+  "90%": { transform: "rotate(350deg)" },
+  "100%": { transform: "rotate(360deg)" }
+}), slide = keyframes({
+  to: {
+    backgroundPositionX: "36%"
+  }
+}), CardContent = styled32.div(({ theme }) => ({
+  borderRadius: theme.appBorderRadius,
+  backgroundColor: theme.background.content,
+  position: "relative"
+})), CardOutline = styled32.div(({ animation = "none", color: color4, theme }) => ({
+  position: "relative",
+  width: "100%",
+  padding: 1,
+  overflow: "hidden",
+  backgroundColor: theme.background.content,
+  borderRadius: theme.appBorderRadius + 1,
+  boxShadow: `inset 0 0 0 1px ${animation === "none" && color4 && theme.color[color4] || theme.appBorderColor}, var(--card-box-shadow, transparent 0 0)`,
+  transition: "box-shadow 1s",
+  "@supports (interpolate-size: allow-keywords)": {
+    interpolateSize: "allow-keywords",
+    transition: "all var(--transition-duration, 0.2s), box-shadow 1s",
+    transitionBehavior: "allow-discrete"
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "box-shadow 1s"
+  },
+  "&:before": {
+    content: '""',
+    display: animation === "none" ? "none" : "block",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 1,
+    ...animation === "rainbow" && {
+      animation: `${slide} 10s infinite linear, ${fadeInOut} 60s infinite linear`,
+      backgroundImage: "linear-gradient(45deg,rgb(234, 0, 0),rgb(255, 157, 0),rgb(255, 208, 0),rgb(0, 172, 0),rgb(0, 166, 255),rgb(181, 0, 181), rgb(234, 0, 0),rgb(255, 157, 0),rgb(255, 208, 0),rgb(0, 172, 0),rgb(0, 166, 255),rgb(181, 0, 181))",
+      backgroundSize: "1000%",
+      backgroundPositionX: "100%"
+    },
+    ...animation === "spin" && {
+      left: "50%",
+      top: "50%",
+      marginLeft: "calc(max(100vw, 100vh) * -0.5)",
+      marginTop: "calc(max(100vw, 100vh) * -0.5)",
+      height: "max(100vw, 100vh)",
+      width: "max(100vw, 100vh)",
+      animation: `${spin} 3s linear infinite`,
+      backgroundImage: color4 === "negative" ? (
+        // Hardcoded colors to prevent themes from messing with them (orange+gold, secondary+seafoam)
+        "conic-gradient(transparent 90deg, #FC521F 150deg, #FFAE00 210deg, transparent 270deg)"
+      ) : "conic-gradient(transparent 90deg, #029CFD 150deg, #37D5D3 210deg, transparent 270deg)"
+    }
+  }
+})), Card = Object.assign(
+  forwardRef7(function({ outlineAnimation = "none", outlineColor, ...props }, ref) {
+    return React18.createElement(CardOutline, { animation: outlineAnimation, color: outlineColor, ref }, React18.createElement(CardContent, { ...props }));
+  }),
+  {
+    Content: CardContent,
+    Outline: CardOutline
   }
 );
 
 // src/components/components/Modal/Modal.tsx
-import React19, { createContext, useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
+import React20, { createContext, useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
 import { deprecate as deprecate4 } from "storybook/internal/client-logger";
 
 // ../node_modules/react-transition-state/dist/esm/hooks/useTransitionState.mjs
@@ -9116,7 +9172,7 @@ __export(Modal_styled_exports, {
   Row: () => Row,
   Title: () => Title
 });
-import React18, { useContext } from "react";
+import React19, { useContext } from "react";
 import { deprecate as deprecate3 } from "storybook/internal/client-logger";
 import { CrossIcon } from "@storybook/icons";
 
@@ -9149,7 +9205,7 @@ var $514c0188e459b4c0$export$9afb8bc826b033ea = $1B3Dx$createContext({}), $514c0
 });
 
 // src/components/components/Modal/Modal.styled.tsx
-import { keyframes as keyframes2, styled as styled32 } from "storybook/theming";
+import { keyframes as keyframes2, styled as styled33 } from "storybook/theming";
 var fadeIn = keyframes2({
   from: { opacity: 0 },
   to: { opacity: 1 }
@@ -9195,7 +9251,7 @@ var fadeIn = keyframes2({
     opacity: 0,
     maxHeight: "0px"
   }
-}), Overlay = styled32.div(({ $status, $transitionDuration }) => ({
+}), Overlay = styled33.div(({ $status, $transitionDuration }) => ({
   backdropFilter: "blur(24px)",
   background: "rgba(0, 0, 0, 0.4)",
   position: "absolute",
@@ -9207,7 +9263,7 @@ var fadeIn = keyframes2({
     animation: $status === "exiting" || $status === "preExit" ? `${fadeOut} ${$transitionDuration}ms` : `${fadeIn} ${$transitionDuration}ms`,
     animationFillMode: "forwards"
   }
-})), Container2 = styled32.div(
+})), Container2 = styled33.div(
   ({ theme }) => ({
     backgroundColor: theme.background.bar,
     borderRadius: 6,
@@ -9253,16 +9309,16 @@ var fadeIn = keyframes2({
   }
 ), Close = ({ asChild, children, onClick, ...props }) => {
   let { close } = useContext(ModalContext);
-  if (asChild && React18.isValidElement(children)) {
+  if (asChild && React19.isValidElement(children)) {
     let handleClick = (event) => {
       onClick?.(event), children.props.onClick?.(event), close?.();
     };
-    return React18.cloneElement(children, {
+    return React19.cloneElement(children, {
       ...props,
       onClick: handleClick
     });
   }
-  return React18.createElement(
+  return React19.createElement(
     Button,
     {
       padding: "small",
@@ -9271,20 +9327,20 @@ var fadeIn = keyframes2({
       shortcut: ["Escape"],
       onClick: close
     },
-    React18.createElement(CrossIcon, null)
+    React19.createElement(CrossIcon, null)
   );
 }, Dialog = {
-  Close: () => (deprecate3("Modal.Dialog.Close is deprecated, please use Modal.Close instead."), React18.createElement(Close, null))
-}, CloseButton = ({ ariaLabel, ...props }) => (deprecate3("Modal.CloseButton is deprecated, please use Modal.Close instead."), React18.createElement(Close, { asChild: !0 }, React18.createElement(Button, { ariaLabel: ariaLabel || "Close", ...props }, React18.createElement(CrossIcon, null)))), Content = styled32.div({
+  Close: () => (deprecate3("Modal.Dialog.Close is deprecated, please use Modal.Close instead."), React19.createElement(Close, { "data-deprecated": "Modal.Dialog.Close" }))
+}, CloseButton = ({ ariaLabel, ...props }) => (deprecate3("Modal.CloseButton is deprecated, please use Modal.Close instead."), React19.createElement(Close, { asChild: !0 }, React19.createElement(Button, { ariaLabel: ariaLabel || "Close", "data-deprecated": "Modal.CloseButton", ...props }, React19.createElement(CrossIcon, null)))), Content = styled33.div({
   display: "flex",
   flexDirection: "column",
   margin: 16,
   gap: 16
-}), Row = styled32.div({
+}), Row = styled33.div({
   display: "flex",
   justifyContent: "space-between",
   gap: 16
-}), Col = styled32.div({
+}), Col = styled33.div({
   display: "flex",
   flexDirection: "column",
   gap: 4
@@ -9292,20 +9348,20 @@ var fadeIn = keyframes2({
   hasClose = !0,
   onClose,
   ...props
-}) => React18.createElement(Row, null, React18.createElement(Col, { ...props }), hasClose && React18.createElement(Close, { onClick: onClose })), Title = styled32((props) => React18.createElement($5cb03073d3f54797$export$a8a3e93435678ff9, { level: 2, ...props }))(({ theme }) => ({
+}) => React19.createElement(Row, null, React19.createElement(Col, { ...props }), hasClose && React19.createElement(Close, { onClick: onClose })), Title = styled33((props) => React19.createElement($5cb03073d3f54797$export$a8a3e93435678ff9, { level: 2, ...props }))(({ theme }) => ({
   margin: 0,
   fontSize: theme.typography.size.s3,
   fontWeight: theme.typography.weight.bold
-})), Description = styled32($514c0188e459b4c0$export$5f1af8db9871e1d6)(({ theme }) => ({
+})), Description = styled33($514c0188e459b4c0$export$5f1af8db9871e1d6)(({ theme }) => ({
   position: "relative",
   zIndex: 1,
   margin: 0,
   fontSize: theme.typography.size.s2
-})), Actions = styled32.div({
+})), Actions = styled33.div({
   display: "flex",
   flexDirection: "row-reverse",
   gap: 8
-}), ErrorWrapper = styled32.div(({ theme }) => ({
+}), ErrorWrapper = styled33.div(({ theme }) => ({
   maxHeight: 100,
   overflow: "auto",
   "@media (prefers-reduced-motion: no-preference)": {
@@ -9321,7 +9377,7 @@ var fadeIn = keyframes2({
 })), Error2 = ({
   children,
   ...props
-}) => React18.createElement(ErrorWrapper, { ...props }, React18.createElement("div", null, children));
+}) => React19.createElement(ErrorWrapper, { ...props }, React19.createElement("div", null, children));
 
 // src/components/components/Modal/Modal.tsx
 var ModalContext = createContext({});
@@ -9344,11 +9400,12 @@ function BaseModal({
   variant = "dialog",
   ...props
 }) {
-  (ariaLabel === void 0 || ariaLabel === "") && deprecate4("The `ariaLabel` prop on `Modal` will become mandatory in Storybook 11."), onEscapeKeyDown !== void 0 && deprecate4(
+  let deprecated;
+  (ariaLabel === void 0 || ariaLabel === "") && (deprecated = "ariaLabel", deprecate4("The `ariaLabel` prop on `Modal` will become mandatory in Storybook 11.")), onEscapeKeyDown !== void 0 && (deprecated = "onEscapeKeyDown", deprecate4(
     "The `onEscapeKeyDown` prop is deprecated and will be removed in Storybook 11. Use `dismissOnEscape` instead."
-  ), onInteractOutside !== void 0 && deprecate4(
+  )), onInteractOutside !== void 0 && (deprecated = "onInteractOutside", deprecate4(
     "The `onInteractOutside` prop is deprecated and will be removed in Storybook 11. Use `dismissOnInteractOutside` instead."
-  );
+  ));
   let overlayRef = useRef3(null), reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)"), [{ status, isMounted }, toggle] = useTransitionState({
     timeout: reducedMotion ? 0 : transitionDuration,
     mountOnEnter: !0,
@@ -9389,16 +9446,17 @@ function BaseModal({
       e.key !== "Escape" ? modalProps.onKeyDown?.(e) : dismissOnEscape && (onEscapeKeyDown?.(e.nativeEvent), e.nativeEvent.defaultPrevented || close());
     }
   }), containerElement = container ?? (portalSelector ? document.querySelector(portalSelector) : void 0);
-  return React19.createElement($337b884510726a0d$export$c6fdb837b070b4ff, { disableFocusManagement: !0, portalContainer: containerElement || void 0 }, React19.createElement($9bf71ea28793e738$export$20e40289641fbbb6, { restoreFocus: !0, contain: !0, autoFocus: !0 }, React19.createElement(
+  return React20.createElement($337b884510726a0d$export$c6fdb837b070b4ff, { disableFocusManagement: !0, portalContainer: containerElement || void 0 }, React20.createElement($9bf71ea28793e738$export$20e40289641fbbb6, { restoreFocus: !0, contain: !0, autoFocus: !0 }, React20.createElement(
     Overlay,
     {
       $status: status,
       $transitionDuration: transitionDuration,
       ...underlayProps
     }
-  ), React19.createElement("div", { role: "dialog", "aria-label": ariaLabel, ref: overlayRef, ...finalModalProps }, React19.createElement(ModalContext.Provider, { value: { close } }, React19.createElement(
+  ), React20.createElement("div", { role: "dialog", "aria-label": ariaLabel, ref: overlayRef, ...finalModalProps }, React20.createElement(ModalContext.Provider, { value: { close } }, React20.createElement(
     Container2,
     {
+      "data-deprecated": deprecated,
       $variant: variant,
       $status: status,
       $transitionDuration: transitionDuration,
@@ -9412,7 +9470,7 @@ function BaseModal({
 }
 var Modal = Object.assign(BaseModal, Modal_styled_exports), ModalDecorator = (Story, { args }) => {
   let [container, setContainer] = useState8(null);
-  return args.container || args.portalSelector ? React19.createElement(Story, { args }) : React19.createElement(React19.Fragment, null, React19.createElement($96b38030c423d352$export$78efe591171d7d45, { getContainer: () => container }, React19.createElement(Story, { args })), React19.createElement(
+  return args.container || args.portalSelector ? React20.createElement(Story, { args }) : React20.createElement(React20.Fragment, null, React20.createElement($96b38030c423d352$export$78efe591171d7d45, { getContainer: () => container }, React20.createElement(Story, { args })), React20.createElement(
     "div",
     {
       ref: (element) => setContainer(element ?? null),
@@ -9427,9 +9485,9 @@ var Modal = Object.assign(BaseModal, Modal_styled_exports), ModalDecorator = (St
 };
 
 // src/components/components/spaced/Spaced.tsx
-import React20 from "react";
-import { ignoreSsrWarning, styled as styled33 } from "storybook/theming";
-var toNumber = (input) => typeof input == "number" ? input : Number(input), Container3 = styled33.div(
+import React21 from "react";
+import { ignoreSsrWarning, styled as styled34 } from "storybook/theming";
+var toNumber = (input) => typeof input == "number" ? input : Number(input), Container3 = styled34.div(
   ({ theme, col, row = 1 }) => col ? {
     display: "inline-block",
     verticalAlign: "inherit",
@@ -9466,27 +9524,27 @@ var toNumber = (input) => typeof input == "number" ? input : Number(input), Cont
   }
 ), Spaced = ({ col, row, outer, children, ...rest }) => {
   let outerAmount = toNumber(typeof outer == "number" || !outer ? outer : col || row);
-  return React20.createElement(Container3, { col, row, outer: outerAmount, ...rest }, children);
+  return React21.createElement(Container3, { col, row, outer: outerAmount, ...rest }, children);
 };
 
 // src/components/components/placeholder/placeholder.tsx
-import React21, { Children as Children3 } from "react";
-import { styled as styled34 } from "storybook/theming";
-var Title2 = styled34.div(({ theme }) => ({
+import React22, { Children as Children3 } from "react";
+import { styled as styled35 } from "storybook/theming";
+var Title2 = styled35.div(({ theme }) => ({
   fontWeight: theme.typography.weight.bold
-})), Desc = styled34.div(), Message = styled34.div(({ theme }) => ({
+})), Desc = styled35.div(), Message = styled35.div(({ theme }) => ({
   padding: 30,
   textAlign: "center",
   color: theme.color.defaultText,
   fontSize: theme.typography.size.s2 - 1
 })), Placeholder = ({ children, ...props }) => {
   let [title, desc] = Children3.toArray(children);
-  return React21.createElement(Message, { ...props }, React21.createElement(Title2, null, title), desc && React21.createElement(Desc, null, desc));
+  return React22.createElement(Message, { ...props }, React22.createElement(Title2, null, title), desc && React22.createElement(Desc, null, desc));
 };
 
 // src/components/components/Zoom/ZoomElement.tsx
-import React22, { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
-import { styled as styled35 } from "storybook/theming";
+import React23, { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
+import { styled as styled36 } from "storybook/theming";
 
 // ../node_modules/use-resize-observer/dist/bundle.esm.js
 import { useRef as useRef4, useEffect as useEffect5, useCallback as useCallback6, useState as useState9, useMemo as useMemo3 } from "react";
@@ -9569,7 +9627,7 @@ function useResizeObserver(opts) {
 }
 
 // src/components/components/Zoom/ZoomElement.tsx
-var ZoomElementWrapper = styled35.div(
+var ZoomElementWrapper = styled36.div(
   ({ centered = !1, scale = 1, elementHeight }) => ({
     height: elementHeight || "auto",
     transformOrigin: centered ? "center top" : "left top",
@@ -9588,11 +9646,11 @@ function ZoomElement({ centered, scale, children }) {
   }, [scale]), useResizeObserver({
     ref: componentWrapperRef,
     onResize
-  }), React22.createElement(ZoomElementWrapper, { centered, scale, elementHeight }, React22.createElement("div", { ref: componentWrapperRef, className: "innerZoomElementWrapper" }, children));
+  }), React23.createElement(ZoomElementWrapper, { centered, scale, elementHeight }, React23.createElement("div", { ref: componentWrapperRef, className: "innerZoomElementWrapper" }, children));
 }
 
 // src/components/components/Zoom/ZoomIFrame.tsx
-import React23, { Component } from "react";
+import React24, { Component } from "react";
 var ZoomIFrame = class extends Component {
   constructor() {
     super(...arguments);
@@ -9629,7 +9687,7 @@ var ZoomIFrame = class extends Component {
   }
   render() {
     let { children } = this.props;
-    return React23.createElement(React23.Fragment, null, children);
+    return React24.createElement(React24.Fragment, null, children);
   }
 };
 
@@ -9640,28 +9698,28 @@ var Zoom = {
 };
 
 // src/components/components/ErrorFormatter/ErrorFormatter.tsx
-import React24, { Fragment as Fragment3 } from "react";
+import React25, { Fragment as Fragment3 } from "react";
 import { global } from "@storybook/global";
-import { styled as styled36 } from "storybook/theming";
-var { document: document2 } = global, ErrorName = styled36.strong(({ theme }) => ({
+import { styled as styled37 } from "storybook/theming";
+var { document: document2 } = global, ErrorName = styled37.strong(({ theme }) => ({
   color: theme.color.orange
-})), ErrorImportant = styled36.strong(({ theme }) => ({
+})), ErrorImportant = styled37.strong(({ theme }) => ({
   color: theme.color.ancillary,
   textDecoration: "underline"
-})), ErrorDetail = styled36.em(({ theme }) => ({
+})), ErrorDetail = styled37.em(({ theme }) => ({
   color: theme.textMutedColor
 })), firstLineRegex = /(Error): (.*)\n/, linesRegexChromium = /at (?:(.*) )?\(?(.+)\)?/, linesRegexFirefox = /([^@]+)?(?:\/<)?@(.+)?/, linesRegexSafari = /([^@]+)?@(.+)?/, ErrorFormatter = ({ error }) => {
   if (!error)
-    return React24.createElement(Fragment3, null, "This error has no stack or message");
+    return React25.createElement(Fragment3, null, "This error has no stack or message");
   if (!error.stack)
-    return React24.createElement(Fragment3, null, error.message || "This error has no stack or message");
+    return React25.createElement(Fragment3, null, error.message || "This error has no stack or message");
   let input = error.stack.toString();
   input && error.message && !input.includes(error.message) && (input = `Error: ${error.message}
 
 ${input}`);
   let match = input.match(firstLineRegex);
   if (!match)
-    return React24.createElement(Fragment3, null, input);
+    return React25.createElement(Fragment3, null, input);
   let [, type, name] = match, rawLines = input.split(/\n/).slice(1), [, ...lines] = rawLines.map((line) => {
     let result = line.match(linesRegexChromium) || line.match(linesRegexFirefox) || line.match(linesRegexSafari);
     return result ? {
@@ -9669,37 +9727,11 @@ ${input}`);
       location: result[2].replace(document2.location.origin, "")
     } : null;
   }).filter(Boolean);
-  return React24.createElement(Fragment3, null, React24.createElement("span", null, type), ": ", React24.createElement(ErrorName, null, name), React24.createElement("br", null), lines.map(
-    (l, i) => l?.name ? React24.createElement(Fragment3, { key: i }, "  ", "at ", React24.createElement(ErrorImportant, null, l.name), " (", React24.createElement(ErrorDetail, null, l.location), ")", React24.createElement("br", null)) : React24.createElement(Fragment3, { key: i }, "  ", "at ", React24.createElement(ErrorDetail, null, l?.location), React24.createElement("br", null))
+  return React25.createElement(Fragment3, null, React25.createElement("span", null, type), ": ", React25.createElement(ErrorName, null, name), React25.createElement("br", null), lines.map(
+    (l, i) => l?.name ? React25.createElement(Fragment3, { key: i }, "  ", "at ", React25.createElement(ErrorImportant, null, l.name), " (", React25.createElement(ErrorDetail, null, l.location), ")", React25.createElement("br", null)) : React25.createElement(Fragment3, { key: i }, "  ", "at ", React25.createElement(ErrorDetail, null, l?.location), React25.createElement("br", null))
   ));
 };
 
-// src/components/components/ToggleButton/ToggleButton.tsx
-import React25, { forwardRef as forwardRef7 } from "react";
-import { styled as styled37 } from "storybook/theming";
-var ToggleButton = forwardRef7(
-  ({ pressed, ...props }, ref) => React25.createElement(StyledToggle, { role: "switch", "aria-checked": pressed, ref, pressed, ...props })
-);
-ToggleButton.displayName = "ToggleButton";
-var StyledToggle = styled37(Button)(
-  ({ theme, variant = "outline", pressed }) => ({
-    ...pressed ? {
-      ...variant === "solid" ? {
-        background: theme.base === "lighten" ? curriedDarken$1(0.1, theme.color.secondary) : curriedDarken$1(0.2, theme.color.secondary)
-      } : {},
-      ...variant === "outline" ? {
-        background: curriedTransparentize$1(0.94, theme.barSelectedColor),
-        boxShadow: `${theme.barSelectedColor} 0 0 0 1px inset`,
-        color: theme.barSelectedColor
-      } : {},
-      ...variant === "ghost" ? {
-        background: curriedTransparentize$1(0.93, theme.barSelectedColor),
-        color: theme.base === "light" ? curriedDarken$1(0.1, theme.color.secondary) : theme.color.secondary
-      } : {}
-    } : {}
-  })
-);
-
 // src/components/components/Select/Select.tsx
 import React37, { forwardRef as forwardRef12, useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef7, useState as useState11 } from "react";
 import { RefreshIcon } from "@storybook/icons";
@@ -10375,7 +10407,28 @@ SelectOption.displayName = "SelectOption";
 
 // src/components/components/Select/helpers.tsx
 import { styled as styled47 } from "storybook/theming";
-var PAGE_STEP_SIZE = 5, Listbox2 = styled47("ul")({
+var PAGE_STEP_SIZE = 5, UNDEFINED_VALUE = Symbol.for("undefined");
+function isLiteralValue(value) {
+  return value == null || typeof value == "string" || typeof value == "number" || typeof value == "boolean" || typeof value == "symbol";
+}
+function optionToInternal(option) {
+  return {
+    ...option,
+    type: "option",
+    value: externalToValue(option.value)
+  };
+}
+function optionOrResetToInternal(option) {
+  return "type" in option && option.type === "reset" ? option : optionToInternal(option);
+}
+function valueToExternal(value) {
+  if (value !== UNDEFINED_VALUE)
+    return value;
+}
+function externalToValue(value) {
+  return value === void 0 ? UNDEFINED_VALUE : value;
+}
+var Listbox = styled47("ul")({
   minWidth: 180,
   height: "100%",
   borderRadius: 6,
@@ -10387,7 +10440,7 @@ var PAGE_STEP_SIZE = 5, Listbox2 = styled47("ul")({
 
 // src/components/components/Select/Select.tsx
 function valueToId(parentId, { value }) {
-  return `${parentId}-opt-${value ?? "sb-reset"}`;
+  return `${parentId}-opt-${String(value) ?? "sb-reset"}`;
 }
 var SelectedOptionCount = styled48.span(({ theme }) => ({
   appearance: "none",
@@ -10395,9 +10448,9 @@ var SelectedOptionCount = styled48.span(({ theme }) => ({
   fontSize: 12
 }));
 function setSelectedFromDefault(options, defaultOptions) {
-  return defaultOptions ? typeof defaultOptions == "string" ? options.filter((opt) => opt.value === defaultOptions) : options.filter((opt) => defaultOptions.some((def) => opt.value === def)) : [];
+  return defaultOptions === void 0 ? [] : isLiteralValue(defaultOptions) ? options.filter((opt) => opt.value === defaultOptions).map(optionToInternal) : options.filter((opt) => defaultOptions.some((def) => opt.value === def)).map(optionToInternal);
 }
-var StyledButton2 = styled48(Button)(
+var StyledButton3 = styled48(Button)(
   ({ $isOpen: isOpen, $hasSelection: hasSelection, theme }) => isOpen || hasSelection ? {
     boxShadow: "none",
     background: curriedTransparentize$1(0.93, theme.barSelectedColor),
@@ -10468,14 +10521,15 @@ var StyledButton2 = styled48(Button)(
       setSelectedFromDefault(calleeOptions, defaultOptions)
     ), handleSelectOption = useCallback8(
       (option) => {
-        option.value === void 0 ? selectedOptions.length && (onChange?.([]), onReset?.(), setSelectedOptions([])) : setSelectedOptions(multiSelect ? (previous) => {
+        option.type === "reset" ? selectedOptions.length && (onChange?.([]), onReset?.(), setSelectedOptions([])) : setSelectedOptions(multiSelect ? (previous) => {
           let newSelected = [];
-          return previous?.some((opt) => opt.value === option.value) ? (onDeselect?.(option.value), newSelected = previous?.filter((opt) => opt.value !== option.value) ?? []) : (onSelect?.(option.value), newSelected = [...previous ?? [], option]), onChange?.(newSelected.map((opt) => opt.value)), newSelected;
-        } : (current) => current.every((opt) => opt.value !== option.value) ? (onSelect?.(option.value), onChange?.([option.value]), [option]) : current);
+          return previous?.some((opt) => opt.value === option.value) ? (onDeselect?.(valueToExternal(option.value)), newSelected = previous?.filter((opt) => opt.value !== option.value) ?? []) : (onSelect?.(valueToExternal(option.value)), newSelected = [...previous ?? [], option]), onChange?.(newSelected.map((opt) => valueToExternal(opt.value))), newSelected;
+        } : (current) => current.every((opt) => opt.value !== option.value) ? (onSelect?.(valueToExternal(option.value)), onChange?.([valueToExternal(option.value)]), [option]) : current);
       },
       [multiSelect, onChange, onSelect, onDeselect, onReset, selectedOptions]
     ), resetOption = useMemo4(
       () => onReset ? {
+        type: "reset",
         value: void 0,
         title: resetLabel ?? "Reset selection",
         icon: React37.createElement(RefreshIcon, null),
@@ -10494,7 +10548,7 @@ var StyledButton2 = styled48(Button)(
       void 0
     ), setActiveOption = useCallback8(
       (option) => {
-        setActiveOptionState(option), multiSelect || handleSelectOption(option);
+        setActiveOptionState(optionOrResetToInternal(option)), multiSelect || handleSelectOption(optionOrResetToInternal(option));
       },
       [multiSelect, handleSelectOption]
     ), moveActiveOptionDown = useCallback8(
@@ -10503,7 +10557,9 @@ var StyledButton2 = styled48(Button)(
           setActiveOption(options[step === 1 ? 0 : Math.min(step, options.length - 1)]);
           return;
         }
-        let currentIndex = options.findIndex((option) => option.value === activeOption.value), nextIndex = currentIndex + step, newActiveOption;
+        let currentIndex = options.findIndex(
+          (option) => externalToValue(option.value) === activeOption.value
+        ), nextIndex = currentIndex + step, newActiveOption;
         nextIndex >= options.length && currentIndex === options.length - 1 ? newActiveOption = options[0] : newActiveOption = options[Math.min(options.length - 1, nextIndex)], setActiveOption(newActiveOption);
       },
       [isOpen, activeOption, setActiveOption, options]
@@ -10513,7 +10569,9 @@ var StyledButton2 = styled48(Button)(
           setActiveOption(options[Math.max(0, options.length - step)]);
           return;
         }
-        let currentIndex = options.findIndex((option) => option.value === activeOption.value), nextIndex = currentIndex - step, newActiveOption;
+        let currentIndex = options.findIndex(
+          (option) => externalToValue(option.value) === activeOption.value
+        ), nextIndex = currentIndex - step, newActiveOption;
         nextIndex < 0 && currentIndex === 0 ? newActiveOption = options[options.length - 1] : newActiveOption = options[Math.max(0, nextIndex)], setActiveOption(newActiveOption);
       },
       [isOpen, activeOption, setActiveOption, options]
@@ -10522,7 +10580,7 @@ var StyledButton2 = styled48(Button)(
         let openAt = (index3) => {
           e.preventDefault(), setActiveOption(options[index3]), setIsOpen(!0);
         }, indexOfFirstSelected = options.findIndex(
-          (option) => selectedOptions.some((sel) => sel.value === option.value)
+          (option) => selectedOptions.some((sel) => sel.value === externalToValue(option.value))
         ), hasSelection = indexOfFirstSelected !== -1, listStart = resetOption && !hasSelection ? 1 : 0, listEnd = options.length - 1;
         e.key === "Enter" || e.key === " " ? openAt(hasSelection ? Math.min(indexOfFirstSelected, listEnd) : listStart) : e.key === "ArrowDown" ? openAt(hasSelection ? Math.min(indexOfFirstSelected + 1, listEnd) : listStart) : e.key === "ArrowUp" ? openAt(hasSelection ? Math.max(indexOfFirstSelected - 1, listStart) : listEnd) : e.key === "Home" ? openAt(listStart) : e.key === "End" ? openAt(listEnd) : e.key === "PageDown" ? openAt(
           Math.min((hasSelection ? indexOfFirstSelected : listStart) + PAGE_STEP_SIZE, listEnd)
@@ -10543,7 +10601,7 @@ var StyledButton2 = styled48(Button)(
     }, [isOpen, activeOption, id]);
     let finalAriaLabel = useMemo4(() => selectedOptions.length === 1 ? `${ariaLabel} ${selectedOptions[0].title}` : selectedOptions.length ? `${ariaLabel}, ${selectedOptions.length} values selected` : ariaLabel, [ariaLabel, selectedOptions]);
     return React37.createElement(React37.Fragment, null, React37.createElement(
-      StyledButton2,
+      StyledButton3,
       {
         ...props,
         variant: "ghost",
@@ -10576,7 +10634,7 @@ var StyledButton2 = styled48(Button)(
         selectedOptions?.length
       ))
     ), otState.isOpen && React37.createElement(MinimalistPopover, { handleClose, triggerRef }, React37.createElement(
-      Listbox2,
+      Listbox,
       {
         "aria-label": ariaLabel,
         role: "listbox",
@@ -10586,17 +10644,20 @@ var StyledButton2 = styled48(Button)(
         onKeyDown: handleListboxKeyDown,
         tabIndex: isOpen ? 0 : -1
       },
-      options.map((option) => {
+      options.map((opt) => ({
+        option: optionOrResetToInternal(opt),
+        externalOption: opt
+      })).map(({ externalOption, option }) => {
         let isSelected = selectedOptions?.some((sel) => sel.value === option.value) && option !== resetOption, isReset = option === resetOption;
         return React37.createElement(
           SelectOption,
           {
-            key: option.value ?? "sb-reset",
+            key: option.value === void 0 ? "sb-reset" : String(option.value),
             title: option.title,
             description: option.description,
             icon: !isReset && multiSelect ? (
               // Purely decorative.
-              React37.createElement(Form.Checkbox, { checked: isSelected, hidden: !0 })
+              React37.createElement(Form.Checkbox, { checked: isSelected, hidden: !0, role: "presentation" })
             ) : option.icon,
             id: valueToId(id, option),
             isActive: isOpen && activeOption?.value === option.value,
@@ -10604,7 +10665,7 @@ var StyledButton2 = styled48(Button)(
             onClick: () => {
               handleSelectOption(option), multiSelect || handleClose();
             },
-            onFocus: () => setActiveOption(option),
+            onFocus: () => setActiveOption(externalOption),
             shouldLookDisabled: isReset && selectedOptions.length === 0 && multiSelect,
             onKeyDown: (e) => {
               e.key === "Enter" || e.key === " " ? (e.preventDefault(), handleSelectOption(option), multiSelect || handleClose()) : e.key === "Tab" && (multiSelect || handleSelectOption(option), handleClose());
@@ -14202,9 +14263,9 @@ Tooltip2.displayName = "Tooltip";
 // src/components/components/tooltip/lazy-WithTooltip.tsx
 import React40, { Suspense as Suspense2, lazy as lazy2 } from "react";
 var LazyWithTooltip = lazy2(
-  () => import("../_browser-chunks/WithTooltip-LMROHDUP.js").then((mod) => ({ default: mod.WithTooltip }))
+  () => import("../_browser-chunks/WithTooltip-IO6J4KBT.js").then((mod) => ({ default: mod.WithTooltip }))
 ), WithTooltip = (props) => React40.createElement(Suspense2, { fallback: React40.createElement("div", null) }, React40.createElement(LazyWithTooltip, { ...props })), LazyWithTooltipPure = lazy2(
-  () => import("../_browser-chunks/WithTooltip-LMROHDUP.js").then((mod) => ({ default: mod.WithTooltipPure }))
+  () => import("../_browser-chunks/WithTooltip-IO6J4KBT.js").then((mod) => ({ default: mod.WithTooltipPure }))
 ), WithTooltipPure = (props) => React40.createElement(Suspense2, { fallback: React40.createElement("div", null) }, React40.createElement(LazyWithTooltipPure, { ...props }));
 
 // src/components/components/tooltip/TooltipMessage.tsx
@@ -14228,8 +14289,8 @@ var Title4 = styled49.div(({ theme }) => ({
   width: 280,
   boxSizing: "border-box"
 }), TooltipMessage = ({ title, desc, links }) => (deprecate5(
-  "`TooltipLinkList` is deprecated and will be removed in Storybook 11, use `Popover` and `PopoverProvider` instead."
-), React41.createElement(MessageWrapper, null, React41.createElement(Message2, null, title && React41.createElement(Title4, null, title), desc && React41.createElement(Desc2, null, desc)), links && React41.createElement(Links, null, links.map(({ title: linkTitle, ...other }) => React41.createElement(Link2, { ...other, key: linkTitle }, linkTitle)))));
+  "`TooltipMessage` is deprecated and will be removed in Storybook 11, use `Popover` and `PopoverProvider` instead."
+), React41.createElement(MessageWrapper, { "data-deprecated": "TooltipMessage" }, React41.createElement(Message2, null, title && React41.createElement(Title4, null, title), desc && React41.createElement(Desc2, null, desc)), links && React41.createElement(Links, null, links.map(({ title: linkTitle, ...other }) => React41.createElement(Link2, { ...other, key: linkTitle }, linkTitle)))));
 
 // src/components/components/tooltip/TooltipLinkList.tsx
 import React43, { Fragment as Fragment4, useCallback as useCallback10 } from "react";
@@ -14375,7 +14436,7 @@ var Title5 = styled50(({ active, loading, disabled, ...rest }) => React42.create
   } = props, commonProps = { active, disabled }, itemProps = getItemProps(props), left = icon || input;
   return deprecate6(
     "`ListItem` is deprecated and will be removed in Storybook 11, use `MenuItem` instead."
-  ), React42.createElement(Item2, { ref, ...rest, ...commonProps, ...itemProps }, React42.createElement(React42.Fragment, null, left && React42.createElement(Left, { ...commonProps }, left), title || center ? React42.createElement(Center, { isIndented: isIndented && !left }, title && React42.createElement(Title5, { ...commonProps, loading }, title), center && React42.createElement(CenterText, { ...commonProps }, center)) : null, right && React42.createElement(Right, { ...commonProps }, right)));
+  ), React42.createElement(Item2, { "data-deprecated": "ListItem", ref, ...rest, ...commonProps, ...itemProps }, React42.createElement(React42.Fragment, null, left && React42.createElement(Left, { ...commonProps }, left), title || center ? React42.createElement(Center, { isIndented: isIndented && !left }, title && React42.createElement(Title5, { ...commonProps, loading }, title), center && React42.createElement(CenterText, { ...commonProps }, center)) : null, right && React42.createElement(Right, { ...commonProps }, right)));
 });
 ListItem.displayName = "ListItem";
 var ListItem_default = ListItem;
@@ -14406,12 +14467,12 @@ var List = styled51.div(
   return React43.createElement(ListItem_default, { id: `list-item-${id}`, ...rest, ...onClick && { onClick: handleClick } });
 }, TooltipLinkList = ({ links, LinkWrapper, ...props }) => {
   deprecate7(
-    "`TooltipLinkList` is deprecated and will be removed in Storybook 11, use `MenuItem` and `WithMenu` instead."
+    "`TooltipLinkList` is deprecated and will be removed in Storybook 11, use `ActionList` or `MenuItem` and `WithMenu` instead."
   );
   let groups = Array.isArray(links[0]) ? links : [links], isIndented = groups.some(
     (group) => group.some((link) => "icon" in link && link.icon || "input" in link && link.input)
   );
-  return React43.createElement(List, { ...props, className: "sb-list" }, groups.filter((group) => group.length).map((group, index3) => React43.createElement(Group, { key: group.map((link) => link.id).join(`~${index3}~`) }, group.map((link) => "content" in link ? React43.createElement(Fragment4, { key: link.id }, link.content) : React43.createElement(Item3, { key: link.id, isIndented, LinkWrapper, ...link })))));
+  return React43.createElement(List, { "data-deprecated": "TooltipLinkList", ...props, className: "sb-list" }, groups.filter((group) => group.length).map((group, index3) => React43.createElement(Group, { key: group.map((link) => link.id).join(`~${index3}~`) }, group.map((link) => "content" in link ? React43.createElement(Fragment4, { key: link.id }, link.content) : React43.createElement(Item3, { key: link.id, isIndented, LinkWrapper, ...link })))));
 };
 
 // src/components/components/Tabs/Tabs.tsx
@@ -14503,6 +14564,7 @@ var BarInner = styled52.div(({ bgColor }) => ({
   return React44.createElement(
     BarWithoutPadding,
     {
+      "data-deprecated": "FlexBar",
       backgroundColor,
       className: `sb-bar ${className}`,
       ...rest
@@ -14571,7 +14633,7 @@ var StyledTabButton = styled53(ButtonOrLink, { shouldForwardProp: isPropValid2 }
       color: theme.barHoverColor
     }
   }
-), TabButton = forwardRef16((props, ref) => (deprecate9("The `TabButton` component is deprecated. Use `TabList` instead."), React45.createElement(StyledTabButton, { ref, ...props })));
+), TabButton = forwardRef16((props, ref) => (deprecate9("The `TabButton` component is deprecated. Use `TabList` instead."), React45.createElement(StyledTabButton, { "data-deprecated": "TabButton", ref, ...props })));
 TabButton.displayName = "TabButton";
 
 // src/components/components/Tabs/EmptyTabContent.tsx
@@ -14596,12 +14658,14 @@ var Wrapper3 = styled54.div(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1,
   textAlign: "center",
   color: theme.color.defaultText
+})), Footer = styled54.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1
 })), Description3 = styled54.div(({ theme }) => ({
   fontWeight: theme.typography.weight.regular,
   fontSize: theme.typography.size.s2 - 1,
   textAlign: "center",
   color: theme.textMutedColor
-})), EmptyTabContent = ({ title, description, footer }) => React46.createElement(Wrapper3, null, React46.createElement(Content2, null, React46.createElement(Title6, null, title), description && React46.createElement(Description3, null, description)), footer);
+})), EmptyTabContent = ({ title, description, footer }) => React46.createElement(Wrapper3, null, React46.createElement(Content2, null, React46.createElement(Title6, null, title), description && React46.createElement(Description3, null, description)), footer && React46.createElement(Footer, null, footer));
 
 // src/components/components/Tabs/Tabs.helpers.tsx
 import React47, { Children as Children5 } from "react";
@@ -14775,7 +14839,7 @@ var ignoreSsrWarning2 = "/* emotion-disable-server-rendering-unsafe-selector-war
   whiteSpace: "nowrap",
   flexGrow: 1
 }), TabBar = forwardRef17(
-  (props, ref) => (deprecate12("The `TabBar` component is deprecated. Use `TabsView` instead."), React49.createElement(StyledTabBar, { ...props, ref }))
+  (props, ref) => (deprecate12("The `TabBar` component is deprecated. Use `TabsView` instead."), React49.createElement(StyledTabBar, { "data-deprecated": "TabBar", ...props, ref }))
 );
 TabBar.displayName = "TabBar";
 var Content3 = styled57.div(
@@ -14810,7 +14874,7 @@ var Content3 = styled57.div(
     }
   } : {}
 ), TabWrapper = forwardRef17(
-  ({ active, render, children }, ref) => (deprecate12("The `TabWrapper` component is deprecated. Use `TabsView` instead."), React49.createElement(VisuallyHidden, { ref, active }, render ? render() : children))
+  ({ active, render, children }, ref) => (deprecate12("The `TabWrapper` component is deprecated. Use `TabsView` instead."), React49.createElement(VisuallyHidden, { "data-deprecated": "TabWrapper", ref, active }, render ? render() : children))
 );
 TabWrapper.displayName = "TabWrapper";
 var TabErrorBoundary = class extends Component2 {
@@ -14856,7 +14920,7 @@ var TabErrorBoundary = class extends Component2 {
     ), { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list), EmptyContent = emptyState ?? React49.createElement(EmptyTabContent, { title: "Nothing found" });
     return !showToolsWhenEmpty && list.length === 0 ? EmptyContent : (
       // @ts-expect-error (non strict)
-      React49.createElement(Wrapper4, { absolute, bordered, id: htmlId }, React49.createElement(FlexBar, { scrollable: !1, border: !0, backgroundColor }, React49.createElement(TabBar, { style: { whiteSpace: "normal" }, ref: tabBarRef, role: "tablist" }, visibleList.map(({ title, id, active, color: color4 }, index3) => {
+      React49.createElement(Wrapper4, { "data-deprecated": "Tabs", absolute, bordered, id: htmlId }, React49.createElement(FlexBar, { scrollable: !1, border: !0, backgroundColor }, React49.createElement(TabBar, { style: { whiteSpace: "normal" }, ref: tabBarRef, role: "tablist" }, visibleList.map(({ title, id, active, color: color4 }, index3) => {
         let indexId = `index-${index3}`;
         return React49.createElement(
           TabButton,
@@ -14954,9 +15018,10 @@ var usePrevious = (value) => {
 }, useUpdate = (update, value) => {
   let previousValue = usePrevious(value);
   return update ? value : previousValue;
-}, Div2 = styled59.div({
+}, Div2 = styled59.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
   height: "100%"
-}), AddonPanel = ({ active, children, hasScrollbar = !0 }) => (
+})), AddonPanel = ({ active, children, hasScrollbar = !0 }) => (
   // the hidden attribute is an valid html element that's both accessible and works to visually hide content
   React51.createElement(Div2, { hidden: !active }, hasScrollbar ? React51.createElement(ScrollArea, { vertical: !0 }, useUpdate(active, children)) : useUpdate(active, children))
 );
@@ -16284,6 +16349,7 @@ export {
   A,
   AbstractToolbar,
   ActionBar,
+  ActionList,
   AddonPanel,
   Badge,
   Bar,
@@ -16312,7 +16378,6 @@ export {
   LI,
   Link2 as Link,
   ListItem_default as ListItem,
-  Listbox,
   Loader,
   Modal,
   ModalDecorator,