storybook 10.0.7 → 10.0.8

package/dist/components/index.js

@@ -31,7 +31,7 @@ import {
 } from "../_browser-chunks/chunk-MM7DTO55.js";
 
 // src/components/index.ts
-import { createElement as createElement9, forwardRef as forwardRef15 } from "react";
+import { createElement as createElement9, forwardRef as forwardRef17 } from "react";
 
 // src/components/components/typography/components.tsx
 import React4 from "react";
@@ -1090,7 +1090,7 @@ var DocumentWrapper = styled25.div(({ theme }) => ({
 }));
 
 // src/components/components/Modal/Modal.tsx
-import React37 from "react";
+import React39 from "react";
 
 // ../node_modules/@radix-ui/react-dialog/dist/index.mjs
 var dist_exports = {};
@@ -1114,7 +1114,7 @@ __export(dist_exports, {
   WarningProvider: () => WarningProvider,
   createDialogScope: () => createDialogScope
 });
-import * as React33 from "react";
+import * as React34 from "react";
 
 // ../node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive/dist/index.mjs
 var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
@@ -1369,7 +1369,7 @@ __name(composeEventHandlers2, "composeEventHandlers");
 import * as React14 from "react";
 import * as ReactDOM from "react-dom";
 
-// ../node_modules/@radix-ui/react-slot/dist/index.mjs
+// ../node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React13 from "react";
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
 function createSlot(ownerName) {
@@ -1416,12 +1416,12 @@ function createSlotClone(ownerName) {
 __name(createSlotClone, "createSlotClone");
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function createSlottable(ownerName) {
-  const Slottable2 = /* @__PURE__ */ __name(({ children }) => {
+  const Slottable22 = /* @__PURE__ */ __name(({ children }) => {
     return jsx2(Fragment2, { children });
   }, "Slottable2");
-  Slottable2.displayName = `${ownerName}.Slottable`;
-  Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
-  return Slottable2;
+  Slottable22.displayName = `${ownerName}.Slottable`;
+  Slottable22.__radixId = SLOTTABLE_IDENTIFIER;
+  return Slottable22;
 }
 __name(createSlottable, "createSlottable");
 var Slottable = createSlottable("Slottable");
@@ -1491,10 +1491,10 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Slot3 = createSlot(`Primitive.${node}`);
+  const Slot5 = createSlot(`Primitive.${node}`);
   const Node2 = React14.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
-    const Comp2 = asChild ? Slot3 : node;
+    const Comp2 = asChild ? Slot5 : node;
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
@@ -2991,8 +2991,108 @@ var hideOthers = /* @__PURE__ */ __name(function(originalTarget, parentNode, mar
   return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
 }, "hideOthers");
 
+// ../node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot/dist/index.mjs
+import * as React33 from "react";
+import { Fragment as Fragment22, jsx as jsx7 } from "react/jsx-runtime";
+function createSlot2(ownerName) {
+  const SlotClone = createSlotClone2(ownerName);
+  const Slot22 = React33.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React33.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable2);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React33.Children.count(newElement) > 1) return React33.Children.only(null);
+          return React33.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return jsx7(SlotClone, { ...slotProps, ref: forwardedRef, children: React33.isValidElement(newElement) ? React33.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return jsx7(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot22.displayName = `${ownerName}.Slot`;
+  return Slot22;
+}
+__name(createSlot2, "createSlot");
+var Slot2 = createSlot2("Slot");
+function createSlotClone2(ownerName) {
+  const SlotClone = React33.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React33.isValidElement(children)) {
+      const childrenRef = getElementRef3(children);
+      const props2 = mergeProps2(slotProps, children.props);
+      if (children.type !== React33.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React33.cloneElement(children, props2);
+    }
+    return React33.Children.count(children) > 1 ? React33.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+__name(createSlotClone2, "createSlotClone");
+var SLOTTABLE_IDENTIFIER2 = Symbol("radix.slottable");
+function createSlottable2(ownerName) {
+  const Slottable22 = /* @__PURE__ */ __name(({ children }) => {
+    return jsx7(Fragment22, { children });
+  }, "Slottable2");
+  Slottable22.displayName = `${ownerName}.Slottable`;
+  Slottable22.__radixId = SLOTTABLE_IDENTIFIER2;
+  return Slottable22;
+}
+__name(createSlottable2, "createSlottable");
+var Slottable2 = createSlottable2("Slottable");
+function isSlottable2(child) {
+  return React33.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
+}
+__name(isSlottable2, "isSlottable");
+function mergeProps2(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+__name(mergeProps2, "mergeProps");
+function getElementRef3(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+__name(getElementRef3, "getElementRef");
+
 // ../node_modules/@radix-ui/react-dialog/dist/index.mjs
-import { Fragment as Fragment6, jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx8, jsxs } from "react/jsx-runtime";
 var DIALOG_NAME = "Dialog";
 var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
 var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
@@ -3005,15 +3105,15 @@ var Dialog = /* @__PURE__ */ __name((props) => {
     onOpenChange,
     modal = true
   } = props;
-  const triggerRef = React33.useRef(null);
-  const contentRef = React33.useRef(null);
+  const triggerRef = React34.useRef(null);
+  const contentRef = React34.useRef(null);
   const [open, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen ?? false,
     onChange: onOpenChange,
     caller: DIALOG_NAME
   });
-  return jsx7(
+  return jsx8(
     DialogProvider,
     {
       scope: __scopeDialog,
@@ -3024,7 +3124,7 @@ var Dialog = /* @__PURE__ */ __name((props) => {
       descriptionId: useId(),
       open,
       onOpenChange: setOpen,
-      onOpenToggle: React33.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      onOpenToggle: React34.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
       children
     }
@@ -3032,12 +3132,12 @@ var Dialog = /* @__PURE__ */ __name((props) => {
 }, "Dialog");
 Dialog.displayName = DIALOG_NAME;
 var TRIGGER_NAME = "DialogTrigger";
-var DialogTrigger = React33.forwardRef(
+var DialogTrigger = React34.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...triggerProps } = props;
     const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
     const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-    return jsx7(
+    return jsx8(
       Primitive.button,
       {
         type: "button",
@@ -3060,28 +3160,28 @@ var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME2, {
 var DialogPortal = /* @__PURE__ */ __name((props) => {
   const { __scopeDialog, forceMount, children, container } = props;
   const context = useDialogContext(PORTAL_NAME2, __scopeDialog);
-  return jsx7(PortalProvider, { scope: __scopeDialog, forceMount, children: React33.Children.map(children, (child) => jsx7(Presence, { present: forceMount || context.open, children: jsx7(Portal, { asChild: true, container, children: child }) })) });
+  return jsx8(PortalProvider, { scope: __scopeDialog, forceMount, children: React34.Children.map(children, (child) => jsx8(Presence, { present: forceMount || context.open, children: jsx8(Portal, { asChild: true, container, children: child }) })) });
 }, "DialogPortal");
 DialogPortal.displayName = PORTAL_NAME2;
 var OVERLAY_NAME = "DialogOverlay";
-var DialogOverlay = React33.forwardRef(
+var DialogOverlay = React34.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
     const { forceMount = portalContext.forceMount, ...overlayProps } = props;
     const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
-    return context.modal ? jsx7(Presence, { present: forceMount || context.open, children: jsx7(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
+    return context.modal ? jsx8(Presence, { present: forceMount || context.open, children: jsx8(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
   }
 );
 DialogOverlay.displayName = OVERLAY_NAME;
-var Slot2 = createSlot("DialogOverlay.RemoveScroll");
-var DialogOverlayImpl = React33.forwardRef(
+var Slot3 = createSlot2("DialogOverlay.RemoveScroll");
+var DialogOverlayImpl = React34.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...overlayProps } = props;
     const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
     return (
       // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
       // ie. when `Overlay` and `Content` are siblings
-      jsx7(Combination_default, { as: Slot2, allowPinchZoom: true, shards: [context.contentRef], children: jsx7(
+      jsx8(Combination_default, { as: Slot3, allowPinchZoom: true, shards: [context.contentRef], children: jsx8(
         Primitive.div,
         {
           "data-state": getState(context.open),
@@ -3094,25 +3194,25 @@ var DialogOverlayImpl = React33.forwardRef(
   }
 );
 var CONTENT_NAME = "DialogContent";
-var DialogContent = React33.forwardRef(
+var DialogContent = React34.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
-    return jsx7(Presence, { present: forceMount || context.open, children: context.modal ? jsx7(DialogContentModal, { ...contentProps, ref: forwardedRef }) : jsx7(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
+    return jsx8(Presence, { present: forceMount || context.open, children: context.modal ? jsx8(DialogContentModal, { ...contentProps, ref: forwardedRef }) : jsx8(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
   }
 );
 DialogContent.displayName = CONTENT_NAME;
-var DialogContentModal = React33.forwardRef(
+var DialogContentModal = React34.forwardRef(
   (props, forwardedRef) => {
     const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
-    const contentRef = React33.useRef(null);
+    const contentRef = React34.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
-    React33.useEffect(() => {
+    React34.useEffect(() => {
       const content = contentRef.current;
       if (content) return hideOthers(content);
     }, []);
-    return jsx7(
+    return jsx8(
       DialogContentImpl,
       {
         ...props,
@@ -3137,12 +3237,12 @@ var DialogContentModal = React33.forwardRef(
     );
   }
 );
-var DialogContentNonModal = React33.forwardRef(
+var DialogContentNonModal = React34.forwardRef(
   (props, forwardedRef) => {
     const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
-    const hasInteractedOutsideRef = React33.useRef(false);
-    const hasPointerDownOutsideRef = React33.useRef(false);
-    return jsx7(
+    const hasInteractedOutsideRef = React34.useRef(false);
+    const hasPointerDownOutsideRef = React34.useRef(false);
+    return jsx8(
       DialogContentImpl,
       {
         ...props,
@@ -3177,15 +3277,15 @@ var DialogContentNonModal = React33.forwardRef(
     );
   }
 );
-var DialogContentImpl = React33.forwardRef(
+var DialogContentImpl = React34.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
     const context = useDialogContext(CONTENT_NAME, __scopeDialog);
-    const contentRef = React33.useRef(null);
+    const contentRef = React34.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, contentRef);
     useFocusGuards();
-    return jsxs(Fragment6, { children: [
-      jsx7(
+    return jsxs(Fragment7, { children: [
+      jsx8(
         FocusScope,
         {
           asChild: true,
@@ -3193,7 +3293,7 @@ var DialogContentImpl = React33.forwardRef(
           trapped: trapFocus,
           onMountAutoFocus: onOpenAutoFocus,
           onUnmountAutoFocus: onCloseAutoFocus,
-          children: jsx7(
+          children: jsx8(
             DismissableLayer,
             {
               role: "dialog",
@@ -3208,37 +3308,37 @@ var DialogContentImpl = React33.forwardRef(
           )
         }
       ),
-      jsxs(Fragment6, { children: [
-        jsx7(TitleWarning, { titleId: context.titleId }),
-        jsx7(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
+      jsxs(Fragment7, { children: [
+        jsx8(TitleWarning, { titleId: context.titleId }),
+        jsx8(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
       ] })
     ] });
   }
 );
 var TITLE_NAME = "DialogTitle";
-var DialogTitle = React33.forwardRef(
+var DialogTitle = React34.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...titleProps } = props;
     const context = useDialogContext(TITLE_NAME, __scopeDialog);
-    return jsx7(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
+    return jsx8(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
   }
 );
 DialogTitle.displayName = TITLE_NAME;
 var DESCRIPTION_NAME = "DialogDescription";
-var DialogDescription = React33.forwardRef(
+var DialogDescription = React34.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...descriptionProps } = props;
     const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-    return jsx7(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
+    return jsx8(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
   }
 );
 DialogDescription.displayName = DESCRIPTION_NAME;
 var CLOSE_NAME = "DialogClose";
-var DialogClose = React33.forwardRef(
+var DialogClose = React34.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...closeProps } = props;
     const context = useDialogContext(CLOSE_NAME, __scopeDialog);
-    return jsx7(
+    return jsx8(
       Primitive.button,
       {
         type: "button",
@@ -3267,7 +3367,7 @@ var TitleWarning = /* @__PURE__ */ __name(({ titleId }) => {
 If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
 
 For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (titleId) {
       const hasTitle = document.getElementById(titleId);
       if (!hasTitle) console.error(MESSAGE);
@@ -3279,7 +3379,7 @@ var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
 var DescriptionWarning = /* @__PURE__ */ __name(({ contentRef, descriptionId }) => {
   const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
   const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     const describedById = contentRef.current?.getAttribute("aria-describedby");
     if (descriptionId && describedById) {
       const hasDescription = document.getElementById(descriptionId);
@@ -3313,17 +3413,135 @@ __export(Modal_styled_exports, {
   Row: () => Row,
   Title: () => Title2
 });
-import React36 from "react";
+import React38 from "react";
 import { CrossIcon } from "@storybook/icons";
 import { keyframes, styled as styled27 } from "storybook/theming";
 
 // src/components/components/IconButton/IconButton.tsx
-import React35, { forwardRef as forwardRef10 } from "react";
+import React37, { forwardRef as forwardRef12 } from "react";
+
+// src/components/components/Button/Button.tsx
+import React36, { forwardRef as forwardRef11, useEffect as useEffect16, useState as useState12 } from "react";
+
+// ../node_modules/@radix-ui/react-slot/dist/index.mjs
+import * as React35 from "react";
+import { Fragment as Fragment23, jsx as jsx9 } from "react/jsx-runtime";
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+var use = React35[" use ".trim().toString()];
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value;
+}
+__name(isPromiseLike, "isPromiseLike");
+function isLazyComponent(element) {
+  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+__name(isLazyComponent, "isLazyComponent");
+function createSlot3(ownerName) {
+  const SlotClone = createSlotClone3(ownerName);
+  const Slot22 = React35.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    const childrenArray = React35.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable3);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React35.Children.count(newElement) > 1) return React35.Children.only(null);
+          return React35.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return jsx9(SlotClone, { ...slotProps, ref: forwardedRef, children: React35.isValidElement(newElement) ? React35.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return jsx9(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot22.displayName = `${ownerName}.Slot`;
+  return Slot22;
+}
+__name(createSlot3, "createSlot");
+var Slot4 = createSlot3("Slot");
+function createSlotClone3(ownerName) {
+  const SlotClone = React35.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    if (React35.isValidElement(children)) {
+      const childrenRef = getElementRef4(children);
+      const props2 = mergeProps3(slotProps, children.props);
+      if (children.type !== React35.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React35.cloneElement(children, props2);
+    }
+    return React35.Children.count(children) > 1 ? React35.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+__name(createSlotClone3, "createSlotClone");
+var SLOTTABLE_IDENTIFIER3 = Symbol("radix.slottable");
+function createSlottable3(ownerName) {
+  const Slottable22 = /* @__PURE__ */ __name(({ children }) => {
+    return jsx9(Fragment23, { children });
+  }, "Slottable2");
+  Slottable22.displayName = `${ownerName}.Slottable`;
+  Slottable22.__radixId = SLOTTABLE_IDENTIFIER3;
+  return Slottable22;
+}
+__name(createSlottable3, "createSlottable");
+var Slottable3 = createSlottable3("Slottable");
+function isSlottable3(child) {
+  return React35.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER3;
+}
+__name(isSlottable3, "isSlottable");
+function mergeProps3(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+__name(mergeProps3, "mergeProps");
+function getElementRef4(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+__name(getElementRef4, "getElementRef");
 
 // src/components/components/Button/Button.tsx
-import React34, { forwardRef as forwardRef9, useEffect as useEffect16, useState as useState12 } from "react";
 import { isPropValid, styled as styled26 } from "storybook/theming";
-var Button = forwardRef9(
+var Button = forwardRef11(
   ({
     asChild = false,
     animation = "none",
@@ -3337,7 +3555,7 @@ var Button = forwardRef9(
   }, ref) => {
     let Comp2 = "button";
     if (asChild) {
-      Comp2 = Slot;
+      Comp2 = Slot4;
     }
     const [isAnimating, setIsAnimating] = useState12(false);
     const handleClick = /* @__PURE__ */ __name((event) => {
@@ -3357,7 +3575,7 @@ var Button = forwardRef9(
       }, 1e3);
       return () => clearTimeout(timer);
     }, [isAnimating]);
-    return React34.createElement(
+    return React36.createElement(
       StyledButton,
       {
         as: Comp2,
@@ -3522,9 +3740,9 @@ var StyledButton = styled26("button", {
 }));
 
 // src/components/components/IconButton/IconButton.tsx
-var IconButton = forwardRef10(
+var IconButton = forwardRef12(
   ({ padding = "small", variant = "ghost", ...props }, ref) => {
-    return React35.createElement(Button, { padding, variant, ref, ...props });
+    return React37.createElement(Button, { padding, variant, ref, ...props });
   }
 );
 IconButton.displayName = "IconButton";
@@ -3578,7 +3796,7 @@ var Container = styled27.div(
     }
   })
 );
-var CloseButton = /* @__PURE__ */ __name((props) => React36.createElement(Close, { asChild: true }, React36.createElement(IconButton, { "aria-label": "Close", ...props }, React36.createElement(CrossIcon, null))), "CloseButton");
+var CloseButton = /* @__PURE__ */ __name((props) => React38.createElement(Close, { asChild: true }, React38.createElement(IconButton, { "aria-label": "Close", ...props }, React38.createElement(CrossIcon, null))), "CloseButton");
 var Content2 = styled27.div({
   display: "flex",
   flexDirection: "column",
@@ -3595,7 +3813,7 @@ var Col = styled27.div({
   flexDirection: "column",
   gap: 4
 });
-var Header = /* @__PURE__ */ __name((props) => React36.createElement(Row, null, React36.createElement(Col, { ...props }), React36.createElement(CloseButton, null)), "Header");
+var Header = /* @__PURE__ */ __name((props) => React38.createElement(Row, null, React38.createElement(Col, { ...props }), React38.createElement(CloseButton, null)), "Header");
 var Title2 = styled27(Title)(({ theme }) => ({
   margin: 0,
   fontSize: theme.typography.size.s3,
@@ -3627,7 +3845,7 @@ var ErrorWrapper = styled27.div(({ theme }) => ({
 var Error2 = /* @__PURE__ */ __name(({
   children,
   ...props
-}) => React36.createElement(ErrorWrapper, { ...props }, React36.createElement("div", null, children)), "Error");
+}) => React38.createElement(ErrorWrapper, { ...props }, React38.createElement("div", null, children)), "Error");
 
 // src/components/components/Modal/Modal.tsx
 function BaseModal({
@@ -3642,21 +3860,21 @@ function BaseModal({
   ...rootProps
 }) {
   const containerElement = container ?? (portalSelector ? document.querySelector(portalSelector) : null) ?? document.body;
-  return React37.createElement(Root, { ...rootProps }, React37.createElement(Portal2, { container: containerElement }, React37.createElement(Overlay, { asChild: true }, React37.createElement(Overlay2, null)), React37.createElement(
+  return React39.createElement(Root, { ...rootProps }, React39.createElement(Portal2, { container: containerElement }, React39.createElement(Overlay, { asChild: true }, React39.createElement(Overlay2, null)), React39.createElement(
     Content,
     {
       asChild: true,
       onInteractOutside,
       onEscapeKeyDown
     },
-    React37.createElement(Container, { className, width, height }, children)
+    React39.createElement(Container, { className, width, height }, children)
   )));
 }
 __name(BaseModal, "BaseModal");
 var Modal = Object.assign(BaseModal, Modal_styled_exports, { Dialog: dist_exports });
 
 // src/components/components/spaced/Spaced.tsx
-import React38 from "react";
+import React40 from "react";
 import { ignoreSsrWarning, styled as styled28 } from "storybook/theming";
 var toNumber = /* @__PURE__ */ __name((input) => typeof input === "number" ? input : Number(input), "toNumber");
 var Container2 = styled28.div(
@@ -3700,11 +3918,11 @@ var Container2 = styled28.div(
 );
 var Spaced = /* @__PURE__ */ __name(({ col, row, outer, children, ...rest }) => {
   const outerAmount = toNumber(typeof outer === "number" || !outer ? outer : col || row);
-  return React38.createElement(Container2, { col, row, outer: outerAmount, ...rest }, children);
+  return React40.createElement(Container2, { col, row, outer: outerAmount, ...rest }, children);
 }, "Spaced");
 
 // src/components/components/placeholder/placeholder.tsx
-import React39, { Children as Children6 } from "react";
+import React41, { Children as Children8 } from "react";
 import { styled as styled29 } from "storybook/theming";
 var Title3 = styled29.div(({ theme }) => ({
   fontWeight: theme.typography.weight.bold
@@ -3717,12 +3935,12 @@ var Message = styled29.div(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1
 }));
 var Placeholder = /* @__PURE__ */ __name(({ children, ...props }) => {
-  const [title, desc] = Children6.toArray(children);
-  return React39.createElement(Message, { ...props }, React39.createElement(Title3, null, title), desc && React39.createElement(Desc, null, desc));
+  const [title, desc] = Children8.toArray(children);
+  return React41.createElement(Message, { ...props }, React41.createElement(Title3, null, title), desc && React41.createElement(Desc, null, desc));
 }, "Placeholder");
 
 // src/components/components/Zoom/ZoomElement.tsx
-import React40, { useCallback as useCallback9, useEffect as useEffect18, useRef as useRef13, useState as useState14 } from "react";
+import React42, { useCallback as useCallback9, useEffect as useEffect18, useRef as useRef13, useState as useState14 } from "react";
 import { styled as styled30 } from "storybook/theming";
 
 // ../node_modules/use-resize-observer/dist/bundle.esm.js
@@ -3883,12 +4101,12 @@ function ZoomElement({ centered, scale, children }) {
     ref: componentWrapperRef,
     onResize
   });
-  return React40.createElement(ZoomElementWrapper, { centered, scale, elementHeight }, React40.createElement("div", { ref: componentWrapperRef, className: "innerZoomElementWrapper" }, children));
+  return React42.createElement(ZoomElementWrapper, { centered, scale, elementHeight }, React42.createElement("div", { ref: componentWrapperRef, className: "innerZoomElementWrapper" }, children));
 }
 __name(ZoomElement, "ZoomElement");
 
 // src/components/components/Zoom/ZoomIFrame.tsx
-import React41, { Component } from "react";
+import React43, { Component } from "react";
 var _ZoomIFrame = class _ZoomIFrame extends Component {
   constructor() {
     super(...arguments);
@@ -3931,7 +4149,7 @@ var _ZoomIFrame = class _ZoomIFrame extends Component {
   }
   render() {
     const { children } = this.props;
-    return React41.createElement(React41.Fragment, null, children);
+    return React43.createElement(React43.Fragment, null, children);
   }
 };
 __name(_ZoomIFrame, "ZoomIFrame");
@@ -3944,7 +4162,7 @@ var Zoom = {
 };
 
 // src/components/components/ErrorFormatter/ErrorFormatter.tsx
-import React42, { Fragment as Fragment7 } from "react";
+import React44, { Fragment as Fragment9 } from "react";
 import { global } from "@storybook/global";
 import { styled as styled31 } from "storybook/theming";
 var { document: document2 } = global;
@@ -3964,10 +4182,10 @@ var linesRegexFirefox = /([^@]+)?(?:\/<)?@(.+)?/;
 var linesRegexSafari = /([^@]+)?@(.+)?/;
 var ErrorFormatter = /* @__PURE__ */ __name(({ error }) => {
   if (!error) {
-    return React42.createElement(Fragment7, null, "This error has no stack or message");
+    return React44.createElement(Fragment9, null, "This error has no stack or message");
   }
   if (!error.stack) {
-    return React42.createElement(Fragment7, null, error.message || "This error has no stack or message");
+    return React44.createElement(Fragment9, null, error.message || "This error has no stack or message");
   }
   let input = error.stack.toString();
   if (input && error.message && !input.includes(error.message)) {
@@ -3977,7 +4195,7 @@ ${input}`;
   }
   const match = input.match(firstLineRegex);
   if (!match) {
-    return React42.createElement(Fragment7, null, input);
+    return React44.createElement(Fragment9, null, input);
   }
   const [, type, name] = match;
   const rawLines = input.split(/\n/).slice(1);
@@ -3991,8 +4209,8 @@ ${input}`;
     }
     return null;
   }).filter(Boolean);
-  return React42.createElement(Fragment7, null, React42.createElement("span", null, type), ": ", React42.createElement(ErrorName, null, name), React42.createElement("br", null), lines.map(
-    (l, i) => l?.name ? React42.createElement(Fragment7, { key: i }, "  ", "at ", React42.createElement(ErrorImportant, null, l.name), " (", React42.createElement(ErrorDetail, null, l.location), ")", React42.createElement("br", null)) : React42.createElement(Fragment7, { key: i }, "  ", "at ", React42.createElement(ErrorDetail, null, l?.location), React42.createElement("br", null))
+  return React44.createElement(Fragment9, null, React44.createElement("span", null, type), ": ", React44.createElement(ErrorName, null, name), React44.createElement("br", null), lines.map(
+    (l, i) => l?.name ? React44.createElement(Fragment9, { key: i }, "  ", "at ", React44.createElement(ErrorImportant, null, l.name), " (", React44.createElement(ErrorDetail, null, l.location), ")", React44.createElement("br", null)) : React44.createElement(Fragment9, { key: i }, "  ", "at ", React44.createElement(ErrorDetail, null, l?.location), React44.createElement("br", null))
   ));
 }, "ErrorFormatter");
 
@@ -4000,7 +4218,7 @@ ${input}`;
 import { styled as styled38 } from "storybook/theming";
 
 // src/components/components/Form/Checkbox.tsx
-import React43 from "react";
+import React45 from "react";
 import { color, styled as styled32 } from "storybook/theming";
 var Input = styled32.input({
   appearance: "none",
@@ -4044,11 +4262,11 @@ var Input = styled32.input({
   }
 });
 var Checkbox = /* @__PURE__ */ __name((props) => {
-  return React43.createElement(Input, { ...props, type: "checkbox" });
+  return React45.createElement(Input, { ...props, type: "checkbox" });
 }, "Checkbox");
 
 // src/components/components/Form/Field.tsx
-import React44 from "react";
+import React46 from "react";
 import { styled as styled33 } from "storybook/theming";
 var Wrapper = styled33.label(({ theme }) => ({
   display: "flex",
@@ -4068,11 +4286,11 @@ var Label = styled33.span(({ theme }) => ({
   alignItems: "center",
   lineHeight: "16px"
 }));
-var Field = /* @__PURE__ */ __name(({ label, children, ...props }) => React44.createElement(Wrapper, { ...props }, label ? React44.createElement(Label, null, React44.createElement("span", null, label)) : null, children), "Field");
+var Field = /* @__PURE__ */ __name(({ label, children, ...props }) => React46.createElement(Wrapper, { ...props }, label ? React46.createElement(Label, null, React46.createElement("span", null, label)) : null, children), "Field");
 
 // src/components/components/Form/Input.tsx
-import React45 from "react";
-import { forwardRef as forwardRef11 } from "react";
+import React47 from "react";
+import { forwardRef as forwardRef13 } from "react";
 import { styled as styled34 } from "storybook/theming";
 
 // src/components/components/Form/styles.ts
@@ -4178,8 +4396,8 @@ var styles = /* @__PURE__ */ __name(({ theme }) => ({
 // src/components/components/Form/Input.tsx
 var Input2 = Object.assign(
   styled34(
-    forwardRef11(/* @__PURE__ */ __name(function Input3({ size, valid, align, ...props }, ref) {
-      return React45.createElement("input", { ...props, ref });
+    forwardRef13(/* @__PURE__ */ __name(function Input3({ size, valid, align, ...props }, ref) {
+      return React47.createElement("input", { ...props, ref });
     }, "Input"))
   )(styles, sizes, alignment, validation, {
     minHeight: 32
@@ -4190,7 +4408,7 @@ var Input2 = Object.assign(
 );
 
 // src/components/components/Form/Radio.tsx
-import React46 from "react";
+import React48 from "react";
 import { color as color2, styled as styled35 } from "storybook/theming";
 var Input4 = styled35.input({
   appearance: "none",
@@ -4223,11 +4441,11 @@ var Input4 = styled35.input({
   }
 });
 var Radio = /* @__PURE__ */ __name((props) => {
-  return React46.createElement(Input4, { ...props, type: "radio" });
+  return React48.createElement(Input4, { ...props, type: "radio" });
 }, "Radio");
 
 // src/components/components/Form/Select.tsx
-import React47 from "react";
+import React49 from "react";
 import { lighten, styled as styled36 } from "storybook/theming";
 var BaseSelect = styled36.select(sizes, ({ theme }) => ({
   appearance: "none",
@@ -4323,7 +4541,7 @@ var BaseSelect = styled36.select(sizes, ({ theme }) => ({
 var Select = /* @__PURE__ */ __name(({ children, ...props }) => {
   return (
     // @ts-expect-error Weird props mismatch
-    React47.createElement(BaseSelect, { ...props }, !isTestEnvironment() && React47.createElement("button", null, React47.createElement("selectedcontent", null), React47.createElement(
+    React49.createElement(BaseSelect, { ...props }, !isTestEnvironment() && React49.createElement("button", null, React49.createElement("selectedcontent", null), React49.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -4335,19 +4553,19 @@ var Select = /* @__PURE__ */ __name(({ children, ...props }) => {
         strokeLinejoin: "round",
         "aria-hidden": "true"
       },
-      React47.createElement("path", { d: "m6 9 6 6 6-6" })
-    )), React47.createElement("optgroup", null, children))
+      React49.createElement("path", { d: "m6 9 6 6 6-6" })
+    )), React49.createElement("optgroup", null, children))
   );
 }, "Select");
 
 // src/components/components/Form/Textarea.tsx
-import React51, { forwardRef as forwardRef13 } from "react";
+import React53, { forwardRef as forwardRef15 } from "react";
 
 // ../node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.esm.js
-import * as React50 from "react";
+import * as React52 from "react";
 
 // ../node_modules/use-latest/dist/use-latest.esm.js
-import React48 from "react";
+import React50 from "react";
 
 // ../node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js
 import { useLayoutEffect as useLayoutEffect5 } from "react";
@@ -4355,7 +4573,7 @@ var index = useLayoutEffect5;
 
 // ../node_modules/use-latest/dist/use-latest.esm.js
 var useLatest = /* @__PURE__ */ __name(function useLatest2(value) {
-  var ref = React48.useRef(value);
+  var ref = React50.useRef(value);
   index(function() {
     ref.current = value;
   });
@@ -4363,7 +4581,7 @@ var useLatest = /* @__PURE__ */ __name(function useLatest2(value) {
 }, "useLatest");
 
 // ../node_modules/use-composed-ref/dist/use-composed-ref.esm.js
-import React49 from "react";
+import React51 from "react";
 var updateRef = /* @__PURE__ */ __name(function updateRef2(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -4372,8 +4590,8 @@ var updateRef = /* @__PURE__ */ __name(function updateRef2(ref, value) {
   ref.current = value;
 }, "updateRef");
 var useComposedRef = /* @__PURE__ */ __name(function useComposedRef2(libRef, userRef) {
-  var prevUserRef = React49.useRef();
-  return React49.useCallback(function(instance) {
+  var prevUserRef = React51.useRef();
+  return React51.useCallback(function(instance) {
     libRef.current = instance;
     if (prevUserRef.current) {
       updateRef(prevUserRef.current, null);
@@ -4515,7 +4733,7 @@ var getSizingData = /* @__PURE__ */ __name(function getSizingData2(node) {
 var getSizingData$1 = getSizingData;
 function useListener(target, type, listener) {
   var latestListener = useLatest(listener);
-  React50.useLayoutEffect(function() {
+  React52.useLayoutEffect(function() {
     var handler = /* @__PURE__ */ __name(function handler2(ev) {
       return latestListener.current(ev);
     }, "handler");
@@ -4546,10 +4764,10 @@ var _excluded = ["cacheMeasurements", "maxRows", "minRows", "onChange", "onHeigh
 var TextareaAutosize = /* @__PURE__ */ __name(function TextareaAutosize2(_ref, userRef) {
   var cacheMeasurements = _ref.cacheMeasurements, maxRows = _ref.maxRows, minRows = _ref.minRows, _ref$onChange = _ref.onChange, onChange = _ref$onChange === void 0 ? noop : _ref$onChange, _ref$onHeightChange = _ref.onHeightChange, onHeightChange = _ref$onHeightChange === void 0 ? noop : _ref$onHeightChange, props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var isControlled = props.value !== void 0;
-  var libRef = React50.useRef(null);
+  var libRef = React52.useRef(null);
   var ref = useComposedRef(libRef, userRef);
-  var heightRef = React50.useRef(0);
-  var measurementsCacheRef = React50.useRef();
+  var heightRef = React52.useRef(0);
+  var measurementsCacheRef = React52.useRef();
   var resizeTextarea = /* @__PURE__ */ __name(function resizeTextarea2() {
     var node = libRef.current;
     var nodeSizingData = cacheMeasurements && measurementsCacheRef.current ? measurementsCacheRef.current : getSizingData$1(node);
@@ -4573,7 +4791,7 @@ var TextareaAutosize = /* @__PURE__ */ __name(function TextareaAutosize2(_ref, u
     onChange(event);
   }, "handleChange");
   {
-    React50.useLayoutEffect(resizeTextarea);
+    React52.useLayoutEffect(resizeTextarea);
     useFormResetListener(libRef, function() {
       if (!isControlled) {
         var currentValue = libRef.current.value;
@@ -4587,20 +4805,20 @@ var TextareaAutosize = /* @__PURE__ */ __name(function TextareaAutosize2(_ref, u
     });
     useWindowResizeListener(resizeTextarea);
     useFontsLoadedListener(resizeTextarea);
-    return React50.createElement("textarea", _extends({}, props, {
+    return React52.createElement("textarea", _extends({}, props, {
       onChange: handleChange,
       ref
     }));
   }
 }, "TextareaAutosize");
-var index2 = React50.forwardRef(TextareaAutosize);
+var index2 = React52.forwardRef(TextareaAutosize);
 
 // src/components/components/Form/Textarea.tsx
 import { styled as styled37 } from "storybook/theming";
 var Textarea = Object.assign(
   styled37(
-    forwardRef13(/* @__PURE__ */ __name(function Textarea2({ size, valid, align, ...props }, ref) {
-      return React51.createElement(index2, { ...props, ref });
+    forwardRef15(/* @__PURE__ */ __name(function Textarea2({ size, valid, align, ...props }, ref) {
+      return React53.createElement(index2, { ...props, ref });
     }, "Textarea"))
   )(styles, sizes, alignment, validation, ({ height = 400 }) => ({
     overflow: "visible",
@@ -4629,18 +4847,18 @@ var Form = Object.assign(
 );
 
 // src/components/components/tooltip/lazy-WithTooltip.tsx
-import React52, { Suspense as Suspense2, lazy as lazy2 } from "react";
+import React54, { Suspense as Suspense2, lazy as lazy2 } from "react";
 var LazyWithTooltip = lazy2(
   () => import("../_browser-chunks/WithTooltip-SK46ZJ2J.js").then((mod) => ({ default: mod.WithTooltip }))
 );
-var WithTooltip = /* @__PURE__ */ __name((props) => React52.createElement(Suspense2, { fallback: React52.createElement("div", null) }, React52.createElement(LazyWithTooltip, { ...props })), "WithTooltip");
+var WithTooltip = /* @__PURE__ */ __name((props) => React54.createElement(Suspense2, { fallback: React54.createElement("div", null) }, React54.createElement(LazyWithTooltip, { ...props })), "WithTooltip");
 var LazyWithTooltipPure = lazy2(
   () => import("../_browser-chunks/WithTooltip-SK46ZJ2J.js").then((mod) => ({ default: mod.WithTooltipPure }))
 );
-var WithTooltipPure = /* @__PURE__ */ __name((props) => React52.createElement(Suspense2, { fallback: React52.createElement("div", null) }, React52.createElement(LazyWithTooltipPure, { ...props })), "WithTooltipPure");
+var WithTooltipPure = /* @__PURE__ */ __name((props) => React54.createElement(Suspense2, { fallback: React54.createElement("div", null) }, React54.createElement(LazyWithTooltipPure, { ...props })), "WithTooltipPure");
 
 // src/components/components/tooltip/TooltipMessage.tsx
-import React53 from "react";
+import React55 from "react";
 import { styled as styled39 } from "storybook/theming";
 var Title4 = styled39.div(({ theme }) => ({
   fontWeight: theme.typography.weight.bold
@@ -4664,11 +4882,11 @@ var MessageWrapper = styled39.div({
   boxSizing: "border-box"
 });
 var TooltipMessage = /* @__PURE__ */ __name(({ title, desc, links }) => {
-  return React53.createElement(MessageWrapper, null, React53.createElement(Message2, null, title && React53.createElement(Title4, null, title), desc && React53.createElement(Desc2, null, desc)), links && React53.createElement(Links, null, links.map(({ title: linkTitle, ...other }) => React53.createElement(Link2, { ...other, key: linkTitle }, linkTitle))));
+  return React55.createElement(MessageWrapper, null, React55.createElement(Message2, null, title && React55.createElement(Title4, null, title), desc && React55.createElement(Desc2, null, desc)), links && React55.createElement(Links, null, links.map(({ title: linkTitle, ...other }) => React55.createElement(Link2, { ...other, key: linkTitle }, linkTitle))));
 }, "TooltipMessage");
 
 // src/components/components/tooltip/TooltipNote.tsx
-import React54 from "react";
+import React56 from "react";
 import { styled as styled40 } from "storybook/theming";
 var Note = styled40.div(({ theme }) => ({
   padding: "2px 6px",
@@ -4685,18 +4903,18 @@ var Note = styled40.div(({ theme }) => ({
   margin: 6
 }));
 var TooltipNote = /* @__PURE__ */ __name(({ note, ...props }) => {
-  return React54.createElement(Note, { ...props }, note);
+  return React56.createElement(Note, { ...props }, note);
 }, "TooltipNote");
 
 // src/components/components/tooltip/TooltipLinkList.tsx
-import React56, { Fragment as Fragment8, useCallback as useCallback10 } from "react";
+import React58, { Fragment as Fragment10, useCallback as useCallback10 } from "react";
 import { styled as styled42 } from "storybook/theming";
 
 // src/components/components/tooltip/ListItem.tsx
 var import_memoizerific = __toESM(require_memoizerific(), 1);
-import React55 from "react";
+import React57 from "react";
 import { styled as styled41 } from "storybook/theming";
-var Title5 = styled41(({ active, loading, disabled, ...rest }) => React55.createElement("span", { ...rest }))(
+var Title5 = styled41(({ active, loading, disabled, ...rest }) => React57.createElement("span", { ...rest }))(
   ({ theme }) => ({
     color: theme.color.defaultText,
     // Previously was theme.typography.weight.normal but this weight does not exists in Theme
@@ -4816,7 +5034,7 @@ var getItemProps = (0, import_memoizerific.default)(100)(({ onClick, input, href
 var ListItem = /* @__PURE__ */ __name((props) => {
   const {
     loading = false,
-    title = React55.createElement("span", null, "Loading state"),
+    title = React57.createElement("span", null, "Loading state"),
     center = null,
     right = null,
     active = false,
@@ -4832,7 +5050,7 @@ var ListItem = /* @__PURE__ */ __name((props) => {
   const commonProps = { active, disabled };
   const itemProps = getItemProps(props);
   const left = icon || input;
-  return React55.createElement(Item, { ...rest, ...commonProps, ...itemProps }, React55.createElement(React55.Fragment, null, left && React55.createElement(Left, { ...commonProps }, left), title || center ? React55.createElement(Center, { isIndented: isIndented && !left }, title && React55.createElement(Title5, { ...commonProps, loading }, title), center && React55.createElement(CenterText, { ...commonProps }, center)) : null, right && React55.createElement(Right, { ...commonProps }, right)));
+  return React57.createElement(Item, { ...rest, ...commonProps, ...itemProps }, React57.createElement(React57.Fragment, null, left && React57.createElement(Left, { ...commonProps }, left), title || center ? React57.createElement(Center, { isIndented: isIndented && !left }, title && React57.createElement(Title5, { ...commonProps, loading }, title), center && React57.createElement(CenterText, { ...commonProps }, center)) : null, right && React57.createElement(Right, { ...commonProps }, right)));
 }, "ListItem");
 var ListItem_default = ListItem;
 
@@ -4862,30 +5080,30 @@ var Item2 = /* @__PURE__ */ __name(({ id, onClick, ...rest }) => {
     (event) => onClick?.(event, { id, active, disabled, title, href }),
     [onClick, id, active, disabled, title, href]
   );
-  return React56.createElement(ListItem_default, { id: `list-item-${id}`, ...rest, ...onClick && { onClick: handleClick } });
+  return React58.createElement(ListItem_default, { id: `list-item-${id}`, ...rest, ...onClick && { onClick: handleClick } });
 }, "Item");
 var TooltipLinkList = /* @__PURE__ */ __name(({ links, LinkWrapper, ...props }) => {
   const groups = Array.isArray(links[0]) ? links : [links];
   const isIndented = groups.some(
     (group) => group.some((link) => "icon" in link && link.icon || "input" in link && link.input)
   );
-  return React56.createElement(List, { ...props }, groups.filter((group) => group.length).map((group, index3) => {
-    return React56.createElement(Group, { key: group.map((link) => link.id).join(`~${index3}~`) }, group.map((link) => {
+  return React58.createElement(List, { ...props }, groups.filter((group) => group.length).map((group, index3) => {
+    return React58.createElement(Group, { key: group.map((link) => link.id).join(`~${index3}~`) }, group.map((link) => {
       if ("content" in link) {
-        return React56.createElement(Fragment8, { key: link.id }, link.content);
+        return React58.createElement(Fragment10, { key: link.id }, link.content);
       }
-      return React56.createElement(Item2, { key: link.id, isIndented, LinkWrapper, ...link });
+      return React58.createElement(Item2, { key: link.id, isIndented, LinkWrapper, ...link });
     }));
   }));
 }, "TooltipLinkList");
 
 // src/components/components/tabs/tabs.tsx
-import React62, { Component as Component2, memo as memo2, useMemo as useMemo7 } from "react";
+import React64, { Component as Component2, memo as memo2, useMemo as useMemo7 } from "react";
 import { sanitize as sanitize2 } from "storybook/internal/csf";
 import { styled as styled48 } from "storybook/theming";
 
 // src/components/components/bar/bar.tsx
-import React57, { Children as Children7 } from "react";
+import React59, { Children as Children9 } from "react";
 import { styled as styled43 } from "storybook/theming";
 var Side = styled43.div(
   {
@@ -4906,7 +5124,7 @@ var Side = styled43.div(
   } : {}
 );
 Side.displayName = "Side";
-var UnstyledBar = /* @__PURE__ */ __name(({ children, className, scrollable }) => scrollable ? React57.createElement(ScrollArea, { vertical: false, className }, children) : React57.createElement("div", { className }, children), "UnstyledBar");
+var UnstyledBar = /* @__PURE__ */ __name(({ children, className, scrollable }) => scrollable ? React59.createElement(ScrollArea, { vertical: false, className }, children) : React59.createElement("div", { className }, children), "UnstyledBar");
 var Bar = styled43(UnstyledBar)(
   ({ backgroundColor, theme, scrollable = true }) => ({
     color: theme.barTextColor,
@@ -4934,13 +5152,13 @@ var BarInner = styled43.div(({ bgColor }) => ({
   backgroundColor: bgColor || ""
 }));
 var FlexBar = /* @__PURE__ */ __name(({ children, backgroundColor, className, ...rest }) => {
-  const [left, right] = Children7.toArray(children);
-  return React57.createElement(Bar, { backgroundColor, className: `sb-bar ${className}`, ...rest }, React57.createElement(BarInner, { bgColor: backgroundColor }, React57.createElement(Side, { scrollable: rest.scrollable, left: true }, left), right ? React57.createElement(Side, { right: true }, right) : null));
+  const [left, right] = Children9.toArray(children);
+  return React59.createElement(Bar, { backgroundColor, className: `sb-bar ${className}`, ...rest }, React59.createElement(BarInner, { bgColor: backgroundColor }, React59.createElement(Side, { scrollable: rest.scrollable, left: true }, left), right ? React59.createElement(Side, { right: true }, right) : null));
 }, "FlexBar");
 FlexBar.displayName = "FlexBar";
 
 // src/components/components/bar/button.tsx
-import React58, { forwardRef as forwardRef14 } from "react";
+import React60, { forwardRef as forwardRef16 } from "react";
 import { isPropValid as isPropValid2, styled as styled44 } from "storybook/theming";
 var isLink = /* @__PURE__ */ __name((obj) => {
   return typeof obj.props.href === "string";
@@ -4951,15 +5169,15 @@ var isButton = /* @__PURE__ */ __name((obj) => {
 function ForwardRefFunction({ children, ...rest }, ref) {
   const o = { props: rest, ref };
   if (isLink(o)) {
-    return React58.createElement("a", { ref: o.ref, ...o.props }, children);
+    return React60.createElement("a", { ref: o.ref, ...o.props }, children);
   }
   if (isButton(o)) {
-    return React58.createElement("button", { ref: o.ref, type: "button", ...o.props }, children);
+    return React60.createElement("button", { ref: o.ref, type: "button", ...o.props }, children);
   }
   throw new Error("invalid props");
 }
 __name(ForwardRefFunction, "ForwardRefFunction");
-var ButtonOrLink = forwardRef14(ForwardRefFunction);
+var ButtonOrLink = forwardRef16(ForwardRefFunction);
 ButtonOrLink.displayName = "ButtonOrLink";
 var TabButton = styled44(ButtonOrLink, { shouldForwardProp: isPropValid2 })(
   {
@@ -5009,7 +5227,7 @@ var TabButton = styled44(ButtonOrLink, { shouldForwardProp: isPropValid2 })(
 TabButton.displayName = "TabButton";
 
 // src/components/components/tabs/EmptyTabContent.tsx
-import React59 from "react";
+import React61 from "react";
 import { styled as styled45 } from "storybook/theming";
 var Wrapper2 = styled45.div(({ theme }) => ({
   height: "100%",
@@ -5040,16 +5258,16 @@ var Description3 = styled45.div(({ theme }) => ({
   color: theme.textMutedColor
 }));
 var EmptyTabContent = /* @__PURE__ */ __name(({ title, description, footer }) => {
-  return React59.createElement(Wrapper2, null, React59.createElement(Content3, null, React59.createElement(Title6, null, title), description && React59.createElement(Description3, null, description)), footer);
+  return React61.createElement(Wrapper2, null, React61.createElement(Content3, null, React61.createElement(Title6, null, title), description && React61.createElement(Description3, null, description)), footer);
 }, "EmptyTabContent");
 
 // src/components/components/tabs/tabs.helpers.tsx
-import React60, { Children as Children8 } from "react";
+import React62, { Children as Children10 } from "react";
 import { styled as styled46 } from "storybook/theming";
 var VisuallyHidden = styled46.div(
   ({ active }) => active ? { display: "block" } : { display: "none" }
 );
-var childrenToList = /* @__PURE__ */ __name((children) => Children8.toArray(children).map(
+var childrenToList = /* @__PURE__ */ __name((children) => Children10.toArray(children).map(
   // @ts-expect-error (non strict)
   ({
     props: { title, id, color: color4, children: childrenOfChild }
@@ -5057,7 +5275,7 @@ var childrenToList = /* @__PURE__ */ __name((children) => Children8.toArray(chil
     const content = Array.isArray(
       childrenOfChild
     ) ? childrenOfChild[0] : childrenOfChild;
-    const render = typeof content === "function" ? content : ({ active }) => React60.createElement(VisuallyHidden, { active, role: "tabpanel" }, content);
+    const render = typeof content === "function" ? content : ({ active }) => React62.createElement(VisuallyHidden, { active, role: "tabpanel" }, content);
     return {
       title,
       id,
@@ -5068,7 +5286,7 @@ var childrenToList = /* @__PURE__ */ __name((children) => Children8.toArray(chil
 ), "childrenToList");
 
 // src/components/components/tabs/tabs.hooks.tsx
-import React61, { useCallback as useCallback11, useLayoutEffect as useLayoutEffect7, useRef as useRef15, useState as useState15 } from "react";
+import React63, { useCallback as useCallback11, useLayoutEffect as useLayoutEffect7, useRef as useRef15, useState as useState15 } from "react";
 import { sanitize } from "storybook/internal/csf";
 import { styled as styled47 } from "storybook/theming";
 var CollapseIcon = styled47.span(({ theme, isActive }) => ({
@@ -5114,7 +5332,7 @@ function useList(list) {
     }) => {
       const isAddonsActive = invisibleList.some(({ active }) => active);
       const [isTooltipVisible, setTooltipVisible] = useState15(false);
-      return React61.createElement(React61.Fragment, null, React61.createElement(
+      return React63.createElement(React63.Fragment, null, React63.createElement(
         WithToolTipState,
         {
           interactive: true,
@@ -5122,7 +5340,7 @@ function useList(list) {
           onVisibleChange: setTooltipVisible,
           placement: "bottom",
           delayHide: 100,
-          tooltip: React61.createElement(
+          tooltip: React63.createElement(
             TooltipLinkList,
             {
               links: invisibleList.map(({ title, id, color: color4, active }) => {
@@ -5140,7 +5358,7 @@ function useList(list) {
             }
           )
         },
-        React61.createElement(
+        React63.createElement(
           AddonButton,
           {
             id: "addons-menu-button",
@@ -5154,7 +5372,7 @@ function useList(list) {
             role: "tab"
           },
           menuName,
-          React61.createElement(
+          React63.createElement(
             CollapseIcon,
             {
               className: "addon-collapsible-icon",
@@ -5164,7 +5382,7 @@ function useList(list) {
         )
       ), invisibleList.map(({ title, id, color: color4 }, index3) => {
         const indexId = `index-${index3}`;
-        return React61.createElement(
+        return React63.createElement(
           TabButton,
           {
             id: `tabbutton-${sanitize(id) ?? indexId}`,
@@ -5285,7 +5503,7 @@ var Content4 = styled48.div(
     }
   } : {}
 );
-var TabWrapper = /* @__PURE__ */ __name(({ active, render, children }) => React62.createElement(VisuallyHidden, { active }, render ? render() : children), "TabWrapper");
+var TabWrapper = /* @__PURE__ */ __name(({ active, render, children }) => React64.createElement(VisuallyHidden, { active }, render ? render() : children), "TabWrapper");
 var _TabErrorBoundary = class _TabErrorBoundary extends Component2 {
   constructor(props) {
     super(props);
@@ -5301,7 +5519,7 @@ var _TabErrorBoundary = class _TabErrorBoundary extends Component2 {
   }
   render() {
     if (this.state.hasError && this.props.active) {
-      return React62.createElement(
+      return React64.createElement(
         EmptyTabContent,
         {
           title: "This addon has errors",
@@ -5336,15 +5554,15 @@ var Tabs = memo2(
       [children, selected]
     );
     const { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list);
-    const EmptyContent = emptyState ?? React62.createElement(EmptyTabContent, { title: "Nothing found" });
+    const EmptyContent = emptyState ?? React64.createElement(EmptyTabContent, { title: "Nothing found" });
     if (!showToolsWhenEmpty && list.length === 0) {
       return EmptyContent;
     }
     return (
       // @ts-expect-error (non strict)
-      React62.createElement(Wrapper3, { absolute, bordered, id: htmlId }, React62.createElement(FlexBar, { scrollable: false, border: true, backgroundColor }, React62.createElement(TabBar, { style: { whiteSpace: "normal" }, ref: tabBarRef, role: "tablist" }, visibleList.map(({ title, id, active, color: color4 }, index3) => {
+      React64.createElement(Wrapper3, { absolute, bordered, id: htmlId }, React64.createElement(FlexBar, { scrollable: false, border: true, backgroundColor }, React64.createElement(TabBar, { style: { whiteSpace: "normal" }, ref: tabBarRef, role: "tablist" }, visibleList.map(({ title, id, active, color: color4 }, index3) => {
         const indexId = `index-${index3}`;
-        return React62.createElement(
+        return React64.createElement(
           TabButton,
           {
             id: `tabbutton-${sanitize2(id) ?? indexId}`,
@@ -5362,10 +5580,10 @@ var Tabs = memo2(
             },
             role: "tab"
           },
-          typeof title === "function" ? React62.createElement("title", null) : title
+          typeof title === "function" ? React64.createElement("title", null) : title
         );
-      }), React62.createElement(AddonTab, { menuName, actions })), tools), React62.createElement(Content4, { id: "panel-tab-content", bordered, absolute }, list.length ? list.map(({ id, active, render }) => {
-        return React62.createElement(TabErrorBoundary, { key: id, active }, React62.createElement(render, { active }, null));
+      }), React64.createElement(AddonTab, { menuName, actions })), tools), React64.createElement(Content4, { id: "panel-tab-content", bordered, absolute }, list.length ? list.map(({ id, active, render }) => {
+        return React64.createElement(TabErrorBoundary, { key: id, active }, React64.createElement(render, { active }, null));
       }) : EmptyContent))
     );
   }
@@ -5384,7 +5602,7 @@ var _TabsState = class _TabsState extends Component2 {
   render() {
     const { bordered = false, absolute = false, children, backgroundColor, menuName } = this.props;
     const { selected } = this.state;
-    return React62.createElement(
+    return React64.createElement(
       Tabs,
       {
         bordered,
@@ -5412,7 +5630,7 @@ _TabsState.defaultProps = {
 var TabsState = _TabsState;
 
 // src/components/components/bar/separator.tsx
-import React63, { Fragment as Fragment9 } from "react";
+import React65, { Fragment as Fragment11 } from "react";
 import { styled as styled49 } from "storybook/theming";
 var Separator = styled49.span(
   ({ theme }) => ({
@@ -5430,12 +5648,12 @@ var Separator = styled49.span(
 );
 Separator.displayName = "Separator";
 var interleaveSeparators = /* @__PURE__ */ __name((list) => list.reduce(
-  (acc, item, index3) => item ? React63.createElement(Fragment9, { key: item.id || item.key || `f-${index3}` }, acc, index3 > 0 ? React63.createElement(Separator, { key: `s-${index3}` }) : null, item.render() || item) : acc,
+  (acc, item, index3) => item ? React65.createElement(Fragment11, { key: item.id || item.key || `f-${index3}` }, acc, index3 > 0 ? React65.createElement(Separator, { key: `s-${index3}` }) : null, item.render() || item) : acc,
   null
 ), "interleaveSeparators");
 
 // src/components/components/addon-panel/addon-panel.tsx
-import React64, { useEffect as useEffect19, useRef as useRef16 } from "react";
+import React66, { useEffect as useEffect19, useRef as useRef16 } from "react";
 var usePrevious = /* @__PURE__ */ __name((value) => {
   const ref = useRef16();
   useEffect19(() => {
@@ -5450,25 +5668,25 @@ var useUpdate = /* @__PURE__ */ __name((update, value) => {
 var AddonPanel = /* @__PURE__ */ __name(({ active, children }) => {
   return (
     // the hidden attribute is an valid html element that's both accessible and works to visually hide content
-    React64.createElement("div", { hidden: !active }, useUpdate(active, children))
+    React66.createElement("div", { hidden: !active }, useUpdate(active, children))
   );
 }, "AddonPanel");
 
 // src/components/brand/StorybookLogo.tsx
-import React65 from "react";
-var StorybookLogo = /* @__PURE__ */ __name(({ alt, ...props }) => React65.createElement("svg", { width: "200px", height: "40px", viewBox: "0 0 200 40", ...props, role: "img" }, alt ? React65.createElement("title", null, alt) : null, React65.createElement("defs", null, React65.createElement(
+import React67 from "react";
+var StorybookLogo = /* @__PURE__ */ __name(({ alt, ...props }) => React67.createElement("svg", { width: "200px", height: "40px", viewBox: "0 0 200 40", ...props, role: "img" }, alt ? React67.createElement("title", null, alt) : null, React67.createElement("defs", null, React67.createElement(
   "path",
   {
     d: "M1.2 36.9L0 3.9c0-1.1.8-2 1.9-2.1l28-1.8a2 2 0 0 1 2.2 1.9 2 2 0 0 1 0 .1v36a2 2 0 0 1-2 2 2 2 0 0 1-.1 0L3.2 38.8a2 2 0 0 1-2-2z",
     id: "a"
   }
-)), React65.createElement("g", { fill: "none", fillRule: "evenodd" }, React65.createElement(
+)), React67.createElement("g", { fill: "none", fillRule: "evenodd" }, React67.createElement(
   "path",
   {
     d: "M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z",
     fill: "currentColor"
   }
-), React65.createElement("mask", { id: "b", fill: "#fff" }, React65.createElement("use", { xlinkHref: "#a" })), React65.createElement("use", { fill: "#FF4785", fillRule: "nonzero", xlinkHref: "#a" }), React65.createElement(
+), React67.createElement("mask", { id: "b", fill: "#fff" }, React67.createElement("use", { xlinkHref: "#a" })), React67.createElement("use", { fill: "#FF4785", fillRule: "nonzero", xlinkHref: "#a" }), React67.createElement(
   "path",
   {
     d: "M23.7 5L24 .2l3.9-.3.1 4.8a.3.3 0 0 1-.5.2L26 3.8l-1.7 1.4a.3.3 0 0 1-.5-.3zm-5 10c0 .9 5.3.5 6 0 0-5.4-2.8-8.2-8-8.2-5.3 0-8.2 2.8-8.2 7.1 0 7.4 10 7.6 10 11.6 0 1.2-.5 1.9-1.8 1.9-1.6 0-2.2-.9-2.1-3.6 0-.6-6.1-.8-6.3 0-.5 6.7 3.7 8.6 8.5 8.6 4.6 0 8.3-2.5 8.3-7 0-7.9-10.2-7.7-10.2-11.6 0-1.6 1.2-1.8 2-1.8.6 0 2 0 1.9 3z",
@@ -5479,8 +5697,8 @@ var StorybookLogo = /* @__PURE__ */ __name(({ alt, ...props }) => React65.create
 ))), "StorybookLogo");
 
 // src/components/brand/StorybookIcon.tsx
-import React66 from "react";
-var StorybookIcon = /* @__PURE__ */ __name((props) => React66.createElement("svg", { viewBox: "0 0 64 64", ...props }, React66.createElement("title", null, "Storybook icon"), React66.createElement("g", { id: "Artboard", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" }, React66.createElement(
+import React68 from "react";
+var StorybookIcon = /* @__PURE__ */ __name((props) => React68.createElement("svg", { viewBox: "0 0 64 64", ...props }, React68.createElement("title", null, "Storybook icon"), React68.createElement("g", { id: "Artboard", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" }, React68.createElement(
   "path",
   {
     d: "M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z",
@@ -5488,7 +5706,7 @@ var StorybookIcon = /* @__PURE__ */ __name((props) => React66.createElement("svg
     fill: "#FF4785",
     fillRule: "nonzero"
   }
-), React66.createElement(
+), React68.createElement(
   "path",
   {
     d: "M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z",
@@ -5496,7 +5714,7 @@ var StorybookIcon = /* @__PURE__ */ __name((props) => React66.createElement("svg
     fill: "#FFFFFF",
     fillRule: "nonzero"
   }
-), React66.createElement(
+), React68.createElement(
   "path",
   {
     d: "M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z",
@@ -5506,7 +5724,7 @@ var StorybookIcon = /* @__PURE__ */ __name((props) => React66.createElement("svg
 ))), "StorybookIcon");
 
 // src/components/components/Loader/Loader.tsx
-import React67 from "react";
+import React69 from "react";
 import { LightningOffIcon } from "@storybook/icons";
 import { keyframes as keyframes3, styled as styled50 } from "storybook/theming";
 
@@ -5600,7 +5818,7 @@ var Ellipsis = styled50.span({
 });
 var Loader = /* @__PURE__ */ __name(({ progress, error, size, ...props }) => {
   if (error) {
-    return React67.createElement(ProgressWrapper, { "aria-label": error.toString(), "aria-live": "polite", role: "status", ...props }, React67.createElement(ErrorIcon, null), React67.createElement(ProgressMessage, null, error.message));
+    return React69.createElement(ProgressWrapper, { "aria-label": error.toString(), "aria-live": "polite", role: "status", ...props }, React69.createElement(ErrorIcon, null), React69.createElement(ProgressMessage, null, error.message));
   }
   if (progress) {
     const { value, modules } = progress;
@@ -5608,7 +5826,7 @@ var Loader = /* @__PURE__ */ __name(({ progress, error, size, ...props }) => {
     if (modules) {
       message += ` ${modules.complete} / ${modules.total} modules`;
     }
-    return React67.createElement(
+    return React69.createElement(
       ProgressWrapper,
       {
         "aria-label": "Content is loading...",
@@ -5620,11 +5838,11 @@ var Loader = /* @__PURE__ */ __name(({ progress, error, size, ...props }) => {
         role: "progressbar",
         ...props
       },
-      React67.createElement(ProgressTrack, null, React67.createElement(ProgressBar, { style: { width: `${value * 100}%` } })),
-      React67.createElement(ProgressMessage, null, message, value < 1 && React67.createElement(Ellipsis, { key: message }))
+      React69.createElement(ProgressTrack, null, React69.createElement(ProgressBar, { style: { width: `${value * 100}%` } })),
+      React69.createElement(ProgressMessage, null, message, value < 1 && React69.createElement(Ellipsis, { key: message }))
     );
   }
-  return React67.createElement(
+  return React69.createElement(
     LoaderWrapper,
     {
       "aria-label": "Content is loading...",
@@ -5637,7 +5855,7 @@ var Loader = /* @__PURE__ */ __name(({ progress, error, size, ...props }) => {
 }, "Loader");
 
 // src/components/components/ProgressSpinner/ProgressSpinner.tsx
-import React68 from "react";
+import React70 from "react";
 import { keyframes as keyframes4, styled as styled51 } from "storybook/theming";
 var XMLNS = "http://www.w3.org/2000/svg";
 var rotate = keyframes4({
@@ -5693,7 +5911,7 @@ var ProgressSpinner = /* @__PURE__ */ __name(({
   width = 1.5,
   children = null,
   ...props
-}) => typeof percentage === "number" ? React68.createElement(Wrapper4, { size, ...props }, children, React68.createElement(Circle, { size, width, xmlns: XMLNS }, React68.createElement("circle", null)), running && React68.createElement(Circle, { size, width, xmlns: XMLNS, spinner: true }, React68.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) })), React68.createElement(Circle, { size, width, xmlns: XMLNS, progress: true }, React68.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) }))) : React68.createElement(Wrapper4, { size, ...props }, children), "ProgressSpinner");
+}) => typeof percentage === "number" ? React70.createElement(Wrapper4, { size, ...props }, children, React70.createElement(Circle, { size, width, xmlns: XMLNS }, React70.createElement("circle", null)), running && React70.createElement(Circle, { size, width, xmlns: XMLNS, spinner: true }, React70.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) })), React70.createElement(Circle, { size, width, xmlns: XMLNS, progress: true }, React70.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) }))) : React70.createElement(Wrapper4, { size, ...props }, children), "ProgressSpinner");
 
 // src/components/components/utils/getStoryHref.ts
 function parseQuery(queryString) {
@@ -5720,7 +5938,7 @@ var getStoryHref = /* @__PURE__ */ __name((baseUrl, storyId, additionalParams =
 }, "getStoryHref");
 
 // src/components/components/clipboard/ClipboardCode.tsx
-import React69 from "react";
+import React71 from "react";
 import { color as color3, styled as styled52, typography } from "storybook/theming";
 var Code2 = styled52.pre`
   line-height: 18px;
@@ -5736,13 +5954,13 @@ var Code2 = styled52.pre`
   font-family: ${typography.fonts.mono};
   font-size: ${typography.size.s2 - 1}px;
 `;
-var ClipboardCode = /* @__PURE__ */ __name(({ code, ...props }) => React69.createElement(Code2, { id: "clipboard-code", ...props }, code), "ClipboardCode");
+var ClipboardCode = /* @__PURE__ */ __name(({ code, ...props }) => React71.createElement(Code2, { id: "clipboard-code", ...props }, code), "ClipboardCode");
 
 // src/components/index.ts
 var components2 = components;
 var resetComponents = {};
 Object.keys(components).forEach((key) => {
-  resetComponents[key] = forwardRef15((props, ref) => createElement9(key, { ...props, ref }));
+  resetComponents[key] = forwardRef17((props, ref) => createElement9(key, { ...props, ref }));
 });
 export {
   A,