storybook-addon-dependency-previews 0.1.0

package/dist/components/Expandable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.mjs","names":[],"sources":["../../src/components/Expandable.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react'\nimport s from './Expandable.module.css'\nimport { DoubleChevronDown } from './icons/DoubleChevronDown'\nimport { X } from './icons/X'\nimport type { IconComponent } from './icons/iconTypes'\n\ninterface PropsForExpandable {\n\tHeader: ReactNode\n\tchildren: ReactNode\n\tIcon: IconComponent\n\tonToggle?: (toggleState: boolean) => void\n}\nexport function Expandable({\n\tonToggle,\n\tHeader,\n\tchildren,\n\tIcon,\n}: PropsForExpandable) {\n\tconst [isOpen, setIsOpen] = useState(false)\n\n\treturn (\n\t\t<details\n\t\t\tclassName={s.container}\n\t\t\tonToggle={(e) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tconst isTogglingToOpen = e.currentTarget.open\n\t\t\t\tconst isAnimationSupported =\n\t\t\t\t\tCSS.supports('interpolate-size', 'allow-keywords') &&\n\t\t\t\t\tCSS.supports('transition-behavior', 'allow-discrete')\n\t\t\t\tonToggle?.(isTogglingToOpen)\n\n\t\t\t\t// since we unmount on close we need to delay the unmount when the accordion is closing\n\t\t\t\tif (isAnimationSupported) {\n\t\t\t\t\tif (isTogglingToOpen) {\n\t\t\t\t\t\tsetIsOpen(isTogglingToOpen)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tsetIsOpen(isTogglingToOpen)\n\t\t\t\t\t\t}, 0.3 * 1000)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsetIsOpen(isTogglingToOpen)\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<summary className={s.header}>\n\t\t\t\t{/* Need to handle show/hide of icons with CSS since isOpen has a delay on close */}\n\t\t\t\t<Icon className={`${s.icon}`} />\n\t\t\t\t<div className={s.headContent}>{Header}</div>\n\t\t\t\t<DoubleChevronDown className={`${s.icon} ${s.OpenIcon}`} />\n\t\t\t\t<X className={`${s.icon} ${s.CloseIcon}`} />\n\t\t\t</summary>\n\t\t\t{isOpen && <div className={s.body}>{children}</div>}\n\t\t</details>\n\t)\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,WAAW,EAC1B,UACA,QACA,UACA,QACsB;CACtB,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;AAE3C,QACC,qBAAC;EACA,WAAW,EAAE;EACb,WAAW,MAAM;AAChB,KAAE,iBAAiB;GACnB,MAAM,mBAAmB,EAAE,cAAc;GACzC,MAAM,uBACL,IAAI,SAAS,oBAAoB,iBAAiB,IAClD,IAAI,SAAS,uBAAuB,iBAAiB;AACtD,cAAW,iBAAiB;AAG5B,OAAI,sBAAsB;AACzB,QAAI,kBAAkB;AACrB,eAAU,iBAAiB;WACrB;AACN,sBAAiB;AAChB,gBAAU,iBAAiB;QACzB,KAAM,IAAK;;UAET;AACN,cAAU,iBAAiB;;;aAI7B,qBAAC;GAAQ,WAAW,EAAE;;IAErB,oBAAC,QAAK,WAAW,GAAG,EAAE,SAAU;IAChC,oBAAC;KAAI,WAAW,EAAE;eAAc;MAAa;IAC7C,oBAAC,qBAAkB,WAAW,GAAG,EAAE,KAAK,GAAG,EAAE,aAAc;IAC3D,oBAAC,KAAE,WAAW,GAAG,EAAE,KAAK,GAAG,EAAE,cAAe;;IACnC,EACT,UAAU,oBAAC;GAAI,WAAW,EAAE;GAAO;IAAe;GAC1C"}

package/dist/components/Expandable.module.css

