@saas-ui/storybook-addon 7.0.0-next.6 → 7.0.0-next.7

package/dist/arg-types.d.ts

@@ -1,52 +0,0 @@
-import { ArgTypes } from '@storybook/types';
-import { ThemingProps } from '@chakra-ui/react';
-
-declare global {
-	interface SymbolConstructor {
-		readonly observable: symbol;
-	}
-}
-
-/**
- * `keyof` alternative which omits non-string keys
- */
-type KeyOf<T> = [T] extends [never] ? never : T extends object ? Extract<keyof T, string> : never;
-type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme';
-/**
- * Create Storybook controls based on a Chakra UI theme component.
- *
- * @example
- * export default {
- *   title: "Components / Forms / Button",
- *   argTypes: getThemingArgTypes(theme, "Button"),
- * }
- *
- * @example full example
- * import { Meta, StoryFn } from "@storybook/react"
- * import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
- * import { theme } from "<your-theme>"
- *
- * export default {
- *   title: "Components / Forms / Button",
- *   argTypes: {
- *     ...getThemingArgTypes(theme, "Button"),
- *     children: "string"
- *   },
- *   args: { children: "Button" },
- * } as Meta
- *
- * interface StoryProps extends ThemingProps<"Button"> {
- *   children?: React.ReactNode
- * }
- *
- * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />
- *
- * @param theme same Chakra UI theme used in .storybook/preview.tsx
- * @param componentName component name to create the ArgTypes for
- */
-declare function getThemingArgTypes<Theme extends {
-    colors: Record<string, any>;
-    components: Record<string, any>;
-}, ComponentName extends KeyOf<Theme['components']>>(theme: Theme, componentName: ComponentName): ArgTypes<Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>> | undefined;
-
-export { ThemingArgTypeKey, getThemingArgTypes };

package/dist/arg-types.js

@@ -1,7 +0,0 @@
-'use strict';
-
-function y(t){let o=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>o.includes(e))}function u(t,o){var c,i,m,p;let e=t.components[o];if(!e)return;let n={},s=Object.keys(e.variants||{});s.length&&(n.variant={type:{name:"enum",value:s},defaultValue:(c=e.defaultProps)==null?void 0:c.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:(i=e.defaultProps)==null?void 0:i.size}),(m=e.defaultProps)!=null&&m.colorScheme){let l=Object.entries(t.colors).filter(([,r])=>y(r)).map(([r])=>r);l.length&&(n.colorScheme={type:{name:"enum",value:l},defaultValue:(p=e.defaultProps)==null?void 0:p.colorScheme});}return n}
-
-exports.getThemingArgTypes = u;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=arg-types.js.map

package/dist/arg-types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/arg-types.ts"],"names":["validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","_a","_b","_c","_d","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAiBA,SAASA,EAAoBC,EAAe,CAC1C,IAAMC,EAAY,OAAO,KAAKD,GAAS,CAAC,CAAC,EACzC,MAAO,CACL,KACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,KACF,EAAE,MAAOE,GAASD,EAAU,SAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,EAAcC,EAA8B,CAvE9C,IAAAC,EAAAC,EAAAC,EAAAC,EAwEE,IAAMC,EAAYN,EAAM,WAAWC,CAAa,EAChD,GAAI,CAACK,EACH,OAGF,IAAMC,EAEF,CAAC,EAECC,EAAiB,OAAO,KAAKF,EAAU,UAAY,CAAC,CAAC,EACvDE,EAAe,SACjBD,EAAS,QAAU,CACjB,KAAM,CAAE,KAAM,OAAQ,MAAOC,CAAe,EAC5C,cAAcN,EAAAI,EAAU,eAAV,YAAAJ,EAAwB,OACxC,GAGF,IAAMO,EAAc,OAAO,KAAKH,EAAU,OAAS,CAAC,CAAC,EAQrD,GAPIG,EAAY,SACdF,EAAS,KAAO,CACd,KAAM,CAAE,KAAM,OAAQ,MAAOE,CAAY,EACzC,cAAcN,EAAAG,EAAU,eAAV,YAAAH,EAAwB,IACxC,IAGEC,EAAAE,EAAU,eAAV,MAAAF,EAAyB,YAAgB,CAC3C,IAAMM,EAAe,OAAO,QAAQV,EAAM,MAAM,EAC7C,OAAO,CAAC,CAAC,CAAEJ,CAAK,IAAMD,EAAoBC,CAAK,CAAC,EAChD,IAAI,CAAC,CAACe,CAAG,IAAMA,CAAG,EAEjBD,EAAa,SACfH,EAAS,YAAc,CACrB,KAAM,CAAE,KAAM,OAAQ,MAAOG,CAAa,EAC1C,cAAcL,EAAAC,EAAU,eAAV,YAAAD,EAAwB,WACxC,GAIJ,OAAOE,CACT","sourcesContent":["import type { ArgTypes } from '@storybook/react'\nimport type { ThemingProps } from '@chakra-ui/react'\n\n/**\n * `keyof` alternative which omits non-string keys\n */\ntype KeyOf<T> = [T] extends [never]\n  ? never\n  : T extends object\n  ? Extract<keyof T, string>\n  : never\n\nexport type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme'\n\n/**\n * Checks if the given color scale object has all required keys: 50, 100, 200...900.\n */\nfunction validateColorScheme(value: object) {\n  const valueKeys = Object.keys(value || {})\n  return [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ].every((term) => valueKeys.includes(term))\n}\n\n/**\n * Create Storybook controls based on a Chakra UI theme component.\n *\n * @example\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: getThemingArgTypes(theme, \"Button\"),\n * }\n *\n * @example full example\n * import { Meta, StoryFn } from \"@storybook/react\"\n * import { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\n * import { theme } from \"<your-theme>\"\n *\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: {\n *     ...getThemingArgTypes(theme, \"Button\"),\n *     children: \"string\"\n *   },\n *   args: { children: \"Button\" },\n * } as Meta\n *\n * interface StoryProps extends ThemingProps<\"Button\"> {\n *   children?: React.ReactNode\n * }\n *\n * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />\n *\n * @param theme same Chakra UI theme used in .storybook/preview.tsx\n * @param componentName component name to create the ArgTypes for\n */\nexport function getThemingArgTypes<\n  Theme extends {\n    colors: Record<string, any>\n    components: Record<string, any>\n  },\n  ComponentName extends KeyOf<Theme['components']>\n>(theme: Theme, componentName: ComponentName) {\n  const component = theme.components[componentName]\n  if (!component) {\n    return undefined\n  }\n\n  const argTypes: ArgTypes<\n    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>\n  > = {}\n\n  const variantOptions = Object.keys(component.variants || {})\n  if (variantOptions.length) {\n    argTypes.variant = {\n      type: { name: 'enum', value: variantOptions },\n      defaultValue: component.defaultProps?.variant,\n    }\n  }\n\n  const sizeOptions = Object.keys(component.sizes || {})\n  if (sizeOptions.length) {\n    argTypes.size = {\n      type: { name: 'enum', value: sizeOptions },\n      defaultValue: component.defaultProps?.size,\n    }\n  }\n\n  if (component.defaultProps?.['colorScheme']) {\n    const colorSchemes = Object.entries(theme.colors)\n      .filter(([, value]) => validateColorScheme(value))\n      .map(([key]) => key)\n\n    if (colorSchemes.length) {\n      argTypes.colorScheme = {\n        type: { name: 'enum', value: colorSchemes },\n        defaultValue: component.defaultProps?.colorScheme,\n      }\n    }\n  }\n\n  return argTypes\n}\n"]}

package/dist/arg-types.mjs

@@ -1,5 +0,0 @@
-function y(t){let o=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>o.includes(e))}function u(t,o){var c,i,m,p;let e=t.components[o];if(!e)return;let n={},s=Object.keys(e.variants||{});s.length&&(n.variant={type:{name:"enum",value:s},defaultValue:(c=e.defaultProps)==null?void 0:c.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:(i=e.defaultProps)==null?void 0:i.size}),(m=e.defaultProps)!=null&&m.colorScheme){let l=Object.entries(t.colors).filter(([,r])=>y(r)).map(([r])=>r);l.length&&(n.colorScheme={type:{name:"enum",value:l},defaultValue:(p=e.defaultProps)==null?void 0:p.colorScheme});}return n}
-
-export { u as getThemingArgTypes };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=arg-types.mjs.map

