@saas-ui/storybook-addon 3.0.2 → 4.0.1

package/dist/arg-types.cjs

@@ -3,5 +3,5 @@
 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.cjs.map
 //# sourceMappingURL=arg-types.cjs.map

package/dist/arg-types.cjs.map

@@ -1 +1 @@
-{"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,EAEJ,CAEA,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"]}
+{"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,CAAe,CAAA,CAC1C,IAAMC,CAAAA,CAAY,OAAO,IAAKD,CAAAA,CAAAA,EAAS,EAAE,EACzC,OAAO,CACL,KACA,KACA,CAAA,KAAA,CACA,MACA,KACA,CAAA,KAAA,CACA,KACA,CAAA,KAAA,CACA,MACA,KACF,CAAA,CAAE,KAAOE,CAAAA,CAAAA,EAASD,EAAU,QAASC,CAAAA,CAAI,CAAC,CAC5C,CAkCO,SAASC,CAAAA,CAMdC,EAAcC,CAA8B,CAAA,CAvE9C,IAAAC,CAAAC,CAAAA,CAAAA,CAAAC,CAAAC,CAAAA,CAAAA,CAwEE,IAAMC,CAAYN,CAAAA,CAAAA,CAAM,UAAWC,CAAAA,CAAa,EAChD,GAAI,CAACK,CACH,CAAA,OAGF,IAAMC,CAEF,CAAA,GAEEC,CAAiB,CAAA,MAAA,CAAO,KAAKF,CAAU,CAAA,QAAA,EAAY,EAAE,EACvDE,CAAe,CAAA,MAAA,GACjBD,EAAS,OAAU,CAAA,CACjB,KAAM,CAAE,IAAA,CAAM,MAAQ,CAAA,KAAA,CAAOC,CAAe,CAC5C,CAAA,YAAA,CAAA,CAAcN,EAAAI,CAAU,CAAA,YAAA,GAAV,YAAAJ,CAAwB,CAAA,OACxC,CAGF,CAAA,CAAA,IAAMO,EAAc,MAAO,CAAA,IAAA,CAAKH,CAAU,CAAA,KAAA,EAAS,EAAE,CAAA,CAQrD,GAPIG,CAAAA,CAAY,SACdF,CAAS,CAAA,IAAA,CAAO,CACd,IAAM,CAAA,CAAE,KAAM,MAAQ,CAAA,KAAA,CAAOE,CAAY,CAAA,CACzC,cAAcN,CAAAG,CAAAA,CAAAA,CAAU,eAAV,IAAAH,CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,CAAwB,IACxC,CAGEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAE,CAAU,CAAA,YAAA,GAAV,MAAAF,CAAyB,CAAA,WAAA,CAAgB,CAC3C,IAAMM,CAAAA,CAAe,OAAO,OAAQV,CAAAA,CAAAA,CAAM,MAAM,CAAA,CAC7C,OAAO,CAAC,EAAGJ,CAAK,IAAMD,CAAoBC,CAAAA,CAAK,CAAC,CAAA,CAChD,IAAI,CAAC,CAACe,CAAG,CAAMA,GAAAA,CAAG,EAEjBD,CAAa,CAAA,MAAA,GACfH,CAAS,CAAA,WAAA,CAAc,CACrB,IAAM,CAAA,CAAE,KAAM,MAAQ,CAAA,KAAA,CAAOG,CAAa,CAC1C,CAAA,YAAA,CAAA,CAAcL,CAAAC,CAAAA,CAAAA,CAAU,eAAV,IAAAD,CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,CAAwB,WACxC,CAEJ,EAAA,CAEA,OAAOE,CACT","file":"arg-types.cjs","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.d.cts

@@ -1,4 +1,4 @@
-import { ArgTypes } from '@storybook/types';
+import { ArgTypes } from 'storybook/internal/types';
 import { ThemingProps } from '@chakra-ui/react';
 
 declare global {

package/dist/arg-types.d.ts

@@ -1,4 +1,4 @@
-import { ArgTypes } from '@storybook/types';
+import { ArgTypes } from 'storybook/internal/types';
 import { ThemingProps } from '@chakra-ui/react';
 
 declare global {

package/dist/arg-types.js

@@ -1,5 +1,5 @@
 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.js.map
 //# sourceMappingURL=arg-types.js.map

package/dist/arg-types.js.map

@@ -1 +1 @@
-{"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,EAEJ,CAEA,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"]}
+{"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,CAAe,CAAA,CAC1C,IAAMC,CAAAA,CAAY,OAAO,IAAKD,CAAAA,CAAAA,EAAS,EAAE,EACzC,OAAO,CACL,KACA,KACA,CAAA,KAAA,CACA,MACA,KACA,CAAA,KAAA,CACA,KACA,CAAA,KAAA,CACA,MACA,KACF,CAAA,CAAE,KAAOE,CAAAA,CAAAA,EAASD,EAAU,QAASC,CAAAA,CAAI,CAAC,CAC5C,CAkCO,SAASC,CAAAA,CAMdC,EAAcC,CAA8B,CAAA,CAvE9C,IAAAC,CAAAC,CAAAA,CAAAA,CAAAC,CAAAC,CAAAA,CAAAA,CAwEE,IAAMC,CAAYN,CAAAA,CAAAA,CAAM,UAAWC,CAAAA,CAAa,EAChD,GAAI,CAACK,CACH,CAAA,OAGF,IAAMC,CAEF,CAAA,GAEEC,CAAiB,CAAA,MAAA,CAAO,KAAKF,CAAU,CAAA,QAAA,EAAY,EAAE,EACvDE,CAAe,CAAA,MAAA,GACjBD,EAAS,OAAU,CAAA,CACjB,KAAM,CAAE,IAAA,CAAM,MAAQ,CAAA,KAAA,CAAOC,CAAe,CAC5C,CAAA,YAAA,CAAA,CAAcN,EAAAI,CAAU,CAAA,YAAA,GAAV,YAAAJ,CAAwB,CAAA,OACxC,CAGF,CAAA,CAAA,IAAMO,EAAc,MAAO,CAAA,IAAA,CAAKH,CAAU,CAAA,KAAA,EAAS,EAAE,CAAA,CAQrD,GAPIG,CAAAA,CAAY,SACdF,CAAS,CAAA,IAAA,CAAO,CACd,IAAM,CAAA,CAAE,KAAM,MAAQ,CAAA,KAAA,CAAOE,CAAY,CAAA,CACzC,cAAcN,CAAAG,CAAAA,CAAAA,CAAU,eAAV,IAAAH,CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,CAAwB,IACxC,CAGEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAE,CAAU,CAAA,YAAA,GAAV,MAAAF,CAAyB,CAAA,WAAA,CAAgB,CAC3C,IAAMM,CAAAA,CAAe,OAAO,OAAQV,CAAAA,CAAAA,CAAM,MAAM,CAAA,CAC7C,OAAO,CAAC,EAAGJ,CAAK,IAAMD,CAAoBC,CAAAA,CAAK,CAAC,CAAA,CAChD,IAAI,CAAC,CAACe,CAAG,CAAMA,GAAAA,CAAG,EAEjBD,CAAa,CAAA,MAAA,GACfH,CAAS,CAAA,WAAA,CAAc,CACrB,IAAM,CAAA,CAAE,KAAM,MAAQ,CAAA,KAAA,CAAOG,CAAa,CAC1C,CAAA,YAAA,CAAA,CAAcL,CAAAC,CAAAA,CAAAA,CAAU,eAAV,IAAAD,CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,CAAwB,WACxC,CAEJ,EAAA,CAEA,OAAOE,CACT","file":"arg-types.js","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.cjs

@@ -7,5 +7,5 @@ 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.cjs.map
 //# sourceMappingURL=ColorModeSync.cjs.map

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

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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"]}
+{"version":3,"sources":["../../src/constants.ts","../../src/color-mode/ColorModeSync.tsx"],"names":["ADDON_ID","EVENTS","ColorModeSync","setColorMode","useColorMode","useEffect","channel","addons","colorModeToolCallback","value"],"mappings":";;;;;;IAAaA,CAAW,CAAA,2BAAA,CAKXC,CAAS,CAAA,CACpB,kBAAmB,CAAGD,EAAAA,CAAQ,mBAC9B,gBAAkB,CAAA,CAAA,EAAGA,CAAQ,CAC7B,gBAAA,CAAA,CAAA,SAAA,CAAW,GAAGA,CAAQ,CAAA,SAAA,CACxB,ECDO,SAASE,CAAAA,EAAgB,CAC9B,GAAM,CAAE,YAAAC,CAAAA,CAAa,EAAIC,kBAAa,EAAA,CAEtC,OAAAC,iBAAU,CAAA,IAAM,CACd,IAAMC,EAAUC,iBAAO,CAAA,UAAA,GAEjBC,CAAyBC,CAAAA,CAAAA,EAAkBN,EAAaM,CAAK,CAAA,CACnE,OAAAH,CAAAA,CAAQ,GAAGL,CAAO,CAAA,iBAAA,CAAmBO,CAAqB,CAEnD,CAAA,IAAM,CACXF,CAAQ,CAAA,cAAA,CAAeL,EAAO,iBAAmBO,CAAAA,CAAqB,EACxE,CACF,CAAA,CAAG,CAACL,CAAY,CAAC,EAEV,IACT","file":"ColorModeSync.cjs","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 { 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"]}

package/dist/color-mode/ColorModeSync.js

@@ -5,5 +5,5 @@ 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.js.map
 //# sourceMappingURL=ColorModeSync.js.map

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

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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"]}
+{"version":3,"sources":["../../src/constants.ts","../../src/color-mode/ColorModeSync.tsx"],"names":["ADDON_ID","EVENTS","ColorModeSync","setColorMode","useColorMode","useEffect","channel","addons","colorModeToolCallback","value"],"mappings":";;;;IAAaA,CAAW,CAAA,2BAAA,CAKXC,CAAS,CAAA,CACpB,kBAAmB,CAAGD,EAAAA,CAAQ,mBAC9B,gBAAkB,CAAA,CAAA,EAAGA,CAAQ,CAC7B,gBAAA,CAAA,CAAA,SAAA,CAAW,GAAGA,CAAQ,CAAA,SAAA,CACxB,ECDO,SAASE,CAAAA,EAAgB,CAC9B,GAAM,CAAE,YAAAC,CAAAA,CAAa,EAAIC,YAAa,EAAA,CAEtC,OAAAC,SAAU,CAAA,IAAM,CACd,IAAMC,EAAUC,MAAO,CAAA,UAAA,GAEjBC,CAAyBC,CAAAA,CAAAA,EAAkBN,EAAaM,CAAK,CAAA,CACnE,OAAAH,CAAAA,CAAQ,GAAGL,CAAO,CAAA,iBAAA,CAAmBO,CAAqB,CAEnD,CAAA,IAAM,CACXF,CAAQ,CAAA,cAAA,CAAeL,EAAO,iBAAmBO,CAAAA,CAAqB,EACxE,CACF,CAAA,CAAG,CAACL,CAAY,CAAC,EAEV,IACT","file":"ColorModeSync.js","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 { 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"]}

package/dist/color-mode/ColorModeTool.cjs

@@ -28,5 +28,5 @@ 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.cjs.map
 //# sourceMappingURL=ColorModeTool.cjs.map

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

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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,MAAM,GACvD,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"]}
+{"version":3,"sources":["../../src/constants.ts","../../src/color-mode/ColorModeTool.tsx"],"names":["ADDON_ID","EVENTS","MoonIcon","jsx","SunIcon","jsxs","ColorModeTool","isDarkMode","darkMode","setDarkMode","c","channel","addons","IconButton","prev"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;IAAaA,CAAW,CAAA,2BAAA,CAKXC,CAAAA,CAAS,CACpB,iBAAmB,CAAA,CAAA,EAAGD,CAAQ,CAC9B,gBAAA,CAAA,CAAA,gBAAA,CAAkB,GAAGA,CAAQ,CAAA,gBAAA,CAAA,CAC7B,UAAW,CAAGA,EAAAA,CAAQ,WACxB,ECHA,IAAME,CAAW,CAAA,IACfC,eAAC,KAAI,CAAA,CAAA,OAAA,CAAQ,YAAY,SAAU,CAAA,OAAA,CACjC,SAAAA,cAAC,CAAA,MAAA,CAAA,CACC,KAAK,cACL,CAAA,CAAA,CAAE,qOACH,CACH,CAAA,CAAA,CAGIC,EAAU,IACdD,cAAAA,CAAC,OAAI,OAAQ,CAAA,WAAA,CAAY,SAAU,CAAA,OAAA,CACjC,QAAAE,CAAAA,eAAAA,CAAC,KACC,cAAe,CAAA,OAAA,CACf,cAAc,OACd,CAAA,WAAA,CAAY,IACZ,IAAK,CAAA,MAAA,CACL,OAAO,cAEP,CAAA,QAAA,CAAA,CAAAF,eAAC,QAAO,CAAA,CAAA,EAAA,CAAG,KAAK,EAAG,CAAA,IAAA,CAAK,EAAE,GAAI,CAAA,CAAA,CAC9BA,cAAC,CAAA,MAAA,CAAA,CAAK,CAAE,CAAA,SAAA,CAAU,EAClBA,cAAC,CAAA,MAAA,CAAA,CAAK,EAAE,UAAW,CAAA,CAAA,CACnBA,eAAC,MAAK,CAAA,CAAA,CAAA,CAAE,uBAAuB,CAC/BA,CAAAA,cAAAA,CAAC,QAAK,CAAE,CAAA,wBAAA,CAAyB,EACjCA,cAAC,CAAA,MAAA,CAAA,CAAK,EAAE,SAAU,CAAA,CAAA,CAClBA,cAAC,CAAA,MAAA,CAAA,CAAK,CAAE,CAAA,UAAA,CAAW,EACnBA,cAAC,CAAA,MAAA,CAAA,CAAK,EAAE,uBAAwB,CAAA,CAAA,CAChCA,eAAC,MAAK,CAAA,CAAA,CAAA,CAAE,wBAAwB,CAClC,CAAA,CAAA,CAAA,CACF,EAGWG,CAAgB,CAAA,IAAM,CACjC,IAAMC,CAAAA,CAAa,aAAa,OAAQ,CAAA,sBAAsB,CAAM,GAAA,MAAA,CAE9D,CAACC,CAAAA,CAAUC,CAAW,CAAU,CAAAC,YAAA,CAAA,QAAA,CAASH,CAAU,CAEnDI,CAAAA,CAAAA,CAAUC,kBAAO,UAAW,EAAA,CAOlC,OACET,cAACU,CAAAA,qBAAAA,CAAA,CACC,KAAO,CAAA,CAAA,kBAAA,EAAqBL,EAAW,OAAU,CAAA,MAAM,GACvD,MAAQA,CAAAA,CAAAA,CACR,OATiB,CAAA,IAAM,CACzBG,CAAAA,CAAQ,KAAKV,CAAO,CAAA,iBAAA,CAAoBO,EAAoB,OAAT,CAAA,MAAgB,EACnEC,CAAaK,CAAAA,CAAAA,EAAS,CAACA,CAAI,EAC7B,EAQK,QAAAN,CAAAA,CAAAA,CAAWL,eAACC,CAAA,CAAA,EAAQ,EAAKD,cAACD,CAAAA,CAAAA,CAAA,EAAS,CAAA,CACtC,CAEJ","file":"ColorModeTool.cjs","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 * 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"]}

package/dist/color-mode/ColorModeTool.js

@@ -6,5 +6,5 @@ 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.js.map
 //# sourceMappingURL=ColorModeTool.js.map

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

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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,MAAM,GACvD,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"]}
+{"version":3,"sources":["../../src/constants.ts","../../src/color-mode/ColorModeTool.tsx"],"names":["ADDON_ID","EVENTS","MoonIcon","jsx","SunIcon","jsxs","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","addons","IconButton","prev"],"mappings":";;;;;IAAaA,CAAW,CAAA,2BAAA,CAKXC,CAAAA,CAAS,CACpB,iBAAmB,CAAA,CAAA,EAAGD,CAAQ,CAC9B,gBAAA,CAAA,CAAA,gBAAA,CAAkB,GAAGA,CAAQ,CAAA,gBAAA,CAAA,CAC7B,UAAW,CAAGA,EAAAA,CAAQ,WACxB,ECHA,IAAME,CAAW,CAAA,IACfC,IAAC,KAAI,CAAA,CAAA,OAAA,CAAQ,YAAY,SAAU,CAAA,OAAA,CACjC,SAAAA,GAAC,CAAA,MAAA,CAAA,CACC,KAAK,cACL,CAAA,CAAA,CAAE,qOACH,CACH,CAAA,CAAA,CAGIC,EAAU,IACdD,GAAAA,CAAC,OAAI,OAAQ,CAAA,WAAA,CAAY,SAAU,CAAA,OAAA,CACjC,QAAAE,CAAAA,IAAAA,CAAC,KACC,cAAe,CAAA,OAAA,CACf,cAAc,OACd,CAAA,WAAA,CAAY,IACZ,IAAK,CAAA,MAAA,CACL,OAAO,cAEP,CAAA,QAAA,CAAA,CAAAF,IAAC,QAAO,CAAA,CAAA,EAAA,CAAG,KAAK,EAAG,CAAA,IAAA,CAAK,EAAE,GAAI,CAAA,CAAA,CAC9BA,GAAC,CAAA,MAAA,CAAA,CAAK,CAAE,CAAA,SAAA,CAAU,EAClBA,GAAC,CAAA,MAAA,CAAA,CAAK,EAAE,UAAW,CAAA,CAAA,CACnBA,IAAC,MAAK,CAAA,CAAA,CAAA,CAAE,uBAAuB,CAC/BA,CAAAA,GAAAA,CAAC,QAAK,CAAE,CAAA,wBAAA,CAAyB,EACjCA,GAAC,CAAA,MAAA,CAAA,CAAK,EAAE,SAAU,CAAA,CAAA,CAClBA,GAAC,CAAA,MAAA,CAAA,CAAK,CAAE,CAAA,UAAA,CAAW,EACnBA,GAAC,CAAA,MAAA,CAAA,CAAK,EAAE,uBAAwB,CAAA,CAAA,CAChCA,IAAC,MAAK,CAAA,CAAA,CAAA,CAAE,wBAAwB,CAClC,CAAA,CAAA,CAAA,CACF,EAGWG,CAAgB,CAAA,IAAM,CACjC,IAAMC,CAAAA,CAAa,aAAa,OAAQ,CAAA,sBAAsB,CAAM,GAAA,MAAA,CAE9D,CAACC,CAAAA,CAAUC,CAAW,CAAU,CAAA,CAAA,CAAA,QAAA,CAASF,CAAU,CAEnDG,CAAAA,CAAAA,CAAUC,OAAO,UAAW,EAAA,CAOlC,OACER,GAACS,CAAAA,UAAAA,CAAA,CACC,KAAO,CAAA,CAAA,kBAAA,EAAqBJ,EAAW,OAAU,CAAA,MAAM,GACvD,MAAQA,CAAAA,CAAAA,CACR,OATiB,CAAA,IAAM,CACzBE,CAAAA,CAAQ,KAAKT,CAAO,CAAA,iBAAA,CAAoBO,EAAoB,OAAT,CAAA,MAAgB,EACnEC,CAAaI,CAAAA,CAAAA,EAAS,CAACA,CAAI,EAC7B,EAQK,QAAAL,CAAAA,CAAAA,CAAWL,IAACC,CAAA,CAAA,EAAQ,EAAKD,GAACD,CAAAA,CAAAA,CAAA,EAAS,CAAA,CACtC,CAEJ","file":"ColorModeTool.js","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 * 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"]}

package/dist/constants.cjs

@@ -7,5 +7,5 @@ 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.cjs.map
 //# sourceMappingURL=constants.cjs.map

package/dist/constants.cjs.map

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB","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"]}
+{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS"],"mappings":";;AAAaA,IAAAA,CAAAA,CAAW,2BACXC,CAAAA,CAAAA,CAAqB,CAAGD,EAAAA,CAAQ,CAChCE,gBAAAA,CAAAA,CAAAA,CAAAA,CAAoB,CAAGF,EAAAA,CAAQ,CAC/BG,eAAAA,CAAAA,CAAAA,CAAAA,CAAgB,CAAGH,EAAAA,CAAQ,CAE3BI,WAAAA,CAAAA,CAAAA,CAAAA,CAAS,CACpB,iBAAA,CAAmB,CAAGJ,EAAAA,CAAQ,CAC9B,gBAAA,CAAA,CAAA,gBAAA,CAAkB,CAAGA,EAAAA,CAAQ,CAC7B,gBAAA,CAAA,CAAA,SAAA,CAAW,CAAGA,EAAAA,CAAQ,CACxB,SAAA,CAAA","file":"constants.cjs","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.js

@@ -1,5 +1,5 @@
 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.js.map
 //# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB","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"]}
+{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS"],"mappings":"AAAaA,IAAAA,CAAAA,CAAW,2BACXC,CAAAA,CAAAA,CAAqB,CAAGD,EAAAA,CAAQ,CAChCE,gBAAAA,CAAAA,CAAAA,CAAAA,CAAoB,CAAGF,EAAAA,CAAQ,CAC/BG,eAAAA,CAAAA,CAAAA,CAAAA,CAAgB,CAAGH,EAAAA,CAAQ,CAE3BI,WAAAA,CAAAA,CAAAA,CAAAA,CAAS,CACpB,iBAAA,CAAmB,CAAGJ,EAAAA,CAAQ,CAC9B,gBAAA,CAAA,CAAA,gBAAA,CAAkB,CAAGA,EAAAA,CAAQ,CAC7B,gBAAA,CAAA,CAAA,SAAA,CAAW,CAAGA,EAAAA,CAAQ,CACxB,SAAA,CAAA","file":"constants.js","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.cjs

@@ -8,5 +8,5 @@ var jsxRuntime = require('react/jsx-runtime');
 var t="@saas-ui/storybook-addon2",n=`${t}/direction-tool`,i={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};var D=e=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...e,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"})]}),I=e=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...e,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"})]}),L=()=>{let[e,s]=managerApi.useGlobals(),[l,c]=managerApi.useAddonState(n,e[n]||"ltr"),r=l!=="ltr"?"ltr":"rtl";react.useEffect(()=>{s({[n]:l});},[l,s]);let a=react.useCallback(()=>{managerApi.addons.getChannel().emit(i.TOGGLE_DIRECTION,r),c(r);},[c,r]);return jsxRuntime.jsx(components.IconButton,{active:l==="rtl",title:`Set layout direction to ${r}`,onClick:a,children:r==="ltr"?jsxRuntime.jsx(D,{}):jsxRuntime.jsx(I,{})})};
 
 exports.DirectionTool = L;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=DirectionTool.cjs.map
 //# sourceMappingURL=DirectionTool.cjs.map

