@storybook/addon-themes 0.0.0-pr-23609-sha-f47ef339

package/README.md

@@ -0,0 +1,72 @@
+# `@storybook/addon-themes
+
+Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org).
+
+![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png)
+
+## Usage
+
+Requires Storybook 7.0 or later. Themes is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+
+```sh
+npm i -D @storybook/addon-themes
+```
+
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
+
+```js
+export default {
+  addons: ['@storybook/addon-themes'],
+};
+```
+
+### 👇 Tool specific configuration
+
+For tool-specific setup, check out the recipes below
+
+- [`@emotion/styled`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/emotion.md)
+- [`@mui/material`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/material-ui.md)
+- [`bootstrap`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/bootstrap.md)
+- [`styled-components`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/styled-components.md)
+- [`tailwind`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/tailwind.md)
+- [`vuetify@3.x`](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator)
+
+Don't see your favorite tool listed? Don't worry! That doesn't mean this addon isn't for you. Check out the ["Writing a custom decorator"](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator) section of the [api reference](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md).
+
+### ❗️ Overriding theme
+
+If you want to override your theme for a particular component or story, you can use the `themes.themeOverride` parameter.
+
+```js
+import React from 'react';
+import { Button } from './Button';
+
+export default {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    themes: {
+      themeOverride: 'light', // component level override
+    },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryDark = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  parameters: {
+    themes: {
+      themeOverride: 'dark', // Story level override
+    },
+  },
+};
+```

package/dist/chunk-5PKFUQBM.mjs

