storybook 10.2.0-alpha.13 → 10.2.0-alpha.15

package/dist/components/index.js

@@ -8774,19 +8774,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 +8853,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 +8873,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 +8890,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",
@@ -9299,7 +9335,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 +9355,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"
     },
@@ -9696,9 +9735,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 {
@@ -9707,9 +9746,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"
     });
   }
@@ -9763,7 +9802,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";
@@ -10358,56 +10397,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,
@@ -10417,7 +10412,7 @@ var Item = styled46("li")(({ theme }) => ({
   shouldLookDisabled = !1,
   ...props
 }) => React36.createElement(
-  Item,
+  ActionList.Item,
   {
     ...props,
     id,
@@ -10429,12 +10424,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";
@@ -10456,7 +10451,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,
@@ -10470,7 +10465,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
@@ -10478,13 +10473,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
@@ -10543,12 +10538,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) => {
@@ -10578,8 +10577,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(
@@ -10686,6 +10685,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" })
@@ -10696,7 +10696,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());
@@ -14294,38 +14294,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
@@ -14343,7 +14343,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,
@@ -14351,7 +14351,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",
@@ -14361,7 +14361,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"
@@ -14372,7 +14372,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
   } : {},
@@ -14380,7 +14380,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,
@@ -14459,13 +14459,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",
@@ -14477,12 +14477,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]
@@ -14495,20 +14495,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%",
@@ -14530,7 +14530,7 @@ var StyledBar = styled52.div(
     } : {},
     ...innerStyle
   })
-), HeightPreserver = styled52.div(({ innerStyle }) => ({
+), HeightPreserver = styled51.div(({ innerStyle }) => ({
   minHeight: 40,
   display: "flex",
   alignItems: "center",
@@ -14551,7 +14551,7 @@ var StyledBar = styled52.div(
   )
 );
 Bar.displayName = "Bar";
-var Side = styled52.div(
+var Side = styled51.div(
   {
     display: "flex",
     whiteSpace: "nowrap",
@@ -14570,7 +14570,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",
@@ -14579,7 +14579,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.');
@@ -14600,7 +14600,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 };
@@ -14612,7 +14612,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",
@@ -14661,8 +14661,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,
@@ -14671,30 +14671,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)
@@ -14717,8 +14717,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,
@@ -14728,7 +14728,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};
@@ -14837,7 +14837,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}`,
@@ -14854,7 +14854,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
@@ -14865,7 +14865,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",
@@ -15009,9 +15009,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,
@@ -15032,7 +15033,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(() => {
@@ -15041,7 +15042,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 }) => (
@@ -15271,8 +15272,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",
@@ -15317,13 +15318,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",
@@ -15334,17 +15335,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
@@ -15424,8 +15425,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 = ({
@@ -15638,25 +15639,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 = ({
@@ -15885,14 +15886,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",
@@ -15903,17 +15904,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
@@ -15975,8 +15976,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",
@@ -15990,8 +15991,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%",
@@ -16057,8 +16058,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",
@@ -16154,7 +16155,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";
@@ -16168,7 +16169,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",
@@ -16189,7 +16190,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",
@@ -16197,7 +16198,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",
@@ -16207,17 +16208,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",
@@ -16227,7 +16228,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`,
@@ -16271,7 +16272,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)"
@@ -16279,14 +16280,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`,
@@ -16351,8 +16352,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;