@aussieljk/forkbook 0.0.0-stage → 0.0.1-2

package/dist/_browser-chunks/chunk-JYVGARBG.js

@@ -0,0 +1,2943 @@
+import {
+  getControlId,
+  getControlSetterButtonId
+} from "./chunk-PJSMZ27A.js";
+import {
+  EmptyBlock
+} from "./chunk-PFRNG3UC.js";
+import {
+  clsx
+} from "./chunk-CNED6RYH.js";
+import {
+  uniq
+} from "./chunk-4ATQOMJB.js";
+import {
+  cloneDeep,
+  pickBy
+} from "./chunk-2JDQ35OA.js";
+
+// src/addon-docs/blocks/controls/Boolean.tsx
+import { useCallback } from "react";
+import { Button } from "@aussieljk/forkbook/internal/components";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/Boolean.module.css
+var id = "core/src/addon-docs/blocks/controls/Boolean.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id), style.textContent = ".sb-JOY8zW-label{white-space:nowrap;background:var(--sb-boolean-background);border-radius:3em;align-items:center;margin-bottom:8px;padding:1px;line-height:18px;display:inline-block;position:relative;&[aria-disabled=true]{opacity:.5;& input{cursor:not-allowed}}@media (forced-colors:active){background:buttonface;outline:1px solid buttontext}&:focus-within{outline:1px solid var(--sb-color-secondary);outline-offset:1px;@media (forced-colors:active){outline-offset:1px;outline:1px solid highlight}}& input{white-space:nowrap;clip:rect(0, 0, 0, 0);clip-path:inset(50%);appearance:none;cursor:pointer;background:0 0;border:0;border-radius:3em;width:1px;height:1px;margin:-1px;padding:0;position:absolute;top:0;left:0;overflow:hidden}& span{text-align:center;font-size:var(--sb-size-s1);font-weight:var(--sb-weight-bold);cursor:pointer;user-select:none;color:rgb(from var(--sb-color-default-text) r g b / calc(alpha - .5));background:0 0;border-radius:3em;padding:7px 15px;line-height:1;transition:all .1s ease-out;display:inline-block;&:active{box-shadow:rgb(from var(--sb-app-border-color) r g b / calc(alpha + .05)) 0 0 0 2px inset;color:rgb(from var(--sb-app-border-color) r g b / calc(alpha + 1))}&:first-of-type{padding-right:8px}&:last-of-type{padding-left:8px}@media (forced-colors:active){color:buttontext;box-shadow:none}}& input:checked~span:last-of-type,& input:not(:checked)~span:first-of-type{background:var(--sb-boolean-selected-background);box-shadow:rgb(from var(--sb-app-border-color) r g b / calc(alpha + .1)) 0 0 2px;color:var(--sb-color-default-text);padding:7px 15px;@media (forced-colors:active){forced-color-adjust:none;color:highlighttext;box-shadow:none;background:highlight;outline:1px solid buttontext}}}:where([data-sb-theme=dark]) .sb-JOY8zW-label{& input:checked~span:last-of-type,& input:not(:checked)~span:first-of-type{box-shadow:var(--sb-app-border-color) 0 0 0 1px}}", document.head.appendChild(style);
+}
+var Boolean_default = { label: "sb-JOY8zW-label" };
+
+// src/addon-docs/blocks/controls/Boolean.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var parse = (value) => value === "true", BooleanControl = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  argType,
+  required
+}) => {
+  let onSetFalse = useCallback(() => onChange(!1), [onChange]), readonly = !!argType?.table?.readonly;
+  if (value === void 0)
+    return jsx(
+      Button,
+      {
+        ariaLabel: !1,
+        variant: "outline",
+        size: "medium",
+        id: getControlSetterButtonId(name, storyId, controlsId),
+        onClick: onSetFalse,
+        disabled: readonly,
+        children: "Set boolean"
+      }
+    );
+  let controlId = getControlId(name, storyId, controlsId), parsedValue = typeof value == "string" ? parse(value) : value;
+  return jsxs("label", { className: Boolean_default.label, "aria-disabled": readonly, htmlFor: controlId, "aria-label": name, children: [
+    jsx(
+      "input",
+      {
+        id: controlId,
+        type: "checkbox",
+        onChange: (e2) => onChange(e2.target.checked),
+        checked: parsedValue,
+        role: "switch",
+        disabled: readonly,
+        "aria-required": required || void 0,
+        name,
+        onBlur,
+        onFocus
+      }
+    ),
+    jsx("span", { "aria-hidden": "true", children: "False" }),
+    jsx("span", { "aria-hidden": "true", children: "True" })
+  ] });
+};
+
+// src/addon-docs/blocks/controls/Date.tsx
+import { useEffect, useRef, useState } from "react";
+import { Form } from "@aussieljk/forkbook/internal/components";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/Date.module.css
+var id2 = "core/src/addon-docs/blocks/controls/Date.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id2}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id2), style.textContent = ".sb-_bdHva-input{&[readonly]{background:var(--sb-color-lighter)}&::-webkit-calendar-picker-indicator{opacity:.5;height:12px}}:where([data-sb-theme=dark]) .sb-_bdHva-input{&[readonly]{background:0 0}&::-webkit-calendar-picker-indicator{filter:invert()}}.sb-_bdHva-fieldset{border:0;flex:1;gap:10px;margin-inline:0;padding:0;display:flex;& div:first-of-type{flex:4}& div:last-of-type{flex:3}}", document.head.appendChild(style);
+}
+var Date_default = { fieldset: "sb-_bdHva-fieldset", input: "sb-_bdHva-input" };
+
+// src/addon-docs/blocks/controls/Date.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var parseDate = (value) => {
+  let [year, month, day] = value.split("-"), result = /* @__PURE__ */ new Date();
+  return result.setFullYear(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10)), result;
+}, parseTime = (value) => {
+  let [hours, minutes] = value.split(":"), result = /* @__PURE__ */ new Date();
+  return result.setHours(parseInt(hours, 10)), result.setMinutes(parseInt(minutes, 10)), result;
+}, formatDate = (value) => {
+  let date = new Date(value), year = `000${date.getFullYear()}`.slice(-4), month = `0${date.getMonth() + 1}`.slice(-2), day = `0${date.getDate()}`.slice(-2);
+  return `${year}-${month}-${day}`;
+}, formatTime = (value) => {
+  let date = new Date(value), hours = `0${date.getHours()}`.slice(-2), minutes = `0${date.getMinutes()}`.slice(-2);
+  return `${hours}:${minutes}`;
+}, DateControl = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  argType,
+  required
+}) => {
+  let [valid, setValid] = useState(!0), dateRef = useRef(), timeRef = useRef(), readonly = !!argType?.table?.readonly;
+  useEffect(() => {
+    valid !== !1 && (dateRef && dateRef.current && (dateRef.current.value = value ? formatDate(value) : ""), timeRef && timeRef.current && (timeRef.current.value = value ? formatTime(value) : ""));
+  }, [value]);
+  let onDateChange = (e2) => {
+    if (!e2.target.value)
+      return onChange();
+    let parsed = parseDate(e2.target.value), result = new Date(value ?? "");
+    result.setFullYear(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
+    let time = result.getTime();
+    time && onChange(time), setValid(!!time);
+  }, onTimeChange = (e2) => {
+    if (!e2.target.value)
+      return onChange();
+    let parsed = parseTime(e2.target.value), result = new Date(value ?? "");
+    result.setHours(parsed.getHours()), result.setMinutes(parsed.getMinutes());
+    let time = result.getTime();
+    time && onChange(time), setValid(!!time);
+  }, controlId = getControlId(name, storyId, controlsId);
+  return jsxs2("fieldset", { className: Date_default.fieldset, children: [
+    jsx2("legend", { className: "sb-sr-only", children: name }),
+    jsx2("label", { htmlFor: `${controlId}-date`, className: "sb-sr-only", children: "Date" }),
+    jsx2(
+      Form.Input,
+      {
+        className: Date_default.input,
+        type: "date",
+        max: "9999-12-31",
+        ref: dateRef,
+        id: `${controlId}-date`,
+        name: `${controlId}-date`,
+        readOnly: readonly,
+        "aria-required": required || void 0,
+        onChange: onDateChange,
+        onFocus,
+        onBlur
+      }
+    ),
+    jsx2("label", { htmlFor: `${controlId}-time`, className: "sb-sr-only", children: "Time" }),
+    jsx2(
+      Form.Input,
+      {
+        className: Date_default.input,
+        type: "time",
+        id: `${controlId}-time`,
+        name: `${controlId}-time`,
+        ref: timeRef,
+        onChange: onTimeChange,
+        readOnly: readonly,
+        "aria-required": required || void 0,
+        onFocus,
+        onBlur
+      }
+    ),
+    valid ? null : jsx2("div", { children: "invalid" })
+  ] });
+};
+
+// src/addon-docs/blocks/controls/Number.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Button as Button2, Form as Form2 } from "@aussieljk/forkbook/internal/components";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/Number.module.css
+var id3 = "core/src/addon-docs/blocks/controls/Number.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id3}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id3), style.textContent = ".sb-7MwCMq-wrapper{display:flex}.sb-7MwCMq-input{background:var(--sb-color-lighter)}:where([data-sb-theme=dark]) .sb-7MwCMq-input{background:0 0}", document.head.appendChild(style);
+}
+var Number_default = { wrapper: "sb-7MwCMq-wrapper", input: "sb-7MwCMq-input" };
+
+// src/addon-docs/blocks/controls/Number.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var parse2 = (value) => {
+  let result = parseFloat(value);
+  return Number.isNaN(result) ? void 0 : result;
+}, format = (value) => value != null ? String(value) : "", NumberControl = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  onBlur,
+  onFocus,
+  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) => {
+      setInputValue(event.target.value);
+      let result = parseFloat(event.target.value);
+      if (Number.isNaN(result))
+        setParseError(new Error(`'${event.target.value}' is not a number`));
+      else {
+        let finalValue = result;
+        typeof min == "number" && finalValue < min && (finalValue = min), typeof max == "number" && finalValue > max && (finalValue = max), onChange(finalValue), setParseError(null), finalValue !== result && setInputValue(String(finalValue));
+      }
+    },
+    [onChange, setParseError, min, max]
+  ), onForceVisible = useCallback2(() => {
+    setInputValue("0"), onChange(0), setForceVisible(!0);
+  }, [setForceVisible]), htmlElRef = useRef2(null);
+  return useEffect2(() => {
+    forceVisible && htmlElRef.current && htmlElRef.current.select();
+  }, [forceVisible]), useEffect2(() => {
+    let newInputValue = typeof value == "number" ? value : "";
+    inputValue !== newInputValue && setInputValue(newInputValue);
+  }, [value]), value === void 0 ? jsx3(
+    Button2,
+    {
+      ariaLabel: !1,
+      variant: "outline",
+      size: "medium",
+      id: getControlSetterButtonId(name, storyId, controlsId),
+      onClick: onForceVisible,
+      disabled: readonly,
+      children: "Set number"
+    }
+  ) : jsx3("label", { className: Number_default.wrapper, children: jsx3(
+    Form2.Input,
+    {
+      className: Number_default.input,
+      ref: htmlElRef,
+      id: getControlId(name, storyId, controlsId),
+      type: "number",
+      onChange: handleChange,
+      size: "flex",
+      placeholder: "Edit number...",
+      value: inputValue,
+      valid: parseError ? "error" : void 0,
+      autoFocus: forceVisible,
+      "aria-required": required || void 0,
+      readOnly: readonly,
+      name,
+      min,
+      max,
+      step,
+      onFocus,
+      onBlur
+    }
+  ) });
+};
+
+// src/addon-docs/blocks/controls/options/Checkbox.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { logger } from "@aussieljk/forkbook/internal/client-logger";
+
+// src/addon-docs/blocks/controls/options/helpers.ts
+var selectedKey = (value, options) => {
+  let entry = options && Object.entries(options).find(([_key, val]) => val === value);
+  return entry ? entry[0] : void 0;
+}, selectedKeys = (value, options) => value && options ? Object.entries(options).filter((entry) => value.includes(entry[1])).map((entry) => entry[0]) : [], selectedValues = (keys, options) => keys && options && keys.map((key) => options[key]);
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/options/Options.module.css
+var id4 = "core/src/addon-docs/blocks/controls/options/Options.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id4}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id4), style.textContent = ".sb-OmlZtW-wrapper{border:none;flex-direction:column;align-items:flex-start;gap:8px;margin-inline:0;padding:0;display:flex;& label{display:flex}&[data-inline]{flex-flow:wrap;gap:15px;& label{display:inline-flex}}}.sb-OmlZtW-label{cursor:pointer;align-items:center;line-height:20px;& input{cursor:pointer;margin:0;margin-right:6px}&[data-readonly]{cursor:not-allowed;& input{cursor:not-allowed}& .sb-OmlZtW-text{opacity:.5}}}", document.head.appendChild(style);
+}
+var Options_default = { text: "sb-OmlZtW-text", label: "sb-OmlZtW-label", wrapper: "sb-OmlZtW-wrapper" };
+
+// src/addon-docs/blocks/controls/options/Checkbox.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CheckboxControl = ({
+  name,
+  storyId,
+  controlsId,
+  options,
+  value,
+  onChange,
+  isInline,
+  argType,
+  required
+}) => {
+  if (!options)
+    return logger.warn(`Checkbox with no options: ${name}`), jsx4(Fragment, { children: "-" });
+  let initial = selectedKeys(value || [], options), [selected, setSelected] = useState3(initial), readonly = !!argType?.table?.readonly, handleChange = (e2) => {
+    let option = e2.target.value, updated = [...selected];
+    updated.includes(option) ? updated.splice(updated.indexOf(option), 1) : updated.push(option), onChange(selectedValues(updated, options)), setSelected(updated);
+  };
+  useEffect3(() => {
+    setSelected(selectedKeys(value || [], options));
+  }, [value]);
+  let controlId = getControlId(name, storyId, controlsId);
+  return jsxs3("fieldset", { className: Options_default.wrapper, "data-inline": isInline || void 0, children: [
+    jsxs3("legend", { className: "sb-sr-only", children: [
+      name,
+      required ? " (required)" : ""
+    ] }),
+    Object.keys(options).map((key, index) => {
+      let id18 = `${controlId}-${index}`;
+      return jsxs3(
+        "label",
+        {
+          className: Options_default.label,
+          htmlFor: id18,
+          "data-readonly": readonly || void 0,
+          children: [
+            jsx4(
+              "input",
+              {
+                type: "checkbox",
+                disabled: readonly,
+                id: id18,
+                name: id18,
+                value: key,
+                onChange: handleChange,
+                checked: selected?.includes(key)
+              }
+            ),
+            jsx4("span", { className: Options_default.text, children: key })
+          ]
+        },
+        id18
+      );
+    })
+  ] });
+};
+
+// src/addon-docs/blocks/controls/options/Radio.tsx
+import { logger as logger2 } from "@aussieljk/forkbook/internal/client-logger";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var RadioControl = ({
+  name,
+  storyId,
+  controlsId,
+  options,
+  value,
+  onChange,
+  isInline,
+  argType,
+  required
+}) => {
+  if (!options)
+    return logger2.warn(`Radio with no options: ${name}`), jsx5(Fragment2, { children: "-" });
+  let selection = selectedKey(value, options), controlId = getControlId(name, storyId, controlsId), readonly = !!argType?.table?.readonly;
+  return jsxs4("fieldset", { className: Options_default.wrapper, "data-inline": isInline || void 0, children: [
+    jsxs4("legend", { className: "sb-sr-only", children: [
+      name,
+      required ? " (required)" : ""
+    ] }),
+    Object.keys(options).map((key, index) => {
+      let id18 = `${controlId}-${index}`;
+      return jsxs4(
+        "label",
+        {
+          className: Options_default.label,
+          htmlFor: id18,
+          "data-readonly": readonly || void 0,
+          children: [
+            jsx5(
+              "input",
+              {
+                type: "radio",
+                id: id18,
+                name: controlId,
+                disabled: readonly,
+                value: key,
+                onChange: (e2) => onChange(options[e2.currentTarget.value]),
+                checked: key === selection
+              }
+            ),
+            jsx5("span", { className: Options_default.text, children: key })
+          ]
+        },
+        id18
+      );
+    })
+  ] });
+};
+
+// src/addon-docs/blocks/controls/options/Select.tsx
+import { logger as logger3 } from "@aussieljk/forkbook/internal/client-logger";
+import { ChevronSmallDownIcon } from "@storybook/icons";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/options/Select.module.css
+var id5 = "core/src/addon-docs/blocks/controls/options/Select.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id5}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id5), style.textContent = ".sb-2JMgSq-select{appearance:none;font-size:inherit;box-sizing:border-box;width:100%;color:var(--sb-input-color,inherit);background:var(--sb-input-background);border-radius:var(--sb-input-border-radius);box-shadow:var(--sb-input-border) 0 0 0 1px inset;font-size:calc(var(--sb-size-s2) - 1px);border:0;margin:0;padding:6px 10px;line-height:20px;display:block;position:relative;&:focus{box-shadow:var(--sb-color-secondary) 0 0 0 1px inset;outline:none}&[disabled]{cursor:not-allowed;opacity:.5}&::placeholder{color:var(--sb-text-muted-color)}&[multiple]{padding:0;overflow:auto;& option{margin-left:1px;margin-right:1px;padding:6px 10px;display:block;&:hover{background:var(--sb-background-hoverable)}&:checked{color:var(--sb-color-secondary);font-weight:var(--sb-weight-bold);background:0 0}}}}.sb-2JMgSq-wrapper{vertical-align:top;width:100%;line-height:normal;display:inline-block;position:relative;overflow:hidden;& svg{z-index:1;pointer-events:none;height:12px;fill:var(--sb-text-muted-color);margin-top:-6px;position:absolute;top:50%;right:12px;& path{fill:var(--sb-text-muted-color)}}}", document.head.appendChild(style);
+}
+var Select_default = { wrapper: "sb-2JMgSq-wrapper", select: "sb-2JMgSq-select" };
+
+// src/addon-docs/blocks/controls/options/Select.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var 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, controlsId), readonly = !!argType?.table?.readonly;
+  return jsxs5("span", { className: Select_default.wrapper, children: [
+    jsx6(ChevronSmallDownIcon, {}),
+    jsx6("label", { htmlFor: controlId, className: "sb-sr-only", children: name }),
+    jsxs5(
+      "select",
+      {
+        className: Select_default.select,
+        disabled: readonly,
+        id: controlId,
+        value: selection,
+        onChange: handleChange,
+        "aria-required": required || void 0,
+        children: [
+          jsx6("option", { disabled: selection === NO_SELECTION, children: NO_SELECTION }, "no-selection"),
+          Object.keys(options).map((key) => jsx6("option", { value: key, children: 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, controlsId), readonly = !!argType?.table?.readonly;
+  return jsxs5("span", { className: Select_default.wrapper, children: [
+    jsx6("label", { htmlFor: controlId, className: "sb-sr-only", children: name }),
+    jsx6(
+      "select",
+      {
+        className: Select_default.select,
+        disabled: readonly,
+        id: controlId,
+        multiple: !0,
+        value: selection,
+        onChange: handleChange,
+        "aria-required": required || void 0,
+        children: Object.keys(options).map((key) => jsx6("option", { value: key, children: key }, key))
+      }
+    )
+  ] });
+}, SelectControl = (props) => {
+  let { name, options } = props;
+  return options ? props.isMulti ? jsx6(MultiSelect, { ...props }) : jsx6(SingleSelect, { ...props }) : (logger3.warn(`Select with no options: ${name}`), jsx6(Fragment3, { children: "-" }));
+};
+
+// src/addon-docs/blocks/controls/options/Options.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+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,
+  "inline-radio": RadioControl,
+  select: SelectControl,
+  "multi-select": SelectControl
+}, OptionsControl = (props) => {
+  let { type = "select", labels, argType } = props, normalized = {
+    ...props,
+    argType,
+    options: argType ? normalizeOptions(argType.options, labels) : {},
+    isInline: type.includes("inline"),
+    isMulti: type.includes("multi")
+  }, Control = Controls[type];
+  if (Control)
+    return jsx7(Control, { ...normalized });
+  throw new Error(`Unknown options type: ${type}`);
+};
+
+// src/addon-docs/blocks/controls/Object.tsx
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState4 } from "react";
+import { Button as Button3, Form as Form3, ToggleButton } from "@aussieljk/forkbook/internal/components";
+import { AddIcon, EditIcon, SubtractIcon } from "@storybook/icons";
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/index.tsx
+import { Component as Component2 } from "react";
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/JsonNodes.tsx
+import { Component, cloneElement } from "react";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/react-editable-json-tree/JsonNodeAccordion.module.css
+var id6 = "core/src/addon-docs/blocks/controls/react-editable-json-tree/JsonNodeAccordion.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id6}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id6), style.textContent = '.sb-dnyE6G-container{position:relative;&:hover{&>.rejt-accordion-button:after{background:var(--sb-color-secondary)}&>.rejt-accordion-region>:is(.rejt-plus-menu,.rejt-minus-menu){opacity:1}}}.sb-dnyE6G-trigger{color:var(--sb-color-secondary);background:0 0;border:none;margin-right:3px;padding:0;line-height:22px;&:after{content:"";opacity:.1;background:0 0;border-radius:4px;width:100%;height:22px;margin-left:-1rem;padding-right:20px;transition:background .2s;display:block;position:absolute;top:0}&:before{content:"";position:absolute}&[aria-expanded=true]:before{border-top:3px solid #9999;border-left:3px solid #0000;border-right:3px solid #0000;top:10px;left:-10px}&[aria-expanded=false]:before{border-top:3px solid #0000;border-bottom:3px solid #0000;border-left:3px solid #9999;top:8px;left:-8px}}.sb-dnyE6G-region{display:inline}', document.head.appendChild(style);
+}
+var JsonNodeAccordion_default = { region: "sb-dnyE6G-region", container: "sb-dnyE6G-container", trigger: "sb-dnyE6G-trigger" };
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function JsonNodeAccordion({
+  children,
+  name,
+  collapsed,
+  keyPath,
+  deep,
+  className,
+  ...props
+}) {
+  let accordionKey = `${keyPath.at(-1) ?? "root"}-${name}-${deep}`, ids = {
+    trigger: `${accordionKey}-trigger`,
+    region: `${accordionKey}-region`
+  }, Container = keyPath.length > 0 ? "li" : "div";
+  return jsxs6(Container, { className: JsonNodeAccordion_default.container, children: [
+    jsxs6(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": !collapsed,
+        id: ids.trigger,
+        "aria-controls": ids.region,
+        className: clsx(JsonNodeAccordion_default.trigger, "rejt-accordion-button", className),
+        ...props,
+        children: [
+          name,
+          " :"
+        ]
+      }
+    ),
+    jsx8(
+      "div",
+      {
+        role: "group",
+        id: ids.region,
+        "aria-labelledby": ids.trigger,
+        className: clsx(JsonNodeAccordion_default.region, "rejt-accordion-region"),
+        children
+      }
+    )
+  ] });
+}
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/types/dataTypes.ts
+var ERROR = "Error", OBJECT = "Object", ARRAY = "Array", STRING = "String", NUMBER = "Number", BOOLEAN = "Boolean", DATE = "Date", NULL = "Null", UNDEFINED = "Undefined", FUNCTION = "Function", SYMBOL = "Symbol";
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/types/deltaTypes.ts
+var ADD_DELTA_TYPE = "ADD_DELTA_TYPE", REMOVE_DELTA_TYPE = "REMOVE_DELTA_TYPE", UPDATE_DELTA_TYPE = "UPDATE_DELTA_TYPE";
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/types/inputUsageTypes.ts
+var VALUE = "value";
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/utils/objectTypes.ts
+function getObjectType(obj) {
+  return obj !== null && typeof obj == "object" && !Array.isArray(obj) && typeof obj[Symbol.iterator] == "function" ? "Iterable" : Object.prototype.toString.call(obj).slice(8, -1);
+}
+function isComponentWillChange(oldValue, newValue) {
+  let oldType = getObjectType(oldValue), newType = getObjectType(newValue);
+  return (oldType === "Function" || newType === "Function") && newType !== oldType;
+}
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/JsonNodes.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var JsonAddValue = class extends Component {
+  constructor(props) {
+    super(props), this.state = {
+      inputRefKey: null,
+      inputRefValue: null
+    }, this.refInputValue = this.refInputValue.bind(this), this.refInputKey = this.refInputKey.bind(this), this.onKeydown = this.onKeydown.bind(this), this.onSubmit = this.onSubmit.bind(this);
+  }
+  componentDidMount() {
+    let { inputRefKey, inputRefValue } = this.state, { onlyValue } = this.props;
+    inputRefKey && typeof inputRefKey.focus == "function" && inputRefKey.focus(), onlyValue && inputRefValue && typeof inputRefValue.focus == "function" && inputRefValue.focus();
+  }
+  onKeydown(event) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat)
+      return;
+    let { inputRefKey, inputRefValue } = this.state, { addButtonElement, handleCancel } = this.props;
+    [inputRefKey, inputRefValue, addButtonElement].some(
+      (elm) => elm === event.target
+    ) && ((event.code === "Enter" || event.key === "Enter") && (event.preventDefault(), this.onSubmit()), (event.code === "Escape" || event.key === "Escape") && (event.preventDefault(), handleCancel()));
+  }
+  onSubmit() {
+    let { handleAdd, onlyValue, onSubmitValueParser, keyPath, deep } = this.props, { inputRefKey, inputRefValue } = this.state, result = {};
+    if (!onlyValue) {
+      if (!inputRefKey.value)
+        return;
+      result.key = inputRefKey.value;
+    }
+    result.newValue = onSubmitValueParser(!1, keyPath, deep, result.key, inputRefValue.value), handleAdd(result);
+  }
+  refInputKey(node) {
+    this.state.inputRefKey = node;
+  }
+  refInputValue(node) {
+    this.state.inputRefValue = node;
+  }
+  render() {
+    let {
+      handleCancel,
+      onlyValue,
+      addButtonElement,
+      cancelButtonElement,
+      inputElementGenerator,
+      keyPath,
+      deep
+    } = this.props, addButtonElementLayout = addButtonElement && cloneElement(addButtonElement, {
+      onClick: this.onSubmit
+    }), cancelButtonElementLayout = cancelButtonElement && cloneElement(cancelButtonElement, {
+      onClick: handleCancel
+    }), inputElementValue = inputElementGenerator(VALUE, keyPath, deep), inputElementValueLayout = cloneElement(inputElementValue, {
+      placeholder: "Value",
+      ref: this.refInputValue,
+      onKeyDown: this.onKeydown
+    }), inputElementKeyLayout = null;
+    if (!onlyValue) {
+      let inputElementKey = inputElementGenerator("key", keyPath, deep);
+      inputElementKeyLayout = cloneElement(inputElementKey, {
+        placeholder: "Key",
+        ref: this.refInputKey,
+        onKeyDown: this.onKeydown
+      });
+    }
+    return jsxs7("span", { className: "rejt-add-value-node", children: [
+      inputElementKeyLayout,
+      inputElementValueLayout,
+      addButtonElementLayout,
+      cancelButtonElementLayout
+    ] });
+  }
+};
+JsonAddValue.defaultProps = {
+  onlyValue: !1,
+  addButtonElement: jsx9("button", { children: "+" }),
+  cancelButtonElement: jsx9("button", { children: "c" })
+};
+var JsonArray = class extends Component {
+  constructor(props) {
+    super(props);
+    let keyPath = [...props.keyPath || [], props.name];
+    this.state = {
+      data: props.data,
+      name: props.name,
+      keyPath: keyPath ?? [],
+      deep: props.deep ?? 0,
+      nextDeep: (props.deep ?? 0) + 1,
+      collapsed: props.isCollapsed(keyPath, props.deep ?? 0, props.data),
+      addFormVisible: !1
+    }, this.handleCollapseMode = this.handleCollapseMode.bind(this), this.handleRemoveItem = this.handleRemoveItem.bind(this), this.handleAddMode = this.handleAddMode.bind(this), this.handleAddValueAdd = this.handleAddValueAdd.bind(this), this.handleAddValueCancel = this.handleAddValueCancel.bind(this), this.handleEditValue = this.handleEditValue.bind(this), this.onChildUpdate = this.onChildUpdate.bind(this), this.renderCollapsed = this.renderCollapsed.bind(this), this.renderNotCollapsed = this.renderNotCollapsed.bind(this);
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.data !== state.data ? { data: props.data } : null;
+  }
+  onChildUpdate(childKey, childData) {
+    let { data, keyPath = [] } = this.state;
+    data[childKey] = childData, this.setState({
+      data
+    });
+    let { onUpdate } = this.props, size = keyPath.length;
+    onUpdate(keyPath[size - 1], data);
+  }
+  handleAddMode() {
+    this.setState({
+      addFormVisible: !0
+    });
+  }
+  handleCollapseMode() {
+    this.setState((state) => ({
+      collapsed: !state.collapsed
+    }));
+  }
+  handleRemoveItem(index) {
+    return () => {
+      let { beforeRemoveAction, logger: logger4 } = this.props, { data, keyPath, nextDeep: deep } = this.state, oldValue = data[index];
+      (beforeRemoveAction || Promise.resolve.bind(Promise))(index, keyPath, deep, oldValue).then(() => {
+        let deltaUpdateResult = {
+          keyPath,
+          deep,
+          key: index,
+          oldValue,
+          type: REMOVE_DELTA_TYPE
+        };
+        data.splice(index, 1), this.setState({ data });
+        let { onUpdate, onDeltaUpdate } = this.props;
+        onUpdate(keyPath[keyPath.length - 1], data), onDeltaUpdate(deltaUpdateResult);
+      }).catch(logger4.error);
+    };
+  }
+  handleAddValueAdd({ newValue }) {
+    let { data, keyPath = [], nextDeep: deep } = this.state, { beforeAddAction, logger: logger4 } = this.props, key = data.length;
+    (beforeAddAction || Promise.resolve.bind(Promise))(key, keyPath, deep, newValue).then(() => {
+      data[key] = newValue, this.setState({
+        data
+      }), this.handleAddValueCancel();
+      let { onUpdate, onDeltaUpdate } = this.props;
+      onUpdate(keyPath[keyPath.length - 1], data), onDeltaUpdate({
+        type: ADD_DELTA_TYPE,
+        keyPath,
+        deep,
+        key,
+        newValue
+      });
+    }).catch(logger4.error);
+  }
+  handleAddValueCancel() {
+    this.setState({
+      addFormVisible: !1
+    });
+  }
+  handleEditValue({ key, value }) {
+    return new Promise((resolve, reject) => {
+      let { beforeUpdateAction } = this.props, { data, keyPath, nextDeep: deep } = this.state, oldValue = data[key];
+      (beforeUpdateAction || Promise.resolve.bind(Promise))(key, keyPath, deep, oldValue, value).then(() => {
+        data[key] = value, this.setState({
+          data
+        });
+        let { onUpdate, onDeltaUpdate } = this.props;
+        onUpdate(keyPath[keyPath.length - 1], data), onDeltaUpdate({
+          type: UPDATE_DELTA_TYPE,
+          keyPath,
+          deep,
+          key,
+          newValue: value,
+          oldValue
+        }), resolve(void 0);
+      }).catch(reject);
+    });
+  }
+  renderCollapsed() {
+    let { name, data, keyPath, deep } = this.state, { handleRemove, readOnly, dataType, minusMenuElement } = this.props, isReadOnly = readOnly(name, data, keyPath, deep, dataType), removeItemButton = minusMenuElement && cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: "rejt-minus-menu",
+      "aria-label": `remove the array '${String(name)}'`
+    });
+    return jsxs7(Fragment4, { children: [
+      jsxs7("span", { className: "rejt-collapsed-value", children: [
+        "[...] ",
+        data.length,
+        " ",
+        data.length === 1 ? "item" : "items"
+      ] }),
+      !isReadOnly && removeItemButton
+    ] });
+  }
+  renderNotCollapsed() {
+    let { name, data, keyPath, deep, addFormVisible, nextDeep } = this.state, {
+      isCollapsed,
+      handleRemove,
+      onDeltaUpdate,
+      readOnly,
+      dataType,
+      addButtonElement,
+      cancelButtonElement,
+      inputElementGenerator,
+      textareaElementGenerator,
+      minusMenuElement,
+      plusMenuElement,
+      beforeRemoveAction,
+      beforeAddAction,
+      beforeUpdateAction,
+      logger: logger4,
+      onSubmitValueParser
+    } = this.props, isReadOnly = readOnly(name, data, keyPath, deep, dataType), addItemButton = plusMenuElement && cloneElement(plusMenuElement, {
+      onClick: this.handleAddMode,
+      className: "rejt-plus-menu",
+      "aria-label": `add a new item to the '${String(name)}' array`
+    }), removeItemButton = minusMenuElement && cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: "rejt-minus-menu",
+      "aria-label": `remove the array '${String(name)}'`
+    });
+    return jsxs7(Fragment4, { children: [
+      jsx9("span", { className: "rejt-not-collapsed-delimiter", children: "[" }),
+      !addFormVisible && addItemButton,
+      jsx9("ul", { className: "rejt-not-collapsed-list", children: data.map((item, index) => jsx9(
+        JsonNode,
+        {
+          name: index.toString(),
+          data: item,
+          keyPath,
+          deep: nextDeep,
+          isCollapsed,
+          handleRemove: this.handleRemoveItem(index),
+          handleUpdateValue: this.handleEditValue,
+          onUpdate: this.onChildUpdate,
+          onDeltaUpdate,
+          readOnly,
+          addButtonElement,
+          cancelButtonElement,
+          inputElementGenerator,
+          textareaElementGenerator,
+          minusMenuElement,
+          plusMenuElement,
+          beforeRemoveAction,
+          beforeAddAction,
+          beforeUpdateAction,
+          logger: logger4,
+          onSubmitValueParser
+        },
+        index
+      )) }),
+      !isReadOnly && addFormVisible && jsx9("div", { className: "rejt-add-form", children: jsx9(
+        JsonAddValue,
+        {
+          handleAdd: this.handleAddValueAdd,
+          handleCancel: this.handleAddValueCancel,
+          onlyValue: !0,
+          addButtonElement,
+          cancelButtonElement,
+          inputElementGenerator,
+          keyPath,
+          deep,
+          onSubmitValueParser
+        }
+      ) }),
+      jsx9("span", { className: "rejt-not-collapsed-delimiter", children: "]" }),
+      !isReadOnly && removeItemButton
+    ] });
+  }
+  render() {
+    let { name, collapsed, keyPath, deep } = this.state, value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
+    return jsx9(
+      JsonNodeAccordion,
+      {
+        name,
+        collapsed,
+        deep,
+        keyPath,
+        onClick: this.handleCollapseMode,
+        children: value
+      }
+    );
+  }
+};
+JsonArray.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  minusMenuElement: jsx9("span", { children: " - " }),
+  plusMenuElement: jsx9("span", { children: " + " })
+};
+var JsonFunctionValue = class extends Component {
+  constructor(props) {
+    super(props);
+    let keyPath = [...props.keyPath || [], props.name];
+    this.state = {
+      value: props.value,
+      name: props.name,
+      keyPath: keyPath ?? [],
+      deep: props.deep ?? 0,
+      editEnabled: !1,
+      inputRef: null
+    }, this.handleEditMode = this.handleEditMode.bind(this), this.refInput = this.refInput.bind(this), this.handleCancelEdit = this.handleCancelEdit.bind(this), this.handleEdit = this.handleEdit.bind(this), this.onKeydown = this.onKeydown.bind(this);
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.value !== state.value ? { value: props.value } : null;
+  }
+  componentDidUpdate() {
+    let { editEnabled, inputRef, name, value, keyPath, deep } = this.state, { readOnly, dataType } = this.props, readOnlyResult = readOnly(name, value, keyPath, deep, dataType);
+    editEnabled && !readOnlyResult && typeof inputRef.focus == "function" && inputRef.focus();
+  }
+  onKeydown(event) {
+    let { inputRef } = this.state;
+    event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat || inputRef !== event.target || ((event.code === "Enter" || event.key === "Enter") && (event.preventDefault(), this.handleEdit()), (event.code === "Escape" || event.key === "Escape") && (event.preventDefault(), this.handleCancelEdit()));
+  }
+  handleEdit() {
+    let { handleUpdateValue, originalValue, logger: logger4, onSubmitValueParser, keyPath } = this.props, { inputRef, name, deep } = this.state;
+    if (!inputRef)
+      return;
+    let newValue = onSubmitValueParser(!0, keyPath, deep, name, inputRef.value), result = {
+      value: newValue,
+      key: name
+    };
+    (handleUpdateValue || Promise.resolve.bind(Promise))(result).then(() => {
+      isComponentWillChange(originalValue, newValue) || this.handleCancelEdit();
+    }).catch(logger4.error);
+  }
+  handleEditMode() {
+    this.setState({
+      editEnabled: !0
+    });
+  }
+  refInput(node) {
+    this.state.inputRef = node;
+  }
+  handleCancelEdit() {
+    this.setState({
+      editEnabled: !1
+    });
+  }
+  render() {
+    let { name, value, editEnabled, keyPath, deep } = this.state, {
+      handleRemove,
+      originalValue,
+      readOnly,
+      dataType,
+      textareaElementGenerator,
+      minusMenuElement,
+      keyPath: comeFromKeyPath = []
+    } = this.props, result = null, minusElement = null, resultOnlyResult = readOnly(name, originalValue, keyPath, deep, dataType);
+    if (editEnabled && !resultOnlyResult) {
+      let textareaElement = textareaElementGenerator(
+        VALUE,
+        comeFromKeyPath,
+        deep,
+        name,
+        originalValue,
+        dataType
+      ), textareaElementLayout = cloneElement(textareaElement, {
+        ref: this.refInput,
+        defaultValue: value,
+        onKeyDown: this.onKeydown
+      });
+      result = jsx9("span", { className: "rejt-edit-form", children: textareaElementLayout }), minusElement = null;
+    } else {
+      result = jsx9("span", { className: "rejt-value", onClick: resultOnlyResult ? void 0 : this.handleEditMode, children: value });
+      let parentPropertyName = comeFromKeyPath.at(-1), minusMenuLayout = minusMenuElement && cloneElement(minusMenuElement, {
+        onClick: handleRemove,
+        className: "rejt-minus-menu",
+        "aria-label": `remove the function '${String(name)}'${String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ""}`
+      });
+      minusElement = resultOnlyResult ? null : minusMenuLayout;
+    }
+    return jsxs7("li", { className: "rejt-value-node", children: [
+      jsxs7("span", { className: "rejt-name", children: [
+        name,
+        " : "
+      ] }),
+      result,
+      minusElement
+    ] });
+  }
+};
+JsonFunctionValue.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  handleUpdateValue: () => {
+  },
+  cancelButtonElement: jsx9("button", { children: "c" }),
+  minusMenuElement: jsx9("span", { children: " - " })
+};
+var JsonNode = class extends Component {
+  constructor(props) {
+    super(props), this.state = {
+      data: props.data,
+      name: props.name,
+      keyPath: props.keyPath ?? [],
+      deep: props.deep ?? 0
+    };
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.data !== state.data ? { data: props.data } : null;
+  }
+  render() {
+    let { data, name, keyPath, deep } = this.state, {
+      isCollapsed,
+      handleRemove,
+      handleUpdateValue,
+      onUpdate,
+      onDeltaUpdate,
+      readOnly,
+      addButtonElement,
+      cancelButtonElement,
+      inputElementGenerator,
+      textareaElementGenerator,
+      minusMenuElement,
+      plusMenuElement,
+      beforeRemoveAction,
+      beforeAddAction,
+      beforeUpdateAction,
+      logger: logger4,
+      onSubmitValueParser
+    } = this.props, readOnlyTrue = () => !0, dataType = getObjectType(data);
+    switch (dataType) {
+      case ERROR:
+        return jsx9(
+          JsonObject,
+          {
+            data,
+            name,
+            isCollapsed,
+            keyPath,
+            deep,
+            handleRemove,
+            onUpdate,
+            onDeltaUpdate,
+            readOnly: readOnlyTrue,
+            dataType,
+            addButtonElement,
+            cancelButtonElement,
+            inputElementGenerator,
+            textareaElementGenerator,
+            minusMenuElement,
+            plusMenuElement,
+            beforeRemoveAction,
+            beforeAddAction,
+            beforeUpdateAction,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case OBJECT:
+        return jsx9(
+          JsonObject,
+          {
+            data,
+            name,
+            isCollapsed,
+            keyPath,
+            deep,
+            handleRemove,
+            onUpdate,
+            onDeltaUpdate,
+            readOnly,
+            dataType,
+            addButtonElement,
+            cancelButtonElement,
+            inputElementGenerator,
+            textareaElementGenerator,
+            minusMenuElement,
+            plusMenuElement,
+            beforeRemoveAction,
+            beforeAddAction,
+            beforeUpdateAction,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case ARRAY:
+        return jsx9(
+          JsonArray,
+          {
+            data,
+            name,
+            isCollapsed,
+            keyPath,
+            deep,
+            handleRemove,
+            onUpdate,
+            onDeltaUpdate,
+            readOnly,
+            dataType,
+            addButtonElement,
+            cancelButtonElement,
+            inputElementGenerator,
+            textareaElementGenerator,
+            minusMenuElement,
+            plusMenuElement,
+            beforeRemoveAction,
+            beforeAddAction,
+            beforeUpdateAction,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case STRING:
+        return jsx9(
+          JsonValue,
+          {
+            name,
+            value: `"${data}"`,
+            originalValue: data,
+            keyPath,
+            deep,
+            handleRemove,
+            handleUpdateValue,
+            readOnly,
+            dataType,
+            cancelButtonElement,
+            inputElementGenerator,
+            minusMenuElement,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case NUMBER:
+        return jsx9(
+          JsonValue,
+          {
+            name,
+            value: data,
+            originalValue: data,
+            keyPath,
+            deep,
+            handleRemove,
+            handleUpdateValue,
+            readOnly,
+            dataType,
+            cancelButtonElement,
+            inputElementGenerator,
+            minusMenuElement,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case BOOLEAN:
+        return jsx9(
+          JsonValue,
+          {
+            name,
+            value: data ? "true" : "false",
+            originalValue: data,
+            keyPath,
+            deep,
+            handleRemove,
+            handleUpdateValue,
+            readOnly,
+            dataType,
+            cancelButtonElement,
+            inputElementGenerator,
+            minusMenuElement,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case DATE:
+        return jsx9(
+          JsonValue,
+          {
+            name,
+            value: data.toISOString(),
+            originalValue: data,
+            keyPath,
+            deep,
+            handleRemove,
+            handleUpdateValue,
+            readOnly: readOnlyTrue,
+            dataType,
+            cancelButtonElement,
+            inputElementGenerator,
+            minusMenuElement,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case NULL:
+        return jsx9(
+          JsonValue,
+          {
+            name,
+            value: "null",
+            originalValue: "null",
+            keyPath,
+            deep,
+            handleRemove,
+            handleUpdateValue,
+            readOnly,
+            dataType,
+            cancelButtonElement,
+            inputElementGenerator,
+            minusMenuElement,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case UNDEFINED:
+        return jsx9(
+          JsonValue,
+          {
+            name,
+            value: "undefined",
+            originalValue: "undefined",
+            keyPath,
+            deep,
+            handleRemove,
+            handleUpdateValue,
+            readOnly,
+            dataType,
+            cancelButtonElement,
+            inputElementGenerator,
+            minusMenuElement,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case FUNCTION:
+        return jsx9(
+          JsonFunctionValue,
+          {
+            name,
+            value: data.toString(),
+            originalValue: data,
+            keyPath,
+            deep,
+            handleRemove,
+            handleUpdateValue,
+            readOnly,
+            dataType,
+            cancelButtonElement,
+            textareaElementGenerator,
+            minusMenuElement,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      case SYMBOL:
+        return jsx9(
+          JsonValue,
+          {
+            name,
+            value: data.toString(),
+            originalValue: data,
+            keyPath,
+            deep,
+            handleRemove,
+            handleUpdateValue,
+            readOnly: readOnlyTrue,
+            dataType,
+            cancelButtonElement,
+            inputElementGenerator,
+            minusMenuElement,
+            logger: logger4,
+            onSubmitValueParser
+          }
+        );
+      default:
+        return null;
+    }
+  }
+};
+JsonNode.defaultProps = {
+  keyPath: [],
+  deep: 0
+};
+var JsonObject = class extends Component {
+  constructor(props) {
+    super(props);
+    let keyPath = props.deep === -1 ? [] : [...props.keyPath || [], props.name];
+    this.state = {
+      name: props.name,
+      data: props.data,
+      keyPath: keyPath ?? [],
+      deep: props.deep ?? 0,
+      nextDeep: (props.deep ?? 0) + 1,
+      collapsed: props.isCollapsed(keyPath, props.deep ?? 0, props.data),
+      addFormVisible: !1
+    }, this.handleCollapseMode = this.handleCollapseMode.bind(this), this.handleRemoveValue = this.handleRemoveValue.bind(this), this.handleAddMode = this.handleAddMode.bind(this), this.handleAddValueAdd = this.handleAddValueAdd.bind(this), this.handleAddValueCancel = this.handleAddValueCancel.bind(this), this.handleEditValue = this.handleEditValue.bind(this), this.onChildUpdate = this.onChildUpdate.bind(this), this.renderCollapsed = this.renderCollapsed.bind(this), this.renderNotCollapsed = this.renderNotCollapsed.bind(this);
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.data !== state.data ? { data: props.data } : null;
+  }
+  onChildUpdate(childKey, childData) {
+    let { data, keyPath = [] } = this.state;
+    data[childKey] = childData, this.setState({
+      data
+    });
+    let { onUpdate } = this.props, size = keyPath.length;
+    onUpdate(keyPath[size - 1], data);
+  }
+  handleAddMode() {
+    this.setState({
+      addFormVisible: !0
+    });
+  }
+  handleAddValueCancel() {
+    this.setState({
+      addFormVisible: !1
+    });
+  }
+  handleAddValueAdd({ key, newValue }) {
+    let { data, keyPath = [], nextDeep: deep } = this.state, { beforeAddAction, logger: logger4 } = this.props;
+    (beforeAddAction || Promise.resolve.bind(Promise))(key, keyPath, deep, newValue).then(() => {
+      data[key] = newValue, this.setState({
+        data
+      }), this.handleAddValueCancel();
+      let { onUpdate, onDeltaUpdate } = this.props;
+      onUpdate(keyPath[keyPath.length - 1], data), onDeltaUpdate({
+        type: ADD_DELTA_TYPE,
+        keyPath,
+        deep,
+        key,
+        newValue
+      });
+    }).catch(logger4.error);
+  }
+  handleRemoveValue(key) {
+    return () => {
+      let { beforeRemoveAction, logger: logger4 } = this.props, { data, keyPath = [], nextDeep: deep } = this.state, oldValue = data[key];
+      (beforeRemoveAction || Promise.resolve.bind(Promise))(key, keyPath, deep, oldValue).then(() => {
+        let deltaUpdateResult = {
+          keyPath,
+          deep,
+          key,
+          oldValue,
+          type: REMOVE_DELTA_TYPE
+        };
+        delete data[key], this.setState({ data });
+        let { onUpdate, onDeltaUpdate } = this.props;
+        onUpdate(keyPath[keyPath.length - 1], data), onDeltaUpdate(deltaUpdateResult);
+      }).catch(logger4.error);
+    };
+  }
+  handleCollapseMode() {
+    this.setState((state) => ({
+      collapsed: !state.collapsed
+    }));
+  }
+  handleEditValue({ key, value }) {
+    return new Promise((resolve, reject) => {
+      let { beforeUpdateAction } = this.props, { data, keyPath = [], nextDeep: deep } = this.state, oldValue = data[key];
+      (beforeUpdateAction || Promise.resolve.bind(Promise))(key, keyPath, deep, oldValue, value).then(() => {
+        data[key] = value, this.setState({
+          data
+        });
+        let { onUpdate, onDeltaUpdate } = this.props;
+        onUpdate(keyPath[keyPath.length - 1], data), onDeltaUpdate({
+          type: UPDATE_DELTA_TYPE,
+          keyPath,
+          deep,
+          key,
+          newValue: value,
+          oldValue
+        }), resolve();
+      }).catch(reject);
+    });
+  }
+  renderCollapsed() {
+    let { name, keyPath, deep, data } = this.state, { handleRemove, readOnly, dataType, minusMenuElement } = this.props, keyList = Object.getOwnPropertyNames(data), isReadOnly = readOnly(name, data, keyPath, deep, dataType), removeItemButton = minusMenuElement && cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: "rejt-minus-menu",
+      "aria-label": `remove the object '${String(name)}'`
+    });
+    return jsxs7(Fragment4, { children: [
+      jsxs7("span", { className: "rejt-collapsed-value", children: [
+        "{...}",
+        " ",
+        keyList.length,
+        " ",
+        keyList.length === 1 ? "key" : "keys"
+      ] }),
+      !isReadOnly && removeItemButton
+    ] });
+  }
+  renderNotCollapsed() {
+    let { name, data, keyPath, deep, nextDeep, addFormVisible } = this.state, {
+      isCollapsed,
+      handleRemove,
+      onDeltaUpdate,
+      readOnly,
+      dataType,
+      addButtonElement,
+      cancelButtonElement,
+      inputElementGenerator,
+      textareaElementGenerator,
+      minusMenuElement,
+      plusMenuElement,
+      beforeRemoveAction,
+      beforeAddAction,
+      beforeUpdateAction,
+      logger: logger4,
+      onSubmitValueParser
+    } = this.props, keyList = Object.getOwnPropertyNames(data), isReadOnly = readOnly(name, data, keyPath, deep, dataType), addItemButton = plusMenuElement && cloneElement(plusMenuElement, {
+      onClick: this.handleAddMode,
+      className: "rejt-plus-menu",
+      "aria-label": `add a new property to the object '${String(name)}'`
+    }), removeItemButton = minusMenuElement && cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: "rejt-minus-menu",
+      "aria-label": `remove the object '${String(name)}'`
+    }), list = keyList.map((key) => jsx9(
+      JsonNode,
+      {
+        name: key,
+        data: data[key],
+        keyPath,
+        deep: nextDeep,
+        isCollapsed,
+        handleRemove: this.handleRemoveValue(key),
+        handleUpdateValue: this.handleEditValue,
+        onUpdate: this.onChildUpdate,
+        onDeltaUpdate,
+        readOnly,
+        addButtonElement,
+        cancelButtonElement,
+        inputElementGenerator,
+        textareaElementGenerator,
+        minusMenuElement,
+        plusMenuElement,
+        beforeRemoveAction,
+        beforeAddAction,
+        beforeUpdateAction,
+        logger: logger4,
+        onSubmitValueParser
+      },
+      key
+    ));
+    return jsxs7(Fragment4, { children: [
+      jsx9("span", { className: "rejt-not-collapsed-delimiter", children: "{" }),
+      !isReadOnly && addItemButton,
+      jsx9("ul", { className: "rejt-not-collapsed-list", children: list }),
+      !isReadOnly && addFormVisible && jsx9("div", { className: "rejt-add-form", children: jsx9(
+        JsonAddValue,
+        {
+          handleAdd: this.handleAddValueAdd,
+          handleCancel: this.handleAddValueCancel,
+          addButtonElement,
+          cancelButtonElement,
+          inputElementGenerator,
+          keyPath,
+          deep,
+          onSubmitValueParser
+        }
+      ) }),
+      jsx9("span", { className: "rejt-not-collapsed-delimiter", children: "}" }),
+      !isReadOnly && removeItemButton
+    ] });
+  }
+  render() {
+    let { name, collapsed, keyPath, deep = 0 } = this.state, value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
+    return jsx9(
+      JsonNodeAccordion,
+      {
+        name,
+        collapsed,
+        deep,
+        keyPath,
+        onClick: this.handleCollapseMode,
+        children: value
+      }
+    );
+  }
+};
+JsonObject.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  minusMenuElement: jsx9("span", { children: " - " }),
+  plusMenuElement: jsx9("span", { children: " + " })
+};
+var JsonValue = class extends Component {
+  constructor(props) {
+    super(props);
+    let keyPath = [...props.keyPath || [], props.name];
+    this.state = {
+      value: props.value,
+      name: props.name,
+      keyPath: keyPath ?? [],
+      deep: props.deep ?? 0,
+      editEnabled: !1,
+      inputRef: null
+    }, this.handleEditMode = this.handleEditMode.bind(this), this.refInput = this.refInput.bind(this), this.handleCancelEdit = this.handleCancelEdit.bind(this), this.handleEdit = this.handleEdit.bind(this), this.onKeydown = this.onKeydown.bind(this);
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.value !== state.value ? { value: props.value } : null;
+  }
+  componentDidUpdate() {
+    let { editEnabled, inputRef, name, value, keyPath, deep } = this.state, { readOnly, dataType } = this.props, isReadOnly = readOnly(name, value, keyPath, deep, dataType);
+    editEnabled && !isReadOnly && typeof inputRef.focus == "function" && inputRef.focus();
+  }
+  onKeydown(event) {
+    let { inputRef } = this.state;
+    event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat || inputRef !== event.target || ((event.code === "Enter" || event.key === "Enter") && (event.preventDefault(), this.handleEdit()), (event.code === "Escape" || event.key === "Escape") && (event.preventDefault(), this.handleCancelEdit()));
+  }
+  handleEdit() {
+    let { handleUpdateValue, originalValue, logger: logger4, onSubmitValueParser, keyPath } = this.props, { inputRef, name, deep } = this.state;
+    if (!inputRef)
+      return;
+    let newValue = onSubmitValueParser(!0, keyPath, deep, name, inputRef.value), result = {
+      value: newValue,
+      key: name
+    };
+    (handleUpdateValue || Promise.resolve.bind(Promise))(result).then(() => {
+      isComponentWillChange(originalValue, newValue) || this.handleCancelEdit();
+    }).catch(logger4.error);
+  }
+  handleEditMode() {
+    this.setState({
+      editEnabled: !0
+    });
+  }
+  refInput(node) {
+    this.state.inputRef = node;
+  }
+  handleCancelEdit() {
+    this.setState({
+      editEnabled: !1
+    });
+  }
+  render() {
+    let { name, value, editEnabled, keyPath, deep } = this.state, {
+      handleRemove,
+      originalValue,
+      readOnly,
+      dataType,
+      inputElementGenerator,
+      minusMenuElement,
+      keyPath: comeFromKeyPath
+    } = this.props, isReadOnly = readOnly(name, originalValue, keyPath, deep, dataType), isEditing = editEnabled && !isReadOnly, inputElement = inputElementGenerator(
+      VALUE,
+      comeFromKeyPath,
+      deep,
+      name,
+      originalValue,
+      dataType
+    ), inputElementLayout = cloneElement(inputElement, {
+      ref: this.refInput,
+      defaultValue: JSON.stringify(originalValue),
+      onKeyDown: this.onKeydown
+    }), parentPropertyName = keyPath.at(-2), minusMenuLayout = minusMenuElement && cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: "rejt-minus-menu",
+      "aria-label": `remove the property '${String(name)}' with value '${String(originalValue)}'${String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ""}`
+    });
+    return jsxs7("li", { className: "rejt-value-node", children: [
+      jsxs7("span", { className: "rejt-name", children: [
+        name,
+        " : "
+      ] }),
+      isEditing ? jsx9("span", { className: "rejt-edit-form", children: inputElementLayout }) : jsx9("span", { className: "rejt-value", onClick: isReadOnly ? void 0 : this.handleEditMode, children: String(value) }),
+      !isReadOnly && !isEditing && minusMenuLayout
+    ] });
+  }
+};
+JsonValue.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  handleUpdateValue: () => Promise.resolve(),
+  cancelButtonElement: jsx9("button", { children: "c" }),
+  minusMenuElement: jsx9("span", { children: " - " })
+};
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/utils/parse.ts
+function parse3(string) {
+  let result = string;
+  if (result.indexOf("function") === 0)
+    return (0, eval)(`(${result})`);
+  try {
+    result = JSON.parse(string);
+  } catch {
+  }
+  return result;
+}
+
+// src/addon-docs/blocks/controls/react-editable-json-tree/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var JsonTree = class extends Component2 {
+  constructor(props) {
+    super(props), this.state = {
+      data: props.data,
+      rootName: props.rootName
+    }, this.onUpdate = this.onUpdate.bind(this), this.removeRoot = this.removeRoot.bind(this);
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.data !== state.data || props.rootName !== state.rootName ? {
+      data: props.data,
+      rootName: props.rootName
+    } : null;
+  }
+  onUpdate(key, data) {
+    this.setState({ data }), this.props.onFullyUpdate?.(data);
+  }
+  removeRoot() {
+    this.onUpdate(null, null);
+  }
+  render() {
+    let { data, rootName } = this.state, {
+      isCollapsed,
+      onDeltaUpdate,
+      readOnly,
+      addButtonElement,
+      cancelButtonElement,
+      inputElement,
+      textareaElement,
+      minusMenuElement,
+      plusMenuElement,
+      beforeRemoveAction,
+      beforeAddAction,
+      beforeUpdateAction,
+      logger: logger4,
+      onSubmitValueParser,
+      fallback = null
+    } = this.props, dataType = getObjectType(data), readOnlyFunction = readOnly;
+    getObjectType(readOnly) === "Boolean" && (readOnlyFunction = () => readOnly);
+    let inputElementFunction = inputElement;
+    inputElement && getObjectType(inputElement) !== "Function" && (inputElementFunction = () => inputElement);
+    let textareaElementFunction = textareaElement;
+    return textareaElement && getObjectType(textareaElement) !== "Function" && (textareaElementFunction = () => textareaElement), dataType === "Object" || dataType === "Array" ? jsx10("div", { className: "rejt-tree", children: jsx10(
+      JsonNode,
+      {
+        data,
+        name: rootName || "root",
+        deep: -1,
+        isCollapsed: isCollapsed ?? (() => !1),
+        onUpdate: this.onUpdate,
+        onDeltaUpdate: onDeltaUpdate ?? (() => {
+        }),
+        readOnly: readOnlyFunction,
+        addButtonElement,
+        cancelButtonElement,
+        inputElementGenerator: inputElementFunction,
+        textareaElementGenerator: textareaElementFunction,
+        minusMenuElement,
+        plusMenuElement,
+        handleRemove: this.removeRoot,
+        beforeRemoveAction,
+        beforeAddAction,
+        beforeUpdateAction,
+        logger: logger4 ?? {},
+        onSubmitValueParser: onSubmitValueParser ?? ((val) => val)
+      }
+    ) }) : fallback;
+  }
+};
+JsonTree.defaultProps = {
+  rootName: "root",
+  isCollapsed: (keyPath, deep) => deep !== -1,
+  readOnly: () => !1,
+  onFullyUpdate: () => {
+  },
+  onDeltaUpdate: () => {
+  },
+  beforeRemoveAction: () => Promise.resolve(),
+  beforeAddAction: () => Promise.resolve(),
+  beforeUpdateAction: () => Promise.resolve(),
+  logger: { error: () => {
+  } },
+  onSubmitValueParser: (isEditMode, keyPath, deep, name, rawValue) => parse3(rawValue),
+  inputElement: () => jsx10("input", {}),
+  textareaElement: () => jsx10("textarea", {}),
+  fallback: null
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/Object.module.css
+var id7 = "core/src/addon-docs/blocks/controls/Object.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id7}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id7), style.textContent = ".sb-_OaGtq-wrapper{isolation:isolate;gap:8px;display:flex;position:relative;& .rejt-tree{flex:1;margin-left:1rem;font-size:13px;list-style-type:none}& .rejt-value-node:hover>button{opacity:1}& .rejt-add-form{margin-left:10px}& .rejt-add-value-node{align-items:center;display:inline-flex}& .rejt-name{color:var(--sb-color-secondary);line-height:22px}& .rejt-not-collapsed-list{margin:0 0 0 1rem;padding:0;list-style:none}& .rejt-not-collapsed-delimiter{line-height:22px}& .rejt-value{cursor:text;color:var(--sb-color-default-text);border:1px solid #0000;border-radius:4px;margin:1px 0;padding:0 4px;display:inline-block}& .rejt-value-node:hover>.rejt-value{background:var(--sb-color-lighter);border-color:var(--sb-app-border-color)}& .rejt-collapsed-value{color:var(--sb-color-default-text)}}:where([data-sb-theme=dark]) .sb-_OaGtq-wrapper .rejt-value-node:hover>.rejt-value{background:#ffffff05}.sb-_OaGtq-buttonInline{height:20px;color:var(--sb-color-dark);cursor:pointer;background:0 0;border:0;border-radius:4px;margin:1px;font-weight:400;&[data-primary]{background:var(--sb-color-secondary);color:var(--sb-color-lightest);font-weight:700}}.sb-_OaGtq-actionButton{vertical-align:middle;color:var(--sb-text-muted-color);opacity:0;cursor:pointer;background:0 0;border:0;margin-left:5px;padding:3px;transition:opacity .2s;display:inline-flex;position:relative;& svg{width:9px;height:9px}&:disabled{cursor:not-allowed}&:hover,&:focus-visible{opacity:1}&:hover:not(:disabled),&:focus-visible:not(:disabled){&.rejt-plus-menu{color:var(--sb-color-ancillary)}&.rejt-minus-menu{color:var(--sb-color-negative)}}}.sb-_OaGtq-input{color:var(--sb-color-default-text);background:var(--sb-background-app);border:1px solid var(--sb-app-border-color);border-radius:4px;outline:0;width:120px;margin:1px 0;padding:3px 4px;line-height:14px;&[placeholder]{margin:1px}&[placeholder=Key]{width:80px}&:focus{border:1px solid var(--sb-color-secondary)}}.sb-_OaGtq-rawButton{order:2;align-self:flex-start;margin-right:-10px}.sb-_OaGtq-rawInput{font-family:var(--sb-font-mono);flex:1;padding:7px 6px;font-size:12px;line-height:18px;&::placeholder{font-family:var(--sb-font-base);font-size:13px}&:placeholder-shown{padding:7px 10px}}", document.head.appendChild(style);
+}
+var Object_default = { buttonInline: "sb-_OaGtq-buttonInline", wrapper: "sb-_OaGtq-wrapper", rawButton: "sb-_OaGtq-rawButton", input: "sb-_OaGtq-input", actionButton: "sb-_OaGtq-actionButton", rawInput: "sb-_OaGtq-rawInput" };
+
+// src/addon-docs/blocks/controls/Object.tsx
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var { window: globalWindow } = globalThis, ActionButton = ({ className, ...props }) => jsx11("button", { className: clsx(Object_default.actionButton, className), ...props }), ENTER_EVENT = {
+  bubbles: !0,
+  cancelable: !0,
+  key: "Enter",
+  code: "Enter",
+  keyCode: 13
+}, dispatchEnterKey = (event) => {
+  event.currentTarget.dispatchEvent(new globalWindow.KeyboardEvent("keydown", ENTER_EVENT));
+}, selectValue = (event) => {
+  event.currentTarget.select();
+}, 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);
+      } catch (e2) {
+        setParseError(e2);
+      }
+    },
+    [onChange]
+  ), [forceVisible, setForceVisible] = useState4(!1), onForceVisible = useCallback3(() => {
+    onChange({}), setForceVisible(!0);
+  }, [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]);
+  let jsonString = useMemo(() => JSON.stringify(data ?? "", null, 2), [data]);
+  if (!hasData)
+    return jsx11(
+      Button3,
+      {
+        ariaLabel: !1,
+        disabled: readonly,
+        id: getControlSetterButtonId(name, storyId, controlsId),
+        onClick: onForceVisible,
+        children: "Set object"
+      }
+    );
+  let rawInputId = getControlId(name, storyId, controlsId), rawJSONForm = jsxs8(Fragment5, { children: [
+    jsxs8("label", { htmlFor: rawInputId, className: "sb-sr-only", children: [
+      "Edit ",
+      name,
+      " as JSON"
+    ] }),
+    jsx11(
+      Form3.Textarea,
+      {
+        className: Object_default.rawInput,
+        ref: htmlElRef,
+        id: rawInputId,
+        minRows: 3,
+        name,
+        defaultValue: jsonString,
+        onBlur: (event) => updateRaw(event.target.value),
+        placeholder: "Edit JSON string...",
+        autoFocus: forceVisible,
+        valid: parseError ? "error" : void 0,
+        readOnly: readonly,
+        "aria-required": required || void 0
+      },
+      jsonString
+    )
+  ] }), isObjectOrArray = Array.isArray(value) || typeof value == "object" && value?.constructor === Object;
+  return jsxs8("div", { className: Object_default.wrapper, children: [
+    isObjectOrArray && jsx11(
+      ToggleButton,
+      {
+        className: Object_default.rawButton,
+        disabled: readonly,
+        pressed: showRaw,
+        ariaLabel: `Edit ${name} as JSON`,
+        onClick: (e2) => {
+          e2.preventDefault(), setShowRaw((isRaw) => !isRaw);
+        },
+        variant: "ghost",
+        padding: "small",
+        size: "small",
+        children: jsx11(EditIcon, {})
+      }
+    ),
+    showRaw ? rawJSONForm : jsx11(
+      JsonTree,
+      {
+        readOnly: readonly || !isObjectOrArray,
+        isCollapsed: isObjectOrArray ? (
+          /* default value */
+          void 0
+        ) : () => !0,
+        data,
+        rootName: name,
+        onFullyUpdate: onChange,
+        cancelButtonElement: jsx11("button", { className: Object_default.buttonInline, type: "button", children: "Cancel" }),
+        addButtonElement: jsx11("button", { className: Object_default.buttonInline, type: "submit", "data-primary": !0, children: "Save" }),
+        plusMenuElement: jsx11(ActionButton, { type: "button", children: jsx11(AddIcon, {}) }),
+        minusMenuElement: jsx11(ActionButton, { type: "button", children: jsx11(SubtractIcon, {}) }),
+        inputElement: (_2, __, ___, key) => key ? jsx11("input", { className: Object_default.input, onFocus: selectValue, onBlur: dispatchEnterKey }) : jsx11("input", { className: Object_default.input }),
+        fallback: rawJSONForm
+      }
+    )
+  ] });
+};
+
+// src/addon-docs/blocks/controls/Range.tsx
+import { useMemo as useMemo2 } from "react";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/Range.module.css
+var id8 = "core/src/addon-docs/blocks/controls/Range.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id8}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id8), style.textContent = '.sb-t_VwFG-input{--track-bg:hsl(from var(--sb-input-background) h s calc(l - 2));--track-border:#00000070;appearance:none;background-color:#0000;width:100%;&::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--sb-color-green) 0%, var(--sb-color-green) var(--sb-range-progress), var(--track-bg) var(--sb-range-progress), var(--track-bg) 100%);box-shadow:var(--track-border) 0 0 0 1px inset;cursor:pointer;border-radius:6px;width:100%;height:6px}&::-moz-range-track{background:linear-gradient(to right, var(--sb-color-green) 0%, var(--sb-color-green) var(--sb-range-progress), var(--track-bg) var(--sb-range-progress), var(--track-bg) 100%);box-shadow:var(--track-border) 0 0 0 1px inset;cursor:pointer;border-radius:6px;width:100%;height:6px}&::-webkit-slider-thumb{cursor:grab;background:var(--sb-input-background);border:1px solid var(--track-border);width:16px;height:16px;box-shadow:0 1px 3px 0px rgb(from var(--sb-app-border-color) r g b / .2);appearance:none;border-radius:50px;margin-top:-6px;transition:all .15s ease-out;&:hover{background:hsl(from var(--sb-input-background) h s calc(l - 5));transition:all 50ms ease-out;transform:scale3d(1.1,1.1,1.1)translateY(-1px)}&:active{background:var(--sb-input-background);transform:scale(1)translateY(0)}}&::-moz-range-thumb{cursor:grab;background:var(--sb-input-background);border:1px solid var(--track-border);width:16px;height:16px;box-shadow:0 1px 3px 0px rgb(from var(--sb-app-border-color) r g b / .2);border-radius:50px;transition:all .15s ease-out;&:hover{background:hsl(from var(--sb-input-background) h s calc(l - 5));transition:all 50ms ease-out;transform:scale3d(1.1,1.1,1.1)translateY(-1px)}&:active{background:var(--sb-input-background);transform:scale(1)translateY(0)}}&:focus{outline:none;&::-webkit-slider-runnable-track{border-color:rgb(from var(--sb-color-secondary) r g b / .4)}&::-moz-range-track{border-color:rgb(from var(--sb-color-secondary) r g b / .4)}&::-webkit-slider-thumb{border-color:var(--sb-color-secondary);box-shadow:0 0px 5px 0px var(--sb-color-secondary)}&::-moz-range-thumb{border-color:var(--sb-color-secondary);box-shadow:0 0px 5px 0px var(--sb-color-secondary)}}&:disabled{&::-webkit-slider-runnable-track{cursor:not-allowed}&::-moz-range-track{cursor:not-allowed}&::-webkit-slider-thumb{cursor:not-allowed}&::-moz-range-thumb{cursor:not-allowed}}}:where([data-sb-theme=dark]) .sb-t_VwFG-input{--track-bg:hsl(from var(--sb-input-background) h s calc(l + 2));--track-border:#fff6;&::-webkit-slider-thumb{box-shadow:unset}&::-moz-range-thumb{box-shadow:unset}&:focus{&::-webkit-slider-thumb{box-shadow:unset}&::-moz-range-thumb{box-shadow:unset}}}.sb-t_VwFG-label{white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;padding-left:5px;padding-right:5px;font-size:12px}.sb-t_VwFG-currentAndMax{text-align:right;flex-shrink:0}.sb-t_VwFG-wrapper{align-items:center;width:100%;display:flex;&[data-readonly]{opacity:.5}}', document.head.appendChild(style);
+}
+var Range_default = { currentAndMax: "sb-t_VwFG-currentAndMax", wrapper: "sb-t_VwFG-wrapper", label: "sb-t_VwFG-label", input: "sb-t_VwFG-input" };
+
+// src/addon-docs/blocks/controls/Range.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function getNumberOfDecimalPlaces(number) {
+  let match = number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  return match ? Math.max(
+    0,
+    // Number of digits right of decimal point.
+    (match[1] ? match[1].length : 0) - // Adjust for scientific notation.
+    (match[2] ? +match[2] : 0)
+  ) : 0;
+}
+var RangeControl = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  onBlur,
+  onFocus,
+  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, controlsId), current = value ?? min;
+  return jsxs9("div", { className: Range_default.wrapper, "data-readonly": readonly || void 0, children: [
+    jsx12("label", { htmlFor: controlId, className: "sb-sr-only", children: name }),
+    jsx12("span", { className: Range_default.label, children: min }),
+    jsx12(
+      "input",
+      {
+        className: Range_default.input,
+        style: { "--sb-range-progress": `${(current - min) / (max - min) * 100}%` },
+        id: controlId,
+        type: "range",
+        disabled: readonly,
+        onChange: handleChange,
+        "aria-required": required || void 0,
+        name,
+        min,
+        max,
+        step,
+        onFocus,
+        onBlur,
+        value: current
+      }
+    ),
+    jsxs9(
+      "span",
+      {
+        className: clsx(Range_default.label, Range_default.currentAndMax),
+        style: { width: `${numberOFDecimalsPlaces + max.toString().length * 2 + 3}ch` },
+        children: [
+          hasValue ? value.toFixed(numberOFDecimalsPlaces) : "--",
+          " / ",
+          max
+        ]
+      }
+    )
+  ] });
+};
+
+// src/addon-docs/blocks/controls/Text.tsx
+import { useCallback as useCallback4, useState as useState5 } from "react";
+import { Button as Button4, Form as Form4 } from "@aussieljk/forkbook/internal/components";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/Text.module.css
+var id9 = "core/src/addon-docs/blocks/controls/Text.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id9}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id9), style.textContent = ".sb-yeJPNa-wrapper{display:flex}.sb-yeJPNa-maxLength{margin-left:.75rem;padding-top:.35rem;&[data-maxed]{color:red}}", document.head.appendChild(style);
+}
+var Text_default = { wrapper: "sb-yeJPNa-wrapper", maxLength: "sb-yeJPNa-maxLength" };
+
+// src/addon-docs/blocks/controls/Text.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var TextControl = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  maxLength,
+  argType,
+  required
+}) => {
+  let handleChange = (event) => {
+    onChange(event.target.value);
+  }, readonly = !!argType?.table?.readonly, [forceVisible, setForceVisible] = useState5(!1), onForceVisible = useCallback4(() => {
+    onChange(""), setForceVisible(!0);
+  }, [setForceVisible]);
+  if (value === void 0)
+    return jsx13(
+      Button4,
+      {
+        ariaLabel: !1,
+        variant: "outline",
+        size: "medium",
+        disabled: readonly,
+        id: getControlSetterButtonId(name, storyId, controlsId),
+        onClick: onForceVisible,
+        children: "Set string"
+      }
+    );
+  let isValid = typeof value == "string";
+  return jsxs10("label", { className: Text_default.wrapper, children: [
+    jsx13(
+      Form4.Textarea,
+      {
+        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 : "",
+        onFocus,
+        onBlur
+      }
+    ),
+    maxLength && jsxs10("div", { className: Text_default.maxLength, "data-maxed": value?.length === maxLength || void 0, children: [
+      value?.length ?? 0,
+      " / ",
+      maxLength
+    ] })
+  ] });
+};
+
+// src/addon-docs/blocks/controls/Files.tsx
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { Form as Form5 } from "@aussieljk/forkbook/internal/components";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/Files.module.css
+var id10 = "core/src/addon-docs/blocks/controls/Files.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id10}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id10), style.textContent = ".sb-wt5ndq-input{padding:10px}", document.head.appendChild(style);
+}
+var Files_default = { input: "sb-wt5ndq-input" };
+
+// src/addon-docs/blocks/controls/Files.tsx
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function revokeOldUrls(urls) {
+  urls.forEach((url) => {
+    url.startsWith("blob:") && URL.revokeObjectURL(url);
+  });
+}
+var FilesControl = ({
+  onChange,
+  name,
+  storyId,
+  controlsId,
+  accept = "image/*",
+  value,
+  argType,
+  required
+}) => {
+  let inputElement = useRef4(null), readonly = argType?.control?.readOnly;
+  function handleFileChange(e2) {
+    if (!e2.target.files)
+      return;
+    let fileUrls = Array.from(e2.target.files).map((file) => URL.createObjectURL(file));
+    onChange(fileUrls), revokeOldUrls(value || []);
+  }
+  useEffect5(() => {
+    value == null && inputElement.current && (inputElement.current.value = "");
+  }, [value, name]);
+  let controlId = getControlId(name, storyId, controlsId);
+  return jsxs11(Fragment6, { children: [
+    jsx14("label", { htmlFor: controlId, className: "sb-sr-only", children: name }),
+    jsx14(
+      Form5.Input,
+      {
+        className: Files_default.input,
+        ref: inputElement,
+        id: controlId,
+        type: "file",
+        name,
+        multiple: !0,
+        disabled: readonly,
+        onChange: handleFileChange,
+        accept,
+        "aria-required": required || void 0,
+        size: "flex"
+      }
+    )
+  ] });
+};
+
+// src/addon-docs/blocks/controls/index.tsx
+import { Suspense, lazy } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var LazyColorControl = lazy(() => import("./Color-PCLE2J36.js")), ColorControl = (props) => jsx15(Suspense, { fallback: jsx15("div", {}), children: jsx15(LazyColorControl, { ...props }) });
+
+// src/addon-docs/blocks/components/ArgsTable/ArgsTable.tsx
+import { useCallback as useCallback6, useEffect as useEffect8, useRef as useRef5, useState as useState10 } from "react";
+import { once } from "@aussieljk/forkbook/internal/client-logger";
+import { Button as Button5, Link as Link3, ResetWrapper } from "@aussieljk/forkbook/internal/components";
+import { includeConditionalArg } from "@aussieljk/forkbook/internal/csf";
+import { DocumentIcon as DocumentIcon2, UndoIcon } from "@storybook/icons";
+
+// ../../node_modules/markdown-to-jsx/dist/index.modern.js
+import * as e from "react";
+function n() {
+  return n = Object.assign ? Object.assign.bind() : function(e2) {
+    for (var n2 = 1; n2 < arguments.length; n2++) {
+      var r2 = arguments[n2];
+      for (var t in r2) Object.prototype.hasOwnProperty.call(r2, t) && (e2[t] = r2[t]);
+    }
+    return e2;
+  }, n.apply(this, arguments);
+}
+var r = ["children", "options"];
+var o = ["allowFullScreen", "allowTransparency", "autoComplete", "autoFocus", "autoPlay", "cellPadding", "cellSpacing", "charSet", "classId", "colSpan", "contentEditable", "contextMenu", "crossOrigin", "encType", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "frameBorder", "hrefLang", "inputMode", "keyParams", "keyType", "marginHeight", "marginWidth", "maxLength", "mediaGroup", "minLength", "noValidate", "radioGroup", "readOnly", "rowSpan", "spellCheck", "srcDoc", "srcLang", "srcSet", "tabIndex", "useMap"].reduce((e2, n2) => (e2[n2.toLowerCase()] = n2, e2), { class: "className", for: "htmlFor" }), a = { amp: "&", apos: "'", gt: ">", lt: "<", nbsp: "\xA0", quot: "\u201C" }, c = ["style", "script", "pre"], i = ["src", "href", "data", "formAction", "srcDoc", "action"], u = /([-A-Z0-9_:]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|(?:\{((?:\\.|{[^}]*?}|[^}])*)\})))?/gi, l = /\n{2,}$/, s = /^(\s*>[\s\S]*?)(?=\n\n|$)/, f = /^ *> ?/gm, _ = /^(?:\[!([^\]]*)\]\n)?([\s\S]*)/, d = /^ {2,}\n/, p = /^(?:([-*_])( *\1){2,}) *(?:\n *)+\n/, y = /^(?: {1,3})?(`{3,}|~{3,}) *(\S+)? *([^\n]*?)?\n([\s\S]*?)(?:\1\n?|$)/, h = /^(?: {4}[^\n]+\n*)+(?:\n *)+\n?/, g = /^(`+)((?:\\`|(?!\1)`|[^`])+)\1/, m = /^(?:\n *)*\n/, k = /\r\n?/g, x = /^\[\^([^\]]+)](:(.*)((\n+ {4,}.*)|(\n(?!\[\^).+))*)/, q = /^\[\^([^\]]+)]/, v = /\f/g, b = /^---[ \t]*\n(.|\n)*\n---[ \t]*\n/, $ = /^\s*?\[(x|\s)\]/, S = /^ *(#{1,6}) *([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/, z = /^ *(#{1,6}) +([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/, E = /^([^\n]+)\n *(=|-)\2{2,} *\n/, A = /^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?((?:[^>]*[^/])?)>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1\b)[\s\S])*?)<\/\1>(?!<\/\1>)\n*/i, R = /&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/gi, B = /^<!--[\s\S]*?(?:-->)/, L = /^(data|aria|x)-[a-z_][a-z\d_.-]*$/, O = /^ *<([a-z][a-z0-9:]*)(?:\s+((?:<.*?>|[^>])*))?\/?>(?!<\/\1>)(\s*\n)?/i, j = /^\{.*\}$/, C = /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/, I = /^<([^ >]+[:@\/][^ >]+)>/, T = /-([a-z])?/gi, M = /^(\|.*)\n(?: *(\|? *[-:]+ *\|[-| :]*)\n((?:.*\|.*\n)*))?\n?/, w = /^[^\n]+(?:  \n|\n{2,})/, D = /^\[([^\]]*)\]:\s+<?([^\s>]+)>?\s*("([^"]*)")?/, F = /^!\[([^\]]*)\] ?\[([^\]]*)\]/, P = /^\[([^\]]*)\] ?\[([^\]]*)\]/, Z = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/, N = /\t/g, G = /(^ *\||\| *$)/g, U = /^ *:-+: *$/, V = /^ *:-+ *$/, H = /^ *-+: *$/, Q = (e2) => `(?=[\\s\\S]+?\\1${e2 ? "\\1" : ""})`, W = "((?:\\[.*?\\][([].*?[)\\]]|<.*?>(?:.*?<.*?>)?|`.*?`|\\\\\\1|[\\s\\S])+?)", J = RegExp(`^([*_])\\1${Q(1)}${W}\\1\\1(?!\\1)`), K = RegExp(`^([*_])${Q(0)}${W}\\1(?!\\1)`), X = RegExp(`^(==)${Q(0)}${W}\\1`), Y = RegExp(`^(~~)${Q(0)}${W}\\1`), ee = /^(:[a-zA-Z0-9-_]+:)/, ne = /^\\([^0-9A-Za-z\s])/, re = /\\([^0-9A-Za-z\s])/g, te = /^[\s\S](?:(?!  \n|[0-9]\.|http)[^=*_~\-\n:<`\\\[!])*/, oe = /^\n+/, ae = /^([ \t]*)/, ce = /(?:^|\n)( *)$/, ie = "(?:\\d+\\.)", ue = "(?:[*+-])";
+function le(e2) {
+  return "( *)(" + (e2 === 1 ? ie : ue) + ") +";
+}
+var se = le(1), fe = le(2);
+function _e(e2) {
+  return RegExp("^" + (e2 === 1 ? se : fe));
+}
+var de = _e(1), pe = _e(2);
+function ye(e2) {
+  return RegExp("^" + (e2 === 1 ? se : fe) + "[^\\n]*(?:\\n(?!\\1" + (e2 === 1 ? ie : ue) + " )[^\\n]*)*(\\n|$)", "gm");
+}
+var he = ye(1), ge = ye(2);
+function me(e2) {
+  let n2 = e2 === 1 ? ie : ue;
+  return RegExp("^( *)(" + n2 + ") [\\s\\S]+?(?:\\n{2,}(?! )(?!\\1" + n2 + " (?!" + n2 + " ))\\n*|\\s*\\n*$)");
+}
+var ke = me(1), xe = me(2);
+function qe(e2, n2) {
+  let r2 = n2 === 1, t = r2 ? ke : xe, o2 = r2 ? he : ge, a2 = r2 ? de : pe;
+  return { t: (e3) => a2.test(e3), o: je(function(e3, n3) {
+    let r3 = ce.exec(n3.prevCapture);
+    return r3 && (n3.list || !n3.inline && !n3.simple) ? t.exec(e3 = r3[1] + e3) : null;
+  }), i: 1, u(e3, n3, t2) {
+    let c2 = r2 ? +e3[2] : void 0, i2 = e3[0].replace(l, `
+`).match(o2), u2 = !1;
+    return { items: i2.map(function(e4, r3) {
+      let o3 = a2.exec(e4)[0].length, c3 = RegExp("^ {1," + o3 + "}", "gm"), l2 = e4.replace(c3, "").replace(a2, ""), s2 = r3 === i2.length - 1, f2 = l2.indexOf(`
+
+`) !== -1 || s2 && u2;
+      u2 = f2;
+      let _2 = t2.inline, d2 = t2.list, p2;
+      t2.list = !0, f2 ? (t2.inline = !1, p2 = Se(l2) + `
+
+`) : (t2.inline = !0, p2 = Se(l2));
+      let y2 = n3(p2, t2);
+      return t2.inline = _2, t2.list = d2, y2;
+    }), ordered: r2, start: c2 };
+  }, l: (n3, r3, t2) => e2(n3.ordered ? "ol" : "ul", { key: t2.key, start: n3.type === "20" ? n3.start : void 0 }, n3.items.map(function(n4, o3) {
+    return e2("li", { key: o3 }, r3(n4, t2));
+  })) };
+}
+var ve = RegExp(`^\\[((?:\\[[^\\[\\]]*(?:\\[[^\\[\\]]*\\][^\\[\\]]*)*\\]|[^\\[\\]])*)\\]\\(\\s*<?((?:\\([^)]*\\)|[^\\s\\\\]|\\\\.)*?)>?(?:\\s+['"]([\\s\\S]*?)['"])?\\s*\\)`), be = /^!\[(.*?)\]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/;
+function $e(e2) {
+  return typeof e2 == "string";
+}
+function Se(e2) {
+  let n2 = e2.length;
+  for (; n2 > 0 && e2[n2 - 1] <= " "; ) n2--;
+  return e2.slice(0, n2);
+}
+function ze(e2, n2) {
+  return e2.startsWith(n2);
+}
+function Ee(e2, n2, r2) {
+  if (Array.isArray(r2)) {
+    for (let n3 = 0; n3 < r2.length; n3++) if (ze(e2, r2[n3])) return !0;
+    return !1;
+  }
+  return r2(e2, n2);
+}
+function Ae(e2) {
+  return e2.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g, "a").replace(/[çÇ]/g, "c").replace(/[ðÐ]/g, "d").replace(/[ÈÉÊËéèêë]/g, "e").replace(/[ÏïÎîÍíÌì]/g, "i").replace(/[Ññ]/g, "n").replace(/[øØœŒÕõÔôÓóÒò]/g, "o").replace(/[ÜüÛûÚúÙù]/g, "u").replace(/[ŸÿÝý]/g, "y").replace(/[^a-z0-9- ]/gi, "").replace(/ /gi, "-").toLowerCase();
+}
+function Re(e2) {
+  return H.test(e2) ? "right" : U.test(e2) ? "center" : V.test(e2) ? "left" : null;
+}
+function Be(e2, n2, r2, t) {
+  let o2 = r2.inTable;
+  r2.inTable = !0;
+  let a2 = [[]], c2 = "";
+  function i2() {
+    if (!c2) return;
+    let e3 = a2[a2.length - 1];
+    e3.push.apply(e3, n2(c2, r2)), c2 = "";
+  }
+  return e2.trim().split(/(`[^`]*`|\\\||\|)/).filter(Boolean).forEach((e3, n3, r3) => {
+    e3.trim() === "|" && (i2(), t) ? n3 !== 0 && n3 !== r3.length - 1 && a2.push([]) : c2 += e3;
+  }), i2(), r2.inTable = o2, a2;
+}
+function Le(e2, n2, r2) {
+  r2.inline = !0;
+  let t = e2[2] ? e2[2].replace(G, "").split("|").map(Re) : [], o2 = e2[3] ? (function(e3, n3, r3) {
+    return e3.trim().split(`
+`).map(function(e4) {
+      return Be(e4, n3, r3, !0);
+    });
+  })(e2[3], n2, r2) : [], a2 = Be(e2[1], n2, r2, !!o2.length);
+  return r2.inline = !1, o2.length ? { align: t, cells: o2, header: a2, type: "25" } : { children: a2, type: "21" };
+}
+function Oe(e2, n2) {
+  return e2.align[n2] == null ? {} : { textAlign: e2.align[n2] };
+}
+function je(e2) {
+  return e2.inline = 1, e2;
+}
+function Ce(e2) {
+  return je(function(n2, r2) {
+    return r2.inline ? e2.exec(n2) : null;
+  });
+}
+function Ie(e2) {
+  return je(function(n2, r2) {
+    return r2.inline || r2.simple ? e2.exec(n2) : null;
+  });
+}
+function Te(e2) {
+  return function(n2, r2) {
+    return r2.inline || r2.simple ? null : e2.exec(n2);
+  };
+}
+function Me(e2) {
+  return je(function(n2) {
+    return e2.exec(n2);
+  });
+}
+var we = /(javascript|vbscript|data(?!:image)):/i;
+function De(e2) {
+  try {
+    let n2 = decodeURIComponent(e2).replace(/[^A-Za-z0-9/:]/g, "");
+    if (we.test(n2)) return null;
+  } catch {
+    return null;
+  }
+  return e2;
+}
+function Fe(e2) {
+  return e2 && e2.replace(re, "$1");
+}
+function Pe(e2, n2, r2) {
+  let t = r2.inline || !1, o2 = r2.simple || !1;
+  r2.inline = !0, r2.simple = !0;
+  let a2 = e2(n2, r2);
+  return r2.inline = t, r2.simple = o2, a2;
+}
+function Ze(e2, n2, r2) {
+  let t = r2.inline || !1, o2 = r2.simple || !1;
+  r2.inline = !1, r2.simple = !0;
+  let a2 = e2(n2, r2);
+  return r2.inline = t, r2.simple = o2, a2;
+}
+function Ne(e2, n2, r2) {
+  let t = r2.inline || !1;
+  r2.inline = !1;
+  let o2 = e2(n2, r2);
+  return r2.inline = t, o2;
+}
+var Ge = (e2, n2, r2) => ({ children: Pe(n2, e2[2], r2) });
+function Ue() {
+  return {};
+}
+function Ve() {
+  return null;
+}
+function He(...e2) {
+  return e2.filter(Boolean).join(" ");
+}
+function Qe(e2, n2, r2) {
+  let t = e2, o2 = n2.split(".");
+  for (; o2.length && (t = t[o2[0]], t !== void 0); ) o2.shift();
+  return t || r2;
+}
+function We(r2 = "", t = {}) {
+  t.overrides = t.overrides || {}, t.namedCodesToUnicode = t.namedCodesToUnicode ? n({}, a, t.namedCodesToUnicode) : a;
+  let l2 = t.slugify || Ae, G2 = t.sanitizer || De, U2 = t.createElement || e.createElement, V2 = [s, y, h, t.enforceAtxHeadings ? z : S, E, M, ke, xe], H2 = [...V2, w, A, B, O];
+  function Q2(e2, n2) {
+    for (let r3 = 0; r3 < e2.length; r3++) if (e2[r3].test(n2)) return !0;
+    return !1;
+  }
+  function W2(e2, r3, ...o2) {
+    let a2 = Qe(t.overrides, e2 + ".props", {});
+    return U2((function(e3, n2) {
+      let r4 = Qe(n2, e3);
+      return r4 ? typeof r4 == "function" || typeof r4 == "object" && "render" in r4 ? r4 : Qe(n2, e3 + ".component", e3) : e3;
+    })(e2, t.overrides), n({}, r3, a2, { className: He(r3?.className, a2.className) || void 0 }), ...o2);
+  }
+  function re2(e2) {
+    e2 = e2.replace(b, "");
+    let n2 = !1;
+    t.forceInline ? n2 = !0 : t.forceBlock || (n2 = Z.test(e2) === !1);
+    let r3 = fe2(se2(n2 ? e2 : Se(e2).replace(oe, "") + `
+
+`, { inline: n2 }));
+    for (; $e(r3[r3.length - 1]) && !r3[r3.length - 1].trim(); ) r3.pop();
+    if (t.wrapper === null) return r3;
+    let o2 = t.wrapper || (n2 ? "span" : "div"), a2;
+    if (r3.length > 1 || t.forceWrapper) a2 = r3;
+    else {
+      if (r3.length === 1) return a2 = r3[0], typeof a2 == "string" ? W2("span", { key: "outer" }, a2) : a2;
+      a2 = null;
+    }
+    return U2(o2, { key: "outer" }, a2);
+  }
+  function ce2(e2, n2) {
+    if (!n2 || !n2.trim()) return null;
+    let r3 = n2.match(u);
+    return r3 ? r3.reduce(function(n3, r4) {
+      let t2 = r4.indexOf("=");
+      if (t2 !== -1) {
+        let a2 = (function(e3) {
+          return e3.indexOf("-") !== -1 && e3.match(L) === null && (e3 = e3.replace(T, function(e4, n4) {
+            return n4.toUpperCase();
+          })), e3;
+        })(r4.slice(0, t2)).trim(), c2 = (function(e3) {
+          let n4 = e3[0];
+          return (n4 === '"' || n4 === "'") && e3.length >= 2 && e3[e3.length - 1] === n4 ? e3.slice(1, -1) : e3;
+        })(r4.slice(t2 + 1).trim()), u2 = o[a2] || a2;
+        if (u2 === "ref") return n3;
+        let l3 = n3[u2] = (function(e3, n4, r5, t3) {
+          return n4 === "style" ? (function(e4) {
+            let n5 = [], r6 = "", t4 = !1, o2 = !1, a3 = "";
+            if (!e4) return n5;
+            for (let c4 = 0; c4 < e4.length; c4++) {
+              let i2 = e4[c4];
+              if (i2 !== '"' && i2 !== "'" || t4 || (o2 ? i2 === a3 && (o2 = !1, a3 = "") : (o2 = !0, a3 = i2)), i2 === "(" && r6.endsWith("url") ? t4 = !0 : i2 === ")" && t4 && (t4 = !1), i2 !== ";" || o2 || t4) r6 += i2;
+              else {
+                let e5 = r6.trim();
+                if (e5) {
+                  let r7 = e5.indexOf(":");
+                  if (r7 > 0) {
+                    let t5 = e5.slice(0, r7).trim(), o3 = e5.slice(r7 + 1).trim();
+                    n5.push([t5, o3]);
+                  }
+                }
+                r6 = "";
+              }
+            }
+            let c3 = r6.trim();
+            if (c3) {
+              let e5 = c3.indexOf(":");
+              if (e5 > 0) {
+                let r7 = c3.slice(0, e5).trim(), t5 = c3.slice(e5 + 1).trim();
+                n5.push([r7, t5]);
+              }
+            }
+            return n5;
+          })(r5).reduce(function(n5, [r6, o2]) {
+            return n5[r6.replace(/(-[a-z])/g, (e4) => e4[1].toUpperCase())] = t3(o2, e3, r6), n5;
+          }, {}) : i.indexOf(n4) !== -1 ? t3(Fe(r5), e3, n4) : (r5.match(j) && (r5 = Fe(r5.slice(1, r5.length - 1))), r5 === "true" || r5 !== "false" && r5);
+        })(e2, a2, c2, G2);
+        typeof l3 == "string" && (A.test(l3) || O.test(l3)) && (n3[u2] = re2(l3.trim()));
+      } else r4 !== "style" && (n3[o[r4] || r4] = !0);
+      return n3;
+    }, {}) : null;
+  }
+  let ie2 = [], ue2 = {}, le2 = { 0: { t: [">"], o: Te(s), i: 1, u(e2, n2, r3) {
+    let [, t2, o2] = e2[0].replace(f, "").match(_);
+    return { alert: t2, children: n2(o2, r3) };
+  }, l(e2, n2, r3) {
+    let t2 = { key: r3.key };
+    return e2.alert && (t2.className = "markdown-alert-" + l2(e2.alert.toLowerCase(), Ae), e2.children.unshift({ attrs: {}, children: [{ type: "27", text: e2.alert }], noInnerParse: !0, type: "11", tag: "header" })), W2("blockquote", t2, n2(e2.children, r3));
+  } }, 1: { t: ["  "], o: Me(d), i: 1, u: Ue, l: (e2, n2, r3) => W2("br", { key: r3.key }) }, 2: { t: ["--", "__", "**", "- ", "* ", "_ "], o: Te(p), i: 1, u: Ue, l: (e2, n2, r3) => W2("hr", { key: r3.key }) }, 3: { t: ["    "], o: Te(h), i: 0, u: (e2) => ({ lang: void 0, text: Fe(Se(e2[0].replace(/^ {4}/gm, ""))) }), l: (e2, r3, t2) => W2("pre", { key: t2.key }, W2("code", n({}, e2.attrs, { className: e2.lang ? "lang-" + e2.lang : "" }), e2.text)) }, 4: { t: ["```", "~~~"], o: Te(y), i: 0, u: (e2) => ({ attrs: ce2("code", e2[3] || ""), lang: e2[2] || void 0, text: e2[4], type: "3" }) }, 5: { t: ["`"], o: Ie(g), i: 3, u: (e2) => ({ text: Fe(e2[2]) }), l: (e2, n2, r3) => W2("code", { key: r3.key }, e2.text) }, 6: { t: ["[^"], o: Te(x), i: 0, u: (e2) => (ie2.push({ footnote: e2[2], identifier: e2[1] }), {}), l: Ve }, 7: { t: ["[^"], o: Ce(q), i: 1, u: (e2) => ({ target: "#" + l2(e2[1], Ae), text: e2[1] }), l: (e2, n2, r3) => W2("a", { key: r3.key, href: G2(e2.target, "a", "href") }, W2("sup", { key: r3.key }, e2.text)) }, 8: { t: ["[ ]", "[x]"], o: Ce($), i: 1, u: (e2) => ({ completed: e2[1].toLowerCase() === "x" }), l: (e2, n2, r3) => W2("input", { checked: e2.completed, key: r3.key, readOnly: !0, type: "checkbox" }) }, 9: { t: ["#"], o: Te(t.enforceAtxHeadings ? z : S), i: 1, u: (e2, n2, r3) => ({ children: Pe(n2, e2[2], r3), id: l2(e2[2], Ae), level: e2[1].length }), l: (e2, n2, r3) => W2("h" + e2.level, { id: e2.id, key: r3.key }, n2(e2.children, r3)) }, 10: { t: (e2) => {
+    let n2 = e2.indexOf(`
+`);
+    return n2 > 0 && n2 < e2.length - 1 && (e2[n2 + 1] === "=" || e2[n2 + 1] === "-");
+  }, o: Te(E), i: 1, u: (e2, n2, r3) => ({ children: Pe(n2, e2[1], r3), level: e2[2] === "=" ? 1 : 2, type: "9" }) }, 11: { t: ["<"], o: Me(A), i: 1, u(e2, n2, r3) {
+    let [, t2] = e2[3].match(ae), o2 = RegExp("^" + t2, "gm"), a2 = e2[3].replace(o2, ""), i2 = Q2(H2, a2) ? Ne : Pe, u2 = e2[1].toLowerCase(), l3 = c.indexOf(u2) !== -1, s2 = (l3 ? u2 : e2[1]).trim(), f2 = { attrs: ce2(s2, e2[2]), noInnerParse: l3, tag: s2 };
+    if (r3.inAnchor = r3.inAnchor || u2 === "a", l3) f2.text = e2[3];
+    else {
+      let e3 = r3.inHTML;
+      r3.inHTML = !0, f2.children = i2(n2, a2, r3), r3.inHTML = e3;
+    }
+    return r3.inAnchor = !1, f2;
+  }, l: (e2, r3, t2) => W2(e2.tag, n({ key: t2.key }, e2.attrs), e2.text || (e2.children ? r3(e2.children, t2) : "")) }, 13: { t: ["<"], o: Me(O), i: 1, u(e2) {
+    let n2 = e2[1].trim();
+    return { attrs: ce2(n2, e2[2] || ""), tag: n2 };
+  }, l: (e2, r3, t2) => W2(e2.tag, n({}, e2.attrs, { key: t2.key })) }, 12: { t: ["<!--"], o: Me(B), i: 1, u: () => ({}), l: Ve }, 14: { t: ["!["], o: Ie(be), i: 1, u: (e2) => ({ alt: Fe(e2[1]), target: Fe(e2[2]), title: Fe(e2[3]) }), l: (e2, n2, r3) => W2("img", { key: r3.key, alt: e2.alt || void 0, title: e2.title || void 0, src: G2(e2.target, "img", "src") }) }, 15: { t: ["["], o: Ce(ve), i: 3, u: (e2, n2, r3) => ({ children: Ze(n2, e2[1], r3), target: Fe(e2[2]), title: Fe(e2[3]) }), l: (e2, n2, r3) => W2("a", { key: r3.key, href: G2(e2.target, "a", "href"), title: e2.title }, n2(e2.children, r3)) }, 16: { t: ["<"], o: Ce(I), i: 0, u(e2) {
+    let n2 = e2[1], r3 = !1;
+    return n2.indexOf("@") !== -1 && n2.indexOf("//") === -1 && (r3 = !0, n2 = n2.replace("mailto:", "")), { children: [{ text: n2, type: "27" }], target: r3 ? "mailto:" + n2 : n2, type: "15" };
+  } }, 17: { t: (e2, n2) => !n2.inAnchor && !t.disableAutoLink && (ze(e2, "http://") || ze(e2, "https://")), o: Ce(C), i: 0, u: (e2) => ({ children: [{ text: e2[1], type: "27" }], target: e2[1], title: void 0, type: "15" }) }, 20: qe(W2, 1), 33: qe(W2, 2), 19: { t: [`
+`], o: Te(m), i: 3, u: Ue, l: () => `
+` }, 21: { o: je(function(e2, n2) {
+    if (n2.inline || n2.simple || n2.inHTML && e2.indexOf(`
+
+`) === -1 && n2.prevCapture.indexOf(`
+
+`) === -1) return null;
+    let r3 = "", t2 = 0;
+    for (; ; ) {
+      let n3 = e2.indexOf(`
+`, t2), o3 = e2.slice(t2, n3 === -1 ? void 0 : n3 + 1);
+      if (Q2(V2, o3) || (r3 += o3, n3 === -1 || !o3.trim())) break;
+      t2 = n3 + 1;
+    }
+    let o2 = Se(r3);
+    return o2 === "" ? null : [r3, , o2];
+  }), i: 3, u: Ge, l: (e2, n2, r3) => W2("p", { key: r3.key }, n2(e2.children, r3)) }, 22: { t: ["["], o: Ce(D), i: 0, u: (e2) => (ue2[e2[1]] = { target: e2[2], title: e2[4] }, {}), l: Ve }, 23: { t: ["!["], o: Ie(F), i: 0, u: (e2) => ({ alt: e2[1] ? Fe(e2[1]) : void 0, ref: e2[2] }), l: (e2, n2, r3) => ue2[e2.ref] ? W2("img", { key: r3.key, alt: e2.alt, src: G2(ue2[e2.ref].target, "img", "src"), title: ue2[e2.ref].title }) : null }, 24: { t: (e2) => e2[0] === "[" && e2.indexOf("](") === -1, o: Ce(P), i: 0, u: (e2, n2, r3) => ({ children: n2(e2[1], r3), fallbackChildren: e2[0], ref: e2[2] }), l: (e2, n2, r3) => ue2[e2.ref] ? W2("a", { key: r3.key, href: G2(ue2[e2.ref].target, "a", "href"), title: ue2[e2.ref].title }, n2(e2.children, r3)) : W2("span", { key: r3.key }, e2.fallbackChildren) }, 25: { t: ["|"], o: Te(M), i: 1, u: Le, l(e2, n2, r3) {
+    let t2 = e2;
+    return W2("table", { key: r3.key }, W2("thead", null, W2("tr", null, t2.header.map(function(e3, o2) {
+      return W2("th", { key: o2, style: Oe(t2, o2) }, n2(e3, r3));
+    }))), W2("tbody", null, t2.cells.map(function(e3, o2) {
+      return W2("tr", { key: o2 }, e3.map(function(e4, o3) {
+        return W2("td", { key: o3, style: Oe(t2, o3) }, n2(e4, r3));
+      }));
+    })));
+  } }, 27: { o: je(function(e2, n2) {
+    let r3;
+    return ze(e2, ":") && (r3 = ee.exec(e2)), r3 || te.exec(e2);
+  }), i: 4, u(e2) {
+    let n2 = e2[0];
+    return { text: n2.indexOf("&") === -1 ? n2 : n2.replace(R, (e3, n3) => t.namedCodesToUnicode[n3] || e3) };
+  }, l: (e2) => e2.text }, 28: { t: ["**", "__"], o: Ie(J), i: 2, u: (e2, n2, r3) => ({ children: n2(e2[2], r3) }), l: (e2, n2, r3) => W2("strong", { key: r3.key }, n2(e2.children, r3)) }, 29: { t: (e2) => {
+    let n2 = e2[0];
+    return (n2 === "*" || n2 === "_") && e2[1] !== n2;
+  }, o: Ie(K), i: 3, u: (e2, n2, r3) => ({ children: n2(e2[2], r3) }), l: (e2, n2, r3) => W2("em", { key: r3.key }, n2(e2.children, r3)) }, 30: { t: ["\\"], o: Ie(ne), i: 1, u: (e2) => ({ text: e2[1], type: "27" }) }, 31: { t: ["=="], o: Ie(X), i: 3, u: Ge, l: (e2, n2, r3) => W2("mark", { key: r3.key }, n2(e2.children, r3)) }, 32: { t: ["~~"], o: Ie(Y), i: 3, u: Ge, l: (e2, n2, r3) => W2("del", { key: r3.key }, n2(e2.children, r3)) } };
+  t.disableParsingRawHTML === !0 && (delete le2[11], delete le2[13]);
+  let se2 = (function(e2) {
+    var n2 = Object.keys(e2);
+    function r3(t2, o2) {
+      var a2 = [];
+      if (o2.prevCapture = o2.prevCapture || "", t2.trim()) for (; t2; ) for (var c2 = 0; c2 < n2.length; ) {
+        var i2 = n2[c2], u2 = e2[i2];
+        if (!u2.t || Ee(t2, o2, u2.t)) {
+          var l3 = u2.o(t2, o2);
+          if (l3 && l3[0]) {
+            t2 = t2.substring(l3[0].length);
+            var s2 = u2.u(l3, r3, o2);
+            o2.prevCapture += l3[0], s2.type || (s2.type = i2), a2.push(s2);
+            break;
+          }
+          c2++;
+        } else c2++;
+      }
+      return o2.prevCapture = "", a2;
+    }
+    return n2.sort(function(n3, r4) {
+      return e2[n3].i - e2[r4].i || (n3 < r4 ? -1 : 1);
+    }), function(e3, n3) {
+      return r3((function(e4) {
+        return e4.replace(k, `
+`).replace(v, "").replace(N, "    ");
+      })(e3), n3);
+    };
+  })(le2), fe2 = /* @__PURE__ */ (function(e2, n2) {
+    return function r3(t2, o2 = {}) {
+      if (Array.isArray(t2)) {
+        let e3 = o2.key, n3 = [], a2 = !1;
+        for (let e4 = 0; e4 < t2.length; e4++) {
+          o2.key = e4;
+          let c2 = r3(t2[e4], o2), i2 = $e(c2);
+          i2 && a2 ? n3[n3.length - 1] += c2 : c2 !== null && n3.push(c2), a2 = i2;
+        }
+        return o2.key = e3, n3;
+      }
+      return (function(r4, t3, o3) {
+        let a2 = e2[r4.type].l;
+        return n2 ? n2(() => a2(r4, t3, o3), r4, t3, o3) : a2(r4, t3, o3);
+      })(t2, r3, o2);
+    };
+  })(le2, t.renderRule), _e2 = re2(r2);
+  return ie2.length ? W2("div", null, _e2, W2("footer", { key: "footer" }, ie2.map(function(e2) {
+    return W2("div", { id: l2(e2.identifier, Ae), key: e2.identifier }, e2.identifier, fe2(se2(e2.footnote, { inline: !0 })));
+  }))) : _e2;
+}
+var index_modern_default = (n2) => {
+  let { children: t, options: o2 } = n2, a2 = (function(e2, n3) {
+    if (e2 == null) return {};
+    var r2, t2, o3 = {}, a3 = Object.keys(e2);
+    for (t2 = 0; t2 < a3.length; t2++) n3.indexOf(r2 = a3[t2]) >= 0 || (o3[r2] = e2[r2]);
+    return o3;
+  })(n2, r);
+  return e.cloneElement(We(t ?? "", o2), a2);
+};
+
+// src/addon-docs/blocks/components/ArgsTable/ArgControl.tsx
+import { useCallback as useCallback5, useEffect as useEffect6, useState as useState6 } from "react";
+import { Link } from "@aussieljk/forkbook/internal/components";
+import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var Controls2 = {
+  array: ObjectControl,
+  object: ObjectControl,
+  boolean: BooleanControl,
+  color: ColorControl,
+  date: DateControl,
+  number: NumberControl,
+  check: OptionsControl,
+  "inline-check": OptionsControl,
+  radio: OptionsControl,
+  "inline-radio": OptionsControl,
+  select: OptionsControl,
+  "multi-select": OptionsControl,
+  range: RangeControl,
+  text: TextControl,
+  file: FilesControl
+}, NoControl = () => jsx16(Fragment7, { children: "-" }), 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 });
+  }, [isFocused, arg]);
+  let onChange = useCallback5(
+    (argVal) => (setBoxedValue({ value: argVal }), updateArgs({ [key]: argVal }), argVal),
+    [updateArgs, key]
+  ), onBlur = useCallback5(() => setFocused(!1), []), onFocus = useCallback5(() => setFocused(!0), []);
+  if (!control || control.disable)
+    return control?.disable !== !0 && row?.type?.name !== "function" ? jsxs12(Fragment7, { children: [
+      jsx16("span", { className: "sbdocs sbdocs-argcontrol-setup", children: jsx16(
+        Link,
+        {
+          href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
+          target: "_blank",
+          withArrow: !0,
+          children: "Setup controls"
+        }
+      ) }),
+      jsx16("span", { className: "sbdocs sbdocs-argcontrol-placeholder", children: jsx16(NoControl, {}) })
+    ] }) : jsx16(NoControl, {});
+  let props = {
+    name: key,
+    storyId,
+    controlsId,
+    argType: row,
+    value: boxedValue.value,
+    required: isRequired,
+    onChange,
+    onBlur,
+    onFocus
+  }, Control = Controls2[control.type] || NoControl;
+  return jsx16(Control, { ...props, ...control, controlType: control.type });
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/ArgsTable/ArgJsDoc.module.css
+var id11 = "core/src/addon-docs/blocks/components/ArgsTable/ArgJsDoc.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id11}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id11), style.textContent = ".sb-YWHtwG-table.sb-YWHtwG-table.sb-YWHtwG-table{border-collapse:collapse;border-spacing:0;border:none;& tr{background:0 0;border:none!important}& td,& th{border:none;padding:0;width:auto!important}margin-top:0;margin-bottom:0;& p{margin:0 0 10px;&:last-child{margin-bottom:0}}& a{color:var(--sb-color-secondary)}& th:first-of-type,& td:first-of-type{padding-left:0}& th:last-of-type,& td:last-of-type{padding-right:0}& td{padding-top:0;padding-bottom:4px;&:not(:first-of-type){padding-left:10px;padding-right:0}}& tbody{box-shadow:none;border:none}& code{white-space:nowrap;line-height:1;font-size:var(--sb-size-s1);color:var(--sb-color-default-text);background-color:#00000003;border:1px solid #0000000d;border-radius:3px;margin:0;padding:3px 5px;display:inline-block}& div span{font-weight:700}}:where([data-sb-theme=dark]) .sb-YWHtwG-table.sb-YWHtwG-table.sb-YWHtwG-table code{background-color:#ffffff05;border:1px solid #ffffff0d}", document.head.appendChild(style);
+}
+var ArgJsDoc_default = { table: "sb-YWHtwG-table" };
+
+// src/addon-docs/blocks/components/ArgsTable/ArgJsDoc.tsx
+import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var Table = ({ className, ...props }) => jsx17("table", { className: clsx(ArgJsDoc_default.table, className), ...props }), ArgJsDoc = ({ tags }) => {
+  let params = (tags.params || []).filter((x2) => x2.description), hasDisplayableParams = params.length !== 0, hasDisplayableDeprecated = tags.deprecated != null, hasDisplayableReturns = tags.returns != null && tags.returns.description != null;
+  return !hasDisplayableParams && !hasDisplayableReturns && !hasDisplayableDeprecated ? null : jsx17(Fragment8, { children: jsx17(Table, { children: jsxs13("tbody", { children: [
+    hasDisplayableDeprecated && jsx17("tr", { children: jsxs13("td", { colSpan: 2, children: [
+      jsx17("strong", { children: "Deprecated" }),
+      ": ",
+      tags.deprecated?.toString()
+    ] }) }, "deprecated"),
+    hasDisplayableParams && params.map((x2) => jsxs13("tr", { children: [
+      jsx17("td", { children: jsx17("code", { children: x2.name }) }),
+      jsx17("td", { children: x2.description && jsx17(index_modern_default, { children: x2.description }) })
+    ] }, x2.name)),
+    hasDisplayableReturns && jsxs13("tr", { children: [
+      jsx17("td", { children: jsx17("code", { children: "Returns" }) }),
+      jsx17("td", { children: tags.returns?.description && jsx17(index_modern_default, { children: tags.returns.description }) })
+    ] }, "returns")
+  ] }) }) });
+};
+
+// src/addon-docs/blocks/components/ArgsTable/ArgValue.tsx
+import { useState as useState7 } from "react";
+import {
+  PopoverProvider,
+  SyntaxHighlighter,
+  codeCommon
+} from "@aussieljk/forkbook/internal/components";
+import { ChevronSmallDownIcon as ChevronSmallDownIcon2, ChevronSmallUpIcon } from "@storybook/icons";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/ArgsTable/ArgValue.module.css
+var id12 = "core/src/addon-docs/blocks/components/ArgsTable/ArgValue.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id12}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id12), style.textContent = ".sb-MP4rPa-summary{flex-flow:wrap;align-items:flex-start;min-width:100px;margin-bottom:-4px;display:flex;&[data-expanded]{flex-direction:column}}.sb-MP4rPa-detailsContainer{flex-direction:column;display:flex;& summary{order:2}& summary::-webkit-details-marker{display:none}& summary::marker{content:none}}.sb-MP4rPa-alignedDetails{flex-flow:column wrap;align-items:flex-start;display:flex}.sb-MP4rPa-text{font-family:var(--sb-font-mono);font-size:var(--sb-size-s1);word-break:break-word;white-space:normal;flex:none;max-width:100%;margin:0 4px 4px 0;padding-top:2px;padding-bottom:2px;line-height:13px;&[data-simple]{background:0 0;border:0;padding-left:0}}.sb-MP4rPa-expandButton{font-family:var(--sb-font-mono);color:var(--sb-color-secondary);cursor:pointer;background:0 0;border:none;margin:0 0 4px;padding:1px 6px;line-height:normal}.sb-MP4rPa-expandable{font-family:var(--sb-font-mono);color:var(--sb-color-secondary);font-size:var(--sb-size-s1);white-space:nowrap;cursor:pointer;align-items:center;margin:0;display:flex;&:hover{border:1px solid #00000026}&:focus-visible{outline:2px solid var(--sb-color-secondary);outline-offset:2px}}:where([data-sb-theme=dark]) .sb-MP4rPa-expandable:hover{border:1px solid #ffffff26}.sb-MP4rPa-detail{min-width:200px;max-width:800px;font-family:var(--sb-font-mono);font-size:var(--sb-size-s1);box-sizing:content-box;padding-right:16px;& code{padding:0!important}}.sb-MP4rPa-chevron{margin-left:4px}", document.head.appendChild(style);
+}
+var ArgValue_default = { chevron: "sb-MP4rPa-chevron", alignedDetails: "sb-MP4rPa-alignedDetails", expandButton: "sb-MP4rPa-expandButton", expandable: "sb-MP4rPa-expandable", detail: "sb-MP4rPa-detail", text: "sb-MP4rPa-text", summary: "sb-MP4rPa-summary", detailsContainer: "sb-MP4rPa-detailsContainer" };
+
+// src/addon-docs/blocks/components/ArgsTable/ArgValue.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var ITEMS_BEFORE_EXPANSION = 8, EmptyArg = () => jsx18("span", { children: "-" }), ArgText = ({ text, simple }) => jsx18("span", { className: clsx(codeCommon, ArgValue_default.text), "data-simple": simple || void 0, children: text }), getSummaryItems = (summary) => {
+  if (!summary)
+    return [summary];
+  let summaryItems = summary.split("|").map((value) => value.trim());
+  return uniq(summaryItems);
+}, renderSummaryItems = (summaryItems) => summaryItems.slice(0, ITEMS_BEFORE_EXPANSION).map((item) => jsx18(ArgText, { text: item === "" ? '""' : item }, item)), renderExpandedItems = (summaryItems) => summaryItems.slice(ITEMS_BEFORE_EXPANSION).map((item) => jsx18(ArgText, { text: item === "" ? '""' : item }, item)), ArgSummary = ({ value, initialExpandedArgs }) => {
+  let { summary, detail } = value, [isOpen, setIsOpen] = useState7(!1), [isExpanded, setIsExpanded] = useState7(initialExpandedArgs || !1);
+  if (summary == null)
+    return null;
+  let summaryAsString = typeof summary.toString == "function" ? summary.toString() : summary;
+  if (detail == null) {
+    if (/[(){}[\]<>]/.test(summaryAsString))
+      return jsx18(ArgText, { text: summaryAsString });
+    let summaryItems = getSummaryItems(summaryAsString), itemsCount = summaryItems.length;
+    return itemsCount > ITEMS_BEFORE_EXPANSION ? jsxs14("div", { className: ArgValue_default.summary, "data-expanded": isExpanded || void 0, children: [
+      renderSummaryItems(summaryItems),
+      jsxs14(
+        "details",
+        {
+          className: ArgValue_default.detailsContainer,
+          open: isExpanded,
+          onToggle: (e2) => setIsExpanded(e2.currentTarget.open),
+          children: [
+            jsx18("div", { className: ArgValue_default.alignedDetails, children: renderExpandedItems(summaryItems) }),
+            jsx18("summary", { className: ArgValue_default.expandButton, role: "button", children: isExpanded ? "Show less..." : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...` })
+          ]
+        }
+      )
+    ] }) : jsx18("div", { className: ArgValue_default.summary, children: renderSummaryItems(summaryItems) });
+  }
+  return jsx18(
+    PopoverProvider,
+    {
+      ariaLabel: "Arg value details",
+      placement: "bottom",
+      visible: isOpen,
+      onVisibleChange: (isVisible) => {
+        setIsOpen(isVisible);
+      },
+      hasCloseButton: !0,
+      popover: jsx18("div", { className: ArgValue_default.detail, children: jsx18(SyntaxHighlighter, { language: "jsx", format: !1, children: detail }) }),
+      children: jsxs14("button", { className: clsx(codeCommon, ArgValue_default.expandable, "sbdocs-expandable"), children: [
+        jsx18("span", { children: summaryAsString }),
+        isOpen ? jsx18(ChevronSmallUpIcon, { className: ArgValue_default.chevron }) : jsx18(ChevronSmallDownIcon2, { className: ArgValue_default.chevron })
+      ] })
+    }
+  );
+}, ArgValue = ({ value, initialExpandedArgs }) => value == null ? jsx18(EmptyArg, {}) : jsx18(ArgSummary, { value, initialExpandedArgs });
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/ArgsTable/ArgRow.module.css
+var id13 = "core/src/addon-docs/blocks/components/ArgsTable/ArgRow.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id13}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id13), style.textContent = ".sb-oKJ3yG-name{font-weight:700}.sb-oKJ3yG-required{color:var(--sb-color-negative);font-family:var(--sb-font-mono);cursor:help}.sb-oKJ3yG-description{&.sb-oKJ3yG-description{& p{margin:0 0 10px}& a{color:var(--sb-color-secondary)}}& code{white-space:nowrap;font-size:12px;line-height:1;font-family:var(--sb-font-mono);color:var(--sb-color-default-text);background-color:#00000003;border:1px solid #0000000d;border-radius:3px;margin:0;padding:3px 5px;display:inline-block}& pre>code{white-space:pre-wrap}}:where([data-sb-theme=dark]) .sb-oKJ3yG-description code{background-color:#ffffff05;border:1px solid #ffffff0d}.sb-oKJ3yG-type,.sb-oKJ3yG-typeWithJsDoc{color:rgb(from var(--sb-color-default-text) r g b / calc(alpha - .1));margin-top:0}:where([data-sb-theme=dark]) :is(.sb-oKJ3yG-type,.sb-oKJ3yG-typeWithJsDoc){color:rgb(from var(--sb-color-default-text) r g b / calc(alpha - .2))}.sb-oKJ3yG-type[data-has-description]{margin-top:4px}.sb-oKJ3yG-typeWithJsDoc{margin-bottom:12px;&[data-has-description]{margin-top:12px}}.sb-oKJ3yG-nameCell{padding-left:20px!important;&[data-expandable]{padding-left:40px!important}}.sb-oKJ3yG-row span.sbdocs-argcontrol-setup,.sb-oKJ3yG-row:is(:hover,:focus-within) span.sbdocs-argcontrol-placeholder{white-space:nowrap;clip:rect(0, 0, 0, 0);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sb-oKJ3yG-row:is(:hover,:focus-within) span.sbdocs-argcontrol-setup{position:unset;width:unset;height:unset;padding:unset;margin:unset;overflow:unset;white-space:unset;clip:unset;clip-path:unset;border:unset}", document.head.appendChild(style);
+}
+var ArgRow_default = { row: "sb-oKJ3yG-row", required: "sb-oKJ3yG-required", type: "sb-oKJ3yG-type", name: "sb-oKJ3yG-name", typeWithJsDoc: "sb-oKJ3yG-typeWithJsDoc", description: "sb-oKJ3yG-description", nameCell: "sb-oKJ3yG-nameCell" };
+
+// src/addon-docs/blocks/components/ArgsTable/ArgRow.tsx
+import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var toSummary = (value) => value && { summary: typeof value == "string" ? value : value.name }, ArgRow = (props) => {
+  let { row, updateArgs, compact, expandable, initialExpandedArgs, docsLang } = props, { name, description } = row, table = row.table || {}, type = table.type || toSummary(row.type), defaultValue = table.defaultValue, required = row.type?.required, hasDescription = description != null && description !== "";
+  return jsxs15("tr", { className: ArgRow_default.row, children: [
+    jsxs15("td", { className: ArgRow_default.nameCell, "data-expandable": expandable || void 0, children: [
+      jsx19("span", { className: ArgRow_default.name, children: name }),
+      required ? jsx19("span", { className: ArgRow_default.required, "aria-hidden": !0, title: "Required", children: "*" }) : null
+    ] }),
+    compact ? null : jsxs15("td", { children: [
+      hasDescription && jsx19("div", { className: ArgRow_default.description, lang: docsLang, children: jsx19(index_modern_default, { children: description }) }),
+      table.jsDocTags != null ? jsxs15(Fragment9, { children: [
+        jsx19(
+          "div",
+          {
+            className: ArgRow_default.typeWithJsDoc,
+            "data-has-description": hasDescription || void 0,
+            children: jsx19(ArgValue, { value: type, initialExpandedArgs })
+          }
+        ),
+        jsx19(ArgJsDoc, { tags: table.jsDocTags })
+      ] }) : jsx19("div", { className: ArgRow_default.type, "data-has-description": hasDescription || void 0, children: jsx19(ArgValue, { value: type, initialExpandedArgs }) })
+    ] }),
+    compact ? null : jsx19("td", { children: jsx19(ArgValue, { value: defaultValue, initialExpandedArgs }) }),
+    updateArgs ? jsx19("td", { children: jsx19(ArgControl, { ...props, isRequired: !!required }) }) : null
+  ] });
+};
+
+// src/addon-docs/blocks/components/ArgsTable/Empty.tsx
+import { useEffect as useEffect7, useState as useState8 } from "react";
+import { EmptyTabContent, Link as Link2 } from "@aussieljk/forkbook/internal/components";
+import { DocumentIcon } from "@storybook/icons";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/ArgsTable/Empty.module.css
+var id14 = "core/src/addon-docs/blocks/components/ArgsTable/Empty.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id14}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id14), style.textContent = ".sb-NF550q-wrapper{border:1px solid var(--sb-app-border-color);border-radius:var(--sb-app-border-radius);background:var(--sb-background-content);flex-direction:column;justify-content:center;align-items:center;gap:15px;height:auto;padding:40px;display:flex;&[data-in-addon-panel]{border:none;border-radius:0;height:100%;padding:0}}.sb-NF550q-links{font-size:calc(var(--sb-size-s2) - 1px);gap:25px;display:flex}", document.head.appendChild(style);
+}
+var Empty_default = { wrapper: "sb-NF550q-wrapper", links: "sb-NF550q-links" };
+
+// src/addon-docs/blocks/components/ArgsTable/Empty.tsx
+import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var Empty = ({ inAddonPanel }) => {
+  let [isLoading, setIsLoading] = useState8(!0);
+  return useEffect7(() => {
+    let load = setTimeout(() => {
+      setIsLoading(!1);
+    }, 100);
+    return () => clearTimeout(load);
+  }, []), isLoading ? null : jsx20("div", { className: Empty_default.wrapper, "data-in-addon-panel": inAddonPanel || void 0, children: jsx20(
+    EmptyTabContent,
+    {
+      title: "This story has no controls",
+      description: jsxs16(Fragment10, { children: [
+        "Forkbook couldn't find or generate any controls for this story. Define",
+        " ",
+        jsx20("code", { children: "args" }),
+        " or ",
+        jsx20("code", { children: "argTypes" }),
+        ", or configure docgen to let Forkbook generate controls automatically."
+      ] }),
+      footer: jsx20("div", { className: Empty_default.links, children: jsxs16(
+        Link2,
+        {
+          href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
+          target: "_blank",
+          withArrow: !0,
+          children: [
+            jsx20(DocumentIcon, {}),
+            " Read docs"
+          ]
+        }
+      ) })
+    }
+  ) });
+};
+
+// src/addon-docs/blocks/components/ArgsTable/SectionRow.tsx
+import { useState as useState9 } from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "@storybook/icons";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/ArgsTable/SectionRow.module.css
+var id15 = "core/src/addon-docs/blocks/components/ArgsTable/SectionRow.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id15}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id15), style.textContent = ".sb-IPbRpq-expanderIcon{width:12px;height:12px;color:rgb(from var(--sb-color-default-text) r g b / calc(alpha - .25));border:none;margin-top:-2px;margin-left:-10px;margin-right:8px;display:inline-block}:where([data-sb-theme=dark]) .sb-IPbRpq-expanderIcon{color:rgb(from var(--sb-color-default-text) r g b / calc(alpha - .3))}.sb-IPbRpq-flexWrapper{align-items:center;line-height:20px;display:flex}.sb-IPbRpq-section{letter-spacing:.35em;text-transform:uppercase;font-weight:var(--sb-weight-bold);font-size:calc(var(--sb-size-s1) - 1px);color:rgb(from var(--sb-color-default-text) r g b / calc(alpha - .4));position:relative;background:var(--sb-background-app)!important;&~td{background:var(--sb-background-app)!important}}:where([data-sb-theme=dark]) .sb-IPbRpq-section{color:rgb(from var(--sb-color-default-text) r g b / calc(alpha - .6))}.sb-IPbRpq-subsection{font-weight:var(--sb-weight-bold);font-size:calc(var(--sb-size-s2) - 1px);background:var(--sb-background-app);position:relative}.sb-IPbRpq-cell{position:relative}.sb-IPbRpq-row:hover>td{cursor:row-resize;background-color:hsl(from var(--sb-background-app) h s calc(l + .5))!important}.sb-IPbRpq-clickIntercept{font:inherit;color:#0000;background:0 0;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0;cursor:row-resize!important}", document.head.appendChild(style);
+}
+var SectionRow_default = { clickIntercept: "sb-IPbRpq-clickIntercept", expanderIcon: "sb-IPbRpq-expanderIcon", flexWrapper: "sb-IPbRpq-flexWrapper", cell: "sb-IPbRpq-cell", section: "sb-IPbRpq-section", subsection: "sb-IPbRpq-subsection", row: "sb-IPbRpq-row" };
+
+// src/addon-docs/blocks/components/ArgsTable/SectionRow.tsx
+import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var SectionRow = ({
+  level = "section",
+  label,
+  children,
+  initialExpanded = !0,
+  colSpan = 3
+}) => {
+  let [expanded, setExpanded] = useState9(initialExpanded), levelClassName = level === "subsection" ? SectionRow_default.subsection : SectionRow_default.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 jsxs17(Fragment11, { children: [
+    jsxs17("tr", { className: SectionRow_default.row, title: helperText, children: [
+      jsxs17("td", { className: levelClassName, colSpan: 1, children: [
+        jsx21(
+          "button",
+          {
+            className: SectionRow_default.clickIntercept,
+            onClick: (e2) => setExpanded(!expanded),
+            tabIndex: 0,
+            children: helperText
+          }
+        ),
+        jsxs17("span", { className: SectionRow_default.flexWrapper, children: [
+          expanded ? jsx21(ChevronDownIcon, { className: SectionRow_default.expanderIcon }) : jsx21(ChevronRightIcon, { className: SectionRow_default.expanderIcon }),
+          label
+        ] })
+      ] }),
+      jsxs17("td", { className: SectionRow_default.cell, colSpan: colSpan - 1, children: [
+        jsx21(
+          "button",
+          {
+            className: SectionRow_default.clickIntercept,
+            onClick: (e2) => setExpanded(!expanded),
+            tabIndex: -1,
+            style: { outline: "none" },
+            children: helperText
+          }
+        ),
+        expanded ? null : caption
+      ] })
+    ] }),
+    expanded ? children : null
+  ] });
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/ArgsTable/Skeleton.module.css
+var id16 = "core/src/addon-docs/blocks/components/ArgsTable/Skeleton.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id16}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id16), style.textContent = ".sb-j2xz2a-tableWrapper{border-spacing:0;width:100%;color:var(--sb-color-default-text)}.sb-j2xz2a-row{border-bottom:1px solid var(--sb-app-border-color);display:flex;&:last-child{border-bottom:0}}.sb-j2xz2a-column{flex-direction:column;align-items:flex-start;gap:5px;padding:10px 15px;display:flex;&[data-position=first]{width:25%;padding-left:20px}&[data-position=second]{width:35%}&[data-position=third]{width:15%}&[data-position=last]{width:25%;padding-right:20px}}.sb-j2xz2a-skeletonText{background:var(--sb-app-border-color);border-radius:3px;width:100%;height:16px;animation:1.5s ease-in-out infinite sb-j2xz2a-glow}@keyframes sb-j2xz2a-glow{0%,to{opacity:1}50%{opacity:.4}}", document.head.appendChild(style);
+}
+var Skeleton_default = { glow: "sb-j2xz2a-glow", tableWrapper: "sb-j2xz2a-tableWrapper", column: "sb-j2xz2a-column", row: "sb-j2xz2a-row", skeletonText: "sb-j2xz2a-skeletonText" };
+
+// src/addon-docs/blocks/components/ArgsTable/Skeleton.tsx
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+var SkeletonText = ({ width }) => jsx22("div", { className: Skeleton_default.skeletonText, style: { width } }), Skeleton = () => jsxs18("div", { className: Skeleton_default.tableWrapper, children: [
+  jsxs18("div", { className: Skeleton_default.row, children: [
+    jsx22("div", { className: Skeleton_default.column, "data-position": "first", children: jsx22(SkeletonText, { width: "60%" }) }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "second", children: jsx22(SkeletonText, { width: "30%" }) }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "third", children: jsx22(SkeletonText, { width: "60%" }) }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "last", children: jsx22(SkeletonText, { width: "60%" }) })
+  ] }),
+  jsxs18("div", { className: Skeleton_default.row, children: [
+    jsx22("div", { className: Skeleton_default.column, "data-position": "first", children: jsx22(SkeletonText, { width: "60%" }) }),
+    jsxs18("div", { className: Skeleton_default.column, "data-position": "second", children: [
+      jsx22(SkeletonText, { width: "80%" }),
+      jsx22(SkeletonText, { width: "30%" })
+    ] }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "third", children: jsx22(SkeletonText, { width: "60%" }) }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "last", children: jsx22(SkeletonText, { width: "60%" }) })
+  ] }),
+  jsxs18("div", { className: Skeleton_default.row, children: [
+    jsx22("div", { className: Skeleton_default.column, "data-position": "first", children: jsx22(SkeletonText, { width: "60%" }) }),
+    jsxs18("div", { className: Skeleton_default.column, "data-position": "second", children: [
+      jsx22(SkeletonText, { width: "80%" }),
+      jsx22(SkeletonText, { width: "30%" })
+    ] }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "third", children: jsx22(SkeletonText, { width: "60%" }) }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "last", children: jsx22(SkeletonText, { width: "60%" }) })
+  ] }),
+  jsxs18("div", { className: Skeleton_default.row, children: [
+    jsx22("div", { className: Skeleton_default.column, "data-position": "first", children: jsx22(SkeletonText, { width: "60%" }) }),
+    jsxs18("div", { className: Skeleton_default.column, "data-position": "second", children: [
+      jsx22(SkeletonText, { width: "80%" }),
+      jsx22(SkeletonText, { width: "30%" })
+    ] }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "third", children: jsx22(SkeletonText, { width: "60%" }) }),
+    jsx22("div", { className: Skeleton_default.column, "data-position": "last", children: jsx22(SkeletonText, { width: "60%" }) })
+  ] })
+] });
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/ArgsTable/ArgsTable.module.css
+var id17 = "core/src/addon-docs/blocks/components/ArgsTable/ArgsTable.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id17}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id17), style.textContent = ".sb-sQsT7G-tableWrapper.sb-sQsT7G-tableWrapper{border-spacing:0;color:var(--sb-color-default-text);& td,& th{vertical-align:top;text-overflow:ellipsis;border:none;padding:0}font-size:calc(var(--sb-size-s2) - 1px);text-align:left;margin-top:25px;margin-bottom:40px;width:100%;margin-inline:1px;padding-inline:0;line-height:19px;& thead th:first-of-type,& td:first-of-type{width:25%}& th:first-of-type,& td:first-of-type{padding-left:20px}& th:last-of-type,& td:last-of-type{padding-right:20px}&:not([data-compact]){& th:nth-of-type(2),& td:nth-of-type(2){width:35%}& td:nth-of-type(3){width:15%}& th:last-of-type,& td:last-of-type{width:25%}}& th{color:var(--sb-text-muted-color);padding:10px 15px}& td{padding-top:10px;padding-bottom:10px;&:not(:first-of-type){padding-left:15px;padding-right:15px}&:last-of-type{padding-right:20px}}& tbody>tr>*{background:var(--sb-background-content);border-top:1px solid var(--sb-app-border-color)}&:not([data-in-addon-panel]) tbody{filter:drop-shadow(0 1px 3px #0000001a);&>tr:first-of-type>*{border-block-start:1px solid var(--sb-app-border-color)}&>tr:last-of-type>*{border-block-end:1px solid var(--sb-app-border-color)}&>tr>:first-of-type{border-inline-start:1px solid var(--sb-app-border-color)}&>tr>:last-of-type{border-inline-end:1px solid var(--sb-app-border-color)}&>tr:first-of-type>td:first-of-type{border-top-left-radius:var(--sb-app-border-radius)}&>tr:first-of-type>td:last-of-type{border-top-right-radius:var(--sb-app-border-radius)}&>tr:last-of-type>td:first-of-type{border-bottom-left-radius:var(--sb-app-border-radius)}&>tr:last-of-type>td:last-of-type{border-bottom-right-radius:var(--sb-app-border-radius)}}&[data-in-tab-panel]{margin-inline:0;padding-inline:3px}&[data-in-addon-panel]{margin-top:0;margin-bottom:0;margin-inline:0}}:where([data-sb-theme=dark]) .sb-sQsT7G-tableWrapper.sb-sQsT7G-tableWrapper:not([data-in-addon-panel]) tbody{filter:drop-shadow(0 1px 3px #0003)}.sb-sQsT7G-tablePositionWrapper{position:relative}.sb-sQsT7G-buttonPositionWrapper{position:absolute;top:10px;right:22px}.sb-sQsT7G-resetButton{margin:-4px -12px -4px 0}@media (forced-colors:active){.sb-sQsT7G-tableWrapper.sb-sQsT7G-tableWrapper tbody{filter:none!important;&>tr>*{border-color:canvastext!important}}}", document.head.appendChild(style);
+}
+var ArgsTable_default = { tablePositionWrapper: "sb-sQsT7G-tablePositionWrapper", tableWrapper: "sb-sQsT7G-tableWrapper", buttonPositionWrapper: "sb-sQsT7G-buttonPositionWrapper", resetButton: "sb-sQsT7G-resetButton" };
+
+// src/addon-docs/blocks/components/ArgsTable/ArgsTable.tsx
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var TableWrapper = ({
+  compact,
+  inAddonPanel,
+  inTabPanel,
+  className,
+  ...props
+}) => jsx23(
+  "table",
+  {
+    className: clsx(ArgsTable_default.tableWrapper, className),
+    "data-compact": compact || void 0,
+    "data-in-addon-panel": inAddonPanel || void 0,
+    "data-in-tab-panel": inTabPanel || void 0,
+    ...props
+  }
+);
+var sortFns = {
+  alpha: (a2, b2) => (a2.name ?? "").localeCompare(b2.name ?? ""),
+  requiredFirst: (a2, b2) => +!!b2.type?.required - +!!a2.type?.required || (a2.name ?? "").localeCompare(b2.name ?? ""),
+  none: null
+}, groupRows = (rows, sort) => {
+  let sections = { ungrouped: [], ungroupedSubsections: {}, sections: {} };
+  if (!rows)
+    return sections;
+  Object.entries(rows).forEach(([key, row]) => {
+    let { category, subcategory } = row?.table || {};
+    if (category) {
+      let section = sections.sections[category] || { ungrouped: [], subsections: {} };
+      if (!subcategory)
+        section.ungrouped.push({ key, ...row });
+      else {
+        let subsection = section.subsections[subcategory] || [];
+        subsection.push({ key, ...row }), section.subsections[subcategory] = subsection;
+      }
+      sections.sections[category] = section;
+    } else if (subcategory) {
+      let subsection = sections.ungroupedSubsections[subcategory] || [];
+      subsection.push({ key, ...row }), sections.ungroupedSubsections[subcategory] = subsection;
+    } else
+      sections.ungrouped.push({ key, ...row });
+  });
+  let sortFn = sortFns[sort], sortSubsection = (record) => sortFn ? Object.keys(record).reduce(
+    (acc, cur) => ({
+      ...acc,
+      [cur]: record[cur].sort(sortFn)
+    }),
+    {}
+  ) : record;
+  return {
+    ungrouped: sortFn ? sections.ungrouped.sort(sortFn) : sections.ungrouped,
+    ungroupedSubsections: sortSubsection(sections.ungroupedSubsections),
+    sections: Object.keys(sections.sections).reduce(
+      (acc, cur) => ({
+        ...acc,
+        [cur]: {
+          ungrouped: sortFn ? sections.sections[cur].ungrouped.sort(sortFn) : sections.sections[cur].ungrouped,
+          subsections: sortSubsection(sections.sections[cur].subsections)
+        }
+      }),
+      {}
+    )
+  };
+}, safeIncludeConditionalArg = (row, args, globals) => {
+  try {
+    return includeConditionalArg(row, args, globals);
+  } catch (err) {
+    return once.warn(err.message), !1;
+  }
+}, ArgsTable = (props) => {
+  let {
+    updateArgs,
+    resetArgs,
+    compact,
+    inAddonPanel,
+    inTabPanel,
+    initialExpandedArgs,
+    sort = "none",
+    isLoading,
+    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 jsxs19(EmptyBlock, { children: [
+      error,
+      "\xA0",
+      jsxs19(Link3, { href: "http://storybook.js.org/docs/?ref=ui", target: "_blank", withArrow: !0, children: [
+        jsx23(DocumentIcon2, {}),
+        " Read the docs"
+      ] })
+    ] });
+  }
+  if (isLoading)
+    return jsx23(Skeleton, {});
+  let groups = groupRows(
+    pickBy(
+      rows || {},
+      (row) => !row?.table?.disable && safeIncludeConditionalArg(row, args || {}, globals || {})
+    ),
+    sort
+  ), hasNoUngrouped = groups.ungrouped.length === 0, hasNoSections = Object.entries(groups.sections).length === 0, hasNoUngroupedSubsections = Object.entries(groups.ungroupedSubsections).length === 0;
+  if (hasNoUngrouped && hasNoSections && hasNoUngroupedSubsections)
+    return jsx23(Empty, { inAddonPanel });
+  let colSpan = 1;
+  updateArgs && (colSpan += 1), compact || (colSpan += 2);
+  let expandable = Object.keys(groups.sections).length > 0, common = {
+    updateArgs,
+    compact,
+    inAddonPanel,
+    initialExpandedArgs,
+    storyId,
+    controlsId
+  };
+  return jsx23(ResetWrapper, { children: jsxs19("div", { className: ArgsTable_default.tablePositionWrapper, children: [
+    updateArgs && !isLoading && resetArgs && jsx23("div", { className: ArgsTable_default.buttonPositionWrapper, children: jsx23(
+      Button5,
+      {
+        className: ArgsTable_default.resetButton,
+        variant: "ghost",
+        padding: "small",
+        onClick: handleResetClick,
+        disabled: isResetting,
+        ariaLabel: isResetting ? "Resetting controls..." : "Reset controls",
+        lang: "en",
+        children: jsx23(UndoIcon, {})
+      }
+    ) }),
+    jsxs19(
+      TableWrapper,
+      {
+        compact,
+        inAddonPanel,
+        inTabPanel,
+        className: "docblock-argstable sb-unstyled",
+        lang: "en",
+        children: [
+          jsx23("thead", { className: "docblock-argstable-head", children: jsxs19("tr", { children: [
+            jsx23("th", { children: jsx23("span", { children: "Name" }) }),
+            compact ? null : jsx23("th", { children: jsx23("span", { children: "Description" }) }),
+            compact ? null : jsx23("th", { children: jsx23("span", { children: "Default" }) }),
+            updateArgs ? jsx23("th", { children: jsx23("span", { children: "Control" }) }) : null
+          ] }) }),
+          jsxs19("tbody", { className: "docblock-argstable-body", children: [
+            groups.ungrouped.map((row) => jsx23(
+              ArgRow,
+              {
+                row,
+                arg: args && args[row.key],
+                docsLang,
+                ...common
+              },
+              row.key
+            )),
+            Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => jsx23(
+              SectionRow,
+              {
+                label: subcategory,
+                level: "subsection",
+                colSpan,
+                children: subsection.map((row) => jsx23(
+                  ArgRow,
+                  {
+                    row,
+                    arg: args && args[row.key],
+                    expandable,
+                    ...common
+                  },
+                  row.key
+                ))
+              },
+              subcategory
+            )),
+            Object.entries(groups.sections).map(([category, section]) => jsxs19(SectionRow, { label: category, level: "section", colSpan, children: [
+              section.ungrouped.map((row) => jsx23(ArgRow, { row, arg: args && args[row.key], ...common }, row.key)),
+              Object.entries(section.subsections).map(([subcategory, subsection]) => jsx23(
+                SectionRow,
+                {
+                  label: subcategory,
+                  level: "subsection",
+                  colSpan,
+                  children: subsection.map((row) => jsx23(
+                    ArgRow,
+                    {
+                      row,
+                      arg: args && args[row.key],
+                      expandable,
+                      ...common
+                    },
+                    row.key
+                  ))
+                },
+                subcategory
+              ))
+            ] }, category))
+          ] })
+        ]
+      }
+    )
+  ] }) });
+};
+
+export {
+  index_modern_default,
+  BooleanControl,
+  parseDate,
+  parseTime,
+  formatDate,
+  formatTime,
+  DateControl,
+  parse2 as parse,
+  format,
+  NumberControl,
+  normalizeOptions,
+  OptionsControl,
+  ObjectControl,
+  RangeControl,
+  TextControl,
+  FilesControl,
+  ColorControl,
+  ArgsTable
+};