@storybook/addon-docs 10.3.0-alpha.9 → 10.3.0-beta.0

package/dist/blocks.js

@@ -10,7 +10,7 @@ import {
   curriedOpacify$1,
   curriedTransparentize$1,
   rgba
-} from "./_browser-chunks/chunk-AAVP3AE4.js";
+} from "./_browser-chunks/chunk-SPXYZZB5.js";
 import "./_browser-chunks/chunk-SL3VIQZ3.js";
 
 // src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -21,8 +21,8 @@ import { includeConditionalArg } from "storybook/internal/csf";
 import { DocumentIcon as DocumentIcon2, UndoIcon } from "@storybook/icons";
 
 // ../../../node_modules/es-toolkit/dist/predicate/isPrimitive.mjs
-function isPrimitive(value2) {
-  return value2 == null || typeof value2 != "object" && typeof value2 != "function";
+function isPrimitive(value) {
+  return value == null || typeof value != "object" && typeof value != "function";
 }
 
 // ../../../node_modules/es-toolkit/dist/predicate/isTypedArray.mjs
@@ -31,13 +31,13 @@ function isTypedArray(x2) {
 }
 
 // ../../../node_modules/es-toolkit/dist/compat/_internal/getSymbols.mjs
-function getSymbols(object2) {
-  return Object.getOwnPropertySymbols(object2).filter((symbol) => Object.prototype.propertyIsEnumerable.call(object2, symbol));
+function getSymbols(object) {
+  return Object.getOwnPropertySymbols(object).filter((symbol) => Object.prototype.propertyIsEnumerable.call(object, symbol));
 }
 
 // ../../../node_modules/es-toolkit/dist/compat/_internal/getTag.mjs
-function getTag(value2) {
-  return value2 == null ? value2 === void 0 ? "[object Undefined]" : "[object Null]" : Object.prototype.toString.call(value2);
+function getTag(value) {
+  return value == null ? value === void 0 ? "[object Undefined]" : "[object Null]" : Object.prototype.toString.call(value);
 }
 
 // ../../../node_modules/es-toolkit/dist/compat/_internal/tags.mjs
@@ -72,15 +72,15 @@ function cloneDeepWithImpl(valueToClone, keyToClone, objectToClone, stack = /* @
   if (valueToClone instanceof Map) {
     let result = /* @__PURE__ */ new Map();
     stack.set(valueToClone, result);
-    for (let [key, value2] of valueToClone)
-      result.set(key, cloneDeepWithImpl(value2, key, objectToClone, stack, cloneValue));
+    for (let [key, value] of valueToClone)
+      result.set(key, cloneDeepWithImpl(value, key, objectToClone, stack, cloneValue));
     return result;
   }
   if (valueToClone instanceof Set) {
     let result = /* @__PURE__ */ new Set();
     stack.set(valueToClone, result);
-    for (let value2 of valueToClone)
-      result.add(cloneDeepWithImpl(value2, void 0, objectToClone, stack, cloneValue));
+    for (let value of valueToClone)
+      result.add(cloneDeepWithImpl(value, void 0, objectToClone, stack, cloneValue));
     return result;
   }
   if (typeof Buffer < "u" && Buffer.isBuffer(valueToClone))
@@ -137,8 +137,8 @@ function copyProperties(target, source, objectToClone = target, stack, cloneValu
     (descriptor == null || descriptor.writable) && (target[key] = cloneDeepWithImpl(source[key], key, objectToClone, stack, cloneValue));
   }
 }
-function isCloneableObject(object2) {
-  switch (getTag(object2)) {
+function isCloneableObject(object) {
+  switch (getTag(object)) {
     case argumentsTag:
     case arrayTag:
     case arrayBufferTag:
@@ -176,8 +176,8 @@ function cloneDeep(obj) {
 function pickBy(obj, shouldPick) {
   let result = {}, keys = Object.keys(obj);
   for (let i2 = 0; i2 < keys.length; i2++) {
-    let key = keys[i2], value2 = obj[key];
-    shouldPick(value2, key) && (result[key] = value2);
+    let key = keys[i2], value = obj[key];
+    shouldPick(value, key) && (result[key] = value);
   }
   return result;
 }
@@ -657,16 +657,16 @@ var Label = styled.label(({ theme }) => ({
       textDecoration: "underline"
     }
   }
-})), parse = (value2) => value2 === "true", BooleanControl = ({
+})), parse = (value) => value === "true", BooleanControl = ({
   name,
-  value: value2,
+  value,
   onChange,
   onBlur,
   onFocus,
   argType
 }) => {
   let onSetFalse = useCallback(() => onChange(!1), [onChange]), readonly = !!argType?.table?.readonly;
-  if (value2 === void 0)
+  if (value === void 0)
     return React.createElement(
       Button,
       {
@@ -679,7 +679,7 @@ var Label = styled.label(({ theme }) => ({
       },
       "Set boolean"
     );
-  let controlId = getControlId(name), parsedValue = typeof value2 == "string" ? parse(value2) : value2;
+  let controlId = getControlId(name), parsedValue = typeof value == "string" ? parse(value) : value;
   return React.createElement(Label, { "aria-disabled": readonly, htmlFor: controlId, "aria-label": name }, React.createElement(
     "input",
     {
@@ -700,17 +700,17 @@ var Label = styled.label(({ theme }) => ({
 import React2, { useEffect, useRef, useState } from "react";
 import { Form } from "storybook/internal/components";
 import { styled as styled2 } from "storybook/theming";
-var parseDate = (value2) => {
-  let [year, month, day] = value2.split("-"), result = /* @__PURE__ */ new Date();
+var parseDate = (value) => {
+  let [year, month, day] = value.split("-"), result = /* @__PURE__ */ new Date();
   return result.setFullYear(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10)), result;
-}, parseTime = (value2) => {
-  let [hours, minutes] = value2.split(":"), result = /* @__PURE__ */ new Date();
+}, parseTime = (value) => {
+  let [hours, minutes] = value.split(":"), result = /* @__PURE__ */ new Date();
   return result.setHours(parseInt(hours, 10)), result.setMinutes(parseInt(minutes, 10)), result;
-}, formatDate = (value2) => {
-  let date = new Date(value2), year = `000${date.getFullYear()}`.slice(-4), month = `0${date.getMonth() + 1}`.slice(-2), day = `0${date.getDate()}`.slice(-2);
+}, formatDate = (value) => {
+  let date = new Date(value), year = `000${date.getFullYear()}`.slice(-4), month = `0${date.getMonth() + 1}`.slice(-2), day = `0${date.getDate()}`.slice(-2);
   return `${year}-${month}-${day}`;
-}, formatTime = (value2) => {
-  let date = new Date(value2), hours = `0${date.getHours()}`.slice(-2), minutes = `0${date.getMinutes()}`.slice(-2);
+}, formatTime = (value) => {
+  let date = new Date(value), hours = `0${date.getHours()}`.slice(-2), minutes = `0${date.getMinutes()}`.slice(-2);
   return `${hours}:${minutes}`;
 }, FormInput = styled2(Form.Input)(({ theme }) => ({
   "&[readonly]": {
@@ -734,22 +734,22 @@ var parseDate = (value2) => {
   "div:last-of-type": {
     flex: 3
   }
-}), DateControl = ({ name, value: value2, onChange, onFocus, onBlur, argType }) => {
+}), DateControl = ({ name, value, onChange, onFocus, onBlur, argType }) => {
   let [valid, setValid] = useState(!0), dateRef = useRef(), timeRef = useRef(), readonly = !!argType?.table?.readonly;
   useEffect(() => {
-    valid !== !1 && (dateRef && dateRef.current && (dateRef.current.value = value2 ? formatDate(value2) : ""), timeRef && timeRef.current && (timeRef.current.value = value2 ? formatTime(value2) : ""));
-  }, [value2]);
+    valid !== !1 && (dateRef && dateRef.current && (dateRef.current.value = value ? formatDate(value) : ""), timeRef && timeRef.current && (timeRef.current.value = value ? formatTime(value) : ""));
+  }, [value]);
   let onDateChange = (e2) => {
     if (!e2.target.value)
       return onChange();
-    let parsed = parseDate(e2.target.value), result = new Date(value2 ?? "");
+    let parsed = parseDate(e2.target.value), result = new Date(value ?? "");
     result.setFullYear(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
     let time = result.getTime();
     time && onChange(time), setValid(!!time);
   }, onTimeChange = (e2) => {
     if (!e2.target.value)
       return onChange();
-    let parsed = parseTime(e2.target.value), result = new Date(value2 ?? "");
+    let parsed = parseTime(e2.target.value), result = new Date(value ?? "");
     result.setHours(parsed.getHours()), result.setMinutes(parsed.getMinutes());
     let time = result.getTime();
     time && onChange(time), setValid(!!time);
@@ -788,14 +788,14 @@ import { Button as Button2, Form as Form2 } from "storybook/internal/components"
 import { styled as styled3 } from "storybook/theming";
 var Wrapper = styled3.label({
   display: "flex"
-}), parse2 = (value2) => {
-  let result = parseFloat(value2);
+}), parse2 = (value) => {
+  let result = parseFloat(value);
   return Number.isNaN(result) ? void 0 : result;
-}, format = (value2) => value2 != null ? String(value2) : "", FormInput2 = styled3(Form2.Input)(({ theme }) => ({
+}, format = (value) => value != null ? String(value) : "", FormInput2 = styled3(Form2.Input)(({ theme }) => ({
   background: theme.base === "light" ? theme.color.lighter : "transparent"
 })), NumberControl = ({
   name,
-  value: value2,
+  value,
   onChange,
   min,
   max,
@@ -804,7 +804,7 @@ var Wrapper = styled3.label({
   onFocus,
   argType
 }) => {
-  let [inputValue, setInputValue] = useState2(typeof value2 == "number" ? value2 : ""), [forceVisible, setForceVisible] = useState2(!1), [parseError, setParseError] = useState2(null), readonly = !!argType?.table?.readonly, handleChange = useCallback2(
+  let [inputValue, setInputValue] = useState2(typeof value == "number" ? value : ""), [forceVisible, setForceVisible] = useState2(!1), [parseError, setParseError] = useState2(null), readonly = !!argType?.table?.readonly, handleChange = useCallback2(
     (event) => {
       setInputValue(event.target.value);
       let result = parseFloat(event.target.value);
@@ -822,9 +822,9 @@ var Wrapper = styled3.label({
   return useEffect2(() => {
     forceVisible && htmlElRef.current && htmlElRef.current.select();
   }, [forceVisible]), useEffect2(() => {
-    let newInputValue = typeof value2 == "number" ? value2 : "";
+    let newInputValue = typeof value == "number" ? value : "";
     inputValue !== newInputValue && setInputValue(newInputValue);
-  }, [value2]), value2 === void 0 ? React3.createElement(
+  }, [value]), value === void 0 ? React3.createElement(
     Button2,
     {
       ariaLabel: !1,
@@ -867,10 +867,10 @@ import { logger } from "storybook/internal/client-logger";
 import { styled as styled4 } from "storybook/theming";
 
 // src/blocks/controls/options/helpers.ts
-var selectedKey = (value2, options) => {
-  let entry = options && Object.entries(options).find(([_key, val]) => val === value2);
+var selectedKey = (value, options) => {
+  let entry = options && Object.entries(options).find(([_key, val]) => val === value);
   return entry ? entry[0] : void 0;
-}, selectedKeys = (value2, options) => value2 && options ? Object.entries(options).filter((entry) => value2.includes(entry[1])).map((entry) => entry[0]) : [], selectedValues = (keys, options) => keys && options && keys.map((key) => options[key]);
+}, selectedKeys = (value, options) => value && options ? Object.entries(options).filter((entry) => value.includes(entry[1])).map((entry) => entry[0]) : [], selectedValues = (keys, options) => keys && options && keys.map((key) => options[key]);
 
 // src/blocks/controls/options/Checkbox.tsx
 var Wrapper2 = styled4.fieldset(
@@ -908,20 +908,20 @@ var Wrapper2 = styled4.fieldset(
 })), CheckboxControl = ({
   name,
   options,
-  value: value2,
+  value,
   onChange,
   isInline,
   argType
 }) => {
   if (!options)
     return logger.warn(`Checkbox with no options: ${name}`), React4.createElement(React4.Fragment, null, "-");
-  let initial2 = selectedKeys(value2 || [], options), [selected, setSelected] = useState3(initial2), readonly = !!argType?.table?.readonly, handleChange = (e2) => {
+  let initial2 = selectedKeys(value || [], options), [selected, setSelected] = useState3(initial2), readonly = !!argType?.table?.readonly, handleChange = (e2) => {
     let option = e2.target.value, updated = [...selected];
     updated.includes(option) ? updated.splice(updated.indexOf(option), 1) : updated.push(option), onChange(selectedValues(updated, options)), setSelected(updated);
   };
   useEffect3(() => {
-    setSelected(selectedKeys(value2 || [], options));
-  }, [value2]);
+    setSelected(selectedKeys(value || [], options));
+  }, [value]);
   let controlId = getControlId(name);
   return React4.createElement(Wrapper2, { $isInline: isInline }, React4.createElement("legend", { className: "sb-sr-only" }, name), Object.keys(options).map((key, index) => {
     let id = `${controlId}-${index}`;
@@ -979,14 +979,14 @@ var Wrapper3 = styled5.fieldset(
 })), RadioControl = ({
   name,
   options,
-  value: value2,
+  value,
   onChange,
   isInline,
   argType
 }) => {
   if (!options)
     return logger2.warn(`Radio with no options: ${name}`), React5.createElement(React5.Fragment, null, "-");
-  let selection = selectedKey(value2, options), controlId = getControlId(name), readonly = !!argType?.table?.readonly;
+  let selection = selectedKey(value, options), controlId = getControlId(name), readonly = !!argType?.table?.readonly;
   return React5.createElement(Wrapper3, { isInline }, React5.createElement("legend", { className: "sb-sr-only" }, name), Object.keys(options).map((key, index) => {
     let id = `${controlId}-${index}`;
     return React5.createElement(Label3, { key: id, htmlFor: id, $readOnly: readonly }, React5.createElement(
@@ -1080,16 +1080,16 @@ var styleResets = {
       fill: theme.textMutedColor
     }
   }
-})), NO_SELECTION = "Choose option...", SingleSelect = ({ name, value: value2, options, onChange, argType }) => {
+})), NO_SELECTION = "Choose option...", SingleSelect = ({ name, value, options, onChange, argType }) => {
   let handleChange = (e2) => {
     onChange(options[e2.currentTarget.value]);
-  }, selection = selectedKey(value2, options) || NO_SELECTION, controlId = getControlId(name), readonly = !!argType?.table?.readonly;
+  }, selection = selectedKey(value, options) || NO_SELECTION, controlId = getControlId(name), readonly = !!argType?.table?.readonly;
   return React6.createElement(SelectWrapper, null, React6.createElement(ChevronSmallDownIcon, null), React6.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React6.createElement(OptionsSelect, { disabled: readonly, id: controlId, value: selection, onChange: handleChange }, React6.createElement("option", { disabled: selection === NO_SELECTION, key: "no-selection" }, NO_SELECTION), Object.keys(options).map((key) => React6.createElement("option", { key, value: key }, key))));
-}, MultiSelect = ({ name, value: value2, options, onChange, argType }) => {
+}, MultiSelect = ({ name, value, options, onChange, argType }) => {
   let handleChange = (e2) => {
     let selection2 = Array.from(e2.currentTarget.options).filter((option) => option.selected).map((option) => option.value);
     onChange(selectedValues(selection2, options));
-  }, selection = selectedKeys(value2, options), controlId = getControlId(name), readonly = !!argType?.table?.readonly;
+  }, selection = selectedKeys(value, options), controlId = getControlId(name), readonly = !!argType?.table?.readonly;
   return React6.createElement(SelectWrapper, null, React6.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React6.createElement(
     OptionsSelect,
     {
@@ -1130,7 +1130,7 @@ var normalizeOptions = (options, labels) => Array.isArray(options) ? options.red
 // src/blocks/controls/Object.tsx
 import React11, { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState4 } from "react";
 import { Button as Button3, Form as Form3, ToggleButton } from "storybook/internal/components";
-import { AddIcon, SubtractIcon } from "@storybook/icons";
+import { AddIcon, EditIcon, SubtractIcon } from "@storybook/icons";
 import { styled as styled8, useTheme } from "storybook/theming";
 
 // src/blocks/controls/react-editable-json-tree/index.tsx
@@ -1221,7 +1221,7 @@ function JsonNodeAccordion({
   ), React8.createElement(
     Region,
     {
-      role: "region",
+      role: "group",
       id: ids.region,
       "aria-labelledby": ids.trigger,
       className: "rejt-accordion-region"
@@ -1354,7 +1354,7 @@ var JsonArray = class extends Component {
   }
   handleRemoveItem(index) {
     return () => {
-      let { beforeRemoveAction, logger: logger4 } = this.props, { data, keyPath, nextDeep: deep } = this.state, oldValue = data[index];
+      let { beforeRemoveAction, logger: logger5 } = this.props, { data, keyPath, nextDeep: deep } = this.state, oldValue = data[index];
       (beforeRemoveAction || Promise.resolve.bind(Promise))(index, keyPath, deep, oldValue).then(() => {
         let deltaUpdateResult = {
           keyPath,
@@ -1366,11 +1366,11 @@ var JsonArray = class extends Component {
         data.splice(index, 1), this.setState({ data });
         let { onUpdate, onDeltaUpdate } = this.props;
         onUpdate(keyPath[keyPath.length - 1], data), onDeltaUpdate(deltaUpdateResult);
-      }).catch(logger4.error);
+      }).catch(logger5.error);
     };
   }
   handleAddValueAdd({ newValue }) {
-    let { data, keyPath = [], nextDeep: deep } = this.state, { beforeAddAction, logger: logger4 } = this.props, key = data.length;
+    let { data, keyPath = [], nextDeep: deep } = this.state, { beforeAddAction, logger: logger5 } = this.props, key = data.length;
     (beforeAddAction || Promise.resolve.bind(Promise))(key, keyPath, deep, newValue).then(() => {
       data[key] = newValue, this.setState({
         data
@@ -1383,18 +1383,18 @@ var JsonArray = class extends Component {
         key,
         newValue
       });
-    }).catch(logger4.error);
+    }).catch(logger5.error);
   }
   handleAddValueCancel() {
     this.setState({
       addFormVisible: !1
     });
   }
-  handleEditValue({ key, value: value2 }) {
+  handleEditValue({ key, value }) {
     return new Promise((resolve, reject) => {
       let { beforeUpdateAction } = this.props, { data, keyPath, nextDeep: deep } = this.state, oldValue = data[key];
-      (beforeUpdateAction || Promise.resolve.bind(Promise))(key, keyPath, deep, oldValue, value2).then(() => {
-        data[key] = value2, this.setState({
+      (beforeUpdateAction || Promise.resolve.bind(Promise))(key, keyPath, deep, oldValue, value).then(() => {
+        data[key] = value, this.setState({
           data
         });
         let { onUpdate, onDeltaUpdate } = this.props;
@@ -1403,20 +1403,19 @@ var JsonArray = class extends Component {
           keyPath,
           deep,
           key,
-          newValue: value2,
+          newValue: value,
           oldValue
         }), resolve(void 0);
       }).catch(reject);
     });
   }
   renderCollapsed() {
-    let { name, data, keyPath, deep } = this.state, { handleRemove, readOnly, getStyle, dataType, minusMenuElement } = this.props, { minus, collapsed } = getStyle(name, data, keyPath, deep, dataType), isReadOnly = readOnly(name, data, keyPath, deep, dataType), removeItemButton = minusMenuElement && cloneElement2(minusMenuElement, {
+    let { name, data, keyPath, deep } = this.state, { handleRemove, readOnly, dataType, minusMenuElement } = this.props, isReadOnly = readOnly(name, data, keyPath, deep, dataType), removeItemButton = minusMenuElement && cloneElement2(minusMenuElement, {
       onClick: handleRemove,
       className: "rejt-minus-menu",
-      style: minus,
       "aria-label": `remove the array '${String(name)}'`
     });
-    return React9.createElement(React9.Fragment, null, React9.createElement("span", { style: collapsed }, "[...] ", data.length, " ", data.length === 1 ? "item" : "items"), !isReadOnly && removeItemButton);
+    return React9.createElement(React9.Fragment, null, React9.createElement("span", { className: "rejt-collapsed-value" }, "[...] ", data.length, " ", data.length === 1 ? "item" : "items"), !isReadOnly && removeItemButton);
   }
   renderNotCollapsed() {
     let { name, data, keyPath, deep, addFormVisible, nextDeep } = this.state, {
@@ -1424,7 +1423,6 @@ var JsonArray = class extends Component {
       handleRemove,
       onDeltaUpdate,
       readOnly,
-      getStyle,
       dataType,
       addButtonElement,
       cancelButtonElement,
@@ -1435,20 +1433,18 @@ var JsonArray = class extends Component {
       beforeRemoveAction,
       beforeAddAction,
       beforeUpdateAction,
-      logger: logger4,
+      logger: logger5,
       onSubmitValueParser
-    } = this.props, { minus, plus, delimiter, ul, addForm } = getStyle(name, data, keyPath, deep, dataType), isReadOnly = readOnly(name, data, keyPath, deep, dataType), addItemButton = plusMenuElement && cloneElement2(plusMenuElement, {
+    } = this.props, isReadOnly = readOnly(name, data, keyPath, deep, dataType), addItemButton = plusMenuElement && cloneElement2(plusMenuElement, {
       onClick: this.handleAddMode,
       className: "rejt-plus-menu",
-      style: plus,
       "aria-label": `add a new item to the '${String(name)}' array`
     }), removeItemButton = minusMenuElement && cloneElement2(minusMenuElement, {
       onClick: handleRemove,
       className: "rejt-minus-menu",
-      style: minus,
       "aria-label": `remove the array '${String(name)}'`
     });
-    return React9.createElement(React9.Fragment, null, React9.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, "["), !addFormVisible && addItemButton, React9.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, data.map((item, index) => React9.createElement(
+    return React9.createElement(React9.Fragment, null, React9.createElement("span", { className: "rejt-not-collapsed-delimiter" }, "["), !addFormVisible && addItemButton, React9.createElement("ul", { className: "rejt-not-collapsed-list" }, data.map((item, index) => React9.createElement(
       JsonNode,
       {
         key: index,
@@ -1462,7 +1458,6 @@ var JsonArray = class extends Component {
         onUpdate: this.onChildUpdate,
         onDeltaUpdate,
         readOnly,
-        getStyle,
         addButtonElement,
         cancelButtonElement,
         inputElementGenerator,
@@ -1472,10 +1467,10 @@ var JsonArray = class extends Component {
         beforeRemoveAction,
         beforeAddAction,
         beforeUpdateAction,
-        logger: logger4,
+        logger: logger5,
         onSubmitValueParser
       }
-    ))), !isReadOnly && addFormVisible && React9.createElement("div", { className: "rejt-add-form", style: addForm }, React9.createElement(
+    ))), !isReadOnly && addFormVisible && React9.createElement("div", { className: "rejt-add-form" }, React9.createElement(
       JsonAddValue,
       {
         handleAdd: this.handleAddValueAdd,
@@ -1488,10 +1483,10 @@ var JsonArray = class extends Component {
         deep,
         onSubmitValueParser
       }
-    )), React9.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, "]"), !isReadOnly && removeItemButton);
+    )), React9.createElement("span", { className: "rejt-not-collapsed-delimiter" }, "]"), !isReadOnly && removeItemButton);
   }
   render() {
-    let { name, collapsed, keyPath, deep } = this.state, value2 = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
+    let { name, collapsed, keyPath, deep } = this.state, value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
     return React9.createElement(
       JsonNodeAccordion,
       {
@@ -1501,7 +1496,7 @@ var JsonArray = class extends Component {
         keyPath,
         onClick: this.handleCollapseMode
       },
-      value2
+      value
     );
   }
 };
@@ -1528,7 +1523,7 @@ var JsonFunctionValue = class extends Component {
     return props.value !== state.value ? { value: props.value } : null;
   }
   componentDidUpdate() {
-    let { editEnabled, inputRef, name, value: value2, keyPath, deep } = this.state, { readOnly, dataType } = this.props, readOnlyResult = readOnly(name, value2, keyPath, deep, dataType);
+    let { editEnabled, inputRef, name, value, keyPath, deep } = this.state, { readOnly, dataType } = this.props, readOnlyResult = readOnly(name, value, keyPath, deep, dataType);
     editEnabled && !readOnlyResult && typeof inputRef.focus == "function" && inputRef.focus();
   }
   onKeydown(event) {
@@ -1536,7 +1531,7 @@ var JsonFunctionValue = class extends Component {
     event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat || inputRef !== event.target || ((event.code === "Enter" || event.key === "Enter") && (event.preventDefault(), this.handleEdit()), (event.code === "Escape" || event.key === "Escape") && (event.preventDefault(), this.handleCancelEdit()));
   }
   handleEdit() {
-    let { handleUpdateValue, originalValue, logger: logger4, onSubmitValueParser, keyPath } = this.props, { inputRef, name, deep } = this.state;
+    let { handleUpdateValue, originalValue, logger: logger5, onSubmitValueParser, keyPath } = this.props, { inputRef, name, deep } = this.state;
     if (!inputRef)
       return;
     let newValue = onSubmitValueParser(!0, keyPath, deep, name, inputRef.value), result = {
@@ -1545,7 +1540,7 @@ var JsonFunctionValue = class extends Component {
     };
     (handleUpdateValue || Promise.resolve.bind(Promise))(result).then(() => {
       isComponentWillChange(originalValue, newValue) || this.handleCancelEdit();
-    }).catch(logger4.error);
+    }).catch(logger5.error);
   }
   handleEditMode() {
     this.setState({
@@ -1561,16 +1556,15 @@ var JsonFunctionValue = class extends Component {
     });
   }
   render() {
-    let { name, value: value2, editEnabled, keyPath, deep } = this.state, {
+    let { name, value, editEnabled, keyPath, deep } = this.state, {
       handleRemove,
       originalValue,
       readOnly,
       dataType,
-      getStyle,
       textareaElementGenerator,
       minusMenuElement,
       keyPath: comeFromKeyPath = []
-    } = this.props, style = getStyle(name, originalValue, keyPath, deep, dataType), result = null, minusElement = null, resultOnlyResult = readOnly(name, originalValue, keyPath, deep, dataType);
+    } = this.props, result = null, minusElement = null, resultOnlyResult = readOnly(name, originalValue, keyPath, deep, dataType);
     if (editEnabled && !resultOnlyResult) {
       let textareaElement = textareaElementGenerator(
         VALUE,
@@ -1581,29 +1575,20 @@ var JsonFunctionValue = class extends Component {
         dataType
       ), textareaElementLayout = cloneElement2(textareaElement, {
         ref: this.refInput,
-        defaultValue: value2,
+        defaultValue: value,
         onKeyDown: this.onKeydown
       });
-      result = React9.createElement("span", { className: "rejt-edit-form", style: style.editForm }, textareaElementLayout), minusElement = null;
+      result = React9.createElement("span", { className: "rejt-edit-form" }, textareaElementLayout), minusElement = null;
     } else {
-      result = React9.createElement(
-        "span",
-        {
-          className: "rejt-value",
-          style: style.value,
-          onClick: resultOnlyResult ? void 0 : this.handleEditMode
-        },
-        value2
-      );
+      result = React9.createElement("span", { className: "rejt-value", onClick: resultOnlyResult ? void 0 : this.handleEditMode }, value);
       let parentPropertyName = comeFromKeyPath.at(-1), minusMenuLayout = minusMenuElement && cloneElement2(minusMenuElement, {
         onClick: handleRemove,
         className: "rejt-minus-menu",
-        style: style.minus,
         "aria-label": `remove the function '${String(name)}'${String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ""}`
       });
       minusElement = resultOnlyResult ? null : minusMenuLayout;
     }
-    return React9.createElement("li", { className: "rejt-value-node", style: style.li }, React9.createElement("span", { className: "rejt-name", style: style.name }, name, " :", " "), result, minusElement);
+    return React9.createElement("li", { className: "rejt-value-node" }, React9.createElement("span", { className: "rejt-name" }, name, " : "), result, minusElement);
   }
 };
 JsonFunctionValue.defaultProps = {
@@ -1634,7 +1619,6 @@ var JsonNode = class extends Component {
       onUpdate,
       onDeltaUpdate,
       readOnly,
-      getStyle,
       addButtonElement,
       cancelButtonElement,
       inputElementGenerator,
@@ -1644,7 +1628,7 @@ var JsonNode = class extends Component {
       beforeRemoveAction,
       beforeAddAction,
       beforeUpdateAction,
-      logger: logger4,
+      logger: logger5,
       onSubmitValueParser
     } = this.props, readOnlyTrue = () => !0, dataType = getObjectType(data);
     switch (dataType) {
@@ -1662,7 +1646,6 @@ var JsonNode = class extends Component {
             onDeltaUpdate,
             readOnly: readOnlyTrue,
             dataType,
-            getStyle,
             addButtonElement,
             cancelButtonElement,
             inputElementGenerator,
@@ -1672,7 +1655,7 @@ var JsonNode = class extends Component {
             beforeRemoveAction,
             beforeAddAction,
             beforeUpdateAction,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1690,7 +1673,6 @@ var JsonNode = class extends Component {
             onDeltaUpdate,
             readOnly,
             dataType,
-            getStyle,
             addButtonElement,
             cancelButtonElement,
             inputElementGenerator,
@@ -1700,7 +1682,7 @@ var JsonNode = class extends Component {
             beforeRemoveAction,
             beforeAddAction,
             beforeUpdateAction,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1718,7 +1700,6 @@ var JsonNode = class extends Component {
             onDeltaUpdate,
             readOnly,
             dataType,
-            getStyle,
             addButtonElement,
             cancelButtonElement,
             inputElementGenerator,
@@ -1728,7 +1709,7 @@ var JsonNode = class extends Component {
             beforeRemoveAction,
             beforeAddAction,
             beforeUpdateAction,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1745,11 +1726,10 @@ var JsonNode = class extends Component {
             handleUpdateValue,
             readOnly,
             dataType,
-            getStyle,
             cancelButtonElement,
             inputElementGenerator,
             minusMenuElement,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1766,11 +1746,10 @@ var JsonNode = class extends Component {
             handleUpdateValue,
             readOnly,
             dataType,
-            getStyle,
             cancelButtonElement,
             inputElementGenerator,
             minusMenuElement,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1787,11 +1766,10 @@ var JsonNode = class extends Component {
             handleUpdateValue,
             readOnly,
             dataType,
-            getStyle,
             cancelButtonElement,
             inputElementGenerator,
             minusMenuElement,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1808,11 +1786,10 @@ var JsonNode = class extends Component {
             handleUpdateValue,
             readOnly: readOnlyTrue,
             dataType,
-            getStyle,
             cancelButtonElement,
             inputElementGenerator,
             minusMenuElement,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1829,11 +1806,10 @@ var JsonNode = class extends Component {
             handleUpdateValue,
             readOnly,
             dataType,
-            getStyle,
             cancelButtonElement,
             inputElementGenerator,
             minusMenuElement,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1850,11 +1826,10 @@ var JsonNode = class extends Component {
             handleUpdateValue,
             readOnly,
             dataType,
-            getStyle,
             cancelButtonElement,
             inputElementGenerator,
             minusMenuElement,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1871,11 +1846,10 @@ var JsonNode = class extends Component {
             handleUpdateValue,
             readOnly,
             dataType,
-            getStyle,
             cancelButtonElement,
             textareaElementGenerator,
             minusMenuElement,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1892,11 +1866,10 @@ var JsonNode = class extends Component {
             handleUpdateValue,
             readOnly: readOnlyTrue,
             dataType,
-            getStyle,
             cancelButtonElement,
             inputElementGenerator,
             minusMenuElement,
-            logger: logger4,
+            logger: logger5,
             onSubmitValueParser
           }
         );
@@ -1945,7 +1918,7 @@ var JsonObject = class extends Component {
     });
   }
   handleAddValueAdd({ key, newValue }) {
-    let { data, keyPath = [], nextDeep: deep } = this.state, { beforeAddAction, logger: logger4 } = this.props;
+    let { data, keyPath = [], nextDeep: deep } = this.state, { beforeAddAction, logger: logger5 } = this.props;
     (beforeAddAction || Promise.resolve.bind(Promise))(key, keyPath, deep, newValue).then(() => {
       data[key] = newValue, this.setState({
         data
@@ -1958,11 +1931,11 @@ var JsonObject = class extends Component {
         key,
         newValue
       });
-    }).catch(logger4.error);
+    }).catch(logger5.error);
   }
   handleRemoveValue(key) {
     return () => {
-      let { beforeRemoveAction, logger: logger4 } = this.props, { data, keyPath = [], nextDeep: deep } = this.state, oldValue = data[key];
+      let { beforeRemoveAction, logger: logger5 } = this.props, { data, keyPath = [], nextDeep: deep } = this.state, oldValue = data[key];
       (beforeRemoveAction || Promise.resolve.bind(Promise))(key, keyPath, deep, oldValue).then(() => {
         let deltaUpdateResult = {
           keyPath,
@@ -1974,7 +1947,7 @@ var JsonObject = class extends Component {
         delete data[key], this.setState({ data });
         let { onUpdate, onDeltaUpdate } = this.props;
         onUpdate(keyPath[keyPath.length - 1], data), onDeltaUpdate(deltaUpdateResult);
-      }).catch(logger4.error);
+      }).catch(logger5.error);
     };
   }
   handleCollapseMode() {
@@ -1982,11 +1955,11 @@ var JsonObject = class extends Component {
       collapsed: !state.collapsed
     }));
   }
-  handleEditValue({ key, value: value2 }) {
+  handleEditValue({ key, value }) {
     return new Promise((resolve, reject) => {
       let { beforeUpdateAction } = this.props, { data, keyPath = [], nextDeep: deep } = this.state, oldValue = data[key];
-      (beforeUpdateAction || Promise.resolve.bind(Promise))(key, keyPath, deep, oldValue, value2).then(() => {
-        data[key] = value2, this.setState({
+      (beforeUpdateAction || Promise.resolve.bind(Promise))(key, keyPath, deep, oldValue, value).then(() => {
+        data[key] = value, this.setState({
           data
         });
         let { onUpdate, onDeltaUpdate } = this.props;
@@ -1995,20 +1968,19 @@ var JsonObject = class extends Component {
           keyPath,
           deep,
           key,
-          newValue: value2,
+          newValue: value,
           oldValue
         }), resolve();
       }).catch(reject);
     });
   }
   renderCollapsed() {
-    let { name, keyPath, deep, data } = this.state, { handleRemove, readOnly, dataType, getStyle, minusMenuElement } = this.props, { minus, collapsed } = getStyle(name, data, keyPath, deep, dataType), keyList = Object.getOwnPropertyNames(data), isReadOnly = readOnly(name, data, keyPath, deep, dataType), removeItemButton = minusMenuElement && cloneElement2(minusMenuElement, {
+    let { name, keyPath, deep, data } = this.state, { handleRemove, readOnly, dataType, minusMenuElement } = this.props, keyList = Object.getOwnPropertyNames(data), isReadOnly = readOnly(name, data, keyPath, deep, dataType), removeItemButton = minusMenuElement && cloneElement2(minusMenuElement, {
       onClick: handleRemove,
       className: "rejt-minus-menu",
-      style: minus,
       "aria-label": `remove the object '${String(name)}'`
     });
-    return React9.createElement(React9.Fragment, null, React9.createElement("span", { style: collapsed }, "{...}", " ", keyList.length, " ", keyList.length === 1 ? "key" : "keys"), !isReadOnly && removeItemButton);
+    return React9.createElement(React9.Fragment, null, React9.createElement("span", { className: "rejt-collapsed-value" }, "{...}", " ", keyList.length, " ", keyList.length === 1 ? "key" : "keys"), !isReadOnly && removeItemButton);
   }
   renderNotCollapsed() {
     let { name, data, keyPath, deep, nextDeep, addFormVisible } = this.state, {
@@ -2016,7 +1988,6 @@ var JsonObject = class extends Component {
       handleRemove,
       onDeltaUpdate,
       readOnly,
-      getStyle,
       dataType,
       addButtonElement,
       cancelButtonElement,
@@ -2027,17 +1998,15 @@ var JsonObject = class extends Component {
       beforeRemoveAction,
       beforeAddAction,
       beforeUpdateAction,
-      logger: logger4,
+      logger: logger5,
       onSubmitValueParser
-    } = this.props, { minus, plus, addForm, ul, delimiter } = getStyle(name, data, keyPath, deep, dataType), keyList = Object.getOwnPropertyNames(data), isReadOnly = readOnly(name, data, keyPath, deep, dataType), addItemButton = plusMenuElement && cloneElement2(plusMenuElement, {
+    } = this.props, keyList = Object.getOwnPropertyNames(data), isReadOnly = readOnly(name, data, keyPath, deep, dataType), addItemButton = plusMenuElement && cloneElement2(plusMenuElement, {
       onClick: this.handleAddMode,
       className: "rejt-plus-menu",
-      style: plus,
       "aria-label": `add a new property to the object '${String(name)}'`
     }), removeItemButton = minusMenuElement && cloneElement2(minusMenuElement, {
       onClick: handleRemove,
       className: "rejt-minus-menu",
-      style: minus,
       "aria-label": `remove the object '${String(name)}'`
     }), list = keyList.map((key) => React9.createElement(
       JsonNode,
@@ -2053,7 +2022,6 @@ var JsonObject = class extends Component {
         onUpdate: this.onChildUpdate,
         onDeltaUpdate,
         readOnly,
-        getStyle,
         addButtonElement,
         cancelButtonElement,
         inputElementGenerator,
@@ -2063,11 +2031,11 @@ var JsonObject = class extends Component {
         beforeRemoveAction,
         beforeAddAction,
         beforeUpdateAction,
-        logger: logger4,
+        logger: logger5,
         onSubmitValueParser
       }
     ));
-    return React9.createElement(React9.Fragment, null, React9.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, "{"), !isReadOnly && addItemButton, React9.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, list), !isReadOnly && addFormVisible && React9.createElement("div", { className: "rejt-add-form", style: addForm }, React9.createElement(
+    return React9.createElement(React9.Fragment, null, React9.createElement("span", { className: "rejt-not-collapsed-delimiter" }, "{"), !isReadOnly && addItemButton, React9.createElement("ul", { className: "rejt-not-collapsed-list" }, list), !isReadOnly && addFormVisible && React9.createElement("div", { className: "rejt-add-form" }, React9.createElement(
       JsonAddValue,
       {
         handleAdd: this.handleAddValueAdd,
@@ -2079,10 +2047,10 @@ var JsonObject = class extends Component {
         deep,
         onSubmitValueParser
       }
-    )), React9.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, "}"), !isReadOnly && removeItemButton);
+    )), React9.createElement("span", { className: "rejt-not-collapsed-delimiter" }, "}"), !isReadOnly && removeItemButton);
   }
   render() {
-    let { name, collapsed, keyPath, deep = 0 } = this.state, value2 = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
+    let { name, collapsed, keyPath, deep = 0 } = this.state, value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
     return React9.createElement(
       JsonNodeAccordion,
       {
@@ -2092,7 +2060,7 @@ var JsonObject = class extends Component {
         keyPath,
         onClick: this.handleCollapseMode
       },
-      value2
+      value
     );
   }
 };
@@ -2119,7 +2087,7 @@ var JsonValue = class extends Component {
     return props.value !== state.value ? { value: props.value } : null;
   }
   componentDidUpdate() {
-    let { editEnabled, inputRef, name, value: value2, keyPath, deep } = this.state, { readOnly, dataType } = this.props, isReadOnly = readOnly(name, value2, keyPath, deep, dataType);
+    let { editEnabled, inputRef, name, value, keyPath, deep } = this.state, { readOnly, dataType } = this.props, isReadOnly = readOnly(name, value, keyPath, deep, dataType);
     editEnabled && !isReadOnly && typeof inputRef.focus == "function" && inputRef.focus();
   }
   onKeydown(event) {
@@ -2127,7 +2095,7 @@ var JsonValue = class extends Component {
     event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat || inputRef !== event.target || ((event.code === "Enter" || event.key === "Enter") && (event.preventDefault(), this.handleEdit()), (event.code === "Escape" || event.key === "Escape") && (event.preventDefault(), this.handleCancelEdit()));
   }
   handleEdit() {
-    let { handleUpdateValue, originalValue, logger: logger4, onSubmitValueParser, keyPath } = this.props, { inputRef, name, deep } = this.state;
+    let { handleUpdateValue, originalValue, logger: logger5, onSubmitValueParser, keyPath } = this.props, { inputRef, name, deep } = this.state;
     if (!inputRef)
       return;
     let newValue = onSubmitValueParser(!0, keyPath, deep, name, inputRef.value), result = {
@@ -2136,7 +2104,7 @@ var JsonValue = class extends Component {
     };
     (handleUpdateValue || Promise.resolve.bind(Promise))(result).then(() => {
       isComponentWillChange(originalValue, newValue) || this.handleCancelEdit();
-    }).catch(logger4.error);
+    }).catch(logger5.error);
   }
   handleEditMode() {
     this.setState({
@@ -2152,16 +2120,15 @@ var JsonValue = class extends Component {
     });
   }
   render() {
-    let { name, value: value2, editEnabled, keyPath, deep } = this.state, {
+    let { name, value, editEnabled, keyPath, deep } = this.state, {
       handleRemove,
       originalValue,
       readOnly,
       dataType,
-      getStyle,
       inputElementGenerator,
       minusMenuElement,
       keyPath: comeFromKeyPath
-    } = this.props, style = getStyle(name, originalValue, keyPath, deep, dataType), isReadOnly = readOnly(name, originalValue, keyPath, deep, dataType), isEditing = editEnabled && !isReadOnly, inputElement = inputElementGenerator(
+    } = this.props, isReadOnly = readOnly(name, originalValue, keyPath, deep, dataType), isEditing = editEnabled && !isReadOnly, inputElement = inputElementGenerator(
       VALUE,
       comeFromKeyPath,
       deep,
@@ -2175,18 +2142,9 @@ var JsonValue = class extends Component {
     }), parentPropertyName = keyPath.at(-2), minusMenuLayout = minusMenuElement && cloneElement2(minusMenuElement, {
       onClick: handleRemove,
       className: "rejt-minus-menu",
-      style: style.minus,
       "aria-label": `remove the property '${String(name)}' with value '${String(originalValue)}'${String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ""}`
     });
-    return React9.createElement("li", { className: "rejt-value-node", style: style.li }, React9.createElement("span", { className: "rejt-name", style: style.name }, name, " : "), isEditing ? React9.createElement("span", { className: "rejt-edit-form", style: style.editForm }, inputElementLayout) : React9.createElement(
-      "span",
-      {
-        className: "rejt-value",
-        style: style.value,
-        onClick: isReadOnly ? void 0 : this.handleEditMode
-      },
-      String(value2)
-    ), !isReadOnly && !isEditing && minusMenuLayout);
+    return React9.createElement("li", { className: "rejt-value-node" }, React9.createElement("span", { className: "rejt-name" }, name, " : "), isEditing ? React9.createElement("span", { className: "rejt-edit-form" }, inputElementLayout) : React9.createElement("span", { className: "rejt-value", onClick: isReadOnly ? void 0 : this.handleEditMode }, String(value)), !isReadOnly && !isEditing && minusMenuLayout);
   }
 };
 JsonValue.defaultProps = {
@@ -2209,65 +2167,6 @@ function parse3(string) {
   return result;
 }
 
-// src/blocks/controls/react-editable-json-tree/utils/styles.ts
-var object = {
-  minus: {
-    color: "red"
-  },
-  plus: {
-    color: "green"
-  },
-  collapsed: {
-    color: "grey"
-  },
-  delimiter: {},
-  ul: {
-    padding: "0px",
-    margin: "0 0 0 25px",
-    listStyle: "none"
-  },
-  name: {
-    color: "#2287CD"
-  },
-  addForm: {}
-}, array = {
-  minus: {
-    color: "red"
-  },
-  plus: {
-    color: "green"
-  },
-  collapsed: {
-    color: "grey"
-  },
-  delimiter: {},
-  ul: {
-    padding: "0px",
-    margin: "0 0 0 25px",
-    listStyle: "none"
-  },
-  name: {
-    color: "#2287CD"
-  },
-  addForm: {}
-}, value = {
-  minus: {
-    color: "red"
-  },
-  editForm: {},
-  value: {
-    color: "#7bba3d"
-  },
-  li: {
-    minHeight: "22px",
-    lineHeight: "22px",
-    outline: "0px"
-  },
-  name: {
-    color: "#2287CD"
-  }
-};
-
 // src/blocks/controls/react-editable-json-tree/index.tsx
 var JsonTree = class extends Component2 {
   constructor(props) {
@@ -2293,7 +2192,6 @@ var JsonTree = class extends Component2 {
       isCollapsed,
       onDeltaUpdate,
       readOnly,
-      getStyle,
       addButtonElement,
       cancelButtonElement,
       inputElement,
@@ -2303,7 +2201,7 @@ var JsonTree = class extends Component2 {
       beforeRemoveAction,
       beforeAddAction,
       beforeUpdateAction,
-      logger: logger4,
+      logger: logger5,
       onSubmitValueParser,
       fallback = null
     } = this.props, dataType = getObjectType(data), readOnlyFunction = readOnly;
@@ -2322,7 +2220,6 @@ var JsonTree = class extends Component2 {
         onDeltaUpdate: onDeltaUpdate ?? (() => {
         }),
         readOnly: readOnlyFunction,
-        getStyle: getStyle ?? (() => ({})),
         addButtonElement,
         cancelButtonElement,
         inputElementGenerator: inputElementFunction,
@@ -2333,7 +2230,7 @@ var JsonTree = class extends Component2 {
         beforeRemoveAction,
         beforeAddAction,
         beforeUpdateAction,
-        logger: logger4 ?? {},
+        logger: logger5 ?? {},
         onSubmitValueParser: onSubmitValueParser ?? ((val) => val)
       }
     )) : fallback;
@@ -2342,17 +2239,6 @@ var JsonTree = class extends Component2 {
 JsonTree.defaultProps = {
   rootName: "root",
   isCollapsed: (keyPath, deep) => deep !== -1,
-  getStyle: (keyName, data, keyPath, deep, dataType) => {
-    switch (dataType) {
-      case "Object":
-      case "Error":
-        return object;
-      case "Array":
-        return array;
-      default:
-        return value;
-    }
-  },
   readOnly: () => !1,
   onFullyUpdate: () => {
   },
@@ -2374,7 +2260,9 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
   position: "relative",
   display: "flex",
   isolation: "isolate",
+  gap: 8,
   ".rejt-tree": {
+    flex: 1,
     marginLeft: "1rem",
     fontSize: "13px",
     listStyleType: "none"
@@ -2392,8 +2280,14 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
     alignItems: "center"
   },
   ".rejt-name": {
+    color: theme.color.secondary,
     lineHeight: "22px"
   },
+  ".rejt-not-collapsed-list": {
+    listStyle: "none",
+    margin: "0 0 0 1rem",
+    padding: 0
+  },
   ".rejt-not-collapsed-delimiter": {
     lineHeight: "22px"
   },
@@ -2409,6 +2303,9 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
   ".rejt-value-node:hover > .rejt-value": {
     background: theme.base === "light" ? theme.color.lighter : "hsl(0 0 100 / 0.02)",
     borderColor: theme.appBorderColor
+  },
+  ".rejt-collapsed-value": {
+    color: theme.color.defaultText
   }
 })), ButtonInline = styled8.button(({ theme, primary }) => ({
   border: 0,
@@ -2463,10 +2360,9 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
     border: `1px solid ${theme.color.secondary}`
   }
 })), RawButton = styled8(ToggleButton)({
-  position: "absolute",
-  zIndex: 2,
-  top: 2,
-  right: 2
+  alignSelf: "flex-start",
+  order: 2,
+  marginRight: -10
 }), RawInput = styled8(Form3.Textarea)(({ theme }) => ({
   flex: 1,
   padding: "7px 6px",
@@ -2490,23 +2386,8 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
   event.currentTarget.dispatchEvent(new globalWindow.KeyboardEvent("keydown", ENTER_EVENT));
 }, selectValue = (event) => {
   event.currentTarget.select();
-}, getCustomStyleFunction = (theme) => () => ({
-  name: {
-    color: theme.color.secondary
-  },
-  collapsed: {
-    color: theme.color.dark
-  },
-  ul: {
-    listStyle: "none",
-    margin: "0 0 0 1rem",
-    padding: 0
-  },
-  li: {
-    outline: 0
-  }
-}), ObjectControl = ({ name, value: value2, onChange, argType }) => {
-  let theme = useTheme(), data = useMemo(() => value2 && cloneDeep(value2), [value2]), hasData = data != null, [showRaw, setShowRaw] = useState4(!hasData), [parseError, setParseError] = useState4(null), readonly = !!argType?.table?.readonly, updateRaw = useCallback3(
+}, ObjectControl = ({ name, value, onChange, argType }) => {
+  let theme = useTheme(), data = useMemo(() => value && cloneDeep(value), [value]), hasData = data != null, [showRaw, setShowRaw] = useState4(!hasData), [parseError, setParseError] = useState4(null), readonly = !!argType?.table?.readonly, updateRaw = useCallback3(
     (raw) => {
       try {
         raw && onChange(JSON.parse(raw)), setParseError(null);
@@ -2517,7 +2398,7 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
     [onChange]
   ), [forceVisible, setForceVisible] = useState4(!1), onForceVisible = useCallback3(() => {
     onChange({}), setForceVisible(!0);
-  }, [setForceVisible]), htmlElRef = useRef3(null);
+  }, [onChange, setForceVisible]), htmlElRef = useRef3(null);
   useEffect4(() => {
     forceVisible && htmlElRef.current && htmlElRef.current.select();
   }, [forceVisible]);
@@ -2548,18 +2429,21 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
       valid: parseError ? "error" : void 0,
       readOnly: readonly
     }
-  ), isObjectOrArray = Array.isArray(value2) || typeof value2 == "object" && value2?.constructor === Object;
+  ), isObjectOrArray = Array.isArray(value) || typeof value == "object" && value?.constructor === Object;
   return React11.createElement(Wrapper4, null, isObjectOrArray && React11.createElement(
     RawButton,
     {
       disabled: readonly,
       pressed: showRaw,
-      ariaLabel: `Edit the ${name} properties in JSON format`,
+      ariaLabel: `Edit ${name} as JSON`,
       onClick: (e2) => {
         e2.preventDefault(), setShowRaw((isRaw) => !isRaw);
-      }
+      },
+      variant: "ghost",
+      padding: "small",
+      size: "small"
     },
-    "Edit JSON"
+    React11.createElement(EditIcon, null)
   ), showRaw ? rawJSONForm : React11.createElement(
     JsonTree,
     {
@@ -2571,7 +2455,6 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
       data,
       rootName: name,
       onFullyUpdate: onChange,
-      getStyle: getCustomStyleFunction(theme),
       cancelButtonElement: React11.createElement(ButtonInline, { type: "button" }, "Cancel"),
       addButtonElement: React11.createElement(ButtonInline, { type: "submit", primary: !0 }, "Save"),
       plusMenuElement: React11.createElement(ActionButton, { type: "button" }, React11.createElement(AddIcon, null)),
@@ -2586,14 +2469,14 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
 import React12, { useMemo as useMemo2 } from "react";
 import { styled as styled9 } from "storybook/theming";
 var RangeInput = styled9.input(
-  ({ theme, min, max, value: value2, disabled }) => {
+  ({ theme, min, max, value, disabled }) => {
     let trackBaseStyles = {
       background: theme.base === "light" ? `linear-gradient(to right, 
-          ${theme.color.green} 0%, ${theme.color.green} ${(value2 - min) / (max - min) * 100}%, 
-          ${curriedDarken$1(0.02, theme.input.background)} ${(value2 - min) / (max - min) * 100}%, 
+          ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
+          ${curriedDarken$1(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
           ${curriedDarken$1(0.02, theme.input.background)} 100%)` : `linear-gradient(to right, 
-          ${theme.color.green} 0%, ${theme.color.green} ${(value2 - min) / (max - min) * 100}%, 
-          ${curriedLighten$1(0.02, theme.input.background)} ${(value2 - min) / (max - min) * 100}%, 
+          ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
+          ${curriedLighten$1(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
           ${curriedLighten$1(0.02, theme.input.background)} 100%)`,
       borderRadius: 6,
       boxShadow: `${theme.base == "dark" ? "hsl(0 0 100 / 0.4)" : "hsl(0 0 0 / 0.44)"} 0 0 0 1px inset`,
@@ -2701,7 +2584,7 @@ function getNumberOfDecimalPlaces(number) {
 }
 var RangeControl = ({
   name,
-  value: value2,
+  value,
   onChange,
   min = 0,
   max = 100,
@@ -2712,7 +2595,7 @@ var RangeControl = ({
 }) => {
   let handleChange = (event) => {
     onChange(parse2(event.target.value));
-  }, hasValue = value2 !== void 0, numberOFDecimalsPlaces = useMemo2(() => getNumberOfDecimalPlaces(step), [step]), readonly = !!argType?.table?.readonly, controlId = getControlId(name);
+  }, hasValue = value !== void 0, numberOFDecimalsPlaces = useMemo2(() => getNumberOfDecimalPlaces(step), [step]), readonly = !!argType?.table?.readonly, controlId = getControlId(name);
   return React12.createElement(RangeWrapper, { readOnly: readonly }, React12.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React12.createElement(RangeLabel, null, min), React12.createElement(
     RangeInput,
     {
@@ -2726,9 +2609,9 @@ var RangeControl = ({
       step,
       onFocus,
       onBlur,
-      value: value2 ?? min
+      value: value ?? min
     }
-  ), React12.createElement(RangeCurrentAndMaxLabel, { numberOFDecimalsPlaces, max }, hasValue ? value2.toFixed(numberOFDecimalsPlaces) : "--", " / ", max));
+  ), React12.createElement(RangeCurrentAndMaxLabel, { numberOFDecimalsPlaces, max }, hasValue ? value.toFixed(numberOFDecimalsPlaces) : "--", " / ", max));
 };
 
 // src/blocks/controls/Text.tsx
@@ -2743,7 +2626,7 @@ var Wrapper5 = styled10.label({
   color: isMaxed ? "red" : void 0
 })), TextControl = ({
   name,
-  value: value2,
+  value,
   onChange,
   onFocus,
   onBlur,
@@ -2755,7 +2638,7 @@ var Wrapper5 = styled10.label({
   }, readonly = !!argType?.table?.readonly, [forceVisible, setForceVisible] = useState5(!1), onForceVisible = useCallback4(() => {
     onChange(""), setForceVisible(!0);
   }, [setForceVisible]);
-  if (value2 === void 0)
+  if (value === void 0)
     return React13.createElement(
       Button4,
       {
@@ -2768,7 +2651,7 @@ var Wrapper5 = styled10.label({
       },
       "Set string"
     );
-  let isValid = typeof value2 == "string";
+  let isValid = typeof value == "string";
   return React13.createElement(Wrapper5, null, React13.createElement(
     Form4.Textarea,
     {
@@ -2781,11 +2664,11 @@ var Wrapper5 = styled10.label({
       autoFocus: forceVisible,
       valid: isValid ? void 0 : "error",
       name,
-      value: isValid ? value2 : "",
+      value: isValid ? value : "",
       onFocus,
       onBlur
     }
-  ), maxLength && React13.createElement(MaxLength, { isMaxed: value2?.length === maxLength }, value2?.length ?? 0, " / ", maxLength));
+  ), maxLength && React13.createElement(MaxLength, { isMaxed: value?.length === maxLength }, value?.length ?? 0, " / ", maxLength));
 };
 
 // src/blocks/controls/Files.tsx
@@ -2804,7 +2687,7 @@ var FilesControl = ({
   onChange,
   name,
   accept = "image/*",
-  value: value2,
+  value,
   argType
 }) => {
   let inputElement = useRef4(null), readonly = argType?.control?.readOnly;
@@ -2812,11 +2695,11 @@ var FilesControl = ({
     if (!e2.target.files)
       return;
     let fileUrls = Array.from(e2.target.files).map((file) => URL.createObjectURL(file));
-    onChange(fileUrls), revokeOldUrls(value2 || []);
+    onChange(fileUrls), revokeOldUrls(value || []);
   }
   useEffect5(() => {
-    value2 == null && inputElement.current && (inputElement.current.value = "");
-  }, [value2, name]);
+    value == null && inputElement.current && (inputElement.current.value = "");
+  }, [value, name]);
   let controlId = getControlId(name);
   return React14.createElement(React14.Fragment, null, React14.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React14.createElement(
     FileInput,
@@ -3035,10 +2918,10 @@ var ITEMS_BEFORE_EXPANSION = 8, Summary = styled13.div(({ isExpanded }) => ({
 }), EmptyArg = () => React18.createElement("span", null, "-"), ArgText = ({ text, simple }) => React18.createElement(Text3, { simple }, text), getSummaryItems = (summary) => {
   if (!summary)
     return [summary];
-  let summaryItems = summary.split("|").map((value2) => value2.trim());
+  let summaryItems = summary.split("|").map((value) => value.trim());
   return uniq(summaryItems);
-}, renderSummaryItems = (summaryItems) => summaryItems.slice(0, ITEMS_BEFORE_EXPANSION).map((item) => React18.createElement(ArgText, { key: item, text: item === "" ? '""' : item })), renderExpandedItems = (summaryItems) => summaryItems.slice(ITEMS_BEFORE_EXPANSION).map((item) => React18.createElement(ArgText, { key: item, text: item === "" ? '""' : item })), ArgSummary = ({ value: value2, initialExpandedArgs }) => {
-  let { summary, detail } = value2, [isOpen, setIsOpen] = useState7(!1), [isExpanded, setIsExpanded] = useState7(initialExpandedArgs || !1);
+}, renderSummaryItems = (summaryItems) => summaryItems.slice(0, ITEMS_BEFORE_EXPANSION).map((item) => React18.createElement(ArgText, { key: item, text: item === "" ? '""' : item })), renderExpandedItems = (summaryItems) => summaryItems.slice(ITEMS_BEFORE_EXPANSION).map((item) => React18.createElement(ArgText, { key: item, text: item === "" ? '""' : item })), ArgSummary = ({ value, initialExpandedArgs }) => {
+  let { summary, detail } = value, [isOpen, setIsOpen] = useState7(!1), [isExpanded, setIsExpanded] = useState7(initialExpandedArgs || !1);
   if (summary == null)
     return null;
   let summaryAsString = typeof summary.toString == "function" ? summary.toString() : summary;
@@ -3062,7 +2945,7 @@ var ITEMS_BEFORE_EXPANSION = 8, Summary = styled13.div(({ isExpanded }) => ({
     },
     React18.createElement(Expandable, { className: "sbdocs-expandable" }, React18.createElement("span", null, summaryAsString), isOpen ? React18.createElement(ChevronUpIcon, null) : React18.createElement(ChevronDownIcon, null))
   );
-}, ArgValue = ({ value: value2, initialExpandedArgs }) => value2 == null ? React18.createElement(EmptyArg, null) : React18.createElement(ArgSummary, { value: value2, initialExpandedArgs });
+}, ArgValue = ({ value, initialExpandedArgs }) => value == null ? React18.createElement(EmptyArg, null) : React18.createElement(ArgSummary, { value, initialExpandedArgs });
 
 // src/blocks/components/ArgsTable/ArgRow.tsx
 var Name = styled14.span({ fontWeight: "bold" }), Required = styled14.span(({ theme }) => ({
@@ -3099,7 +2982,7 @@ var Name = styled14.span({ fontWeight: "bold" }), Required = styled14.span(({ th
   marginBottom: 12
 })), StyledTd = styled14.td(({ expandable }) => ({
   paddingLeft: expandable ? "40px !important" : "20px !important"
-})), toSummary = (value2) => value2 && { summary: typeof value2 == "string" ? value2 : value2.name }, ArgRow = (props) => {
+})), toSummary = (value) => value && { summary: typeof value == "string" ? value : value.name }, ArgRow = (props) => {
   let [isHovered, setIsHovered] = useState8(!1), { row, updateArgs, compact: compact2, expandable, initialExpandedArgs } = props, { name, description } = row, table = row.table || {}, type = table.type || toSummary(row.type), defaultValue = table.defaultValue || row.defaultValue, required = row.type?.required, hasDescription = description != null && description !== "";
   return React19.createElement("tr", { onMouseEnter: () => setIsHovered(!0), onMouseLeave: () => setIsHovered(!1) }, React19.createElement(StyledTd, { expandable: expandable ?? !1 }, React19.createElement(Name, null, name), required ? React19.createElement(Required, { title: "Required" }, "*") : null), compact2 ? null : React19.createElement("td", null, hasDescription && React19.createElement(Description, null, React19.createElement(index_modern_default, null, description)), table.jsDocTags != null ? React19.createElement(React19.Fragment, null, React19.createElement(TypeWithJsDoc, { hasDescription }, React19.createElement(ArgValue, { value: type, initialExpandedArgs })), React19.createElement(ArgJsDoc, { tags: table.jsDocTags })) : React19.createElement(Type, { hasDescription }, React19.createElement(ArgValue, { value: type, initialExpandedArgs }))), compact2 ? null : React19.createElement("td", null, React19.createElement(ArgValue, { value: defaultValue, initialExpandedArgs })), updateArgs ? React19.createElement("td", null, React19.createElement(ArgControl, { ...props, isHovered })) : null);
 };
@@ -3566,7 +3449,8 @@ var sortFns = {
 import React24 from "react";
 import { withReset } from "storybook/internal/components";
 import { styled as styled19 } from "storybook/theming";
-var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`, breakpoint = 600, Title = styled19.h1(withReset, ({ theme }) => ({
+var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`, breakpoint = 600, Title = styled19.h1(({ theme }) => ({
+  ...withReset({ theme }),
   color: theme.color.defaultText,
   fontSize: theme.typography.size.m3,
   fontWeight: theme.typography.weight.bold,
@@ -3576,7 +3460,8 @@ var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-uns
     lineHeight: "36px",
     marginBottom: "16px"
   }
-})), Subtitle = styled19.h2(withReset, ({ theme }) => ({
+})), Subtitle = styled19.h2(({ theme }) => ({
+  ...withReset({ theme }),
   fontWeight: theme.typography.weight.regular,
   fontSize: theme.typography.size.s3,
   lineHeight: "20px",
@@ -3633,7 +3518,10 @@ var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-uns
       fontSize: "inherit",
       lineHeight: "24px",
       color: theme.color.secondary,
-      textDecoration: "none",
+      // Ensure WCAG Level A compliance (SC 1.4.1), see https://www.w3.org/WAI/WCAG22/Techniques/failures/F73
+      textDecoration: "underline",
+      textDecorationThickness: "0.03125rem",
+      textUnderlineOffset: "0.11em",
       "&.absent": {
         color: "#cc0000"
       },
@@ -3645,7 +3533,11 @@ var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-uns
         position: "absolute",
         top: 0,
         left: 0,
-        bottom: 0
+        bottom: 0,
+        textDecoration: "none"
+      },
+      "&.anchor:hover, &.anchor:focus": {
+        textDecoration: "underline"
       }
     },
     [toGlobalSelector("blockquote")]: {
@@ -3947,8 +3839,324 @@ var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-uns
 })), DocsPageWrapper = ({ children, toc }) => React24.createElement(DocsWrapper, { className: "sbdocs sbdocs-wrapper" }, toc, React24.createElement(DocsContent, { className: "sbdocs sbdocs-content" }, children));
 
 // src/blocks/components/Preview.tsx
-import React29, { Children, useCallback as useCallback6, useContext as useContext2, useState as useState13 } from "react";
-import { ActionBar, Zoom } from "storybook/internal/components";
+import React30, { Children, useCallback as useCallback6, useContext as useContext2, useMemo as useMemo3, useState as useState13 } from "react";
+import { logger as logger4 } from "storybook/internal/client-logger";
+import { Bar, Button as Button7, ToggleButton as ToggleButton2, Zoom } from "storybook/internal/components";
+import { CopyIcon, MarkupIcon } from "@storybook/icons";
+
+// ../../../node_modules/@react-aria/utils/dist/useLayoutEffect.mjs
+import $HgANd$react from "react";
+var $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document < "u" ? $HgANd$react.useLayoutEffect : () => {
+};
+
+// ../../../node_modules/@react-aria/utils/dist/useValueEffect.mjs
+import { useState as $fCAlL$useState, useRef as $fCAlL$useRef, useCallback as $fCAlL$useCallback } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useId.mjs
+import { useState as $eKkEp$useState, useRef as $eKkEp$useRef, useEffect as $eKkEp$useEffect, useCallback as $eKkEp$useCallback } from "react";
+
+// ../../../node_modules/@react-aria/ssr/dist/SSRProvider.mjs
+import $670gB$react, { useContext as $670gB$useContext, useState as $670gB$useState, useMemo as $670gB$useMemo, useLayoutEffect as $670gB$useLayoutEffect, useRef as $670gB$useRef } from "react";
+var $b5e257d569688ac6$var$defaultContext = {
+  prefix: String(Math.round(Math.random() * 1e10)),
+  current: 0
+}, $b5e257d569688ac6$var$SSRContext = $670gB$react.createContext($b5e257d569688ac6$var$defaultContext), $b5e257d569688ac6$var$IsSSRContext = $670gB$react.createContext(!1);
+var $b5e257d569688ac6$var$canUseDOM = !!(typeof window < "u" && window.document && window.document.createElement), $b5e257d569688ac6$var$componentIds = /* @__PURE__ */ new WeakMap();
+function $b5e257d569688ac6$var$useCounter(isDisabled = !1) {
+  let ctx = $670gB$useContext($b5e257d569688ac6$var$SSRContext), ref = $670gB$useRef(null);
+  if (ref.current === null && !isDisabled) {
+    var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = $670gB$react.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 || (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
+    if (currentOwner) {
+      let prevComponentValue = $b5e257d569688ac6$var$componentIds.get(currentOwner);
+      prevComponentValue == null ? $b5e257d569688ac6$var$componentIds.set(currentOwner, {
+        id: ctx.current,
+        state: currentOwner.memoizedState
+      }) : currentOwner.memoizedState !== prevComponentValue.state && (ctx.current = prevComponentValue.id, $b5e257d569688ac6$var$componentIds.delete(currentOwner));
+    }
+    ref.current = ++ctx.current;
+  }
+  return ref.current;
+}
+function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId) {
+  let ctx = $670gB$useContext($b5e257d569688ac6$var$SSRContext);
+  ctx === $b5e257d569688ac6$var$defaultContext && !$b5e257d569688ac6$var$canUseDOM && process.env.NODE_ENV !== "production" && console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+  let counter = $b5e257d569688ac6$var$useCounter(!!defaultId), prefix = ctx === $b5e257d569688ac6$var$defaultContext && process.env.NODE_ENV === "test" ? "react-aria" : `react-aria${ctx.prefix}`;
+  return defaultId || `${prefix}-${counter}`;
+}
+function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId) {
+  let id = $670gB$react.useId(), [didSSR] = $670gB$useState($b5e257d569688ac6$export$535bd6ca7f90a273()), prefix = didSSR || process.env.NODE_ENV === "test" ? "react-aria" : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
+  return defaultId || `${prefix}-${id}`;
+}
+var $b5e257d569688ac6$export$619500959fc48b26 = typeof $670gB$react.useId == "function" ? $b5e257d569688ac6$var$useModernSSRSafeId : $b5e257d569688ac6$var$useLegacySSRSafeId;
+function $b5e257d569688ac6$var$getSnapshot() {
+  return !1;
+}
+function $b5e257d569688ac6$var$getServerSnapshot() {
+  return !0;
+}
+function $b5e257d569688ac6$var$subscribe(onStoreChange) {
+  return () => {
+  };
+}
+function $b5e257d569688ac6$export$535bd6ca7f90a273() {
+  return typeof $670gB$react.useSyncExternalStore == "function" ? $670gB$react.useSyncExternalStore($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot) : $670gB$useContext($b5e257d569688ac6$var$IsSSRContext);
+}
+
+// ../../../node_modules/@react-aria/utils/dist/useId.mjs
+var $bdb11010cef70236$var$canUseDOM = !!(typeof window < "u" && window.document && window.document.createElement), $bdb11010cef70236$export$d41a04c74483c6ef = /* @__PURE__ */ new Map(), $bdb11010cef70236$var$registry;
+typeof FinalizationRegistry < "u" && ($bdb11010cef70236$var$registry = new FinalizationRegistry((heldValue) => {
+  $bdb11010cef70236$export$d41a04c74483c6ef.delete(heldValue);
+}));
+function $bdb11010cef70236$export$f680877a34711e37(defaultId) {
+  let [value, setValue] = $eKkEp$useState(defaultId), nextId = $eKkEp$useRef(null), res = $b5e257d569688ac6$export$619500959fc48b26(value), cleanupRef = $eKkEp$useRef(null);
+  if ($bdb11010cef70236$var$registry && $bdb11010cef70236$var$registry.register(cleanupRef, res), $bdb11010cef70236$var$canUseDOM) {
+    let cacheIdRef = $bdb11010cef70236$export$d41a04c74483c6ef.get(res);
+    cacheIdRef && !cacheIdRef.includes(nextId) ? cacheIdRef.push(nextId) : $bdb11010cef70236$export$d41a04c74483c6ef.set(res, [
+      nextId
+    ]);
+  }
+  return $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    let r2 = res;
+    return () => {
+      $bdb11010cef70236$var$registry && $bdb11010cef70236$var$registry.unregister(cleanupRef), $bdb11010cef70236$export$d41a04c74483c6ef.delete(r2);
+    };
+  }, [
+    res
+  ]), $eKkEp$useEffect(() => {
+    let newId = nextId.current;
+    return newId && setValue(newId), () => {
+      newId && (nextId.current = null);
+    };
+  }), res;
+}
+
+// ../../../node_modules/@react-aria/utils/dist/focusWithoutScrolling.mjs
+function $7215afc6de606d6b$export$de79e2c695e052f3(element) {
+  if ($7215afc6de606d6b$var$supportsPreventScroll()) element.focus({
+    preventScroll: !0
+  });
+  else {
+    let scrollableElements = $7215afc6de606d6b$var$getScrollableElements(element);
+    element.focus(), $7215afc6de606d6b$var$restoreScrollPosition(scrollableElements);
+  }
+}
+var $7215afc6de606d6b$var$supportsPreventScrollCached = null;
+function $7215afc6de606d6b$var$supportsPreventScroll() {
+  if ($7215afc6de606d6b$var$supportsPreventScrollCached == null) {
+    $7215afc6de606d6b$var$supportsPreventScrollCached = !1;
+    try {
+      document.createElement("div").focus({
+        get preventScroll() {
+          return $7215afc6de606d6b$var$supportsPreventScrollCached = !0, !0;
+        }
+      });
+    } catch {
+    }
+  }
+  return $7215afc6de606d6b$var$supportsPreventScrollCached;
+}
+function $7215afc6de606d6b$var$getScrollableElements(element) {
+  let parent = element.parentNode, scrollableElements = [], rootScrollingElement = document.scrollingElement || document.documentElement;
+  for (; parent instanceof HTMLElement && parent !== rootScrollingElement; )
+    (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) && scrollableElements.push({
+      element: parent,
+      scrollTop: parent.scrollTop,
+      scrollLeft: parent.scrollLeft
+    }), parent = parent.parentNode;
+  return rootScrollingElement instanceof HTMLElement && scrollableElements.push({
+    element: rootScrollingElement,
+    scrollTop: rootScrollingElement.scrollTop,
+    scrollLeft: rootScrollingElement.scrollLeft
+  }), scrollableElements;
+}
+function $7215afc6de606d6b$var$restoreScrollPosition(scrollableElements) {
+  for (let { element, scrollTop, scrollLeft } of scrollableElements)
+    element.scrollTop = scrollTop, element.scrollLeft = scrollLeft;
+}
+
+// ../../../node_modules/@react-aria/utils/dist/platform.mjs
+function $c87311424ea30a05$var$testUserAgent(re2) {
+  var _window_navigator_userAgentData;
+  if (typeof window > "u" || window.navigator == null) return !1;
+  let brands = (_window_navigator_userAgentData = window.navigator.userAgentData) === null || _window_navigator_userAgentData === void 0 ? void 0 : _window_navigator_userAgentData.brands;
+  return Array.isArray(brands) && brands.some((brand) => re2.test(brand.brand)) || re2.test(window.navigator.userAgent);
+}
+function $c87311424ea30a05$var$testPlatform(re2) {
+  var _window_navigator_userAgentData;
+  return typeof window < "u" && window.navigator != null ? re2.test(((_window_navigator_userAgentData = window.navigator.userAgentData) === null || _window_navigator_userAgentData === void 0 ? void 0 : _window_navigator_userAgentData.platform) || window.navigator.platform) : !1;
+}
+function $c87311424ea30a05$var$cached(fn) {
+  if (process.env.NODE_ENV === "test") return fn;
+  let res = null;
+  return () => (res == null && (res = fn()), res);
+}
+var $c87311424ea30a05$export$9ac100e40613ea10 = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$var$testPlatform(/^Mac/i);
+}), $c87311424ea30a05$export$186c6964ca17d99 = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$var$testPlatform(/^iPhone/i);
+}), $c87311424ea30a05$export$7bef049ce92e4224 = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$var$testPlatform(/^iPad/i) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  $c87311424ea30a05$export$9ac100e40613ea10() && navigator.maxTouchPoints > 1;
+}), $c87311424ea30a05$export$fedb369cb70207f1 = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$export$186c6964ca17d99() || $c87311424ea30a05$export$7bef049ce92e4224();
+}), $c87311424ea30a05$export$e1865c3bedcd822b = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$export$9ac100e40613ea10() || $c87311424ea30a05$export$fedb369cb70207f1();
+}), $c87311424ea30a05$export$78551043582a6a98 = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$var$testUserAgent(/AppleWebKit/i) && !$c87311424ea30a05$export$6446a186d09e379e();
+}), $c87311424ea30a05$export$6446a186d09e379e = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$var$testUserAgent(/Chrome/i);
+}), $c87311424ea30a05$export$a11b0059900ceec8 = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$var$testUserAgent(/Android/i);
+}), $c87311424ea30a05$export$b7d78993b74f766d = $c87311424ea30a05$var$cached(function() {
+  return $c87311424ea30a05$var$testUserAgent(/Firefox/i);
+});
+
+// ../../../node_modules/@react-aria/utils/dist/openLink.mjs
+import $g3jFn$react, { createContext as $g3jFn$createContext, useMemo as $g3jFn$useMemo, useContext as $g3jFn$useContext } from "react";
+var $ea8dcbcb9ea1b556$var$RouterContext = $g3jFn$createContext({
+  isNative: !0,
+  open: $ea8dcbcb9ea1b556$var$openSyntheticLink,
+  useHref: (href) => href
+});
+function $ea8dcbcb9ea1b556$export$95185d699e05d4d7(target, modifiers, setOpening = !0) {
+  var _window_event_type, _window_event;
+  let { metaKey, ctrlKey, altKey, shiftKey } = modifiers;
+  $c87311424ea30a05$export$b7d78993b74f766d() && (!((_window_event = window.event) === null || _window_event === void 0 || (_window_event_type = _window_event.type) === null || _window_event_type === void 0) && _window_event_type.startsWith("key")) && target.target === "_blank" && ($c87311424ea30a05$export$9ac100e40613ea10() ? metaKey = !0 : ctrlKey = !0);
+  let event = $c87311424ea30a05$export$78551043582a6a98() && $c87311424ea30a05$export$9ac100e40613ea10() && !$c87311424ea30a05$export$7bef049ce92e4224() && process.env.NODE_ENV !== "test" ? new KeyboardEvent("keydown", {
+    keyIdentifier: "Enter",
+    metaKey,
+    ctrlKey,
+    altKey,
+    shiftKey
+  }) : new MouseEvent("click", {
+    metaKey,
+    ctrlKey,
+    altKey,
+    shiftKey,
+    detail: 1,
+    bubbles: !0,
+    cancelable: !0
+  });
+  $ea8dcbcb9ea1b556$export$95185d699e05d4d7.isOpening = setOpening, $7215afc6de606d6b$export$de79e2c695e052f3(target), target.dispatchEvent(event), $ea8dcbcb9ea1b556$export$95185d699e05d4d7.isOpening = !1;
+}
+$ea8dcbcb9ea1b556$export$95185d699e05d4d7.isOpening = !1;
+function $ea8dcbcb9ea1b556$var$getSyntheticLink(target, open) {
+  if (target instanceof HTMLAnchorElement) open(target);
+  else if (target.hasAttribute("data-href")) {
+    let link = document.createElement("a");
+    link.href = target.getAttribute("data-href"), target.hasAttribute("data-target") && (link.target = target.getAttribute("data-target")), target.hasAttribute("data-rel") && (link.rel = target.getAttribute("data-rel")), target.hasAttribute("data-download") && (link.download = target.getAttribute("data-download")), target.hasAttribute("data-ping") && (link.ping = target.getAttribute("data-ping")), target.hasAttribute("data-referrer-policy") && (link.referrerPolicy = target.getAttribute("data-referrer-policy")), target.appendChild(link), open(link), target.removeChild(link);
+  }
+}
+function $ea8dcbcb9ea1b556$var$openSyntheticLink(target, modifiers) {
+  $ea8dcbcb9ea1b556$var$getSyntheticLink(target, (link) => $ea8dcbcb9ea1b556$export$95185d699e05d4d7(link, modifiers));
+}
+
+// ../../../node_modules/@react-aria/utils/dist/runAfterTransition.mjs
+var $bbed8b41f857bcc0$var$transitionsByElement = /* @__PURE__ */ new Map(), $bbed8b41f857bcc0$var$transitionCallbacks = /* @__PURE__ */ new Set();
+function $bbed8b41f857bcc0$var$setupGlobalEvents() {
+  if (typeof window > "u") return;
+  function isTransitionEvent(event) {
+    return "propertyName" in event;
+  }
+  let onTransitionStart = (e2) => {
+    if (!isTransitionEvent(e2) || !e2.target) return;
+    let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e2.target);
+    transitions || (transitions = /* @__PURE__ */ new Set(), $bbed8b41f857bcc0$var$transitionsByElement.set(e2.target, transitions), e2.target.addEventListener("transitioncancel", onTransitionEnd, {
+      once: !0
+    })), transitions.add(e2.propertyName);
+  }, onTransitionEnd = (e2) => {
+    if (!isTransitionEvent(e2) || !e2.target) return;
+    let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e2.target);
+    if (properties && (properties.delete(e2.propertyName), properties.size === 0 && (e2.target.removeEventListener("transitioncancel", onTransitionEnd), $bbed8b41f857bcc0$var$transitionsByElement.delete(e2.target)), $bbed8b41f857bcc0$var$transitionsByElement.size === 0)) {
+      for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks) cb();
+      $bbed8b41f857bcc0$var$transitionCallbacks.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", onTransitionStart), document.body.addEventListener("transitionend", onTransitionEnd);
+}
+typeof document < "u" && (document.readyState !== "loading" ? $bbed8b41f857bcc0$var$setupGlobalEvents() : document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents));
+
+// ../../../node_modules/@react-aria/utils/dist/useDrag1D.mjs
+import { useRef as $1rnCS$useRef } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useGlobalListeners.mjs
+import { useRef as $lPAwt$useRef, useCallback as $lPAwt$useCallback, useEffect as $lPAwt$useEffect } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useObjectRef.mjs
+import { useRef as $gbmns$useRef, useCallback as $gbmns$useCallback, useMemo as $gbmns$useMemo } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useEffectEvent.mjs
+import $lmaYr$react, { useRef as $lmaYr$useRef, useCallback as $lmaYr$useCallback } from "react";
+var $8ae05eaa5c114e9c$var$_React_useInsertionEffect, $8ae05eaa5c114e9c$var$useEarlyEffect = ($8ae05eaa5c114e9c$var$_React_useInsertionEffect = $lmaYr$react.useInsertionEffect) !== null && $8ae05eaa5c114e9c$var$_React_useInsertionEffect !== void 0 ? $8ae05eaa5c114e9c$var$_React_useInsertionEffect : $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c;
+
+// ../../../node_modules/@react-aria/utils/dist/useUpdateEffect.mjs
+import { useRef as $9vW05$useRef, useEffect as $9vW05$useEffect } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useUpdateLayoutEffect.mjs
+import { useRef as $azsE2$useRef } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useResizeObserver.mjs
+import { useEffect as $Vsl8o$useEffect } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useViewportSize.mjs
+import { useState as $fuDHA$useState, useEffect as $fuDHA$useEffect } from "react";
+var $5df64b3807dc15ee$var$visualViewport = typeof document < "u" && window.visualViewport;
+
+// ../../../node_modules/@react-aria/utils/dist/useDescription.mjs
+import { useState as $hQ5Hp$useState } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useEvent.mjs
+import { useEffect as $ceQd6$useEffect } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useDeepMemo.mjs
+import { useRef as $jtQ6z$useRef } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useFormReset.mjs
+import { useEffect as $8rM3G$useEffect } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useLoadMore.mjs
+import { useRef as $hDRkU$useRef, useCallback as $hDRkU$useCallback } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/useLoadMoreSentinel.mjs
+import { useRef as $7FoZl$useRef } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/inertValue.mjs
+import { version as $iulvE$version } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/animation.mjs
+import { flushSync as $jJMAe$flushSync } from "react-dom";
+import { useState as $jJMAe$useState, useCallback as $jJMAe$useCallback } from "react";
+
+// ../../../node_modules/@react-aria/utils/dist/isElementVisible.mjs
+var $7d2416ea0959daaa$var$supportsCheckVisibility = typeof Element < "u" && "checkVisibility" in Element.prototype;
+
+// ../../../node_modules/@react-aria/utils/dist/isFocusable.mjs
+var $b4b717babfbb907b$var$focusableElements = [
+  "input:not([disabled]):not([type=hidden])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "a[href]",
+  "area[href]",
+  "summary",
+  "iframe",
+  "object",
+  "embed",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable^="false"])',
+  "permission"
+], $b4b717babfbb907b$var$FOCUSABLE_ELEMENT_SELECTOR = $b4b717babfbb907b$var$focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
+$b4b717babfbb907b$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
+var $b4b717babfbb907b$var$TABBABLE_ELEMENT_SELECTOR = $b4b717babfbb907b$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
+
+// ../../../node_modules/@react-stately/utils/dist/useControlledState.mjs
+import $3whtM$react, { useState as $3whtM$useState, useRef as $3whtM$useRef, useEffect as $3whtM$useEffect, useReducer as $3whtM$useReducer, useCallback as $3whtM$useCallback } from "react";
+var $458b0a5536c1a7cf$var$_React_useInsertionEffect, $458b0a5536c1a7cf$var$useEarlyEffect = typeof document < "u" ? ($458b0a5536c1a7cf$var$_React_useInsertionEffect = $3whtM$react.useInsertionEffect) !== null && $458b0a5536c1a7cf$var$_React_useInsertionEffect !== void 0 ? $458b0a5536c1a7cf$var$_React_useInsertionEffect : $3whtM$react.useLayoutEffect : () => {
+};
+
+// src/blocks/components/Preview.tsx
 import { styled as styled22 } from "storybook/theming";
 
 // src/blocks/blocks/DocsContext.ts
@@ -3957,7 +4165,7 @@ globalThis && globalThis.__DOCS_CONTEXT__ === void 0 && (globalThis.__DOCS_CONTE
 var DocsContext = globalThis ? globalThis.__DOCS_CONTEXT__ : createContext(null);
 
 // src/blocks/blocks/Story.tsx
-import React25, { useContext } from "react";
+import React26, { useContext } from "react";
 
 // src/blocks/blocks/useStory.ts
 import { useEffect as useEffect8, useState as useState11 } from "react";
@@ -3987,6 +4195,23 @@ function useStories(storyIds, context) {
   });
 }
 
+// src/blocks/blocks/with-mdx-component-override.tsx
+import React25 from "react";
+import { useMDXComponents } from "@mdx-js/react";
+var MDX_WRAPPED_BLOCK = Symbol("mdxWrappedBlock"), MdxWrappedBlockContext = React25.createContext(null), withMdxComponentOverride = (blockName, Block) => {
+  let WrappedBlock = (props) => {
+    let wrappedBlocks = React25.useContext(MdxWrappedBlockContext), Override = useMDXComponents()[blockName];
+    if (wrappedBlocks?.has(blockName) || Override === WrappedBlock)
+      return React25.createElement(Block, { ...props });
+    if (Override) {
+      let nextWrappedBlocks = new Set(wrappedBlocks ?? []);
+      return nextWrappedBlocks.add(blockName), React25.createElement(MdxWrappedBlockContext.Provider, { value: nextWrappedBlocks }, React25.createElement(Override, { ...props }));
+    }
+    return React25.createElement(Block, { ...props });
+  };
+  return WrappedBlock.displayName = blockName, WrappedBlock[MDX_WRAPPED_BLOCK] = !0, WrappedBlock;
+};
+
 // src/blocks/blocks/Story.tsx
 var getStoryId = (props, context) => {
   let { of, meta } = props;
@@ -4016,13 +4241,13 @@ var getStoryId = (props, context) => {
     height,
     primary: !!props.__primary
   };
-}, Story2 = (props = { __forceInitialArgs: !1, __primary: !1 }) => {
+}, StoryImpl = (props = { __forceInitialArgs: !1, __primary: !1 }) => {
   let context = useContext(DocsContext), storyId = getStoryId(props, context), story = useStory(storyId, context);
   if (!story)
-    return React25.createElement(StorySkeleton, null);
+    return React26.createElement(StorySkeleton, null);
   let storyProps = getStoryProps(props, story, context);
-  return storyProps ? React25.createElement(Story, { ...storyProps }) : null;
-};
+  return storyProps ? React26.createElement(Story, { ...storyProps }) : null;
+}, Story2 = withMdxComponentOverride("Story", StoryImpl);
 
 // src/blocks/components/BlockBackgroundStyles.tsx
 var getBlockBackgroundStyle = (theme) => ({
@@ -4033,20 +4258,20 @@ var getBlockBackgroundStyle = (theme) => ({
 });
 
 // src/blocks/components/Story.tsx
-import React27, { useEffect as useEffect9, useRef as useRef5, useState as useState12 } from "react";
+import React28, { useEffect as useEffect9, useRef as useRef5, useState as useState12 } from "react";
 import { ErrorFormatter, Loader } from "storybook/internal/components";
 import { styled as styled20 } from "storybook/theming";
 
 // src/blocks/getStoryHref.ts
 var getStoryHref = (storyId, additionalParams = {}) => {
   let baseUrl = globalThis.PREVIEW_URL || "iframe.html", [url, paramsStr] = baseUrl.split("?"), params = new URLSearchParams(paramsStr || "");
-  return Object.entries(additionalParams).forEach(([key, value2]) => {
-    params.set(key, value2);
+  return Object.entries(additionalParams).forEach(([key, value]) => {
+    params.set(key, value);
   }), params.set("id", storyId), `${url}?${params.toString()}`;
 };
 
 // src/blocks/components/IFrame.tsx
-import React26, { Component as Component3 } from "react";
+import React27, { Component as Component3 } from "react";
 var { window: globalWindow2 } = globalThis, IFrame = class extends Component3 {
   constructor() {
     super(...arguments);
@@ -4070,7 +4295,7 @@ var { window: globalWindow2 } = globalThis, IFrame = class extends Component3 {
   }
   render() {
     let { id, title, src, allowFullScreen, scale, ...rest } = this.props;
-    return React26.createElement(
+    return React27.createElement(
       "iframe",
       {
         id,
@@ -4111,10 +4336,10 @@ var storyBlockIdFromId = ({ story, primary }) => `story--${story.id}${primary ?
     return setShowLoader(!1), () => {
       Promise.resolve().then(() => cleanup());
     };
-  }, [autoplay, renderStoryToElement, story]), error ? React27.createElement("pre", null, React27.createElement(ErrorFormatter, { error })) : React27.createElement(React27.Fragment, null, height ? React27.createElement("style", null, `#${storyBlockIdFromId(
+  }, [autoplay, renderStoryToElement, story]), error ? React28.createElement("pre", null, React28.createElement(ErrorFormatter, { error })) : React28.createElement(React28.Fragment, null, height ? React28.createElement("style", null, `#${storyBlockIdFromId(
     props
-  )} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && React27.createElement(StorySkeleton, null), React27.createElement("div", { ref: storyRef, id: `${storyBlockIdFromId(props)}-inner`, "data-name": story.name }));
-}, IFrameStory = ({ story, height = "500px" }) => React27.createElement("div", { style: { width: "100%", height } }, React27.createElement(ZoomContext.Consumer, null, ({ scale }) => React27.createElement(
+  )} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && React28.createElement(StorySkeleton, null), React28.createElement("div", { ref: storyRef, id: `${storyBlockIdFromId(props)}-inner`, "data-name": story.name }));
+}, IFrameStory = ({ story, height = "500px" }) => React28.createElement("div", { style: { width: "100%", height } }, React28.createElement(ZoomContext.Consumer, null, ({ scale }) => React28.createElement(
   IFrame,
   {
     key: "iframe",
@@ -4133,11 +4358,11 @@ var storyBlockIdFromId = ({ story, primary }) => `story--${story.id}${primary ?
   color: theme.color.orange
 })), Story = (props) => {
   let { inline, story } = props;
-  return inline && !props.autoplay && story.usesMount ? React27.createElement(ErrorMessage, null, "This story mounts inside of play. Set", " ", React27.createElement("a", { href: "https://storybook.js.org/docs/api/doc-blocks/doc-block-story?ref=ui#autoplay" }, "autoplay"), " ", "to true to view this story.") : React27.createElement("div", { id: storyBlockIdFromId(props), className: "sb-story sb-unstyled", "data-story-block": "true" }, inline ? React27.createElement(InlineStory, { ...props }) : React27.createElement(IFrameStory, { ...props }));
-}, StorySkeleton = () => React27.createElement(Loader, null);
+  return inline && !props.autoplay && story.usesMount ? React28.createElement(ErrorMessage, null, "This story mounts inside of play. Set", " ", React28.createElement("a", { href: "https://storybook.js.org/docs/api/doc-blocks/doc-block-story?ref=ui#autoplay" }, "autoplay"), " ", "to true to view this story.") : React28.createElement("div", { id: storyBlockIdFromId(props), className: "sb-story sb-unstyled", "data-story-block": "true" }, inline ? React28.createElement(InlineStory, { ...props }) : React28.createElement(IFrameStory, { ...props }));
+}, StorySkeleton = () => React28.createElement(Loader, null);
 
 // src/blocks/components/Toolbar.tsx
-import React28 from "react";
+import React29 from "react";
 import { Button as Button6, Toolbar as SharedToolbar } from "storybook/internal/components";
 import { ShareAltIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon } from "@storybook/icons";
 import { styled as styled21 } from "storybook/theming";
@@ -4160,7 +4385,7 @@ var AbsoluteBar = styled21(SharedToolbar)({
   margin: "0 7px",
   backgroundColor: theme.appBorderColor,
   animation: `${theme.animation.glow} 1.5s ease-in-out infinite`
-})), Toolbar = ({ isLoading, storyId, zoom, resetZoom, ...rest }) => React28.createElement(AbsoluteBar, { innerStyle: { gap: 4, paddingInline: 7, justifyContent: "space-between" }, ...rest }, React28.createElement(Wrapper7, { key: "left" }, isLoading ? [1, 2, 3].map((key) => React28.createElement(IconPlaceholder, { key })) : React28.createElement(React28.Fragment, null, React28.createElement(
+})), Toolbar = ({ isLoading, storyId, zoom, resetZoom, ...rest }) => React29.createElement(AbsoluteBar, { innerStyle: { gap: 4, paddingInline: 7, justifyContent: "space-between" }, ...rest }, React29.createElement(Wrapper7, { key: "left" }, isLoading ? [1, 2, 3].map((key) => React29.createElement(IconPlaceholder, { key })) : React29.createElement(React29.Fragment, null, React29.createElement(
   Button6,
   {
     padding: "small",
@@ -4171,8 +4396,8 @@ var AbsoluteBar = styled21(SharedToolbar)({
     },
     ariaLabel: "Zoom in"
   },
-  React28.createElement(ZoomIcon, null)
-), React28.createElement(
+  React29.createElement(ZoomIcon, null)
+), React29.createElement(
   Button6,
   {
     padding: "small",
@@ -4183,8 +4408,8 @@ var AbsoluteBar = styled21(SharedToolbar)({
     },
     ariaLabel: "Zoom out"
   },
-  React28.createElement(ZoomOutIcon, null)
-), React28.createElement(
+  React29.createElement(ZoomOutIcon, null)
+), React29.createElement(
   Button6,
   {
     padding: "small",
@@ -4195,8 +4420,8 @@ var AbsoluteBar = styled21(SharedToolbar)({
     },
     ariaLabel: "Reset zoom"
   },
-  React28.createElement(ZoomResetIcon, null)
-))), isLoading ? React28.createElement(Wrapper7, { key: "right" }, React28.createElement(IconPlaceholder, null)) : storyId && React28.createElement(Wrapper7, { key: "right" }, React28.createElement(
+  React29.createElement(ZoomResetIcon, null)
+))), isLoading ? React29.createElement(Wrapper7, { key: "right" }, React29.createElement(IconPlaceholder, null)) : storyId && React29.createElement(Wrapper7, { key: "right" }, React29.createElement(
   Button6,
   {
     asChild: !0,
@@ -4205,7 +4430,7 @@ var AbsoluteBar = styled21(SharedToolbar)({
     key: "opener",
     ariaLabel: "Open canvas in new tab"
   },
-  React28.createElement("a", { href: getStoryHref(storyId), target: "_blank", rel: "noopener noreferrer" }, React28.createElement(ShareAltIcon, null))
+  React29.createElement("a", { href: getStoryHref(storyId), target: "_blank", rel: "noopener noreferrer" }, React29.createElement(ShareAltIcon, null))
 )));
 
 // src/blocks/components/Preview.tsx
@@ -4239,7 +4464,10 @@ var ChildrenContainer = styled22.div(
     alignItems: "center"
   } : {},
   ({ columns }) => columns && columns > 1 ? { ".innerZoomElementWrapper > *": { minWidth: `calc(100% / ${columns} - 20px)` } } : {}
-), StyledSource = styled22(Source)(({ theme }) => ({
+), ActionBar = styled22(Bar)({
+  marginTop: -40,
+  marginBottom: 40
+}), StyledSource = styled22(Source)(({ theme }) => ({
   margin: 0,
   borderTopLeftRadius: 0,
   borderTopRightRadius: 0,
@@ -4252,51 +4480,17 @@ var ChildrenContainer = styled22.div(
     background: theme.base === "light" ? "rgba(0, 0, 0, 0.85)" : curriedDarken$1(0.05, theme.background.content)
   }
 })), PreviewContainer = styled22.div(
-  ({ theme, withSource, isExpanded }) => ({
+  ({ theme }) => ({
     position: "relative",
     overflow: "hidden",
     margin: "25px 0 40px",
     ...getBlockBackgroundStyle(theme),
-    borderBottomLeftRadius: withSource && isExpanded && 0,
-    borderBottomRightRadius: withSource && isExpanded && 0,
-    borderBottomWidth: isExpanded && 0,
     "h3 + &": {
       marginTop: "16px"
     }
   }),
   ({ withToolbar }) => withToolbar && { paddingTop: 40 }
-), getSource = (withSource, expanded, setExpanded) => {
-  switch (!0) {
-    case !!(withSource && withSource.error):
-      return {
-        source: null,
-        actionItem: {
-          title: "No code available",
-          className: "docblock-code-toggle docblock-code-toggle--disabled",
-          disabled: !0,
-          onClick: () => setExpanded(!1)
-        }
-      };
-    case expanded:
-      return {
-        source: React29.createElement(StyledSource, { ...withSource, dark: !0 }),
-        actionItem: {
-          title: "Hide code",
-          className: "docblock-code-toggle docblock-code-toggle--expanded",
-          onClick: () => setExpanded(!1)
-        }
-      };
-    default:
-      return {
-        source: React29.createElement(StyledSource, { ...withSource, dark: !0 }),
-        actionItem: {
-          title: "Show code",
-          className: "docblock-code-toggle",
-          onClick: () => setExpanded(!0)
-        }
-      };
-  }
-};
+);
 function getChildProps(children) {
   if (Children.count(children) === 1) {
     let elt = children;
@@ -4311,10 +4505,7 @@ var PositionedToolbar = styled22(Toolbar)({
   left: 0,
   right: 0,
   height: 40
-}), Relative = styled22.div({
-  overflow: "hidden",
-  position: "relative"
-}), Preview = ({
+}), COPIED_LABEL_ANIMATION_DURATION = 2e3, Preview = ({
   isLoading,
   isColumn,
   columns,
@@ -4328,30 +4519,21 @@ var PositionedToolbar = styled22(Toolbar)({
   inline = !1,
   ...props
 }) => {
-  let [expanded, setExpanded] = useState13(isExpanded), { source, actionItem } = getSource(withSource, expanded, setExpanded), [scale, setScale] = useState13(1), previewClasses = [className].concat(["sbdocs", "sbdocs-preview", "sb-unstyled"]), defaultActionItems = withSource ? [actionItem] : [], [additionalActionItems, setAdditionalActionItems] = useState13(
-    additionalActions ? [...additionalActions] : []
-  ), actionItems = [...defaultActionItems, ...additionalActionItems], { window: globalWindow4 } = globalThis, context = useContext2(DocsContext), copyToClipboard = useCallback6(async (text) => {
+  let [expanded, setExpanded] = useState13(isExpanded), [copied, setCopied] = useState13(null), [scale, setScale] = useState13(1), additionalActionItems = useMemo3(
+    () => additionalActions ? [...additionalActions] : [],
+    [additionalActions]
+  ), sourceId = $bdb11010cef70236$export$f680877a34711e37(), previewClasses = [className].concat(["sbdocs", "sbdocs-preview", "sb-unstyled"]), context = useContext2(DocsContext), copyToClipboard = useCallback6(async (text) => {
     let { createCopyToClipboardFunction } = await import("storybook/internal/components");
-    createCopyToClipboardFunction();
-  }, []), onCopyCapture = (e2) => {
-    let selection = globalWindow4.getSelection();
-    selection && selection.type === "Range" || (e2.preventDefault(), additionalActionItems.filter((item) => item.title === "Copied").length === 0 && copyToClipboard(source?.props.code ?? "").then(() => {
-      setAdditionalActionItems([
-        ...additionalActionItems,
-        {
-          title: "Copied",
-          onClick: () => {
-          }
-        }
-      ]), globalWindow4.setTimeout(
-        () => setAdditionalActionItems(
-          additionalActionItems.filter((item) => item.title !== "Copied")
-        ),
-        1500
-      );
-    }));
-  }, childProps = getChildProps(children);
-  return React29.createElement(
+    await createCopyToClipboardFunction()(text);
+  }, []), handleCopyCode = useCallback6(async () => {
+    try {
+      await copyToClipboard(withSource?.code ?? ""), setCopied("Copied!");
+    } catch (err) {
+      logger4.error(err), setCopied("Copy error!");
+    }
+    globalThis.window.setTimeout(() => setCopied(null), COPIED_LABEL_ANIMATION_DURATION);
+  }, [copyToClipboard, withSource?.code]), childProps = getChildProps(children), hasSourceError = !!(withSource && withSource.error), hasValidSource = !!(withSource && !withSource.error);
+  return React30.createElement(React30.Fragment, null, React30.createElement(
     PreviewContainer,
     {
       withSource,
@@ -4359,7 +4541,7 @@ var PositionedToolbar = styled22(Toolbar)({
       ...props,
       className: previewClasses.join(" ")
     },
-    withToolbar && React29.createElement(
+    withToolbar && React30.createElement(
       PositionedToolbar,
       {
         isLoading,
@@ -4369,18 +4551,53 @@ var PositionedToolbar = styled22(Toolbar)({
         storyId: !isLoading && childProps ? getStoryId(childProps, context) : void 0
       }
     ),
-    React29.createElement(ZoomContext.Provider, { value: { scale } }, React29.createElement(Relative, { className: "docs-story", onCopyCapture: withSource && onCopyCapture }, React29.createElement(
+    React30.createElement(ZoomContext.Provider, { value: { scale } }, React30.createElement(
       ChildrenContainer,
       {
         isColumn: isColumn || !Array.isArray(children),
         columns,
         layout,
-        inline
+        inline,
+        className: "docs-story"
       },
-      React29.createElement(Zoom.Element, { centered: layout === "centered", scale: inline ? scale : 1 }, Array.isArray(children) ? children.map((child, i2) => React29.createElement("div", { key: i2 }, child)) : React29.createElement("div", null, children))
-    ), React29.createElement(ActionBar, { actionItems }))),
-    withSource && expanded && source
-  );
+      React30.createElement(Zoom.Element, { centered: layout === "centered", scale: inline ? scale : 1 }, Array.isArray(children) ? children.map((child, i2) => React30.createElement("div", { key: i2 }, child)) : React30.createElement("div", null, children))
+    )),
+    hasValidSource && expanded && React30.createElement("div", { id: sourceId }, React30.createElement(StyledSource, { ...withSource, dark: !0, copyable: !1 }))
+  ), (withSource || additionalActionItems.length > 0) && React30.createElement(ActionBar, { className: "sbdocs sbdocs-preview-actions", innerStyle: { paddingInline: 0 } }, hasSourceError && React30.createElement(
+    Button7,
+    {
+      ariaLabel: !1,
+      disabled: !0,
+      variant: "ghost",
+      className: "docblock-code-toggle docblock-code-toggle--disabled"
+    },
+    React30.createElement(MarkupIcon, null),
+    " No code available"
+  ), hasValidSource && React30.createElement(React30.Fragment, null, React30.createElement(
+    ToggleButton2,
+    {
+      ariaLabel: !1,
+      pressed: expanded,
+      "aria-expanded": expanded,
+      "aria-controls": sourceId,
+      onClick: () => setExpanded(!expanded),
+      variant: "ghost",
+      className: `docblock-code-toggle${expanded ? " docblock-code-toggle--expanded" : ""}`
+    },
+    React30.createElement(MarkupIcon, null),
+    " ",
+    expanded ? "Hide code" : "Show code"
+  ), React30.createElement(Button7, { ariaLabel: !1, variant: "ghost", onClick: handleCopyCode }, React30.createElement(CopyIcon, null), " ", copied ?? "Copy code")), additionalActionItems.map(({ title, className: className2, onClick, disabled }, index) => React30.createElement(
+    Button7,
+    {
+      key: index,
+      className: className2,
+      onClick,
+      disabled: !!disabled,
+      variant: "ghost"
+    },
+    title
+  ))));
 }, StyledPreview = styled22(Preview)(() => ({
   ".docs-story": {
     paddingTop: 32,
@@ -4389,7 +4606,7 @@ var PositionedToolbar = styled22(Toolbar)({
 }));
 
 // src/blocks/components/ArgsTable/TabbedArgsTable.tsx
-import React30 from "react";
+import React31 from "react";
 import { TabsView } from "storybook/internal/components";
 import { styled as styled23 } from "storybook/theming";
 var StyledTabsView = styled23(TabsView)({
@@ -4397,20 +4614,20 @@ var StyledTabsView = styled23(TabsView)({
 }), TabbedArgsTable = ({ tabs, ...props }) => {
   let entries = Object.entries(tabs);
   if (entries.length === 1)
-    return React30.createElement(ArgsTable, { ...entries[0][1], ...props });
+    return React31.createElement(ArgsTable, { ...entries[0][1], ...props });
   let tabsFromEntries = entries.map(([label, table], index) => ({
     id: `prop_table_div_${label}`,
     title: label,
     children: () => {
       let argsTableProps = index === 0 ? props : { sort: props.sort };
-      return React30.createElement(ArgsTable, { inTabPanel: !0, key: `prop_table_${label}`, ...table, ...argsTableProps });
+      return React31.createElement(ArgsTable, { inTabPanel: !0, key: `prop_table_${label}`, ...table, ...argsTableProps });
     }
   }));
-  return React30.createElement(StyledTabsView, { tabs: tabsFromEntries });
+  return React31.createElement(StyledTabsView, { tabs: tabsFromEntries });
 };
 
 // src/blocks/components/Typeset.tsx
-import React31 from "react";
+import React32 from "react";
 import { withReset as withReset2 } from "storybook/internal/components";
 import { styled as styled24 } from "storybook/theming";
 var Label4 = styled24.div(({ theme }) => ({
@@ -4436,7 +4653,7 @@ var Label4 = styled24.div(({ theme }) => ({
   fontWeight,
   sampleText,
   ...props
-}) => React31.createElement(Wrapper8, { ...props, className: "docblock-typeset sb-unstyled" }, fontSizes.map((size) => React31.createElement(TypeSpecimen, { key: size }, React31.createElement(Label4, null, size), React31.createElement(
+}) => React32.createElement(Wrapper8, { ...props, className: "docblock-typeset sb-unstyled" }, fontSizes.map((size) => React32.createElement(TypeSpecimen, { key: size }, React32.createElement(Label4, null, size), React32.createElement(
   Sample,
   {
     style: {
@@ -4450,7 +4667,7 @@ var Label4 = styled24.div(({ theme }) => ({
 ))));
 
 // src/blocks/components/ColorPalette.tsx
-import React32 from "react";
+import React33 from "react";
 import { ResetWrapper as ResetWrapper2 } from "storybook/internal/components";
 import { styled as styled25 } from "storybook/theming";
 var ItemTitle = styled25.div(({ theme }) => ({
@@ -4536,25 +4753,25 @@ var ItemTitle = styled25.div(({ theme }) => ({
   flexDirection: "column"
 }));
 function renderSwatch(color, index) {
-  return React32.createElement(Swatch, { key: `${color}-${index}`, title: color, background: color });
+  return React33.createElement(Swatch, { key: `${color}-${index}`, title: color, background: color });
 }
 function renderSwatchLabel(color, index, colorDescription) {
-  return React32.createElement(SwatchLabel, { key: `${color}-${index}`, title: color }, React32.createElement("div", null, color, colorDescription && React32.createElement("span", null, colorDescription)));
+  return React33.createElement(SwatchLabel, { key: `${color}-${index}`, title: color }, React33.createElement("div", null, color, colorDescription && React33.createElement("span", null, colorDescription)));
 }
 function renderSwatchSpecimen(colors) {
   if (Array.isArray(colors))
-    return React32.createElement(SwatchSpecimen, null, React32.createElement(SwatchColors, null, colors.map((color, index) => renderSwatch(color, index))), React32.createElement(SwatchLabels, null, colors.map((color, index) => renderSwatchLabel(color, index))));
+    return React33.createElement(SwatchSpecimen, null, React33.createElement(SwatchColors, null, colors.map((color, index) => renderSwatch(color, index))), React33.createElement(SwatchLabels, null, colors.map((color, index) => renderSwatchLabel(color, index))));
   let swatchElements = [], labelElements = [];
   for (let colorKey in colors) {
     let colorValue = colors[colorKey];
     swatchElements.push(renderSwatch(colorValue, swatchElements.length)), labelElements.push(renderSwatchLabel(colorKey, labelElements.length, colorValue));
   }
-  return React32.createElement(SwatchSpecimen, null, React32.createElement(SwatchColors, null, swatchElements), React32.createElement(SwatchLabels, null, labelElements));
+  return React33.createElement(SwatchSpecimen, null, React33.createElement(SwatchColors, null, swatchElements), React33.createElement(SwatchLabels, null, labelElements));
 }
-var ColorItem = ({ title, subtitle, colors }) => React32.createElement(Item, null, React32.createElement(ItemDescription, null, React32.createElement(ItemTitle, null, title), React32.createElement(ItemSubtitle, null, subtitle)), React32.createElement(Swatches, null, renderSwatchSpecimen(colors))), ColorPalette = ({ children, ...props }) => React32.createElement(ResetWrapper2, null, React32.createElement(List, { ...props, className: "docblock-colorpalette sb-unstyled" }, React32.createElement(ListHeading, null, React32.createElement(ListName, null, "Name"), React32.createElement(ListSwatches, null, "Swatches")), children));
+var ColorItem = ({ title, subtitle, colors }) => React33.createElement(Item, null, React33.createElement(ItemDescription, null, React33.createElement(ItemTitle, null, title), React33.createElement(ItemSubtitle, null, subtitle)), React33.createElement(Swatches, null, renderSwatchSpecimen(colors))), ColorPalette = ({ children, ...props }) => React33.createElement(ResetWrapper2, null, React33.createElement(List, { ...props, className: "docblock-colorpalette sb-unstyled" }, React33.createElement(ListHeading, null, React33.createElement(ListName, null, "Name"), React33.createElement(ListSwatches, null, "Swatches")), children));
 
 // src/blocks/components/IconGallery.tsx
-import React33 from "react";
+import React34 from "react";
 import { ResetWrapper as ResetWrapper3 } from "storybook/internal/components";
 import { styled as styled26 } from "storybook/theming";
 var ItemLabel = styled26.div(({ theme }) => ({
@@ -4593,10 +4810,10 @@ var ItemLabel = styled26.div(({ theme }) => ({
   gridGap: "8px 16px",
   gridAutoFlow: "row dense",
   gridAutoRows: 50
-}), IconItem = ({ name, children }) => React33.createElement(Item2, null, React33.createElement(ItemSpecimen, null, children), React33.createElement(ItemLabel, null, name)), IconGallery = ({ children, ...props }) => React33.createElement(ResetWrapper3, null, React33.createElement(List2, { ...props, className: "docblock-icongallery sb-unstyled" }, children));
+}), IconItem = ({ name, children }) => React34.createElement(Item2, null, React34.createElement(ItemSpecimen, null, children), React34.createElement(ItemLabel, null, name)), IconGallery = ({ children, ...props }) => React34.createElement(ResetWrapper3, null, React34.createElement(List2, { ...props, className: "docblock-icongallery sb-unstyled" }, children));
 
 // src/blocks/components/TableOfContents.tsx
-import React34, { useEffect as useEffect10 } from "react";
+import React35, { useEffect as useEffect10 } from "react";
 import { NAVIGATE_URL } from "storybook/internal/core-events";
 import { styled as styled27 } from "storybook/theming";
 
@@ -4890,8 +5107,8 @@ var default_options_default = {
 // ../../../node_modules/tocbot/src/js/parse-content.js
 function parseContent(options) {
   let reduce = [].reduce;
-  function getLastItem(array2) {
-    return array2[array2.length - 1];
+  function getLastItem(array) {
+    return array[array.length - 1];
   }
   function getHeadingLevel(heading) {
     return +heading.nodeName.toUpperCase().replace("H", "");
@@ -4917,10 +5134,10 @@ function parseContent(options) {
     return options.includeHtml && (obj.childNodes = heading.childNodes), options.headingObjectCallback ? options.headingObjectCallback(obj, heading) : obj;
   }
   function addNode(node, nest) {
-    let obj = getHeadingObject(node), level = obj.headingLevel, array2 = nest, lastItem = getLastItem(array2), lastItemLevel = lastItem ? lastItem.headingLevel : 0, counter = level - lastItemLevel;
-    for (; counter > 0 && (lastItem = getLastItem(array2), !(lastItem && level === lastItem.headingLevel)); )
-      lastItem && lastItem.children !== void 0 && (array2 = lastItem.children), counter--;
-    return level >= options.collapseDepth && (obj.isCollapsed = !0), array2.push(obj), array2;
+    let obj = getHeadingObject(node), level = obj.headingLevel, array = nest, lastItem = getLastItem(array), lastItemLevel = lastItem ? lastItem.headingLevel : 0, counter = level - lastItemLevel;
+    for (; counter > 0 && (lastItem = getLastItem(array), !(lastItem && level === lastItem.headingLevel)); )
+      lastItem && lastItem.children !== void 0 && (array = lastItem.children), counter--;
+    return level >= options.collapseDepth && (obj.isCollapsed = !0), array.push(obj), array;
   }
   function selectHeadings(contentElement, headingSelector) {
     let selectors = headingSelector;
@@ -5184,7 +5401,7 @@ var Aside = styled27.aside(() => ({
   color: theme.color.defaultText,
   textTransform: "uppercase",
   marginBottom: 10
-})), Title2 = ({ headingId, title }) => typeof title == "string" || !title ? React34.createElement(Heading, { as: "h2", id: headingId, className: title ? "" : "sb-sr-only" }, title || "Table of contents") : React34.createElement("div", { id: headingId }, title), TableOfContents = ({
+})), Title2 = ({ headingId, title }) => typeof title == "string" || !title ? React35.createElement(Heading, { as: "h2", id: headingId, className: title ? "" : "sb-sr-only" }, title || "Table of contents") : React35.createElement("div", { id: headingId }, title), TableOfContents = ({
   title,
   disable,
   headingSelector,
@@ -5221,15 +5438,15 @@ var Aside = styled27.aside(() => ({
     };
   }, [channel, disable, ignoreSelector, contentsSelector, headingSelector, unsafeTocbotOptions]);
   let headingId = "table-of-contents";
-  return React34.createElement(Aside, { className }, disable ? null : React34.createElement(Nav, { "aria-labelledby": headingId }, React34.createElement(Title2, { headingId, title }), React34.createElement("div", { className: "toc-wrapper" })));
+  return React35.createElement(Aside, { className }, disable ? null : React35.createElement(Nav, { "aria-labelledby": headingId }, React35.createElement(Title2, { headingId, title }), React35.createElement("div", { className: "toc-wrapper" })));
 };
 
 // src/blocks/blocks/Anchor.tsx
-import React35 from "react";
-var anchorBlockIdFromId = (storyId) => `anchor--${storyId}`, Anchor = ({ storyId, children }) => React35.createElement("div", { id: anchorBlockIdFromId(storyId), className: "sb-anchor" }, children);
+import React36 from "react";
+var anchorBlockIdFromId = (storyId) => `anchor--${storyId}`, Anchor = ({ storyId, children }) => React36.createElement("div", { id: anchorBlockIdFromId(storyId), className: "sb-anchor" }, children);
 
 // src/blocks/blocks/ArgTypes.tsx
-import React36 from "react";
+import React37 from "react";
 import { filterArgTypes } from "storybook/preview-api";
 
 // src/blocks/blocks/useOf.ts
@@ -5279,13 +5496,13 @@ function getArgTypesFromResolved(resolved) {
   } = resolved;
   return { argTypes, parameters, component, subcomponents };
 }
-var ArgTypes = (props) => {
+var ArgTypesImpl = (props) => {
   let { of } = props;
   if ("of" in props && of === void 0)
     throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
   let resolved = useOf(of || "meta"), { argTypes, parameters, component, subcomponents } = getArgTypesFromResolved(resolved), argTypesParameters = parameters?.docs?.argTypes || {}, include = props.include ?? argTypesParameters.include, exclude = props.exclude ?? argTypesParameters.exclude, sort = props.sort ?? argTypesParameters.sort, filteredArgTypes = filterArgTypes(argTypes, include, exclude);
   if (!(!!subcomponents && Object.keys(subcomponents || {}).length > 0))
-    return React36.createElement(ArgsTable, { rows: filteredArgTypes, sort });
+    return React37.createElement(ArgsTable, { rows: filteredArgTypes, sort });
   let mainComponentName = getComponentName(component) || "Main", subcomponentTabs = Object.fromEntries(
     Object.entries(subcomponents || {}).map(([key, comp]) => [
       key,
@@ -5302,18 +5519,18 @@ var ArgTypes = (props) => {
     [mainComponentName]: { rows: filteredArgTypes, sort },
     ...subcomponentTabs
   };
-  return React36.createElement(TabbedArgsTable, { tabs, sort });
-};
+  return React37.createElement(TabbedArgsTable, { tabs, sort });
+}, ArgTypes = withMdxComponentOverride("ArgTypes", ArgTypesImpl);
 
 // src/blocks/blocks/Canvas.tsx
-import React39, { useContext as useContext5 } from "react";
+import React40, { useContext as useContext5 } from "react";
 
 // src/blocks/blocks/Source.tsx
-import React38, { useContext as useContext4, useMemo as useMemo3 } from "react";
+import React39, { useContext as useContext4, useMemo as useMemo4 } from "react";
 import { SourceType } from "storybook/internal/docs-tools";
 
 // src/blocks/blocks/SourceContainer.tsx
-import React37, { createContext as createContext3, useEffect as useEffect11, useState as useState14 } from "react";
+import React38, { createContext as createContext3, useEffect as useEffect11, useState as useState14 } from "react";
 import { SNIPPET_RENDERED } from "storybook/internal/docs-tools";
 
 // ../../../node_modules/telejson/dist/chunk-EAFQLD22.mjs
@@ -5347,12 +5564,12 @@ var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDes
   "type"
 ], customEventSpecificProperties = ["detail"];
 function extractEventHiddenProperties(event) {
-  let rebuildEvent = eventProperties.filter((value2) => event[value2] !== void 0).reduce((acc, value2) => (acc[value2] = event[value2], acc), {});
+  let rebuildEvent = eventProperties.filter((value) => event[value] !== void 0).reduce((acc, value) => (acc[value] = event[value], acc), {});
   if (event instanceof CustomEvent)
-    for (let value2 of customEventSpecificProperties.filter(
-      (value22) => event[value22] !== void 0
+    for (let value of customEventSpecificProperties.filter(
+      (value2) => event[value2] !== void 0
     ))
-      rebuildEvent[value2] = event[value2];
+      rebuildEvent[value] = event[value];
   return rebuildEvent;
 }
 
@@ -5620,8 +5837,8 @@ var require_es_object_atoms = __commonJS({
     ), $Object = Object, $getPrototypeOf = $Object.getPrototypeOf;
     module.exports = desc && typeof desc.get == "function" ? callBind([desc.get]) : typeof $getPrototypeOf == "function" ? (
       /** @type {import('./get')} */
-      (function(value2) {
-        return $getPrototypeOf(value2 == null ? value2 : $Object(value2));
+      (function(value) {
+        return $getPrototypeOf(value == null ? value : $Object(value));
       })
     ) : !1;
   }
@@ -5756,21 +5973,21 @@ var require_es_object_atoms = __commonJS({
         errorProto = getProto(getProto(e2)), INTRINSICS["%Error.prototype%"] = errorProto;
       }
     var errorProto, doEval = function doEval2(name) {
-      var value2;
+      var value;
       if (name === "%AsyncFunction%")
-        value2 = getEvalledConstructor("async function () {}");
+        value = getEvalledConstructor("async function () {}");
       else if (name === "%GeneratorFunction%")
-        value2 = getEvalledConstructor("function* () {}");
+        value = getEvalledConstructor("function* () {}");
       else if (name === "%AsyncGeneratorFunction%")
-        value2 = getEvalledConstructor("async function* () {}");
+        value = getEvalledConstructor("async function* () {}");
       else if (name === "%AsyncGenerator%") {
         var fn = doEval2("%AsyncGeneratorFunction%");
-        fn && (value2 = fn.prototype);
+        fn && (value = fn.prototype);
       } else if (name === "%AsyncIteratorPrototype%") {
         var gen = doEval2("%AsyncGenerator%");
-        gen && getProto && (value2 = getProto(gen.prototype));
+        gen && getProto && (value = getProto(gen.prototype));
       }
-      return INTRINSICS[name] = value2, value2;
+      return INTRINSICS[name] = value, value;
     }, LEGACY_ALIASES = {
       __proto__: null,
       "%ArrayBufferPrototype%": ["ArrayBuffer", "prototype"],
@@ -5837,13 +6054,13 @@ var require_es_object_atoms = __commonJS({
     }, getBaseIntrinsic = function(name, allowMissing) {
       var intrinsicName = name, alias;
       if (hasOwn(LEGACY_ALIASES, intrinsicName) && (alias = LEGACY_ALIASES[intrinsicName], intrinsicName = "%" + alias[0] + "%"), hasOwn(INTRINSICS, intrinsicName)) {
-        var value2 = INTRINSICS[intrinsicName];
-        if (value2 === needsEval && (value2 = doEval(intrinsicName)), typeof value2 > "u" && !allowMissing)
+        var value = INTRINSICS[intrinsicName];
+        if (value === needsEval && (value = doEval(intrinsicName)), typeof value > "u" && !allowMissing)
           throw new $TypeError("intrinsic " + name + " exists, but is not available. Please file an issue!");
         return {
           alias,
           name: intrinsicName,
-          value: value2
+          value
         };
       }
       throw new $SyntaxError("intrinsic " + name + " does not exist!");
@@ -5855,29 +6072,29 @@ var require_es_object_atoms = __commonJS({
         throw new $TypeError('"allowMissing" argument must be a boolean');
       if ($exec(/^%?[^%]*%?$/, name) === null)
         throw new $SyntaxError("`%` may not be present anywhere but at the beginning and end of the intrinsic name");
-      var parts = stringToPath2(name), intrinsicBaseName = parts.length > 0 ? parts[0] : "", intrinsic = getBaseIntrinsic("%" + intrinsicBaseName + "%", allowMissing), intrinsicRealName = intrinsic.name, value2 = intrinsic.value, skipFurtherCaching = !1, alias = intrinsic.alias;
+      var parts = stringToPath2(name), intrinsicBaseName = parts.length > 0 ? parts[0] : "", intrinsic = getBaseIntrinsic("%" + intrinsicBaseName + "%", allowMissing), intrinsicRealName = intrinsic.name, value = intrinsic.value, skipFurtherCaching = !1, alias = intrinsic.alias;
       alias && (intrinsicBaseName = alias[0], $spliceApply(parts, $concat([0, 1], alias)));
       for (var i2 = 1, isOwn = !0; i2 < parts.length; i2 += 1) {
         var part = parts[i2], first = $strSlice(part, 0, 1), last2 = $strSlice(part, -1);
         if ((first === '"' || first === "'" || first === "`" || last2 === '"' || last2 === "'" || last2 === "`") && first !== last2)
           throw new $SyntaxError("property names with quotes must have matching quotes");
         if ((part === "constructor" || !isOwn) && (skipFurtherCaching = !0), intrinsicBaseName += "." + part, intrinsicRealName = "%" + intrinsicBaseName + "%", hasOwn(INTRINSICS, intrinsicRealName))
-          value2 = INTRINSICS[intrinsicRealName];
-        else if (value2 != null) {
-          if (!(part in value2)) {
+          value = INTRINSICS[intrinsicRealName];
+        else if (value != null) {
+          if (!(part in value)) {
             if (!allowMissing)
               throw new $TypeError("base intrinsic for " + name + " exists, but the property is not available.");
             return;
           }
           if ($gOPD && i2 + 1 >= parts.length) {
-            var desc = $gOPD(value2, part);
-            isOwn = !!desc, isOwn && "get" in desc && !("originalValue" in desc.get) ? value2 = desc.get : value2 = value2[part];
+            var desc = $gOPD(value, part);
+            isOwn = !!desc, isOwn && "get" in desc && !("originalValue" in desc.get) ? value = desc.get : value = value[part];
           } else
-            isOwn = hasOwn(value2, part), value2 = value2[part];
-          isOwn && !skipFurtherCaching && (INTRINSICS[intrinsicRealName] = value2);
+            isOwn = hasOwn(value, part), value = value[part];
+          isOwn && !skipFurtherCaching && (INTRINSICS[intrinsicRealName] = value);
         }
       }
-      return value2;
+      return value;
     };
   }
 }), require_call_bound = __commonJS({
@@ -5912,14 +6129,14 @@ var require_es_object_atoms = __commonJS({
     }, badStringifier = {
       toString: throwRegexMarker,
       valueOf: throwRegexMarker
-    }, typeof Symbol.toPrimitive == "symbol" && (badStringifier[Symbol.toPrimitive] = throwRegexMarker), fn = function(value2) {
-      if (!value2 || typeof value2 != "object")
+    }, typeof Symbol.toPrimitive == "symbol" && (badStringifier[Symbol.toPrimitive] = throwRegexMarker), fn = function(value) {
+      if (!value || typeof value != "object")
         return !1;
       var descriptor = (
         /** @type {NonNullable<typeof gOPD>} */
         gOPD(
           /** @type {{ lastIndex?: unknown }} */
-          value2,
+          value,
           "lastIndex"
         )
       ), hasLastIndexDataProperty = descriptor && hasOwn(descriptor, "value");
@@ -5927,7 +6144,7 @@ var require_es_object_atoms = __commonJS({
         return !1;
       try {
         $exec(
-          value2,
+          value,
           /** @type {string} */
           /** @type {unknown} */
           badStringifier
@@ -5935,8 +6152,8 @@ var require_es_object_atoms = __commonJS({
       } catch (e2) {
         return e2 === isRegexMarker;
       }
-    }) : ($toString = callBound("Object.prototype.toString"), regexClass = "[object RegExp]", fn = function(value2) {
-      return !value2 || typeof value2 != "object" && typeof value2 != "function" ? !1 : $toString(value2) === regexClass;
+    }) : ($toString = callBound("Object.prototype.toString"), regexClass = "[object RegExp]", fn = function(value) {
+      return !value || typeof value != "object" && typeof value != "function" ? !1 : $toString(value) === regexClass;
     });
     var $exec, isRegexMarker, throwRegexMarker, badStringifier, $toString, regexClass;
     module.exports = fn;
@@ -5969,19 +6186,19 @@ var require_es_object_atoms = __commonJS({
   "node_modules/.pnpm/is-symbol@1.1.1/node_modules/is-symbol/index.js"(exports, module) {
     "use strict";
     var callBound = require_call_bound(), $toString = callBound("Object.prototype.toString"), hasSymbols = require_has_symbols()(), safeRegexTest = require_safe_regex_test();
-    hasSymbols ? ($symToStr = callBound("Symbol.prototype.toString"), isSymString = safeRegexTest(/^Symbol\(.*\)$/), isSymbolObject = function(value2) {
-      return typeof value2.valueOf() != "symbol" ? !1 : isSymString($symToStr(value2));
-    }, module.exports = function(value2) {
-      if (typeof value2 == "symbol")
+    hasSymbols ? ($symToStr = callBound("Symbol.prototype.toString"), isSymString = safeRegexTest(/^Symbol\(.*\)$/), isSymbolObject = function(value) {
+      return typeof value.valueOf() != "symbol" ? !1 : isSymString($symToStr(value));
+    }, module.exports = function(value) {
+      if (typeof value == "symbol")
         return !0;
-      if (!value2 || typeof value2 != "object" || $toString(value2) !== "[object Symbol]")
+      if (!value || typeof value != "object" || $toString(value) !== "[object Symbol]")
         return !1;
       try {
-        return isSymbolObject(value2);
+        return isSymbolObject(value);
       } catch {
         return !1;
       }
-    }) : module.exports = function(value2) {
+    }) : module.exports = function(value) {
       return !1;
     };
     var $symToStr, isSymString, isSymbolObject;
@@ -5991,35 +6208,35 @@ function isObject(val) {
   return val != null && typeof val == "object" && Array.isArray(val) === !1;
 }
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global, freeGlobal_default = freeGlobal, freeSelf = typeof self == "object" && self && self.Object === Object && self, root = freeGlobal_default || freeSelf || Function("return this")(), root_default = root, Symbol2 = root_default.Symbol, Symbol_default = Symbol2, objectProto = Object.prototype, hasOwnProperty = objectProto.hasOwnProperty, nativeObjectToString = objectProto.toString, symToStringTag = Symbol_default ? Symbol_default.toStringTag : void 0;
-function getRawTag(value2) {
-  var isOwn = hasOwnProperty.call(value2, symToStringTag), tag = value2[symToStringTag];
+function getRawTag(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
   try {
-    value2[symToStringTag] = void 0;
+    value[symToStringTag] = void 0;
     var unmasked = !0;
   } catch {
   }
-  var result = nativeObjectToString.call(value2);
-  return unmasked && (isOwn ? value2[symToStringTag] = tag : delete value2[symToStringTag]), result;
+  var result = nativeObjectToString.call(value);
+  return unmasked && (isOwn ? value[symToStringTag] = tag : delete value[symToStringTag]), result;
 }
 var getRawTag_default = getRawTag, objectProto2 = Object.prototype, nativeObjectToString2 = objectProto2.toString;
-function objectToString(value2) {
-  return nativeObjectToString2.call(value2);
+function objectToString(value) {
+  return nativeObjectToString2.call(value);
 }
 var objectToString_default = objectToString, nullTag = "[object Null]", undefinedTag = "[object Undefined]", symToStringTag2 = Symbol_default ? Symbol_default.toStringTag : void 0;
-function baseGetTag(value2) {
-  return value2 == null ? value2 === void 0 ? undefinedTag : nullTag : symToStringTag2 && symToStringTag2 in Object(value2) ? getRawTag_default(value2) : objectToString_default(value2);
+function baseGetTag(value) {
+  return value == null ? value === void 0 ? undefinedTag : nullTag : symToStringTag2 && symToStringTag2 in Object(value) ? getRawTag_default(value) : objectToString_default(value);
 }
 var baseGetTag_default = baseGetTag;
 var symbolProto = Symbol_default ? Symbol_default.prototype : void 0, symbolToString = symbolProto ? symbolProto.toString : void 0;
-function isObject2(value2) {
-  var type = typeof value2;
-  return value2 != null && (type == "object" || type == "function");
+function isObject2(value) {
+  var type = typeof value;
+  return value != null && (type == "object" || type == "function");
 }
 var isObject_default = isObject2, asyncTag = "[object AsyncFunction]", funcTag = "[object Function]", genTag = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
-function isFunction(value2) {
-  if (!isObject_default(value2))
+function isFunction(value) {
+  if (!isObject_default(value))
     return !1;
-  var tag = baseGetTag_default(value2);
+  var tag = baseGetTag_default(value);
   return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
 }
 var isFunction_default = isFunction, coreJsData = root_default["__core-js_shared__"], coreJsData_default = coreJsData, maskSrcKey = (function() {
@@ -6046,24 +6263,24 @@ function toSource(func) {
 var toSource_default = toSource, reRegExpChar = /[\\^$.*+?()[\]{}|]/g, reIsHostCtor = /^\[object .+?Constructor\]$/, funcProto2 = Function.prototype, objectProto3 = Object.prototype, funcToString2 = funcProto2.toString, hasOwnProperty2 = objectProto3.hasOwnProperty, reIsNative = RegExp(
   "^" + funcToString2.call(hasOwnProperty2).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
 );
-function baseIsNative(value2) {
-  if (!isObject_default(value2) || isMasked_default(value2))
+function baseIsNative(value) {
+  if (!isObject_default(value) || isMasked_default(value))
     return !1;
-  var pattern = isFunction_default(value2) ? reIsNative : reIsHostCtor;
-  return pattern.test(toSource_default(value2));
+  var pattern = isFunction_default(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource_default(value));
 }
 var baseIsNative_default = baseIsNative;
-function getValue(object2, key) {
-  return object2?.[key];
+function getValue(object, key) {
+  return object?.[key];
 }
 var getValue_default = getValue;
-function getNative(object2, key) {
-  var value2 = getValue_default(object2, key);
-  return baseIsNative_default(value2) ? value2 : void 0;
+function getNative(object, key) {
+  var value = getValue_default(object, key);
+  return baseIsNative_default(value) ? value : void 0;
 }
 var getNative_default = getNative;
-function eq(value2, other) {
-  return value2 === other || value2 !== value2 && other !== other;
+function eq(value, other) {
+  return value === other || value !== value && other !== other;
 }
 var eq_default = eq;
 var nativeCreate = getNative_default(Object, "create"), nativeCreate_default = nativeCreate;
@@ -6090,9 +6307,9 @@ function hashHas(key) {
   return nativeCreate_default ? data[key] !== void 0 : hasOwnProperty4.call(data, key);
 }
 var hashHas_default = hashHas, HASH_UNDEFINED2 = "__lodash_hash_undefined__";
-function hashSet(key, value2) {
+function hashSet(key, value) {
   var data = this.__data__;
-  return this.size += this.has(key) ? 0 : 1, data[key] = nativeCreate_default && value2 === void 0 ? HASH_UNDEFINED2 : value2, this;
+  return this.size += this.has(key) ? 0 : 1, data[key] = nativeCreate_default && value === void 0 ? HASH_UNDEFINED2 : value, this;
 }
 var hashSet_default = hashSet;
 function Hash(entries) {
@@ -6112,9 +6329,9 @@ function listCacheClear() {
   this.__data__ = [], this.size = 0;
 }
 var listCacheClear_default = listCacheClear;
-function assocIndexOf(array2, key) {
-  for (var length = array2.length; length--; )
-    if (eq_default(array2[length][0], key))
+function assocIndexOf(array, key) {
+  for (var length = array.length; length--; )
+    if (eq_default(array[length][0], key))
       return length;
   return -1;
 }
@@ -6136,9 +6353,9 @@ function listCacheHas(key) {
   return assocIndexOf_default(this.__data__, key) > -1;
 }
 var listCacheHas_default = listCacheHas;
-function listCacheSet(key, value2) {
+function listCacheSet(key, value) {
   var data = this.__data__, index = assocIndexOf_default(data, key);
-  return index < 0 ? (++this.size, data.push([key, value2])) : data[index][1] = value2, this;
+  return index < 0 ? (++this.size, data.push([key, value])) : data[index][1] = value, this;
 }
 var listCacheSet_default = listCacheSet;
 function ListCache(entries) {
@@ -6162,9 +6379,9 @@ function mapCacheClear() {
   };
 }
 var mapCacheClear_default = mapCacheClear;
-function isKeyable(value2) {
-  var type = typeof value2;
-  return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value2 !== "__proto__" : value2 === null;
+function isKeyable(value) {
+  var type = typeof value;
+  return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
 }
 var isKeyable_default = isKeyable;
 function getMapData(map, key) {
@@ -6185,9 +6402,9 @@ function mapCacheHas(key) {
   return getMapData_default(this, key).has(key);
 }
 var mapCacheHas_default = mapCacheHas;
-function mapCacheSet(key, value2) {
+function mapCacheSet(key, value) {
   var data = getMapData_default(this, key), size = data.size;
-  return data.set(key, value2), this.size += data.size == size ? 0 : 1, this;
+  return data.set(key, value), this.size += data.size == size ? 0 : 1, this;
 }
 var mapCacheSet_default = mapCacheSet;
 function MapCache(entries) {
@@ -6245,62 +6462,62 @@ function convertUnconventionalData(data) {
 }
 var replacer = function(options) {
   let objects, map, stack, keys;
-  return function(key, value2) {
+  return function(key, value) {
     try {
       if (key === "")
-        return keys = [], objects = /* @__PURE__ */ new Map([[value2, "[]"]]), map = /* @__PURE__ */ new Map(), stack = [], value2;
+        return keys = [], objects = /* @__PURE__ */ new Map([[value, "[]"]]), map = /* @__PURE__ */ new Map(), stack = [], value;
       let origin = map.get(this) || this;
       for (; stack.length && origin !== stack[0]; )
         stack.shift(), keys.pop();
-      if (typeof value2 == "boolean")
-        return value2;
-      if (value2 === void 0)
+      if (typeof value == "boolean")
+        return value;
+      if (value === void 0)
         return options.allowUndefined ? "_undefined_" : void 0;
-      if (value2 === null)
+      if (value === null)
         return null;
-      if (typeof value2 == "number")
-        return value2 === Number.NEGATIVE_INFINITY ? "_-Infinity_" : value2 === Number.POSITIVE_INFINITY ? "_Infinity_" : Number.isNaN(value2) ? "_NaN_" : value2;
-      if (typeof value2 == "bigint")
-        return `_bigint_${value2.toString()}`;
-      if (typeof value2 == "string")
-        return dateFormat.test(value2) ? options.allowDate ? `_date_${value2}` : void 0 : value2;
-      if ((0, import_is_regex.default)(value2))
-        return options.allowRegExp ? `_regexp_${value2.flags}|${value2.source}` : void 0;
-      if ((0, import_is_function.default)(value2))
+      if (typeof value == "number")
+        return value === Number.NEGATIVE_INFINITY ? "_-Infinity_" : value === Number.POSITIVE_INFINITY ? "_Infinity_" : Number.isNaN(value) ? "_NaN_" : value;
+      if (typeof value == "bigint")
+        return `_bigint_${value.toString()}`;
+      if (typeof value == "string")
+        return dateFormat.test(value) ? options.allowDate ? `_date_${value}` : void 0 : value;
+      if ((0, import_is_regex.default)(value))
+        return options.allowRegExp ? `_regexp_${value.flags}|${value.source}` : void 0;
+      if ((0, import_is_function.default)(value))
         return;
-      if ((0, import_is_symbol.default)(value2)) {
+      if ((0, import_is_symbol.default)(value)) {
         if (!options.allowSymbol)
           return;
-        let globalRegistryKey = Symbol.keyFor(value2);
-        return globalRegistryKey !== void 0 ? `_gsymbol_${globalRegistryKey}` : `_symbol_${value2.toString().slice(7, -1)}`;
+        let globalRegistryKey = Symbol.keyFor(value);
+        return globalRegistryKey !== void 0 ? `_gsymbol_${globalRegistryKey}` : `_symbol_${value.toString().slice(7, -1)}`;
       }
       if (stack.length >= options.maxDepth)
-        return Array.isArray(value2) ? `[Array(${value2.length})]` : "[Object]";
-      if (value2 === this)
+        return Array.isArray(value) ? `[Array(${value.length})]` : "[Object]";
+      if (value === this)
         return `_duplicate_${JSON.stringify(keys)}`;
-      if (value2 instanceof Error && options.allowError)
+      if (value instanceof Error && options.allowError)
         return {
           __isConvertedError__: !0,
           errorProperties: {
             // @ts-expect-error cause is not defined in the current tsconfig target(es2020)
-            ...value2.cause ? { cause: value2.cause } : {},
-            ...value2,
-            name: value2.name,
-            message: value2.message,
-            stack: value2.stack,
-            "_constructor-name_": value2.constructor.name
+            ...value.cause ? { cause: value.cause } : {},
+            ...value,
+            name: value.name,
+            message: value.message,
+            stack: value.stack,
+            "_constructor-name_": value.constructor.name
           }
         };
-      if (value2?.constructor?.name && value2.constructor.name !== "Object" && !Array.isArray(value2)) {
-        let found2 = objects.get(value2);
+      if (value?.constructor?.name && value.constructor.name !== "Object" && !Array.isArray(value)) {
+        let found2 = objects.get(value);
         if (!found2) {
           let plainObject = {
             __isClassInstance__: !0,
-            __className__: value2.constructor.name,
-            ...Object.getOwnPropertyNames(value2).reduce(
+            __className__: value.constructor.name,
+            ...Object.getOwnPropertyNames(value).reduce(
               (acc, prop) => {
                 try {
-                  acc[prop] = value2[prop];
+                  acc[prop] = value[prop];
                 } catch {
                 }
                 return acc;
@@ -6308,14 +6525,14 @@ var replacer = function(options) {
               {}
             )
           };
-          return keys.push(key), stack.unshift(plainObject), objects.set(value2, JSON.stringify(keys)), value2 !== plainObject && map.set(value2, plainObject), plainObject;
+          return keys.push(key), stack.unshift(plainObject), objects.set(value, JSON.stringify(keys)), value !== plainObject && map.set(value, plainObject), plainObject;
         }
         return `_duplicate_${found2}`;
       }
-      let found = objects.get(value2);
+      let found = objects.get(value);
       if (!found) {
-        let converted = Array.isArray(value2) ? value2 : convertUnconventionalData(value2);
-        return keys.push(key), stack.unshift(converted), objects.set(value2, JSON.stringify(keys)), value2 !== converted && map.set(value2, converted), converted;
+        let converted = Array.isArray(value) ? value : convertUnconventionalData(value);
+        return keys.push(key), stack.unshift(converted), objects.set(value, JSON.stringify(keys)), value !== converted && map.set(value, converted), converted;
       }
       return `_duplicate_${found}`;
     } catch {
@@ -6366,7 +6583,7 @@ var SourceContext = createContext3({ sources: {} }), UNKNOWN_ARGS_HASH = "--unkn
       }));
     };
     return channel.on(SNIPPET_RENDERED, handleSnippetRendered), () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
-  }, []), React37.createElement(SourceContext.Provider, { value: { sources } }, children);
+  }, []), React38.createElement(SourceContext.Provider, { value: { sources } }, children);
 };
 
 // src/blocks/blocks/useTransformCode.tsx
@@ -6396,7 +6613,7 @@ var getStorySource = (storyId, args, sourceContext) => {
   type === SourceType.AUTO && snippet && isArgsStory ? snippet : sourceParameters.originalSource || "", transformer = transformFromProps ?? sourceParameters.transform, transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
   return sourceParameters.code !== void 0 ? sourceParameters.code : transformedCode;
 }, useSourceProps = (props, docsContext, sourceContext) => {
-  let { of } = props, story = useMemo3(() => {
+  let { of } = props, story = useMemo4(() => {
     if (of)
       return docsContext.resolveOf(of, ["story"]).story;
     try {
@@ -6423,18 +6640,18 @@ var getStorySource = (storyId, args, sourceContext) => {
     language,
     dark
   });
-}, Source2 = (props) => {
+}, SourceImpl = (props) => {
   let sourceContext = useContext4(SourceContext), docsContext = useContext4(DocsContext), sourceProps = useSourceProps(props, docsContext, sourceContext);
-  return React38.createElement(Source, { ...sourceProps });
-};
+  return React39.createElement(Source, { ...sourceProps });
+}, Source2 = withMdxComponentOverride("Source", SourceImpl);
 
 // src/blocks/blocks/Canvas.tsx
-var Canvas = (props) => {
+var CanvasImpl = (props) => {
   let docsContext = useContext5(DocsContext), sourceContext = useContext5(SourceContext), { of, source } = props;
   if ("of" in props && of === void 0)
     throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
   let { story } = useOf(of || "story", ["story"]), sourceProps = useSourceProps({ ...source, ...of && { of } }, docsContext, sourceContext), layout = props.layout ?? story.parameters.layout ?? story.parameters.docs?.canvas?.layout ?? "padded", withToolbar = props.withToolbar ?? story.parameters.docs?.canvas?.withToolbar ?? !1, additionalActions = props.additionalActions ?? story.parameters.docs?.canvas?.additionalActions, sourceState = props.sourceState ?? story.parameters.docs?.canvas?.sourceState ?? "hidden", className = props.className ?? story.parameters.docs?.canvas?.className, inline = props.story?.inline ?? story.parameters?.docs?.story?.inline ?? !1;
-  return React39.createElement(
+  return React40.createElement(
     Preview,
     {
       withSource: sourceState === "none" ? void 0 : sourceProps,
@@ -6445,12 +6662,12 @@ var Canvas = (props) => {
       layout,
       inline
     },
-    React39.createElement(Story2, { of: of || story.moduleExport, meta: props.meta, ...props.story })
+    React40.createElement(Story2, { of: of || story.moduleExport, meta: props.meta, ...props.story })
   );
-};
+}, Canvas = withMdxComponentOverride("Canvas", CanvasImpl);
 
 // src/blocks/blocks/Controls.tsx
-import React40, { useContext as useContext7 } from "react";
+import React41, { useContext as useContext7 } from "react";
 import { filterArgTypes as filterArgTypes2 } from "storybook/preview-api";
 
 // src/blocks/blocks/useArgs.ts
@@ -6508,13 +6725,13 @@ function extractComponentArgTypes2(component, parameters) {
     throw new Error("Args unsupported. See Args documentation for your framework." /* ARGS_UNSUPPORTED */);
   return extractArgTypes(component);
 }
-var Controls3 = (props) => {
+var ControlsImpl = (props) => {
   let { of } = props, context = useContext7(DocsContext), primaryStory = usePrimaryStory(), story = of ? context.resolveOf(of, ["story"]).story : primaryStory;
   if (!story)
     return null;
   let { parameters, argTypes, component, subcomponents } = story, controlsParameters = parameters.docs?.controls || {}, include = props.include ?? controlsParameters.include, exclude = props.exclude ?? controlsParameters.exclude, sort = props.sort ?? controlsParameters.sort, [args, updateArgs, resetArgs] = useArgs(story, context), [globals] = useGlobals(story, context), filteredArgTypes = filterArgTypes2(argTypes, include, exclude);
   if (!(!!subcomponents && Object.keys(subcomponents || {}).length > 0))
-    return Object.keys(filteredArgTypes).length > 0 || Object.keys(args).length > 0 ? React40.createElement(
+    return Object.keys(filteredArgTypes).length > 0 || Object.keys(args).length > 0 ? React41.createElement(
       ArgsTable,
       {
         rows: filteredArgTypes,
@@ -6537,7 +6754,7 @@ var Controls3 = (props) => {
     [mainComponentName]: { rows: filteredArgTypes, sort },
     ...subcomponentTabs
   };
-  return React40.createElement(
+  return React41.createElement(
     TabbedArgsTable,
     {
       tabs,
@@ -6548,17 +6765,17 @@ var Controls3 = (props) => {
       resetArgs
     }
   );
-};
+}, Controls3 = withMdxComponentOverride("Controls", ControlsImpl);
 
 // src/blocks/blocks/Description.tsx
-import React43 from "react";
+import React44 from "react";
 
 // src/blocks/blocks/Markdown.tsx
-import React42 from "react";
+import React43 from "react";
 import { dedent } from "ts-dedent";
 
 // src/blocks/blocks/mdx.tsx
-import React41, { useContext as useContext8 } from "react";
+import React42, { useContext as useContext8 } from "react";
 import { Code, components, nameSpaceClassNames } from "storybook/internal/components";
 import { NAVIGATE_URL as NAVIGATE_URL2 } from "storybook/internal/core-events";
 import { LinkIcon } from "@storybook/icons";
@@ -6568,17 +6785,17 @@ var { document: document2 } = globalThis, assertIsFn = (val) => {
     throw new Error(`Expected story function, got: ${val}`);
   return val;
 }, AddContext = (props) => {
-  let { children, ...rest } = props, parentContext = React41.useContext(DocsContext);
-  return React41.createElement(DocsContext.Provider, { value: { ...parentContext, ...rest } }, children);
+  let { children, ...rest } = props, parentContext = React42.useContext(DocsContext);
+  return React42.createElement(DocsContext.Provider, { value: { ...parentContext, ...rest } }, children);
 }, CodeOrSourceMdx = ({
   className,
   children,
   ...rest
 }) => {
   if (typeof className != "string" && (typeof children != "string" || !children.match(/[\n\r]/g)))
-    return React41.createElement(Code, null, children);
+    return React42.createElement(Code, null, children);
   let language = className && className.split("-");
-  return React41.createElement(
+  return React42.createElement(
     Source,
     {
       language: language && language[1] || "text",
@@ -6593,7 +6810,7 @@ function navigate(context, url) {
 }
 var A2 = components.a, AnchorInPage = ({ hash, children }) => {
   let context = useContext8(DocsContext);
-  return React41.createElement(
+  return React42.createElement(
     A2,
     {
       href: hash,
@@ -6607,7 +6824,7 @@ var A2 = components.a, AnchorInPage = ({ hash, children }) => {
   );
 }, AnchorMdx = (props) => {
   let { href, target, children, ...rest } = props, context = useContext8(DocsContext);
-  return !href || target === "_blank" || /^https?:\/\//.test(href) ? React41.createElement(A2, { ...props }) : href.startsWith("#") ? React41.createElement(AnchorInPage, { hash: href }, children) : React41.createElement(
+  return !href || target === "_blank" || /^https?:\/\//.test(href) ? React42.createElement(A2, { ...props }) : href.startsWith("#") ? React42.createElement(AnchorInPage, { hash: href }, children) : React42.createElement(
     A2,
     {
       href,
@@ -6650,7 +6867,7 @@ var A2 = components.a, AnchorInPage = ({ hash, children }) => {
   ...rest
 }) => {
   let context = useContext8(DocsContext), OcticonHeader = OcticonHeaders[as], hash = `#${id}`;
-  return React41.createElement(OcticonHeader, { id, ...rest }, React41.createElement(
+  return React42.createElement(OcticonHeader, { id, ...rest }, React42.createElement(
     OcticonAnchor,
     {
       "aria-hidden": "true",
@@ -6661,25 +6878,25 @@ var A2 = components.a, AnchorInPage = ({ hash, children }) => {
         document2.getElementById(id) && navigate(context, hash);
       }
     },
-    React41.createElement(LinkIcon, null)
+    React42.createElement(LinkIcon, null)
   ), children);
 }, HeaderMdx = (props) => {
   let { as, id, children, ...rest } = props;
   if (id)
-    return React41.createElement(HeaderWithOcticonAnchor, { as, id, ...rest }, children);
+    return React42.createElement(HeaderWithOcticonAnchor, { as, id, ...rest }, children);
   let Component4 = as, { as: omittedAs, ...withoutAs } = props;
-  return React41.createElement(Component4, { ...nameSpaceClassNames(withoutAs, as) });
+  return React42.createElement(Component4, { ...nameSpaceClassNames(withoutAs, as) });
 }, HeadersMdx = SUPPORTED_MDX_HEADERS.reduce(
   (acc, headerType) => ({
     ...acc,
     // @ts-expect-error (Converted from ts-ignore)
-    [headerType]: (props) => React41.createElement(HeaderMdx, { as: headerType, ...props })
+    [headerType]: (props) => React42.createElement(HeaderMdx, { as: headerType, ...props })
   }),
   {}
 );
 
 // src/blocks/blocks/Markdown.tsx
-var Markdown = (props) => {
+var MarkdownImpl = (props) => {
   if (!props.children)
     return null;
   if (typeof props.children != "string")
@@ -6702,7 +6919,7 @@ var Markdown = (props) => {
         </Markdown>
       `
     );
-  return React42.createElement(
+  return React43.createElement(
     index_modern_default,
     {
       ...props,
@@ -6718,7 +6935,7 @@ var Markdown = (props) => {
       }
     }
   );
-};
+}, Markdown = withMdxComponentOverride("Markdown", MarkdownImpl);
 
 // src/blocks/blocks/Description.tsx
 var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.INFO = "info", DescriptionType2.NOTES = "notes", DescriptionType2.DOCGEN = "docgen", DescriptionType2.AUTO = "auto", DescriptionType2))(DescriptionType || {}), getDescriptionFromResolvedOf = (resolvedOf) => {
@@ -6747,19 +6964,19 @@ var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.I
         `Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`
       );
   }
-}, DescriptionContainer = (props) => {
+}, DescriptionImpl = (props) => {
   let { of } = props;
   if ("of" in props && of === void 0)
     throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
   let resolvedOf = useOf(of || "meta"), markdown = getDescriptionFromResolvedOf(resolvedOf);
-  return markdown ? React43.createElement(Markdown, null, markdown) : null;
-};
+  return markdown ? React44.createElement(Markdown, null, markdown) : null;
+}, Description2 = withMdxComponentOverride("Description", DescriptionImpl);
 
 // src/blocks/blocks/Docs.tsx
-import React53 from "react";
+import React54 from "react";
 
 // src/blocks/blocks/DocsContainer.tsx
-import React44, { useEffect as useEffect15 } from "react";
+import React45, { useEffect as useEffect15 } from "react";
 import { ThemeProvider, ensure as ensureTheme } from "storybook/theming";
 var { document: document3, window: globalWindow3 } = globalThis, DocsContainer = ({
   context,
@@ -6783,10 +7000,10 @@ var { document: document3, window: globalWindow3 } = globalThis, DocsContainer =
       }
     } catch {
     }
-  }), React44.createElement(DocsContext.Provider, { value: context }, React44.createElement(SourceContainer, { channel: context.channel }, React44.createElement(ThemeProvider, { theme: ensureTheme(theme) }, React44.createElement(
+  }), React45.createElement(DocsContext.Provider, { value: context }, React45.createElement(SourceContainer, { channel: context.channel }, React45.createElement(ThemeProvider, { theme: ensureTheme(theme) }, React45.createElement(
     DocsPageWrapper,
     {
-      toc: toc ? React44.createElement(
+      toc: toc ? React45.createElement(
         TableOfContents,
         {
           className: "sbdocs sbdocs-toc--custom",
@@ -6800,20 +7017,20 @@ var { document: document3, window: globalWindow3 } = globalThis, DocsContainer =
 };
 
 // src/blocks/blocks/DocsPage.tsx
-import React52 from "react";
+import React53 from "react";
 
 // src/blocks/blocks/Primary.tsx
-import React48 from "react";
+import React49 from "react";
 
 // src/blocks/blocks/DocsStory.tsx
-import React47 from "react";
+import React48 from "react";
 
 // src/blocks/blocks/Subheading.tsx
-import React46 from "react";
+import React47 from "react";
 import { H3 } from "storybook/internal/components";
 
 // src/blocks/blocks/Heading.tsx
-import React45 from "react";
+import React46 from "react";
 import { H2 } from "storybook/internal/components";
 
 // ../../../node_modules/github-slugger/regex.js
@@ -6841,8 +7058,8 @@ var own = Object.hasOwnProperty, BananaSlug = class {
    * @return {string}
    *   A unique slug string
    */
-  slug(value2, maintainCase) {
-    let self2 = this, result = slug(value2, maintainCase === !0), originalSlug = result;
+  slug(value, maintainCase) {
+    let self2 = this, result = slug(value, maintainCase === !0), originalSlug = result;
     for (; own.call(self2.occurrences, result); )
       self2.occurrences[originalSlug]++, result = originalSlug + "-" + self2.occurrences[originalSlug];
     return self2.occurrences[result] = 0, result;
@@ -6856,32 +7073,32 @@ var own = Object.hasOwnProperty, BananaSlug = class {
     this.occurrences = /* @__PURE__ */ Object.create(null);
   }
 };
-function slug(value2, maintainCase) {
-  return typeof value2 != "string" ? "" : (maintainCase || (value2 = value2.toLowerCase()), value2.replace(regex, "").replace(/ /g, "-"));
+function slug(value, maintainCase) {
+  return typeof value != "string" ? "" : (maintainCase || (value = value.toLowerCase()), value.replace(regex, "").replace(/ /g, "-"));
 }
 
 // src/blocks/blocks/Heading.tsx
-var slugs = new BananaSlug(), Heading2 = ({
+var slugs = new BananaSlug(), HeadingImpl = ({
   children,
   disableAnchor,
   ...props
 }) => {
   if (disableAnchor || typeof children != "string")
-    return React45.createElement(H2, null, children);
+    return React46.createElement(H2, null, children);
   let tagID = slugs.slug(children.toLowerCase());
-  return React45.createElement(HeaderMdx, { as: "h2", id: tagID, ...props }, children);
-};
+  return React46.createElement(HeaderMdx, { as: "h2", id: tagID, ...props }, children);
+}, Heading2 = withMdxComponentOverride("Heading", HeadingImpl);
 
 // src/blocks/blocks/Subheading.tsx
-var Subheading = ({ children, disableAnchor }) => {
+var SubheadingImpl = ({ children, disableAnchor }) => {
   if (disableAnchor || typeof children != "string")
-    return React46.createElement(H3, null, children);
+    return React47.createElement(H3, null, children);
   let tagID = slugs.slug(children.toLowerCase());
-  return React46.createElement(HeaderMdx, { as: "h3", id: tagID }, children);
-};
+  return React47.createElement(HeaderMdx, { as: "h3", id: tagID }, children);
+}, Subheading = withMdxComponentOverride("Subheading", SubheadingImpl);
 
 // src/blocks/blocks/DocsStory.tsx
-var DocsStory = ({
+var DocsStoryImpl = ({
   of,
   expanded = !0,
   withToolbar: withToolbarProp = !1,
@@ -6889,7 +7106,7 @@ var DocsStory = ({
   __primary = !1
 }) => {
   let { story } = useOf(of || "story", ["story"]), withToolbar = story.parameters.docs?.canvas?.withToolbar ?? withToolbarProp;
-  return React47.createElement(Anchor, { storyId: __primary ? `primary--${story.id}` : story.id }, expanded && React47.createElement(React47.Fragment, null, React47.createElement(Subheading, null, story.name), React47.createElement(DescriptionContainer, { of })), React47.createElement(
+  return React48.createElement(Anchor, { storyId: __primary ? `primary--${story.id}` : story.id }, expanded && React48.createElement(React48.Fragment, null, React48.createElement(Subheading, null, story.name), React48.createElement(Description2, { of })), React48.createElement(
     Canvas,
     {
       of,
@@ -6898,16 +7115,16 @@ var DocsStory = ({
       source: { __forceInitialArgs }
     }
   ));
-};
+}, DocsStory = withMdxComponentOverride("DocsStory", DocsStoryImpl);
 
 // src/blocks/blocks/Primary.tsx
-var Primary = () => {
+var PrimaryImpl = () => {
   let primaryStory = usePrimaryStory();
-  return primaryStory ? React48.createElement(DocsStory, { of: primaryStory.moduleExport, expanded: !1, __primary: !0, withToolbar: !0 }) : null;
-};
+  return primaryStory ? React49.createElement(DocsStory, { of: primaryStory.moduleExport, expanded: !1, __primary: !0, withToolbar: !0 }) : null;
+}, Primary = withMdxComponentOverride("Primary", PrimaryImpl);
 
 // src/blocks/blocks/Stories.tsx
-import React49, { useContext as useContext9 } from "react";
+import React50, { useContext as useContext9 } from "react";
 import { Tag as Tag2 } from "storybook/internal/preview-api";
 import { styled as styled29 } from "storybook/theming";
 var StyledHeading = styled29(Heading2)(({ theme }) => ({
@@ -6923,17 +7140,17 @@ var StyledHeading = styled29(Heading2)(({ theme }) => ({
     // specificity issue
     marginTop: "56px"
   }
-})), Stories = ({ title = "Stories", includePrimary = !0 }) => {
+})), StoriesImpl = ({ title = "Stories", includePrimary = !0 }) => {
   let { componentStories, projectAnnotations, getStoryContext } = useContext9(DocsContext), stories = componentStories(), { stories: { filter } = { filter: void 0 } } = projectAnnotations.parameters?.docs || {};
-  return filter && (stories = stories.filter((story) => filter(story, getStoryContext(story)))), stories.some((story) => story.tags?.includes(Tag2.AUTODOCS)) && (stories = stories.filter((story) => story.tags?.includes(Tag2.AUTODOCS) && !story.usesMount)), includePrimary || (stories = stories.slice(1)), !stories || stories.length === 0 ? null : React49.createElement(React49.Fragment, null, typeof title == "string" ? React49.createElement(StyledHeading, null, title) : title, stories.map(
-    (story) => story && React49.createElement(DocsStory, { key: story.id, of: story.moduleExport, expanded: !0, __forceInitialArgs: !0 })
+  return filter && (stories = stories.filter((story) => filter(story, getStoryContext(story)))), stories.some((story) => story.tags?.includes(Tag2.AUTODOCS)) && (stories = stories.filter((story) => story.tags?.includes(Tag2.AUTODOCS) && !story.usesMount)), includePrimary || (stories = stories.slice(1)), !stories || stories.length === 0 ? null : React50.createElement(React50.Fragment, null, typeof title == "string" ? React50.createElement(StyledHeading, null, title) : title, stories.map(
+    (story) => story && React50.createElement(DocsStory, { key: story.id, of: story.moduleExport, expanded: !0, __forceInitialArgs: !0 })
   ));
-};
+}, Stories = withMdxComponentOverride("Stories", StoriesImpl);
 
 // src/blocks/blocks/Subtitle.tsx
-import React50 from "react";
+import React51 from "react";
 import { deprecate } from "storybook/internal/client-logger";
-var DEPRECATION_MIGRATION_LINK = "https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle", Subtitle2 = (props) => {
+var DEPRECATION_MIGRATION_LINK = "https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle", SubtitleImpl = (props) => {
   let { of, children } = props;
   if ("of" in props && of === void 0)
     throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
@@ -6949,15 +7166,15 @@ var DEPRECATION_MIGRATION_LINK = "https://github.com/storybookjs/storybook/blob/
     `Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
   );
   let content = children || docs?.subtitle || componentSubtitle;
-  return content ? React50.createElement(Subtitle, { className: "sbdocs-subtitle sb-unstyled" }, content) : null;
-};
+  return content ? React51.createElement(Subtitle, { className: "sbdocs-subtitle sb-unstyled" }, content) : null;
+}, Subtitle2 = withMdxComponentOverride("Subtitle", SubtitleImpl);
 
 // src/blocks/blocks/Title.tsx
-import React51 from "react";
+import React52 from "react";
 var STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/, extractTitle = (title) => {
   let groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
   return groups?.[groups?.length - 1] || title;
-}, Title3 = (props) => {
+}, TitleImpl = (props) => {
   let { children, of } = props;
   if ("of" in props && of === void 0)
     throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
@@ -6969,13 +7186,13 @@ var STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/, extractTitle = (title) => {
       throw error;
   }
   let content = children || extractTitle(preparedMeta?.title || "");
-  return content ? React51.createElement(Title, { className: "sbdocs-title sb-unstyled" }, content) : null;
-};
+  return content ? React52.createElement(Title, { className: "sbdocs-title sb-unstyled" }, content) : null;
+}, Title3 = withMdxComponentOverride("Title", TitleImpl);
 
 // src/blocks/blocks/DocsPage.tsx
 var DocsPage = () => {
   let resolvedOf = useOf("meta", ["meta"]), { stories } = resolvedOf.csfFile, isSingleStory = Object.keys(stories).length === 1;
-  return React52.createElement(React52.Fragment, null, React52.createElement(Title3, null), React52.createElement(Subtitle2, null), React52.createElement(DescriptionContainer, { of: "meta" }), isSingleStory ? React52.createElement(DescriptionContainer, { of: "story" }) : null, React52.createElement(Primary, null), React52.createElement(Controls3, null), isSingleStory ? null : React52.createElement(Stories, null));
+  return React53.createElement(React53.Fragment, null, React53.createElement(Title3, null), React53.createElement(Subtitle2, null), React53.createElement(Description2, { of: "meta" }), isSingleStory ? React53.createElement(Description2, { of: "story" }) : null, React53.createElement(Primary, null), React53.createElement(Controls3, null), isSingleStory ? null : React53.createElement(Stories, null));
 };
 
 // src/blocks/blocks/Docs.tsx
@@ -6984,11 +7201,11 @@ function Docs({
   docsParameter
 }) {
   let Container2 = docsParameter.container || DocsContainer, Page = docsParameter.page || DocsPage;
-  return React53.createElement(Container2, { context, theme: docsParameter.theme }, React53.createElement(Page, null));
+  return React54.createElement(Container2, { context, theme: docsParameter.theme }, React54.createElement(Page, null));
 }
 
 // src/blocks/blocks/external/ExternalDocs.tsx
-import React54, { useRef as useRef6 } from "react";
+import React55, { useRef as useRef6 } from "react";
 import { composeConfigs as composeConfigs2 } from "storybook/preview-api";
 
 // src/blocks/blocks/external/ExternalPreview.ts
@@ -7080,34 +7297,34 @@ function ExternalDocs({
     ...projectAnnotations.parameters?.docs,
     page: () => children
   };
-  return React54.createElement(Docs, { docsParameter, context: preview2.docsContext() });
+  return React55.createElement(Docs, { docsParameter, context: preview2.docsContext() });
 }
 
 // src/blocks/blocks/external/ExternalDocsContainer.tsx
-import React55 from "react";
+import React56 from "react";
 import { ThemeProvider as ThemeProvider2, ensure, themes } from "storybook/theming";
-var preview, ExternalDocsContainer = ({ projectAnnotations, children }) => (preview || (preview = new ExternalPreview(projectAnnotations)), React55.createElement(DocsContext.Provider, { value: preview.docsContext() }, React55.createElement(ThemeProvider2, { theme: ensure(themes.light) }, children)));
+var preview, ExternalDocsContainer = ({ projectAnnotations, children }) => (preview || (preview = new ExternalPreview(projectAnnotations)), React56.createElement(DocsContext.Provider, { value: preview.docsContext() }, React56.createElement(ThemeProvider2, { theme: ensure(themes.light) }, children)));
 
 // src/blocks/blocks/Meta.tsx
-import React56, { useContext as useContext10 } from "react";
+import React57, { useContext as useContext10 } from "react";
 var Meta = ({ of }) => {
   let context = useContext10(DocsContext);
   of && context.referenceMeta(of, !0);
   try {
     let primary = context.storyById();
-    return React56.createElement(Anchor, { storyId: primary.id });
+    return React57.createElement(Anchor, { storyId: primary.id });
   } catch {
     return null;
   }
 };
 
 // src/blocks/blocks/Unstyled.tsx
-import React57 from "react";
-var Unstyled = (props) => React57.createElement("div", { ...props, className: "sb-unstyled" });
+import React58 from "react";
+var UnstyledImpl = (props) => React58.createElement("div", { ...props, className: "sb-unstyled" }), Unstyled = withMdxComponentOverride("Unstyled", UnstyledImpl);
 
 // src/blocks/blocks/Wrapper.tsx
-import React58 from "react";
-var Wrapper9 = ({ children }) => React58.createElement("div", { style: { fontFamily: "sans-serif" } }, children);
+import React59 from "react";
+var WrapperImpl = ({ children }) => React59.createElement("div", { style: { fontFamily: "sans-serif" } }, children), Wrapper9 = withMdxComponentOverride("Wrapper", WrapperImpl);
 
 // src/blocks/blocks/types.ts
 var PRIMARY_STORY = "^";
@@ -7124,7 +7341,7 @@ export {
   ColorPalette,
   Controls3 as Controls,
   DateControl,
-  DescriptionContainer as Description,
+  Description2 as Description,
   DescriptionType,
   Docs,
   DocsContainer,