package/dist/arg-types.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/arg-types.ts"],"names":["validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","_a","_b","_c","_d","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAiBA,SAASA,EAAoBC,EAAe,CAC1C,IAAMC,EAAY,OAAO,KAAKD,GAAS,CAAC,CAAC,EACzC,MAAO,CACL,KACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,KACF,EAAE,MAAOE,GAASD,EAAU,SAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,EAAcC,EAA8B,CAvE9C,IAAAC,EAAAC,EAAAC,EAAAC,EAwEE,IAAMC,EAAYN,EAAM,WAAWC,CAAa,EAChD,GAAI,CAACK,EACH,OAGF,IAAMC,EAEF,CAAC,EAECC,EAAiB,OAAO,KAAKF,EAAU,UAAY,CAAC,CAAC,EACvDE,EAAe,SACjBD,EAAS,QAAU,CACjB,KAAM,CAAE,KAAM,OAAQ,MAAOC,CAAe,EAC5C,cAAcN,EAAAI,EAAU,eAAV,YAAAJ,EAAwB,OACxC,GAGF,IAAMO,EAAc,OAAO,KAAKH,EAAU,OAAS,CAAC,CAAC,EAQrD,GAPIG,EAAY,SACdF,EAAS,KAAO,CACd,KAAM,CAAE,KAAM,OAAQ,MAAOE,CAAY,EACzC,cAAcN,EAAAG,EAAU,eAAV,YAAAH,EAAwB,IACxC,IAGEC,EAAAE,EAAU,eAAV,MAAAF,EAAyB,YAAgB,CAC3C,IAAMM,EAAe,OAAO,QAAQV,EAAM,MAAM,EAC7C,OAAO,CAAC,CAAC,CAAEJ,CAAK,IAAMD,EAAoBC,CAAK,CAAC,EAChD,IAAI,CAAC,CAACe,CAAG,IAAMA,CAAG,EAEjBD,EAAa,SACfH,EAAS,YAAc,CACrB,KAAM,CAAE,KAAM,OAAQ,MAAOG,CAAa,EAC1C,cAAcL,EAAAC,EAAU,eAAV,YAAAD,EAAwB,WACxC,GAIJ,OAAOE,CACT","sourcesContent":["import type { ArgTypes } from '@storybook/react'\nimport type { ThemingProps } from '@chakra-ui/react'\n\n/**\n * `keyof` alternative which omits non-string keys\n */\ntype KeyOf<T> = [T] extends [never]\n  ? never\n  : T extends object\n  ? Extract<keyof T, string>\n  : never\n\nexport type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme'\n\n/**\n * Checks if the given color scale object has all required keys: 50, 100, 200...900.\n */\nfunction validateColorScheme(value: object) {\n  const valueKeys = Object.keys(value || {})\n  return [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ].every((term) => valueKeys.includes(term))\n}\n\n/**\n * Create Storybook controls based on a Chakra UI theme component.\n *\n * @example\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: getThemingArgTypes(theme, \"Button\"),\n * }\n *\n * @example full example\n * import { Meta, StoryFn } from \"@storybook/react\"\n * import { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\n * import { theme } from \"<your-theme>\"\n *\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: {\n *     ...getThemingArgTypes(theme, \"Button\"),\n *     children: \"string\"\n *   },\n *   args: { children: \"Button\" },\n * } as Meta\n *\n * interface StoryProps extends ThemingProps<\"Button\"> {\n *   children?: React.ReactNode\n * }\n *\n * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />\n *\n * @param theme same Chakra UI theme used in .storybook/preview.tsx\n * @param componentName component name to create the ArgTypes for\n */\nexport function getThemingArgTypes<\n  Theme extends {\n    colors: Record<string, any>\n    components: Record<string, any>\n  },\n  ComponentName extends KeyOf<Theme['components']>\n>(theme: Theme, componentName: ComponentName) {\n  const component = theme.components[componentName]\n  if (!component) {\n    return undefined\n  }\n\n  const argTypes: ArgTypes<\n    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>\n  > = {}\n\n  const variantOptions = Object.keys(component.variants || {})\n  if (variantOptions.length) {\n    argTypes.variant = {\n      type: { name: 'enum', value: variantOptions },\n      defaultValue: component.defaultProps?.variant,\n    }\n  }\n\n  const sizeOptions = Object.keys(component.sizes || {})\n  if (sizeOptions.length) {\n    argTypes.size = {\n      type: { name: 'enum', value: sizeOptions },\n      defaultValue: component.defaultProps?.size,\n    }\n  }\n\n  if (component.defaultProps?.['colorScheme']) {\n    const colorSchemes = Object.entries(theme.colors)\n      .filter(([, value]) => validateColorScheme(value))\n      .map(([key]) => key)\n\n    if (colorSchemes.length) {\n      argTypes.colorScheme = {\n        type: { name: 'enum', value: colorSchemes },\n        defaultValue: component.defaultProps?.colorScheme,\n      }\n    }\n  }\n\n  return argTypes\n}\n"]}

package/dist/color-mode/ColorModeSync.d.ts

@@ -1,6 +0,0 @@
-/**
- * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI
- */
-declare function ColorModeSync(): null;
-
-export { ColorModeSync };

package/dist/color-mode/ColorModeSync.js

@@ -1,11 +0,0 @@
-'use strict';
-
-var react$1 = require('react');
-var react = require('@chakra-ui/react');
-var previewApi = require('@storybook/preview-api');
-
-var o="@saas-ui/storybook-addon2",t={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};function d(){let{setColorMode:e}=react.useColorMode();return react$1.useEffect(()=>{let r=previewApi.addons.getChannel(),n=O=>e(O);return r.on(t.TOGGLE_COLOR_MODE,n),()=>{r.removeListener(t.TOGGLE_COLOR_MODE,n);}},[e]),null}
-
-exports.ColorModeSync = d;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=ColorModeSync.js.map

package/dist/color-mode/ColorModeSync.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/color-mode/ColorModeSync.tsx","../../src/constants.ts"],"names":["useEffect","useColorMode","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","ColorModeSync","setColorMode","channel","colorModeToolCallback","value"],"mappings":"AAAA,OAAS,aAAAA,MAAiB,QAC1B,OAAS,gBAAAC,MAAoB,mBAC7B,OAAS,UAAAC,MAAc,yBCFhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDDO,SAASK,GAAgB,CAC9B,GAAM,CAAE,aAAAC,CAAa,EAAIR,EAAa,EAEtC,OAAAD,EAAU,IAAM,CACd,IAAMU,EAAUR,EAAO,WAAW,EAE5BS,EAAyBC,GAAkBH,EAAaG,CAAK,EACnE,OAAAF,EAAQ,GAAGH,EAAO,kBAAmBI,CAAqB,EAEnD,IAAM,CACXD,EAAQ,eAAeH,EAAO,kBAAmBI,CAAqB,CACxE,CACF,EAAG,CAACF,CAAY,CAAC,EAEV,IACT","sourcesContent":["import { useEffect } from 'react'\nimport { useColorMode } from '@chakra-ui/react'\nimport { addons } from '@storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  const { setColorMode } = useColorMode()\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => setColorMode(value)\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [setColorMode])\n\n  return null\n}\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/color-mode/ColorModeSync.mjs

@@ -1,9 +0,0 @@
-import { useEffect } from 'react';
-import { useColorMode } from '@chakra-ui/react';
-import { addons } from '@storybook/preview-api';
-
-var o="@saas-ui/storybook-addon2",t={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};function d(){let{setColorMode:e}=useColorMode();return useEffect(()=>{let r=addons.getChannel(),n=O=>e(O);return r.on(t.TOGGLE_COLOR_MODE,n),()=>{r.removeListener(t.TOGGLE_COLOR_MODE,n);}},[e]),null}
-
-export { d as ColorModeSync };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=ColorModeSync.mjs.map