@@ -0,0 +1,3 @@
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`,GLOBAL_KEY="theme",THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`,DEFAULT_ADDON_STATE={themesList:[],themeDefault:void 0},DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};
+
+export { ADDON_ID, DEFAULT_ADDON_STATE, DEFAULT_THEME_PARAMETERS, GLOBAL_KEY, PARAM_KEY, THEME_SWITCHER_ID, THEMING_EVENTS, __export };

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import { Renderer, DecoratorFunction, StoryContext } from '@storybook/types';
+
+interface ClassNameStrategyConfiguration {
+    themes: Record<string, string>;
+    defaultTheme: string;
+    parentSelector?: string;
+}
+declare const withThemeByClassName: <TRenderer extends Renderer = Renderer>({ themes, defaultTheme, parentSelector, }: ClassNameStrategyConfiguration) => DecoratorFunction<TRenderer>;
+
+interface DataAttributeStrategyConfiguration {
+    themes: Record<string, string>;
+    defaultTheme: string;
+    parentSelector?: string;
+    attributeName?: string;
+}
+declare const withThemeByDataAttribute: <TRenderer extends Renderer = Renderer>({ themes, defaultTheme, parentSelector, attributeName, }: DataAttributeStrategyConfiguration) => DecoratorFunction<TRenderer>;
+
+type Theme = Record<string, any>;
+type ThemeMap = Record<string, Theme>;
+interface ProviderStrategyConfiguration {
+    Provider?: any;
+    GlobalStyles?: any;
+    defaultTheme?: string;
+    themes?: ThemeMap;
+}
+declare const withThemeFromJSXProvider: <TRenderer extends Renderer = Renderer>({ Provider, GlobalStyles, defaultTheme, themes, }: ProviderStrategyConfiguration) => DecoratorFunction<TRenderer>;
+
+interface ThemeParameters {
+    themeOverride?: string;
+}
+
+/**
+ *
+ * @param StoryContext
+ * @returns The global theme name set for your stories
+ */
+declare function pluckThemeFromContext({ globals }: StoryContext): string;
+declare function useThemeParameters(): ThemeParameters;
+declare function initializeThemeState(themeNames: string[], defaultTheme: string): void;
+
+declare const helpers_initializeThemeState: typeof initializeThemeState;
+declare const helpers_pluckThemeFromContext: typeof pluckThemeFromContext;
+declare const helpers_useThemeParameters: typeof useThemeParameters;
+declare namespace helpers {
+  export {
+    helpers_initializeThemeState as initializeThemeState,
+    helpers_pluckThemeFromContext as pluckThemeFromContext,
+    helpers_useThemeParameters as useThemeParameters,
+  };
+}
+
+declare const _default: {};
+
+export { ClassNameStrategyConfiguration, DataAttributeStrategyConfiguration, helpers as DecoratorHelpers, ProviderStrategyConfiguration, _default as default, withThemeByClassName, withThemeByDataAttribute, withThemeFromJSXProvider };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[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:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{DecoratorHelpers:()=>helpers_exports,default:()=>src_default,withThemeByClassName:()=>withThemeByClassName,withThemeByDataAttribute:()=>withThemeByDataAttribute,withThemeFromJSXProvider:()=>withThemeFromJSXProvider});module.exports=__toCommonJS(src_exports);var import_preview_api2=require("@storybook/preview-api");var helpers_exports={};__export(helpers_exports,{initializeThemeState:()=>initializeThemeState,pluckThemeFromContext:()=>pluckThemeFromContext,useThemeParameters:()=>useThemeParameters});var import_preview_api=require("@storybook/preview-api");var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`,GLOBAL_KEY="theme",THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`;var DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};function pluckThemeFromContext({globals}){return globals[GLOBAL_KEY]||""}function useThemeParameters(){return(0,import_preview_api.useParameter)(PARAM_KEY,DEFAULT_THEME_PARAMETERS)}function initializeThemeState(themeNames,defaultTheme){import_preview_api.addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES,{defaultTheme,themes:themeNames})}var DEFAULT_ELEMENT_SELECTOR="html",classStringToArray=classString=>classString.split(" ").filter(Boolean),withThemeByClassName=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(),selected=pluckThemeFromContext(context);return(0,import_preview_api2.useEffect)(()=>{let selectedThemeName=themeOverride||selected||defaultTheme,parentElement=document.querySelector(parentSelector);if(!parentElement)return;Object.entries(themes).filter(([themeName])=>themeName!==selectedThemeName).forEach(([themeName,className])=>{let classes=classStringToArray(className);classes.length>0&&parentElement.classList.remove(...classes)});let newThemeClasses=classStringToArray(themes[selectedThemeName]);newThemeClasses.length>0&&parentElement.classList.add(...newThemeClasses)},[themeOverride,selected,parentSelector]),storyFn()});var import_preview_api3=require("@storybook/preview-api");var DEFAULT_ELEMENT_SELECTOR2="html",DEFAULT_DATA_ATTRIBUTE="data-theme",withThemeByDataAttribute=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR2,attributeName=DEFAULT_DATA_ATTRIBUTE})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(),selected=pluckThemeFromContext(context);return(0,import_preview_api3.useEffect)(()=>{let parentElement=document.querySelector(parentSelector),themeKey=themeOverride||selected||defaultTheme;parentElement&&parentElement.setAttribute(attributeName,themes[themeKey])},[themeOverride,selected,parentSelector,attributeName]),storyFn()});var import_react=__toESM(require("react")),import_preview_api4=require("@storybook/preview-api");var pluckThemeFromKeyPairTuple=([_,themeConfig])=>themeConfig,withThemeFromJSXProvider=({Provider,GlobalStyles,defaultTheme,themes={}})=>{let themeNames=Object.keys(themes),initialTheme=defaultTheme||themeNames[0];return initializeThemeState(themeNames,initialTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(),selected=pluckThemeFromContext(context),theme=(0,import_preview_api4.useMemo)(()=>{let selectedThemeName=themeOverride||selected||initialTheme,pairs=Object.entries(themes);return pairs.length===1?pluckThemeFromKeyPairTuple(pairs[0]):themes[selectedThemeName]},[themes,selected,themeOverride]);return Provider?import_react.default.createElement(Provider,{theme},GlobalStyles&&import_react.default.createElement(GlobalStyles,null),storyFn()):import_react.default.createElement(import_react.default.Fragment,null,GlobalStyles&&import_react.default.createElement(GlobalStyles,null),storyFn())}};var src_default={};0&&(module.exports={DecoratorHelpers,withThemeByClassName,withThemeByDataAttribute,withThemeFromJSXProvider});

