storybook
Version:
Storybook: Develop, document, and test UI components in isolation
1,191 lines (1,158 loc) • 283 kB
JavaScript
import {
getControlId,
getControlSetterButtonId
} from "../../_browser-chunks/chunk-2FRVAXCZ.js";
import {
_defineProperty,
_objectWithoutProperties
} from "../../_browser-chunks/chunk-UAYGIC3L.js";
import "../../_browser-chunks/chunk-242VQQM5.js";
import {
dequal,
uniq
} from "../../_browser-chunks/chunk-NQJGOFZV.js";
import {
ADDON_ID as ADDON_ID3,
ADDON_ID2 as ADDON_ID4,
ADDON_ID3 as ADDON_ID5,
DEFAULT_BACKGROUNDS,
PARAM_KEY as PARAM_KEY3,
PARAM_KEY3 as PARAM_KEY4,
TOOL_ID as TOOL_ID2
} from "../../_browser-chunks/chunk-FNXWN6IK.js";
import {
curriedDarken$1,
curriedLighten$1,
curriedOpacify$1,
curriedTransparentize$1,
rgba
} from "../../_browser-chunks/chunk-S6TK43XQ.js";
import {
_extends
} from "../../_browser-chunks/chunk-LE2LTDW3.js";
import {
EVENTS
} from "../../_browser-chunks/chunk-ZUWEVLDX.js";
import {
require_ansi_to_html
} from "../../_browser-chunks/chunk-V2VKKSMQ.js";
import {
cloneDeep,
pickBy
} from "../../_browser-chunks/chunk-YK43Z22A.js";
import "../../_browser-chunks/chunk-LCHBOIHN.js";
import {
ADDON_ID,
CLEAR_ID,
EVENT_ID,
PANEL_ID,
PARAM_KEY
} from "../../_browser-chunks/chunk-6XWLIJQL.js";
import {
MINIMAL_VIEWPORTS
} from "../../_browser-chunks/chunk-ASKQZAOS.js";
import {
ADDON_ID as ADDON_ID2,
PARAM_KEY as PARAM_KEY2,
TOOL_ID
} from "../../_browser-chunks/chunk-SL75JR6Y.js";
import {
__toESM
} from "../../_browser-chunks/chunk-A242L54C.js";
// src/controls/manager.tsx
import React28 from "react";
import { AddonPanel } from "storybook/internal/components";
import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from "storybook/internal/core-events";
import { FailedIcon, PassedIcon } from "@storybook/icons";
import { addons, experimental_requestResponse, types } from "storybook/manager-api";
import { color } from "storybook/theming";
// src/controls/components/ControlsPanel.tsx
import React26, { useEffect as useEffect8, useMemo as useMemo3, useState as useState11 } from "react";
import { global } from "@storybook/global";
import {
useArgTypes,
useArgs,
useGlobals,
useParameter,
useStorybookApi,
useStorybookState
} from "storybook/manager-api";
import { styled as styled21 } from "storybook/theming";
// ../addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
import React24 from "react";
import { once } from "storybook/internal/client-logger";
import { Button as Button5, Link as Link3, ResetWrapper } from "storybook/internal/components";
import { includeConditionalArg } from "storybook/internal/csf";
import { DocumentIcon as DocumentIcon2, UndoIcon } from "@storybook/icons";
import { styled as styled19 } from "storybook/theming";
// ../addons/docs/src/blocks/components/EmptyBlock.tsx
import React from "react";
import { withReset } from "storybook/internal/components";
import { styled } from "storybook/theming";
var Wrapper = styled.div(withReset, ({ theme: theme3 }) => ({
backgroundColor: theme3.base === "light" ? "rgba(0,0,0,.01)" : "rgba(255,255,255,.01)",
borderRadius: theme3.appBorderRadius,
border: `1px dashed ${theme3.appBorderColor}`,
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: 20,
margin: "25px 0 40px",
color: curriedTransparentize$1(0.3, theme3.color.defaultText),
fontSize: theme3.typography.size.s2
})), EmptyBlock = (props) => React.createElement(Wrapper, { ...props, className: "docblock-emptyblock sb-unstyled" });
// ../addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
import React20, { useState as useState8 } from "react";
import { codeCommon as codeCommon3 } from "storybook/internal/components";
// ../../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);
};
// ../addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
import { styled as styled15 } from "storybook/theming";
// ../addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
import React17, { useCallback as useCallback5, useEffect as useEffect6, useState as useState6 } from "react";
import { Link } from "storybook/internal/components";
// ../addons/docs/src/blocks/controls/index.tsx
import React16, { Suspense, lazy } from "react";
// ../addons/docs/src/blocks/controls/Boolean.tsx
import React2, { useCallback } from "react";
import { Button } from "storybook/internal/components";
import { styled as styled2 } from "storybook/theming";
var Label = styled2.label(({ theme: theme3 }) => ({
lineHeight: "18px",
alignItems: "center",
marginBottom: 8,
display: "inline-block",
position: "relative",
whiteSpace: "nowrap",
background: theme3.boolean.background,
borderRadius: "3em",
padding: 1,
'&[aria-disabled="true"]': {
opacity: 0.5,
input: {
cursor: "not-allowed"
}
},
input: {
appearance: "none",
width: "100%",
height: "100%",
position: "absolute",
left: 0,
top: 0,
margin: 0,
padding: 0,
border: "none",
background: "transparent",
cursor: "pointer",
borderRadius: "3em",
"&:focus": {
outline: "none",
boxShadow: `${theme3.color.secondary} 0 0 0 1px inset !important`
},
"@media (forced-colors: active)": {
"&:focus": {
outline: "1px solid highlight"
}
}
},
span: {
textAlign: "center",
fontSize: theme3.typography.size.s1,
fontWeight: theme3.typography.weight.bold,
lineHeight: "1",
cursor: "pointer",
display: "inline-block",
padding: "7px 15px",
transition: "all 100ms ease-out",
userSelect: "none",
borderRadius: "3em",
color: curriedTransparentize$1(0.5, theme3.color.defaultText),
background: "transparent",
"&:hover": {
boxShadow: `${curriedOpacify$1(0.3, theme3.appBorderColor)} 0 0 0 1px inset`
},
"&:active": {
boxShadow: `${curriedOpacify$1(0.05, theme3.appBorderColor)} 0 0 0 2px inset`,
color: curriedOpacify$1(1, theme3.appBorderColor)
},
"&:first-of-type": {
paddingRight: 8
},
"&:last-of-type": {
paddingLeft: 8
}
},
"input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type": {
background: theme3.boolean.selectedBackground,
boxShadow: theme3.base === "light" ? `${curriedOpacify$1(0.1, theme3.appBorderColor)} 0 0 2px` : `${theme3.appBorderColor} 0 0 0 1px`,
color: theme3.color.defaultText,
padding: "7px 15px",
"@media (forced-colors: active)": {
textDecoration: "underline"
}
}
})), parse = (value) => value === "true", BooleanControl = ({
name,
value,
onChange,
onBlur,
onFocus,
argType
}) => {
let onSetFalse = useCallback(() => onChange(!1), [onChange]), readonly = !!argType?.table?.readonly;
if (value === void 0)
return React2.createElement(
Button,
{
ariaLabel: !1,
variant: "outline",
size: "medium",
id: getControlSetterButtonId(name),
onClick: onSetFalse,
disabled: readonly
},
"Set boolean"
);
let controlId = getControlId(name), parsedValue = typeof value == "string" ? parse(value) : value;
return React2.createElement(Label, { "aria-disabled": readonly, htmlFor: controlId, "aria-label": name }, React2.createElement(
"input",
{
id: controlId,
type: "checkbox",
onChange: (e2) => onChange(e2.target.checked),
checked: parsedValue,
role: "switch",
disabled: readonly,
name,
onBlur,
onFocus
}
), React2.createElement("span", { "aria-hidden": "true" }, "False"), React2.createElement("span", { "aria-hidden": "true" }, "True"));
};
// ../addons/docs/src/blocks/controls/Date.tsx
import React3, { useEffect, useRef, useState } from "react";
import { Form } from "storybook/internal/components";
import { styled as styled3 } from "storybook/theming";
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}`;
}, FormInput = styled3(Form.Input)(({ theme: theme3 }) => ({
"&[readonly]": {
background: theme3.base === "light" ? theme3.color.lighter : "transparent"
},
"&::-webkit-calendar-picker-indicator": {
opacity: 0.5,
height: 12,
filter: theme3.base === "light" ? void 0 : "invert(1)"
}
})), FlexSpaced = styled3.fieldset({
flex: 1,
display: "flex",
border: 0,
marginInline: 0,
padding: 0,
gap: 10,
"div:first-of-type": {
flex: 4
},
"div:last-of-type": {
flex: 3
}
}), DateControl = ({ name, value, onChange, onFocus, onBlur, argType }) => {
let [valid, setValid] = useState(!0), dateRef = useRef(), timeRef = useRef(), readonly = !!argType?.table?.readonly;
useEffect(() => {
valid !== !1 && (dateRef && dateRef.current && (dateRef.current.value = 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);
return React3.createElement(FlexSpaced, null, React3.createElement("legend", { className: "sb-sr-only" }, name), React3.createElement("label", { htmlFor: `${controlId}-date`, className: "sb-sr-only" }, "Date"), React3.createElement(
FormInput,
{
type: "date",
max: "9999-12-31",
ref: dateRef,
id: `${controlId}-date`,
name: `${controlId}-date`,
readOnly: readonly,
onChange: onDateChange,
onFocus,
onBlur
}
), React3.createElement("label", { htmlFor: `${controlId}-time`, className: "sb-sr-only" }, "Time"), React3.createElement(
FormInput,
{
type: "time",
id: `${controlId}-time`,
name: `${controlId}-time`,
ref: timeRef,
onChange: onTimeChange,
readOnly: readonly,
onFocus,
onBlur
}
), valid ? null : React3.createElement("div", null, "invalid"));
};
// ../addons/docs/src/blocks/controls/Number.tsx
import React4, { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
import { Button as Button2, Form as Form2 } from "storybook/internal/components";
import { styled as styled4 } from "storybook/theming";
var Wrapper2 = styled4.label({
display: "flex"
}), parse2 = (value) => {
let result = parseFloat(value);
return Number.isNaN(result) ? void 0 : result;
};
var FormInput2 = styled4(Form2.Input)(({ theme: theme3 }) => ({
background: theme3.base === "light" ? theme3.color.lighter : "transparent"
})), NumberControl = ({
name,
value,
onChange,
min,
max,
step,
onBlur,
onFocus,
argType
}) => {
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 ? React4.createElement(
Button2,
{
ariaLabel: !1,
variant: "outline",
size: "medium",
id: getControlSetterButtonId(name),
onClick: onForceVisible,
disabled: readonly
},
"Set number"
) : React4.createElement(Wrapper2, null, React4.createElement(
FormInput2,
{
ref: htmlElRef,
id: getControlId(name),
type: "number",
onChange: handleChange,
size: "flex",
placeholder: "Edit number...",
value: inputValue,
valid: parseError ? "error" : void 0,
autoFocus: forceVisible,
readOnly: readonly,
name,
min,
max,
step,
onFocus,
onBlur
}
));
};
// ../addons/docs/src/blocks/controls/options/Options.tsx
import React8 from "react";
// ../addons/docs/src/blocks/controls/options/Checkbox.tsx
import React5, { useEffect as useEffect3, useState as useState3 } from "react";
import { logger } from "storybook/internal/client-logger";
import { styled as styled5 } from "storybook/theming";
// ../addons/docs/src/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]);
// ../addons/docs/src/blocks/controls/options/Checkbox.tsx
var Wrapper3 = styled5.fieldset(
{
border: "none",
marginInline: 0,
padding: 0,
display: "flex",
alignItems: "flex-start"
},
({ $isInline: isInline }) => isInline ? {
flexWrap: "wrap",
gap: 15,
label: {
display: "inline-flex"
}
} : {
flexDirection: "column",
gap: 8,
label: {
display: "flex"
}
}
), Text = styled5.span(({ $readOnly }) => ({
opacity: $readOnly ? 0.5 : 1
})), Label2 = styled5.label(({ $readOnly }) => ({
lineHeight: "20px",
alignItems: "center",
cursor: $readOnly ? "not-allowed" : "pointer",
input: {
cursor: $readOnly ? "not-allowed" : "pointer",
margin: 0,
marginRight: 6
}
})), CheckboxControl = ({
name,
options,
value,
onChange,
isInline,
argType
}) => {
if (!options)
return logger.warn(`Checkbox with no options: ${name}`), React5.createElement(React5.Fragment, null, "-");
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);
return React5.createElement(Wrapper3, { $isInline: isInline }, React5.createElement("legend", { className: "sb-sr-only" }, name), Object.keys(options).map((key, index) => {
let id = `${controlId}-${index}`;
return React5.createElement(Label2, { key: id, htmlFor: id, $readOnly: readonly }, React5.createElement(
"input",
{
type: "checkbox",
disabled: readonly,
id,
name: id,
value: key,
onChange: handleChange,
checked: selected?.includes(key)
}
), React5.createElement(Text, { $readOnly: readonly }, key));
}));
};
// ../addons/docs/src/blocks/controls/options/Radio.tsx
import React6 from "react";
import { logger as logger2 } from "storybook/internal/client-logger";
import { styled as styled6 } from "storybook/theming";
var Wrapper4 = styled6.fieldset(
{
border: "none",
marginInline: 0,
padding: 0,
display: "flex",
alignItems: "flex-start"
},
({ isInline }) => isInline ? {
flexWrap: "wrap",
gap: 15,
label: {
display: "inline-flex"
}
} : {
flexDirection: "column",
gap: 8,
label: {
display: "flex"
}
}
), Text2 = styled6.span(({ $readOnly }) => ({
opacity: $readOnly ? 0.5 : 1
})), Label3 = styled6.label(({ $readOnly }) => ({
lineHeight: "20px",
alignItems: "center",
cursor: $readOnly ? "not-allowed" : "pointer",
input: {
cursor: $readOnly ? "not-allowed" : "pointer",
margin: 0,
marginRight: 6
}
})), RadioControl = ({
name,
options,
value,
onChange,
isInline,
argType
}) => {
if (!options)
return logger2.warn(`Radio with no options: ${name}`), React6.createElement(React6.Fragment, null, "-");
let selection = selectedKey(value, options), controlId = getControlId(name), readonly = !!argType?.table?.readonly;
return React6.createElement(Wrapper4, { isInline }, React6.createElement("legend", { className: "sb-sr-only" }, name), Object.keys(options).map((key, index) => {
let id = `${controlId}-${index}`;
return React6.createElement(Label3, { key: id, htmlFor: id, $readOnly: readonly }, React6.createElement(
"input",
{
type: "radio",
id,
name: controlId,
disabled: readonly,
value: key,
onChange: (e2) => onChange(options[e2.currentTarget.value]),
checked: key === selection
}
), React6.createElement(Text2, { $readOnly: readonly }, key));
}));
};
// ../addons/docs/src/blocks/controls/options/Select.tsx
import React7 from "react";
import { logger as logger3 } from "storybook/internal/client-logger";
import { ChevronSmallDownIcon } from "@storybook/icons";
import { styled as styled7 } from "storybook/theming";
var styleResets = {
// resets
appearance: "none",
border: "0 none",
boxSizing: "inherit",
display: " block",
margin: " 0",
background: "transparent",
padding: 0,
fontSize: "inherit",
position: "relative"
}, OptionsSelect = styled7.select(styleResets, ({ theme: theme3 }) => ({
boxSizing: "border-box",
position: "relative",
padding: "6px 10px",
width: "100%",
color: theme3.input.color || "inherit",
background: theme3.input.background,
borderRadius: theme3.input.borderRadius,
boxShadow: `${theme3.input.border} 0 0 0 1px inset`,
fontSize: theme3.typography.size.s2 - 1,
lineHeight: "20px",
"&:focus": {
boxShadow: `${theme3.color.secondary} 0 0 0 1px inset`,
outline: "none"
},
"&[disabled]": {
cursor: "not-allowed",
opacity: 0.5
},
"::placeholder": {
color: theme3.textMutedColor
},
"&[multiple]": {
overflow: "auto",
padding: 0,
option: {
display: "block",
padding: "6px 10px",
marginLeft: 1,
marginRight: 1,
"&:hover": {
background: theme3.background.hoverable
},
"&:checked": {
background: "transparent",
color: theme3.color.secondary,
fontWeight: theme3.typography.weight.bold
}
}
}
})), SelectWrapper = styled7.span(({ theme: theme3 }) => ({
display: "inline-block",
lineHeight: "normal",
overflow: "hidden",
position: "relative",
verticalAlign: "top",
width: "100%",
svg: {
position: "absolute",
zIndex: 1,
pointerEvents: "none",
height: "12px",
marginTop: "-6px",
right: "12px",
top: "50%",
fill: theme3.textMutedColor,
path: {
fill: theme3.textMutedColor
}
}
})), NO_SELECTION = "Choose option...", SingleSelect = ({ name, value, options, onChange, argType }) => {
let handleChange = (e2) => {
onChange(options[e2.currentTarget.value]);
}, selection = selectedKey(value, options) || NO_SELECTION, controlId = getControlId(name), readonly = !!argType?.table?.readonly;
return React7.createElement(SelectWrapper, null, React7.createElement(ChevronSmallDownIcon, null), React7.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React7.createElement(OptionsSelect, { disabled: readonly, id: controlId, value: selection, onChange: handleChange }, React7.createElement("option", { disabled: selection === NO_SELECTION, key: "no-selection" }, NO_SELECTION), Object.keys(options).map((key) => React7.createElement("option", { key, value: key }, key))));
}, MultiSelect = ({ name, value, options, onChange, argType }) => {
let handleChange = (e2) => {
let selection2 = Array.from(e2.currentTarget.options).filter((option) => option.selected).map((option) => option.value);
onChange(selectedValues(selection2, options));
}, selection = selectedKeys(value, options), controlId = getControlId(name), readonly = !!argType?.table?.readonly;
return React7.createElement(SelectWrapper, null, React7.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React7.createElement(
OptionsSelect,
{
disabled: readonly,
id: controlId,
multiple: !0,
value: selection,
onChange: handleChange
},
Object.keys(options).map((key) => React7.createElement("option", { key, value: key }, key))
));
}, SelectControl = (props) => {
let { name, options } = props;
return options ? props.isMulti ? React7.createElement(MultiSelect, { ...props }) : React7.createElement(SingleSelect, { ...props }) : (logger3.warn(`Select with no options: ${name}`), React7.createElement(React7.Fragment, null, "-"));
};
// ../addons/docs/src/blocks/controls/options/Options.tsx
var normalizeOptions = (options, labels) => Array.isArray(options) ? options.reduce((acc, item) => (acc[labels?.[item] || String(item)] = item, acc), {}) : options, Controls = {
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 React8.createElement(Control, { ...normalized });
throw new Error(`Unknown options type: ${type}`);
};
// ../addons/docs/src/blocks/controls/Object.tsx
import React12, { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState4 } from "react";
import { Button as Button3, Form as Form3, ToggleButton } from "storybook/internal/components";
import { AddIcon, EditIcon, SubtractIcon } from "@storybook/icons";
import { styled as styled9, useTheme } from "storybook/theming";
// ../addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx
import React11, { Component as Component2 } from "react";
// ../addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
import React10, { Component, cloneElement as cloneElement2 } from "react";
// ../addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx
import React9 from "react";
import { styled as styled8 } from "storybook/theming";
var Container = styled8.div(({ theme: theme3 }) => ({
position: "relative",
":hover": {
"& > .rejt-accordion-button::after": {
background: theme3.color.secondary
},
"& > .rejt-accordion-region > :is(.rejt-plus-menu, .rejt-minus-menu)": {
opacity: 1
}
}
})), Trigger = styled8.button(({ theme: theme3 }) => ({
padding: 0,
background: "transparent",
border: "none",
marginRight: "3px",
lineHeight: "22px",
color: theme3.color.secondary,
"::after": {
content: '""',
position: "absolute",
top: 0,
display: "block",
width: "100%",
marginLeft: "-1rem",
height: "22px",
background: "transparent",
borderRadius: 4,
transition: "background 0.2s",
opacity: 0.1,
paddingRight: "20px"
},
"::before": {
content: '""',
position: "absolute"
},
'&[aria-expanded="true"]::before': {
left: -10,
top: 10,
borderTop: "3px solid rgba(153,153,153,0.6)",
borderLeft: "3px solid transparent",
borderRight: "3px solid transparent"
},
'&[aria-expanded="false"]::before': {
left: -8,
top: 8,
borderTop: "3px solid transparent",
borderBottom: "3px solid transparent",
borderLeft: "3px solid rgba(153,153,153,0.6)"
}
})), Region = styled8.div({
display: "inline"
});
function JsonNodeAccordion({
children,
name,
collapsed,
keyPath,
deep,
...props
}) {
let accordionKey = `${keyPath.at(-1) ?? "root"}-${name}-${deep}`, ids = {
trigger: `${accordionKey}-trigger`,
region: `${accordionKey}-region`
}, containerTag = keyPath.length > 0 ? "li" : "div";
return React9.createElement(Container, { as: containerTag }, React9.createElement(
Trigger,
{
type: "button",
"aria-expanded": !collapsed,
id: ids.trigger,
"aria-controls": ids.region,
className: "rejt-accordion-button",
...props
},
name,
" :"
), React9.createElement(
Region,
{
role: "group",
id: ids.region,
"aria-labelledby": ids.trigger,
className: "rejt-accordion-region"
},
children
));
}
// ../addons/docs/src/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";
// ../addons/docs/src/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";
// ../addons/docs/src/blocks/controls/react-editable-json-tree/types/inputUsageTypes.ts
var VALUE = "value";
// ../addons/docs/src/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;
}
// ../addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
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, onSub