package/dist/color-mode/ColorModeSync.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/color-mode/ColorModeSync.tsx","../../src/constants.ts"],"names":["useEffect","useColorMode","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","ColorModeSync","setColorMode","channel","colorModeToolCallback","value"],"mappings":"AAAA,OAAS,aAAAA,MAAiB,QAC1B,OAAS,gBAAAC,MAAoB,mBAC7B,OAAS,UAAAC,MAAc,yBCFhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDDO,SAASK,GAAgB,CAC9B,GAAM,CAAE,aAAAC,CAAa,EAAIR,EAAa,EAEtC,OAAAD,EAAU,IAAM,CACd,IAAMU,EAAUR,EAAO,WAAW,EAE5BS,EAAyBC,GAAkBH,EAAaG,CAAK,EACnE,OAAAF,EAAQ,GAAGH,EAAO,kBAAmBI,CAAqB,EAEnD,IAAM,CACXD,EAAQ,eAAeH,EAAO,kBAAmBI,CAAqB,CACxE,CACF,EAAG,CAACF,CAAY,CAAC,EAEV,IACT","sourcesContent":["import { useEffect } from 'react'\nimport { useColorMode } from '@chakra-ui/react'\nimport { addons } from '@storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  const { setColorMode } = useColorMode()\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => setColorMode(value)\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [setColorMode])\n\n  return null\n}\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/color-mode/ColorModeTool.d.ts

@@ -1,5 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const ColorModeTool: () => react_jsx_runtime.JSX.Element;
-
-export { ColorModeTool };

package/dist/color-mode/ColorModeTool.js

@@ -1,32 +0,0 @@
-'use strict';
-
-var c = require('react');
-var components = require('@storybook/components');
-var managerApi = require('@storybook/manager-api');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
-var c__namespace = /*#__PURE__*/_interopNamespace(c);
-
-var t="@saas-ui/storybook-addon2",a={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};var p=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),i=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5"}),jsxRuntime.jsx("path",{d:"M12 1v2"}),jsxRuntime.jsx("path",{d:"M12 21v2"}),jsxRuntime.jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M1 12h2"}),jsxRuntime.jsx("path",{d:"M21 12h2"}),jsxRuntime.jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsxRuntime.jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),k=()=>{let r=localStorage.getItem("chakra-ui-color-mode")==="dark",[e,n]=c__namespace.useState(r),l=managerApi.addons.getChannel();return jsxRuntime.jsx(components.IconButton,{title:`Set color mode to ${e?"light":"dark"}`,active:e,onClick:()=>{l.emit(a.TOGGLE_COLOR_MODE,e?"light":"dark"),n(s=>!s);},children:e?jsxRuntime.jsx(i,{}):jsxRuntime.jsx(p,{})})};
-
-exports.ColorModeTool = k;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=ColorModeTool.js.map

package/dist/color-mode/ColorModeTool.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/color-mode/ColorModeTool.tsx","../../src/constants.ts"],"names":["React","IconButton","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev"],"mappings":"AAAA,UAAYA,MAAW,QACvB,OAAS,cAAAC,MAAkB,wBAC3B,OAAS,UAAAC,MAAc,yBCFhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDDI,cAAAK,EASA,QAAAC,MATA,oBAFJ,IAAMC,EAAW,IACfF,EAAC,OAAI,QAAQ,YAAY,UAAU,QACjC,SAAAA,EAAC,QACC,KAAK,eACL,EAAE,qOACH,EACH,EAGIG,EAAU,IACdH,EAAC,OAAI,QAAQ,YAAY,UAAU,QACjC,SAAAC,EAAC,KACC,eAAe,QACf,cAAc,QACd,YAAY,IACZ,KAAK,OACL,OAAO,eAEP,UAAAD,EAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,IAAI,EAC9BA,EAAC,QAAK,EAAE,UAAU,EAClBA,EAAC,QAAK,EAAE,WAAW,EACnBA,EAAC,QAAK,EAAE,uBAAuB,EAC/BA,EAAC,QAAK,EAAE,yBAAyB,EACjCA,EAAC,QAAK,EAAE,UAAU,EAClBA,EAAC,QAAK,EAAE,WAAW,EACnBA,EAAC,QAAK,EAAE,wBAAwB,EAChCA,EAAC,QAAK,EAAE,wBAAwB,GAClC,EACF,EAGWI,EAAgB,IAAM,CACjC,IAAMC,EAAa,aAAa,QAAQ,sBAAsB,IAAM,OAE9D,CAACC,EAAUC,CAAW,EAAU,WAASF,CAAU,EAEnDG,EAAUd,EAAO,WAAW,EAOlC,OACEM,EAACP,EAAA,CACC,MAAO,qBAAqBa,EAAW,QAAU,SACjD,OAAQA,EACR,QATiB,IAAM,CACzBE,EAAQ,KAAKT,EAAO,kBAAoBO,EAAoB,QAAT,MAAgB,EACnEC,EAAaE,GAAS,CAACA,CAAI,CAC7B,EAQK,SAAAH,EAAWN,EAACG,EAAA,EAAQ,EAAKH,EAACE,EAAA,EAAS,EACtC,CAEJ","sourcesContent":["import * as React from 'react'\nimport { IconButton } from '@storybook/components'\nimport { addons } from '@storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/color-mode/ColorModeTool.mjs

@@ -1,10 +0,0 @@
-import * as c from 'react';
-import { IconButton } from '@storybook/components';
-import { addons } from '@storybook/manager-api';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var t="@saas-ui/storybook-addon2",a={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};var p=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),i=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsx("circle",{cx:"12",cy:"12",r:"5"}),jsx("path",{d:"M12 1v2"}),jsx("path",{d:"M12 21v2"}),jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsx("path",{d:"M1 12h2"}),jsx("path",{d:"M21 12h2"}),jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),k=()=>{let r=localStorage.getItem("chakra-ui-color-mode")==="dark",[e,n]=c.useState(r),l=addons.getChannel();return jsx(IconButton,{title:`Set color mode to ${e?"light":"dark"}`,active:e,onClick:()=>{l.emit(a.TOGGLE_COLOR_MODE,e?"light":"dark"),n(s=>!s);},children:e?jsx(i,{}):jsx(p,{})})};
-
-export { k as ColorModeTool };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=ColorModeTool.mjs.map

package/dist/color-mode/ColorModeTool.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/color-mode/ColorModeTool.tsx","../../src/constants.ts"],"names":["React","IconButton","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev"],"mappings":"AAAA,UAAYA,MAAW,QACvB,OAAS,cAAAC,MAAkB,wBAC3B,OAAS,UAAAC,MAAc,yBCFhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDDI,cAAAK,EASA,QAAAC,MATA,oBAFJ,IAAMC,EAAW,IACfF,EAAC,OAAI,QAAQ,YAAY,UAAU,QACjC,SAAAA,EAAC,QACC,KAAK,eACL,EAAE,qOACH,EACH,EAGIG,EAAU,IACdH,EAAC,OAAI,QAAQ,YAAY,UAAU,QACjC,SAAAC,EAAC,KACC,eAAe,QACf,cAAc,QACd,YAAY,IACZ,KAAK,OACL,OAAO,eAEP,UAAAD,EAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,IAAI,EAC9BA,EAAC,QAAK,EAAE,UAAU,EAClBA,EAAC,QAAK,EAAE,WAAW,EACnBA,EAAC,QAAK,EAAE,uBAAuB,EAC/BA,EAAC,QAAK,EAAE,yBAAyB,EACjCA,EAAC,QAAK,EAAE,UAAU,EAClBA,EAAC,QAAK,EAAE,WAAW,EACnBA,EAAC,QAAK,EAAE,wBAAwB,EAChCA,EAAC,QAAK,EAAE,wBAAwB,GAClC,EACF,EAGWI,EAAgB,IAAM,CACjC,IAAMC,EAAa,aAAa,QAAQ,sBAAsB,IAAM,OAE9D,CAACC,EAAUC,CAAW,EAAU,WAASF,CAAU,EAEnDG,EAAUd,EAAO,WAAW,EAOlC,OACEM,EAACP,EAAA,CACC,MAAO,qBAAqBa,EAAW,QAAU,SACjD,OAAQA,EACR,QATiB,IAAM,CACzBE,EAAQ,KAAKT,EAAO,kBAAoBO,EAAoB,QAAT,MAAgB,EACnEC,EAAaE,GAAS,CAACA,CAAI,CAC7B,EAQK,SAAAH,EAAWN,EAACG,EAAA,EAAQ,EAAKH,EAACE,EAAA,EAAS,EACtC,CAEJ","sourcesContent":["import * as React from 'react'\nimport { IconButton } from '@storybook/components'\nimport { addons } from '@storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/constants.d.ts

