@repobuddy/storybook 2.0.1 → 2.1.0

package/esm/storybook-addon-tag-badges/index.js

@@ -1 +1,207 @@
-export * from "./tag_badges.js";
+import { defaultConfig } from "storybook-addon-tag-badges/manager-helpers";
+
+//#region src/storybook-addon-tag-badges/tag_badges.ts
+const [, , , , , , versionBadge] = defaultConfig;
+/**
+* Configuration for story tag badges that appear in the Storybook sidebar.
+* Each badge is associated with a specific tag and displays an emoji with a tooltip.
+*
+* The badges help visually identify stories with certain characteristics:
+* - ✏️ Editor - Stories with live editor
+* - 🆕 New - Recently added stories
+* - 🅱️ Beta - Stories for features in beta
+* - 🪦 Deprecated - Stories for deprecated features
+* - ⚠️ Outdated - Stories that need updating
+* - 🚨 Danger - Stories demonstrating dangerous patterns
+* - 📋 Todo - Stories marked as todo/incomplete
+* - 📝 Code Only - Stories without visual examples
+* - 📸 Snapshot - Stories with snapshot tests
+* - 🧪 Unit - Stories with unit tests
+* - 🔗 Integration - Stories with integration tests
+*
+* Also includes the default version badge from `storybook-addon-tag-badges`.
+*/
+const editorBadge = {
+	tags: "editor",
+	badge: {
+		text: "✏️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Editor"
+	},
+	display: { sidebar: {
+		type: "story",
+		skipInherited: false
+	} }
+};
+const newBadge = {
+	tags: "new",
+	badge: {
+		text: "🆕",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "New"
+	}
+};
+const betaBadge = {
+	tags: "beta",
+	badge: {
+		text: "🅱️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Beta"
+	}
+};
+const propsBadge = {
+	tags: "props",
+	badge: {
+		text: "🔧",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Props"
+	}
+};
+const deprecatedBadge = {
+	tags: "deprecated",
+	badge: {
+		text: "🪦",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Deprecated"
+	}
+};
+const outdatedBadge = {
+	tags: "outdated",
+	badge: {
+		text: "⚠️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Outdated"
+	}
+};
+const dangerBadge = {
+	tags: "danger",
+	badge: {
+		text: "🚨",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Dangerous"
+	}
+};
+const todoBadge = {
+	tags: "todo",
+	badge: {
+		text: "📋",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Todo"
+	}
+};
+const codeOnlyBadge = {
+	tags: "code-only",
+	badge: {
+		text: "📝",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Code Only"
+	}
+};
+const snapshotBadge = {
+	tags: "snapshot",
+	badge: {
+		text: "📸",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Snapshot Test"
+	},
+	display: {
+		sidebar: false,
+		toolbar: ["story"]
+	}
+};
+const unitBadge = {
+	tags: "unit",
+	badge: {
+		text: "🧪",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Unit Test"
+	},
+	display: { sidebar: false }
+};
+const integrationBadge = {
+	tags: "integration",
+	badge: {
+		text: "🔗",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Integration Test"
+	},
+	display: { sidebar: false }
+};
+const keyboardBadge = {
+	tags: "keyboard",
+	badge: {
+		text: "⌨️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Keyboard Interaction"
+	}
+};
+const internalBadge = {
+	tags: "internal",
+	badge: {
+		text: "🔒",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Internal"
+	}
+};
+const tagBadges = [
+	editorBadge,
+	unitBadge,
+	integrationBadge,
+	keyboardBadge,
+	newBadge,
+	betaBadge,
+	deprecatedBadge,
+	outdatedBadge,
+	dangerBadge,
+	propsBadge,
+	todoBadge,
+	codeOnlyBadge,
+	internalBadge,
+	snapshotBadge,
+	versionBadge
+];
+
+//#endregion
+export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, tagBadges, todoBadge, unitBadge };

package/esm/storybook-dark-mode/index.d.ts

