@storybook/addon-docs
Version:
Storybook Docs: Document UI components automatically with stories and MDX
1,559 lines (1,531 loc) • 333 kB
JavaScript
import {
getControlId,
getControlSetterButtonId
} from "./_browser-chunks/chunk-DMNQCVA2.js";
import {
EmptyBlock,
Source,
curriedDarken$1,
curriedLighten$1,
curriedOpacify$1,
curriedTransparentize$1,
rgba
} from "./_browser-chunks/chunk-UZFOWTVP.js";
import {
__commonJS,
__name,
__require,
__toESM
} from "./_browser-chunks/chunk-MM7DTO55.js";
// ../../node_modules/memoizerific/memoizerific.js
var require_memoizerific = __commonJS({
"../../node_modules/memoizerific/memoizerific.js"(exports, module) {
(function(f2) {
if (typeof exports === "object" && typeof module !== "undefined") {
module.exports = f2();
} else if (typeof define === "function" && define.amd) {
define([], f2);
} else {
var g2;
if (typeof window !== "undefined") {
g2 = window;
} else if (typeof global !== "undefined") {
g2 = global;
} else if (typeof self !== "undefined") {
g2 = self;
} else {
g2 = this;
}
g2.memoizerific = f2();
}
})(function() {
var define2, module2, exports2;
return (/* @__PURE__ */ __name(function e2(t, n2, r2) {
function s2(o3, u2) {
if (!n2[o3]) {
if (!t[o3]) {
var a2 = typeof __require == "function" && __require;
if (!u2 && a2) return a2(o3, true);
if (i2) return i2(o3, true);
var f2 = new Error("Cannot find module '" + o3 + "'");
throw f2.code = "MODULE_NOT_FOUND", f2;
}
var l2 = n2[o3] = { exports: {} };
t[o3][0].call(l2.exports, function(e3) {
var n3 = t[o3][1][e3];
return s2(n3 ? n3 : e3);
}, l2, l2.exports, e2, t, n2, r2);
}
return n2[o3].exports;
}
__name(s2, "s");
var i2 = typeof __require == "function" && __require;
for (var o2 = 0; o2 < r2.length; o2++) s2(r2[o2]);
return s2;
}, "e"))({ 1: [function(_dereq_, module3, exports3) {
module3.exports = function(forceSimilar) {
if (typeof Map !== "function" || forceSimilar) {
var Similar = _dereq_("./similar");
return new Similar();
} else {
return /* @__PURE__ */ new Map();
}
};
}, { "./similar": 2 }], 2: [function(_dereq_, module3, exports3) {
function Similar() {
this.list = [];
this.lastItem = void 0;
this.size = 0;
return this;
}
__name(Similar, "Similar");
Similar.prototype.get = function(key) {
var index;
if (this.lastItem && this.isEqual(this.lastItem.key, key)) {
return this.lastItem.val;
}
index = this.indexOf(key);
if (index >= 0) {
this.lastItem = this.list[index];
return this.list[index].val;
}
return void 0;
};
Similar.prototype.set = function(key, val) {
var index;
if (this.lastItem && this.isEqual(this.lastItem.key, key)) {
this.lastItem.val = val;
return this;
}
index = this.indexOf(key);
if (index >= 0) {
this.lastItem = this.list[index];
this.list[index].val = val;
return this;
}
this.lastItem = { key, val };
this.list.push(this.lastItem);
this.size++;
return this;
};
Similar.prototype.delete = function(key) {
var index;
if (this.lastItem && this.isEqual(this.lastItem.key, key)) {
this.lastItem = void 0;
}
index = this.indexOf(key);
if (index >= 0) {
this.size--;
return this.list.splice(index, 1)[0];
}
return void 0;
};
Similar.prototype.has = function(key) {
var index;
if (this.lastItem && this.isEqual(this.lastItem.key, key)) {
return true;
}
index = this.indexOf(key);
if (index >= 0) {
this.lastItem = this.list[index];
return true;
}
return false;
};
Similar.prototype.forEach = function(callback, thisArg) {
var i2;
for (i2 = 0; i2 < this.size; i2++) {
callback.call(thisArg || this, this.list[i2].val, this.list[i2].key, this);
}
};
Similar.prototype.indexOf = function(key) {
var i2;
for (i2 = 0; i2 < this.size; i2++) {
if (this.isEqual(this.list[i2].key, key)) {
return i2;
}
}
return -1;
};
Similar.prototype.isEqual = function(val1, val2) {
return val1 === val2 || val1 !== val1 && val2 !== val2;
};
module3.exports = Similar;
}, {}], 3: [function(_dereq_, module3, exports3) {
var MapOrSimilar = _dereq_("map-or-similar");
module3.exports = function(limit) {
var cache = new MapOrSimilar(false), lru = [];
return function(fn) {
var memoizerific = /* @__PURE__ */ __name(function() {
var currentCache = cache, newMap, fnResult, argsLengthMinusOne = arguments.length - 1, lruPath = Array(argsLengthMinusOne + 1), isMemoized = true, i2;
if ((memoizerific.numArgs || memoizerific.numArgs === 0) && memoizerific.numArgs !== argsLengthMinusOne + 1) {
throw new Error("Memoizerific functions should always be called with the same number of arguments");
}
for (i2 = 0; i2 < argsLengthMinusOne; i2++) {
lruPath[i2] = {
cacheItem: currentCache,
arg: arguments[i2]
};
if (currentCache.has(arguments[i2])) {
currentCache = currentCache.get(arguments[i2]);
continue;
}
isMemoized = false;
newMap = new MapOrSimilar(false);
currentCache.set(arguments[i2], newMap);
currentCache = newMap;
}
if (isMemoized) {
if (currentCache.has(arguments[argsLengthMinusOne])) {
fnResult = currentCache.get(arguments[argsLengthMinusOne]);
} else {
isMemoized = false;
}
}
if (!isMemoized) {
fnResult = fn.apply(null, arguments);
currentCache.set(arguments[argsLengthMinusOne], fnResult);
}
if (limit > 0) {
lruPath[argsLengthMinusOne] = {
cacheItem: currentCache,
arg: arguments[argsLengthMinusOne]
};
if (isMemoized) {
moveToMostRecentLru(lru, lruPath);
} else {
lru.push(lruPath);
}
if (lru.length > limit) {
removeCachedResult(lru.shift());
}
}
memoizerific.wasMemoized = isMemoized;
memoizerific.numArgs = argsLengthMinusOne + 1;
return fnResult;
}, "memoizerific");
memoizerific.limit = limit;
memoizerific.wasMemoized = false;
memoizerific.cache = cache;
memoizerific.lru = lru;
return memoizerific;
};
};
function moveToMostRecentLru(lru, lruPath) {
var lruLen = lru.length, lruPathLen = lruPath.length, isMatch, i2, ii;
for (i2 = 0; i2 < lruLen; i2++) {
isMatch = true;
for (ii = 0; ii < lruPathLen; ii++) {
if (!isEqual(lru[i2][ii].arg, lruPath[ii].arg)) {
isMatch = false;
break;
}
}
if (isMatch) {
break;
}
}
lru.push(lru.splice(i2, 1)[0]);
}
__name(moveToMostRecentLru, "moveToMostRecentLru");
function removeCachedResult(removedLru) {
var removedLruLen = removedLru.length, currentLru = removedLru[removedLruLen - 1], tmp, i2;
currentLru.cacheItem.delete(currentLru.arg);
for (i2 = removedLruLen - 2; i2 >= 0; i2--) {
currentLru = removedLru[i2];
tmp = currentLru.cacheItem.get(currentLru.arg);
if (!tmp || !tmp.size) {
currentLru.cacheItem.delete(currentLru.arg);
} else {
break;
}
}
}
__name(removeCachedResult, "removeCachedResult");
function isEqual(val1, val2) {
return val1 === val2 || val1 !== val1 && val2 !== val2;
}
__name(isEqual, "isEqual");
}, { "map-or-similar": 1 }] }, {}, [3])(3);
});
}
});
// src/blocks/components/ArgsTable/ArgsTable.tsx
import React34 from "react";
import { once } from "storybook/internal/client-logger";
import { IconButton as IconButton3, Link as Link3, ResetWrapper as ResetWrapper3 } from "storybook/internal/components";
import { includeConditionalArg } from "storybook/internal/csf";
import { DocumentIcon as DocumentIcon2, UndoIcon } from "@storybook/icons";
// ../../node_modules/es-toolkit/dist/predicate/isPrimitive.mjs
function isPrimitive(value2) {
return value2 == null || typeof value2 !== "object" && typeof value2 !== "function";
}
__name(isPrimitive, "isPrimitive");
// ../../node_modules/es-toolkit/dist/predicate/isTypedArray.mjs
function isTypedArray(x2) {
return ArrayBuffer.isView(x2) && !(x2 instanceof DataView);
}
__name(isTypedArray, "isTypedArray");
// ../../node_modules/es-toolkit/dist/compat/_internal/getSymbols.mjs
function getSymbols(object2) {
return Object.getOwnPropertySymbols(object2).filter((symbol) => Object.prototype.propertyIsEnumerable.call(object2, symbol));
}
__name(getSymbols, "getSymbols");
// ../../node_modules/es-toolkit/dist/compat/_internal/getTag.mjs
function getTag(value2) {
if (value2 == null) {
return value2 === void 0 ? "[object Undefined]" : "[object Null]";
}
return Object.prototype.toString.call(value2);
}
__name(getTag, "getTag");
// ../../node_modules/es-toolkit/dist/compat/_internal/tags.mjs
var regexpTag = "[object RegExp]";
var stringTag = "[object String]";
var numberTag = "[object Number]";
var booleanTag = "[object Boolean]";
var argumentsTag = "[object Arguments]";
var symbolTag = "[object Symbol]";
var dateTag = "[object Date]";
var mapTag = "[object Map]";
var setTag = "[object Set]";
var arrayTag = "[object Array]";
var arrayBufferTag = "[object ArrayBuffer]";
var objectTag = "[object Object]";
var dataViewTag = "[object DataView]";
var uint8ArrayTag = "[object Uint8Array]";
var uint8ClampedArrayTag = "[object Uint8ClampedArray]";
var uint16ArrayTag = "[object Uint16Array]";
var uint32ArrayTag = "[object Uint32Array]";
var int8ArrayTag = "[object Int8Array]";
var int16ArrayTag = "[object Int16Array]";
var int32ArrayTag = "[object Int32Array]";
var float32ArrayTag = "[object Float32Array]";
var float64ArrayTag = "[object Float64Array]";
// ../../node_modules/es-toolkit/dist/object/cloneDeepWith.mjs
function cloneDeepWithImpl(valueToClone, keyToClone, objectToClone, stack = /* @__PURE__ */ new Map(), cloneValue = void 0) {
const cloned = cloneValue?.(valueToClone, keyToClone, objectToClone, stack);
if (cloned !== void 0) {
return cloned;
}
if (isPrimitive(valueToClone)) {
return valueToClone;
}
if (stack.has(valueToClone)) {
return stack.get(valueToClone);
}
if (Array.isArray(valueToClone)) {
const result = new Array(valueToClone.length);
stack.set(valueToClone, result);
for (let i2 = 0; i2 < valueToClone.length; i2++) {
result[i2] = cloneDeepWithImpl(valueToClone[i2], i2, objectToClone, stack, cloneValue);
}
if (Object.hasOwn(valueToClone, "index")) {
result.index = valueToClone.index;
}
if (Object.hasOwn(valueToClone, "input")) {
result.input = valueToClone.input;
}
return result;
}
if (valueToClone instanceof Date) {
return new Date(valueToClone.getTime());
}
if (valueToClone instanceof RegExp) {
const result = new RegExp(valueToClone.source, valueToClone.flags);
result.lastIndex = valueToClone.lastIndex;
return result;
}
if (valueToClone instanceof Map) {
const result = /* @__PURE__ */ new Map();
stack.set(valueToClone, result);
for (const [key, value2] of valueToClone) {
result.set(key, cloneDeepWithImpl(value2, key, objectToClone, stack, cloneValue));
}
return result;
}
if (valueToClone instanceof Set) {
const result = /* @__PURE__ */ new Set();
stack.set(valueToClone, result);
for (const value2 of valueToClone) {
result.add(cloneDeepWithImpl(value2, void 0, objectToClone, stack, cloneValue));
}
return result;
}
if (typeof Buffer !== "undefined" && Buffer.isBuffer(valueToClone)) {
return valueToClone.subarray();
}
if (isTypedArray(valueToClone)) {
const result = new (Object.getPrototypeOf(valueToClone)).constructor(valueToClone.length);
stack.set(valueToClone, result);
for (let i2 = 0; i2 < valueToClone.length; i2++) {
result[i2] = cloneDeepWithImpl(valueToClone[i2], i2, objectToClone, stack, cloneValue);
}
return result;
}
if (valueToClone instanceof ArrayBuffer || typeof SharedArrayBuffer !== "undefined" && valueToClone instanceof SharedArrayBuffer) {
return valueToClone.slice(0);
}
if (valueToClone instanceof DataView) {
const result = new DataView(valueToClone.buffer.slice(0), valueToClone.byteOffset, valueToClone.byteLength);
stack.set(valueToClone, result);
copyProperties(result, valueToClone, objectToClone, stack, cloneValue);
return result;
}
if (typeof File !== "undefined" && valueToClone instanceof File) {
const result = new File([valueToClone], valueToClone.name, {
type: valueToClone.type
});
stack.set(valueToClone, result);
copyProperties(result, valueToClone, objectToClone, stack, cloneValue);
return result;
}
if (valueToClone instanceof Blob) {
const result = new Blob([valueToClone], { type: valueToClone.type });
stack.set(valueToClone, result);
copyProperties(result, valueToClone, objectToClone, stack, cloneValue);
return result;
}
if (valueToClone instanceof Error) {
const result = new valueToClone.constructor();
stack.set(valueToClone, result);
result.message = valueToClone.message;
result.name = valueToClone.name;
result.stack = valueToClone.stack;
result.cause = valueToClone.cause;
copyProperties(result, valueToClone, objectToClone, stack, cloneValue);
return result;
}
if (typeof valueToClone === "object" && isCloneableObject(valueToClone)) {
const result = Object.create(Object.getPrototypeOf(valueToClone));
stack.set(valueToClone, result);
copyProperties(result, valueToClone, objectToClone, stack, cloneValue);
return result;
}
return valueToClone;
}
__name(cloneDeepWithImpl, "cloneDeepWithImpl");
function copyProperties(target, source, objectToClone = target, stack, cloneValue) {
const keys = [...Object.keys(source), ...getSymbols(source)];
for (let i2 = 0; i2 < keys.length; i2++) {
const key = keys[i2];
const descriptor = Object.getOwnPropertyDescriptor(target, key);
if (descriptor == null || descriptor.writable) {
target[key] = cloneDeepWithImpl(source[key], key, objectToClone, stack, cloneValue);
}
}
}
__name(copyProperties, "copyProperties");
function isCloneableObject(object2) {
switch (getTag(object2)) {
case argumentsTag:
case arrayTag:
case arrayBufferTag:
case dataViewTag:
case booleanTag:
case dateTag:
case float32ArrayTag:
case float64ArrayTag:
case int8ArrayTag:
case int16ArrayTag:
case int32ArrayTag:
case mapTag:
case numberTag:
case objectTag:
case regexpTag:
case setTag:
case stringTag:
case symbolTag:
case uint8ArrayTag:
case uint8ClampedArrayTag:
case uint16ArrayTag:
case uint32ArrayTag: {
return true;
}
default: {
return false;
}
}
}
__name(isCloneableObject, "isCloneableObject");
// ../../node_modules/es-toolkit/dist/object/cloneDeep.mjs
function cloneDeep(obj) {
return cloneDeepWithImpl(obj, void 0, obj, /* @__PURE__ */ new Map(), void 0);
}
__name(cloneDeep, "cloneDeep");
// ../../node_modules/es-toolkit/dist/object/pickBy.mjs
function pickBy(obj, shouldPick) {
const result = {};
const keys = Object.keys(obj);
for (let i2 = 0; i2 < keys.length; i2++) {
const key = keys[i2];
const value2 = obj[key];
if (shouldPick(value2, key)) {
result[key] = value2;
}
}
return result;
}
__name(pickBy, "pickBy");
// ../../node_modules/es-toolkit/dist/string/words.mjs
var CASE_SPLIT_PATTERN = new RegExp("\\p{Lu}?\\p{Ll}+|[0-9]+|\\p{Lu}+(?!\\p{Ll})|\\p{Emoji_Presentation}|\\p{Extended_Pictographic}|\\p{L}+", "gu");
// src/blocks/components/ArgsTable/ArgsTable.tsx
import { styled as styled26 } from "storybook/theming";
// src/blocks/components/DocsPage.tsx
import React from "react";
import { withReset } from "storybook/internal/components";
import { styled } from "storybook/theming";
var toGlobalSelector = /* @__PURE__ */ __name((element) => `& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`, "toGlobalSelector");
var breakpoint = 600;
var Title = styled.h1(withReset, ({ theme }) => ({
color: theme.color.defaultText,
fontSize: theme.typography.size.m3,
fontWeight: theme.typography.weight.bold,
lineHeight: "32px",
[`@media (min-width: ${breakpoint}px)`]: {
fontSize: theme.typography.size.l1,
lineHeight: "36px",
marginBottom: "16px"
}
}));
var Subtitle = styled.h2(withReset, ({ theme }) => ({
fontWeight: theme.typography.weight.regular,
fontSize: theme.typography.size.s3,
lineHeight: "20px",
borderBottom: "none",
marginBottom: 15,
[`@media (min-width: ${breakpoint}px)`]: {
fontSize: theme.typography.size.m1,
lineHeight: "28px",
marginBottom: 24
},
color: curriedTransparentize$1(0.25, theme.color.defaultText)
}));
var DocsContent = styled.div(({ theme }) => {
const reset = {
fontFamily: theme.typography.fonts.base,
fontSize: theme.typography.size.s3,
margin: 0,
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
WebkitOverflowScrolling: "touch"
};
const headers = {
margin: "20px 0 8px",
padding: 0,
cursor: "text",
position: "relative",
color: theme.color.defaultText,
"&:first-of-type": {
marginTop: 0,
paddingTop: 0
},
"&:hover a.anchor": {
textDecoration: "none"
},
"& code": {
fontSize: "inherit"
}
};
const code = {
lineHeight: 1,
margin: "0 2px",
padding: "3px 5px",
whiteSpace: "nowrap",
borderRadius: 3,
fontSize: theme.typography.size.s2 - 1,
border: theme.base === "light" ? `1px solid ${theme.color.mediumlight}` : `1px solid ${theme.color.darker}`,
color: theme.base === "light" ? curriedTransparentize$1(0.1, theme.color.defaultText) : curriedTransparentize$1(0.3, theme.color.defaultText),
backgroundColor: theme.base === "light" ? theme.color.lighter : theme.color.border
};
return {
maxWidth: 1e3,
width: "100%",
minWidth: 0,
[toGlobalSelector("a")]: {
...reset,
fontSize: "inherit",
lineHeight: "24px",
color: theme.color.secondary,
textDecoration: "none",
"&.absent": {
color: "#cc0000"
},
"&.anchor": {
display: "block",
paddingLeft: 30,
marginLeft: -30,
cursor: "pointer",
position: "absolute",
top: 0,
left: 0,
bottom: 0
}
},
[toGlobalSelector("blockquote")]: {
...reset,
margin: "16px 0",
borderLeft: `4px solid ${theme.color.medium}`,
padding: "0 15px",
color: theme.color.dark,
"& > :first-of-type": {
marginTop: 0
},
"& > :last-child": {
marginBottom: 0
}
},
[toGlobalSelector("div")]: reset,
[toGlobalSelector("dl")]: {
...reset,
margin: "16px 0",
padding: 0,
"& dt": {
fontSize: "14px",
fontWeight: "bold",
fontStyle: "italic",
padding: 0,
margin: "16px 0 4px"
},
"& dt:first-of-type": {
padding: 0
},
"& dt > :first-of-type": {
marginTop: 0
},
"& dt > :last-child": {
marginBottom: 0
},
"& dd": {
margin: "0 0 16px",
padding: "0 15px"
},
"& dd > :first-of-type": {
marginTop: 0
},
"& dd > :last-child": {
marginBottom: 0
}
},
[toGlobalSelector("h1")]: {
...reset,
...headers,
fontSize: `${theme.typography.size.l1}px`,
fontWeight: theme.typography.weight.bold
},
[toGlobalSelector("h2")]: {
...reset,
...headers,
fontSize: `${theme.typography.size.m2}px`,
paddingBottom: 4,
borderBottom: `1px solid ${theme.appBorderColor}`
},
[toGlobalSelector("h3")]: {
...reset,
...headers,
fontSize: `${theme.typography.size.m1}px`,
fontWeight: theme.typography.weight.bold
},
[toGlobalSelector("h4")]: {
...reset,
...headers,
fontSize: `${theme.typography.size.s3}px`
},
[toGlobalSelector("h5")]: {
...reset,
...headers,
fontSize: `${theme.typography.size.s2}px`
},
[toGlobalSelector("h6")]: {
...reset,
...headers,
fontSize: `${theme.typography.size.s2}px`,
color: theme.color.dark
},
[toGlobalSelector("hr")]: {
border: "0 none",
borderTop: `1px solid ${theme.appBorderColor}`,
height: 4,
padding: 0
},
[toGlobalSelector("img")]: {
maxWidth: "100%"
},
[toGlobalSelector("li")]: {
...reset,
fontSize: theme.typography.size.s2,
color: theme.color.defaultText,
lineHeight: "24px",
"& + li": {
marginTop: ".25em"
},
"& ul, & ol": {
marginTop: ".25em",
marginBottom: 0
},
"& code": code
},
[toGlobalSelector("ol")]: {
...reset,
margin: "16px 0",
paddingLeft: 30,
"& :first-of-type": {
marginTop: 0
},
"& :last-child": {
marginBottom: 0
}
},
[toGlobalSelector("p")]: {
...reset,
margin: "16px 0",
fontSize: theme.typography.size.s2,
lineHeight: "24px",
color: theme.color.defaultText,
"& code": code
},
[toGlobalSelector("pre")]: {
...reset,
// reset
fontFamily: theme.typography.fonts.mono,
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
lineHeight: "18px",
padding: "11px 1rem",
whiteSpace: "pre-wrap",
color: "inherit",
borderRadius: 3,
margin: "1rem 0",
"&:not(.prismjs)": {
background: "transparent",
border: "none",
borderRadius: 0,
padding: 0,
margin: 0
},
"& pre, &.prismjs": {
padding: 15,
margin: 0,
whiteSpace: "pre-wrap",
color: "inherit",
fontSize: "13px",
lineHeight: "19px",
code: {
color: "inherit",
fontSize: "inherit"
}
},
"& code": {
whiteSpace: "pre"
},
"& code, & tt": {
border: "none"
}
},
[toGlobalSelector("span")]: {
...reset,
"&.frame": {
display: "block",
overflow: "hidden",
"& > span": {
border: `1px solid ${theme.color.medium}`,
display: "block",
float: "left",
overflow: "hidden",
margin: "13px 0 0",
padding: 7,
width: "auto"
},
"& span img": {
display: "block",
float: "left"
},
"& span span": {
clear: "both",
color: theme.color.darkest,
display: "block",
padding: "5px 0 0"
}
},
"&.align-center": {
display: "block",
overflow: "hidden",
clear: "both",
"& > span": {
display: "block",
overflow: "hidden",
margin: "13px auto 0",
textAlign: "center"
},
"& span img": {
margin: "0 auto",
textAlign: "center"
}
},
"&.align-right": {
display: "block",
overflow: "hidden",
clear: "both",
"& > span": {
display: "block",
overflow: "hidden",
margin: "13px 0 0",
textAlign: "right"
},
"& span img": {
margin: 0,
textAlign: "right"
}
},
"&.float-left": {
display: "block",
marginRight: 13,
overflow: "hidden",
float: "left",
"& span": {
margin: "13px 0 0"
}
},
"&.float-right": {
display: "block",
marginLeft: 13,
overflow: "hidden",
float: "right",
"& > span": {
display: "block",
overflow: "hidden",
margin: "13px auto 0",
textAlign: "right"
}
}
},
[toGlobalSelector("table")]: {
...reset,
margin: "16px 0",
fontSize: theme.typography.size.s2,
lineHeight: "24px",
padding: 0,
borderCollapse: "collapse",
"& tr": {
borderTop: `1px solid ${theme.appBorderColor}`,
backgroundColor: theme.appContentBg,
margin: 0,
padding: 0
},
"& tr:nth-of-type(2n)": {
backgroundColor: theme.base === "dark" ? theme.color.darker : theme.color.lighter
},
"& tr th": {
fontWeight: "bold",
color: theme.color.defaultText,
border: `1px solid ${theme.appBorderColor}`,
margin: 0,
padding: "6px 13px"
},
"& tr td": {
border: `1px solid ${theme.appBorderColor}`,
color: theme.color.defaultText,
margin: 0,
padding: "6px 13px"
},
"& tr th :first-of-type, & tr td :first-of-type": {
marginTop: 0
},
"& tr th :last-child, & tr td :last-child": {
marginBottom: 0
}
},
[toGlobalSelector("ul")]: {
...reset,
margin: "16px 0",
paddingLeft: 30,
"& :first-of-type": {
marginTop: 0
},
"& :last-child": {
marginBottom: 0
},
listStyle: "disc"
}
};
});
var DocsWrapper = styled.div(({ theme }) => ({
background: theme.background.content,
display: "flex",
flexDirection: "row-reverse",
justifyContent: "center",
padding: "4rem 20px",
minHeight: "100vh",
boxSizing: "border-box",
gap: "3rem",
[`@media (min-width: ${breakpoint}px)`]: {}
}));
var DocsPageWrapper = /* @__PURE__ */ __name(({ children, toc }) => React.createElement(DocsWrapper, { className: "sbdocs sbdocs-wrapper" }, toc, React.createElement(DocsContent, { className: "sbdocs sbdocs-content" }, children)), "DocsPageWrapper");
// src/blocks/components/Preview.tsx
import React6, { Children, useCallback, useContext as useContext2, useState as useState3 } from "react";
import { ActionBar, Zoom } from "storybook/internal/components";
import { styled as styled4 } from "storybook/theming";
// src/blocks/blocks/DocsContext.ts
import { createContext } from "react";
if (globalThis && globalThis.__DOCS_CONTEXT__ === void 0) {
globalThis.__DOCS_CONTEXT__ = createContext(null);
globalThis.__DOCS_CONTEXT__.displayName = "DocsContext";
}
var DocsContext = globalThis ? globalThis.__DOCS_CONTEXT__ : createContext(null);
// src/blocks/blocks/Story.tsx
import React2, { useContext } from "react";
// src/blocks/blocks/useStory.ts
import { useEffect, useState } from "react";
function useStory(storyId, context) {
const stories = useStories([storyId], context);
return stories && stories[0];
}
__name(useStory, "useStory");
function useStories(storyIds, context) {
const [storiesById, setStories] = useState({});
useEffect(() => {
Promise.all(
storyIds.map(async (storyId) => {
const story = await context.loadStory(storyId);
setStories(
(current) => current[storyId] === story ? current : { ...current, [storyId]: story }
);
})
);
});
return storyIds.map((storyId) => {
if (storiesById[storyId]) {
return storiesById[storyId];
}
try {
return context.storyById(storyId);
} catch (err) {
return void 0;
}
});
}
__name(useStories, "useStories");
// src/blocks/blocks/Story.tsx
var getStoryId = /* @__PURE__ */ __name((props, context) => {
const { of, meta } = props;
if ("of" in props && of === void 0) {
throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
}
if (meta) {
context.referenceMeta(meta, false);
}
const resolved = context.resolveOf(of || "story", ["story"]);
return resolved.story.id;
}, "getStoryId");
var getStoryProps = /* @__PURE__ */ __name((props, story, context) => {
const { parameters = {} } = story || {};
const { docs = {} } = parameters;
const storyParameters = docs.story || {};
if (docs.disable) {
return null;
}
const inline = props.inline ?? storyParameters.inline ?? false;
if (inline) {
const height2 = props.height ?? storyParameters.height;
const autoplay = props.autoplay ?? storyParameters.autoplay ?? false;
return {
story,
inline: true,
height: height2,
autoplay,
forceInitialArgs: !!props.__forceInitialArgs,
primary: !!props.__primary,
renderStoryToElement: context.renderStoryToElement
};
}
const height = props.height ?? storyParameters.height ?? storyParameters.iframeHeight ?? "100px";
return {
story,
inline: false,
height,
primary: !!props.__primary
};
}, "getStoryProps");
var Story2 = /* @__PURE__ */ __name((props = { __forceInitialArgs: false, __primary: false }) => {
const context = useContext(DocsContext);
const storyId = getStoryId(props, context);
const story = useStory(storyId, context);
if (!story) {
return React2.createElement(StorySkeleton, null);
}
const storyProps = getStoryProps(props, story, context);
if (!storyProps) {
return null;
}
return React2.createElement(Story, { ...storyProps });
}, "Story");
// src/blocks/components/BlockBackgroundStyles.tsx
var getBlockBackgroundStyle = /* @__PURE__ */ __name((theme) => ({
borderRadius: theme.appBorderRadius,
background: theme.background.content,
boxShadow: theme.base === "light" ? "rgba(0, 0, 0, 0.10) 0 1px 3px 0" : "rgba(0, 0, 0, 0.20) 0 2px 5px 0",
border: `1px solid ${theme.appBorderColor}`
}), "getBlockBackgroundStyle");
// src/blocks/components/Story.tsx
import React4, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
import { ErrorFormatter, Loader, getStoryHref } from "storybook/internal/components";
import { styled as styled2 } from "storybook/theming";
// src/blocks/components/IFrame.tsx
import React3, { Component } from "react";
var { window: globalWindow } = globalThis;
var _IFrame = class _IFrame extends Component {
constructor() {
super(...arguments);
this.iframe = null;
}
componentDidMount() {
const { id } = this.props;
this.iframe = globalWindow.document.getElementById(id);
}
shouldComponentUpdate(nextProps) {
const { scale } = nextProps;
if (scale !== this.props.scale) {
this.setIframeBodyStyle({
width: `${scale * 100}%`,
height: `${scale * 100}%`,
transform: `scale(${1 / scale})`,
transformOrigin: "top left"
});
}
return false;
}
setIframeBodyStyle(style) {
return Object.assign(this.iframe.contentDocument.body.style, style);
}
render() {
const { id, title, src, allowFullScreen, scale, ...rest } = this.props;
return React3.createElement(
"iframe",
{
id,
title,
src,
...allowFullScreen ? { allow: "fullscreen" } : {},
loading: "lazy",
...rest
}
);
}
};
__name(_IFrame, "IFrame");
var IFrame = _IFrame;
// src/blocks/components/ZoomContext.tsx
import { createContext as createContext2 } from "react";
var ZoomContext = createContext2({
scale: 1
});
// src/blocks/components/Story.tsx
var { PREVIEW_URL } = globalThis;
var BASE_URL = PREVIEW_URL || "iframe.html";
var storyBlockIdFromId = /* @__PURE__ */ __name(({ story, primary }) => `story--${story.id}${primary ? "--primary" : ""}`, "storyBlockIdFromId");
var InlineStory = /* @__PURE__ */ __name((props) => {
const storyRef = useRef();
const [showLoader, setShowLoader] = useState2(true);
const [error, setError] = useState2();
const { story, height, autoplay, forceInitialArgs, renderStoryToElement } = props;
useEffect2(() => {
if (!(story && storyRef.current)) {
return () => {
};
}
const element = storyRef.current;
const cleanup = renderStoryToElement(
story,
element,
{
showMain: /* @__PURE__ */ __name(() => {
}, "showMain"),
showError: /* @__PURE__ */ __name(({ title, description }) => setError(new Error(`${title} - ${description}`)), "showError"),
showException: /* @__PURE__ */ __name((err) => setError(err), "showException")
},
{ autoplay, forceInitialArgs }
);
setShowLoader(false);
return () => {
Promise.resolve().then(() => cleanup());
};
}, [autoplay, renderStoryToElement, story]);
if (error) {
return React4.createElement("pre", null, React4.createElement(ErrorFormatter, { error }));
}
return React4.createElement(React4.Fragment, null, height ? React4.createElement("style", null, `#${storyBlockIdFromId(
props
)} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && React4.createElement(StorySkeleton, null), React4.createElement("div", { ref: storyRef, id: `${storyBlockIdFromId(props)}-inner`, "data-name": story.name }));
}, "InlineStory");
var IFrameStory = /* @__PURE__ */ __name(({ story, height = "500px" }) => React4.createElement("div", { style: { width: "100%", height } }, React4.createElement(ZoomContext.Consumer, null, ({ scale }) => {
return React4.createElement(
IFrame,
{
key: "iframe",
id: `iframe--${story.id}`,
title: story.name,
src: getStoryHref(BASE_URL, story.id, { viewMode: "story" }),
allowFullScreen: true,
scale,
style: {
width: "100%",
height: "100%",
border: "0 none"
}
}
);
})), "IFrameStory");
var ErrorMessage = styled2.strong(({ theme }) => ({
color: theme.color.orange
}));
var Story = /* @__PURE__ */ __name((props) => {
const { inline, story } = props;
if (inline && !props.autoplay && story.usesMount) {
return React4.createElement(ErrorMessage, null, "This story mounts inside of play. Set", " ", React4.createElement("a", { href: "https://storybook.js.org/docs/api/doc-blocks/doc-block-story?ref=ui#autoplay" }, "autoplay"), " ", "to true to view this story.");
}
return React4.createElement("div", { id: storyBlockIdFromId(props), className: "sb-story sb-unstyled", "data-story-block": "true" }, inline ? React4.createElement(InlineStory, { ...props }) : React4.createElement(IFrameStory, { ...props }));
}, "Story");
var StorySkeleton = /* @__PURE__ */ __name(() => React4.createElement(Loader, null), "StorySkeleton");
// src/blocks/components/Toolbar.tsx
import React5 from "react";
import { FlexBar, IconButton, getStoryHref as getStoryHref2 } from "storybook/internal/components";
import { ShareAltIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon } from "@storybook/icons";
import { styled as styled3 } from "storybook/theming";
var Bar = styled3(FlexBar)({
position: "absolute",
left: 0,
right: 0,
top: 0,
transition: "transform .2s linear"
});
var Wrapper = styled3.div({
display: "flex",
alignItems: "center",
gap: 4
});
var IconPlaceholder = styled3.div(({ theme }) => ({
width: 14,
height: 14,
borderRadius: 2,
margin: "0 7px",
backgroundColor: theme.appBorderColor,
animation: `${theme.animation.glow} 1.5s ease-in-out infinite`
}));
var Toolbar = /* @__PURE__ */ __name(({
isLoading,
storyId,
baseUrl,
zoom,
resetZoom,
...rest
}) => React5.createElement(Bar, { ...rest }, React5.createElement(Wrapper, { key: "left" }, isLoading ? [1, 2, 3].map((key) => React5.createElement(IconPlaceholder, { key })) : React5.createElement(React5.Fragment, null, React5.createElement(
IconButton,
{
key: "zoomin",
onClick: (e2) => {
e2.preventDefault();
zoom(0.8);
},
title: "Zoom in"
},
React5.createElement(ZoomIcon, null)
), React5.createElement(
IconButton,
{
key: "zoomout",
onClick: (e2) => {
e2.preventDefault();
zoom(1.25);
},
title: "Zoom out"
},
React5.createElement(ZoomOutIcon, null)
), React5.createElement(
IconButton,
{
key: "zoomreset",
onClick: (e2) => {
e2.preventDefault();
resetZoom();
},
title: "Reset zoom"
},
React5.createElement(ZoomResetIcon, null)
))), isLoading ? React5.createElement(Wrapper, { key: "right" }, React5.createElement(IconPlaceholder, null)) : baseUrl && storyId && React5.createElement(Wrapper, { key: "right" }, React5.createElement(IconButton, { key: "opener", asChild: true }, React5.createElement(
"a",
{
href: getStoryHref2(baseUrl, storyId),
target: "_blank",
rel: "noopener noreferrer",
"aria-label": "Open canvas in new tab"
},
React5.createElement(ShareAltIcon, null)
)))), "Toolbar");
// src/blocks/components/Preview.tsx
var ChildrenContainer = styled4.div(
({ isColumn, columns, layout }) => ({
display: isColumn || !columns ? "block" : "flex",
position: "relative",
flexWrap: "wrap",
overflow: "auto",
flexDirection: isColumn ? "column" : "row",
"& .innerZoomElementWrapper > *": isColumn ? {
width: layout !== "fullscreen" ? "calc(100% - 20px)" : "100%",
display: "block"
} : {
maxWidth: layout !== "fullscreen" ? "calc(100% - 20px)" : "100%",
display: "inline-block"
}
}),
({ layout = "padded", inline }) => layout === "centered" || layout === "padded" ? {
padding: inline ? "32px 22px" : "0px",
"& .innerZoomElementWrapper > *": {
width: "auto",
border: "8px solid transparent!important"
}
} : {},
({ layout = "padded", inline }) => layout === "centered" && inline ? {
display: "flex",
justifyContent: "center",
justifyItems: "center",
alignContent: "center",
alignItems: "center"
} : {},
({ columns }) => columns && columns > 1 ? { ".innerZoomElementWrapper > *": { minWidth: `calc(100% / ${columns} - 20px)` } } : {}
);
var StyledSource = styled4(Source)(({ theme }) => ({
margin: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomLeftRadius: theme.appBorderRadius,
borderBottomRightRadius: theme.appBorderRadius,
border: "none",
background: theme.base === "light" ? "rgba(0, 0, 0, 0.85)" : curriedDarken$1(0.05, theme.background.content),
color: theme.color.lightest,
button: {
background: theme.base === "light" ? "rgba(0, 0, 0, 0.85)" : curriedDarken$1(0.05, theme.background.content)
}
}));
var PreviewContainer = styled4.div(
({ theme, withSource, isExpanded }) => ({
position: "relative",
overflow: "hidden",
margin: "25px 0 40px",
...getBlockBackgroundStyle(theme),
borderBottomLeftRadius: withSource && isExpanded && 0,
borderBottomRightRadius: withSource && isExpanded && 0,
borderBottomWidth: isExpanded && 0,
"h3 + &": {
marginTop: "16px"
}
}),
({ withToolbar }) => withToolbar && { paddingTop: 40 }
);
var getSource = /* @__PURE__ */ __name((withSource, expanded, setExpanded) => {
switch (true) {
case !!(withSource && withSource.error): {
return {
source: null,
actionItem: {
title: "No code available",
className: "docblock-code-toggle docblock-code-toggle--disabled",
disabled: true,
onClick: /* @__PURE__ */ __name(() => setExpanded(false), "onClick")
}
};
}
case expanded: {
return {
source: React6.createElement(StyledSource, { ...withSource, dark: true }),
actionItem: {
title: "Hide code",
className: "docblock-code-toggle docblock-code-toggle--expanded",
onClick: /* @__PURE__ */ __name(() => setExpanded(false), "onClick")
}
};
}
default: {
return {
source: React6.createElement(StyledSource, { ...withSource, dark: true }),
actionItem: {
title: "Show code",
className: "docblock-code-toggle",
onClick: /* @__PURE__ */ __name(() => setExpanded(true), "onClick")
}
};
}
}
}, "getSource");
function getChildProps(children) {
if (Children.count(children) === 1) {
const elt = children;
if (elt.props) {
return elt.props;
}
}
return null;
}
__name(getChildProps, "getChildProps");
var PositionedToolbar = styled4(Toolbar)({
position: "absolute",
top: 0,
left: 0,
right: 0,
height: 40
});
var Relative = styled4.div({
overflow: "hidden",
position: "relative"
});
var Preview = /* @__PURE__ */ __name(({
isLoading,
isColumn,
columns,
children,
withSource,
withToolbar = false,
isExpanded = false,
additionalActions,
className,
layout = "padded",
inline = false,
...props
}) => {
const [expanded, setExpanded] = useState3(isExpanded);
const { source, actionItem } = getSource(withSource, expanded, setExpanded);
const [scale, setScale] = useState3(1);
const previewClasses = [className].concat(["sbdocs", "sbdocs-preview", "sb-unstyled"]);
const defaultActionItems = withSource ? [actionItem] : [];
const [additionalActionItems, setAdditionalActionItems] = useState3(
additionalActions ? [...additionalActions] : []
);
const actionItems = [...defaultActionItems, ...additionalActionItems];
const { window: globalWindow4 } = globalThis;
const context = useContext2(DocsContext);
const copyToClipboard = useCallback(async (text) => {
const { createCopyToClipboardFunction } = await import("storybook/internal/components");
createCopyToClipboardFunction();
}, []);
const onCopyCapture = /* @__PURE__ */ __name((e2) => {
const selection = globalWindow4.getSelection();
if (selection && selection.type === "Range") {
return;
}
e2.preventDefault();
if (additionalActionItems.filter((item) => item.title === "Copied").length === 0) {
copyToClipboard(source?.props.code ?? "").then(() => {
setAdditionalActionItems([
...additionalActionItems,
{
title: "Copied",
onClick: /* @__PURE__ */ __name(() => {
}, "onClick")
}
]);
globalWindow4.setTimeout(
() => setAdditionalActionItems(
additionalActionItems.filter((item) => item.title !== "Copied")
),
1500
);
});
}
}, "onCopyCapture");
const childProps = getChildProps(children);
return React6.createElement(
PreviewContainer,
{
...{ withSource, withToolbar },
...props,
className: previewClasses.join(" ")
},
withToolbar && React6.createElement(
PositionedToolbar,
{
isLoading,
border: true,
zoom: (z2) => setScale(scale * z2),
resetZoom: () => setScale(1),
storyId: !isLoading && childProps ? getStoryId(childProps, context) : void 0,
baseUrl: "./iframe.html"
}
),
React6.createElement(ZoomContext.Provider, { value: { scale } }, React6.createElement(Relative, { className: "docs-story", onCopyCapture: withSource && onCopyCapture }, React6.createElement(
ChildrenContainer,
{
isColumn: isColumn || !Array.isArray(children),
columns,
layout,
inline
},
React6.createElement(Zoom.Element, { centered: layout === "centered", scale: inline ? scale : 1 }, Array.isArray(children) ? children.map((child, i2) => React6.createElement("div", { key: i2 }, child)) : React6.createElement("div", null, children))
), React6.createElement(ActionBar, { actionItems }))),
withSource && expanded && source
);
}, "Preview");
var StyledPreview = styled4(Preview)(() => ({
".docs-story": {
paddingTop: 32,
paddingBottom: 40
}
}));
// src/blocks/components/ArgsTable/TabbedArgsTable.tsx
import React7 from "react";
import { TabsState } from "storybook/internal/components";
var TabbedArgsTable = /* @__PURE__ */ __name(({ tabs, ...props }) => {
const entries = Object.entries(tabs);
if (entries.length === 1) {
return React7.createElement(ArgsTable, { ...entries[0][1], ...props });
}
return React7.createElement(TabsState, null, entries.map((entry, index) => {
const [label, table] = entry;
const id = `prop_table_div_${label}`;
const Component4 = "div";
const argsTableProps = index === 0 ? props : { sort: props.sort };
return React7.createElement(Component4, { key: id, id, title: label }, ({ active }) => active ? React7.createElement(ArgsTable, { key: `prop_table_${label}`, ...table, ...argsTableProps }) : null);
}));
}, "TabbedArgsTable");
// src/blocks/components/Typeset.tsx
import React8 from "react";
import { withReset as withReset2 } from "storybook/internal/components";
import { styled as styled5 } from "storybook/theming";
var Label = styled5.div(({ theme }) => ({
marginRight: 30,
fontSize: `${theme.typography.size.s1}px`,
color: theme.base === "light" ? curriedTransparentize$1(0.4, theme.color.defaultText) : curriedTransparentize$1(0.6, theme.color.defaultText)
}));
var Sample = styled5.div({
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis"
});
var TypeSpecimen = styled5.div({
display: "flex",
flexDirection: "row",
alignItems: "baseline",
"&:not(:last-child)": { marginBottom: "1rem" }
});
var Wrapper2 = styled5.div(withReset2, ({ theme }) => ({
...getBlockBackgroundStyle(theme),
margin: "25px 0 40px",
padding: "30px 20px"
}));
var Typeset = /* @__PURE__ */ __name(({
fontFamily,
fontSizes,
fontWeight,
sampleText,
...props
}) => React8.createElement(Wrapper2, { ...props, className: "docblock-typeset sb-unstyled" }, fontSizes.map((size) => React8.createElement(TypeSpecimen, { key: size }, React8.createElement(Label, null, size), React8.createElement(
Sample,
{
style: {
fontFamily,
fontSize: size,
fontWeight,
lineHeight: 1.2
}
},
sampleText || "Was he a beast if music could move him so?"
)))), "Typeset");
// src/blocks/components/ColorPalette.tsx
import React9 from "react";
import { ResetWrapper } from "storybook/internal/components";
import { styled as styled6 } from "storybook/theming";
var ItemTitle = styled6.div(({ theme }) => ({
fontWeight: theme.typography.weight.bold,
color: theme.color.defaultText
}));
var ItemSubtitle = styled6.div(({ theme }) => ({
color: theme.base === "light" ? curriedTransparentize$1(0.2, theme.color.defaultText) : curriedTransparentize$1(0.6, theme.color.defaultText)
}));
var ItemDescription = styled6.div({
flex: "0 0 30%",
lineHeight: "20px",
marginTop: 5
});
var SwatchLabel = styled6.div(({ theme }) => ({
flex: 1,
textAlign: "center",
fontFamily: theme.typography.fonts.mono,
fontSize: theme.typography.size.s1,
lineHeight: 1,
overflow: "hidden",
color: theme.base === "light" ? curriedTransparentize$1(0.4, theme.color.defaultText) : curriedTransparentize$1(0.6, theme.color.defaultText),
"> div": {
display: "inline-block",
overflow: "hidden",
maxWidth: "100%",
textOverflow: "ellipsis"
},
span: {
display: "block",
marginTop: 2
}
}));
var SwatchLabels = styled6.div({
display: "flex",
flexDirection: "row"
});
var Swatch = styled6.div(({ background }) => ({
position: "relative",
flex: 1,
"&::before": {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background,
content: '""'
}
}));
var SwatchColors = styled6.div(({ theme }) => ({
...getBlockBackgroundStyle(theme),
display: "flex",
flexDirection: "row",
height: 50,
marginBottom: 5,
overflow: "hidden",
backgroundColor: "white",
backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
backgroundClip: "padding-box"
}));
var SwatchSpecimen = styled6.div({
display: "flex",
flexDirection: "column",
flex: 1,
position: "relative",
marginBottom: 30
});
var Swatches = styled6.div({
flex: 1,
display: "flex",
flexDirection: "row"
});
var Item = styled6.div({
display: "flex",
alignItems: "flex-start"
});
var ListName = styled6.div({
flex: "0 0 30%"
});
var ListSwatches = styled6.div({
flex: 1
});
var ListHeading = styled6.div(({ theme }) => ({
display: "flex",
flexDirection: "row",
alignItems: "center",
paddingBottom: 20,
fontWeight: theme.typography.weight.bold,
color: theme.base === "light" ? curriedTransparentize$1(0.4, theme.color.defaultText) : curriedTransparentize$1(0.6, theme.color.defaultText)
}));
var List = styled6.div(({ theme }) => ({
fontSize: theme.typography.size.s2,
lineHeight: `20px`,
display: "flex",
flexDirection: "column"
}));
function renderSwatch(c