@@ -1,11 +0,0 @@
-declare const ADDON_ID = "@saas-ui/storybook-addon2";
-declare const COLOR_MODE_TOOL_ID = "@saas-ui/storybook-addon2/color-mode-tool";
-declare const DIRECTION_TOOL_ID = "@saas-ui/storybook-addon2/direction-tool";
-declare const THEME_TOOL_ID = "@saas-ui/storybook-addon2/theme-tool";
-declare const EVENTS: {
-    TOGGLE_COLOR_MODE: string;
-    TOGGLE_DIRECTION: string;
-    SET_THEME: string;
-};
-
-export { ADDON_ID, COLOR_MODE_TOOL_ID, DIRECTION_TOOL_ID, EVENTS, THEME_TOOL_ID };

package/dist/constants.js

@@ -1,11 +0,0 @@
-'use strict';
-
-var o="@saas-ui/storybook-addon2",t=`${o}/color-mode-tool`,O=`${o}/direction-tool`,e=`${o}/theme-tool`,E={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};
-
-exports.ADDON_ID = o;
-exports.COLOR_MODE_TOOL_ID = t;
-exports.DIRECTION_TOOL_ID = O;
-exports.EVENTS = E;
-exports.THEME_TOOL_ID = e;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS"],"mappings":"AAAO,IAAMA,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/constants.mjs

@@ -1,5 +0,0 @@
-var o="@saas-ui/storybook-addon2",t=`${o}/color-mode-tool`,O=`${o}/direction-tool`,e=`${o}/theme-tool`,E={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};
-
-export { o as ADDON_ID, t as COLOR_MODE_TOOL_ID, O as DIRECTION_TOOL_ID, E as EVENTS, e as THEME_TOOL_ID };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=constants.mjs.map

package/dist/constants.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS"],"mappings":"AAAO,IAAMA,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/direction/DirectionTool.d.ts

@@ -1,8 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-/**
- * This component is rendered in the Storybook toolbar
- */
-declare const DirectionTool: () => react_jsx_runtime.JSX.Element;
-
-export { DirectionTool };

package/dist/direction/DirectionTool.js

@@ -1,12 +0,0 @@
-'use strict';
-
-var react = require('react');
-var managerApi = require('@storybook/manager-api');
-var components = require('@storybook/components');
-var jsxRuntime = require('react/jsx-runtime');
-
-var T=Object.defineProperty,d=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var m=(o,t,e)=>t in o?T(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,c=(o,t)=>{for(var e in t||(t={}))I.call(t,e)&&m(o,e,t[e]);if(a)for(var e of a(t))p.call(t,e)&&m(o,e,t[e]);return o},i=(o,t)=>d(o,D(t));var l="@saas-ui/storybook-addon2",s=`${l}/direction-tool`,O={TOGGLE_COLOR_MODE:`${l}/toggleColorMode`,TOGGLE_DIRECTION:`${l}/toggleDirection`,SET_THEME:`${l}/setTheme`};var u=o=>jsxRuntime.jsxs("svg",i(c({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},o),{children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]})),L=o=>jsxRuntime.jsxs("svg",i(c({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},o),{children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]})),b=()=>{let[o,t]=managerApi.useGlobals(),[e,h]=managerApi.useAddonState(s,o[s]||"ltr"),n=e!=="ltr"?"ltr":"rtl";react.useEffect(()=>{t({[s]:e});},[e,t]);let E=react.useCallback(()=>{managerApi.addons.getChannel().emit(O.TOGGLE_DIRECTION,n),h(n);},[h,n]);return jsxRuntime.jsx(components.IconButton,{active:e==="rtl",title:`Set layout direction to ${n}`,onClick:E,children:n==="ltr"?jsxRuntime.jsx(u,{}):jsxRuntime.jsx(L,{})})};
-
-exports.DirectionTool = b;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=DirectionTool.js.map

package/dist/direction/DirectionTool.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/direction/DirectionTool.tsx","../../src/constants.ts"],"names":["useCallback","useEffect","addons","useAddonState","useGlobals","IconButton","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","jsx","jsxs","LTRIcon","props","__spreadProps","__spreadValues","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection"],"mappings":"6aAAA,OAAS,eAAAA,EAAa,aAAAC,MAAiB,QACvC,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,cAAAC,MAAkB,yBAClD,OAAS,cAAAC,MAAkB,wBCFpB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDHE,OAYE,OAAAK,EAZF,QAAAC,MAAA,oBADF,IAAMC,EAAWC,GACfF,EAAC,MAAAG,EAAAC,EAAA,CACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,GACIF,GAVL,CAYC,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,kHAAkH,IAC5H,EAGIM,EAAWH,GACfF,EAAC,MAAAG,EAAAC,EAAA,CACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,GACIF,GAVL,CAYC,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,wHAAwH,IAClI,EAMWO,EAAgB,IAAM,CACjC,GAAM,CAACC,EAASC,CAAU,EAAIhB,EAAW,EACnC,CAACiB,EAAWC,CAAY,EAAInB,EAChCK,EACAW,EAAQX,CAAiB,GAAK,KAChC,EACMe,EAAkBF,IAAc,MAAQ,MAAQ,MACtDpB,EAAU,IAAM,CACdmB,EAAW,CAAE,CAACZ,CAAiB,EAAGa,CAAU,CAAC,CAC/C,EAAG,CAACA,EAAWD,CAAU,CAAC,EAE1B,IAAMI,EAAkBxB,EAAY,IAAM,CACxBE,EAAO,WAAW,EAC1B,KAAKQ,EAAO,iBAAkBa,CAAe,EACrDD,EAAaC,CAAe,CAC9B,EAAG,CAACD,EAAcC,CAAe,CAAC,EAElC,OACEZ,EAACN,EAAA,CACC,OAAQgB,IAAc,MACtB,MAAO,2BAA2BE,IAClC,QAASC,EAER,SAAAD,IAAoB,MAAQZ,EAACE,EAAA,EAAQ,EAAKF,EAACM,EAAA,EAAQ,EACtD,CAEJ","sourcesContent":["import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/direction/DirectionTool.mjs

@@ -1,10 +0,0 @@
-import { useEffect, useCallback } from 'react';
-import { useGlobals, useAddonState, addons } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var T=Object.defineProperty,d=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var m=(o,t,e)=>t in o?T(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,c=(o,t)=>{for(var e in t||(t={}))I.call(t,e)&&m(o,e,t[e]);if(a)for(var e of a(t))p.call(t,e)&&m(o,e,t[e]);return o},i=(o,t)=>d(o,D(t));var l="@saas-ui/storybook-addon2",s=`${l}/direction-tool`,O={TOGGLE_COLOR_MODE:`${l}/toggleColorMode`,TOGGLE_DIRECTION:`${l}/toggleDirection`,SET_THEME:`${l}/setTheme`};var u=o=>jsxs("svg",i(c({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},o),{children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]})),L=o=>jsxs("svg",i(c({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},o),{children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]})),b=()=>{let[o,t]=useGlobals(),[e,h]=useAddonState(s,o[s]||"ltr"),n=e!=="ltr"?"ltr":"rtl";useEffect(()=>{t({[s]:e});},[e,t]);let E=useCallback(()=>{addons.getChannel().emit(O.TOGGLE_DIRECTION,n),h(n);},[h,n]);return jsx(IconButton,{active:e==="rtl",title:`Set layout direction to ${n}`,onClick:E,children:n==="ltr"?jsx(u,{}):jsx(L,{})})};
-
-export { b as DirectionTool };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=DirectionTool.mjs.map