@@ -1,3 +1,110 @@
-export * from './dark_mode_docs_container.js';
-export * from './define_dark_mode.js';
-export * from './with_dark_mode.js';
+import { DocsContextProps } from "@storybook/addon-docs/blocks";
+import { PropsWithChildren } from "react";
+import { ThemeVars } from "storybook/theming";
+import { CSSProperties } from "@just-web/css";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DecoratorFunction } from "storybook/internal/types";
+
+//#region src/storybook-dark-mode/dark_mode_docs_container.d.ts
+
+/**
+ * Creates a `DocsContainer` for `storybook` that works with `@storybook-community/storybook-dark-mode`.
+ *
+ * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
+ *
+ * @example
+ * ```ts
+ * // .storybook/preview.tsx
+ * const preview: Preview = {
+ *   parameters: {
+ *     docs: {
+ *       container: createDarkModeDocsContainer()
+ *     }
+ *   }
+ * }
+ * ```
+ */
+declare function createDarkModeDocsContainer(customThemes?: {
+  light?: ThemeVars | undefined;
+  dark?: ThemeVars | undefined;
+} | undefined): (props: PropsWithChildren<{
+  context: DocsContextProps;
+}>) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/storybook-dark-mode/define_dark_mode.d.ts
+/**
+ * Configuration parameters for `@storybook-community/storybook-dark-mode`.
+ */
+interface DarkModeParam {
+  /** The current theme ('dark' or 'light') */
+  current?: 'dark' | 'light' | undefined;
+  /**
+   * CSS class(es) to apply in dark mode.
+   */
+  darkClass?: string | string[] | undefined;
+  /**
+   * CSS style(s) to apply in dark mode.
+   *
+   * This only works when using `withStoryRoot`.
+   */
+  darkStyle?: CSSProperties | undefined;
+  /** CSS class(es) to apply in light mode */
+  lightClass?: string | string[] | undefined;
+  /**
+   * CSS style(s) to apply in light mode.
+   *
+   * This only works when using `withStoryRoot`.
+   */
+  lightStyle?: CSSProperties | undefined;
+  /** Dark theme variables */
+  dark?: ThemeVars;
+  /** Light theme variables */
+  light?: ThemeVars;
+  /** Element to apply theme classes to ('html' or 'body') */
+  classTarget?: 'html' | 'body' | undefined;
+  /** Whether to apply theme styles to preview iframe */
+  stylePreview?: boolean | undefined;
+}
+/**
+ * Defines `@storybook-community/storybook-dark-mode` parameters for Storybook stories.
+ *
+ * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+ * @returns An object containing the dark mode parameter configuration
+ *
+ * @example
+ * ```ts
+ * // ./storybook/preview.tsx
+ *
+ * export const preview = {
+ *   parameters: {
+ *     ...defineDarkModeParam({ darkClass: 'dark' })
+ *   }
+ * }
+ */
+declare function defineDarkModeParam(darkMode: DarkModeParam): {
+  darkMode: DarkModeParam;
+};
+//#endregion
+//#region src/storybook-dark-mode/with_dark_mode.d.ts
+/**
+ * Applies additional dark mode behavior.
+ *
+ * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+ * @returns A decorator function that applies additional dark mode behavior.
+ */
+declare function withDarkMode(options?: {
+  /**
+   * CSS class(es) to apply to the body element.
+   *
+   * Useful when using Tailwind CSS and `classTarget: 'html'`
+   */
+  bodyClass?: string | string[] | undefined;
+  /**
+   * CSS style(s) to apply to the body element.
+   *
+   * Useful when using Tailwind CSS and `classTarget: 'html'`
+   */
+  bodyStyle?: CSSProperties | undefined;
+} | undefined): DecoratorFunction<any, any>;
+//#endregion
+export { DarkModeParam, createDarkModeDocsContainer, defineDarkModeParam, withDarkMode };

package/esm/storybook-dark-mode/index.js

