storybook 10.2.0-alpha.9 → 10.2.0-beta.0

package/dist/components/index.js

@@ -17,7 +17,7 @@ import {
 } from "../_browser-chunks/chunk-LE2LTDW3.js";
 import {
   isTestEnvironment
-} from "../_browser-chunks/chunk-IPA5A322.js";
+} from "../_browser-chunks/chunk-MEXTPDJG.js";
 import {
   require_memoizerific
 } from "../_browser-chunks/chunk-ZCFV7BZB.js";
@@ -1160,39 +1160,26 @@ import $HgANd$react from "react";
 var $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document < "u" ? $HgANd$react.useLayoutEffect : () => {
 };
 
-// ../../node_modules/@react-aria/utils/dist/useEffectEvent.mjs
-import $lmaYr$react, { useRef as $lmaYr$useRef, useCallback as $lmaYr$useCallback } from "react";
-var $8ae05eaa5c114e9c$var$_React_useInsertionEffect, $8ae05eaa5c114e9c$var$useEarlyEffect = ($8ae05eaa5c114e9c$var$_React_useInsertionEffect = $lmaYr$react.useInsertionEffect) !== null && $8ae05eaa5c114e9c$var$_React_useInsertionEffect !== void 0 ? $8ae05eaa5c114e9c$var$_React_useInsertionEffect : $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c;
-function $8ae05eaa5c114e9c$export$7f54fc3180508a52(fn) {
-  let ref = $lmaYr$useRef(null);
-  return $8ae05eaa5c114e9c$var$useEarlyEffect(() => {
-    ref.current = fn;
-  }, [
-    fn
-  ]), $lmaYr$useCallback((...args) => {
-    let f = ref.current;
-    return f?.(...args);
-  }, []);
-}
-
 // ../../node_modules/@react-aria/utils/dist/useValueEffect.mjs
-import { useState as $fCAlL$useState, useRef as $fCAlL$useRef } from "react";
+import { useState as $fCAlL$useState, useRef as $fCAlL$useRef, useCallback as $fCAlL$useCallback } from "react";
 function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
-  let [value, setValue] = $fCAlL$useState(defaultValue), effect = $fCAlL$useRef(null), nextRef = $8ae05eaa5c114e9c$export$7f54fc3180508a52(() => {
+  let [value, setValue] = $fCAlL$useState(defaultValue), currValue = $fCAlL$useRef(value), effect = $fCAlL$useRef(null), nextRef = $fCAlL$useRef(() => {
     if (!effect.current) return;
     let newValue = effect.current.next();
     if (newValue.done) {
       effect.current = null;
       return;
     }
-    value === newValue.value ? nextRef() : setValue(newValue.value);
+    currValue.current === newValue.value ? nextRef.current() : setValue(newValue.value);
   });
   $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
-    effect.current && nextRef();
-  });
-  let queue = $8ae05eaa5c114e9c$export$7f54fc3180508a52((fn) => {
-    effect.current = fn(value), nextRef();
+    currValue.current = value, effect.current && nextRef.current();
   });
+  let queue = $fCAlL$useCallback((fn) => {
+    effect.current = fn(currValue.current), nextRef.current();
+  }, [
+    nextRef
+  ]);
   return [
     value,
     queue
@@ -1586,7 +1573,7 @@ var $65484d02dcb7eb3e$var$DOMPropNames = /* @__PURE__ */ new Set([
 ]), $65484d02dcb7eb3e$var$propRe = /^(data-.*)$/;
 function $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, opts = {}) {
   let { labelable, isLink: isLink2, global: global2, events = global2, propNames } = opts, filteredProps = {};
-  for (let prop in props) Object.prototype.hasOwnProperty.call(props, prop) && ($65484d02dcb7eb3e$var$DOMPropNames.has(prop) || labelable && $65484d02dcb7eb3e$var$labelablePropNames.has(prop) || isLink2 && $65484d02dcb7eb3e$var$linkPropNames.has(prop) || global2 && $65484d02dcb7eb3e$var$globalAttrs.has(prop) || events && $65484d02dcb7eb3e$var$globalEvents.has(prop) || prop.endsWith("Capture") && $65484d02dcb7eb3e$var$globalEvents.has(prop.slice(0, -7)) || propNames?.has(prop) || $65484d02dcb7eb3e$var$propRe.test(prop)) && (filteredProps[prop] = props[prop]);
+  for (let prop in props) Object.prototype.hasOwnProperty.call(props, prop) && ($65484d02dcb7eb3e$var$DOMPropNames.has(prop) || labelable && $65484d02dcb7eb3e$var$labelablePropNames.has(prop) || isLink2 && $65484d02dcb7eb3e$var$linkPropNames.has(prop) || global2 && $65484d02dcb7eb3e$var$globalAttrs.has(prop) || events && ($65484d02dcb7eb3e$var$globalEvents.has(prop) || prop.endsWith("Capture") && $65484d02dcb7eb3e$var$globalEvents.has(prop.slice(0, -7))) || propNames?.has(prop) || $65484d02dcb7eb3e$var$propRe.test(prop)) && (filteredProps[prop] = props[prop]);
   return filteredProps;
 }
 
@@ -1703,6 +1690,7 @@ function $ea8dcbcb9ea1b556$export$95185d699e05d4d7(target, modifiers, setOpening
     ctrlKey,
     altKey,
     shiftKey,
+    detail: 1,
     bubbles: !0,
     cancelable: !0
   });
@@ -1850,6 +1838,21 @@ function $df56164dff5785e2$export$4338b53315abf666(ref) {
   ]);
 }
 
+// ../../node_modules/@react-aria/utils/dist/useEffectEvent.mjs
+import $lmaYr$react, { useRef as $lmaYr$useRef, useCallback as $lmaYr$useCallback } from "react";
+var $8ae05eaa5c114e9c$var$_React_useInsertionEffect, $8ae05eaa5c114e9c$var$useEarlyEffect = ($8ae05eaa5c114e9c$var$_React_useInsertionEffect = $lmaYr$react.useInsertionEffect) !== null && $8ae05eaa5c114e9c$var$_React_useInsertionEffect !== void 0 ? $8ae05eaa5c114e9c$var$_React_useInsertionEffect : $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c;
+function $8ae05eaa5c114e9c$export$7f54fc3180508a52(fn) {
+  let ref = $lmaYr$useRef(null);
+  return $8ae05eaa5c114e9c$var$useEarlyEffect(() => {
+    ref.current = fn;
+  }, [
+    fn
+  ]), $lmaYr$useCallback((...args) => {
+    let f = ref.current;
+    return f?.(...args);
+  }, []);
+}
+
 // ../../node_modules/@react-aria/utils/dist/useUpdateEffect.mjs
 import { useRef as $9vW05$useRef, useEffect as $9vW05$useEffect } from "react";
 