package/dist/direction/DirectionTool.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/direction/DirectionTool.tsx","../../src/constants.ts"],"names":["useCallback","useEffect","addons","useAddonState","useGlobals","IconButton","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","jsx","jsxs","LTRIcon","props","__spreadProps","__spreadValues","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection"],"mappings":"6aAAA,OAAS,eAAAA,EAAa,aAAAC,MAAiB,QACvC,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,cAAAC,MAAkB,yBAClD,OAAS,cAAAC,MAAkB,wBCFpB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDHE,OAYE,OAAAK,EAZF,QAAAC,MAAA,oBADF,IAAMC,EAAWC,GACfF,EAAC,MAAAG,EAAAC,EAAA,CACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,GACIF,GAVL,CAYC,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,kHAAkH,IAC5H,EAGIM,EAAWH,GACfF,EAAC,MAAAG,EAAAC,EAAA,CACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,GACIF,GAVL,CAYC,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,wHAAwH,IAClI,EAMWO,EAAgB,IAAM,CACjC,GAAM,CAACC,EAASC,CAAU,EAAIhB,EAAW,EACnC,CAACiB,EAAWC,CAAY,EAAInB,EAChCK,EACAW,EAAQX,CAAiB,GAAK,KAChC,EACMe,EAAkBF,IAAc,MAAQ,MAAQ,MACtDpB,EAAU,IAAM,CACdmB,EAAW,CAAE,CAACZ,CAAiB,EAAGa,CAAU,CAAC,CAC/C,EAAG,CAACA,EAAWD,CAAU,CAAC,EAE1B,IAAMI,EAAkBxB,EAAY,IAAM,CACxBE,EAAO,WAAW,EAC1B,KAAKQ,EAAO,iBAAkBa,CAAe,EACrDD,EAAaC,CAAe,CAC9B,EAAG,CAACD,EAAcC,CAAe,CAAC,EAElC,OACEZ,EAACN,EAAA,CACC,OAAQgB,IAAc,MACtB,MAAO,2BAA2BE,IAClC,QAASC,EAER,SAAAD,IAAoB,MAAQZ,EAACE,EAAA,EAAQ,EAAKF,EAACM,EAAA,EAAQ,EACtD,CAEJ","sourcesContent":["import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/direction/useDirection.d.ts

@@ -1,6 +0,0 @@
-/**
- * Sync the layout direction to the html element
- */
-declare const useDirection: (initialDirection?: 'ltr' | 'rtl') => string;
-
-export { useDirection };

package/dist/direction/useDirection.js

@@ -1,10 +0,0 @@
-'use strict';
-
-var react = require('react');
-var previewApi = require('@storybook/preview-api');
-
-var o="@saas-ui/storybook-addon2",e={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};var a=(E="ltr")=>{let[t,r]=react.useState(E.toLowerCase());return react.useEffect(()=>{document.documentElement.dir=t;},[t]),react.useEffect(()=>{let n=previewApi.addons.getChannel(),c=O=>r(O);return n.on(e.TOGGLE_DIRECTION,c),()=>{n.removeListener(e.TOGGLE_DIRECTION,c);}},[r]),t};
-
-exports.useDirection = a;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=useDirection.js.map

package/dist/direction/useDirection.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/direction/useDirection.tsx","../../src/constants.ts"],"names":["useEffect","useState","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","useDirection","initialDirection","direction","setDirection","channel","callback","value"],"mappings":"AAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QACpC,OAAS,UAAAC,MAAc,yBCDhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDFO,IAAMK,EAAe,CAACC,EAAkC,QAAU,CACvE,GAAM,CAACC,EAAWC,CAAY,EAAIV,EAASQ,EAAiB,YAAY,CAAC,EAEzE,OAAAT,EAAU,IAAM,CACd,SAAS,gBAAgB,IAAMU,CACjC,EAAG,CAACA,CAAS,CAAC,EAEdV,EAAU,IAAM,CACd,IAAMY,EAAUV,EAAO,WAAW,EAC5BW,EAAYC,GAAkBH,EAAaG,CAAK,EACtD,OAAAF,EAAQ,GAAGL,EAAO,iBAAkBM,CAAQ,EACrC,IAAM,CACXD,EAAQ,eAAeL,EAAO,iBAAkBM,CAAQ,CAC1D,CACF,EAAG,CAACF,CAAY,CAAC,EAEVD,CACT","sourcesContent":["import { useEffect, useState } from 'react'\nimport { addons } from '@storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/direction/useDirection.mjs

@@ -1,8 +0,0 @@
-import { useState, useEffect } from 'react';
-import { addons } from '@storybook/preview-api';
-
-var o="@saas-ui/storybook-addon2",e={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};var a=(E="ltr")=>{let[t,r]=useState(E.toLowerCase());return useEffect(()=>{document.documentElement.dir=t;},[t]),useEffect(()=>{let n=addons.getChannel(),c=O=>r(O);return n.on(e.TOGGLE_DIRECTION,c),()=>{n.removeListener(e.TOGGLE_DIRECTION,c);}},[r]),t};
-
-export { a as useDirection };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=useDirection.mjs.map

package/dist/direction/useDirection.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/direction/useDirection.tsx","../../src/constants.ts"],"names":["useEffect","useState","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","useDirection","initialDirection","direction","setDirection","channel","callback","value"],"mappings":"AAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QACpC,OAAS,UAAAC,MAAc,yBCDhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDFO,IAAMK,EAAe,CAACC,EAAkC,QAAU,CACvE,GAAM,CAACC,EAAWC,CAAY,EAAIV,EAASQ,EAAiB,YAAY,CAAC,EAEzE,OAAAT,EAAU,IAAM,CACd,SAAS,gBAAgB,IAAMU,CACjC,EAAG,CAACA,CAAS,CAAC,EAEdV,EAAU,IAAM,CACd,IAAMY,EAAUV,EAAO,WAAW,EAC5BW,EAAYC,GAAkBH,EAAaG,CAAK,EACtD,OAAAF,EAAQ,GAAGL,EAAO,iBAAkBM,CAAQ,EACrC,IAAM,CACXD,EAAQ,eAAeL,EAAO,iBAAkBM,CAAQ,CAC1D,CACF,EAAG,CAACF,CAAY,CAAC,EAEVD,CACT","sourcesContent":["import { useEffect, useState } from 'react'\nimport { addons } from '@storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/index.d.ts

@@ -1,4 +0,0 @@
-export { ADDON_ID, COLOR_MODE_TOOL_ID, DIRECTION_TOOL_ID, EVENTS, THEME_TOOL_ID } from './constants.js';
-export { ThemingArgTypeKey, getThemingArgTypes } from './arg-types.js';
-import '@storybook/types';
-import '@chakra-ui/react';

