@storybook/addon-docs 10.5.0-alpha.1 → 10.5.0-alpha.11

package/dist/blocks.js

@@ -1,7 +1,7 @@
 import {
   getControlId,
   getControlSetterButtonId
-} from "./_browser-chunks/chunk-S2IHWCOG.js";
+} from "./_browser-chunks/chunk-QQBDHPVZ.js";
 import {
   EmptyBlock,
   Source,
@@ -11,10 +11,10 @@ import {
   curriedTransparentize$1,
   rgba
 } from "./_browser-chunks/chunk-SPXYZZB5.js";
-import "./_browser-chunks/chunk-SL3VIQZ3.js";
+import "./_browser-chunks/chunk-UAWMPV5J.js";
 
 // src/blocks/components/ArgsTable/ArgsTable.tsx
-import React23 from "react";
+import React23, { useCallback as useCallback6, useEffect as useEffect8, useRef as useRef5, useState as useState10 } from "react";
 import { once } from "storybook/internal/client-logger";
 import { Button as Button5, Link as Link3, ResetWrapper } from "storybook/internal/components";
 import { includeConditionalArg } from "storybook/internal/csf";
@@ -189,7 +189,7 @@ var CASE_SPLIT_PATTERN = new RegExp("\\p{Lu}?\\p{Ll}+|[0-9]+|\\p{Lu}+(?!\\p{Ll})
 import { styled as styled18 } from "storybook/theming";
 
 // src/blocks/components/ArgsTable/ArgRow.tsx
-import React19, { useState as useState8 } from "react";
+import React19 from "react";
 import { codeCommon as codeCommon3 } from "storybook/internal/components";
 
 // ../../../node_modules/markdown-to-jsx/dist/index.modern.js
@@ -569,7 +569,7 @@ var index_modern_default = (n2) => {
 };
 
 // src/blocks/components/ArgsTable/ArgRow.tsx
-import { styled as styled14 } from "storybook/theming";
+import { srOnlyStyles as srOnlyStyles2, srOnlyUnsetStyles, styled as styled14 } from "storybook/theming";
 
 // src/blocks/components/ArgsTable/ArgControl.tsx
 import React16, { useCallback as useCallback5, useEffect as useEffect6, useState as useState6 } from "react";
@@ -663,11 +663,13 @@ var getBooleanControlStyles = (theme) => ({
 }), Label = styled.label(({ theme }) => getBooleanControlStyles(theme)), parse = (value) => value === "true", BooleanControl = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   onBlur,
   onFocus,
-  argType
+  argType,
+  required
 }) => {
   let onSetFalse = useCallback(() => onChange(!1), [onChange]), readonly = !!argType?.table?.readonly;
   if (value === void 0)
@@ -677,13 +679,13 @@ var getBooleanControlStyles = (theme) => ({
         ariaLabel: !1,
         variant: "outline",
         size: "medium",
-        id: getControlSetterButtonId(name, storyId),
+        id: getControlSetterButtonId(name, storyId, controlsId),
         onClick: onSetFalse,
         disabled: readonly
       },
       "Set boolean"
     );
-  let controlId = getControlId(name, storyId), parsedValue = typeof value == "string" ? parse(value) : value;
+  let controlId = getControlId(name, storyId, controlsId), parsedValue = typeof value == "string" ? parse(value) : value;
   return React.createElement(Label, { "aria-disabled": readonly, htmlFor: controlId, "aria-label": name }, React.createElement(
     "input",
     {
@@ -693,6 +695,7 @@ var getBooleanControlStyles = (theme) => ({
       checked: parsedValue,
       role: "switch",
       disabled: readonly,
+      "aria-required": required || void 0,
       name,
       onBlur,
       onFocus
@@ -741,11 +744,13 @@ var parseDate = (value) => {
 }), DateControl = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   onFocus,
   onBlur,
-  argType
+  argType,
+  required
 }) => {
   let [valid, setValid] = useState(!0), dateRef = useRef(), timeRef = useRef(), readonly = !!argType?.table?.readonly;
   useEffect(() => {
@@ -765,7 +770,7 @@ var parseDate = (value) => {
     result.setHours(parsed.getHours()), result.setMinutes(parsed.getMinutes());
     let time = result.getTime();
     time && onChange(time), setValid(!!time);
-  }, controlId = getControlId(name, storyId);
+  }, controlId = getControlId(name, storyId, controlsId);
   return React2.createElement(FlexSpaced, null, React2.createElement("legend", { className: "sb-sr-only" }, name), React2.createElement("label", { htmlFor: `${controlId}-date`, className: "sb-sr-only" }, "Date"), React2.createElement(
     FormInput,
     {
@@ -775,6 +780,7 @@ var parseDate = (value) => {
       id: `${controlId}-date`,
       name: `${controlId}-date`,
       readOnly: readonly,
+      "aria-required": required || void 0,
       onChange: onDateChange,
       onFocus,
       onBlur
@@ -788,6 +794,7 @@ var parseDate = (value) => {
       ref: timeRef,
       onChange: onTimeChange,
       readOnly: readonly,
+      "aria-required": required || void 0,
       onFocus,
       onBlur
     }
@@ -808,6 +815,7 @@ var Wrapper = styled3.label({
 })), NumberControl = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   min,
@@ -815,7 +823,8 @@ var Wrapper = styled3.label({
   step,
   onBlur,
   onFocus,
-  argType
+  argType,
+  required
 }) => {
   let [inputValue, setInputValue] = useState2(typeof value == "number" ? value : ""), [forceVisible, setForceVisible] = useState2(!1), [parseError, setParseError] = useState2(null), readonly = !!argType?.table?.readonly, handleChange = useCallback2(
     (event) => {
@@ -843,7 +852,7 @@ var Wrapper = styled3.label({
       ariaLabel: !1,
       variant: "outline",
       size: "medium",
-      id: getControlSetterButtonId(name, storyId),
+      id: getControlSetterButtonId(name, storyId, controlsId),
       onClick: onForceVisible,
       disabled: readonly
     },
@@ -852,7 +861,7 @@ var Wrapper = styled3.label({
     FormInput2,
     {
       ref: htmlElRef,
-      id: getControlId(name, storyId),
+      id: getControlId(name, storyId, controlsId),
       type: "number",
       onChange: handleChange,
       size: "flex",
@@ -860,6 +869,7 @@ var Wrapper = styled3.label({
       value: inputValue,
       valid: parseError ? "error" : void 0,
       autoFocus: forceVisible,
+      "aria-required": required || void 0,
       readOnly: readonly,
       name,
       min,
@@ -921,11 +931,13 @@ var Wrapper2 = styled4.fieldset(
 })), CheckboxControl = ({
   name,
   storyId,
+  controlsId,
   options,
   value,
   onChange,
   isInline,
-  argType
+  argType,
+  required
 }) => {
   if (!options)
     return logger.warn(`Checkbox with no options: ${name}`), React4.createElement(React4.Fragment, null, "-");
@@ -936,8 +948,8 @@ var Wrapper2 = styled4.fieldset(
   useEffect3(() => {
     setSelected(selectedKeys(value || [], options));
   }, [value]);
-  let controlId = getControlId(name, storyId);
-  return React4.createElement(Wrapper2, { $isInline: isInline }, React4.createElement("legend", { className: "sb-sr-only" }, name), Object.keys(options).map((key, index) => {
+  let controlId = getControlId(name, storyId, controlsId);
+  return React4.createElement(Wrapper2, { $isInline: isInline }, React4.createElement("legend", { className: "sb-sr-only" }, name, required ? " (required)" : ""), Object.keys(options).map((key, index) => {
     let id = `${controlId}-${index}`;
     return React4.createElement(Label2, { key: id, htmlFor: id, $readOnly: readonly }, React4.createElement(
       "input",
@@ -993,16 +1005,18 @@ var Wrapper3 = styled5.fieldset(
 })), RadioControl = ({
   name,
   storyId,
+  controlsId,
   options,
   value,
   onChange,
   isInline,
-  argType
+  argType,
+  required
 }) => {
   if (!options)
     return logger2.warn(`Radio with no options: ${name}`), React5.createElement(React5.Fragment, null, "-");
-  let selection = selectedKey(value, options), controlId = getControlId(name, storyId), readonly = !!argType?.table?.readonly;
-  return React5.createElement(Wrapper3, { isInline }, React5.createElement("legend", { className: "sb-sr-only" }, name), Object.keys(options).map((key, index) => {
+  let selection = selectedKey(value, options), controlId = getControlId(name, storyId, controlsId), readonly = !!argType?.table?.readonly;
+  return React5.createElement(Wrapper3, { isInline }, React5.createElement("legend", { className: "sb-sr-only" }, name, required ? " (required)" : ""), Object.keys(options).map((key, index) => {
     let id = `${controlId}-${index}`;
     return React5.createElement(Label3, { key: id, htmlFor: id, $readOnly: readonly }, React5.createElement(
       "input",
@@ -1095,16 +1109,45 @@ var styleResets = {
       fill: theme.textMutedColor
     }
   }
-})), NO_SELECTION = "Choose option...", SingleSelect = ({ name, storyId, value, options, onChange, argType }) => {
+})), NO_SELECTION = "Choose option...", SingleSelect = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  options,
+  onChange,
+  argType,
+  required
+}) => {
   let handleChange = (e2) => {
     onChange(options[e2.currentTarget.value]);
-  }, selection = selectedKey(value, options) || NO_SELECTION, controlId = getControlId(name, storyId), 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, storyId, value, options, onChange, argType }) => {
+  }, selection = selectedKey(value, options) || NO_SELECTION, controlId = getControlId(name, storyId, controlsId), 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,
+      "aria-required": required || void 0
+    },
+    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,
+  storyId,
+  controlsId,
+  value,
+  options,
+  onChange,
+  argType,
+  required
+}) => {
   let handleChange = (e2) => {
     let selection2 = Array.from(e2.currentTarget.options).filter((option) => option.selected).map((option) => option.value);
     onChange(selectedValues(selection2, options));
-  }, selection = selectedKeys(value, options), controlId = getControlId(name, storyId), readonly = !!argType?.table?.readonly;
+  }, selection = selectedKeys(value, options), controlId = getControlId(name, storyId, controlsId), readonly = !!argType?.table?.readonly;
   return React6.createElement(SelectWrapper, null, React6.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React6.createElement(
     OptionsSelect,
     {
@@ -1112,7 +1155,8 @@ var styleResets = {
       id: controlId,
       multiple: !0,
       value: selection,
-      onChange: handleChange
+      onChange: handleChange,
+      "aria-required": required || void 0
     },
     Object.keys(options).map((key) => React6.createElement("option", { key, value: key }, key))
   ));
@@ -1122,7 +1166,10 @@ var styleResets = {
 };
 
 // src/blocks/controls/options/Options.tsx
-var normalizeOptions = (options, labels) => Array.isArray(options) ? options.reduce((acc, item) => (acc[labels?.[item] || String(item)] = item, acc), {}) : options, Controls = {
+var normalizeOptions = (options, labels) => Array.isArray(options) ? options.reduce((acc, item) => {
+  let label = labels != null && !Array.isArray(labels) && typeof labels[item] == "string" ? labels[item] : String(item);
+  return acc[label] = item, acc;
+}, {}) : options, Controls = {
   check: CheckboxControl,
   "inline-check": CheckboxControl,
   radio: RadioControl,
@@ -1146,7 +1193,7 @@ var normalizeOptions = (options, labels) => Array.isArray(options) ? options.red
 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, EditIcon, SubtractIcon } from "@storybook/icons";
-import { styled as styled8, useTheme } from "storybook/theming";
+import { styled as styled8 } from "storybook/theming";
 
 // src/blocks/controls/react-editable-json-tree/index.tsx
 import React10, { Component as Component2 } from "react";
@@ -2401,8 +2448,16 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
   event.currentTarget.dispatchEvent(new globalWindow.KeyboardEvent("keydown", ENTER_EVENT));
 }, selectValue = (event) => {
   event.currentTarget.select();
-}, ObjectControl = ({ name, storyId, 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(
+}, ObjectControl = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  onChange,
+  argType,
+  required
+}) => {
+  let data = useMemo(() => value && cloneDeep(value), [value]), hasData = data != null, [showRaw, setShowRaw] = useState4(!hasData), hadDataRef = useRef3(hasData), [parseError, setParseError] = useState4(null), readonly = !!argType?.table?.readonly, updateRaw = useCallback3(
     (raw) => {
       try {
         raw && onChange(JSON.parse(raw)), setParseError(null);
@@ -2413,7 +2468,11 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
     [onChange]
   ), [forceVisible, setForceVisible] = useState4(!1), onForceVisible = useCallback3(() => {
     onChange({}), setForceVisible(!0);
-  }, [onChange, setForceVisible]), htmlElRef = useRef3(null);
+  }, [onChange, setForceVisible]);
+  useEffect4(() => {
+    !hadDataRef.current && hasData && showRaw && !forceVisible && setShowRaw(!1), hadDataRef.current = hasData;
+  }, [forceVisible, hasData, showRaw]);
+  let htmlElRef = useRef3(null);
   useEffect4(() => {
     forceVisible && htmlElRef.current && htmlElRef.current.select();
   }, [forceVisible]);
@@ -2424,16 +2483,16 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
       {
         ariaLabel: !1,
         disabled: readonly,
-        id: getControlSetterButtonId(name, storyId),
+        id: getControlSetterButtonId(name, storyId, controlsId),
         onClick: onForceVisible
       },
       "Set object"
     );
-  let rawJSONForm = React11.createElement(
+  let rawInputId = getControlId(name, storyId, controlsId), rawJSONForm = React11.createElement(React11.Fragment, null, React11.createElement("label", { htmlFor: rawInputId, className: "sb-sr-only" }, "Edit ", name, " as JSON"), React11.createElement(
     RawInput,
     {
       ref: htmlElRef,
-      id: getControlId(name, storyId),
+      id: rawInputId,
       minRows: 3,
       name,
       key: jsonString,
@@ -2442,9 +2501,10 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
       placeholder: "Edit JSON string...",
       autoFocus: forceVisible,
       valid: parseError ? "error" : void 0,
-      readOnly: readonly
+      readOnly: readonly,
+      "aria-required": required || void 0
     }
-  ), isObjectOrArray = Array.isArray(value) || typeof value == "object" && value?.constructor === Object;
+  )), isObjectOrArray = Array.isArray(value) || typeof value == "object" && value?.constructor === Object;
   return React11.createElement(Wrapper4, null, isObjectOrArray && React11.createElement(
     RawButton,
     {
@@ -2600,6 +2660,7 @@ function getNumberOfDecimalPlaces(number) {
 var RangeControl = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   min = 0,
@@ -2607,11 +2668,12 @@ var RangeControl = ({
   step = 1,
   onBlur,
   onFocus,
-  argType
+  argType,
+  required
 }) => {
   let handleChange = (event) => {
     onChange(parse2(event.target.value));
-  }, hasValue = value !== void 0, numberOFDecimalsPlaces = useMemo2(() => getNumberOfDecimalPlaces(step), [step]), readonly = !!argType?.table?.readonly, controlId = getControlId(name, storyId);
+  }, hasValue = value !== void 0, numberOFDecimalsPlaces = useMemo2(() => getNumberOfDecimalPlaces(step), [step]), readonly = !!argType?.table?.readonly, controlId = getControlId(name, storyId, controlsId);
   return React12.createElement(RangeWrapper, { readOnly: readonly }, React12.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React12.createElement(RangeLabel, null, min), React12.createElement(
     RangeInput,
     {
@@ -2619,6 +2681,7 @@ var RangeControl = ({
       type: "range",
       disabled: readonly,
       onChange: handleChange,
+      "aria-required": required || void 0,
       name,
       min,
       max,
@@ -2643,12 +2706,14 @@ var Wrapper5 = styled10.label({
 })), TextControl = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   onFocus,
   onBlur,
   maxLength,
-  argType
+  argType,
+  required
 }) => {
   let handleChange = (event) => {
     onChange(event.target.value);
@@ -2663,7 +2728,7 @@ var Wrapper5 = styled10.label({
         variant: "outline",
         size: "medium",
         disabled: readonly,
-        id: getControlSetterButtonId(name, storyId),
+        id: getControlSetterButtonId(name, storyId, controlsId),
         onClick: onForceVisible
       },
       "Set string"
@@ -2672,13 +2737,14 @@ var Wrapper5 = styled10.label({
   return React13.createElement(Wrapper5, null, React13.createElement(
     Form4.Textarea,
     {
-      id: getControlId(name, storyId),
+      id: getControlId(name, storyId, controlsId),
       maxLength,
       onChange: handleChange,
       disabled: readonly,
       size: "flex",
       placeholder: "Edit string...",
       autoFocus: forceVisible,
+      "aria-required": required || void 0,
       valid: isValid ? void 0 : "error",
       name,
       value: isValid ? value : "",
@@ -2704,9 +2770,11 @@ var FilesControl = ({
   onChange,
   name,
   storyId,
+  controlsId,
   accept = "image/*",
   value,
-  argType
+  argType,
+  required
 }) => {
   let inputElement = useRef4(null), readonly = argType?.control?.readOnly;
   function handleFileChange(e2) {
@@ -2718,7 +2786,7 @@ var FilesControl = ({
   useEffect5(() => {
     value == null && inputElement.current && (inputElement.current.value = "");
   }, [value, name]);
-  let controlId = getControlId(name, storyId);
+  let controlId = getControlId(name, storyId, controlsId);
   return React14.createElement(React14.Fragment, null, React14.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React14.createElement(
     FileInput,
     {
@@ -2730,13 +2798,14 @@ var FilesControl = ({
       disabled: readonly,
       onChange: handleFileChange,
       accept,
+      "aria-required": required || void 0,
       size: "flex"
     }
   ));
 };
 
 // src/blocks/controls/index.tsx
-var LazyColorControl = lazy(() => import("./_browser-chunks/Color-23OOGO2C.js")), ColorControl = (props) => React15.createElement(Suspense, { fallback: React15.createElement("div", null) }, React15.createElement(LazyColorControl, { ...props }));
+var LazyColorControl = lazy(() => import("./_browser-chunks/Color-6AOWCN3U.js")), ColorControl = (props) => React15.createElement(Suspense, { fallback: React15.createElement("div", null) }, React15.createElement(LazyColorControl, { ...props }));
 
 // src/blocks/components/ArgsTable/ArgControl.tsx
 var Controls2 = {
@@ -2755,7 +2824,14 @@ var Controls2 = {
   range: RangeControl,
   text: TextControl,
   file: FilesControl
-}, NoControl = () => React16.createElement(React16.Fragment, null, "-"), ArgControl = ({ row, arg, updateArgs, isHovered, storyId }) => {
+}, NoControl = () => React16.createElement(React16.Fragment, null, "-"), ArgControl = ({
+  row,
+  arg,
+  updateArgs,
+  isRequired,
+  storyId,
+  controlsId
+}) => {
   let { key, control } = row, [isFocused, setFocused] = useState6(!1), [boxedValue, setBoxedValue] = useState6({ value: arg });
   useEffect6(() => {
     isFocused || setBoxedValue({ value: arg });
@@ -2764,9 +2840,8 @@ var Controls2 = {
     (argVal) => (setBoxedValue({ value: argVal }), updateArgs({ [key]: argVal }), argVal),
     [updateArgs, key]
   ), onBlur = useCallback5(() => setFocused(!1), []), onFocus = useCallback5(() => setFocused(!0), []);
-  if (!control || control.disable) {
-    let canBeSetup = control?.disable !== !0 && row?.type?.name !== "function";
-    return isHovered && canBeSetup ? React16.createElement(
+  if (!control || control.disable)
+    return control?.disable !== !0 && row?.type?.name !== "function" ? React16.createElement(React16.Fragment, null, React16.createElement("span", { className: "sbdocs sbdocs-argcontrol-setup" }, React16.createElement(
       Link,
       {
         href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
@@ -2774,13 +2849,14 @@ var Controls2 = {
         withArrow: !0
       },
       "Setup controls"
-    ) : React16.createElement(NoControl, null);
-  }
+    )), React16.createElement("span", { className: "sbdocs sbdocs-argcontrol-placeholder" }, React16.createElement(NoControl, null))) : React16.createElement(NoControl, null);
   let props = {
     name: key,
     storyId,
+    controlsId,
     argType: row,
     value: boxedValue.value,
+    required: isRequired,
     onChange,
     onBlur,
     onFocus
@@ -3008,13 +3084,25 @@ var Name = styled14.span({ fontWeight: "bold" }), Required = styled14.span(({ th
   marginBottom: 12
 })), StyledTd = styled14.td(({ expandable }) => ({
   paddingLeft: expandable ? "40px !important" : "20px !important"
-})), 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);
+})), StyledTr = styled14.tr({
+  "span.sbdocs-argcontrol-setup": {
+    ...srOnlyStyles2
+  },
+  "&:hover, &:focus-within": {
+    "span.sbdocs-argcontrol-setup": {
+      ...srOnlyUnsetStyles
+    },
+    "span.sbdocs-argcontrol-placeholder": {
+      ...srOnlyStyles2
+    }
+  }
+}), toSummary = (value) => value && { summary: typeof value == "string" ? value : value.name }, ArgRow = (props) => {
+  let { row, updateArgs, compact: compact2, expandable, initialExpandedArgs, docsLang } = 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(StyledTr, null, React19.createElement(StyledTd, { expandable: expandable ?? !1 }, React19.createElement(Name, null, name), required ? React19.createElement(Required, { "aria-hidden": !0, title: "Required" }, "*") : null), compact2 ? null : React19.createElement("td", null, hasDescription && React19.createElement(Description, { lang: docsLang }, 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, isRequired: !!required })) : null);
 };
 
 // src/blocks/components/ArgsTable/Empty.tsx
-import React20, { useEffect as useEffect7, useState as useState9 } from "react";
+import React20, { useEffect as useEffect7, useState as useState8 } from "react";
 import { EmptyTabContent, Link as Link2 } from "storybook/internal/components";
 import { DocumentIcon } from "@storybook/icons";
 import { styled as styled15 } from "storybook/theming";
@@ -3034,7 +3122,7 @@ var Wrapper6 = styled15.div(({ inAddonPanel, theme }) => ({
   fontSize: theme.typography.size.s2 - 1,
   gap: 25
 })), Empty = ({ inAddonPanel }) => {
-  let [isLoading, setIsLoading] = useState9(!0);
+  let [isLoading, setIsLoading] = useState8(!0);
   return useEffect7(() => {
     let load = setTimeout(() => {
       setIsLoading(!1);
@@ -3043,9 +3131,9 @@ var Wrapper6 = styled15.div(({ inAddonPanel, theme }) => ({
   }, []), isLoading ? null : React20.createElement(Wrapper6, { inAddonPanel }, React20.createElement(
     EmptyTabContent,
     {
-      title: inAddonPanel ? "Interactive story playground" : "Args table with interactive controls couldn't be auto-generated",
-      description: React20.createElement(React20.Fragment, null, "Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically."),
-      footer: React20.createElement(Links, null, inAddonPanel && React20.createElement(React20.Fragment, null, React20.createElement(
+      title: "This story has no controls",
+      description: React20.createElement(React20.Fragment, null, "Storybook couldn't find or generate any controls for this story. Define", " ", React20.createElement("code", null, "args"), " or ", React20.createElement("code", null, "argTypes"), ", or configure docgen to let Storybook generate controls automatically."),
+      footer: React20.createElement(Links, null, React20.createElement(
         Link2,
         {
           href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
@@ -3054,22 +3142,13 @@ var Wrapper6 = styled15.div(({ inAddonPanel, theme }) => ({
         },
         React20.createElement(DocumentIcon, null),
         " Read docs"
-      )), !inAddonPanel && React20.createElement(
-        Link2,
-        {
-          href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
-          target: "_blank",
-          withArrow: !0
-        },
-        React20.createElement(DocumentIcon, null),
-        " Learn how to set that up"
       ))
     }
   ));
 };
 
 // src/blocks/components/ArgsTable/SectionRow.tsx
-import React21, { useState as useState10 } from "react";
+import React21, { useState as useState9 } from "react";
 import { ChevronDownIcon as ChevronDownIcon2, ChevronRightIcon } from "@storybook/icons";
 import { styled as styled16 } from "storybook/theming";
 var ExpanderIconDown = styled16(ChevronDownIcon2)(({ theme }) => ({
@@ -3114,7 +3193,7 @@ var ExpanderIconDown = styled16(ChevronDownIcon2)(({ theme }) => ({
   background: theme.background.app
 })), StyledTd2 = styled16.td({
   position: "relative"
-}), StyledTr = styled16.tr(({ theme }) => ({
+}), StyledTr2 = styled16.tr(({ theme }) => ({
   "&:hover > td": {
     backgroundColor: `${curriedLighten$1(5e-3, theme.background.app)} !important`,
     boxShadow: `${theme.color.mediumlight} 0 - 1px 0 0 inset`,
@@ -3143,8 +3222,8 @@ var ExpanderIconDown = styled16(ChevronDownIcon2)(({ theme }) => ({
   initialExpanded = !0,
   colSpan = 3
 }) => {
-  let [expanded, setExpanded] = useState10(initialExpanded), Level = level === "subsection" ? Subsection : Section, itemCount = children?.length || 0, caption = level === "subsection" ? `${itemCount} item${itemCount !== 1 ? "s" : ""}` : "", helperText = `${expanded ? "Hide" : "Show"} ${level === "subsection" ? itemCount : label} item${itemCount !== 1 ? "s" : ""}`;
-  return React21.createElement(React21.Fragment, null, React21.createElement(StyledTr, { title: helperText }, React21.createElement(Level, { colSpan: 1 }, React21.createElement(ClickIntercept, { onClick: (e2) => setExpanded(!expanded), tabIndex: 0 }, helperText), React21.createElement(FlexWrapper, null, expanded ? React21.createElement(ExpanderIconDown, null) : React21.createElement(ExpanderIconRight, null), label)), React21.createElement(StyledTd2, { colSpan: colSpan - 1 }, React21.createElement(
+  let [expanded, setExpanded] = useState9(initialExpanded), Level = level === "subsection" ? Subsection : Section, itemCount = children?.length || 0, caption = level === "subsection" ? `${itemCount} item${itemCount !== 1 ? "s" : ""}` : "", helperText = `${expanded ? "Hide" : "Show"} ${level === "subsection" ? itemCount : label} item${itemCount !== 1 ? "s" : ""}`;
+  return React21.createElement(React21.Fragment, null, React21.createElement(StyledTr2, { title: helperText }, React21.createElement(Level, { colSpan: 1 }, React21.createElement(ClickIntercept, { onClick: (e2) => setExpanded(!expanded), tabIndex: 0 }, helperText), React21.createElement(FlexWrapper, null, expanded ? React21.createElement(ExpanderIconDown, null) : React21.createElement(ExpanderIconRight, null), label)), React21.createElement(StyledTd2, { colSpan: colSpan - 1 }, React21.createElement(
     ClickIntercept,
     {
       onClick: (e2) => setExpanded(!expanded),
@@ -3403,15 +3482,23 @@ var sortFns = {
     initialExpandedArgs,
     sort = "none",
     isLoading,
-    storyId
-  } = props;
+    storyId,
+    controlsId,
+    docsLang
+  } = props, { rows, args, globals } = "rows" in props ? props : { rows: void 0, args: void 0, globals: void 0 }, isResettingRef = useRef5(!1), [isResetting, setIsResetting] = useState10(!1);
+  useEffect8(() => {
+    isResettingRef.current = !1, setIsResetting(!1);
+  }, [args]);
+  let handleResetClick = useCallback6(() => {
+    !isResettingRef.current && resetArgs && (isResettingRef.current = !0, setIsResetting(!0), resetArgs());
+  }, [resetArgs]);
   if ("error" in props) {
     let { error } = props;
     return React23.createElement(EmptyBlock, null, error, "\xA0", React23.createElement(Link3, { href: "http://storybook.js.org/docs/?ref=ui", target: "_blank", withArrow: !0 }, React23.createElement(DocumentIcon2, null), " Read the docs"));
   }
   if (isLoading)
     return React23.createElement(Skeleton, null);
-  let { rows, args, globals } = "rows" in props ? props : { rows: void 0, args: void 0, globals: void 0 }, groups = groupRows(
+  let groups = groupRows(
     pickBy(
       rows || {},
       (row) => !row?.table?.disable && safeIncludeConditionalArg(row, args || {}, globals || {})
@@ -3422,14 +3509,23 @@ var sortFns = {
     return React23.createElement(Empty, { inAddonPanel });
   let colSpan = 1;
   updateArgs && (colSpan += 1), compact2 || (colSpan += 2);
-  let expandable = Object.keys(groups.sections).length > 0, common = { updateArgs, compact: compact2, inAddonPanel, initialExpandedArgs, storyId };
+  let expandable = Object.keys(groups.sections).length > 0, common = {
+    updateArgs,
+    compact: compact2,
+    inAddonPanel,
+    initialExpandedArgs,
+    storyId,
+    controlsId
+  };
   return React23.createElement(ResetWrapper, null, React23.createElement(TablePositionWrapper, null, updateArgs && !isLoading && resetArgs && React23.createElement(ButtonPositionWrapper, null, React23.createElement(
     StyledButton,
     {
       variant: "ghost",
       padding: "small",
-      onClick: () => resetArgs(),
-      ariaLabel: "Reset controls"
+      onClick: handleResetClick,
+      disabled: isResetting,
+      ariaLabel: isResetting ? "Resetting controls..." : "Reset controls",
+      lang: "en"
     },
     React23.createElement(UndoIcon, null)
   )), React23.createElement(
@@ -3438,10 +3534,20 @@ var sortFns = {
       compact: compact2,
       inAddonPanel,
       inTabPanel,
-      className: "docblock-argstable sb-unstyled"
+      className: "docblock-argstable sb-unstyled",
+      lang: "en"
     },
     React23.createElement("thead", { className: "docblock-argstable-head" }, React23.createElement("tr", null, React23.createElement("th", null, React23.createElement("span", null, "Name")), compact2 ? null : React23.createElement("th", null, React23.createElement("span", null, "Description")), compact2 ? null : React23.createElement("th", null, React23.createElement("span", null, "Default")), updateArgs ? React23.createElement("th", null, React23.createElement("span", null, "Control")) : null)),
-    React23.createElement("tbody", { className: "docblock-argstable-body" }, groups.ungrouped.map((row) => React23.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => React23.createElement(
+    React23.createElement("tbody", { className: "docblock-argstable-body" }, groups.ungrouped.map((row) => React23.createElement(
+      ArgRow,
+      {
+        key: row.key,
+        row,
+        arg: args && args[row.key],
+        docsLang,
+        ...common
+      }
+    )), Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => React23.createElement(
       SectionRow,
       {
         key: subcategory,
@@ -3549,6 +3655,7 @@ var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-uns
     maxWidth: 1e3,
     width: "100%",
     minWidth: 0,
+    flex: 1,
     [toGlobalSelector("a")]: {
       ...reset,
       fontSize: "inherit",
@@ -3867,15 +3974,15 @@ var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-uns
   display: "flex",
   flexDirection: "row-reverse",
   justifyContent: "center",
-  padding: "4rem 20px",
+  padding: "4rem 40px",
   minHeight: "100vh",
   boxSizing: "border-box",
   gap: "3rem",
   [`@media (min-width: ${breakpoint}px)`]: {}
-})), DocsPageWrapper = ({ children, toc }) => React24.createElement(DocsWrapper, { className: "sbdocs sbdocs-wrapper" }, toc, React24.createElement(DocsContent, { className: "sbdocs sbdocs-content" }, children));
+})), DocsPageWrapper = ({ children, toc, lang = "en" }) => React24.createElement(DocsWrapper, { className: "sbdocs sbdocs-wrapper" }, toc, React24.createElement(DocsContent, { className: "sbdocs sbdocs-content", lang }, children));
 
 // src/blocks/components/Preview.tsx
-import React30, { Children, useCallback as useCallback6, useContext as useContext2, useMemo as useMemo3, useState as useState13 } from "react";
+import React30, { Children, useCallback as useCallback7, 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";
@@ -4205,14 +4312,14 @@ import React26, { useContext } from "react";
 import { InvalidBlockOfPropError } from "storybook/internal/preview-errors";
 
 // src/blocks/blocks/useStory.ts
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 function useStory(storyId, context) {
   let stories = useStories([storyId], context);
   return stories && stories[0];
 }
 function useStories(storyIds, context) {
   let [storiesById, setStories] = useState11({});
-  return useEffect8(() => {
+  return useEffect9(() => {
     Promise.all(
       storyIds.map(async (storyId) => {
         let story = await context.loadStory(storyId);
@@ -4235,7 +4342,7 @@ 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) => {
+var MDX_WRAPPED_BLOCK = /* @__PURE__ */ 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)
@@ -4295,7 +4402,7 @@ var getBlockBackgroundStyle = (theme) => ({
 });
 
 // src/blocks/components/Story.tsx
-import React28, { useEffect as useEffect9, useRef as useRef5, useState as useState12 } from "react";
+import React28, { useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
 import { ErrorFormatter, Loader } from "storybook/internal/components";
 import { styled as styled20 } from "storybook/theming";
 
@@ -4354,8 +4461,8 @@ var ZoomContext = createContext2({
 
 // src/blocks/components/Story.tsx
 var storyBlockIdFromId = ({ story, primary }) => `story--${story.id}${primary ? "--primary" : ""}`, InlineStory = (props) => {
-  let storyRef = useRef5(), [showLoader, setShowLoader] = useState12(!0), [error, setError] = useState12(), { story, height, autoplay, forceInitialArgs, renderStoryToElement } = props;
-  return useEffect9(() => {
+  let storyRef = useRef6(), [showLoader, setShowLoader] = useState12(!0), [error, setError] = useState12(), { story, height, autoplay, forceInitialArgs, renderStoryToElement } = props;
+  return useEffect10(() => {
     if (!(story && storyRef.current))
       return () => {
       };
@@ -4375,7 +4482,15 @@ var storyBlockIdFromId = ({ story, primary }) => `story--${story.id}${primary ?
     };
   }, [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 && React28.createElement(StorySkeleton, null), React28.createElement("div", { ref: storyRef, id: `${storyBlockIdFromId(props)}-inner`, "data-name": story.name }));
+  )} { 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,
+      lang: story.parameters?.htmlLang || "en"
+    }
+  ));
 }, IFrameStory = ({ story, height = "500px" }) => React28.createElement("div", { style: { width: "100%", height } }, React28.createElement(ZoomContext.Consumer, null, ({ scale }) => React28.createElement(
   IFrame,
   {
@@ -4429,63 +4544,72 @@ var AbsoluteBar = styled21(SharedToolbar)({
   resetZoom,
   onReloadStory,
   ...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, onReloadStory && React29.createElement(
-  Button6,
+}) => React29.createElement(
+  AbsoluteBar,
   {
-    padding: "small",
-    variant: "ghost",
-    key: "reload",
-    onClick: onReloadStory,
-    ariaLabel: "Reload story"
+    innerStyle: { gap: 4, paddingInline: 7, justifyContent: "space-between" },
+    lang: "en",
+    ...rest
   },
-  React29.createElement(SyncIcon, null)
-), React29.createElement(
-  Button6,
-  {
-    padding: "small",
-    variant: "ghost",
-    key: "zoomin",
-    onClick: (e2) => {
-      e2.preventDefault(), zoom(0.8);
+  React29.createElement(Wrapper7, { key: "left" }, isLoading ? [1, 2, 3].map((key) => React29.createElement(IconPlaceholder, { key })) : React29.createElement(React29.Fragment, null, onReloadStory && React29.createElement(
+    Button6,
+    {
+      padding: "small",
+      variant: "ghost",
+      key: "reload",
+      onClick: onReloadStory,
+      ariaLabel: "Reload story"
     },
-    ariaLabel: "Zoom in"
-  },
-  React29.createElement(ZoomIcon, null)
-), React29.createElement(
-  Button6,
-  {
-    padding: "small",
-    variant: "ghost",
-    key: "zoomout",
-    onClick: (e2) => {
-      e2.preventDefault(), zoom(1.25);
+    React29.createElement(SyncIcon, null)
+  ), React29.createElement(
+    Button6,
+    {
+      padding: "small",
+      variant: "ghost",
+      key: "zoomin",
+      onClick: (e2) => {
+        e2.preventDefault(), zoom(0.8);
+      },
+      ariaLabel: "Zoom in"
     },
-    ariaLabel: "Zoom out"
-  },
-  React29.createElement(ZoomOutIcon, null)
-), React29.createElement(
-  Button6,
-  {
-    padding: "small",
-    variant: "ghost",
-    key: "zoomreset",
-    onClick: (e2) => {
-      e2.preventDefault(), resetZoom();
+    React29.createElement(ZoomIcon, null)
+  ), React29.createElement(
+    Button6,
+    {
+      padding: "small",
+      variant: "ghost",
+      key: "zoomout",
+      onClick: (e2) => {
+        e2.preventDefault(), zoom(1.25);
+      },
+      ariaLabel: "Zoom out"
     },
-    ariaLabel: "Reset zoom"
-  },
-  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,
-    padding: "small",
-    variant: "ghost",
-    key: "opener",
-    ariaLabel: "Open canvas in new tab"
-  },
-  React29.createElement("a", { href: getStoryHref(storyId), target: "_blank", rel: "noopener noreferrer" }, React29.createElement(ShareAltIcon, null))
-)));
+    React29.createElement(ZoomOutIcon, null)
+  ), React29.createElement(
+    Button6,
+    {
+      padding: "small",
+      variant: "ghost",
+      key: "zoomreset",
+      onClick: (e2) => {
+        e2.preventDefault(), resetZoom();
+      },
+      ariaLabel: "Reset zoom"
+    },
+    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,
+      padding: "small",
+      variant: "ghost",
+      key: "opener",
+      ariaLabel: "Open canvas in new tab"
+    },
+    React29.createElement("a", { href: getStoryHref(storyId), target: "_blank", rel: "noopener noreferrer" }, React29.createElement(ShareAltIcon, null))
+  ))
+);
 
 // src/blocks/components/Preview.tsx
 var ChildrenContainer = styled22.div(
@@ -4577,10 +4701,10 @@ var PositionedToolbar = styled22(Toolbar)({
   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) => {
+  ), sourceId = $bdb11010cef70236$export$f680877a34711e37(), previewClasses = [className].concat(["sbdocs", "sbdocs-preview", "sb-unstyled"]), context = useContext2(DocsContext), copyToClipboard = useCallback7(async (text) => {
     let { createCopyToClipboardFunction } = await import("storybook/internal/components");
     await createCopyToClipboardFunction()(text);
-  }, []), handleCopyCode = useCallback6(async () => {
+  }, []), handleCopyCode = useCallback7(async () => {
     try {
       await copyToClipboard(withSource?.code ?? ""), setCopied("Copied!");
     } catch (err) {
@@ -4622,6 +4746,7 @@ var PositionedToolbar = styled22(Toolbar)({
   ), (withSource || additionalActionItems.length > 0) && React30.createElement(ActionBar, { className: "sbdocs sbdocs-preview-actions", innerStyle: { paddingInline: 0 } }, hasSourceError && React30.createElement(
     Button7,
     {
+      lang: "en",
       ariaLabel: !1,
       disabled: !0,
       variant: "ghost",
@@ -4632,6 +4757,7 @@ var PositionedToolbar = styled22(Toolbar)({
   ), hasValidSource && React30.createElement(React30.Fragment, null, React30.createElement(
     ToggleButton2,
     {
+      lang: "en",
       ariaLabel: !1,
       pressed: expanded,
       "aria-expanded": expanded,
@@ -4643,17 +4769,20 @@ var PositionedToolbar = styled22(Toolbar)({
     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
-  ))));
+  ), React30.createElement(Button7, { lang: "en", ariaLabel: !1, variant: "ghost", onClick: handleCopyCode }, React30.createElement(CopyIcon, null), " ", copied ?? "Copy code")), additionalActionItems.map(
+    ({ title, ariaLabel, className: className2, onClick, disabled }, index) => React30.createElement(
+      Button7,
+      {
+        key: index,
+        ariaLabel: ariaLabel ?? !1,
+        className: className2,
+        onClick,
+        disabled: !!disabled,
+        variant: "ghost"
+      },
+      title
+    )
+  )));
 }, StyledPreview = styled22(Preview)(() => ({
   ".docs-story": {
     paddingTop: 32,
@@ -4671,14 +4800,14 @@ var StyledTabsView = styled23(TabsView)({
   let entries = Object.entries(tabs);
   if (entries.length === 1)
     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 React31.createElement(ArgsTable, { inTabPanel: !0, key: `prop_table_${label}`, ...table, ...argsTableProps });
-    }
-  }));
+  let tabsFromEntries = entries.map(([label, table], index) => {
+    let argsTableProps = index === 0 ? props : { sort: props.sort, docsLang: props.docsLang };
+    return {
+      id: `prop_table_div_${label}`,
+      title: label,
+      children: React31.createElement(ArgsTable, { inTabPanel: !0, ...table, ...argsTableProps })
+    };
+  });
   return React31.createElement(StyledTabsView, { tabs: tabsFromEntries });
 };
 
@@ -4869,7 +4998,7 @@ var ItemLabel = styled26.div(({ theme }) => ({
 }), 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 React35, { useEffect as useEffect10 } from "react";
+import React35, { useEffect as useEffect11 } from "react";
 import { NAVIGATE_URL } from "storybook/internal/core-events";
 import { styled as styled27 } from "storybook/theming";
 
@@ -5457,7 +5586,16 @@ var Aside = styled27.aside(() => ({
   color: theme.color.defaultText,
   textTransform: "uppercase",
   marginBottom: 10
-})), 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 = ({
+})), Title2 = ({ headingId, title }) => typeof title == "string" || !title ? React35.createElement(
+  Heading,
+  {
+    as: "h2",
+    id: headingId,
+    className: title ? "" : "sb-sr-only",
+    lang: title ? void 0 : "en"
+  },
+  title || "Table of contents"
+) : React35.createElement("div", { id: headingId }, title), TableOfContents = ({
   title,
   disable,
   headingSelector,
@@ -5467,7 +5605,7 @@ var Aside = styled27.aside(() => ({
   channel,
   className
 }) => {
-  useEffect10(() => {
+  useEffect11(() => {
     if (disable)
       return () => {
       };
@@ -5502,10 +5640,110 @@ 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 React37 from "react";
+import React37, { useContext as useContext4 } from "react";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError2 } from "storybook/internal/preview-errors";
 import { filterArgTypes } from "storybook/preview-api";
 
+// src/blocks/blocks/argTypesShared.ts
+import {
+  getServiceSubcomponentArgTypes,
+  mergeServiceArgTypes
+} from "storybook/internal/docs-tools";
+
+// src/blocks/blocks/use-service-docgen.ts
+import { getService } from "storybook/preview-api";
+
+// src/blocks/blocks/use-query-subscription.ts
+import { useCallback as useCallback8, useRef as useRef7 } from "react";
+import { seedQueryState } from "storybook/open-service";
+
+// src/blocks/blocks/useSyncExternalStoreShim.ts
+import { useEffect as useEffect12, useLayoutEffect, useState as useState14 } from "react";
+function useSyncExternalStoreShim(subscribe, getSnapshot) {
+  let value = getSnapshot(), [{ inst }, forceUpdate] = useState14({ inst: { value, getSnapshot } });
+  return useLayoutEffect(() => {
+    inst.value = value, inst.getSnapshot = getSnapshot, didSnapshotChange(inst) && forceUpdate({ inst });
+  }, [subscribe, value, getSnapshot]), useEffect12(() => (didSnapshotChange(inst) && forceUpdate({ inst }), subscribe(() => {
+    didSnapshotChange(inst) && forceUpdate({ inst });
+  })), [subscribe]), value;
+}
+function didSnapshotChange(inst) {
+  let latestGetSnapshot = inst.getSnapshot, prevValue = inst.value;
+  try {
+    let nextValue = latestGetSnapshot();
+    return !Object.is(prevValue, nextValue);
+  } catch {
+    return !0;
+  }
+}
+
+// src/blocks/blocks/use-query-subscription.ts
+function useQuerySubscription(cacheKey, query, input, selector) {
+  let cache = useRef7(void 0);
+  (cache.current?.key !== cacheKey || cache.current.selector !== selector) && (cache.current = {
+    key: cacheKey,
+    selector,
+    state: selector ? seedQueryState(query, input, selector) : seedQueryState(query, input)
+  });
+  let inputRef = useRef7(input);
+  inputRef.current = input;
+  let subscribe = useCallback8(
+    (listener) => {
+      let onQueryState = (state) => {
+        cache.current = { key: cacheKey, selector, state }, listener();
+      };
+      return selector ? query.subscribe(inputRef.current, selector, onQueryState) : query.subscribe(inputRef.current, onQueryState);
+    },
+    [query, cacheKey, selector]
+  ), getSnapshot = useCallback8(() => cache.current.state, []);
+  return useSyncExternalStoreShim(subscribe, getSnapshot);
+}
+
+// src/blocks/blocks/use-service-docgen.ts
+function useServiceDocgen(id) {
+  let service = getService("core/docgen");
+  return useQuerySubscription(id, service.queries.docgen, { id });
+}
+
+// src/blocks/blocks/argTypesShared.ts
+function extractComponentArgTypes(component, parameters) {
+  let { extractArgTypes } = parameters.docs || {};
+  if (!extractArgTypes)
+    throw new Error("Args unsupported. See Args documentation for your framework." /* ARGS_UNSUPPORTED */);
+  return extractArgTypes(component);
+}
+function extractSubcomponentArgTypes(subcomponents, parameters) {
+  return Object.fromEntries(
+    Object.entries(subcomponents || {}).map(([key, comp]) => [
+      key,
+      extractComponentArgTypes(comp, parameters)
+    ])
+  );
+}
+function useDocgenServiceRows({
+  componentId,
+  storyId,
+  parameters,
+  initialArgs,
+  customArgTypes
+}) {
+  let { data: servicePayload, isInitialLoading } = useServiceDocgen(componentId);
+  return servicePayload ? {
+    rows: {
+      serviceComponentName: servicePayload.name,
+      mainRows: mergeServiceArgTypes({
+        payload: servicePayload,
+        storyId: storyId ?? componentId,
+        parameters,
+        initialArgs,
+        customArgTypes
+      }),
+      subcomponentRows: getServiceSubcomponentArgTypes(servicePayload)
+    },
+    isInitialLoading
+  } : { rows: null, isInitialLoading };
+}
+
 // src/blocks/blocks/useOf.ts
 import { useContext as useContext3 } from "react";
 var useOf = (moduleExportOrType, validTypes) => useContext3(DocsContext).resolveOf(moduleExportOrType, validTypes);
@@ -5524,73 +5762,120 @@ function scrollToElement(element, block = "start") {
 }
 
 // src/blocks/blocks/ArgTypes.tsx
-function extractComponentArgTypes(component, parameters) {
-  let { extractArgTypes } = parameters.docs || {};
-  if (!extractArgTypes)
-    throw new Error("Args unsupported. See Args documentation for your framework." /* ARGS_UNSUPPORTED */);
-  return extractArgTypes(component);
-}
-function getArgTypesFromResolved(resolved) {
+function useResolveArgTypes(props) {
+  let { of } = props;
+  if ("of" in props && of === void 0)
+    throw new InvalidBlockOfPropError2();
+  let context = useContext4(DocsContext), resolved = useOf(of || "meta"), resolvedArgTypes;
   if (resolved.type === "component") {
     let {
-      component: component2,
-      projectAnnotations: { parameters: parameters2 }
+      component,
+      projectAnnotations: { parameters }
     } = resolved;
-    return {
-      argTypes: extractComponentArgTypes(component2, parameters2),
-      parameters: parameters2,
-      component: component2
+    resolvedArgTypes = {
+      parameters,
+      // Bare `of={Component}` has no story/meta annotations; the docgen service is addressed by
+      // component id, recovered from the CSF file that declares this component.
+      componentId: context.getComponentId(component),
+      argTypes: extractComponentArgTypes(component, parameters),
+      component
+    };
+  } else if (resolved.type === "meta") {
+    let { id, argTypes, parameters, initialArgs, component, subcomponents } = resolved.preparedMeta;
+    resolvedArgTypes = {
+      parameters,
+      componentId: id.split("--")[0],
+      initialArgs,
+      argTypes,
+      component,
+      subcomponents
+    };
+  } else {
+    let { id, argTypes, parameters, initialArgs, component, subcomponents } = resolved.story;
+    resolvedArgTypes = {
+      parameters,
+      componentId: id.split("--")[0],
+      storyId: id,
+      initialArgs,
+      argTypes,
+      component,
+      subcomponents
     };
   }
-  if (resolved.type === "meta") {
-    let {
-      preparedMeta: { argTypes: argTypes2, parameters: parameters2, component: component2, subcomponents: subcomponents2 }
-    } = resolved;
-    return { argTypes: argTypes2, parameters: parameters2, component: component2, subcomponents: subcomponents2 };
-  }
-  let {
-    story: { argTypes, parameters, component, subcomponents }
-  } = resolved;
-  return { argTypes, parameters, component, subcomponents };
+  let argTypesParameters = resolvedArgTypes.parameters?.docs?.argTypes || {};
+  return {
+    ...resolvedArgTypes,
+    filterProps: {
+      include: props.include ?? argTypesParameters.include,
+      exclude: props.exclude ?? argTypesParameters.exclude,
+      sort: props.sort ?? argTypesParameters.sort
+    }
+  };
 }
-var ArgTypesImpl = (props) => {
-  let { of } = props;
-  if ("of" in props && of === void 0)
-    throw new InvalidBlockOfPropError2();
-  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 React37.createElement(ArgsTable, { rows: filteredArgTypes, sort });
-  let mainComponentName = getComponentName(component) || "Main", subcomponentTabs = Object.fromEntries(
-    Object.entries(subcomponents || {}).map(([key, comp]) => [
-      key,
-      {
-        rows: filterArgTypes(
-          extractComponentArgTypes(comp, parameters),
-          include,
-          exclude
-        ),
-        sort
-      }
-    ])
-  ), tabs = {
-    [mainComponentName]: { rows: filteredArgTypes, sort },
-    ...subcomponentTabs
+function renderArgTypesTables({
+  mainName = "Main",
+  mainRows,
+  subcomponentRows,
+  include,
+  exclude,
+  sort,
+  docsLang
+}) {
+  let filteredMainRows = filterArgTypes(mainRows, include, exclude);
+  if (Object.keys(subcomponentRows).length === 0)
+    return React37.createElement(ArgsTable, { rows: filteredMainRows, sort, docsLang });
+  let tabs = {
+    [mainName]: { rows: filteredMainRows, sort },
+    ...Object.fromEntries(
+      Object.entries(subcomponentRows).map(([key, rows]) => [
+        key,
+        {
+          rows: filterArgTypes(rows, include, exclude),
+          sort
+        }
+      ])
+    )
   };
-  return React37.createElement(TabbedArgsTable, { tabs, sort });
-}, ArgTypes = withMdxComponentOverride("ArgTypes", ArgTypesImpl);
+  return React37.createElement(TabbedArgsTable, { tabs, sort, docsLang });
+}
+var LegacyArgTypes = (props) => {
+  let { argTypes, parameters, component, subcomponents, filterProps } = useResolveArgTypes(props);
+  return argTypes ? renderArgTypesTables({
+    mainName: getComponentName(component),
+    mainRows: argTypes,
+    subcomponentRows: extractSubcomponentArgTypes(subcomponents, parameters),
+    docsLang: parameters?.docs?.lang,
+    ...filterProps
+  }) : null;
+}, DocgenServiceArgTypes = (props) => {
+  let { argTypes, parameters, componentId, storyId, initialArgs, filterProps, component } = useResolveArgTypes(props), { rows: serviceRows, isInitialLoading } = useDocgenServiceRows({
+    componentId,
+    storyId,
+    parameters,
+    initialArgs,
+    customArgTypes: argTypes
+  });
+  return isInitialLoading ? React37.createElement(ArgsTable, { isLoading: !0 }) : serviceRows ? renderArgTypesTables({
+    mainName: getComponentName(component) ?? serviceRows.serviceComponentName,
+    mainRows: serviceRows.mainRows,
+    subcomponentRows: serviceRows.subcomponentRows,
+    docsLang: parameters?.docs?.lang,
+    ...filterProps
+  }) : null;
+}, ArgTypesImpl = (props) => globalThis.FEATURES?.experimentalDocgenServer ? React37.createElement(DocgenServiceArgTypes, { ...props }) : React37.createElement(LegacyArgTypes, { ...props }), ArgTypes = withMdxComponentOverride("ArgTypes", ArgTypesImpl);
 
 // src/blocks/blocks/Canvas.tsx
-import React40, { useCallback as useCallback7, useContext as useContext5 } from "react";
+import React40, { useCallback as useCallback10, useContext as useContext6 } from "react";
 import { FORCE_REMOUNT } from "storybook/internal/core-events";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError4 } from "storybook/internal/preview-errors";
 
 // src/blocks/blocks/Source.tsx
-import React39, { useContext as useContext4, useMemo as useMemo4 } from "react";
+import React39, { useContext as useContext5, useMemo as useMemo4 } from "react";
 import { SourceType } from "storybook/internal/docs-tools";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError3 } from "storybook/internal/preview-errors";
 
 // src/blocks/blocks/SourceContainer.tsx
-import React38, { createContext as createContext3, useEffect as useEffect11, useState as useState14 } from "react";
+import React38, { createContext as createContext3, useEffect as useEffect13, useState as useState15 } from "react";
 import { SNIPPET_RENDERED } from "storybook/internal/docs-tools";
 
 // ../../../node_modules/telejson/dist/chunk-EAFQLD22.mjs
@@ -5756,7 +6041,7 @@ var require_es_object_atoms = __commonJS({
         return !1;
       if (typeof Symbol.iterator == "symbol")
         return !0;
-      var obj = {}, sym = Symbol("test"), symObj = Object(sym);
+      var obj = {}, sym = /* @__PURE__ */ Symbol("test"), symObj = Object(sym);
       if (typeof sym == "string" || Object.prototype.toString.call(sym) !== "[object Symbol]" || Object.prototype.toString.call(symObj) !== "[object Symbol]")
         return !1;
       var symVal = 42;
@@ -5784,7 +6069,7 @@ var require_es_object_atoms = __commonJS({
     "use strict";
     var origSymbol = typeof Symbol < "u" && Symbol, hasSymbolSham = require_shams();
     module.exports = function() {
-      return typeof origSymbol != "function" || typeof Symbol != "function" || typeof origSymbol("foo") != "symbol" || typeof Symbol("bar") != "symbol" ? !1 : hasSymbolSham();
+      return typeof origSymbol != "function" || typeof Symbol != "function" || typeof origSymbol("foo") != "symbol" || typeof /* @__PURE__ */ Symbol("bar") != "symbol" ? !1 : hasSymbolSham();
     };
   }
 }), require_Reflect_getPrototypeOf = __commonJS({
@@ -6621,8 +6906,8 @@ var SourceContext = createContext3({ sources: {} }), UNKNOWN_ARGS_HASH = "--unkn
   children,
   channel
 }) => {
-  let [sources, setSources] = useState14({});
-  return useEffect11(() => {
+  let [sources, setSources] = useState15({});
+  return useEffect13(() => {
     let handleSnippetRendered = (idOrEvent, inputSource = null, inputFormat = !1) => {
       let {
         id,
@@ -6646,11 +6931,34 @@ var SourceContext = createContext3({ sources: {} }), UNKNOWN_ARGS_HASH = "--unkn
   }, []), React38.createElement(SourceContext.Provider, { value: { sources } }, children);
 };
 
+// src/blocks/blocks/use-service-story-docs.ts
+import { useCallback as useCallback9 } from "react";
+import { selectSnippetForStory, selectStoryDoc } from "storybook/open-service";
+import { getService as getService2 } from "storybook/preview-api";
+function useServiceStory(storyId, selector) {
+  let componentId = storyId.split("--")[0], service = getService2("core/story-docs"), boundSelector = useCallback9(
+    (payload) => selector(payload, storyId),
+    [selector, storyId]
+  );
+  return useQuerySubscription(
+    storyId,
+    service.queries.storyDocs,
+    { id: componentId },
+    boundSelector
+  );
+}
+function useServiceStoryDoc(storyId) {
+  return useServiceStory(storyId, selectStoryDoc);
+}
+function useServiceStorySnippet(storyId) {
+  return useServiceStory(storyId, selectSnippetForStory);
+}
+
 // src/blocks/blocks/useTransformCode.tsx
-import { useEffect as useEffect12, useState as useState15 } from "react";
+import { useEffect as useEffect14, useState as useState16 } from "react";
 function useTransformCode(source, transform, storyContext) {
-  let [transformedCode, setTransformedCode] = useState15("Transforming..."), transformed = transform ? transform?.(source, storyContext) : source;
-  return useEffect12(() => {
+  let [transformedCode, setTransformedCode] = useState16("Transforming..."), transformed = transform ? transform?.(source, storyContext) : source;
+  return useEffect14(() => {
     async function getTransformedCode() {
       let transformResult = await transformed;
       transformResult !== transformedCode && setTransformedCode(transformResult);
@@ -6665,14 +6973,15 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
   return sourceMap?.[argsHash(args)] || sourceMap?.[UNKNOWN_ARGS_HASH] || { code: "" };
 }, useCode = ({
   snippet,
+  serviceSnippet,
   storyContext,
   typeFromProps,
   transformFromProps
 }) => {
-  let parameters = storyContext.parameters ?? {}, { __isArgsStory: isArgsStory } = parameters, sourceParameters = parameters.docs?.source || {}, type = typeFromProps || sourceParameters.type || SourceType.AUTO, code = /* if user has explicitly set this as dynamic, use snippet */ type === SourceType.DYNAMIC || // if this is an args story and there's a snippet
-  type === SourceType.AUTO && snippet && isArgsStory ? snippet : sourceParameters.originalSource || "", transformer = transformFromProps ?? sourceParameters.transform, transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
+  let parameters = storyContext.parameters ?? {}, { __isArgsStory: isArgsStory } = parameters, sourceParameters = parameters.docs?.source || {}, type = typeFromProps || sourceParameters.type || SourceType.AUTO, staticSnippet = serviceSnippet || snippet, code = /* if user has explicitly set this as dynamic, use snippet */ type === SourceType.DYNAMIC || // if this is an args story and there's a snippet
+  type === SourceType.AUTO && staticSnippet && isArgsStory ? staticSnippet : 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) => {
+}, useSourceProps = (props, docsContext, sourceContext, serviceSnippet = "") => {
   let { of } = props, story = useMemo4(() => {
     if (of)
       return docsContext.resolveOf(of, ["story"]).story;
@@ -6682,6 +6991,7 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
     }
   }, [docsContext, of]), storyContext = story ? docsContext.getStoryContext(story) : {}, argsForSource = props.__forceInitialArgs ? storyContext.initialArgs : storyContext.unmappedArgs, source = story ? getStorySource(story.id, argsForSource, sourceContext) : null, transformedCode = useCode({
     snippet: source ? source.code : "",
+    serviceSnippet,
     storyContext: { ...storyContext, args: argsForSource },
     typeFromProps: props.type,
     transformFromProps: props.transform
@@ -6700,20 +7010,41 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
     language,
     dark
   });
+}, SourceWithStoryDocsSnippet = ({ storyId, docsContext, sourceContext, ...props }) => {
+  let serviceSnippet = useServiceStorySnippet(storyId).data ?? "", sourceProps = useSourceProps(props, docsContext, sourceContext, serviceSnippet);
+  return React39.createElement(Source, { ...sourceProps });
 }, SourceWithStorySnippet = (props) => {
-  let sourceContext = useContext4(SourceContext), docsContext = useContext4(DocsContext), sourceProps = useSourceProps(props, docsContext, sourceContext);
+  let { of } = props, sourceContext = useContext5(SourceContext), docsContext = useContext5(DocsContext), story = useMemo4(() => {
+    if (of)
+      return docsContext.resolveOf(of, ["story"]).story;
+    try {
+      return docsContext.storyById();
+    } catch {
+    }
+  }, [docsContext, of]);
+  if (globalThis.FEATURES?.experimentalDocgenServer && story?.id)
+    return React39.createElement(
+      SourceWithStoryDocsSnippet,
+      {
+        ...props,
+        docsContext,
+        sourceContext,
+        storyId: story.id
+      }
+    );
+  let sourceProps = useSourceProps(props, docsContext, sourceContext);
   return React39.createElement(Source, { ...sourceProps });
 }, SourceWithCode = (props) => {
-  let docsContext = useContext4(DocsContext), sourceProps = useSourceProps(props, docsContext, EMPTY_SOURCE_CONTEXT);
+  let docsContext = useContext5(DocsContext), sourceProps = useSourceProps(props, docsContext, EMPTY_SOURCE_CONTEXT);
   return React39.createElement(Source, { ...sourceProps });
 }, SourceImpl = (props) => props.code !== void 0 ? React39.createElement(SourceWithCode, { ...props }) : React39.createElement(SourceWithStorySnippet, { ...props }), Source2 = withMdxComponentOverride("Source", SourceImpl);
 
 // src/blocks/blocks/Canvas.tsx
 var CanvasImpl = (props) => {
-  let docsContext = useContext5(DocsContext), sourceContext = useContext5(SourceContext), { of, source } = props;
+  let docsContext = useContext6(DocsContext), sourceContext = useContext6(SourceContext), { of, source } = props;
   if ("of" in props && of === void 0)
     throw new InvalidBlockOfPropError4();
-  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, handleReloadStory = useCallback7(() => {
+  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, handleReloadStory = useCallback10(() => {
     docsContext.channel.emit(FORCE_REMOUNT, { storyId: story.id });
   }, [docsContext.channel, story.id]);
   return React40.createElement(
@@ -6733,11 +7064,11 @@ var CanvasImpl = (props) => {
 }, Canvas = withMdxComponentOverride("Canvas", CanvasImpl);
 
 // src/blocks/blocks/Controls.tsx
-import React41, { useContext as useContext7 } from "react";
+import React41, { useContext as useContext8 } from "react";
 import { filterArgTypes as filterArgTypes2 } from "storybook/preview-api";
 
 // src/blocks/blocks/useArgs.ts
-import { useCallback as useCallback8, useEffect as useEffect13, useState as useState16 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect15, useState as useState17 } from "react";
 import {
   RESET_STORY_ARGS,
   STORY_ARGS_UPDATED,
@@ -6749,17 +7080,17 @@ var useArgs = (story, context) => {
     throw new Error("No result when story was defined");
   return result;
 }, useArgsIfDefined = (story, context) => {
-  let storyContext = story ? context.getStoryContext(story) : { args: {} }, { id: storyId } = story || { id: "none" }, [args, setArgs] = useState16(storyContext.args);
-  useEffect13(() => {
+  let storyContext = story ? context.getStoryContext(story) : { args: {} }, { id: storyId } = story || { id: "none" }, [args, setArgs] = useState17(storyContext.args);
+  useEffect15(() => {
     let onArgsUpdated = (changed) => {
       changed.storyId === storyId && setArgs(changed.args);
     };
     return context.channel.on(STORY_ARGS_UPDATED, onArgsUpdated), () => context.channel.off(STORY_ARGS_UPDATED, onArgsUpdated);
   }, [storyId, context.channel]);
-  let updateArgs = useCallback8(
+  let updateArgs = useCallback11(
     (updatedArgs) => context.channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }),
     [storyId, context.channel]
-  ), resetArgs = useCallback8(
+  ), resetArgs = useCallback11(
     (argNames) => context.channel.emit(RESET_STORY_ARGS, { storyId, argNames }),
     [storyId, context.channel]
   );
@@ -6767,11 +7098,11 @@ var useArgs = (story, context) => {
 };
 
 // src/blocks/blocks/useGlobals.ts
-import { useEffect as useEffect14, useState as useState17 } from "react";
+import { useEffect as useEffect16, useState as useState18 } from "react";
 import { GLOBALS_UPDATED } from "storybook/internal/core-events";
 var useGlobals = (story, context) => {
-  let storyContext = context.getStoryContext(story), [globals, setGlobals] = useState17(storyContext.globals);
-  return useEffect14(() => {
+  let storyContext = context.getStoryContext(story), [globals, setGlobals] = useState18(storyContext.globals);
+  return useEffect16(() => {
     let onGlobalsUpdated = (changed) => {
       setGlobals(changed.globals);
     };
@@ -6780,46 +7111,68 @@ var useGlobals = (story, context) => {
 };
 
 // src/blocks/blocks/usePrimaryStory.ts
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 import { Tag } from "storybook/internal/preview-api";
-var usePrimaryStory = () => useContext6(DocsContext).componentStories().find((story) => story.tags.includes(Tag.AUTODOCS));
+var usePrimaryStory = () => {
+  let context = useContext7(DocsContext), stories = context.componentStories();
+  return context.filterByAutodocs === !1 ? stories[0] : stories.find((story) => story.tags.includes(Tag.AUTODOCS));
+};
 
 // src/blocks/blocks/Controls.tsx
-function extractComponentArgTypes2(component, parameters) {
-  let { extractArgTypes } = parameters.docs || {};
-  if (!extractArgTypes)
-    throw new Error("Args unsupported. See Args documentation for your framework." /* ARGS_UNSUPPORTED */);
-  return extractArgTypes(component);
+function getControlsFilterProps(story, props) {
+  let controlsParameters = story.parameters.docs?.controls || {};
+  return {
+    include: props.include ?? controlsParameters.include,
+    exclude: props.exclude ?? controlsParameters.exclude,
+    sort: props.sort ?? controlsParameters.sort
+  };
 }
-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 ? React41.createElement(
+function useControlsInteractiveState(story, context) {
+  let controlsId = $bdb11010cef70236$export$f680877a34711e37(), [args, updateArgs, resetArgs] = useArgs(story, context), [globals] = useGlobals(story, context);
+  return { controlsId, args, globals, updateArgs, resetArgs };
+}
+var ControlsTables = ({
+  mainName = "Story",
+  mainRows,
+  subcomponentRows,
+  include,
+  exclude,
+  sort,
+  storyId,
+  controlsId,
+  args,
+  globals,
+  updateArgs,
+  resetArgs,
+  docsLang
+}) => {
+  let filteredMainRows = filterArgTypes2(mainRows, include, exclude);
+  if (Object.keys(subcomponentRows).length === 0)
+    return Object.keys(filteredMainRows).length > 0 || Object.keys(args).length > 0 ? React41.createElement(
       ArgsTable,
       {
-        storyId: story.id,
-        rows: filteredArgTypes,
+        storyId,
+        controlsId,
+        rows: filteredMainRows,
         sort,
         args,
         globals,
         updateArgs,
-        resetArgs
+        resetArgs,
+        docsLang
       }
     ) : null;
-  let mainComponentName = getComponentName(component) || "Story", subcomponentTabs = Object.fromEntries(
-    Object.entries(subcomponents || {}).map(([key, comp]) => [
-      key,
-      {
-        rows: filterArgTypes2(extractComponentArgTypes2(comp, parameters), include, exclude),
-        sort
-      }
-    ])
-  ), tabs = {
-    [mainComponentName]: { rows: filteredArgTypes, sort },
-    ...subcomponentTabs
+  let tabs = {
+    [mainName]: { rows: filteredMainRows, sort },
+    ...Object.fromEntries(
+      Object.entries(subcomponentRows).map(([key, rows]) => [
+        key,
+        {
+          rows: filterArgTypes2(rows, include, exclude),
+          sort
+        }
+      ])
+    )
   };
   return React41.createElement(
     TabbedArgsTable,
@@ -6830,13 +7183,55 @@ var ControlsImpl = (props) => {
       globals,
       updateArgs,
       resetArgs,
-      storyId: story.id
+      storyId,
+      controlsId,
+      docsLang
     }
   );
+}, LegacyControls = ({ story, context, ...props }) => {
+  let { parameters, argTypes, component, subcomponents } = story, filterProps = getControlsFilterProps(story, props), interactiveState = useControlsInteractiveState(story, context);
+  return argTypes ? React41.createElement(
+    ControlsTables,
+    {
+      mainName: getComponentName(component) || "Story",
+      mainRows: argTypes,
+      subcomponentRows: extractSubcomponentArgTypes(subcomponents, parameters),
+      ...filterProps,
+      storyId: story.id,
+      ...interactiveState,
+      docsLang: parameters?.docs?.lang
+    }
+  ) : null;
+}, DocgenServiceControls = ({ story, context, ...props }) => {
+  let { parameters, argTypes, component } = story, filterProps = getControlsFilterProps(story, props), interactiveState = useControlsInteractiveState(story, context), { rows: serviceRows, isInitialLoading } = useDocgenServiceRows({
+    componentId: story.id.split("--")[0],
+    storyId: story.id,
+    parameters,
+    initialArgs: story.initialArgs,
+    customArgTypes: argTypes
+  });
+  return isInitialLoading ? React41.createElement(ArgsTable, { isLoading: !0 }) : serviceRows ? React41.createElement(
+    ControlsTables,
+    {
+      mainName: getComponentName(component) ?? serviceRows.serviceComponentName,
+      mainRows: serviceRows.mainRows,
+      subcomponentRows: serviceRows.subcomponentRows,
+      ...filterProps,
+      storyId: story.id,
+      ...interactiveState,
+      docsLang: parameters?.docs?.lang
+    }
+  ) : null;
+}, ControlsImpl = (props) => {
+  let { of } = props, context = useContext8(DocsContext), primaryStory = usePrimaryStory(), story = of ? context.resolveOf(of, ["story"]).story : primaryStory;
+  if (!story)
+    return null;
+  let storyProps = { ...props, story, context };
+  return globalThis.FEATURES?.experimentalDocgenServer ? React41.createElement(DocgenServiceControls, { ...storyProps }) : React41.createElement(LegacyControls, { ...storyProps });
 }, Controls3 = withMdxComponentOverride("Controls", ControlsImpl);
 
 // src/blocks/blocks/Description.tsx
-import React44 from "react";
+import React44, { useContext as useContext10 } from "react";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError5 } from "storybook/internal/preview-errors";
 
 // src/blocks/blocks/Markdown.tsx
@@ -6844,8 +7239,8 @@ import React43 from "react";
 import { dedent } from "ts-dedent";
 
 // src/blocks/blocks/mdx.tsx
-import React42, { useContext as useContext8 } from "react";
-import { Code, components, nameSpaceClassNames } from "storybook/internal/components";
+import React42, { useContext as useContext9 } from "react";
+import { Button as Button8, Code, components, nameSpaceClassNames } from "storybook/internal/components";
 import { NAVIGATE_URL as NAVIGATE_URL2 } from "storybook/internal/core-events";
 import { LinkIcon } from "@storybook/icons";
 import { styled as styled28 } from "storybook/theming";
@@ -6878,7 +7273,7 @@ function navigate(context, url) {
   context.channel.emit(NAVIGATE_URL2, url);
 }
 var A2 = components.a, AnchorInPage = ({ hash, children }) => {
-  let context = useContext8(DocsContext);
+  let context = useContext9(DocsContext);
   return React42.createElement(
     A2,
     {
@@ -6892,7 +7287,7 @@ var A2 = components.a, AnchorInPage = ({ hash, children }) => {
     children
   );
 }, AnchorMdx = (props) => {
-  let { href, target, children, ...rest } = props, context = useContext8(DocsContext);
+  let { href, target, children, ...rest } = props, context = useContext9(DocsContext);
   return !href || target === "_blank" || /^https?:\/\//.test(href) ? React42.createElement(A2, { ...props }) : href.startsWith("#") ? React42.createElement(AnchorInPage, { hash: href }, children) : React42.createElement(
     A2,
     {
@@ -6908,47 +7303,69 @@ var A2 = components.a, AnchorInPage = ({ hash, children }) => {
 }, SUPPORTED_MDX_HEADERS = ["h1", "h2", "h3", "h4", "h5", "h6"], OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
   (acc, headerType) => ({
     ...acc,
-    [headerType]: styled28(headerType)({
-      "& svg": {
-        position: "relative",
-        top: "-0.1em",
-        visibility: "hidden"
-      },
-      "&:hover svg": {
-        visibility: "visible"
-      }
-    })
+    [headerType]: styled28(headerType)({})
   }),
   {}
-), OcticonAnchor = styled28.a(
-  () => ({
-    float: "left",
-    lineHeight: "inherit",
-    paddingRight: "10px",
-    marginLeft: "-24px",
-    // Allow the theme's text color to override the default link color.
-    color: "inherit"
-  })
-), HeaderWithOcticonAnchor = ({
+), OcticonAlignmentWrapper = styled28.span({
+  display: "block",
+  position: "relative",
+  "& svg": {
+    visibility: "hidden"
+  },
+  "&:hover svg, &:focus-within svg": {
+    visibility: "visible"
+  }
+}), OcticonAnchorWrapper = styled28.span({
+  // Position the anchor in the heading's left gutter instead of floating it, so the
+  // Button's dimensions never shift the heading text. The parent header is relatively
+  // positioned to anchor this.
+  position: "absolute",
+  top: "50%",
+  right: "100%",
+  lineHeight: "inherit",
+  paddingRight: "8px",
+  // Increase specificity to avoid being overridden by DocsPage based on
+  // CSS block load order.
+  "&&": {
+    marginTop: -14
+    // Half the Button's height to center it vertically
+  },
+  // Allow the theme's text color to override the default link color.
+  color: "inherit",
+  "& a": {
+    color: "inherit",
+    textDecoration: "none"
+  }
+}), HeaderTitle = styled28.span({
+  // marginInlineStart: -40,
+}), HeaderWithOcticonAnchor = ({
   as,
   id,
   children,
   ...rest
 }) => {
-  let context = useContext8(DocsContext), OcticonHeader = OcticonHeaders[as], hash = `#${id}`;
-  return React42.createElement(OcticonHeader, { id, ...rest }, React42.createElement(
-    OcticonAnchor,
+  let context = useContext9(DocsContext), OcticonHeader = OcticonHeaders[as], hash = `#${id}`;
+  return React42.createElement(OcticonHeader, { id, ...rest }, React42.createElement(OcticonAlignmentWrapper, { className: "sb-unstyled" }, React42.createElement(OcticonAnchorWrapper, null, React42.createElement(
+    Button8,
     {
-      "aria-hidden": "true",
-      href: hash,
-      tabIndex: -1,
-      target: "_self",
-      onClick: (event) => {
-        document2.getElementById(id) && navigate(context, hash);
-      }
+      asChild: !0,
+      variant: "ghost",
+      size: "small",
+      padding: "small",
+      ariaLabel: "Copy heading URL to address bar"
     },
-    React42.createElement(LinkIcon, null)
-  ), children);
+    React42.createElement(
+      "a",
+      {
+        href: hash,
+        target: "_self",
+        onClick: (event) => {
+          event.preventDefault(), document2.getElementById(id) && navigate(context, hash);
+        }
+      },
+      React42.createElement(LinkIcon, null)
+    )
+  )), children));
 }, HeaderMdx = (props) => {
   let { as, id, children, ...rest } = props;
   if (id)
@@ -7007,16 +7424,18 @@ var MarkdownImpl = (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) => {
+var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.INFO = "info", DescriptionType2.NOTES = "notes", DescriptionType2.DOCGEN = "docgen", DescriptionType2.AUTO = "auto", DescriptionType2))(DescriptionType || {}), getDescriptionFromResolvedOf = (resolvedOf, serviceComponentDescription, storyDocsDescription) => {
   switch (resolvedOf.type) {
-    case "story":
-      return resolvedOf.story.parameters.docs?.description?.story || null;
+    case "story": {
+      let storyDescription = resolvedOf.story.parameters.docs?.description?.story;
+      return storyDescription !== void 0 ? storyDescription : storyDocsDescription ?? null;
+    }
     case "meta": {
       let { parameters, component } = resolvedOf.preparedMeta, metaDescription = parameters.docs?.description?.component;
       return metaDescription || parameters.docs?.extractComponentDescription?.(component, {
         component,
         parameters
-      }) || null;
+      }) || serviceComponentDescription || null;
     }
     case "component": {
       let {
@@ -7026,27 +7445,62 @@ var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.I
       return parameters?.docs?.extractComponentDescription?.(component, {
         component,
         parameters
-      }) || null;
+      }) || serviceComponentDescription || null;
     }
     default:
       throw new Error(
         `Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`
       );
   }
+}, DescriptionBody = ({ resolvedOf, serviceComponentDescription, lang, storyDocsDescription }) => {
+  let markdown = getDescriptionFromResolvedOf(
+    resolvedOf,
+    serviceComponentDescription,
+    storyDocsDescription
+  );
+  return markdown ? React44.createElement(Markdown, { lang }, markdown) : null;
+}, DescriptionStoryWithServices = ({ resolvedOf }) => {
+  let storyDocsDescription = useServiceStoryDoc(resolvedOf.story.id).data?.description, lang = resolvedOf.story.parameters.docs?.lang || "en";
+  return React44.createElement(
+    DescriptionBody,
+    {
+      resolvedOf,
+      storyDocsDescription,
+      lang
+    }
+  );
+}, DescriptionComponentWithServices = ({ resolvedOf, componentId }) => {
+  let serviceComponentDescription = useServiceDocgen(componentId).data?.description || void 0, lang = resolvedOf.type === "meta" ? resolvedOf.preparedMeta.parameters.docs?.lang || "en" : resolvedOf.projectAnnotations.parameters?.docs?.lang || "en";
+  return React44.createElement(
+    DescriptionBody,
+    {
+      resolvedOf,
+      serviceComponentDescription,
+      lang
+    }
+  );
 }, DescriptionImpl = (props) => {
-  let { of } = props;
+  let { of } = props, context = useContext10(DocsContext);
   if ("of" in props && of === void 0)
     throw new InvalidBlockOfPropError5();
-  let resolvedOf = useOf(of || "meta"), markdown = getDescriptionFromResolvedOf(resolvedOf);
-  return markdown ? React44.createElement(Markdown, null, markdown) : null;
+  let resolvedOf = useOf(of || "meta");
+  if (globalThis.FEATURES?.experimentalDocgenServer) {
+    if (resolvedOf.type === "story")
+      return React44.createElement(DescriptionStoryWithServices, { resolvedOf });
+    let componentId = resolvedOf.type === "meta" ? resolvedOf.preparedMeta.componentId : context.getComponentId(resolvedOf.component);
+    if (componentId)
+      return React44.createElement(DescriptionComponentWithServices, { resolvedOf, componentId });
+  }
+  let lang = (resolvedOf.type === "story" ? resolvedOf.story.parameters : resolvedOf.type === "meta" ? resolvedOf.preparedMeta.parameters : resolvedOf.projectAnnotations.parameters)?.docs?.lang || "en";
+  return React44.createElement(DescriptionBody, { resolvedOf, lang });
 }, Description2 = withMdxComponentOverride("Description", DescriptionImpl);
 
 // src/blocks/blocks/Docs.tsx
 import React54 from "react";
 
 // src/blocks/blocks/DocsContainer.tsx
-import React45, { useEffect as useEffect15, useMemo as useMemo5 } from "react";
-import { ThemeProvider, ensure as ensureTheme } from "storybook/theming";
+import React45, { useEffect as useEffect17, useMemo as useMemo5 } from "react";
+import { ensure as ensureTheme, ThemeProvider } from "storybook/theming";
 
 // src/blocks/blocks/DocsSluggerContext.ts
 import { createContext as createContext4 } from "react";
@@ -7106,13 +7560,14 @@ var { document: document3, window: globalWindow3 } = globalThis, DocsContainer =
   theme,
   children
 }) => {
-  let slugger = useMemo5(() => createDocsSlugger(), []), toc;
+  let slugger = useMemo5(() => createDocsSlugger(), []), toc, lang;
   try {
-    toc = context.resolveOf("meta", ["meta"]).preparedMeta.parameters?.docs?.toc;
+    let metaParameters = context.resolveOf("meta", ["meta"]).preparedMeta.parameters;
+    toc = metaParameters?.docs?.toc, lang = metaParameters?.docs?.lang || "en";
   } catch {
-    toc = context?.projectAnnotations?.parameters?.docs?.toc;
+    toc = context?.projectAnnotations?.parameters?.docs?.toc, lang = context?.projectAnnotations?.parameters?.docs?.lang || "en";
   }
-  return useEffect15(() => {
+  return useEffect17(() => {
     let url;
     try {
       if (url = new URL(globalWindow3.parent.location.toString()), url.hash) {
@@ -7126,6 +7581,7 @@ var { document: document3, window: globalWindow3 } = globalThis, DocsContainer =
   }), React45.createElement(DocsSluggerContext.Provider, { value: slugger }, React45.createElement(DocsContext.Provider, { value: context }, React45.createElement(SourceContainer, { channel: context.channel }, React45.createElement(ThemeProvider, { theme: ensureTheme(theme) }, React45.createElement(
     DocsPageWrapper,
     {
+      lang,
       toc: toc ? React45.createElement(
         TableOfContents,
         {
@@ -7201,7 +7657,7 @@ var PrimaryImpl = () => {
 }, Primary = withMdxComponentOverride("Primary", PrimaryImpl);
 
 // src/blocks/blocks/Stories.tsx
-import React50, { useContext as useContext9 } from "react";
+import React50, { useContext as useContext11 } from "react";
 import { Tag as Tag2 } from "storybook/internal/preview-api";
 import { styled as styled29 } from "storybook/theming";
 var StyledHeading = styled29(Heading2)(({ theme }) => ({
@@ -7218,7 +7674,7 @@ var StyledHeading = styled29(Heading2)(({ theme }) => ({
     marginTop: "56px"
   }
 })), StoriesImpl = ({ title = "Stories", includePrimary = !0 }) => {
-  let { componentStories, projectAnnotations, getStoryContext } = useContext9(DocsContext), stories = componentStories(), { stories: { filter } = { filter: void 0 } } = projectAnnotations.parameters?.docs || {};
+  let { componentStories, projectAnnotations, getStoryContext } = useContext11(DocsContext), stories = componentStories(), filter = projectAnnotations.parameters?.docs?.stories?.filter;
   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 })
   ));
@@ -7284,7 +7740,8 @@ function Docs({
 }
 
 // src/blocks/blocks/external/ExternalDocs.tsx
-import React55, { useRef as useRef6 } from "react";
+import React55, { useRef as useRef8 } from "react";
+import { deprecate as deprecate2 } from "storybook/internal/client-logger";
 import { composeConfigs as composeConfigs2 } from "storybook/preview-api";
 
 // src/blocks/blocks/external/ExternalPreview.ts
@@ -7309,6 +7766,7 @@ var ExternalDocsContext = class extends DocsContext2 {
       let csfFile = this.processMetaExports(metaExports);
       this.referenceCSFFile(csfFile), super.referenceMeta(metaExports, attach);
     };
+    this.filterByAutodocs = !1;
   }
 };
 
@@ -7365,13 +7823,14 @@ var ConstantMap = class {
 
 // src/blocks/blocks/external/ExternalDocs.tsx
 function usePreview(projectAnnotations) {
-  let previewRef = useRef6();
+  let previewRef = useRef8();
   return previewRef.current || (previewRef.current = new ExternalPreview(projectAnnotations)), previewRef.current;
 }
 function ExternalDocs({
   projectAnnotationsList,
   children
 }) {
+  deprecate2("ExternalDocs is deprecated and will be removed in Storybook 11.");
   let projectAnnotations = composeConfigs2(projectAnnotationsList), preview2 = usePreview(projectAnnotations), docsParameter = {
     ...projectAnnotations.parameters?.docs,
     page: () => children
@@ -7381,13 +7840,14 @@ function ExternalDocs({
 
 // src/blocks/blocks/external/ExternalDocsContainer.tsx
 import React56 from "react";
+import { deprecate as deprecate3 } from "storybook/internal/client-logger";
 import { ThemeProvider as ThemeProvider2, ensure, themes } from "storybook/theming";
-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)));
+var preview, ExternalDocsContainer = ({ projectAnnotations, children }) => (deprecate3("ExternalDocsContainer is deprecated and will be removed in Storybook 11."), 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 React57, { useContext as useContext10 } from "react";
+import React57, { useContext as useContext12 } from "react";
 var Meta = ({ of }) => {
-  let context = useContext10(DocsContext);
+  let context = useContext12(DocsContext);
   of && context.referenceMeta(of, !0);
   try {
     let primary = context.storyById();
@@ -7467,6 +7927,7 @@ export {
   formatTime,
   getStoryId,
   getStoryProps,
+  normalizeOptions,
   parse2 as parse,
   parseDate,
   parseTime,