package/dist/direction/DirectionTool.cjs.map

@@ -1 +1 @@
-{"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","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection"],"mappings":"AAAA,OAAS,eAAAA,EAAa,aAAAC,MAAiB,QACvC,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,cAAAC,MAAkB,yBAClD,OAAS,cAAAC,MAAkB,wBCFpB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,EDHE,OAYE,OAAAK,EAZF,QAAAC,MAAA,oBADF,IAAMC,EAAWC,GACfF,EAAC,OACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,EACC,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,kHAAkH,GAC5H,EAGII,EAAWD,GACfF,EAAC,OACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,EACC,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,wHAAwH,GAClI,EAMWK,EAAgB,IAAM,CACjC,GAAM,CAACC,EAASC,CAAU,EAAId,EAAW,EACnC,CAACe,EAAWC,CAAY,EAAIjB,EAChCK,EACAS,EAAQT,CAAiB,GAAK,KAChC,EACMa,EAAkBF,IAAc,MAAQ,MAAQ,MACtDlB,EAAU,IAAM,CACdiB,EAAW,CAAE,CAACV,CAAiB,EAAGW,CAAU,CAAC,CAC/C,EAAG,CAACA,EAAWD,CAAU,CAAC,EAE1B,IAAMI,EAAkBtB,EAAY,IAAM,CACxBE,EAAO,WAAW,EAC1B,KAAKQ,EAAO,iBAAkBW,CAAe,EACrDD,EAAaC,CAAe,CAC9B,EAAG,CAACD,EAAcC,CAAe,CAAC,EAElC,OACEV,EAACN,EAAA,CACC,OAAQc,IAAc,MACtB,MAAO,2BAA2BE,CAAe,GACjD,QAASC,EAER,SAAAD,IAAoB,MAAQV,EAACE,EAAA,EAAQ,EAAKF,EAACI,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"]}
+{"version":3,"sources":["../../src/constants.ts","../../src/direction/DirectionTool.tsx"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","EVENTS","LTRIcon","props","jsxs","jsx","RTLIcon","DirectionTool","globals","setGlobals","useGlobals","direction","setDirection","useAddonState","targetDirection","useEffect","toggleDirection","useCallback","addons","IconButton"],"mappings":";;;;;;;AAAO,IAAMA,EAAW,2BACXC,CACAC,CAAAA,CAAoB,GAAGF,CAAQ,CAAA,eAAA,CAAA,CAG/BG,EAAS,CACpB,iBAAA,CAAmB,CAAGH,EAAAA,CAAQ,CAC9B,gBAAA,CAAA,CAAA,gBAAA,CAAkB,GAAGA,CAAQ,CAAA,gBAAA,CAAA,CAC7B,SAAW,CAAA,CAAA,EAAGA,CAAQ,CAAA,SAAA,CACxB,MCJMI,CAAWC,CAAAA,CAAAA,EACfC,gBAAC,KACC,CAAA,CAAA,MAAA,CAAO,eACP,IAAK,CAAA,cAAA,CACL,WAAY,CAAA,GAAA,CACZ,OAAQ,CAAA,WAAA,CACR,OAAO,KACP,CAAA,KAAA,CAAM,KACN,CAAA,KAAA,CAAO,CACL,SAAA,CAAW,YACb,CACC,CAAA,GAAGD,CAEJ,CAAA,QAAA,CAAA,CAAAE,cAAC,CAAA,MAAA,CAAA,CAAK,KAAK,MAAO,CAAA,CAAA,CAAE,iBAAkB,CAAA,CAAA,CACtCA,cAAC,CAAA,MAAA,CAAA,CAAK,EAAE,iHAAkH,CAAA,CAAA,CAAA,CAC5H,CAGIC,CAAAA,CAAAA,CAAWH,CACfC,EAAAA,eAAAA,CAAC,OACC,MAAO,CAAA,cAAA,CACP,IAAK,CAAA,cAAA,CACL,WAAY,CAAA,GAAA,CACZ,QAAQ,WACR,CAAA,MAAA,CAAO,KACP,CAAA,KAAA,CAAM,KACN,CAAA,KAAA,CAAO,CACL,SAAW,CAAA,YACb,EACC,GAAGD,CAAAA,CAEJ,UAAAE,cAAC,CAAA,MAAA,CAAA,CAAK,IAAK,CAAA,MAAA,CAAO,CAAE,CAAA,iBAAA,CAAkB,EACtCA,cAAC,CAAA,MAAA,CAAA,CAAK,CAAE,CAAA,uHAAA,CAAwH,CAClI,CAAA,CAAA,CAAA,CAMWE,EAAgB,IAAM,CACjC,GAAM,CAACC,CAASC,CAAAA,CAAU,EAAIC,qBAAW,EAAA,CACnC,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,yBAChCb,CACAQ,CAAAA,CAAAA,CAAQR,CAAiB,CAAA,EAAK,KAChC,CAAA,CACMc,EAAkBH,CAAc,GAAA,KAAA,CAAQ,KAAQ,CAAA,KAAA,CACtDI,eAAU,CAAA,IAAM,CACdN,CAAW,CAAA,CAAE,CAACT,CAAiB,EAAGW,CAAU,CAAC,EAC/C,CAAA,CAAG,CAACA,CAAAA,CAAWF,CAAU,CAAC,EAE1B,IAAMO,CAAAA,CAAkBC,iBAAY,CAAA,IAAM,CACxBC,iBAAAA,CAAO,YACf,CAAA,IAAA,CAAKjB,CAAO,CAAA,gBAAA,CAAkBa,CAAe,CAAA,CACrDF,EAAaE,CAAe,EAC9B,CAAG,CAAA,CAACF,CAAcE,CAAAA,CAAe,CAAC,CAElC,CAAA,OACET,cAACc,CAAAA,qBAAAA,CAAA,CACC,MAAA,CAAQR,IAAc,KACtB,CAAA,KAAA,CAAO,CAA2BG,wBAAAA,EAAAA,CAAe,CACjD,CAAA,CAAA,OAAA,CAASE,EAER,QAAAF,CAAAA,CAAAA,GAAoB,KAAQT,CAAAA,cAAAA,CAACH,CAAA,CAAA,EAAQ,EAAKG,cAACC,CAAAA,CAAAA,CAAA,EAAQ,CAAA,CACtD,CAEJ","file":"DirectionTool.cjs","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 { 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"]}

package/dist/direction/DirectionTool.js

@@ -6,5 +6,5 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 var t="@saas-ui/storybook-addon2",n=`${t}/direction-tool`,i={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};var D=e=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...e,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"})]}),I=e=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...e,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"})]}),L=()=>{let[e,s]=useGlobals(),[l,c]=useAddonState(n,e[n]||"ltr"),r=l!=="ltr"?"ltr":"rtl";useEffect(()=>{s({[n]:l});},[l,s]);let a=useCallback(()=>{addons.getChannel().emit(i.TOGGLE_DIRECTION,r),c(r);},[c,r]);return jsx(IconButton,{active:l==="rtl",title:`Set layout direction to ${r}`,onClick:a,children:r==="ltr"?jsx(D,{}):jsx(I,{})})};
 
 export { L as DirectionTool };
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=DirectionTool.js.map
 //# sourceMappingURL=DirectionTool.js.map