package/dist/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-var o="@saas-ui/storybook-addon2",u=`${o}/color-mode-tool`,O=`${o}/direction-tool`,f=`${o}/theme-tool`,d={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};function y(t){let r=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>r.includes(e))}function h(t,r){var i,p,m,l;let e=t.components[r];if(!e)return;let n={},c=Object.keys(e.variants||{});c.length&&(n.variant={type:{name:"enum",value:c},defaultValue:(i=e.defaultProps)==null?void 0:i.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:(p=e.defaultProps)==null?void 0:p.size}),(m=e.defaultProps)!=null&&m.colorScheme){let T=Object.entries(t.colors).filter(([,s])=>y(s)).map(([s])=>s);T.length&&(n.colorScheme={type:{name:"enum",value:T},defaultValue:(l=e.defaultProps)==null?void 0:l.colorScheme});}return n}
-
-exports.ADDON_ID = o;
-exports.COLOR_MODE_TOOL_ID = u;
-exports.DIRECTION_TOOL_ID = O;
-exports.EVENTS = d;
-exports.THEME_TOOL_ID = f;
-exports.getThemingArgTypes = h;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/constants.ts","../src/arg-types.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","_a","_b","_c","_d","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAAO,IAAMA,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,ECQA,SAASK,EAAoBC,EAAe,CAC1C,IAAMC,EAAY,OAAO,KAAKD,GAAS,CAAC,CAAC,EACzC,MAAO,CACL,KACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,KACF,EAAE,MAAOE,GAASD,EAAU,SAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,EAAcC,EAA8B,CAvE9C,IAAAC,EAAAC,EAAAC,EAAAC,EAwEE,IAAMC,EAAYN,EAAM,WAAWC,CAAa,EAChD,GAAI,CAACK,EACH,OAGF,IAAMC,EAEF,CAAC,EAECC,EAAiB,OAAO,KAAKF,EAAU,UAAY,CAAC,CAAC,EACvDE,EAAe,SACjBD,EAAS,QAAU,CACjB,KAAM,CAAE,KAAM,OAAQ,MAAOC,CAAe,EAC5C,cAAcN,EAAAI,EAAU,eAAV,YAAAJ,EAAwB,OACxC,GAGF,IAAMO,EAAc,OAAO,KAAKH,EAAU,OAAS,CAAC,CAAC,EAQrD,GAPIG,EAAY,SACdF,EAAS,KAAO,CACd,KAAM,CAAE,KAAM,OAAQ,MAAOE,CAAY,EACzC,cAAcN,EAAAG,EAAU,eAAV,YAAAH,EAAwB,IACxC,IAGEC,EAAAE,EAAU,eAAV,MAAAF,EAAyB,YAAgB,CAC3C,IAAMM,EAAe,OAAO,QAAQV,EAAM,MAAM,EAC7C,OAAO,CAAC,CAAC,CAAEJ,CAAK,IAAMD,EAAoBC,CAAK,CAAC,EAChD,IAAI,CAAC,CAACe,CAAG,IAAMA,CAAG,EAEjBD,EAAa,SACfH,EAAS,YAAc,CACrB,KAAM,CAAE,KAAM,OAAQ,MAAOG,CAAa,EAC1C,cAAcL,EAAAC,EAAU,eAAV,YAAAD,EAAwB,WACxC,GAIJ,OAAOE,CACT","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import type { ArgTypes } from '@storybook/react'\nimport type { ThemingProps } from '@chakra-ui/react'\n\n/**\n * `keyof` alternative which omits non-string keys\n */\ntype KeyOf<T> = [T] extends [never]\n  ? never\n  : T extends object\n  ? Extract<keyof T, string>\n  : never\n\nexport type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme'\n\n/**\n * Checks if the given color scale object has all required keys: 50, 100, 200...900.\n */\nfunction validateColorScheme(value: object) {\n  const valueKeys = Object.keys(value || {})\n  return [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ].every((term) => valueKeys.includes(term))\n}\n\n/**\n * Create Storybook controls based on a Chakra UI theme component.\n *\n * @example\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: getThemingArgTypes(theme, \"Button\"),\n * }\n *\n * @example full example\n * import { Meta, StoryFn } from \"@storybook/react\"\n * import { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\n * import { theme } from \"<your-theme>\"\n *\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: {\n *     ...getThemingArgTypes(theme, \"Button\"),\n *     children: \"string\"\n *   },\n *   args: { children: \"Button\" },\n * } as Meta\n *\n * interface StoryProps extends ThemingProps<\"Button\"> {\n *   children?: React.ReactNode\n * }\n *\n * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />\n *\n * @param theme same Chakra UI theme used in .storybook/preview.tsx\n * @param componentName component name to create the ArgTypes for\n */\nexport function getThemingArgTypes<\n  Theme extends {\n    colors: Record<string, any>\n    components: Record<string, any>\n  },\n  ComponentName extends KeyOf<Theme['components']>\n>(theme: Theme, componentName: ComponentName) {\n  const component = theme.components[componentName]\n  if (!component) {\n    return undefined\n  }\n\n  const argTypes: ArgTypes<\n    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>\n  > = {}\n\n  const variantOptions = Object.keys(component.variants || {})\n  if (variantOptions.length) {\n    argTypes.variant = {\n      type: { name: 'enum', value: variantOptions },\n      defaultValue: component.defaultProps?.variant,\n    }\n  }\n\n  const sizeOptions = Object.keys(component.sizes || {})\n  if (sizeOptions.length) {\n    argTypes.size = {\n      type: { name: 'enum', value: sizeOptions },\n      defaultValue: component.defaultProps?.size,\n    }\n  }\n\n  if (component.defaultProps?.['colorScheme']) {\n    const colorSchemes = Object.entries(theme.colors)\n      .filter(([, value]) => validateColorScheme(value))\n      .map(([key]) => key)\n\n    if (colorSchemes.length) {\n      argTypes.colorScheme = {\n        type: { name: 'enum', value: colorSchemes },\n        defaultValue: component.defaultProps?.colorScheme,\n      }\n    }\n  }\n\n  return argTypes\n}\n"]}

package/dist/index.mjs

@@ -1,5 +0,0 @@
-var o="@saas-ui/storybook-addon2",u=`${o}/color-mode-tool`,O=`${o}/direction-tool`,f=`${o}/theme-tool`,d={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};function y(t){let r=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>r.includes(e))}function h(t,r){var i,p,m,l;let e=t.components[r];if(!e)return;let n={},c=Object.keys(e.variants||{});c.length&&(n.variant={type:{name:"enum",value:c},defaultValue:(i=e.defaultProps)==null?void 0:i.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:(p=e.defaultProps)==null?void 0:p.size}),(m=e.defaultProps)!=null&&m.colorScheme){let T=Object.entries(t.colors).filter(([,s])=>y(s)).map(([s])=>s);T.length&&(n.colorScheme={type:{name:"enum",value:T},defaultValue:(l=e.defaultProps)==null?void 0:l.colorScheme});}return n}
-
-export { o as ADDON_ID, u as COLOR_MODE_TOOL_ID, O as DIRECTION_TOOL_ID, d as EVENTS, f as THEME_TOOL_ID, h as getThemingArgTypes };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/constants.ts","../src/arg-types.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","_a","_b","_c","_d","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAAO,IAAMA,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,ECQA,SAASK,EAAoBC,EAAe,CAC1C,IAAMC,EAAY,OAAO,KAAKD,GAAS,CAAC,CAAC,EACzC,MAAO,CACL,KACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,KACF,EAAE,MAAOE,GAASD,EAAU,SAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,EAAcC,EAA8B,CAvE9C,IAAAC,EAAAC,EAAAC,EAAAC,EAwEE,IAAMC,EAAYN,EAAM,WAAWC,CAAa,EAChD,GAAI,CAACK,EACH,OAGF,IAAMC,EAEF,CAAC,EAECC,EAAiB,OAAO,KAAKF,EAAU,UAAY,CAAC,CAAC,EACvDE,EAAe,SACjBD,EAAS,QAAU,CACjB,KAAM,CAAE,KAAM,OAAQ,MAAOC,CAAe,EAC5C,cAAcN,EAAAI,EAAU,eAAV,YAAAJ,EAAwB,OACxC,GAGF,IAAMO,EAAc,OAAO,KAAKH,EAAU,OAAS,CAAC,CAAC,EAQrD,GAPIG,EAAY,SACdF,EAAS,KAAO,CACd,KAAM,CAAE,KAAM,OAAQ,MAAOE,CAAY,EACzC,cAAcN,EAAAG,EAAU,eAAV,YAAAH,EAAwB,IACxC,IAGEC,EAAAE,EAAU,eAAV,MAAAF,EAAyB,YAAgB,CAC3C,IAAMM,EAAe,OAAO,QAAQV,EAAM,MAAM,EAC7C,OAAO,CAAC,CAAC,CAAEJ,CAAK,IAAMD,EAAoBC,CAAK,CAAC,EAChD,IAAI,CAAC,CAACe,CAAG,IAAMA,CAAG,EAEjBD,EAAa,SACfH,EAAS,YAAc,CACrB,KAAM,CAAE,KAAM,OAAQ,MAAOG,CAAa,EAC1C,cAAcL,EAAAC,EAAU,eAAV,YAAAD,EAAwB,WACxC,GAIJ,OAAOE,CACT","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import type { ArgTypes } from '@storybook/react'\nimport type { ThemingProps } from '@chakra-ui/react'\n\n/**\n * `keyof` alternative which omits non-string keys\n */\ntype KeyOf<T> = [T] extends [never]\n  ? never\n  : T extends object\n  ? Extract<keyof T, string>\n  : never\n\nexport type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme'\n\n/**\n * Checks if the given color scale object has all required keys: 50, 100, 200...900.\n */\nfunction validateColorScheme(value: object) {\n  const valueKeys = Object.keys(value || {})\n  return [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ].every((term) => valueKeys.includes(term))\n}\n\n/**\n * Create Storybook controls based on a Chakra UI theme component.\n *\n * @example\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: getThemingArgTypes(theme, \"Button\"),\n * }\n *\n * @example full example\n * import { Meta, StoryFn } from \"@storybook/react\"\n * import { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\n * import { theme } from \"<your-theme>\"\n *\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: {\n *     ...getThemingArgTypes(theme, \"Button\"),\n *     children: \"string\"\n *   },\n *   args: { children: \"Button\" },\n * } as Meta\n *\n * interface StoryProps extends ThemingProps<\"Button\"> {\n *   children?: React.ReactNode\n * }\n *\n * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />\n *\n * @param theme same Chakra UI theme used in .storybook/preview.tsx\n * @param componentName component name to create the ArgTypes for\n */\nexport function getThemingArgTypes<\n  Theme extends {\n    colors: Record<string, any>\n    components: Record<string, any>\n  },\n  ComponentName extends KeyOf<Theme['components']>\n>(theme: Theme, componentName: ComponentName) {\n  const component = theme.components[componentName]\n  if (!component) {\n    return undefined\n  }\n\n  const argTypes: ArgTypes<\n    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>\n  > = {}\n\n  const variantOptions = Object.keys(component.variants || {})\n  if (variantOptions.length) {\n    argTypes.variant = {\n      type: { name: 'enum', value: variantOptions },\n      defaultValue: component.defaultProps?.variant,\n    }\n  }\n\n  const sizeOptions = Object.keys(component.sizes || {})\n  if (sizeOptions.length) {\n    argTypes.size = {\n      type: { name: 'enum', value: sizeOptions },\n      defaultValue: component.defaultProps?.size,\n    }\n  }\n\n  if (component.defaultProps?.['colorScheme']) {\n    const colorSchemes = Object.entries(theme.colors)\n      .filter(([, value]) => validateColorScheme(value))\n      .map(([key]) => key)\n\n    if (colorSchemes.length) {\n      argTypes.colorScheme = {\n        type: { name: 'enum', value: colorSchemes },\n        defaultValue: component.defaultProps?.colorScheme,\n      }\n    }\n  }\n\n  return argTypes\n}\n"]}