@@ -0,0 +1,110 @@
+.container {
+	border: 1px solid var(--sb-outline-color, rgba(0, 0, 0, 0.1));
+	border-radius: 6px;
+	background: var(--sb-bg1, #fff);
+	margin: 0.5rem 0;
+	overflow: hidden;
+
+	&:first-child {
+		margin-top: 0;
+	}
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	&::details-content {
+		@supports (interpolate-size: allow-keywords) and
+			(transition-behavior: allow-discrete) {
+			block-size: 0;
+			transition:
+				block-size 0.3s,
+				content-visibility 0.3s;
+			transition-behavior: allow-discrete;
+		}
+	}
+
+	&[open] {
+		background: var(--sb-bg2, #f8f9fa);
+
+		& > .header > .icon {
+			&.XIcon {
+				display: block;
+			}
+		}
+
+		&::details-content {
+			@supports (interpolate-size: allow-keywords) and
+				(transition-behavior: allow-discrete) {
+				block-size: auto;
+			}
+		}
+	}
+}
+
+.container > .header > .icon {
+	&.OpenIcon,
+	&.CloseIcon {
+		display: none;
+		margin-left: auto;
+	}
+}
+.container:not([open]) {
+	& > .header > .icon {
+		&.OpenIcon {
+			display: block;
+		}
+	}
+}
+.container[open] {
+	& > .header > .icon {
+		&.CloseIcon {
+			display: block;
+		}
+	}
+}
+
+.header {
+	list-style: none;
+	cursor: pointer;
+	padding: 0.5rem 0.75rem;
+	font-weight: 600;
+	font-size: 0.9rem;
+	color: var(--sb-text-color, #333);
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+
+	&:hover,
+	&:focus-visible {
+		background: var(--sb-bg3, #edeff0);
+	}
+
+	& h2 {
+		border: 0;
+		padding: 0;
+		margin: 0;
+		cursor: pointer;
+	}
+
+	&::-webkit-details-marker {
+		display: none;
+	}
+}
+
+.icon {
+	height: 1.5em;
+	width: 1.5em;
+}
+
+.body {
+	padding: 1em;
+	background-color: var(--sb-bg1, #fff);
+	border-top: 1px solid var(--sb-outline-color, rgba(0, 0, 0, 0.1));
+
+	& > ul,
+	& > div > ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+}

package/dist/components/FullParityStory.cjs

@@ -0,0 +1,47 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _iframe_resizer_react = require("@iframe-resizer/react");
+_iframe_resizer_react = require_runtime.__toESM(_iframe_resizer_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/FullParityStory.tsx
+const toCanvasId = (id) => id.endsWith("--docs") ? id.replace(/--docs$/, "--primary") : id;
+const enc = (obj) => obj && Object.keys(obj).length ? encodeURIComponent(JSON.stringify(obj)) : "";
+function FullParityStory({ storyId, args, globals, className, onLoad }) {
+	const canvasId = react.useMemo(() => toCanvasId(storyId), [storyId]);
+	const src = react.useMemo(() => {
+		const a = enc(args);
+		const g = enc(globals);
+		const qs = [
+			`id=${canvasId}`,
+			"viewMode=story",
+			a && `args=${a}`,
+			g && `globals=${g}`
+		].filter(Boolean).join("&");
+		return `iframe.html?${qs}`;
+	}, [
+		canvasId,
+		args,
+		globals
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iframe_resizer_react.default, {
+		title: canvasId,
+		license: "GPLv3",
+		log: "collapsed",
+		src,
+		loading: "lazy",
+		className,
+		onLoad,
+		style: {
+			width: "100%",
+			border: "1px solid var(--sb-border-color, #e5e7eb)",
+			borderRadius: 8,
+			background: "transparent"
+		}
+	});
+}
+
+//#endregion
+exports.FullParityStory = FullParityStory;
+//# sourceMappingURL=FullParityStory.cjs.map

package/dist/components/FullParityStory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullParityStory.cjs","names":["React","IframeResizer"],"sources":["../../src/components/FullParityStory.tsx"],"sourcesContent":["// FullParityStory.tsx — preview-only, no Storybook UI\nimport IframeResizer from '@iframe-resizer/react'\nimport * as React from 'react'\n\ntype Props = {\n\t/** docs id like \"...--docs\" or a canvas id like \"...--primary\" */\n\tstoryId: string\n\targs?: Record<string, unknown>\n\tglobals?: Record<string, unknown>\n\tclassName?: string\n\tonLoad?: () => void\n}\n\nconst toCanvasId = (id: string) =>\n\tid.endsWith('--docs') ? id.replace(/--docs$/, '--primary') : id\n\nconst enc = (obj?: Record<string, unknown>) =>\n\tobj && Object.keys(obj).length\n\t\t? encodeURIComponent(JSON.stringify(obj))\n\t\t: ''\n\nexport function FullParityStory({\n\tstoryId,\n\targs,\n\tglobals,\n\tclassName,\n\tonLoad,\n}: Props) {\n\tconst canvasId = React.useMemo(() => toCanvasId(storyId), [storyId])\n\n\tconst src = React.useMemo(() => {\n\t\t// ⚠️ This is the preview-only route, no manager UI\n\t\tconst a = enc(args)\n\t\tconst g = enc(globals)\n\t\tconst qs = [\n\t\t\t`id=${canvasId}`,\n\t\t\t'viewMode=story',\n\t\t\ta && `args=${a}`,\n\t\t\tg && `globals=${g}`,\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join('&')\n\t\treturn `iframe.html?${qs}`\n\t}, [canvasId, args, globals])\n\n\treturn (\n\t\t<IframeResizer\n\t\t\ttitle={canvasId}\n\t\t\tlicense=\"GPLv3\"\n\t\t\tlog=\"collapsed\"\n\t\t\tsrc={src}\n\t\t\tloading=\"lazy\"\n\t\t\tclassName={className}\n\t\t\tonLoad={onLoad}\n\t\t\tstyle={{\n\t\t\t\twidth: '100%',\n\t\t\t\tborder: '1px solid var(--sb-border-color, #e5e7eb)',\n\t\t\t\tborderRadius: 8,\n\t\t\t\tbackground: 'transparent',\n\t\t\t}}\n\t\t/>\n\t)\n}\n"],"mappings":";;;;;;;;AAaA,MAAM,cAAc,OACnB,GAAG,SAAS,SAAS,GAAG,GAAG,QAAQ,WAAW,YAAY,GAAG;AAE9D,MAAM,OAAO,QACZ,OAAO,OAAO,KAAK,IAAI,CAAC,SACrB,mBAAmB,KAAK,UAAU,IAAI,CAAC,GACvC;AAEJ,SAAgB,gBAAgB,EAC/B,SACA,MACA,SACA,WACA,UACS;CACT,MAAM,WAAWA,MAAM,cAAc,WAAW,QAAQ,EAAE,CAAC,QAAQ,CAAC;CAEpE,MAAM,MAAMA,MAAM,cAAc;EAE/B,MAAM,IAAI,IAAI,KAAK;EACnB,MAAM,IAAI,IAAI,QAAQ;EACtB,MAAM,KAAK;GACV,MAAM;GACN;GACA,KAAK,QAAQ;GACb,KAAK,WAAW;GAChB,CACC,OAAO,QAAQ,CACf,KAAK,IAAI;AACX,SAAO,eAAe;IACpB;EAAC;EAAU;EAAM;EAAQ,CAAC;AAE7B,QACC,2CAACC;EACA,OAAO;EACP,SAAQ;EACR,KAAI;EACC;EACL,SAAQ;EACG;EACH;EACR,OAAO;GACN,OAAO;GACP,QAAQ;GACR,cAAc;GACd,YAAY;GACZ;GACA"}

package/dist/components/FullParityStory.mjs

@@ -0,0 +1,44 @@
+import * as React from "react";
+import IframeResizer from "@iframe-resizer/react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/FullParityStory.tsx
+const toCanvasId = (id) => id.endsWith("--docs") ? id.replace(/--docs$/, "--primary") : id;
+const enc = (obj) => obj && Object.keys(obj).length ? encodeURIComponent(JSON.stringify(obj)) : "";
+function FullParityStory({ storyId, args, globals, className, onLoad }) {
+	const canvasId = React.useMemo(() => toCanvasId(storyId), [storyId]);
+	const src = React.useMemo(() => {
+		const a = enc(args);
+		const g = enc(globals);
+		const qs = [
+			`id=${canvasId}`,
+			"viewMode=story",
+			a && `args=${a}`,
+			g && `globals=${g}`
+		].filter(Boolean).join("&");
+		return `iframe.html?${qs}`;
+	}, [
+		canvasId,
+		args,
+		globals
+	]);
+	return /* @__PURE__ */ jsx(IframeResizer, {
+		title: canvasId,
+		license: "GPLv3",
+		log: "collapsed",
+		src,
+		loading: "lazy",
+		className,
+		onLoad,
+		style: {
+			width: "100%",
+			border: "1px solid var(--sb-border-color, #e5e7eb)",
+			borderRadius: 8,
+			background: "transparent"
+		}
+	});
+}
+
+//#endregion
+export { FullParityStory };
+//# sourceMappingURL=FullParityStory.mjs.map

package/dist/components/FullParityStory.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullParityStory.mjs","names":[],"sources":["../../src/components/FullParityStory.tsx"],"sourcesContent":["// FullParityStory.tsx — preview-only, no Storybook UI\nimport IframeResizer from '@iframe-resizer/react'\nimport * as React from 'react'\n\ntype Props = {\n\t/** docs id like \"...--docs\" or a canvas id like \"...--primary\" */\n\tstoryId: string\n\targs?: Record<string, unknown>\n\tglobals?: Record<string, unknown>\n\tclassName?: string\n\tonLoad?: () => void\n}\n\nconst toCanvasId = (id: string) =>\n\tid.endsWith('--docs') ? id.replace(/--docs$/, '--primary') : id\n\nconst enc = (obj?: Record<string, unknown>) =>\n\tobj && Object.keys(obj).length\n\t\t? encodeURIComponent(JSON.stringify(obj))\n\t\t: ''\n\nexport function FullParityStory({\n\tstoryId,\n\targs,\n\tglobals,\n\tclassName,\n\tonLoad,\n}: Props) {\n\tconst canvasId = React.useMemo(() => toCanvasId(storyId), [storyId])\n\n\tconst src = React.useMemo(() => {\n\t\t// ⚠️ This is the preview-only route, no manager UI\n\t\tconst a = enc(args)\n\t\tconst g = enc(globals)\n\t\tconst qs = [\n\t\t\t`id=${canvasId}`,\n\t\t\t'viewMode=story',\n\t\t\ta && `args=${a}`,\n\t\t\tg && `globals=${g}`,\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join('&')\n\t\treturn `iframe.html?${qs}`\n\t}, [canvasId, args, globals])\n\n\treturn (\n\t\t<IframeResizer\n\t\t\ttitle={canvasId}\n\t\t\tlicense=\"GPLv3\"\n\t\t\tlog=\"collapsed\"\n\t\t\tsrc={src}\n\t\t\tloading=\"lazy\"\n\t\t\tclassName={className}\n\t\t\tonLoad={onLoad}\n\t\t\tstyle={{\n\t\t\t\twidth: '100%',\n\t\t\t\tborder: '1px solid var(--sb-border-color, #e5e7eb)',\n\t\t\t\tborderRadius: 8,\n\t\t\t\tbackground: 'transparent',\n\t\t\t}}\n\t\t/>\n\t)\n}\n"],"mappings":";;;;;AAaA,MAAM,cAAc,OACnB,GAAG,SAAS,SAAS,GAAG,GAAG,QAAQ,WAAW,YAAY,GAAG;AAE9D,MAAM,OAAO,QACZ,OAAO,OAAO,KAAK,IAAI,CAAC,SACrB,mBAAmB,KAAK,UAAU,IAAI,CAAC,GACvC;AAEJ,SAAgB,gBAAgB,EAC/B,SACA,MACA,SACA,WACA,UACS;CACT,MAAM,WAAW,MAAM,cAAc,WAAW,QAAQ,EAAE,CAAC,QAAQ,CAAC;CAEpE,MAAM,MAAM,MAAM,cAAc;EAE/B,MAAM,IAAI,IAAI,KAAK;EACnB,MAAM,IAAI,IAAI,QAAQ;EACtB,MAAM,KAAK;GACV,MAAM;GACN;GACA,KAAK,QAAQ;GACb,KAAK,WAAW;GAChB,CACC,OAAO,QAAQ,CACf,KAAK,IAAI;AACX,SAAO,eAAe;IACpB;EAAC;EAAU;EAAM;EAAQ,CAAC;AAE7B,QACC,oBAAC;EACA,OAAO;EACP,SAAQ;EACR,KAAI;EACC;EACL,SAAQ;EACG;EACH;EACR,OAAO;GACN,OAAO;GACP,QAAQ;GACR,cAAc;GACd,YAAY;GACZ;GACA"}

package/dist/components/PathCopyMolecule.cjs

@@ -0,0 +1,28 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_CopyButton = require('./CopyButton.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_components_PathCopyMolecule_module_css = require("./PathCopyMolecule.module.css");
+src_components_PathCopyMolecule_module_css = require_runtime.__toESM(src_components_PathCopyMolecule_module_css);
+
+//#region src/components/PathCopyMolecule.tsx
+function PathCopyMolecule({ label, copyLabel = `Copy ${label} to clipboard`, copyMessage = `Copied ${label}!`, copyContent, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: src_components_PathCopyMolecule_module_css.default.pathDataItem,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [label, ": "] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: src_components_PathCopyMolecule_module_css.default.pathLinkWrapper,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopyButton.CopyButton, {
+					label: copyLabel,
+					copyMessage,
+					copyContent
+				}), children]
+			})
+		]
+	});
+}
+
+//#endregion
+exports.PathCopyMolecule = PathCopyMolecule;
+//# sourceMappingURL=PathCopyMolecule.cjs.map

package/dist/components/PathCopyMolecule.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathCopyMolecule.cjs","names":["s","CopyButton"],"sources":["../../src/components/PathCopyMolecule.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { CopyButton } from './CopyButton'\nimport s from './PathCopyMolecule.module.css'\n\ninterface Props {\n\tlabel: string\n\tcopyContent: string\n\tchildren: ReactNode\n\tcopyLabel?: string\n\tcopyMessage?: string\n}\n\nexport function PathCopyMolecule({\n\tlabel,\n\tcopyLabel = `Copy ${label} to clipboard`,\n\tcopyMessage = `Copied ${label}!`,\n\tcopyContent,\n\tchildren,\n}: Props) {\n\treturn (\n\t\t<p className={s.pathDataItem}>\n\t\t\t<strong>{label}: </strong>\n\t\t\t<br />\n\t\t\t<span className={s.pathLinkWrapper}>\n\t\t\t\t<CopyButton\n\t\t\t\t\tlabel={copyLabel}\n\t\t\t\t\tcopyMessage={copyMessage}\n\t\t\t\t\tcopyContent={copyContent}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</p>\n\t)\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,iBAAiB,EAChC,OACA,YAAY,QAAQ,MAAM,gBAC1B,cAAc,UAAU,MAAM,IAC9B,aACA,YACS;AACT,QACC,4CAAC;EAAE,WAAWA,mDAAE;;GACf,4CAAC,uBAAQ,OAAM,QAAW;GAC1B,2CAAC,SAAK;GACN,4CAAC;IAAK,WAAWA,mDAAE;eAClB,2CAACC;KACA,OAAO;KACM;KACA;MACZ,EACD;KACK;;GACJ"}

package/dist/components/PathCopyMolecule.mjs

@@ -0,0 +1,26 @@
+import { CopyButton } from "./CopyButton.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./PathCopyMolecule.module.css";
+
+//#region src/components/PathCopyMolecule.tsx
+function PathCopyMolecule({ label, copyLabel = `Copy ${label} to clipboard`, copyMessage = `Copied ${label}!`, copyContent, children }) {
+	return /* @__PURE__ */ jsxs("p", {
+		className: s.pathDataItem,
+		children: [
+			/* @__PURE__ */ jsxs("strong", { children: [label, ": "] }),
+			/* @__PURE__ */ jsx("br", {}),
+			/* @__PURE__ */ jsxs("span", {
+				className: s.pathLinkWrapper,
+				children: [/* @__PURE__ */ jsx(CopyButton, {
+					label: copyLabel,
+					copyMessage,
+					copyContent
+				}), children]
+			})
+		]
+	});
+}
+
+//#endregion
+export { PathCopyMolecule };
+//# sourceMappingURL=PathCopyMolecule.mjs.map

package/dist/components/PathCopyMolecule.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathCopyMolecule.mjs","names":[],"sources":["../../src/components/PathCopyMolecule.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { CopyButton } from './CopyButton'\nimport s from './PathCopyMolecule.module.css'\n\ninterface Props {\n\tlabel: string\n\tcopyContent: string\n\tchildren: ReactNode\n\tcopyLabel?: string\n\tcopyMessage?: string\n}\n\nexport function PathCopyMolecule({\n\tlabel,\n\tcopyLabel = `Copy ${label} to clipboard`,\n\tcopyMessage = `Copied ${label}!`,\n\tcopyContent,\n\tchildren,\n}: Props) {\n\treturn (\n\t\t<p className={s.pathDataItem}>\n\t\t\t<strong>{label}: </strong>\n\t\t\t<br />\n\t\t\t<span className={s.pathLinkWrapper}>\n\t\t\t\t<CopyButton\n\t\t\t\t\tlabel={copyLabel}\n\t\t\t\t\tcopyMessage={copyMessage}\n\t\t\t\t\tcopyContent={copyContent}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</p>\n\t)\n}\n"],"mappings":";;;;;AAYA,SAAgB,iBAAiB,EAChC,OACA,YAAY,QAAQ,MAAM,gBAC1B,cAAc,UAAU,MAAM,IAC9B,aACA,YACS;AACT,QACC,qBAAC;EAAE,WAAW,EAAE;;GACf,qBAAC,uBAAQ,OAAM,QAAW;GAC1B,oBAAC,SAAK;GACN,qBAAC;IAAK,WAAW,EAAE;eAClB,oBAAC;KACA,OAAO;KACM;KACA;MACZ,EACD;KACK;;GACJ"}

package/dist/components/PathCopyMolecule.module.css

@@ -0,0 +1,14 @@
+.pathDataItem.pathDataItem {
+	margin: 0;
+	padding: 0;
+}
+
+.pathLinkWrapper {
+	display: flex;
+	align-items: center;
+	gap: 0 0.5em;
+
+	& a {
+		line-height: 1 !important;
+	}
+}

package/dist/components/PrimaryPreview.cjs

@@ -0,0 +1,35 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_useDynamicStory = require('../hooks/useDynamicStory.cjs');
+const require_FullParityStory = require('./FullParityStory.cjs');
+const require_LoadingRipples = require('./icons/LoadingRipples.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/PrimaryPreview.tsx
+function PrimaryPreview({ storyInfo }) {
+	const [hasLoaded, setHasLoaded] = (0, react.useState)(false);
+	const { csfModule, primaryExport, primaryId, error, isLoading } = require_useDynamicStory.useDynamicStory(storyInfo);
+	const message = error || isLoading && "Loading preview…" || !csfModule && "Module could not be loaded." || !primaryExport && "No story export found.";
+	if (message) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: { opacity: .7 },
+		children: message
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "grid grid-cols-1 grid-rows-1",
+		children: [!hasLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "col-start-1 row-start-1 grid place-items-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingRipples.LoadingRipples, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "col-start-1 row-start-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FullParityStory.FullParityStory, {
+				storyId: primaryId,
+				args: primaryExport.args,
+				onLoad: () => setHasLoaded(true)
+			})
+		})]
+	});
+}
+
+//#endregion
+exports.PrimaryPreview = PrimaryPreview;
+//# sourceMappingURL=PrimaryPreview.cjs.map