package/dist/direction/DirectionTool.js.map

@@ -1 +1 @@
-{"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","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection"],"mappings":"AAAA,OAAS,eAAAA,EAAa,aAAAC,MAAiB,QACvC,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,cAAAC,MAAkB,yBAClD,OAAS,cAAAC,MAAkB,wBCFpB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,EDHE,OAYE,OAAAK,EAZF,QAAAC,MAAA,oBADF,IAAMC,EAAWC,GACfF,EAAC,OACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,EACC,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,kHAAkH,GAC5H,EAGII,EAAWD,GACfF,EAAC,OACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,EACC,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,wHAAwH,GAClI,EAMWK,EAAgB,IAAM,CACjC,GAAM,CAACC,EAASC,CAAU,EAAId,EAAW,EACnC,CAACe,EAAWC,CAAY,EAAIjB,EAChCK,EACAS,EAAQT,CAAiB,GAAK,KAChC,EACMa,EAAkBF,IAAc,MAAQ,MAAQ,MACtDlB,EAAU,IAAM,CACdiB,EAAW,CAAE,CAACV,CAAiB,EAAGW,CAAU,CAAC,CAC/C,EAAG,CAACA,EAAWD,CAAU,CAAC,EAE1B,IAAMI,EAAkBtB,EAAY,IAAM,CACxBE,EAAO,WAAW,EAC1B,KAAKQ,EAAO,iBAAkBW,CAAe,EACrDD,EAAaC,CAAe,CAC9B,EAAG,CAACD,EAAcC,CAAe,CAAC,EAElC,OACEV,EAACN,EAAA,CACC,OAAQc,IAAc,MACtB,MAAO,2BAA2BE,CAAe,GACjD,QAASC,EAER,SAAAD,IAAoB,MAAQV,EAACE,EAAA,EAAQ,EAAKF,EAACI,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"]}
+{"version":3,"sources":["../../src/constants.ts","../../src/direction/DirectionTool.tsx"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","EVENTS","LTRIcon","props","jsxs","jsx","RTLIcon","DirectionTool","globals","setGlobals","useGlobals","direction","setDirection","useAddonState","targetDirection","useEffect","toggleDirection","useCallback","addons","IconButton"],"mappings":";;;;;AAAO,IAAMA,EAAW,2BACXC,CACAC,CAAAA,CAAoB,GAAGF,CAAQ,CAAA,eAAA,CAAA,CAG/BG,EAAS,CACpB,iBAAA,CAAmB,CAAGH,EAAAA,CAAQ,CAC9B,gBAAA,CAAA,CAAA,gBAAA,CAAkB,GAAGA,CAAQ,CAAA,gBAAA,CAAA,CAC7B,SAAW,CAAA,CAAA,EAAGA,CAAQ,CAAA,SAAA,CACxB,MCJMI,CAAWC,CAAAA,CAAAA,EACfC,KAAC,KACC,CAAA,CAAA,MAAA,CAAO,eACP,IAAK,CAAA,cAAA,CACL,WAAY,CAAA,GAAA,CACZ,OAAQ,CAAA,WAAA,CACR,OAAO,KACP,CAAA,KAAA,CAAM,KACN,CAAA,KAAA,CAAO,CACL,SAAA,CAAW,YACb,CACC,CAAA,GAAGD,CAEJ,CAAA,QAAA,CAAA,CAAAE,GAAC,CAAA,MAAA,CAAA,CAAK,KAAK,MAAO,CAAA,CAAA,CAAE,iBAAkB,CAAA,CAAA,CACtCA,GAAC,CAAA,MAAA,CAAA,CAAK,EAAE,iHAAkH,CAAA,CAAA,CAAA,CAC5H,CAGIC,CAAAA,CAAAA,CAAWH,CACfC,EAAAA,IAAAA,CAAC,OACC,MAAO,CAAA,cAAA,CACP,IAAK,CAAA,cAAA,CACL,WAAY,CAAA,GAAA,CACZ,QAAQ,WACR,CAAA,MAAA,CAAO,KACP,CAAA,KAAA,CAAM,KACN,CAAA,KAAA,CAAO,CACL,SAAW,CAAA,YACb,EACC,GAAGD,CAAAA,CAEJ,UAAAE,GAAC,CAAA,MAAA,CAAA,CAAK,IAAK,CAAA,MAAA,CAAO,CAAE,CAAA,iBAAA,CAAkB,EACtCA,GAAC,CAAA,MAAA,CAAA,CAAK,CAAE,CAAA,uHAAA,CAAwH,CAClI,CAAA,CAAA,CAAA,CAMWE,EAAgB,IAAM,CACjC,GAAM,CAACC,CAASC,CAAAA,CAAU,EAAIC,UAAW,EAAA,CACnC,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,cAChCb,CACAQ,CAAAA,CAAAA,CAAQR,CAAiB,CAAA,EAAK,KAChC,CAAA,CACMc,EAAkBH,CAAc,GAAA,KAAA,CAAQ,KAAQ,CAAA,KAAA,CACtDI,SAAU,CAAA,IAAM,CACdN,CAAW,CAAA,CAAE,CAACT,CAAiB,EAAGW,CAAU,CAAC,EAC/C,CAAA,CAAG,CAACA,CAAAA,CAAWF,CAAU,CAAC,EAE1B,IAAMO,CAAAA,CAAkBC,WAAY,CAAA,IAAM,CACxBC,MAAAA,CAAO,YACf,CAAA,IAAA,CAAKjB,CAAO,CAAA,gBAAA,CAAkBa,CAAe,CAAA,CACrDF,EAAaE,CAAe,EAC9B,CAAG,CAAA,CAACF,CAAcE,CAAAA,CAAe,CAAC,CAElC,CAAA,OACET,GAACc,CAAAA,UAAAA,CAAA,CACC,MAAA,CAAQR,IAAc,KACtB,CAAA,KAAA,CAAO,CAA2BG,wBAAAA,EAAAA,CAAe,CACjD,CAAA,CAAA,OAAA,CAASE,EAER,QAAAF,CAAAA,CAAAA,GAAoB,KAAQT,CAAAA,GAAAA,CAACH,CAAA,CAAA,EAAQ,EAAKG,GAACC,CAAAA,CAAAA,CAAA,EAAQ,CAAA,CACtD,CAEJ","file":"DirectionTool.js","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 { 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"]}

package/dist/direction/useDirection.cjs

@@ -6,5 +6,5 @@ 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.cjs.map
 //# sourceMappingURL=useDirection.cjs.map

package/dist/direction/useDirection.cjs.map

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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"]}
+{"version":3,"sources":["../../src/constants.ts","../../src/direction/useDirection.tsx"],"names":["ADDON_ID","EVENTS","useDirection","initialDirection","direction","setDirection","useState","useEffect","channel","addons","callback","value"],"mappings":";;;;;AAAaA,IAAAA,CAAAA,CAAW,4BAKXC,EAAS,CACpB,iBAAA,CAAmB,GAAGD,CAAQ,CAAA,gBAAA,CAAA,CAC9B,iBAAkB,CAAGA,EAAAA,CAAQ,CAC7B,gBAAA,CAAA,CAAA,SAAA,CAAW,CAAGA,EAAAA,CAAQ,WACxB,ECFO,IAAME,CAAe,CAAA,CAACC,CAAkC,CAAA,KAAA,GAAU,CACvE,GAAM,CAACC,CAAWC,CAAAA,CAAY,CAAIC,CAAAA,cAAAA,CAASH,EAAiB,WAAY,EAAC,EAEzE,OAAAI,eAAAA,CAAU,IAAM,CACd,QAAA,CAAS,eAAgB,CAAA,GAAA,CAAMH,EACjC,CAAA,CAAG,CAACA,CAAS,CAAC,EAEdG,eAAU,CAAA,IAAM,CACd,IAAMC,CAAAA,CAAUC,iBAAO,CAAA,UAAA,EACjBC,CAAAA,CAAAA,CAAYC,GAAkBN,CAAaM,CAAAA,CAAK,EACtD,OAAAH,CAAAA,CAAQ,GAAGP,CAAO,CAAA,gBAAA,CAAkBS,CAAQ,CAAA,CACrC,IAAM,CACXF,EAAQ,cAAeP,CAAAA,CAAAA,CAAO,gBAAkBS,CAAAA,CAAQ,EAC1D,CACF,EAAG,CAACL,CAAY,CAAC,CAAA,CAEVD,CACT","file":"useDirection.cjs","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 { 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"]}

package/dist/direction/useDirection.d.cts

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

package/dist/direction/useDirection.d.ts

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

package/dist/direction/useDirection.js

@@ -4,5 +4,5 @@ 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.js.map
 //# sourceMappingURL=useDirection.js.map

package/dist/direction/useDirection.js.map

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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"]}
+{"version":3,"sources":["../../src/constants.ts","../../src/direction/useDirection.tsx"],"names":["ADDON_ID","EVENTS","useDirection","initialDirection","direction","setDirection","useState","useEffect","channel","addons","callback","value"],"mappings":";;;AAAaA,IAAAA,CAAAA,CAAW,4BAKXC,EAAS,CACpB,iBAAA,CAAmB,GAAGD,CAAQ,CAAA,gBAAA,CAAA,CAC9B,iBAAkB,CAAGA,EAAAA,CAAQ,CAC7B,gBAAA,CAAA,CAAA,SAAA,CAAW,CAAGA,EAAAA,CAAQ,WACxB,ECFO,IAAME,CAAe,CAAA,CAACC,CAAkC,CAAA,KAAA,GAAU,CACvE,GAAM,CAACC,CAAWC,CAAAA,CAAY,CAAIC,CAAAA,QAAAA,CAASH,EAAiB,WAAY,EAAC,EAEzE,OAAAI,SAAAA,CAAU,IAAM,CACd,QAAA,CAAS,eAAgB,CAAA,GAAA,CAAMH,EACjC,CAAA,CAAG,CAACA,CAAS,CAAC,EAEdG,SAAU,CAAA,IAAM,CACd,IAAMC,CAAAA,CAAUC,MAAO,CAAA,UAAA,EACjBC,CAAAA,CAAAA,CAAYC,GAAkBN,CAAaM,CAAAA,CAAK,EACtD,OAAAH,CAAAA,CAAQ,GAAGP,CAAO,CAAA,gBAAA,CAAkBS,CAAQ,CAAA,CACrC,IAAM,CACXF,EAAQ,cAAeP,CAAAA,CAAAA,CAAO,gBAAkBS,CAAAA,CAAQ,EAC1D,CACF,EAAG,CAACL,CAAY,CAAC,CAAA,CAEVD,CACT","file":"useDirection.js","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 { 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"]}

package/dist/index.cjs

@@ -8,5 +8,5 @@ exports.DIRECTION_TOOL_ID = O;
 exports.EVENTS = d;
 exports.THEME_TOOL_ID = f;
 exports.getThemingArgTypes = h;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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,EAEJ,CAEA,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"]}
+{"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":";;AAAaA,IAAAA,CAAAA,CAAW,4BACXC,CAAqB,CAAA,CAAA,EAAGD,CAAQ,CAChCE,gBAAAA,CAAAA,CAAAA,CAAAA,CAAoB,GAAGF,CAAQ,CAAA,eAAA,CAAA,CAC/BG,EAAgB,CAAGH,EAAAA,CAAQ,cAE3BI,CAAS,CAAA,CACpB,kBAAmB,CAAGJ,EAAAA,CAAQ,CAC9B,gBAAA,CAAA,CAAA,gBAAA,CAAkB,CAAGA,EAAAA,CAAQ,mBAC7B,SAAW,CAAA,CAAA,EAAGA,CAAQ,CACxB,SAAA,CAAA,ECQA,SAASK,CAAoBC,CAAAA,CAAAA,CAAe,CAC1C,IAAMC,CAAAA,CAAY,OAAO,IAAKD,CAAAA,CAAAA,EAAS,EAAE,CAAA,CACzC,OAAO,CACL,IAAA,CACA,KACA,CAAA,KAAA,CACA,KACA,CAAA,KAAA,CACA,MACA,KACA,CAAA,KAAA,CACA,MACA,KACF,CAAA,CAAE,MAAOE,CAASD,EAAAA,CAAAA,CAAU,SAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,CAAcC,CAAAA,CAAAA,CAA8B,CAvE9C,IAAAC,CAAAA,CAAAC,CAAAC,CAAAA,CAAAA,CAAAC,CAwEE,CAAA,IAAMC,EAAYN,CAAM,CAAA,UAAA,CAAWC,CAAa,CAChD,CAAA,GAAI,CAACK,CACH,CAAA,OAGF,IAAMC,CAEF,CAAA,GAEEC,CAAiB,CAAA,MAAA,CAAO,KAAKF,CAAU,CAAA,QAAA,EAAY,EAAE,CAAA,CACvDE,CAAe,CAAA,MAAA,GACjBD,CAAS,CAAA,OAAA,CAAU,CACjB,IAAM,CAAA,CAAE,KAAM,MAAQ,CAAA,KAAA,CAAOC,CAAe,CAC5C,CAAA,YAAA,CAAA,CAAcN,EAAAI,CAAU,CAAA,YAAA,GAAV,YAAAJ,CAAwB,CAAA,OACxC,GAGF,IAAMO,CAAAA,CAAc,OAAO,IAAKH,CAAAA,CAAAA,CAAU,KAAS,EAAA,EAAE,CAAA,CAQrD,GAPIG,CAAY,CAAA,MAAA,GACdF,EAAS,IAAO,CAAA,CACd,KAAM,CAAE,IAAA,CAAM,OAAQ,KAAOE,CAAAA,CAAY,EACzC,YAAcN,CAAAA,CAAAA,CAAAA,CAAAG,EAAU,YAAV,GAAA,IAAA,CAAA,KAAA,CAAA,CAAAH,EAAwB,IACxC,CAAA,CAAA,CAAA,CAGEC,CAAAE,CAAAA,CAAAA,CAAU,YAAV,GAAA,IAAA,EAAAF,EAAyB,WAAgB,CAAA,CAC3C,IAAMM,CAAe,CAAA,MAAA,CAAO,QAAQV,CAAM,CAAA,MAAM,EAC7C,MAAO,CAAA,CAAC,EAAGJ,CAAK,IAAMD,CAAoBC,CAAAA,CAAK,CAAC,CAChD,CAAA,GAAA,CAAI,CAAC,CAACe,CAAG,CAAA,GAAMA,CAAG,CAEjBD,CAAAA,CAAAA,CAAa,SACfH,CAAS,CAAA,WAAA,CAAc,CACrB,IAAM,CAAA,CAAE,IAAM,CAAA,MAAA,CAAQ,KAAOG,CAAAA,CAAa,EAC1C,YAAcL,CAAAA,CAAAA,CAAAA,CAAAC,EAAU,YAAV,GAAA,IAAA,CAAA,KAAA,CAAA,CAAAD,EAAwB,WACxC,CAAA,EAEJ,CAEA,OAAOE,CACT","file":"index.cjs","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.d.cts

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

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 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 'storybook/internal/types';
 import '@chakra-ui/react';

package/dist/index.js

@@ -1,5 +1,5 @@
 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.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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,EAEJ,CAEA,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"]}
+{"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":"AAAaA,IAAAA,CAAAA,CAAW,4BACXC,CAAqB,CAAA,CAAA,EAAGD,CAAQ,CAChCE,gBAAAA,CAAAA,CAAAA,CAAAA,CAAoB,GAAGF,CAAQ,CAAA,eAAA,CAAA,CAC/BG,EAAgB,CAAGH,EAAAA,CAAQ,cAE3BI,CAAS,CAAA,CACpB,kBAAmB,CAAGJ,EAAAA,CAAQ,CAC9B,gBAAA,CAAA,CAAA,gBAAA,CAAkB,CAAGA,EAAAA,CAAQ,mBAC7B,SAAW,CAAA,CAAA,EAAGA,CAAQ,CACxB,SAAA,CAAA,ECQA,SAASK,CAAoBC,CAAAA,CAAAA,CAAe,CAC1C,IAAMC,CAAAA,CAAY,OAAO,IAAKD,CAAAA,CAAAA,EAAS,EAAE,CAAA,CACzC,OAAO,CACL,IAAA,CACA,KACA,CAAA,KAAA,CACA,KACA,CAAA,KAAA,CACA,MACA,KACA,CAAA,KAAA,CACA,MACA,KACF,CAAA,CAAE,MAAOE,CAASD,EAAAA,CAAAA,CAAU,SAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,CAAcC,CAAAA,CAAAA,CAA8B,CAvE9C,IAAAC,CAAAA,CAAAC,CAAAC,CAAAA,CAAAA,CAAAC,CAwEE,CAAA,IAAMC,EAAYN,CAAM,CAAA,UAAA,CAAWC,CAAa,CAChD,CAAA,GAAI,CAACK,CACH,CAAA,OAGF,IAAMC,CAEF,CAAA,GAEEC,CAAiB,CAAA,MAAA,CAAO,KAAKF,CAAU,CAAA,QAAA,EAAY,EAAE,CAAA,CACvDE,CAAe,CAAA,MAAA,GACjBD,CAAS,CAAA,OAAA,CAAU,CACjB,IAAM,CAAA,CAAE,KAAM,MAAQ,CAAA,KAAA,CAAOC,CAAe,CAC5C,CAAA,YAAA,CAAA,CAAcN,EAAAI,CAAU,CAAA,YAAA,GAAV,YAAAJ,CAAwB,CAAA,OACxC,GAGF,IAAMO,CAAAA,CAAc,OAAO,IAAKH,CAAAA,CAAAA,CAAU,KAAS,EAAA,EAAE,CAAA,CAQrD,GAPIG,CAAY,CAAA,MAAA,GACdF,EAAS,IAAO,CAAA,CACd,KAAM,CAAE,IAAA,CAAM,OAAQ,KAAOE,CAAAA,CAAY,EACzC,YAAcN,CAAAA,CAAAA,CAAAA,CAAAG,EAAU,YAAV,GAAA,IAAA,CAAA,KAAA,CAAA,CAAAH,EAAwB,IACxC,CAAA,CAAA,CAAA,CAGEC,CAAAE,CAAAA,CAAAA,CAAU,YAAV,GAAA,IAAA,EAAAF,EAAyB,WAAgB,CAAA,CAC3C,IAAMM,CAAe,CAAA,MAAA,CAAO,QAAQV,CAAM,CAAA,MAAM,EAC7C,MAAO,CAAA,CAAC,EAAGJ,CAAK,IAAMD,CAAoBC,CAAAA,CAAK,CAAC,CAChD,CAAA,GAAA,CAAI,CAAC,CAACe,CAAG,CAAA,GAAMA,CAAG,CAEjBD,CAAAA,CAAAA,CAAa,SACfH,CAAS,CAAA,WAAA,CAAc,CACrB,IAAM,CAAA,CAAE,IAAM,CAAA,MAAA,CAAQ,KAAOG,CAAAA,CAAa,EAC1C,YAAcL,CAAAA,CAAAA,CAAAA,CAAAC,EAAU,YAAV,GAAA,IAAA,CAAA,KAAA,CAAA,CAAAD,EAAwB,WACxC,CAAA,EAEJ,CAEA,OAAOE,CACT","file":"index.js","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"]}