package/dist/manager.d.ts

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

package/dist/manager.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var Co = require('@storybook/manager-api');
-var M = require('react');
-var components = require('@storybook/components');
-var jsxRuntime = require('react/jsx-runtime');
-require('@storybook/types');
-require('@storybook/preview-api/dist/addons');
-
-function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
-var Co__namespace = /*#__PURE__*/_interopNamespace(Co);
-var M__namespace = /*#__PURE__*/_interopNamespace(M);
-
-var E=Object.defineProperty,V=Object.defineProperties,x=Object.getOwnPropertyDescriptor,y=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertyNames,C=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var u=(t,o,e)=>o in t?E(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,p=(t,o)=>{for(var e in o||(o={}))I.call(o,e)&&u(t,e,o[e]);if(C)for(var e of C(o))B.call(o,e)&&u(t,e,o[e]);return t},T=(t,o)=>V(t,y(o));var f=(t,o,e,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of N(o))!I.call(t,r)&&r!==e&&E(t,r,{get:()=>o[r],enumerable:!(c=x(o,r))||c.enumerable});return t},D=(t,o,e)=>(f(t,o,"default"),e&&f(e,o,"default"));var s="@saas-ui/storybook-addon2",k=`${s}/color-mode-tool`,i=`${s}/direction-tool`,v=`${s}/theme-tool`,h={TOGGLE_COLOR_MODE:`${s}/toggleColorMode`,TOGGLE_DIRECTION:`${s}/toggleDirection`,SET_THEME:`${s}/setTheme`};var H=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),A=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5"}),jsxRuntime.jsx("path",{d:"M12 1v2"}),jsxRuntime.jsx("path",{d:"M12 21v2"}),jsxRuntime.jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M1 12h2"}),jsxRuntime.jsx("path",{d:"M21 12h2"}),jsxRuntime.jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsxRuntime.jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),_=()=>{let t=localStorage.getItem("chakra-ui-color-mode")==="dark",[o,e]=M__namespace.useState(t),c=Co.addons.getChannel();return jsxRuntime.jsx(components.IconButton,{title:`Set color mode to ${o?"light":"dark"}`,active:o,onClick:()=>{c.emit(h.TOGGLE_COLOR_MODE,o?"light":"dark"),e(l=>!l);},children:o?jsxRuntime.jsx(A,{}):jsxRuntime.jsx(H,{})})};var J=t=>jsxRuntime.jsxs("svg",T(p({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},t),{children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]})),K=t=>jsxRuntime.jsxs("svg",T(p({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},t),{children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]})),S=()=>{let[t,o]=Co.useGlobals(),[e,c]=Co.useAddonState(i,t[i]||"ltr"),r=e!=="ltr"?"ltr":"rtl";M.useEffect(()=>{o({[i]:e});},[e,o]);let l=M.useCallback(()=>{Co.addons.getChannel().emit(h.TOGGLE_DIRECTION,r),c(r);},[c,r]);return jsxRuntime.jsx(components.IconButton,{active:e==="rtl",title:`Set layout direction to ${r}`,onClick:l,children:r==="ltr"?jsxRuntime.jsx(J,{}):jsxRuntime.jsx(K,{})})};var m={};D(m,Co__namespace);var j={0:"Chakra UI",1:"Saas UI",2:"Glass"},R=()=>{let t=localStorage.getItem("saas-ui-theme"),[o,e]=(0, m.useAddonState)(`${s}/theme`,t),c=Co.addons.getChannel(),r=l=>{c.emit(h.SET_THEME,l||"1"),e(l);};return jsxRuntime.jsx(components.WithTooltip,{placement:"top",closeOnClick:!0,trigger:"click",tooltip:({onHide:l})=>jsxRuntime.jsx(components.TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{r("0"),l();}},{id:"1",title:"Saas UI",onClick:()=>{r("1"),l();}},{id:"2",title:"Glass",onClick:()=>{r("2"),l();}}]}),children:jsxRuntime.jsxs(components.IconButton,{title:"Select theme",children:[jsxRuntime.jsx(components.Icons,{icon:"eye"})," ",j[o||"1"]]})})};Co.addons.register(s,()=>{let t=({viewMode:o})=>!!(o&&o.match(/^(story|docs)$/));Co.addons.add(i,{type:Co.types.TOOL,title:"Direction",render:S,match:t}),Co.addons.add(k,{type:Co.types.TOOL,title:"Color Mode",render:_,match:t}),Co.addons.add(v,{type:Co.types.TOOL,title:"Theme",render:R,match:t});});
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../../../node_modules/@storybook/api/dist/entry.mjs","../src/theme/ThemeTool.tsx","../../../node_modules/@storybook/addons/dist/index.mjs"],"names":["addons","types","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","React","IconButton","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev","useCallback","useEffect","useAddonState","useGlobals","LTRIcon","props","__spreadProps","__spreadValues","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection","entry_exports","__reExport","manager_api_star","WithTooltip","TooltipLinkList","Icons","Addon_TypesEnum","mockChannel","HooksContext","applyHooks","makeDecorator","useArgs","useChannel","useMemo","useParameter","useReducer","useRef","useState","useStoryContext","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","onHide","match","viewMode"],"mappings":"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","sourcesContent":["import { addons, types } from '@storybook/manager-api'\nimport {\n  ADDON_ID,\n  COLOR_MODE_TOOL_ID,\n  DIRECTION_TOOL_ID,\n  THEME_TOOL_ID,\n} from './constants'\nimport { ColorModeTool } from './color-mode/ColorModeTool'\nimport { DirectionTool } from './direction/DirectionTool'\nimport { ThemeTool } from './theme/ThemeTool'\n\naddons.register(ADDON_ID, () => {\n  const match = ({ viewMode }: { viewMode?: string }) =>\n    Boolean(viewMode && viewMode.match(/^(story|docs)$/))\n\n  addons.add(DIRECTION_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Direction',\n    render: DirectionTool,\n    match,\n  })\n\n  addons.add(COLOR_MODE_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Color Mode',\n    render: ColorModeTool,\n    match,\n  })\n\n  addons.add(THEME_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Theme',\n    render: ThemeTool,\n    match,\n  })\n})\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from '@storybook/components'\nimport { addons } from '@storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","// shim-mmode\nexport * from '@storybook/manager-api';","import { useAddonState } from '@storybook/api'\nimport {\n  IconButton,\n  WithTooltip,\n  TooltipLinkList,\n  Icons,\n} from '@storybook/components'\nimport { addons } from '@storybook/addons'\nimport { ADDON_ID, EVENTS } from '../constants'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <Icons icon=\"eye\" /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n","export { Addon_TypesEnum as types } from '@storybook/types';\nexport { addons, mockChannel } from '@storybook/manager-api';\nexport { HooksContext, applyHooks, makeDecorator, useArgs, useCallback, useChannel, useEffect, useGlobals, useMemo, useParameter, useReducer, useRef, useState, useStoryContext } from '@storybook/preview-api/dist/addons';\n"]}

package/dist/manager.mjs

@@ -1,12 +0,0 @@
-import * as Co from '@storybook/manager-api';
-import { addons, types, useGlobals, useAddonState } from '@storybook/manager-api';
-import * as M from 'react';
-import { useEffect, useCallback } from 'react';
-import { IconButton, WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import '@storybook/types';
-import '@storybook/preview-api/dist/addons';
-
-var E=Object.defineProperty,V=Object.defineProperties,x=Object.getOwnPropertyDescriptor,y=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertyNames,C=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var u=(t,o,e)=>o in t?E(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,p=(t,o)=>{for(var e in o||(o={}))I.call(o,e)&&u(t,e,o[e]);if(C)for(var e of C(o))B.call(o,e)&&u(t,e,o[e]);return t},T=(t,o)=>V(t,y(o));var f=(t,o,e,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of N(o))!I.call(t,r)&&r!==e&&E(t,r,{get:()=>o[r],enumerable:!(c=x(o,r))||c.enumerable});return t},D=(t,o,e)=>(f(t,o,"default"),e&&f(e,o,"default"));var s="@saas-ui/storybook-addon2",k=`${s}/color-mode-tool`,i=`${s}/direction-tool`,v=`${s}/theme-tool`,h={TOGGLE_COLOR_MODE:`${s}/toggleColorMode`,TOGGLE_DIRECTION:`${s}/toggleDirection`,SET_THEME:`${s}/setTheme`};var H=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),A=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsx("circle",{cx:"12",cy:"12",r:"5"}),jsx("path",{d:"M12 1v2"}),jsx("path",{d:"M12 21v2"}),jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsx("path",{d:"M1 12h2"}),jsx("path",{d:"M21 12h2"}),jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),_=()=>{let t=localStorage.getItem("chakra-ui-color-mode")==="dark",[o,e]=M.useState(t),c=addons.getChannel();return jsx(IconButton,{title:`Set color mode to ${o?"light":"dark"}`,active:o,onClick:()=>{c.emit(h.TOGGLE_COLOR_MODE,o?"light":"dark"),e(l=>!l);},children:o?jsx(A,{}):jsx(H,{})})};var J=t=>jsxs("svg",T(p({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},t),{children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]})),K=t=>jsxs("svg",T(p({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},t),{children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]})),S=()=>{let[t,o]=useGlobals(),[e,c]=useAddonState(i,t[i]||"ltr"),r=e!=="ltr"?"ltr":"rtl";useEffect(()=>{o({[i]:e});},[e,o]);let l=useCallback(()=>{addons.getChannel().emit(h.TOGGLE_DIRECTION,r),c(r);},[c,r]);return jsx(IconButton,{active:e==="rtl",title:`Set layout direction to ${r}`,onClick:l,children:r==="ltr"?jsx(J,{}):jsx(K,{})})};var m={};D(m,Co);var j={0:"Chakra UI",1:"Saas UI",2:"Glass"},R=()=>{let t=localStorage.getItem("saas-ui-theme"),[o,e]=(0, m.useAddonState)(`${s}/theme`,t),c=addons.getChannel(),r=l=>{c.emit(h.SET_THEME,l||"1"),e(l);};return jsx(WithTooltip,{placement:"top",closeOnClick:!0,trigger:"click",tooltip:({onHide:l})=>jsx(TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{r("0"),l();}},{id:"1",title:"Saas UI",onClick:()=>{r("1"),l();}},{id:"2",title:"Glass",onClick:()=>{r("2"),l();}}]}),children:jsxs(IconButton,{title:"Select theme",children:[jsx(Icons,{icon:"eye"})," ",j[o||"1"]]})})};addons.register(s,()=>{let t=({viewMode:o})=>!!(o&&o.match(/^(story|docs)$/));addons.add(i,{type:types.TOOL,title:"Direction",render:S,match:t}),addons.add(k,{type:types.TOOL,title:"Color Mode",render:_,match:t}),addons.add(v,{type:types.TOOL,title:"Theme",render:R,match:t});});
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=manager.mjs.map