@@ -1870,13 +1873,13 @@ function $9daab02d461809db$var$hasResizeObserver() {
   return typeof window.ResizeObserver < "u";
 }
 function $9daab02d461809db$export$683480f191c0e3ea(options) {
-  let { ref, box, onResize } = options;
+  let { ref, box, onResize } = options, onResizeEvent = $8ae05eaa5c114e9c$export$7f54fc3180508a52(onResize);
   $Vsl8o$useEffect(() => {
     let element = ref?.current;
     if (element)
       if ($9daab02d461809db$var$hasResizeObserver()) {
         let resizeObserverInstance = new window.ResizeObserver((entries) => {
-          entries.length && onResize();
+          entries.length && onResizeEvent();
         });
         return resizeObserverInstance.observe(element, {
           box
@@ -1884,11 +1887,10 @@ function $9daab02d461809db$export$683480f191c0e3ea(options) {
           element && resizeObserverInstance.unobserve(element);
         };
       } else
-        return window.addEventListener("resize", onResize, !1), () => {
-          window.removeEventListener("resize", onResize, !1);
+        return window.addEventListener("resize", onResizeEvent, !1), () => {
+          window.removeEventListener("resize", onResizeEvent, !1);
         };
   }, [
-    onResize,
     ref,
     box
   ]);
@@ -1992,22 +1994,14 @@ function $e9faafb641e167db$export$90fc3a17d93f704c(ref, event, handler, options)
     ref,
     event,
     options,
-    isDisabled,
-    handleEvent
+    isDisabled
   ]);
 }
 
 // ../../node_modules/@react-aria/utils/dist/scrollIntoView.mjs
 function $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollView, element) {
-  let offsetX = $2f04cbc44ee30ce0$var$relativeOffset(scrollView, element, "left"), offsetY = $2f04cbc44ee30ce0$var$relativeOffset(scrollView, element, "top"), width = element.offsetWidth, height = element.offsetHeight, x = scrollView.scrollLeft, y = scrollView.scrollTop, { borderTopWidth, borderLeftWidth, scrollPaddingTop, scrollPaddingRight, scrollPaddingBottom, scrollPaddingLeft } = getComputedStyle(scrollView), { scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft } = getComputedStyle(element), borderAdjustedX = x + parseInt(borderLeftWidth, 10), borderAdjustedY = y + parseInt(borderTopWidth, 10), maxX = borderAdjustedX + scrollView.clientWidth, maxY = borderAdjustedY + scrollView.clientHeight, scrollPaddingTopNumber = parseInt(scrollPaddingTop, 10) || 0, scrollPaddingBottomNumber = parseInt(scrollPaddingBottom, 10) || 0, scrollPaddingRightNumber = parseInt(scrollPaddingRight, 10) || 0, scrollPaddingLeftNumber = parseInt(scrollPaddingLeft, 10) || 0, scrollMarginTopNumber = parseInt(scrollMarginTop, 10) || 0, scrollMarginBottomNumber = parseInt(scrollMarginBottom, 10) || 0, scrollMarginRightNumber = parseInt(scrollMarginRight, 10) || 0, scrollMarginLeftNumber = parseInt(scrollMarginLeft, 10) || 0, targetLeft = offsetX - scrollMarginLeftNumber, targetRight = offsetX + width + scrollMarginRightNumber, targetTop = offsetY - scrollMarginTopNumber, targetBottom = offsetY + height + scrollMarginBottomNumber, scrollPortLeft = x + parseInt(borderLeftWidth, 10) + scrollPaddingLeftNumber, scrollPortRight = maxX - scrollPaddingRightNumber, scrollPortTop = y + parseInt(borderTopWidth, 10) + scrollPaddingTopNumber, scrollPortBottom = maxY - scrollPaddingBottomNumber;
-  if ((targetLeft > scrollPortLeft || targetRight < scrollPortRight) && (targetLeft <= x + scrollPaddingLeftNumber ? x = targetLeft - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber : targetRight > maxX - scrollPaddingRightNumber && (x += targetRight - maxX + scrollPaddingRightNumber)), (targetTop > scrollPortTop || targetBottom < scrollPortBottom) && (targetTop <= borderAdjustedY + scrollPaddingTopNumber ? y = targetTop - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber : targetBottom > maxY - scrollPaddingBottomNumber && (y += targetBottom - maxY + scrollPaddingBottomNumber)), process.env.NODE_ENV === "test") {
-    scrollView.scrollLeft = x, scrollView.scrollTop = y;
-    return;
-  }
-  scrollView.scrollTo({
-    left: x,
-    top: y
-  });
+  let offsetX = $2f04cbc44ee30ce0$var$relativeOffset(scrollView, element, "left"), offsetY = $2f04cbc44ee30ce0$var$relativeOffset(scrollView, element, "top"), width = element.offsetWidth, height = element.offsetHeight, x = scrollView.scrollLeft, y = scrollView.scrollTop, { borderTopWidth, borderLeftWidth, scrollPaddingTop, scrollPaddingRight, scrollPaddingBottom, scrollPaddingLeft } = getComputedStyle(scrollView), borderAdjustedX = x + parseInt(borderLeftWidth, 10), borderAdjustedY = y + parseInt(borderTopWidth, 10), maxX = borderAdjustedX + scrollView.clientWidth, maxY = borderAdjustedY + scrollView.clientHeight, scrollPaddingTopNumber = parseInt(scrollPaddingTop, 10) || 0, scrollPaddingBottomNumber = parseInt(scrollPaddingBottom, 10) || 0, scrollPaddingRightNumber = parseInt(scrollPaddingRight, 10) || 0, scrollPaddingLeftNumber = parseInt(scrollPaddingLeft, 10) || 0;
+  offsetX <= x + scrollPaddingLeftNumber ? x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber : offsetX + width > maxX - scrollPaddingRightNumber && (x += offsetX + width - maxX + scrollPaddingRightNumber), offsetY <= borderAdjustedY + scrollPaddingTopNumber ? y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber : offsetY + height > maxY - scrollPaddingBottomNumber && (y += offsetY + height - maxY + scrollPaddingBottomNumber), scrollView.scrollLeft = x, scrollView.scrollTop = y;
 }
 function $2f04cbc44ee30ce0$var$relativeOffset(ancestor, child, axis) {
   let prop = axis === "left" ? "offsetLeft" : "offsetTop", sum = 0;
@@ -2022,8 +2016,12 @@ function $2f04cbc44ee30ce0$var$relativeOffset(ancestor, child, axis) {
 }
 function $2f04cbc44ee30ce0$export$c826860796309d1b(targetElement, opts) {
   if (targetElement && document.contains(targetElement)) {
-    let root = document.scrollingElement || document.documentElement;
-    if (!(window.getComputedStyle(root).overflow === "hidden") && !$c87311424ea30a05$export$6446a186d09e379e()) {
+    let root = document.scrollingElement || document.documentElement, isScrollPrevented = window.getComputedStyle(root).overflow === "hidden";
+    if (isScrollPrevented) {
+      let scrollParents = $a40c673dc9f6d9c7$export$94ed1c92c7beeb22(targetElement);
+      isScrollPrevented || scrollParents.push(root);
+      for (let scrollParent of scrollParents) $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollParent, targetElement);
+    } else {
       var _targetElement_scrollIntoView;
       let { left: originalLeft, top: originalTop } = targetElement.getBoundingClientRect();
       targetElement == null || (_targetElement_scrollIntoView = targetElement.scrollIntoView) === null || _targetElement_scrollIntoView === void 0 || _targetElement_scrollIntoView.call(targetElement, {
@@ -2039,9 +2037,6 @@ function $2f04cbc44ee30ce0$export$c826860796309d1b(targetElement, opts) {
           block: "nearest"
         });
       }
-    } else {
-      let scrollParents = $a40c673dc9f6d9c7$export$94ed1c92c7beeb22(targetElement);
-      for (let scrollParent of scrollParents) $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollParent, targetElement);
     }
   }
 }
@@ -2191,26 +2186,25 @@ function $b4b717babfbb907b$var$isInert(element) {
 }
 
 // ../../node_modules/@react-stately/utils/dist/useControlledState.mjs