package/dist/components/PrimaryPreview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryPreview.cjs","names":["useDynamicStory","LoadingRipples","FullParityStory"],"sources":["../../src/components/PrimaryPreview.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useDynamicStory } from '../hooks/useDynamicStory'\nimport type { StoryInfo } from '../types'\nimport { FullParityStory } from './FullParityStory'\nimport { LoadingRipples } from './icons/LoadingRipples'\n\ninterface PropsForPrimaryPreview {\n\tstoryInfo: StoryInfo\n}\n\nexport function PrimaryPreview({ storyInfo }: PropsForPrimaryPreview) {\n\tconst [hasLoaded, setHasLoaded] = useState(false)\n\tconst { csfModule, primaryExport, primaryId, error, isLoading } =\n\t\tuseDynamicStory(storyInfo)\n\tconst message =\n\t\terror ||\n\t\t(isLoading && 'Loading preview…') ||\n\t\t(!csfModule && 'Module could not be loaded.') ||\n\t\t(!primaryExport && 'No story export found.')\n\n\tif (message) return <p style={{ opacity: 0.7 }}>{message}</p>\n\n\treturn (\n\t\t<div className=\"grid grid-cols-1 grid-rows-1\">\n\t\t\t{!hasLoaded && (\n\t\t\t\t<div className=\"col-start-1 row-start-1 grid place-items-center\">\n\t\t\t\t\t<LoadingRipples />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"col-start-1 row-start-1\">\n\t\t\t\t<FullParityStory\n\t\t\t\t\tstoryId={primaryId!}\n\t\t\t\t\targs={primaryExport.args}\n\t\t\t\t\tonLoad={() => setHasLoaded(true)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,eAAe,EAAE,aAAqC;CACrE,MAAM,CAAC,WAAW,oCAAyB,MAAM;CACjD,MAAM,EAAE,WAAW,eAAe,WAAW,OAAO,cACnDA,wCAAgB,UAAU;CAC3B,MAAM,UACL,SACC,aAAa,sBACb,CAAC,aAAa,iCACd,CAAC,iBAAiB;AAEpB,KAAI,QAAS,QAAO,2CAAC;EAAE,OAAO,EAAE,SAAS,IAAK;YAAG;GAAY;AAE7D,QACC,4CAAC;EAAI,WAAU;aACb,CAAC,aACD,2CAAC;GAAI,WAAU;aACd,2CAACC,0CAAiB;IACb,EAEP,2CAAC;GAAI,WAAU;aACd,2CAACC;IACA,SAAS;IACT,MAAM,cAAc;IACpB,cAAc,aAAa,KAAK;KAC/B;IACG;GACD"}

package/dist/components/PrimaryPreview.mjs

@@ -0,0 +1,34 @@
+import { useDynamicStory } from "../hooks/useDynamicStory.mjs";
+import { FullParityStory } from "./FullParityStory.mjs";
+import { LoadingRipples } from "./icons/LoadingRipples.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/PrimaryPreview.tsx
+function PrimaryPreview({ storyInfo }) {
+	const [hasLoaded, setHasLoaded] = useState(false);
+	const { csfModule, primaryExport, primaryId, error, isLoading } = useDynamicStory(storyInfo);
+	const message = error || isLoading && "Loading preview…" || !csfModule && "Module could not be loaded." || !primaryExport && "No story export found.";
+	if (message) return /* @__PURE__ */ jsx("p", {
+		style: { opacity: .7 },
+		children: message
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-1 grid-rows-1",
+		children: [!hasLoaded && /* @__PURE__ */ jsx("div", {
+			className: "col-start-1 row-start-1 grid place-items-center",
+			children: /* @__PURE__ */ jsx(LoadingRipples, {})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "col-start-1 row-start-1",
+			children: /* @__PURE__ */ jsx(FullParityStory, {
+				storyId: primaryId,
+				args: primaryExport.args,
+				onLoad: () => setHasLoaded(true)
+			})
+		})]
+	});
+}
+
+//#endregion
+export { PrimaryPreview };
+//# sourceMappingURL=PrimaryPreview.mjs.map

package/dist/components/PrimaryPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryPreview.mjs","names":[],"sources":["../../src/components/PrimaryPreview.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useDynamicStory } from '../hooks/useDynamicStory'\nimport type { StoryInfo } from '../types'\nimport { FullParityStory } from './FullParityStory'\nimport { LoadingRipples } from './icons/LoadingRipples'\n\ninterface PropsForPrimaryPreview {\n\tstoryInfo: StoryInfo\n}\n\nexport function PrimaryPreview({ storyInfo }: PropsForPrimaryPreview) {\n\tconst [hasLoaded, setHasLoaded] = useState(false)\n\tconst { csfModule, primaryExport, primaryId, error, isLoading } =\n\t\tuseDynamicStory(storyInfo)\n\tconst message =\n\t\terror ||\n\t\t(isLoading && 'Loading preview…') ||\n\t\t(!csfModule && 'Module could not be loaded.') ||\n\t\t(!primaryExport && 'No story export found.')\n\n\tif (message) return <p style={{ opacity: 0.7 }}>{message}</p>\n\n\treturn (\n\t\t<div className=\"grid grid-cols-1 grid-rows-1\">\n\t\t\t{!hasLoaded && (\n\t\t\t\t<div className=\"col-start-1 row-start-1 grid place-items-center\">\n\t\t\t\t\t<LoadingRipples />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"col-start-1 row-start-1\">\n\t\t\t\t<FullParityStory\n\t\t\t\t\tstoryId={primaryId!}\n\t\t\t\t\targs={primaryExport.args}\n\t\t\t\t\tonLoad={() => setHasLoaded(true)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,eAAe,EAAE,aAAqC;CACrE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,EAAE,WAAW,eAAe,WAAW,OAAO,cACnD,gBAAgB,UAAU;CAC3B,MAAM,UACL,SACC,aAAa,sBACb,CAAC,aAAa,iCACd,CAAC,iBAAiB;AAEpB,KAAI,QAAS,QAAO,oBAAC;EAAE,OAAO,EAAE,SAAS,IAAK;YAAG;GAAY;AAE7D,QACC,qBAAC;EAAI,WAAU;aACb,CAAC,aACD,oBAAC;GAAI,WAAU;aACd,oBAAC,mBAAiB;IACb,EAEP,oBAAC;GAAI,WAAU;aACd,oBAAC;IACA,SAAS;IACT,MAAM,cAAc;IACpB,cAAc,aAAa,KAAK;KAC/B;IACG;GACD"}

package/dist/components/SbHeading.cjs

@@ -0,0 +1,18 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _storybook_addon_docs_blocks = require("@storybook/addon-docs/blocks");
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_components_SbHeading_module_css = require("./SbHeading.module.css");
+src_components_SbHeading_module_css = require_runtime.__toESM(src_components_SbHeading_module_css);
+
+//#region src/components/SbHeading.tsx
+function SbHeading({ children, className }) {
+	const classes = [src_components_SbHeading_module_css.default.SbHeading, className].filter(Boolean).join(" ").trim();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_addon_docs_blocks.Heading, { children })
+	});
+}
+
+//#endregion
+exports.SbHeading = SbHeading;
+//# sourceMappingURL=SbHeading.cjs.map