@@ -1,3 +1,342 @@
-export * from "./dark_mode_docs_container.js";
-export * from "./define_dark_mode.js";
-export * from "./with_dark_mode.js";
+import { DARK_MODE_EVENT_NAME, useDarkMode } from "@storybook-community/storybook-dark-mode";
+import { DocsContainer } from "@storybook/addon-docs/blocks";
+import { useEffect, useState } from "react";
+import { themes } from "storybook/theming";
+import { toDOMStyle } from "@just-web/css";
+
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function() {
+	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
+});
+
+//#endregion
+//#region ../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-jsx-runtime.development.js
+/**
+* @license React
+* react-jsx-runtime.development.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_jsx_runtime_development = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-jsx-runtime.development.js": ((exports) => {
+	(function() {
+		function getComponentNameFromType(type) {
+			if (null == type) return null;
+			if ("function" === typeof type) return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
+			if ("string" === typeof type) return type;
+			switch (type) {
+				case REACT_FRAGMENT_TYPE: return "Fragment";
+				case REACT_PROFILER_TYPE: return "Profiler";
+				case REACT_STRICT_MODE_TYPE: return "StrictMode";
+				case REACT_SUSPENSE_TYPE: return "Suspense";
+				case REACT_SUSPENSE_LIST_TYPE: return "SuspenseList";
+				case REACT_ACTIVITY_TYPE: return "Activity";
+			}
+			if ("object" === typeof type) switch ("number" === typeof type.tag && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), type.$$typeof) {
+				case REACT_PORTAL_TYPE: return "Portal";
+				case REACT_CONTEXT_TYPE: return type.displayName || "Context";
+				case REACT_CONSUMER_TYPE: return (type._context.displayName || "Context") + ".Consumer";
+				case REACT_FORWARD_REF_TYPE:
+					var innerType = type.render;
+					type = type.displayName;
+					type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
+					return type;
+				case REACT_MEMO_TYPE: return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
+				case REACT_LAZY_TYPE:
+					innerType = type._payload;
+					type = type._init;
+					try {
+						return getComponentNameFromType(type(innerType));
+					} catch (x) {}
+			}
+			return null;
+		}
+		function testStringCoercion(value) {
+			return "" + value;
+		}
+		function checkKeyStringCoercion(value) {
+			try {
+				testStringCoercion(value);
+				var JSCompiler_inline_result = !1;
+			} catch (e) {
+				JSCompiler_inline_result = !0;
+			}
+			if (JSCompiler_inline_result) {
+				JSCompiler_inline_result = console;
+				var JSCompiler_temp_const = JSCompiler_inline_result.error;
+				var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
+				JSCompiler_temp_const.call(JSCompiler_inline_result, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", JSCompiler_inline_result$jscomp$0);
+				return testStringCoercion(value);
+			}
+		}
+		function getTaskName(type) {
+			if (type === REACT_FRAGMENT_TYPE) return "<>";
+			if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE) return "<...>";
+			try {
+				var name = getComponentNameFromType(type);
+				return name ? "<" + name + ">" : "<...>";
+			} catch (x) {
+				return "<...>";
+			}
+		}
+		function getOwner() {
+			var dispatcher = ReactSharedInternals.A;
+			return null === dispatcher ? null : dispatcher.getOwner();
+		}
+		function UnknownOwner() {
+			return Error("react-stack-top-frame");
+		}
+		function hasValidKey(config) {
+			if (hasOwnProperty.call(config, "key")) {
+				var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+				if (getter && getter.isReactWarning) return !1;
+			}
+			return void 0 !== config.key;
+		}
+		function defineKeyPropWarningGetter(props, displayName) {
+			function warnAboutAccessingKey() {
+				specialPropKeyWarningShown || (specialPropKeyWarningShown = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", displayName));
+			}
+			warnAboutAccessingKey.isReactWarning = !0;
+			Object.defineProperty(props, "key", {
+				get: warnAboutAccessingKey,
+				configurable: !0
+			});
+		}
+		function elementRefGetterWithDeprecationWarning() {
+			var componentName = getComponentNameFromType(this.type);
+			didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."));
+			componentName = this.props.ref;
+			return void 0 !== componentName ? componentName : null;
+		}
+		function ReactElement(type, key, props, owner, debugStack, debugTask) {
+			var refProp = props.ref;
+			type = {
+				$$typeof: REACT_ELEMENT_TYPE,
+				type,
+				key,
+				props,
+				_owner: owner
+			};
+			null !== (void 0 !== refProp ? refProp : null) ? Object.defineProperty(type, "ref", {
+				enumerable: !1,
+				get: elementRefGetterWithDeprecationWarning
+			}) : Object.defineProperty(type, "ref", {
+				enumerable: !1,
+				value: null
+			});
+			type._store = {};
+			Object.defineProperty(type._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			});
+			Object.defineProperty(type, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			});
+			Object.defineProperty(type, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: debugStack
+			});
+			Object.defineProperty(type, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: debugTask
+			});
+			Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+			return type;
+		}
+		function jsxDEVImpl(type, config, maybeKey, isStaticChildren, debugStack, debugTask) {
+			var children = config.children;
+			if (void 0 !== children) if (isStaticChildren) if (isArrayImpl(children)) {
+				for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++) validateChildKeys(children[isStaticChildren]);
+				Object.freeze && Object.freeze(children);
+			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+			else validateChildKeys(children);
+			if (hasOwnProperty.call(config, "key")) {
+				children = getComponentNameFromType(type);
+				var keys = Object.keys(config).filter(function(k) {
+					return "key" !== k;
+				});
+				isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
+				didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", isStaticChildren, children, keys, children), didWarnAboutKeySpread[children + isStaticChildren] = !0);
+			}
+			children = null;
+			void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
+			hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
+			if ("key" in config) {
+				maybeKey = {};
+				for (var propName in config) "key" !== propName && (maybeKey[propName] = config[propName]);
+			} else maybeKey = config;
+			children && defineKeyPropWarningGetter(maybeKey, "function" === typeof type ? type.displayName || type.name || "Unknown" : type);
+			return ReactElement(type, children, maybeKey, getOwner(), debugStack, debugTask);
+		}
+		function validateChildKeys(node) {
+			isValidElement(node) ? node._store && (node._store.validated = 1) : "object" === typeof node && null !== node && node.$$typeof === REACT_LAZY_TYPE && ("fulfilled" === node._payload.status ? isValidElement(node._payload.value) && node._payload.value._store && (node._payload.value._store.validated = 1) : node._store && (node._store.validated = 1));
+		}
+		function isValidElement(object) {
+			return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
+		}
+		var React = __require("react"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		React = { react_stack_bottom_frame: function(callStackForError) {
+			return callStackForError();
+		} };
+		var specialPropKeyWarningShown;
+		var didWarnAboutElementRef = {};
+		var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(React, UnknownOwner)();
+		var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+		var didWarnAboutKeySpread = {};
+		exports.Fragment = REACT_FRAGMENT_TYPE;
+		exports.jsx = function(type, config, maybeKey) {
+			var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+			return jsxDEVImpl(type, config, maybeKey, !1, trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack, trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask);
+		};
+		exports.jsxs = function(type, config, maybeKey) {
+			var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+			return jsxDEVImpl(type, config, maybeKey, !0, trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack, trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask);
+		};
+	})();
+}) });
+
+//#endregion
+//#region ../../node_modules/.pnpm/react@19.2.0/node_modules/react/jsx-runtime.js
+var require_jsx_runtime = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react@19.2.0/node_modules/react/jsx-runtime.js": ((exports, module) => {
+	module.exports = require_react_jsx_runtime_development();
+}) });
+
+//#endregion
+//#region src/storybook-dark-mode/dark_mode_docs_container.tsx
+var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime());
+/**
+* Creates a `DocsContainer` for `storybook` that works with `@storybook-community/storybook-dark-mode`.
+*
+* @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
+*
+* @example
+* ```ts
+* // .storybook/preview.tsx
+* const preview: Preview = {
+*   parameters: {
+*     docs: {
+*       container: createDarkModeDocsContainer()
+*     }
+*   }
+* }
+* ```
+*/
+function createDarkModeDocsContainer(customThemes) {
+	return function DarkModeDocsContainer(props) {
+		const [isDark, setDark] = useState(true);
+		useEffect(() => {
+			props.context.channel.on(DARK_MODE_EVENT_NAME, setDark);
+			return () => props.context.channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+		}, [props.context.channel]);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DocsContainer, {
+			...props,
+			theme: isDark ? customThemes?.dark ?? themes.dark : customThemes?.light ?? themes.light,
+			children: props.children
+		});
+	};
+}
+
+//#endregion
+//#region src/storybook-dark-mode/define_dark_mode.ts
+/**
+* Defines `@storybook-community/storybook-dark-mode` parameters for Storybook stories.
+*
+* @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+* @returns An object containing the dark mode parameter configuration
+*
+* @example
+* ```ts
+* // ./storybook/preview.tsx
+*
+* export const preview = {
+*   parameters: {
+*     ...defineDarkModeParam({ darkClass: 'dark' })
+*   }
+* }
+*/
+function defineDarkModeParam(darkMode) {
+	return { darkMode };
+}
+
+//#endregion
+//#region src/storybook-dark-mode/with_dark_mode.tsx
+/**
+* Applies additional dark mode behavior.
+*
+* @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+* @returns A decorator function that applies additional dark mode behavior.
+*/
+function withDarkMode(options) {
+	return function darkModeDecorator(Story, { parameters }) {
+		const darkMode = parameters.darkMode;
+		if (!darkMode) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Story, {});
+		const dark = useDarkMode();
+		const target = darkMode.classTarget === "html" ? document.documentElement : document.body;
+		if (dark) {
+			removeStyle(target, darkMode.lightStyle);
+			addStyle(target, darkMode.darkStyle);
+		} else {
+			removeStyle(target, darkMode.darkStyle);
+			addStyle(target, darkMode.lightStyle);
+		}
+		if (options?.bodyClass) addClass(document.body, options.bodyClass);
+		if (options?.bodyStyle) addStyle(document.body, options.bodyStyle);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Story, {});
+	};
+}
+function addClass(target, className) {
+	if (!className) return;
+	if (typeof className === "string") target.classList.add(...className.split(" "));
+	else if (Array.isArray(className)) target.classList.add(...className);
+}
+function addStyle(target, style) {
+	if (style) for (const [key, value] of Object.entries(toDOMStyle(style))) target.style.setProperty(key, value);
+}
+function removeStyle(target, style) {
+	if (style) for (const key of Object.keys(toDOMStyle(style))) target.style.removeProperty(key);
+}
+
+//#endregion
+export { createDarkModeDocsContainer, defineDarkModeParam, withDarkMode };