package/dist/index.mjs

@@ -0,0 +1,7 @@
+import { __export, GLOBAL_KEY, PARAM_KEY, DEFAULT_THEME_PARAMETERS, THEMING_EVENTS } from './chunk-5PKFUQBM.mjs';
+import { useParameter, addons, useEffect, useMemo } from '@storybook/preview-api';
+import React from 'react';
+
+var helpers_exports={};__export(helpers_exports,{initializeThemeState:()=>initializeThemeState,pluckThemeFromContext:()=>pluckThemeFromContext,useThemeParameters:()=>useThemeParameters});function pluckThemeFromContext({globals}){return globals[GLOBAL_KEY]||""}function useThemeParameters(){return useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS)}function initializeThemeState(themeNames,defaultTheme){addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES,{defaultTheme,themes:themeNames});}var DEFAULT_ELEMENT_SELECTOR="html",classStringToArray=classString=>classString.split(" ").filter(Boolean),withThemeByClassName=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(),selected=pluckThemeFromContext(context);return useEffect(()=>{let selectedThemeName=themeOverride||selected||defaultTheme,parentElement=document.querySelector(parentSelector);if(!parentElement)return;Object.entries(themes).filter(([themeName])=>themeName!==selectedThemeName).forEach(([themeName,className])=>{let classes=classStringToArray(className);classes.length>0&&parentElement.classList.remove(...classes);});let newThemeClasses=classStringToArray(themes[selectedThemeName]);newThemeClasses.length>0&&parentElement.classList.add(...newThemeClasses);},[themeOverride,selected,parentSelector]),storyFn()});var DEFAULT_ELEMENT_SELECTOR2="html",DEFAULT_DATA_ATTRIBUTE="data-theme",withThemeByDataAttribute=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR2,attributeName=DEFAULT_DATA_ATTRIBUTE})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(),selected=pluckThemeFromContext(context);return useEffect(()=>{let parentElement=document.querySelector(parentSelector),themeKey=themeOverride||selected||defaultTheme;parentElement&&parentElement.setAttribute(attributeName,themes[themeKey]);},[themeOverride,selected,parentSelector,attributeName]),storyFn()});var pluckThemeFromKeyPairTuple=([_,themeConfig])=>themeConfig,withThemeFromJSXProvider=({Provider,GlobalStyles,defaultTheme,themes={}})=>{let themeNames=Object.keys(themes),initialTheme=defaultTheme||themeNames[0];return initializeThemeState(themeNames,initialTheme),(storyFn,context)=>{let{themeOverride}=useThemeParameters(),selected=pluckThemeFromContext(context),theme=useMemo(()=>{let selectedThemeName=themeOverride||selected||initialTheme,pairs=Object.entries(themes);return pairs.length===1?pluckThemeFromKeyPairTuple(pairs[0]):themes[selectedThemeName]},[themes,selected,themeOverride]);return Provider?React.createElement(Provider,{theme},GlobalStyles&&React.createElement(GlobalStyles,null),storyFn()):React.createElement(React.Fragment,null,GlobalStyles&&React.createElement(GlobalStyles,null),storyFn())}};var src_default={};
+
+export { helpers_exports as DecoratorHelpers, src_default as default, withThemeByClassName, withThemeByDataAttribute, withThemeFromJSXProvider };

package/dist/manager.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/manager.js