-import { useState as $3whtM$useState, useRef as $3whtM$useRef, useEffect as $3whtM$useEffect, useCallback as $3whtM$useCallback } from "react";
+import $3whtM$react, { useState as $3whtM$useState, useRef as $3whtM$useRef, useEffect as $3whtM$useEffect, useReducer as $3whtM$useReducer, useCallback as $3whtM$useCallback } from "react";
+var $458b0a5536c1a7cf$var$_React_useInsertionEffect, $458b0a5536c1a7cf$var$useEarlyEffect = typeof document < "u" ? ($458b0a5536c1a7cf$var$_React_useInsertionEffect = $3whtM$react.useInsertionEffect) !== null && $458b0a5536c1a7cf$var$_React_useInsertionEffect !== void 0 ? $458b0a5536c1a7cf$var$_React_useInsertionEffect : $3whtM$react.useLayoutEffect : () => {
+};
 function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = $3whtM$useState(value || defaultValue), isControlledRef = $3whtM$useRef(value !== void 0), isControlled = value !== void 0;
+  let [stateValue, setStateValue] = $3whtM$useState(value || defaultValue), valueRef = $3whtM$useRef(stateValue), isControlledRef = $3whtM$useRef(value !== void 0), isControlled = value !== void 0;
   $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));
+  let currentValue = isControlled ? value : stateValue;
+  $458b0a5536c1a7cf$var$useEarlyEffect(() => {
+    valueRef.current = currentValue;
+  });
+  let [, forceUpdate] = $3whtM$useReducer(() => ({}), {}), setValue = $3whtM$useCallback((value2, ...args) => {
+    let newValue = typeof value2 == "function" ? value2(valueRef.current) : value2;
+    Object.is(valueRef.current, newValue) || (valueRef.current = newValue, setStateValue(newValue), forceUpdate(), onChange?.(newValue, ...args));
   }, [
-    isControlled,
-    currentValue,
     onChange
   ]);
   return [
@@ -8774,19 +8768,44 @@ var ActionListItem = styled30.li(
     justifyContent: "space-between",
     flex: "0 0 auto",
     overflow: "hidden",
+    minHeight: 32,
     gap: 4,
     fontSize: theme.typography.size.s1,
     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,
+    color: active ? "var(--listbox-item-active-color)" : theme.color.defaultText,
+    "--listbox-item-active-color": theme.base === "light" ? curriedDarken$1(0.1, theme.color.secondary) : theme.color.secondary,
+    "--listbox-item-muted-color": active ? "var(--listbox-item-active-color)" : theme.color.mediumdark,
+    '&[aria-disabled="true"]': {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    },
+    '&[aria-selected="true"]': {
+      color: "var(--listbox-item-active-color)",
+      fontWeight: theme.typography.weight.bold,
+      "--listbox-item-muted-color": "var(--listbox-item-active-color)"
+    },
     "&:not(:hover, :has(:focus-visible)) svg + input": {
       position: "absolute",
       opacity: 0
     },
+    '&[role="option"]': {
+      cursor: "pointer",
+      borderRadius: theme.input.borderRadius,
+      outlineOffset: -2,
+      padding: "0 9px",
+      gap: 8,
+      "&:hover": {
+        background: curriedTransparentize$1(0.86, theme.color.secondary)
+      },
+      "&:focus-visible": {
+        outline: `2px solid ${theme.color.secondary}`
+      }
+    },
     "@supports (interpolate-size: allow-keywords)": {
       interpolateSize: "allow-keywords",
-      transition: "all var(--transition-duration, 0.2s)",
-      transitionBehavior: "allow-discrete"
+      transitionBehavior: "allow-discrete",
+      transitionDuration: "var(--transition-duration, 0.2s)",
+      transitionProperty: "opacity, block-size, content-visibility"
     },
     "@media (prefers-reduced-motion: reduce)": {
       transition: "none"
@@ -8828,12 +8847,13 @@ var ActionListItem = styled30.li(
     opacity: 0,
     paddingInline: 0
   }
-})), StyledButton2 = styled30(Button)({
+})), StyledButton2 = styled30(Button)(({ size }) => ({
+  gap: size === "small" ? 6 : 8,
   "&:focus-visible": {
     // Prevent focus outline from being cut off by overflow: hidden
     outlineOffset: -2
   }
-}), StyledToggleButton = styled30(ToggleButton)({
+})), StyledToggleButton = styled30(ToggleButton)({
   "&:focus-visible": {
     // Prevent focus outline from being cut off by overflow: hidden
     outlineOffset: -2
@@ -8847,6 +8867,8 @@ var ActionListItem = styled30.li(
     return React16.createElement(StyledToggleButton, { ...props, variant, padding, size, ref });
   }
 ), ActionListAction = styled30(ActionListButton)(({ theme }) => ({
+  height: "auto",
+  minHeight: 32,
   flex: "0 1 100%",
   textAlign: "start",
   justifyContent: "space-between",
@@ -8862,32 +8884,40 @@ var ActionListItem = styled30.li(
     outline: `2px solid ${theme.color.secondary}`,
     outlineOffset: -2
   }
-})), ActionListLink = (props) => React16.createElement(ActionListAction, { as: "a", ...props }), ActionListText = styled30.div({
+})), ActionListLink = (props) => React16.createElement(ActionListAction, { as: "a", ...props }), ActionListText = styled30.div(({ theme }) => ({
   display: "flex",
-  alignItems: "center",
-  gap: 8,
+  flexDirection: "column",
+  justifyContent: "center",
   flexGrow: 1,
   minWidth: 0,
   padding: "8px 0",
   lineHeight: "16px",
-  "& span": {
+  "& > *": {
+    margin: 0,
+    whiteSpace: "normal"
+  },
+  "& > span": {
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
+  "& small": {
+    fontSize: "inherit",
+    color: theme.textMutedColor
+  },
   "&:first-child": {
     paddingLeft: 8
   },
   "&:last-child": {
     paddingRight: 8
   },
-  "button > &:first-child": {
+  'button > &:first-child, [role="option"] > &:first-child': {
     paddingLeft: 0
   },
-  "button > &:last-child": {
+  'button > &:last-child, [role="option"] > &:last-child': {
     paddingRight: 0
   }
-}), ActionListIcon = styled30.div({
+})), ActionListIcon = styled30.div({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -9083,8 +9113,8 @@ var fadeInOut = keyframes({
     }
   }
 })), Card = Object.assign(
-  forwardRef7(function({ outlineAnimation = "none", outlineColor, ...props }, ref) {
-    return React18.createElement(CardOutline, { animation: outlineAnimation, color: outlineColor, ref }, React18.createElement(CardContent, { ...props }));
+  forwardRef7(function({ outlineAnimation = "none", outlineColor, outlineAttrs = {}, ...props }, ref) {
+    return React18.createElement(CardOutline, { animation: outlineAnimation, color: outlineColor, ref, ...outlineAttrs }, React18.createElement(CardContent, { ...props }));
   }),
   {
     Content: CardContent,
@@ -9299,7 +9329,7 @@ var fadeIn = keyframes2({
       outline: "none"
     }
   }),
-  ({ width, height, $variant, $status, $transitionDuration }) => $variant === "dialog" ? {
+  ({ theme, width, height, $variant, $status, $transitionDuration }) => $variant === "dialog" ? {
     top: "50%",
     left: "50%",
     width: width ?? 740,
@@ -9319,9 +9349,12 @@ var fadeIn = keyframes2({
     bottom: "0",
     left: "0",
     right: "0",
+    borderRadius: "10px 10px 0 0",
+    overflow: "hidden",
     width: width ?? "100%",
     height: height ?? "80%",
     maxWidth: "100%",
+    background: theme.background.content,
     "@supports (interpolate-size: allow-keywords)": {
       interpolateSize: "allow-keywords"
     },
@@ -9345,6 +9378,7 @@ var fadeIn = keyframes2({
   return React19.createElement(
     Button,
     {
+      type: "button",
       padding: "small",
       ariaLabel: "Close modal",
       variant: "ghost",
@@ -9695,9 +9729,9 @@ var ZoomIFrame = class extends Component {
   setIframeInnerZoom(scale) {
     try {
       Object.assign(this.iframe.contentDocument.body.style, {
-        width: `${scale * 100}%`,
-        height: `${scale * 100}%`,
-        transform: `scale(${1 / scale})`,
+        width: `${1 / scale * 100}%`,
+        height: `${1 / scale * 100}%`,
+        transform: `scale(${scale})`,
         transformOrigin: "top left"
       });
     } catch {
@@ -9706,9 +9740,9 @@ var ZoomIFrame = class extends Component {
   }
   setIframeZoom(scale) {
     Object.assign(this.iframe.style, {
-      width: `${scale * 100}%`,
-      height: `${scale * 100}%`,
-      transform: `scale(${1 / scale})`,
+      width: `${1 / scale * 100}%`,
+      height: `${1 / scale * 100}%`,
+      transform: `scale(${scale})`,
       transformOrigin: "top left"
     });
   }
@@ -9762,7 +9796,7 @@ ${input}`);
 // 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";
-import { styled as styled48, useTheme } from "storybook/theming";
+import { styled as styled47, useTheme } from "storybook/theming";
 
 // src/components/components/Form/Form.tsx
 import { styled as styled44 } from "storybook/theming";
@@ -9915,8 +9949,9 @@ var sizes = (({ size }) => {
       outline: "1px solid highlight"
     }
   },
-  "&[disabled]": {
-    background: theme.base === "light" ? theme.color.lighter : "transparent"
+  '&[disabled], &[aria-disabled="true"]': {
+    background: theme.base === "light" ? theme.color.lighter : "transparent",
+    cursor: "not-allowed"
   },
   "&:-webkit-autofill": { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` },
   "&::placeholder": {
@@ -10357,56 +10392,12 @@ Popover.displayName = "Popover";
 
 // src/components/components/Select/SelectOption.tsx
 import React36 from "react";
-import { styled as styled46 } from "storybook/theming";
-var Item = styled46("li")(({ theme }) => ({
-  padding: "6px 12px",
-  fontSize: 12,
-  lineHeight: 1.5,
-  background: "transparent",
-  color: theme.color.defaultText,
-  cursor: "pointer",
-  borderRadius: 4,
-  '&[aria-disabled="true"]': {
-    opacity: 0.5,
-    cursor: "not-allowed"
-  },
-  '&[aria-selected="true"]': {
-    color: theme.base === "light" ? curriedDarken$1(0.1, theme.color.secondary) : theme.color.secondary,
-    fontWeight: theme.typography.weight.bold
-  },
-  ":hover": {
-    background: curriedTransparentize$1(0.93, theme.color.secondary)
-  },
-  ":focus-visible": {
-    background: theme.background.hoverable,
-    outline: `2px solid ${theme.barSelectedColor}`,
-    outlineOffset: 1,
-    borderRadius: 2
-  },
-  display: "flex",
-  alignItems: "flex-start",
-  gap: 8
-})), Row2 = styled46("div")({
-  display: "flex",
-  flexDirection: "row",
-  gap: 4,
-  alignItems: "center"
-}), Col2 = styled46("div")({
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: 1
-}), Icon = styled46("span")(() => ({
-  display: "block",
-  height: "1rem",
-  width: "1rem"
-})), Title3 = styled46("span")(({}) => ({})), Description2 = styled46("span")(({ theme }) => ({
-  fontSize: 11,
-  color: theme.textMutedColor
-})), SelectOption = ({
+var SelectOption = ({
   id,
   title,
   description,
   icon,
+  aside,
   children,
   isSelected,
   isActive,
@@ -10416,7 +10407,7 @@ var Item = styled46("li")(({ theme }) => ({
   shouldLookDisabled = !1,
   ...props
 }) => React36.createElement(
-  Item,
+  ActionList.Item,
   {
     ...props,
     id,
@@ -10428,12 +10419,12 @@ var Item = styled46("li")(({ theme }) => ({
     onFocus,
     onKeyDown
   },
-  children ?? React36.createElement(Row2, null, icon && React36.createElement(Icon, null, icon), React36.createElement(Col2, null, React36.createElement(Title3, null, title), description && React36.createElement(Description2, null, description)))
+  children ?? React36.createElement(React36.Fragment, null, icon && React36.createElement(ActionList.Icon, null, icon), React36.createElement(ActionList.Text, null, React36.createElement("p", null, title), description && React36.createElement("small", null, description)), aside)
 );
 SelectOption.displayName = "SelectOption";
 
 // src/components/components/Select/helpers.tsx
-import { styled as styled47 } from "storybook/theming";
+import { styled as styled46 } from "storybook/theming";
 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";
@@ -10455,7 +10446,7 @@ function valueToExternal(value) {
 function externalToValue(value) {
   return value === void 0 ? UNDEFINED_VALUE : value;
 }
-var Listbox = styled47("ul")({
+var Listbox = styled46("ul")({
   minWidth: 180,
   height: "100%",
   borderRadius: 6,
@@ -10469,7 +10460,7 @@ var Listbox = styled47("ul")({
 function valueToId(parentId, { value }) {
   return `${parentId}-opt-${String(value) ?? "sb-reset"}`;
 }
-var SelectedOptionCount = styled48.span(({ theme }) => ({
+var SelectedOptionCount = styled47.span(({ theme }) => ({
   appearance: "none",
   color: theme.textMutedColor,
   fontSize: 12
@@ -10477,13 +10468,13 @@ var SelectedOptionCount = styled48.span(({ theme }) => ({
 function setSelectedFromDefault(options, defaultOptions) {
   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 StyledButton3 = styled48(Button)(
+var StyledButton3 = styled47(Button)(
   ({ $isOpen: isOpen, $hasSelection: hasSelection, theme }) => isOpen || hasSelection ? {
     boxShadow: "none",
     background: curriedTransparentize$1(0.93, theme.barSelectedColor),
     color: theme.base === "light" ? curriedDarken$1(0.1, theme.color.secondary) : theme.color.secondary
   } : {}
-), Underlay = styled48.div({
+), Underlay = styled47.div({
   position: "fixed",
   inset: 0,
   // This will do for now, our popovers use the max z-index of 2147483647. We'll want to
@@ -10542,12 +10533,16 @@ var StyledButton3 = styled48(Button)(
     ariaLabel,
     ...props
   }, ref) => {
-    let [isOpen, setIsOpen] = useState11(props.defaultOpen || !1), triggerRef = $df56164dff5785e2$export$4338b53315abf666(ref), id = useMemo4(() => "select-" + Math.random().toString(36).substring(2, 15), []), listboxId = `${id}-listbox`, listboxRef = useRef7(null), otState = $fc909762b330b746$export$61c6a8c84e605fb6({
+    let [isOpen, setIsOpen] = useState11(props.defaultOpen || !1), [shouldRefocusTrigger, setShouldRefocusTrigger] = useState11(!1), triggerRef = $df56164dff5785e2$export$4338b53315abf666(ref), id = useMemo4(() => "select-" + Math.random().toString(36).substring(2, 15), []), listboxId = `${id}-listbox`, listboxRef = useRef7(null), otState = $fc909762b330b746$export$61c6a8c84e605fb6({
       isOpen: isOpen && !disabled,
       onOpenChange: setIsOpen
     }), handleClose = useCallback8(() => {
-      setIsOpen(!1), triggerRef.current?.focus();
-    }, [triggerRef]), [selectedOptions, setSelectedOptions] = useState11(
+      setIsOpen(!1), setShouldRefocusTrigger(!0);
+    }, []);
+    useEffect7(() => {
+      !otState.isOpen && shouldRefocusTrigger && (triggerRef.current?.focus(), setShouldRefocusTrigger(!1));
+    }, [otState.isOpen, shouldRefocusTrigger, triggerRef]);
+    let [selectedOptions, setSelectedOptions] = useState11(
       setSelectedFromDefault(calleeOptions, defaultOptions)
     ), handleSelectOption = useCallback8(
       (option) => {
@@ -10577,8 +10572,8 @@ var StyledButton3 = styled48(Button)(
     let [activeOption, setActiveOptionState] = useState11(
       void 0
     ), setActiveOption = useCallback8(
-      (option) => {
-        setActiveOptionState(optionOrResetToInternal(option)), multiSelect || handleSelectOption(optionOrResetToInternal(option));
+      (option, changeSelection = !0) => {
+        setActiveOptionState(optionOrResetToInternal(option)), !multiSelect && changeSelection && handleSelectOption(optionOrResetToInternal(option));
       },
       [multiSelect, handleSelectOption]
     ), moveActiveOptionDown = useCallback8(
@@ -10685,6 +10680,7 @@ var StyledButton3 = styled48(Button)(
             key: option.value === void 0 ? "sb-reset" : String(option.value),
             title: option.title,
             description: option.description,
+            aside: option.aside,
             icon: !isReset && multiSelect ? (
               // Purely decorative.
               React37.createElement(Form.Checkbox, { checked: isSelected, hidden: !0, role: "presentation" })
@@ -10695,7 +10691,7 @@ var StyledButton3 = styled48(Button)(
             onClick: () => {
               handleSelectOption(option), multiSelect || handleClose();
             },
-            onFocus: () => setActiveOption(externalOption),
+            onFocus: () => setActiveOption(externalOption, !1),
             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());
@@ -14293,38 +14289,38 @@ var LazyWithTooltip = lazy2(
 // src/components/components/tooltip/TooltipMessage.tsx
 import React41 from "react";
 import { deprecate as deprecate5 } from "storybook/internal/client-logger";
-import { styled as styled49 } from "storybook/theming";
-var Title4 = styled49.div(({ theme }) => ({
+import { styled as styled48 } from "storybook/theming";
+var Title3 = styled48.div(({ theme }) => ({
   fontWeight: theme.typography.weight.bold
-})), Desc2 = styled49.span(), Links = styled49.div(({ theme }) => ({
+})), Desc2 = styled48.span(), Links = styled48.div(({ theme }) => ({
   marginTop: 8,
   textAlign: "center",
   "> *": {
     margin: "0 8px",
     fontWeight: theme.typography.weight.bold
   }
-})), Message2 = styled49.div(({ theme }) => ({
+})), Message2 = styled48.div(({ theme }) => ({
   color: theme.color.defaultText,
   lineHeight: "18px"
-})), MessageWrapper = styled49.div({
+})), MessageWrapper = styled48.div({
   padding: 15,
   width: 280,
   boxSizing: "border-box"
 }), TooltipMessage = ({ title, desc, links }) => (deprecate5(
   "`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)))));
+), React41.createElement(MessageWrapper, { "data-deprecated": "TooltipMessage" }, React41.createElement(Message2, null, title && React41.createElement(Title3, 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";
 import { deprecate as deprecate7 } from "storybook/internal/client-logger";
-import { styled as styled51 } from "storybook/theming";
+import { styled as styled50 } from "storybook/theming";
 
 // src/components/components/tooltip/ListItem.tsx
 var import_memoizerific2 = __toESM(require_memoizerific(), 1);
 import React42, { forwardRef as forwardRef14 } from "react";
 import { deprecate as deprecate6 } from "storybook/internal/client-logger";
-import { styled as styled50 } from "storybook/theming";
-var Title5 = styled50(({ active, loading, disabled, ...rest }) => React42.createElement("span", { ...rest }))(
+import { styled as styled49 } from "storybook/theming";
+var Title4 = styled49(({ active, loading, disabled, ...rest }) => React42.createElement("span", { ...rest }))(
   ({ theme }) => ({
     color: theme.color.defaultText,
     // Previously was theme.typography.weight.normal but this weight does not exists in Theme
@@ -14342,7 +14338,7 @@ var Title5 = styled50(({ active, loading, disabled, ...rest }) => React42.create
   ({ disabled, theme }) => disabled ? {
     color: theme.textMutedColor
   } : {}
-), Right = styled50.span({
+), Right = styled49.span({
   display: "flex",
   "& svg": {
     height: 12,
@@ -14350,7 +14346,7 @@ var Title5 = styled50(({ active, loading, disabled, ...rest }) => React42.create
     margin: "3px 0",
     verticalAlign: "top"
   }
-}), Center = styled50.span(
+}), Center = styled49.span(
   {
     flex: 1,
     textAlign: "left",
@@ -14360,7 +14356,7 @@ var Title5 = styled50(({ active, loading, disabled, ...rest }) => React42.create
     // required for overflow
   },
   ({ isIndented }) => isIndented ? { marginLeft: 24 } : {}
-), CenterText = styled50.span(
+), CenterText = styled49.span(
   ({ theme }) => ({
     fontSize: "11px",
     lineHeight: "14px"
@@ -14371,7 +14367,7 @@ var Title5 = styled50(({ active, loading, disabled, ...rest }) => React42.create
   ({ theme, disabled }) => disabled ? {
     color: theme.textMutedColor
   } : {}
-), Left = styled50.span(
+), Left = styled49.span(
   ({ active, theme }) => active ? {
     color: theme.color.secondary
   } : {},
@@ -14379,7 +14375,7 @@ var Title5 = styled50(({ active, loading, disabled, ...rest }) => React42.create
     display: "flex",
     maxWidth: 14
   })
-), Item2 = styled50.button(
+), Item = styled49.button(
   ({ theme }) => ({
     width: "100%",
     minWidth: 0,
@@ -14458,13 +14454,13 @@ 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, { "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)));
+  ), React42.createElement(Item, { "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(Title4, { ...commonProps, loading }, title), center && React42.createElement(CenterText, { ...commonProps }, center)) : null, right && React42.createElement(Right, { ...commonProps }, right)));
 });
 ListItem.displayName = "ListItem";
 var ListItem_default = ListItem;
 
 // src/components/components/tooltip/TooltipLinkList.tsx
-var List = styled51.div(
+var List = styled50.div(
   {
     minWidth: 180,
     overflow: "hidden",
@@ -14476,12 +14472,12 @@ var List = styled51.div(
     borderRadius: theme.appBorderRadius + 2
   }),
   ({ theme }) => theme.base === "dark" ? { background: theme.background.content } : {}
-), Group = styled51.div(({ theme }) => ({
+), Group = styled50.div(({ theme }) => ({
   padding: 4,
   "& + &": {
     borderTop: `1px solid ${theme.appBorderColor}`
   }
-})), Item3 = ({ id, onClick, ...rest }) => {
+})), Item2 = ({ id, onClick, ...rest }) => {
   let { active, disabled, title, href } = rest, handleClick = useCallback10(
     (event) => onClick?.(event, { id, active, disabled, title, href }),
     [onClick, id, active, disabled, title, href]
@@ -14494,20 +14490,20 @@ var List = styled51.div(
   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, { "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 })))));
+  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(Item2, { key: link.id, isIndented, LinkWrapper, ...link })))));
 };
 
 // src/components/components/Tabs/Tabs.tsx
 import React49, { Component as Component2, forwardRef as forwardRef17, memo, useMemo as useMemo5 } from "react";
 import { deprecate as deprecate12 } from "storybook/internal/client-logger";
 import { sanitize as sanitize2 } from "storybook/internal/csf";
-import { styled as styled57 } from "storybook/theming";
+import { styled as styled56 } from "storybook/theming";
 
 // src/components/components/Bar/Bar.tsx
 import React44, { Children as Children4, forwardRef as forwardRef15 } from "react";
 import { deprecate as deprecate8 } from "storybook/internal/client-logger";
-import { styled as styled52 } from "storybook/theming";
-var StyledBar = styled52.div(
+import { styled as styled51 } from "storybook/theming";
+var StyledBar = styled51.div(
   ({ backgroundColor, border = !1, innerStyle = {}, scrollable, theme }) => ({
     color: theme.barTextColor,
     width: "100%",
@@ -14529,7 +14525,7 @@ var StyledBar = styled52.div(
     } : {},
     ...innerStyle
   })
-), HeightPreserver = styled52.div(({ innerStyle }) => ({
+), HeightPreserver = styled51.div(({ innerStyle }) => ({
   minHeight: 40,
   display: "flex",
   alignItems: "center",
@@ -14550,7 +14546,7 @@ var StyledBar = styled52.div(
   )
 );
 Bar.displayName = "Bar";
-var Side = styled52.div(
+var Side = styled51.div(
   {
     display: "flex",
     whiteSpace: "nowrap",
@@ -14569,7 +14565,7 @@ var Side = styled52.div(
   } : {}
 );
 Side.displayName = "Side";
-var BarInner = styled52.div(({ bgColor }) => ({
+var BarInner = styled51.div(({ bgColor }) => ({
   display: "flex",
   justifyContent: "space-between",
   position: "relative",
@@ -14578,7 +14574,7 @@ var BarInner = styled52.div(({ bgColor }) => ({
   height: 40,
   width: "100%",
   backgroundColor: bgColor || ""
-})), BarWithoutPadding = styled52(Bar)({
+})), BarWithoutPadding = styled51(Bar)({
   paddingInline: 0
 }), FlexBar = ({ children, backgroundColor, className = "", ...rest }) => {
   deprecate8('FlexBar is deprecated. Use Bar with justifyContent: "space-between" instead.');
@@ -14599,7 +14595,7 @@ FlexBar.displayName = "FlexBar";
 // src/components/components/Tabs/Button.tsx
 import React45, { forwardRef as forwardRef16 } from "react";
 import { deprecate as deprecate9 } from "storybook/internal/client-logger";
-import { isPropValid as isPropValid2, styled as styled53 } from "storybook/theming";
+import { isPropValid as isPropValid2, styled as styled52 } from "storybook/theming";
 var isLink = (obj) => typeof obj.props.href == "string", isButton = (obj) => typeof obj.props.href != "string";
 function ForwardRefFunction({ children, ...rest }, ref) {
   let o = { props: rest, ref };
@@ -14611,7 +14607,7 @@ function ForwardRefFunction({ children, ...rest }, ref) {
 }
 var ButtonOrLink = forwardRef16(ForwardRefFunction);
 ButtonOrLink.displayName = "ButtonOrLink";
-var StyledTabButton = styled53(ButtonOrLink, { shouldForwardProp: isPropValid2 })(
+var StyledTabButton = styled52(ButtonOrLink, { shouldForwardProp: isPropValid2 })(
   {
     whiteSpace: "normal",
     display: "inline-flex",
@@ -14660,8 +14656,8 @@ TabButton.displayName = "TabButton";
 
 // src/components/components/Tabs/EmptyTabContent.tsx
 import React46 from "react";
-import { styled as styled54 } from "storybook/theming";
-var Wrapper3 = styled54.div(({ theme }) => ({
+import { styled as styled53 } from "storybook/theming";
+var Wrapper3 = styled53.div(({ theme }) => ({
   height: "100%",
   display: "flex",
   padding: 30,
@@ -14670,30 +14666,30 @@ var Wrapper3 = styled54.div(({ theme }) => ({
   flexDirection: "column",
   gap: 15,
   background: theme.background.content
-})), Content2 = styled54.div({
+})), Content2 = styled53.div({
   display: "flex",
   flexDirection: "column",
   gap: 4,
   maxWidth: 415
-}), Title6 = styled54.div(({ theme }) => ({
+}), Title5 = styled53.div(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
   fontSize: theme.typography.size.s2 - 1,
   textAlign: "center",
   color: theme.color.defaultText
-})), Footer = styled54.div(({ theme }) => ({
+})), Footer = styled53.div(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1
-})), Description3 = styled54.div(({ theme }) => ({
+})), Description2 = styled53.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 && React46.createElement(Footer, null, footer));
+})), EmptyTabContent = ({ title, description, footer }) => React46.createElement(Wrapper3, null, React46.createElement(Content2, null, React46.createElement(Title5, null, title), description && React46.createElement(Description2, null, description)), footer && React46.createElement(Footer, null, footer));
 
 // src/components/components/Tabs/Tabs.helpers.tsx
 import React47, { Children as Children5 } from "react";
 import { deprecate as deprecate10 } from "storybook/internal/client-logger";
-import { styled as styled55 } from "storybook/theming";
-var VisuallyHidden = styled55.div(
+import { styled as styled54 } from "storybook/theming";
+var VisuallyHidden = styled54.div(
   ({ active }) => active ? { display: "block" } : { display: "none" }
 ), childrenToList = (children) => (deprecate10("The `childrenToList` tabs helper is deprecated. Use `TabsView` instead."), Children5.toArray(children).map(
   // @ts-expect-error (non strict)
@@ -14716,8 +14712,8 @@ var VisuallyHidden = styled55.div(
 import React48, { useCallback as useCallback11, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState13 } from "react";
 import { deprecate as deprecate11 } from "storybook/internal/client-logger";
 import { sanitize } from "storybook/internal/csf";
-import { styled as styled56 } from "storybook/theming";
-var CollapseIcon = styled56.span(({ theme, isActive }) => ({
+import { styled as styled55 } from "storybook/theming";
+var CollapseIcon = styled55.span(({ theme, isActive }) => ({
   display: "inline-block",
   width: 0,
   height: 0,
@@ -14727,7 +14723,7 @@ var CollapseIcon = styled56.span(({ theme, isActive }) => ({
   borderLeft: "3px solid transparent",
   borderTop: "3px solid",
   transition: "transform .1s ease-out"
-})), AddonButton = styled56(TabButton)(({ active, theme, preActive }) => `
+})), AddonButton = styled55(TabButton)(({ active, theme, preActive }) => `
     color: ${preActive || active ? theme.barSelectedColor : theme.barTextColor};
     .addon-collapsible-icon {
       color: ${preActive || active ? theme.barSelectedColor : theme.barTextColor};
@@ -14836,7 +14832,7 @@ function useList(list) {
 }
 
 // src/components/components/Tabs/Tabs.tsx
-var ignoreSsrWarning2 = "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */", Wrapper4 = styled57.div(
+var ignoreSsrWarning2 = "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */", Wrapper4 = styled56.div(
   ({ theme, bordered }) => bordered ? {
     backgroundClip: "padding-box",
     border: `1px solid ${theme.appBorderColor}`,
@@ -14853,7 +14849,7 @@ var ignoreSsrWarning2 = "/* emotion-disable-server-rendering-unsafe-selector-war
   } : {
     display: "block"
   }
-), StyledTabBar = styled57.div({
+), StyledTabBar = styled56.div({
   overflow: "hidden",
   "&:first-of-type": {
     marginLeft: -3
@@ -14864,7 +14860,7 @@ var ignoreSsrWarning2 = "/* emotion-disable-server-rendering-unsafe-selector-war
   (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(
+var Content3 = styled56.div(
   {
     display: "block",
     position: "relative",
@@ -15008,9 +15004,10 @@ TabsState.defaultProps = {
 
 // src/components/components/Bar/Separator.tsx
 import React50, { Fragment as Fragment5 } from "react";
-import { styled as styled58 } from "storybook/theming";
-var Separator2 = styled58.span(
+import { styled as styled57 } from "storybook/theming";
+var Separator2 = styled57.span(
   ({ theme }) => ({
+    display: "inline-block",
     width: 1,
     height: 20,
     background: theme.appBorderColor,
@@ -15031,7 +15028,7 @@ var interleaveSeparators = (list) => list.reduce(
 
 // src/components/components/addon-panel/addon-panel.tsx
 import React51, { useEffect as useEffect8, useRef as useRef9 } from "react";
-import { styled as styled59 } from "storybook/theming";
+import { styled as styled58 } from "storybook/theming";
 var usePrevious = (value) => {
   let ref = useRef9();
   return useEffect8(() => {
@@ -15040,7 +15037,7 @@ var usePrevious = (value) => {
 }, useUpdate = (update, value) => {
   let previousValue = usePrevious(value);
   return update ? value : previousValue;
-}, Div2 = styled59.div(({ theme }) => ({
+}, Div2 = styled58.div(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1,
   height: "100%"
 })), AddonPanel = ({ active, children, hasScrollbar = !0 }) => (
@@ -15270,8 +15267,8 @@ function $58d314389b21fa3f$export$773e389e644c5874(props, state, ref) {
 }
 
 // src/components/components/Tabs/TabList.tsx
-import { styled as styled60 } from "storybook/theming";
-var StyledTabButton2 = styled60.button(
+import { styled as styled59 } from "storybook/theming";
+var StyledTabButton2 = styled59.button(
   {
     whiteSpace: "normal",
     display: "inline-flex",
@@ -15316,13 +15313,13 @@ var StyledTabButton2 = styled60.button(
       color: theme.barHoverColor
     }
   }
-), TabListContainer = styled60.div({
+), TabListContainer = styled59.div({
   display: "flex",
   alignItems: "center",
   flexShrink: 0,
   position: "relative",
   overflow: "hidden"
-}), ScrollContainer = styled60.div({
+}), ScrollContainer = styled59.div({
   display: "flex",
   overflowX: "auto",
   scrollbarWidth: "none",
@@ -15333,17 +15330,17 @@ var StyledTabButton2 = styled60.button(
   "&::-webkit-scrollbar": {
     display: "none"
   }
-}), StyledTabList = styled60.div({
+}), StyledTabList = styled59.div({
   display: "flex",
   flexShrink: 0
-}), SCROLL_BUTTON_WIDTH = 28, ScrollButtonContainer = styled60.div(({ $showStartBorder, $showEndBorder, theme }) => ({
+}), SCROLL_BUTTON_WIDTH = 28, ScrollButtonContainer = styled59.div(({ $showStartBorder, $showEndBorder, theme }) => ({
   flexShrink: 0,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   padding: 6,
   boxShadow: $showStartBorder ? `inset 1px 0 0 ${theme.appBorderColor}` : $showEndBorder ? `inset -1px 0 0 ${theme.appBorderColor}` : "none"
-})), ScrollButton = styled60(Button)({
+})), ScrollButton = styled59(Button)({
   flexShrink: 0,
   paddingInline: 0,
   width: 16
@@ -15423,8 +15420,8 @@ var StyledTabButton2 = styled60.button(
 
 // src/components/components/Tabs/TabPanel.tsx
 import React54, { useRef as useRef12 } from "react";
-import { styled as styled61 } from "storybook/theming";
-var Panel = styled61.div({
+import { styled as styled60 } from "storybook/theming";
+var Panel = styled60.div({
   overflowY: "hidden",
   height: "100%"
 }), TabPanel = ({
@@ -15637,25 +15634,25 @@ function $76f919a04c5a7d14$var$findDefaultSelectedKey(collection, disabledKeys)
 }
 
 // src/components/components/Tabs/TabsView.tsx
-import { styled as styled62 } from "storybook/theming";
+import { styled as styled61 } from "storybook/theming";
 var useTabsState = ({
   defaultSelected,
   onSelectionChange,
   selected,
   tabs
 }) => $76f919a04c5a7d14$export$4ba071daf4e486({
-  children: tabs.map(({ children: Children6, id, "aria-label": ariaLabel, title: Title7 }) => React55.createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, { key: id, "aria-label": ariaLabel, title: typeof Title7 == "function" ? React55.createElement(Title7, null) : Title7 }, typeof Children6 == "function" ? React55.createElement(Children6, null) : Children6)),
+  children: tabs.map(({ children: Children6, id, "aria-label": ariaLabel, title: Title6 }) => React55.createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, { key: id, "aria-label": ariaLabel, title: typeof Title6 == "function" ? React55.createElement(Title6, null) : Title6 }, typeof Children6 == "function" ? React55.createElement(Children6, null) : Children6)),
   disabledKeys: tabs.filter(({ isDisabled }) => isDisabled).map(({ id }) => id),
   defaultSelectedKey: defaultSelected,
   onSelectionChange: (key) => onSelectionChange?.(`${key}`),
   selectedKey: selected
-}), Container4 = styled62.div({
+}), Container4 = styled61.div({
   display: "flex",
   flexDirection: "column",
   height: "100%"
-}), FlexTabPanel = styled62(TabPanel)(() => ({
+}), FlexTabPanel = styled61(TabPanel)(() => ({
   flex: 1
-})), FlexTabList = styled62(TabList)(({ $simulatedGap }) => ({
+})), FlexTabList = styled61(TabList)(({ $simulatedGap }) => ({
   flex: "1 1 0%",
   '&[data-show-scroll-buttons="true"]': { marginInlineEnd: $simulatedGap }
 })), TabsView = ({
@@ -15884,14 +15881,14 @@ var $5e8ad37a45e1c704$export$3e41faf802a29e71 = $e1995378a142960e$export$18af5c7
 });
 
 // src/components/components/Tabs/StatelessTabList.tsx
-import { styled as styled63 } from "storybook/theming";
-var Root = styled63.div({
+import { styled as styled62 } from "storybook/theming";
+var Root = styled62.div({
   display: "flex",
   alignItems: "center",
   flexShrink: 0,
   position: "relative",
   overflow: "hidden"
-}), ScrollContainer2 = styled63.div({
+}), ScrollContainer2 = styled62.div({
   display: "flex",
   overflowX: "auto",
   scrollbarWidth: "none",
@@ -15902,17 +15899,17 @@ var Root = styled63.div({
   "&::-webkit-scrollbar": {
     display: "none"
   }
-}), StyledTabList2 = styled63($5e8ad37a45e1c704$export$e51a686c67fdaa2d)({
+}), StyledTabList2 = styled62($5e8ad37a45e1c704$export$e51a686c67fdaa2d)({
   display: "flex",
   flexShrink: 0
-}), SCROLL_BUTTON_WIDTH2 = 28, ScrollButtonContainer2 = styled63.div(({ $showStartBorder, $showEndBorder, theme }) => ({
+}), SCROLL_BUTTON_WIDTH2 = 28, ScrollButtonContainer2 = styled62.div(({ $showStartBorder, $showEndBorder, theme }) => ({
   flexShrink: 0,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   padding: 6,
   boxShadow: $showStartBorder ? `inset 1px 0 0 ${theme.appBorderColor}` : $showEndBorder ? `inset -1px 0 0 ${theme.appBorderColor}` : "none"
-})), ScrollButton2 = styled63(Button)({
+})), ScrollButton2 = styled62(Button)({
   flexShrink: 0,
   paddingInline: 0,
   width: 16
@@ -15974,8 +15971,8 @@ var Root = styled63.div({
 
 // src/components/components/Tabs/StatelessTabPanel.tsx
 import React57 from "react";
-import { styled as styled64 } from "storybook/theming";
-var Root2 = styled64($5e8ad37a45e1c704$export$3d96ec278d3efce4)({
+import { styled as styled63 } from "storybook/theming";
+var Root2 = styled63($5e8ad37a45e1c704$export$3d96ec278d3efce4)({
   overflowY: "hidden",
   height: "100%",
   display: "block",
@@ -15989,8 +15986,8 @@ var Root2 = styled64($5e8ad37a45e1c704$export$3d96ec278d3efce4)({
 
 // src/components/components/Tabs/StatelessTabsView.tsx
 import React58 from "react";
-import { styled as styled65 } from "storybook/theming";
-var Container5 = styled65($5e8ad37a45e1c704$export$b2539bed5023c21c)(({ $simulatedGap }) => ({
+import { styled as styled64 } from "storybook/theming";
+var Container5 = styled64($5e8ad37a45e1c704$export$b2539bed5023c21c)(({ $simulatedGap }) => ({
   display: "flex",
   flexDirection: "column",
   height: "100%",
@@ -16056,8 +16053,8 @@ var Container5 = styled65($5e8ad37a45e1c704$export$b2539bed5023c21c)(({ $simulat
 
 // src/components/components/Tabs/StatelessTab.tsx
 import React59 from "react";
-import { styled as styled66 } from "storybook/theming";
-var StyledTab = styled66($5e8ad37a45e1c704$export$3e41faf802a29e71)(({ theme }) => ({
+import { styled as styled65 } from "storybook/theming";
+var StyledTab = styled65($5e8ad37a45e1c704$export$3e41faf802a29e71)(({ theme }) => ({
   whiteSpace: "normal",
   display: "inline-flex",
   overflow: "hidden",
@@ -16153,7 +16150,7 @@ var StorybookIcon = (props) => React61.createElement("svg", { viewBox: "0 0 64 6
 // src/components/components/Loader/Loader.tsx
 import React62 from "react";
 import { LightningOffIcon } from "@storybook/icons";
-import { keyframes as keyframes4, styled as styled67 } from "storybook/theming";
+import { keyframes as keyframes4, styled as styled66 } from "storybook/theming";
 
 // src/components/components/shared/animation.ts
 import { keyframes as keyframes3 } from "storybook/theming";
@@ -16167,7 +16164,7 @@ var rotate360 = keyframes3`
 `;
 
 // src/components/components/Loader/Loader.tsx
-var LoaderWrapper = styled67.div(({ size = 32 }) => ({
+var LoaderWrapper = styled66.div(({ size = 32 }) => ({
   borderRadius: "50%",
   cursor: "progress",
   display: "inline-block",
@@ -16188,7 +16185,7 @@ var LoaderWrapper = styled67.div(({ size = 32 }) => ({
   borderTopColor: "rgb(100,100,100)",
   animation: `${rotate360} 0.7s linear infinite`,
   mixBlendMode: "difference"
-})), ProgressWrapper = styled67.div({
+})), ProgressWrapper = styled66.div({
   position: "absolute",
   display: "flex",
   flexDirection: "column",
@@ -16196,7 +16193,7 @@ var LoaderWrapper = styled67.div(({ size = 32 }) => ({
   alignItems: "center",
   width: "100%",
   height: "100%"
-}), ProgressTrack = styled67.div(({ theme }) => ({
+}), ProgressTrack = styled66.div(({ theme }) => ({
   position: "relative",
   width: "80%",
   marginBottom: "0.75rem",
@@ -16206,17 +16203,17 @@ var LoaderWrapper = styled67.div(({ size = 32 }) => ({
   background: curriedTransparentize$1(0.8, theme.color.secondary),
   overflow: "hidden",
   cursor: "progress"
-})), ProgressBar2 = styled67.div(({ theme }) => ({
+})), ProgressBar2 = styled66.div(({ theme }) => ({
   position: "absolute",
   top: 0,
   left: 0,
   height: "100%",
   background: theme.color.secondary
-})), ProgressMessage = styled67.div(({ theme }) => ({
+})), ProgressMessage = styled66.div(({ theme }) => ({
   minHeight: "2em",
   fontSize: `${theme.typography.size.s1}px`,
   color: theme.textMutedColor
-})), ErrorIcon = styled67(LightningOffIcon)(({ theme }) => ({
+})), ErrorIcon = styled66(LightningOffIcon)(({ theme }) => ({
   width: 20,
   height: 20,
   marginBottom: "0.5rem",
@@ -16226,7 +16223,7 @@ var LoaderWrapper = styled67.div(({ size = 32 }) => ({
   33% { content: "." }
   66% { content: ".." }
   to { content: "..." }
-`, Ellipsis = styled67.span({
+`, Ellipsis = styled66.span({
   "&::after": {
     content: "'...'",
     animation: `${ellipsis} 1s linear infinite`,
@@ -16270,7 +16267,7 @@ var LoaderWrapper = styled67.div(({ size = 32 }) => ({
 
 // src/components/components/ProgressSpinner/ProgressSpinner.tsx
 import React63 from "react";
-import { keyframes as keyframes5, styled as styled68 } from "storybook/theming";
+import { keyframes as keyframes5, styled as styled67 } from "storybook/theming";
 var XMLNS = "http://www.w3.org/2000/svg", rotate = keyframes5({
   "0%": {
     transform: "rotate(0deg)"
@@ -16278,14 +16275,14 @@ var XMLNS = "http://www.w3.org/2000/svg", rotate = keyframes5({
   "100%": {
     transform: "rotate(360deg)"
   }
-}), Wrapper5 = styled68.div(({ size }) => ({
+}), Wrapper5 = styled67.div(({ size }) => ({
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
   position: "relative",
   minWidth: size,
   minHeight: size
-})), Circle = styled68.svg(
+})), Circle = styled67.svg(
   ({ size, width }) => ({
     position: "absolute",
     width: `${size}px!important`,
@@ -16324,6 +16321,7 @@ var XMLNS = "http://www.w3.org/2000/svg", rotate = keyframes5({
 }) => typeof percentage == "number" ? React63.createElement(Wrapper5, { size, ...props }, children, React63.createElement(Circle, { size, width, xmlns: XMLNS }, React63.createElement("circle", null)), running && React63.createElement(Circle, { size, width, xmlns: XMLNS, spinner: !0 }, React63.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) })), React63.createElement(Circle, { size, width, xmlns: XMLNS, progress: !0 }, React63.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) }))) : React63.createElement(Wrapper5, { size, ...props }, children);
 
 // src/components/components/utils/getStoryHref.ts
+import { deprecate as deprecate13 } from "storybook/internal/client-logger";
 function parseQuery(queryString) {
   let query = {}, pairs = queryString.split("&");
   for (let i = 0; i < pairs.length; i++) {
@@ -16333,6 +16331,9 @@ function parseQuery(queryString) {
   return query;
 }
 var getStoryHref = (baseUrl, storyId, additionalParams = {}) => {
+  deprecate13(
+    "getStoryHref is deprecated and will be removed in Storybook 11, use the api.getStoryHrefs method instead"
+  );
   let [url, paramsStr] = baseUrl.split("?"), params = paramsStr ? {
     ...parseQuery(paramsStr),
     ...additionalParams,
@@ -16346,8 +16347,8 @@ var getStoryHref = (baseUrl, storyId, additionalParams = {}) => {
 
 // src/components/components/clipboard/ClipboardCode.tsx
 import React64 from "react";
-import { color as color3, styled as styled69, typography } from "storybook/theming";
-var Code2 = styled69.pre`
+import { color as color3, styled as styled68, typography } from "storybook/theming";
+var Code2 = styled68.pre`
   line-height: 18px;
   padding: 11px 1rem;
   white-space: pre-wrap;