package/dist/components/SbHeading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SbHeading.cjs","names":["s","Heading"],"sources":["../../src/components/SbHeading.tsx"],"sourcesContent":["import { Heading } from '@storybook/addon-docs/blocks'\nimport s from './SbHeading.module.css'\nimport type { ReactNode } from 'react'\n\ninterface PropsForSbHeading {\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\nexport function SbHeading({ children, className }: PropsForSbHeading) {\n\tconst classes = [s.SbHeading, className].filter(Boolean).join(' ').trim()\n\treturn (\n\t\t<div className={classes}>\n\t\t\t<Heading>{children}</Heading>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;AASA,SAAgB,UAAU,EAAE,UAAU,aAAgC;CACrE,MAAM,UAAU,CAACA,4CAAE,WAAW,UAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM;AACzE,QACC,2CAAC;EAAI,WAAW;YACf,2CAACC,wCAAS,WAAmB;GACxB"}

package/dist/components/SbHeading.mjs

@@ -0,0 +1,16 @@
+import { Heading } from "@storybook/addon-docs/blocks";
+import { jsx } from "react/jsx-runtime";
+import s from "./SbHeading.module.css";
+
+//#region src/components/SbHeading.tsx
+function SbHeading({ children, className }) {
+	const classes = [s.SbHeading, className].filter(Boolean).join(" ").trim();
+	return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		children: /* @__PURE__ */ jsx(Heading, { children })
+	});
+}
+
+//#endregion
+export { SbHeading };
+//# sourceMappingURL=SbHeading.mjs.map

package/dist/components/SbHeading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SbHeading.mjs","names":[],"sources":["../../src/components/SbHeading.tsx"],"sourcesContent":["import { Heading } from '@storybook/addon-docs/blocks'\nimport s from './SbHeading.module.css'\nimport type { ReactNode } from 'react'\n\ninterface PropsForSbHeading {\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\nexport function SbHeading({ children, className }: PropsForSbHeading) {\n\tconst classes = [s.SbHeading, className].filter(Boolean).join(' ').trim()\n\treturn (\n\t\t<div className={classes}>\n\t\t\t<Heading>{children}</Heading>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;AASA,SAAgB,UAAU,EAAE,UAAU,aAAgC;CACrE,MAAM,UAAU,CAAC,EAAE,WAAW,UAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM;AACzE,QACC,oBAAC;EAAI,WAAW;YACf,oBAAC,WAAS,WAAmB;GACxB"}

package/dist/components/SbHeading.module.css

@@ -0,0 +1,23 @@
+/** need double classes to override storybook specificity */
+.SbHeading.SbHeading {
+	h2 {
+		border: none;
+		font-size: 0.8rem;
+		font-weight: 700;
+		letter-spacing: 0.35em;
+		text-transform: uppercase;
+		color: var(--sb-color-text-secondary, #5c6870);
+		padding: 0;
+		margin-top: 56px;
+		margin-bottom: 0.7rem;
+
+		div:has(table) + div &,
+		:global(.sb-anchor) + div & {
+			margin-top: 16px;
+		}
+	}
+
+	& + div table {
+		margin-top: 0;
+	}
+}

package/dist/components/StoryLink.cjs

@@ -0,0 +1,45 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_TooltipTrigger = require('./TooltipTrigger.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let _storybook_addon_links = require("@storybook/addon-links");
+let src_components_StoryLink_module_css = require("./StoryLink.module.css");
+src_components_StoryLink_module_css = require_runtime.__toESM(src_components_StoryLink_module_css);
+
+//#region src/components/StoryLink.tsx
+function StoryLink({ info, children, tooltipPosition = "top" }) {
+	if (!info.storyId) {
+		return info.componentPath;
+	}
+	const currentStoryId = /id=(.+?)&globals/.exec(window.location.href)?.[1];
+	const linkPath = `/?path=/docs/${info.storyId}`;
+	const storyTitle = info.storyTitle;
+	if (info.storyId === currentStoryId) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: src_components_StoryLink_module_css.default.currentStory,
+			children: [
+				children ?? storyTitle,
+				" ",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+					className: src_components_StoryLink_module_css.default.currentStoryMark,
+					children: "(Current Story Page)"
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TooltipTrigger.TooltipTrigger, {
+		TriggerElem: "a",
+		tooltipText: "View story",
+		className: src_components_StoryLink_module_css.default.storyLink,
+		href: linkPath,
+		tooltipPosition,
+		onClick: (e) => {
+			e.preventDefault();
+			(0, _storybook_addon_links.linkTo)(info.storyId)(e);
+		},
+		children: children ?? storyTitle
+	});
+}
+
+//#endregion
+exports.StoryLink = StoryLink;
+//# sourceMappingURL=StoryLink.cjs.map

package/dist/components/StoryLink.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryLink.cjs","names":["s","TooltipTrigger"],"sources":["../../src/components/StoryLink.tsx"],"sourcesContent":["import type { StoryInfo } from '../types'\nimport { linkTo } from '@storybook/addon-links'\n\nimport s from './StoryLink.module.css'\nimport type { ReactNode } from 'react'\nimport { TooltipTrigger, type TooltipPosition } from './TooltipTrigger'\n\ninterface StoryLinkProps {\n\tinfo: StoryInfo\n\tchildren?: ReactNode\n\ttooltipPosition?: TooltipPosition\n}\n\nexport function StoryLink({\n\tinfo,\n\tchildren,\n\ttooltipPosition = 'top',\n}: StoryLinkProps) {\n\tif (!info.storyId) {\n\t\treturn info.componentPath\n\t}\n\tconst currentStoryId = /id=(.+?)&globals/.exec(window.location.href)?.[1]\n\tconst linkPath = `/?path=/docs/${info.storyId}`\n\tconst storyTitle = info.storyTitle\n\n\tif (info.storyId === currentStoryId) {\n\t\treturn (\n\t\t\t<span className={s.currentStory}>\n\t\t\t\t{children ?? storyTitle}{' '}\n\t\t\t\t<strong className={s.currentStoryMark}>\n\t\t\t\t\t(Current Story Page)\n\t\t\t\t</strong>\n\t\t\t</span>\n\t\t)\n\t}\n\n\treturn (\n\t\t<TooltipTrigger\n\t\t\tTriggerElem=\"a\"\n\t\t\ttooltipText=\"View story\"\n\t\t\tclassName={s.storyLink}\n\t\t\thref={linkPath}\n\t\t\ttooltipPosition={tooltipPosition}\n\t\t\tonClick={(e) => {\n\t\t\t\te.preventDefault()\n\t\t\t\tlinkTo(info.storyId!)(e)\n\t\t\t}}\n\t\t>\n\t\t\t{children ?? storyTitle}\n\t\t</TooltipTrigger>\n\t)\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,UAAU,EACzB,MACA,UACA,kBAAkB,SACA;AAClB,KAAI,CAAC,KAAK,SAAS;AAClB,SAAO,KAAK;;CAEb,MAAM,iBAAiB,mBAAmB,KAAK,OAAO,SAAS,KAAK,GAAG;CACvE,MAAM,WAAW,gBAAgB,KAAK;CACtC,MAAM,aAAa,KAAK;AAExB,KAAI,KAAK,YAAY,gBAAgB;AACpC,SACC,4CAAC;GAAK,WAAWA,4CAAE;;IACjB,YAAY;IAAY;IACzB,2CAAC;KAAO,WAAWA,4CAAE;eAAkB;MAE9B;;IACH;;AAIT,QACC,2CAACC;EACA,aAAY;EACZ,aAAY;EACZ,WAAWD,4CAAE;EACb,MAAM;EACW;EACjB,UAAU,MAAM;AACf,KAAE,gBAAgB;AAClB,sCAAO,KAAK,QAAS,CAAC,EAAE;;YAGxB,YAAY;GACG"}

package/dist/components/StoryLink.mjs

@@ -0,0 +1,43 @@
+import { TooltipTrigger } from "./TooltipTrigger.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { linkTo } from "@storybook/addon-links";
+import s from "./StoryLink.module.css";
+
+//#region src/components/StoryLink.tsx
+function StoryLink({ info, children, tooltipPosition = "top" }) {
+	if (!info.storyId) {
+		return info.componentPath;
+	}
+	const currentStoryId = /id=(.+?)&globals/.exec(window.location.href)?.[1];
+	const linkPath = `/?path=/docs/${info.storyId}`;
+	const storyTitle = info.storyTitle;
+	if (info.storyId === currentStoryId) {
+		return /* @__PURE__ */ jsxs("span", {
+			className: s.currentStory,
+			children: [
+				children ?? storyTitle,
+				" ",
+				/* @__PURE__ */ jsx("strong", {
+					className: s.currentStoryMark,
+					children: "(Current Story Page)"
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(TooltipTrigger, {
+		TriggerElem: "a",
+		tooltipText: "View story",
+		className: s.storyLink,
+		href: linkPath,
+		tooltipPosition,
+		onClick: (e) => {
+			e.preventDefault();
+			linkTo(info.storyId)(e);
+		},
+		children: children ?? storyTitle
+	});
+}
+
+//#endregion
+export { StoryLink };
+//# sourceMappingURL=StoryLink.mjs.map

package/dist/components/StoryLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryLink.mjs","names":[],"sources":["../../src/components/StoryLink.tsx"],"sourcesContent":["import type { StoryInfo } from '../types'\nimport { linkTo } from '@storybook/addon-links'\n\nimport s from './StoryLink.module.css'\nimport type { ReactNode } from 'react'\nimport { TooltipTrigger, type TooltipPosition } from './TooltipTrigger'\n\ninterface StoryLinkProps {\n\tinfo: StoryInfo\n\tchildren?: ReactNode\n\ttooltipPosition?: TooltipPosition\n}\n\nexport function StoryLink({\n\tinfo,\n\tchildren,\n\ttooltipPosition = 'top',\n}: StoryLinkProps) {\n\tif (!info.storyId) {\n\t\treturn info.componentPath\n\t}\n\tconst currentStoryId = /id=(.+?)&globals/.exec(window.location.href)?.[1]\n\tconst linkPath = `/?path=/docs/${info.storyId}`\n\tconst storyTitle = info.storyTitle\n\n\tif (info.storyId === currentStoryId) {\n\t\treturn (\n\t\t\t<span className={s.currentStory}>\n\t\t\t\t{children ?? storyTitle}{' '}\n\t\t\t\t<strong className={s.currentStoryMark}>\n\t\t\t\t\t(Current Story Page)\n\t\t\t\t</strong>\n\t\t\t</span>\n\t\t)\n\t}\n\n\treturn (\n\t\t<TooltipTrigger\n\t\t\tTriggerElem=\"a\"\n\t\t\ttooltipText=\"View story\"\n\t\t\tclassName={s.storyLink}\n\t\t\thref={linkPath}\n\t\t\ttooltipPosition={tooltipPosition}\n\t\t\tonClick={(e) => {\n\t\t\t\te.preventDefault()\n\t\t\t\tlinkTo(info.storyId!)(e)\n\t\t\t}}\n\t\t>\n\t\t\t{children ?? storyTitle}\n\t\t</TooltipTrigger>\n\t)\n}\n"],"mappings":";;;;;;AAaA,SAAgB,UAAU,EACzB,MACA,UACA,kBAAkB,SACA;AAClB,KAAI,CAAC,KAAK,SAAS;AAClB,SAAO,KAAK;;CAEb,MAAM,iBAAiB,mBAAmB,KAAK,OAAO,SAAS,KAAK,GAAG;CACvE,MAAM,WAAW,gBAAgB,KAAK;CACtC,MAAM,aAAa,KAAK;AAExB,KAAI,KAAK,YAAY,gBAAgB;AACpC,SACC,qBAAC;GAAK,WAAW,EAAE;;IACjB,YAAY;IAAY;IACzB,oBAAC;KAAO,WAAW,EAAE;eAAkB;MAE9B;;IACH;;AAIT,QACC,oBAAC;EACA,aAAY;EACZ,aAAY;EACZ,WAAW,EAAE;EACb,MAAM;EACW;EACjB,UAAU,MAAM;AACf,KAAE,gBAAgB;AAClB,UAAO,KAAK,QAAS,CAAC,EAAE;;YAGxB,YAAY;GACG"}

package/dist/components/StoryLink.module.css

@@ -0,0 +1,13 @@
+.storyLink {
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.currentStory {
+	line-height: 1;
+}
+.currentStoryMark {
+	font-weight: 700;
+	white-space: nowrap;
+}