@@ -0,0 +1 @@
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[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:!0}):target,mod));var import_manager_api2=require("@storybook/manager-api");var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`;var THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`,DEFAULT_ADDON_STATE={themesList:[],themeDefault:void 0},DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var import_react=__toESM(require("react")),import_manager_api=require("@storybook/manager-api"),import_theming=require("@storybook/theming"),import_components=require("@storybook/components");var IconButtonLabel=import_theming.styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=(0,import_manager_api.useParameter)(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=(0,import_manager_api.useGlobals)(),[{themesList,themeDefault},updateState]=(0,import_manager_api.useAddonState)(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);(0,import_manager_api.useChannel)({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}))}});let label=(0,import_react.useMemo)(()=>{if(themeOverride)return import_react.default.createElement(import_react.default.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&import_react.default.createElement(import_react.default.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide()}}))})},import_react.default.createElement(import_components.IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},import_react.default.createElement(import_components.Icons,{icon:"paintbrush"}),label&&import_react.default.createElement(IconButtonLabel,null,label)))):null};import_manager_api2.addons.register(ADDON_ID,()=>{import_manager_api2.addons.add(THEME_SWITCHER_ID,{title:"Themes",type:import_manager_api2.types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY})});

package/dist/manager.mjs

@@ -0,0 +1,7 @@
+import { ADDON_ID, THEME_SWITCHER_ID, PARAM_KEY, DEFAULT_THEME_PARAMETERS, DEFAULT_ADDON_STATE, THEMING_EVENTS } from './chunk-5PKFUQBM.mjs';
+import { addons, types, useParameter, useGlobals, useAddonState, useChannel } from '@storybook/manager-api';
+import React, { useMemo, Fragment } from 'react';
+import { styled } from '@storybook/theming';
+import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
+
+var IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=useGlobals(),[{themesList,themeDefault},updateState]=useAddonState(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);useChannel({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}));}});let label=useMemo(()=>{if(themeOverride)return React.createElement(React.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&React.createElement(React.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?React.createElement(Fragment,null,React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide();}}))})},React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},React.createElement(Icons,{icon:"paintbrush"}),label&&React.createElement(IconButtonLabel,null,label)))):null};addons.register(ADDON_ID,()=>{addons.add(THEME_SWITCHER_ID,{title:"Themes",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY});});

package/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import { ProjectAnnotations, Renderer } from '@storybook/types';
+
+declare const preview: ProjectAnnotations<Renderer>;
+
+export { preview as default };

package/dist/preview.js

@@ -0,0 +1 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{default:()=>preview_default});module.exports=__toCommonJS(preview_exports);var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`,GLOBAL_KEY="theme",THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`;var THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var preview={globals:{[GLOBAL_KEY]:""}},preview_default=preview;

package/dist/preview.mjs

@@ -0,0 +1,5 @@
+import { GLOBAL_KEY } from './chunk-5PKFUQBM.mjs';
+
+var preview={globals:{[GLOBAL_KEY]:""}},preview_default=preview;
+
+export { preview_default as default };

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/manager.js

@@ -0,0 +1 @@
+import './dist/manager';

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@storybook/addon-themes",
+  "version": "0.0.0-pr-23609-sha-f47ef339",
+  "description": "Switch between multiple themes for you components in Storybook",
+  "keywords": [
+    "css",
+    "essentials",
+    "storybook-addon",
+    "storybook-addons",
+    "style",
+    "themes",
+    "toggle"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/themes",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/addons/themes"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "author": "Shaun Evening",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./manager": {
+      "types": "./dist/manager.d.ts",
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "../../../scripts/prepare/check.ts",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/client-logger": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/components": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/core-events": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/manager-api": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/preview-api": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/theming": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/types": "0.0.0-pr-23609-sha-f47ef339",
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.9.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx",
+      "./src/preview.tsx"
+    ]
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "storybook": {
+    "displayName": "Themes",
+    "unsupportedFrameworks": [
+      "react-native"
+    ],
+    "icon": ""
+  }
+}

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/preview';