package/dist/manager.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../../../node_modules/@storybook/api/dist/entry.mjs","../src/theme/ThemeTool.tsx","../../../node_modules/@storybook/addons/dist/index.mjs"],"names":["addons","types","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","React","IconButton","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev","useCallback","useEffect","useAddonState","useGlobals","LTRIcon","props","__spreadProps","__spreadValues","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection","entry_exports","__reExport","manager_api_star","WithTooltip","TooltipLinkList","Icons","Addon_TypesEnum","mockChannel","HooksContext","applyHooks","makeDecorator","useArgs","useChannel","useMemo","useParameter","useReducer","useRef","useState","useStoryContext","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","onHide","match","viewMode"],"mappings":"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","sourcesContent":["import { addons, types } from '@storybook/manager-api'\nimport {\n  ADDON_ID,\n  COLOR_MODE_TOOL_ID,\n  DIRECTION_TOOL_ID,\n  THEME_TOOL_ID,\n} from './constants'\nimport { ColorModeTool } from './color-mode/ColorModeTool'\nimport { DirectionTool } from './direction/DirectionTool'\nimport { ThemeTool } from './theme/ThemeTool'\n\naddons.register(ADDON_ID, () => {\n  const match = ({ viewMode }: { viewMode?: string }) =>\n    Boolean(viewMode && viewMode.match(/^(story|docs)$/))\n\n  addons.add(DIRECTION_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Direction',\n    render: DirectionTool,\n    match,\n  })\n\n  addons.add(COLOR_MODE_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Color Mode',\n    render: ColorModeTool,\n    match,\n  })\n\n  addons.add(THEME_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Theme',\n    render: ThemeTool,\n    match,\n  })\n})\n","export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from '@storybook/components'\nimport { addons } from '@storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","// shim-mmode\nexport * from '@storybook/manager-api';","import { useAddonState } from '@storybook/api'\nimport {\n  IconButton,\n  WithTooltip,\n  TooltipLinkList,\n  Icons,\n} from '@storybook/components'\nimport { addons } from '@storybook/addons'\nimport { ADDON_ID, EVENTS } from '../constants'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <Icons icon=\"eye\" /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n","export { Addon_TypesEnum as types } from '@storybook/types';\nexport { addons, mockChannel } from '@storybook/manager-api';\nexport { HooksContext, applyHooks, makeDecorator, useArgs, useCallback, useChannel, useEffect, useGlobals, useMemo, useParameter, useReducer, useRef, useState, useStoryContext } from '@storybook/preview-api/dist/addons';\n"]}