@yamada-ui/react 2.2.0-next-20260409093013 → 2.2.0-next-20260409094221

package/dist/cjs/core/system/theme-provider.cjs

@@ -27,7 +27,7 @@ const getPreventTransition = (environment) => {
 		forceReflow();
 		requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				document.head.removeChild(css$1);
+				doc.head.removeChild(css$1);
 			});
 		});
 	};

package/dist/cjs/core/system/theme-provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.cjs","names":["css","ThemeProvider: FC<ThemeProviderProps>","THEME_SCHEME_STORAGE_KEY","createStorageManager","useEnvironment","changeThemeScheme: ChangeThemeScheme","themeScheme","EmotionThemeProvider","GlobalStyles: FC","useSystem","Global","ThemeContext"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  ThemeProvider as EmotionThemeProvider,\n  Global,\n  ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport { isEmptyObject, isObject, isUndefined, merge } from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\n\nexport const getPreventTransition = (environment: Environment) => {\n  const { getDocument, getWindow } = environment\n  const win = getWindow()\n  const doc = getDocument()\n\n  if (!win || !doc) return\n\n  const css = doc.createElement(\"style\")\n\n  const node = doc.createTextNode(\n    `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  doc.head.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(doc.body)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        document.head.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends\n    PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n  theme = {},\n}) => {\n  const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n    config ?? {}\n  const storageManager = useMemo(\n    () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n    [cookie, defaultThemeScheme, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    storageManager.get(),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const { getDocument } = environment\n      const doc = getDocument()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (doc) doc.documentElement.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      storageManager.set(themeScheme)\n    },\n    [disableTransitionOnChange, environment, storageManager],\n  )\n\n  useEffect(() => {\n    const themeScheme = storageManager.get()\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, storageManager])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const cssVars = useMemo(() => {\n    return { \":host, :root, [data-mode]\": system.cssVars }\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", cssVars),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAa,wBAAwB,gBAA6B;CAChE,MAAM,EAAE,aAAa,cAAc;CACnC,MAAM,MAAM,WAAW;CACvB,MAAM,MAAM,aAAa;AAEzB,KAAI,CAAC,OAAO,CAAC,IAAK;CAElB,MAAMA,QAAM,IAAI,cAAc,QAAQ;CAEtC,MAAM,OAAO,IAAI,eACf,2JACD;AAED,OAAI,YAAY,KAAK;AAErB,KAAI,KAAK,YAAYA,MAAI;AAEzB,cAAa;EACX,MAAM,oBAAoB,IAAI,iBAAiB,IAAI,KAAK;AAExD,eAAa;AAEb,8BAA4B;AAC1B,+BAA4B;AAC1B,aAAS,KAAK,YAAYA,MAAI;KAC9B;IACF;;;AAmCN,MAAaC,iBAAyC,EACpD,UACA,QACA,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAaC,2CACb,QAAQ,EAAE,OACN;CACJ,MAAM,EAAE,qBAAqB,QAAQ,8BACnC,UAAU,EAAE;CACd,MAAM,0CACEC,6CAAqB,SAAS,YAAY,oBAAoB,OAAO,EAC3E;EAAC;EAAQ;EAAoB;EAAS;EAAW,CAClD;CACD,MAAM,cAAcC,6CAAgB;CACpC,MAAM,CAAC,aAAa,sCAClB,eAAe,KAAK,CACrB;CAED,MAAMC,4CACH,kBAAgB;EACf,MAAM,EAAE,gBAAgB;EACxB,MAAM,MAAM,aAAa;EAEzB,MAAM,UAAU,4BACZ,qBAAqB,YAAY,GACjC;AAEJ,MAAI,IAAK,KAAI,gBAAgB,QAAQ,QAAQC;AAE7C,aAAW;AAEX,iBAAeA,cAAY;AAE3B,iBAAe,IAAIA,cAAY;IAEjC;EAAC;EAA2B;EAAa;EAAe,CACzD;AAED,4BAAgB;AAGd,oBAFoB,eAAe,KAAK,CAEV;IAC7B,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,4CAACC;EAAqB,OAAO;GAAE;GAAmB;GAAa,GAAG;GAAO;aACvE,2CAAC,iBAAe,EAEf;GACoB;;AAI3B,MAAaC,qBAAyB;CACpC,MAAM,SAASC,mCAAW;CAC1B,MAAM,EAAE,UAAU,UAAsB;CACxC,MAAM,EAAE,QAAQ,SAAS,OAAO;CAEhC,MAAM,sCAA2B;EAC/B,MAAM,QAAQ,MAAM,QAAQ;AAE5B,MAAI,CAAC,8DAAuB,MAAM,CAAE,QAAO;AAE3C,SAAOT,gBAAI,QAAQ,MAAM,CAAC,MAAM;IAC/B,CAAC,QAAQ,MAAM,CAAC;CAEnB,MAAM,uCAA4B;EAChC,MAAM,QAAQ,MAAM,QAAQ;AAE5B,MAAI,CAAC,8DAAuB,MAAM,CAAE,QAAO;AAE3C,SAAOA,gBAAI,QAAQ,MAAM,CAAC,MAAM;IAC/B,CAAC,QAAQ,MAAM,CAAC;AAMnB,QACE,2CAACU,yBACC,QAAQ;EACN;EACA,KAAK,mCARmB;AAC5B,UAAO,EAAE,6BAA6B,OAAO,SAAS;KACrD,CAAC,OAAO,CAAC,CAMiB;EACvB,KAAK,SAAS,WAAW;EACzB,KAAK,UAAU,YAAY;EAC5B,GACD;;;;;;;AASN,MAAa,iBAA+C;CAC1D,MAAM,+BAAoBC,4BAAa;CAEvC,MAAM,iCAAsB;EAC1B,MAAM,EAAE,gBAAgB;AAExB,yDAAgB,YAAY,IAAI,gBAAgB,OAAQ,QAAO;EAE/D,MAAM,cACJ,kBAAkB,iEAA0B,cAAc,aAAa,GACnE,cAAc,aAAa,eAC3B;AAEN,MAAI,CAAC,YAAa,QAAO;AAEzB,sDAA6B,eAAe,YAAY;IACvD,CAAC,cAAc,CAAC;AAanB,iCAX4B;EAC1B,MAAM,EAAE,mBAAmB,gBAAgB;AAE3C,SAAO;GACL;GACA;GACA;GACA;GACD;IACA,CAAC,OAAO,cAAc,CAAC"}
+{"version":3,"file":"theme-provider.cjs","names":["css","ThemeProvider: FC<ThemeProviderProps>","THEME_SCHEME_STORAGE_KEY","createStorageManager","useEnvironment","changeThemeScheme: ChangeThemeScheme","themeScheme","EmotionThemeProvider","GlobalStyles: FC","useSystem","Global","ThemeContext"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  ThemeProvider as EmotionThemeProvider,\n  Global,\n  ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport { isEmptyObject, isObject, isUndefined, merge } from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\n\nexport const getPreventTransition = (environment: Environment) => {\n  const { getDocument, getWindow } = environment\n  const win = getWindow()\n  const doc = getDocument()\n\n  if (!win || !doc) return\n\n  const css = doc.createElement(\"style\")\n\n  const node = doc.createTextNode(\n    `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  doc.head.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(doc.body)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        doc.head.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends\n    PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n  theme = {},\n}) => {\n  const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n    config ?? {}\n  const storageManager = useMemo(\n    () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n    [cookie, defaultThemeScheme, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    storageManager.get(),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const { getDocument } = environment\n      const doc = getDocument()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (doc) doc.documentElement.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      storageManager.set(themeScheme)\n    },\n    [disableTransitionOnChange, environment, storageManager],\n  )\n\n  useEffect(() => {\n    const themeScheme = storageManager.get()\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, storageManager])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const cssVars = useMemo(() => {\n    return { \":host, :root, [data-mode]\": system.cssVars }\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", cssVars),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAa,wBAAwB,gBAA6B;CAChE,MAAM,EAAE,aAAa,cAAc;CACnC,MAAM,MAAM,WAAW;CACvB,MAAM,MAAM,aAAa;AAEzB,KAAI,CAAC,OAAO,CAAC,IAAK;CAElB,MAAMA,QAAM,IAAI,cAAc,QAAQ;CAEtC,MAAM,OAAO,IAAI,eACf,2JACD;AAED,OAAI,YAAY,KAAK;AAErB,KAAI,KAAK,YAAYA,MAAI;AAEzB,cAAa;EACX,MAAM,oBAAoB,IAAI,iBAAiB,IAAI,KAAK;AAExD,eAAa;AAEb,8BAA4B;AAC1B,+BAA4B;AAC1B,QAAI,KAAK,YAAYA,MAAI;KACzB;IACF;;;AAmCN,MAAaC,iBAAyC,EACpD,UACA,QACA,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAaC,2CACb,QAAQ,EAAE,OACN;CACJ,MAAM,EAAE,qBAAqB,QAAQ,8BACnC,UAAU,EAAE;CACd,MAAM,0CACEC,6CAAqB,SAAS,YAAY,oBAAoB,OAAO,EAC3E;EAAC;EAAQ;EAAoB;EAAS;EAAW,CAClD;CACD,MAAM,cAAcC,6CAAgB;CACpC,MAAM,CAAC,aAAa,sCAClB,eAAe,KAAK,CACrB;CAED,MAAMC,4CACH,kBAAgB;EACf,MAAM,EAAE,gBAAgB;EACxB,MAAM,MAAM,aAAa;EAEzB,MAAM,UAAU,4BACZ,qBAAqB,YAAY,GACjC;AAEJ,MAAI,IAAK,KAAI,gBAAgB,QAAQ,QAAQC;AAE7C,aAAW;AAEX,iBAAeA,cAAY;AAE3B,iBAAe,IAAIA,cAAY;IAEjC;EAAC;EAA2B;EAAa;EAAe,CACzD;AAED,4BAAgB;AAGd,oBAFoB,eAAe,KAAK,CAEV;IAC7B,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,4CAACC;EAAqB,OAAO;GAAE;GAAmB;GAAa,GAAG;GAAO;aACvE,2CAAC,iBAAe,EAEf;GACoB;;AAI3B,MAAaC,qBAAyB;CACpC,MAAM,SAASC,mCAAW;CAC1B,MAAM,EAAE,UAAU,UAAsB;CACxC,MAAM,EAAE,QAAQ,SAAS,OAAO;CAEhC,MAAM,sCAA2B;EAC/B,MAAM,QAAQ,MAAM,QAAQ;AAE5B,MAAI,CAAC,8DAAuB,MAAM,CAAE,QAAO;AAE3C,SAAOT,gBAAI,QAAQ,MAAM,CAAC,MAAM;IAC/B,CAAC,QAAQ,MAAM,CAAC;CAEnB,MAAM,uCAA4B;EAChC,MAAM,QAAQ,MAAM,QAAQ;AAE5B,MAAI,CAAC,8DAAuB,MAAM,CAAE,QAAO;AAE3C,SAAOA,gBAAI,QAAQ,MAAM,CAAC,MAAM;IAC/B,CAAC,QAAQ,MAAM,CAAC;AAMnB,QACE,2CAACU,yBACC,QAAQ;EACN;EACA,KAAK,mCARmB;AAC5B,UAAO,EAAE,6BAA6B,OAAO,SAAS;KACrD,CAAC,OAAO,CAAC,CAMiB;EACvB,KAAK,SAAS,WAAW;EACzB,KAAK,UAAU,YAAY;EAC5B,GACD;;;;;;;AASN,MAAa,iBAA+C;CAC1D,MAAM,+BAAoBC,4BAAa;CAEvC,MAAM,iCAAsB;EAC1B,MAAM,EAAE,gBAAgB;AAExB,yDAAgB,YAAY,IAAI,gBAAgB,OAAQ,QAAO;EAE/D,MAAM,cACJ,kBAAkB,iEAA0B,cAAc,aAAa,GACnE,cAAc,aAAa,eAC3B;AAEN,MAAI,CAAC,YAAa,QAAO;AAEzB,sDAA6B,eAAe,YAAY;IACvD,CAAC,cAAc,CAAC;AAanB,iCAX4B;EAC1B,MAAM,EAAE,mBAAmB,gBAAgB;AAE3C,SAAO;GACL;GACA;GACA;GACA;GACD;IACA,CAAC,OAAO,cAAc,CAAC"}

package/dist/cjs/providers/ui-provider/ui-provider.cjs

@@ -19,37 +19,40 @@ let react_jsx_runtime = require("react/jsx-runtime");
 /**
 * The global provider that must be added to make all Yamada UI components work correctly.
 */
-const UIProvider = ({ children, colorMode, colorModeStorageKey, config: config$1 = require_config.config, cookie, dir, intl, locale, storage, theme: theme$1 = require_theme_index.theme, themeSchemeStorageKey }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_environment_provider.EnvironmentProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_i18n_provider.I18nProvider, {
-		dir,
-		intl,
-		locale,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_system_provider.SystemProvider, {
-			config: config$1,
-			theme: theme$1,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_theme_provider.ThemeProvider, {
+const UIProvider = ({ children, colorMode, colorModeStorageKey, config: config$1 = require_config.config, cookie, dir, intl, locale, rootNode, storage, theme: theme$1 = require_theme_index.theme, themeSchemeStorageKey }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_environment_provider.EnvironmentProvider, {
+		value: rootNode,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_i18n_provider.I18nProvider, {
+			dir,
+			intl,
+			locale,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_system_provider.SystemProvider, {
 				config: config$1,
-				cookie,
-				storage,
-				storageKey: themeSchemeStorageKey,
 				theme: theme$1,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_mode_provider.ColorModeProvider, {
-					colorMode,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_theme_provider.ThemeProvider, {
 					config: config$1,
 					cookie,
 					storage,
-					storageKey: colorModeStorageKey,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_loading_provider.LoadingProvider, {
-						...config$1.loading,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_notice_provider.NoticeProvider, {
-							...config$1.notice,
-							children
+					storageKey: themeSchemeStorageKey,
+					theme: theme$1,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_mode_provider.ColorModeProvider, {
+						colorMode,
+						config: config$1,
+						cookie,
+						storage,
+						storageKey: colorModeStorageKey,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_loading_provider.LoadingProvider, {
+							...config$1.loading,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_notice_provider.NoticeProvider, {
+								...config$1.notice,
+								children
+							})
 						})
 					})
 				})
 			})
 		})
-	}) });
+	});
 };
 const extendTheme = (theme$1) => {
 	return (0, require_utils_index.utils_exports.merge)(require_theme_index.theme, theme$1);

package/dist/cjs/providers/ui-provider/ui-provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ui-provider.cjs","names":["UIProvider: FC<UIProviderProps>","defaultConfig","defaultTheme","EnvironmentProvider","I18nProvider","SystemProvider","config","theme","ThemeProvider","ColorModeProvider","LoadingProvider","NoticeProvider"],"sources":["../../../../src/providers/ui-provider/ui-provider.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type {\n  ColorModeProviderProps,\n  ThemeConfig,\n  ThemeProviderProps,\n  UsageTheme,\n} from \"../../core\"\nimport type { DeepMerge } from \"../../utils\"\nimport type { I18nProviderProps } from \"../i18n-provider\"\nimport { LoadingProvider } from \"../../components/loading\"\nimport { NoticeProvider } from \"../../components/notice\"\nimport {\n  ColorModeProvider,\n  EnvironmentProvider,\n  SystemProvider,\n  ThemeProvider,\n} from \"../../core\"\nimport { config as defaultConfig, theme as defaultTheme } from \"../../theme\"\nimport { merge } from \"../../utils\"\nimport { I18nProvider } from \"../i18n-provider\"\n\nexport interface UIProviderProps\n  extends\n    Omit<ThemeProviderProps, \"storageKey\">,\n    Pick<ColorModeProviderProps, \"colorMode\">,\n    I18nProviderProps {\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  colorModeStorageKey?: string\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  themeSchemeStorageKey?: string\n}\n\n/**\n * The global provider that must be added to make all Yamada UI components work correctly.\n */\nexport const UIProvider: FC<UIProviderProps> = ({\n  children,\n  colorMode,\n  colorModeStorageKey,\n  config = defaultConfig,\n  cookie,\n  dir,\n  intl,\n  locale,\n  storage,\n  theme = defaultTheme,\n  themeSchemeStorageKey,\n}) => {\n  return (\n    <EnvironmentProvider>\n      <I18nProvider dir={dir} intl={intl} locale={locale}>\n        <SystemProvider config={config} theme={theme}>\n          <ThemeProvider\n            config={config}\n            cookie={cookie}\n            storage={storage}\n            storageKey={themeSchemeStorageKey}\n            theme={theme}\n          >\n            <ColorModeProvider\n              colorMode={colorMode}\n              config={config}\n              cookie={cookie}\n              storage={storage}\n              storageKey={colorModeStorageKey}\n            >\n              <LoadingProvider {...config.loading}>\n                <NoticeProvider {...config.notice}>{children}</NoticeProvider>\n              </LoadingProvider>\n            </ColorModeProvider>\n          </ThemeProvider>\n        </SystemProvider>\n      </I18nProvider>\n    </EnvironmentProvider>\n  )\n}\n\ntype DefaultTheme = typeof defaultTheme\n\nexport const extendTheme = <Y extends UsageTheme>(theme: Y) => {\n  return merge<DeepMerge<DefaultTheme, Y>>(defaultTheme, theme)\n}\n\nexport const extendConfig = (config: ThemeConfig) => {\n  return merge(defaultConfig, config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyCA,MAAaA,cAAmC,EAC9C,UACA,WACA,qBACA,mBAASC,uBACT,QACA,KACA,MACA,QACA,SACA,iBAAQC,2BACR,4BACI;AACJ,QACE,2CAACC,8DACC,2CAACC;EAAkB;EAAW;EAAc;YAC1C,2CAACC;GAAe,QAAQC;GAAQ,OAAOC;aACrC,2CAACC;IACC,QAAQF;IACA;IACC;IACT,YAAY;IACZ,OAAOC;cAEP,2CAACE;KACY;KACX,QAAQH;KACA;KACC;KACT,YAAY;eAEZ,2CAACI;MAAgB,GAAIJ,SAAO;gBAC1B,2CAACK;OAAe,GAAIL,SAAO;OAAS;QAA0B;OAC9C;MACA;KACN;IACD;GACJ,GACK;;AAM1B,MAAa,eAAqC,YAAa;AAC7D,qDAAyCJ,2BAAcK,QAAM;;AAG/D,MAAa,gBAAgB,aAAwB;AACnD,qDAAaN,uBAAeK,SAAO"}
+{"version":3,"file":"ui-provider.cjs","names":["UIProvider: FC<UIProviderProps>","defaultConfig","defaultTheme","EnvironmentProvider","I18nProvider","SystemProvider","config","theme","ThemeProvider","ColorModeProvider","LoadingProvider","NoticeProvider"],"sources":["../../../../src/providers/ui-provider/ui-provider.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type {\n  ColorModeProviderProps,\n  EnvironmentProviderProps,\n  ThemeConfig,\n  ThemeProviderProps,\n  UsageTheme,\n} from \"../../core\"\nimport type { DeepMerge } from \"../../utils\"\nimport type { I18nProviderProps } from \"../i18n-provider\"\nimport { LoadingProvider } from \"../../components/loading\"\nimport { NoticeProvider } from \"../../components/notice\"\nimport {\n  ColorModeProvider,\n  EnvironmentProvider,\n  SystemProvider,\n  ThemeProvider,\n} from \"../../core\"\nimport { config as defaultConfig, theme as defaultTheme } from \"../../theme\"\nimport { merge } from \"../../utils\"\nimport { I18nProvider } from \"../i18n-provider\"\n\nexport interface UIProviderProps\n  extends\n    Omit<ThemeProviderProps, \"storageKey\">,\n    Pick<ColorModeProviderProps, \"colorMode\">,\n    I18nProviderProps {\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  colorModeStorageKey?: string\n  /**\n   * The root node to use.\n   */\n  rootNode?: EnvironmentProviderProps[\"value\"]\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  themeSchemeStorageKey?: string\n}\n\n/**\n * The global provider that must be added to make all Yamada UI components work correctly.\n */\nexport const UIProvider: FC<UIProviderProps> = ({\n  children,\n  colorMode,\n  colorModeStorageKey,\n  config = defaultConfig,\n  cookie,\n  dir,\n  intl,\n  locale,\n  rootNode,\n  storage,\n  theme = defaultTheme,\n  themeSchemeStorageKey,\n}) => {\n  return (\n    <EnvironmentProvider value={rootNode}>\n      <I18nProvider dir={dir} intl={intl} locale={locale}>\n        <SystemProvider config={config} theme={theme}>\n          <ThemeProvider\n            config={config}\n            cookie={cookie}\n            storage={storage}\n            storageKey={themeSchemeStorageKey}\n            theme={theme}\n          >\n            <ColorModeProvider\n              colorMode={colorMode}\n              config={config}\n              cookie={cookie}\n              storage={storage}\n              storageKey={colorModeStorageKey}\n            >\n              <LoadingProvider {...config.loading}>\n                <NoticeProvider {...config.notice}>{children}</NoticeProvider>\n              </LoadingProvider>\n            </ColorModeProvider>\n          </ThemeProvider>\n        </SystemProvider>\n      </I18nProvider>\n    </EnvironmentProvider>\n  )\n}\n\ntype DefaultTheme = typeof defaultTheme\n\nexport const extendTheme = <Y extends UsageTheme>(theme: Y) => {\n  return merge<DeepMerge<DefaultTheme, Y>>(defaultTheme, theme)\n}\n\nexport const extendConfig = (config: ThemeConfig) => {\n  return merge(defaultConfig, config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8CA,MAAaA,cAAmC,EAC9C,UACA,WACA,qBACA,mBAASC,uBACT,QACA,KACA,MACA,QACA,UACA,SACA,iBAAQC,2BACR,4BACI;AACJ,QACE,2CAACC;EAAoB,OAAO;YAC1B,2CAACC;GAAkB;GAAW;GAAc;aAC1C,2CAACC;IAAe,QAAQC;IAAQ,OAAOC;cACrC,2CAACC;KACC,QAAQF;KACA;KACC;KACT,YAAY;KACZ,OAAOC;eAEP,2CAACE;MACY;MACX,QAAQH;MACA;MACC;MACT,YAAY;gBAEZ,2CAACI;OAAgB,GAAIJ,SAAO;iBAC1B,2CAACK;QAAe,GAAIL,SAAO;QAAS;SAA0B;QAC9C;OACA;MACN;KACD;IACJ;GACK;;AAM1B,MAAa,eAAqC,YAAa;AAC7D,qDAAyCJ,2BAAcK,QAAM;;AAG/D,MAAa,gBAAgB,aAAwB;AACnD,qDAAaN,uBAAeK,SAAO"}

package/dist/esm/core/system/theme-provider.js

@@ -26,7 +26,7 @@ const getPreventTransition = (environment) => {
 		forceReflow();
 		requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				document.head.removeChild(css$1);
+				doc.head.removeChild(css$1);
 			});
 		});
 	};

package/dist/esm/core/system/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":["css","ThemeProvider: FC<ThemeProviderProps>","changeThemeScheme: ChangeThemeScheme","themeScheme","EmotionThemeProvider","GlobalStyles: FC"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  ThemeProvider as EmotionThemeProvider,\n  Global,\n  ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport { isEmptyObject, isObject, isUndefined, merge } from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\n\nexport const getPreventTransition = (environment: Environment) => {\n  const { getDocument, getWindow } = environment\n  const win = getWindow()\n  const doc = getDocument()\n\n  if (!win || !doc) return\n\n  const css = doc.createElement(\"style\")\n\n  const node = doc.createTextNode(\n    `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  doc.head.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(doc.body)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        document.head.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends\n    PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n  theme = {},\n}) => {\n  const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n    config ?? {}\n  const storageManager = useMemo(\n    () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n    [cookie, defaultThemeScheme, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    storageManager.get(),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const { getDocument } = environment\n      const doc = getDocument()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (doc) doc.documentElement.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      storageManager.set(themeScheme)\n    },\n    [disableTransitionOnChange, environment, storageManager],\n  )\n\n  useEffect(() => {\n    const themeScheme = storageManager.get()\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, storageManager])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const cssVars = useMemo(() => {\n    return { \":host, :root, [data-mode]\": system.cssVars }\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", cssVars),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,wBAAwB,gBAA6B;CAChE,MAAM,EAAE,aAAa,cAAc;CACnC,MAAM,MAAM,WAAW;CACvB,MAAM,MAAM,aAAa;AAEzB,KAAI,CAAC,OAAO,CAAC,IAAK;CAElB,MAAMA,QAAM,IAAI,cAAc,QAAQ;CAEtC,MAAM,OAAO,IAAI,eACf,2JACD;AAED,OAAI,YAAY,KAAK;AAErB,KAAI,KAAK,YAAYA,MAAI;AAEzB,cAAa;EACX,MAAM,oBAAoB,IAAI,iBAAiB,IAAI,KAAK;AAExD,eAAa;AAEb,8BAA4B;AAC1B,+BAA4B;AAC1B,aAAS,KAAK,YAAYA,MAAI;KAC9B;IACF;;;AAmCN,MAAaC,mBAAyC,EACpD,UACA,QACA,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAa,0BACb,QAAQ,EAAE,OACN;CACJ,MAAM,EAAE,qBAAqB,QAAQ,8BACnC,UAAU,EAAE;CACd,MAAM,iBAAiB,cACf,qBAAqB,SAAS,YAAY,oBAAoB,OAAO,EAC3E;EAAC;EAAQ;EAAoB;EAAS;EAAW,CAClD;CACD,MAAM,cAAc,gBAAgB;CACpC,MAAM,CAAC,aAAa,kBAAkB,SACpC,eAAe,KAAK,CACrB;CAED,MAAMC,oBAAuC,aAC1C,kBAAgB;EACf,MAAM,EAAE,gBAAgB;EACxB,MAAM,MAAM,aAAa;EAEzB,MAAM,UAAU,4BACZ,qBAAqB,YAAY,GACjC;AAEJ,MAAI,IAAK,KAAI,gBAAgB,QAAQ,QAAQC;AAE7C,aAAW;AAEX,iBAAeA,cAAY;AAE3B,iBAAe,IAAIA,cAAY;IAEjC;EAAC;EAA2B;EAAa;EAAe,CACzD;AAED,iBAAgB;AAGd,oBAFoB,eAAe,KAAK,CAEV;IAC7B,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,qBAACC;EAAqB,OAAO;GAAE;GAAmB;GAAa,GAAG;GAAO;aACvE,oBAAC,iBAAe,EAEf;GACoB;;AAI3B,MAAaC,qBAAyB;CACpC,MAAM,SAAS,WAAW;CAC1B,MAAM,EAAE,UAAU,UAAsB;CACxC,MAAM,EAAE,QAAQ,SAAS,OAAO;CAEhC,MAAM,aAAa,cAAc;EAC/B,MAAM,QAAQ,MAAM,QAAQ;AAE5B,MAAI,CAAC,0CAAuB,MAAM,CAAE,QAAO;AAE3C,SAAO,IAAI,QAAQ,MAAM,CAAC,MAAM;IAC/B,CAAC,QAAQ,MAAM,CAAC;CAEnB,MAAM,cAAc,cAAc;EAChC,MAAM,QAAQ,MAAM,QAAQ;AAE5B,MAAI,CAAC,0CAAuB,MAAM,CAAE,QAAO;AAE3C,SAAO,IAAI,QAAQ,MAAM,CAAC,MAAM;IAC/B,CAAC,QAAQ,MAAM,CAAC;AAMnB,QACE,oBAAC,UACC,QAAQ;EACN;EACA,KAAK,UARK,cAAc;AAC5B,UAAO,EAAE,6BAA6B,OAAO,SAAS;KACrD,CAAC,OAAO,CAAC,CAMiB;EACvB,KAAK,SAAS,WAAW;EACzB,KAAK,UAAU,YAAY;EAC5B,GACD;;;;;;;AASN,MAAa,iBAA+C;CAC1D,MAAM,gBAAgB,IAAI,aAAa;CAEvC,MAAM,QAAQ,cAAc;EAC1B,MAAM,EAAE,gBAAgB;AAExB,qCAAgB,YAAY,IAAI,gBAAgB,OAAQ,QAAO;EAE/D,MAAM,cACJ,kBAAkB,6CAA0B,cAAc,aAAa,GACnE,cAAc,aAAa,eAC3B;AAEN,MAAI,CAAC,YAAa,QAAO;AAEzB,kCAA6B,eAAe,YAAY;IACvD,CAAC,cAAc,CAAC;AAanB,QAXc,cAAc;EAC1B,MAAM,EAAE,mBAAmB,gBAAgB;AAE3C,SAAO;GACL;GACA;GACA;GACA;GACD;IACA,CAAC,OAAO,cAAc,CAAC"}
+{"version":3,"file":"theme-provider.js","names":["css","ThemeProvider: FC<ThemeProviderProps>","changeThemeScheme: ChangeThemeScheme","themeScheme","EmotionThemeProvider","GlobalStyles: FC"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  ThemeProvider as EmotionThemeProvider,\n  Global,\n  ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport { isEmptyObject, isObject, isUndefined, merge } from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\n\nexport const getPreventTransition = (environment: Environment) => {\n  const { getDocument, getWindow } = environment\n  const win = getWindow()\n  const doc = getDocument()\n\n  if (!win || !doc) return\n\n  const css = doc.createElement(\"style\")\n\n  const node = doc.createTextNode(\n    `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  doc.head.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(doc.body)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        doc.head.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends\n    PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n  theme = {},\n}) => {\n  const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n    config ?? {}\n  const storageManager = useMemo(\n    () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n    [cookie, defaultThemeScheme, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    storageManager.get(),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const { getDocument } = environment\n      const doc = getDocument()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (doc) doc.documentElement.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      storageManager.set(themeScheme)\n    },\n    [disableTransitionOnChange, environment, storageManager],\n  )\n\n  useEffect(() => {\n    const themeScheme = storageManager.get()\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, storageManager])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const cssVars = useMemo(() => {\n    return { \":host, :root, [data-mode]\": system.cssVars }\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", cssVars),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,wBAAwB,gBAA6B;CAChE,MAAM,EAAE,aAAa,cAAc;CACnC,MAAM,MAAM,WAAW;CACvB,MAAM,MAAM,aAAa;AAEzB,KAAI,CAAC,OAAO,CAAC,IAAK;CAElB,MAAMA,QAAM,IAAI,cAAc,QAAQ;CAEtC,MAAM,OAAO,IAAI,eACf,2JACD;AAED,OAAI,YAAY,KAAK;AAErB,KAAI,KAAK,YAAYA,MAAI;AAEzB,cAAa;EACX,MAAM,oBAAoB,IAAI,iBAAiB,IAAI,KAAK;AAExD,eAAa;AAEb,8BAA4B;AAC1B,+BAA4B;AAC1B,QAAI,KAAK,YAAYA,MAAI;KACzB;IACF;;;AAmCN,MAAaC,mBAAyC,EACpD,UACA,QACA,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAa,0BACb,QAAQ,EAAE,OACN;CACJ,MAAM,EAAE,qBAAqB,QAAQ,8BACnC,UAAU,EAAE;CACd,MAAM,iBAAiB,cACf,qBAAqB,SAAS,YAAY,oBAAoB,OAAO,EAC3E;EAAC;EAAQ;EAAoB;EAAS;EAAW,CAClD;CACD,MAAM,cAAc,gBAAgB;CACpC,MAAM,CAAC,aAAa,kBAAkB,SACpC,eAAe,KAAK,CACrB;CAED,MAAMC,oBAAuC,aAC1C,kBAAgB;EACf,MAAM,EAAE,gBAAgB;EACxB,MAAM,MAAM,aAAa;EAEzB,MAAM,UAAU,4BACZ,qBAAqB,YAAY,GACjC;AAEJ,MAAI,IAAK,KAAI,gBAAgB,QAAQ,QAAQC;AAE7C,aAAW;AAEX,iBAAeA,cAAY;AAE3B,iBAAe,IAAIA,cAAY;IAEjC;EAAC;EAA2B;EAAa;EAAe,CACzD;AAED,iBAAgB;AAGd,oBAFoB,eAAe,KAAK,CAEV;IAC7B,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,qBAACC;EAAqB,OAAO;GAAE;GAAmB;GAAa,GAAG;GAAO;aACvE,oBAAC,iBAAe,EAEf;GACoB;;AAI3B,MAAaC,qBAAyB;CACpC,MAAM,SAAS,WAAW;CAC1B,MAAM,EAAE,UAAU,UAAsB;CACxC,MAAM,EAAE,QAAQ,SAAS,OAAO;CAEhC,MAAM,aAAa,cAAc;EAC/B,MAAM,QAAQ,MAAM,QAAQ;AAE5B,MAAI,CAAC,0CAAuB,MAAM,CAAE,QAAO;AAE3C,SAAO,IAAI,QAAQ,MAAM,CAAC,MAAM;IAC/B,CAAC,QAAQ,MAAM,CAAC;CAEnB,MAAM,cAAc,cAAc;EAChC,MAAM,QAAQ,MAAM,QAAQ;AAE5B,MAAI,CAAC,0CAAuB,MAAM,CAAE,QAAO;AAE3C,SAAO,IAAI,QAAQ,MAAM,CAAC,MAAM;IAC/B,CAAC,QAAQ,MAAM,CAAC;AAMnB,QACE,oBAAC,UACC,QAAQ;EACN;EACA,KAAK,UARK,cAAc;AAC5B,UAAO,EAAE,6BAA6B,OAAO,SAAS;KACrD,CAAC,OAAO,CAAC,CAMiB;EACvB,KAAK,SAAS,WAAW;EACzB,KAAK,UAAU,YAAY;EAC5B,GACD;;;;;;;AASN,MAAa,iBAA+C;CAC1D,MAAM,gBAAgB,IAAI,aAAa;CAEvC,MAAM,QAAQ,cAAc;EAC1B,MAAM,EAAE,gBAAgB;AAExB,qCAAgB,YAAY,IAAI,gBAAgB,OAAQ,QAAO;EAE/D,MAAM,cACJ,kBAAkB,6CAA0B,cAAc,aAAa,GACnE,cAAc,aAAa,eAC3B;AAEN,MAAI,CAAC,YAAa,QAAO;AAEzB,kCAA6B,eAAe,YAAY;IACvD,CAAC,cAAc,CAAC;AAanB,QAXc,cAAc;EAC1B,MAAM,EAAE,mBAAmB,gBAAgB;AAE3C,SAAO;GACL;GACA;GACA;GACA;GACD;IACA,CAAC,OAAO,cAAc,CAAC"}

package/dist/esm/providers/ui-provider/ui-provider.js

@@ -18,37 +18,40 @@ import { jsx } from "react/jsx-runtime";
 /**
 * The global provider that must be added to make all Yamada UI components work correctly.
 */
-const UIProvider = ({ children, colorMode, colorModeStorageKey, config: config$1 = config, cookie, dir, intl, locale, storage, theme: theme$1 = theme, themeSchemeStorageKey }) => {
-	return /* @__PURE__ */ jsx(EnvironmentProvider, { children: /* @__PURE__ */ jsx(I18nProvider, {
-		dir,
-		intl,
-		locale,
-		children: /* @__PURE__ */ jsx(SystemProvider, {
-			config: config$1,
-			theme: theme$1,
-			children: /* @__PURE__ */ jsx(ThemeProvider, {
+const UIProvider = ({ children, colorMode, colorModeStorageKey, config: config$1 = config, cookie, dir, intl, locale, rootNode, storage, theme: theme$1 = theme, themeSchemeStorageKey }) => {
+	return /* @__PURE__ */ jsx(EnvironmentProvider, {
+		value: rootNode,
+		children: /* @__PURE__ */ jsx(I18nProvider, {
+			dir,
+			intl,
+			locale,
+			children: /* @__PURE__ */ jsx(SystemProvider, {
 				config: config$1,
-				cookie,
-				storage,
-				storageKey: themeSchemeStorageKey,
 				theme: theme$1,
-				children: /* @__PURE__ */ jsx(ColorModeProvider, {
-					colorMode,
+				children: /* @__PURE__ */ jsx(ThemeProvider, {
 					config: config$1,
 					cookie,
 					storage,
-					storageKey: colorModeStorageKey,
-					children: /* @__PURE__ */ jsx(LoadingProvider, {
-						...config$1.loading,
-						children: /* @__PURE__ */ jsx(NoticeProvider, {
-							...config$1.notice,
-							children
+					storageKey: themeSchemeStorageKey,
+					theme: theme$1,
+					children: /* @__PURE__ */ jsx(ColorModeProvider, {
+						colorMode,
+						config: config$1,
+						cookie,
+						storage,
+						storageKey: colorModeStorageKey,
+						children: /* @__PURE__ */ jsx(LoadingProvider, {
+							...config$1.loading,
+							children: /* @__PURE__ */ jsx(NoticeProvider, {
+								...config$1.notice,
+								children
+							})
 						})
 					})
 				})
 			})
 		})
-	}) });
+	});
 };
 const extendTheme = (theme$1) => {
 	return (0, utils_exports.merge)(theme, theme$1);

package/dist/esm/providers/ui-provider/ui-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-provider.js","names":["UIProvider: FC<UIProviderProps>","defaultConfig","defaultTheme","config","theme"],"sources":["../../../../src/providers/ui-provider/ui-provider.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type {\n  ColorModeProviderProps,\n  ThemeConfig,\n  ThemeProviderProps,\n  UsageTheme,\n} from \"../../core\"\nimport type { DeepMerge } from \"../../utils\"\nimport type { I18nProviderProps } from \"../i18n-provider\"\nimport { LoadingProvider } from \"../../components/loading\"\nimport { NoticeProvider } from \"../../components/notice\"\nimport {\n  ColorModeProvider,\n  EnvironmentProvider,\n  SystemProvider,\n  ThemeProvider,\n} from \"../../core\"\nimport { config as defaultConfig, theme as defaultTheme } from \"../../theme\"\nimport { merge } from \"../../utils\"\nimport { I18nProvider } from \"../i18n-provider\"\n\nexport interface UIProviderProps\n  extends\n    Omit<ThemeProviderProps, \"storageKey\">,\n    Pick<ColorModeProviderProps, \"colorMode\">,\n    I18nProviderProps {\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  colorModeStorageKey?: string\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  themeSchemeStorageKey?: string\n}\n\n/**\n * The global provider that must be added to make all Yamada UI components work correctly.\n */\nexport const UIProvider: FC<UIProviderProps> = ({\n  children,\n  colorMode,\n  colorModeStorageKey,\n  config = defaultConfig,\n  cookie,\n  dir,\n  intl,\n  locale,\n  storage,\n  theme = defaultTheme,\n  themeSchemeStorageKey,\n}) => {\n  return (\n    <EnvironmentProvider>\n      <I18nProvider dir={dir} intl={intl} locale={locale}>\n        <SystemProvider config={config} theme={theme}>\n          <ThemeProvider\n            config={config}\n            cookie={cookie}\n            storage={storage}\n            storageKey={themeSchemeStorageKey}\n            theme={theme}\n          >\n            <ColorModeProvider\n              colorMode={colorMode}\n              config={config}\n              cookie={cookie}\n              storage={storage}\n              storageKey={colorModeStorageKey}\n            >\n              <LoadingProvider {...config.loading}>\n                <NoticeProvider {...config.notice}>{children}</NoticeProvider>\n              </LoadingProvider>\n            </ColorModeProvider>\n          </ThemeProvider>\n        </SystemProvider>\n      </I18nProvider>\n    </EnvironmentProvider>\n  )\n}\n\ntype DefaultTheme = typeof defaultTheme\n\nexport const extendTheme = <Y extends UsageTheme>(theme: Y) => {\n  return merge<DeepMerge<DefaultTheme, Y>>(defaultTheme, theme)\n}\n\nexport const extendConfig = (config: ThemeConfig) => {\n  return merge(defaultConfig, config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,MAAaA,cAAmC,EAC9C,UACA,WACA,qBACA,mBAASC,QACT,QACA,KACA,MACA,QACA,SACA,iBAAQC,OACR,4BACI;AACJ,QACE,oBAAC,iCACC,oBAAC;EAAkB;EAAW;EAAc;YAC1C,oBAAC;GAAe,QAAQC;GAAQ,OAAOC;aACrC,oBAAC;IACC,QAAQD;IACA;IACC;IACT,YAAY;IACZ,OAAOC;cAEP,oBAAC;KACY;KACX,QAAQD;KACA;KACC;KACT,YAAY;eAEZ,oBAAC;MAAgB,GAAIA,SAAO;gBAC1B,oBAAC;OAAe,GAAIA,SAAO;OAAS;QAA0B;OAC9C;MACA;KACN;IACD;GACJ,GACK;;AAM1B,MAAa,eAAqC,YAAa;AAC7D,iCAAyCD,OAAcE,QAAM;;AAG/D,MAAa,gBAAgB,aAAwB;AACnD,iCAAaH,QAAeE,SAAO"}
+{"version":3,"file":"ui-provider.js","names":["UIProvider: FC<UIProviderProps>","defaultConfig","defaultTheme","config","theme"],"sources":["../../../../src/providers/ui-provider/ui-provider.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type {\n  ColorModeProviderProps,\n  EnvironmentProviderProps,\n  ThemeConfig,\n  ThemeProviderProps,\n  UsageTheme,\n} from \"../../core\"\nimport type { DeepMerge } from \"../../utils\"\nimport type { I18nProviderProps } from \"../i18n-provider\"\nimport { LoadingProvider } from \"../../components/loading\"\nimport { NoticeProvider } from \"../../components/notice\"\nimport {\n  ColorModeProvider,\n  EnvironmentProvider,\n  SystemProvider,\n  ThemeProvider,\n} from \"../../core\"\nimport { config as defaultConfig, theme as defaultTheme } from \"../../theme\"\nimport { merge } from \"../../utils\"\nimport { I18nProvider } from \"../i18n-provider\"\n\nexport interface UIProviderProps\n  extends\n    Omit<ThemeProviderProps, \"storageKey\">,\n    Pick<ColorModeProviderProps, \"colorMode\">,\n    I18nProviderProps {\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  colorModeStorageKey?: string\n  /**\n   * The root node to use.\n   */\n  rootNode?: EnvironmentProviderProps[\"value\"]\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  themeSchemeStorageKey?: string\n}\n\n/**\n * The global provider that must be added to make all Yamada UI components work correctly.\n */\nexport const UIProvider: FC<UIProviderProps> = ({\n  children,\n  colorMode,\n  colorModeStorageKey,\n  config = defaultConfig,\n  cookie,\n  dir,\n  intl,\n  locale,\n  rootNode,\n  storage,\n  theme = defaultTheme,\n  themeSchemeStorageKey,\n}) => {\n  return (\n    <EnvironmentProvider value={rootNode}>\n      <I18nProvider dir={dir} intl={intl} locale={locale}>\n        <SystemProvider config={config} theme={theme}>\n          <ThemeProvider\n            config={config}\n            cookie={cookie}\n            storage={storage}\n            storageKey={themeSchemeStorageKey}\n            theme={theme}\n          >\n            <ColorModeProvider\n              colorMode={colorMode}\n              config={config}\n              cookie={cookie}\n              storage={storage}\n              storageKey={colorModeStorageKey}\n            >\n              <LoadingProvider {...config.loading}>\n                <NoticeProvider {...config.notice}>{children}</NoticeProvider>\n              </LoadingProvider>\n            </ColorModeProvider>\n          </ThemeProvider>\n        </SystemProvider>\n      </I18nProvider>\n    </EnvironmentProvider>\n  )\n}\n\ntype DefaultTheme = typeof defaultTheme\n\nexport const extendTheme = <Y extends UsageTheme>(theme: Y) => {\n  return merge<DeepMerge<DefaultTheme, Y>>(defaultTheme, theme)\n}\n\nexport const extendConfig = (config: ThemeConfig) => {\n  return merge(defaultConfig, config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8CA,MAAaA,cAAmC,EAC9C,UACA,WACA,qBACA,mBAASC,QACT,QACA,KACA,MACA,QACA,UACA,SACA,iBAAQC,OACR,4BACI;AACJ,QACE,oBAAC;EAAoB,OAAO;YAC1B,oBAAC;GAAkB;GAAW;GAAc;aAC1C,oBAAC;IAAe,QAAQC;IAAQ,OAAOC;cACrC,oBAAC;KACC,QAAQD;KACA;KACC;KACT,YAAY;KACZ,OAAOC;eAEP,oBAAC;MACY;MACX,QAAQD;MACA;MACC;MACT,YAAY;gBAEZ,oBAAC;OAAgB,GAAIA,SAAO;iBAC1B,oBAAC;QAAe,GAAIA,SAAO;QAAS;SAA0B;QAC9C;OACA;MACN;KACD;IACJ;GACK;;AAM1B,MAAa,eAAqC,YAAa;AAC7D,iCAAyCD,OAAcE,QAAM;;AAG/D,MAAa,gBAAgB,aAAwB;AACnD,iCAAaH,QAAeE,SAAO"}

package/dist/types/components/accordion/accordion.d.ts

@@ -9,7 +9,7 @@ import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react212 from "react";
+import * as react65 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react212.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react65.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/accordion.style.d.ts

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/accordion/use-accordion.d.ts

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react213 from "react";
+import * as react66 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react213.Context<{
+declare const AccordionDescendantsContext: react66.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react213.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react213.RefCallback<HTMLButtonElement>;
+    } | undefined) => react66.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react213.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react213.RefCallback<HTMLButtonElement>;
+      } | undefined) => react66.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react213.RefCallback<HTMLButtonElement>;
+    register: react66.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react213.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react213.RefCallback<HTMLButtonElement>;
+    } | undefined) => react66.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react213.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react66.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react213.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react66.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react213.RefCallback<HTMLButtonElement>;
+    } | undefined) => react66.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react213.Dispatch<react213.SetStateAction<number>>;
-  setIndex: react213.Dispatch<react213.SetStateAction<number | number[]>>;
+  setFocusedIndex: react66.Dispatch<react66.SetStateAction<number>>;
+  setIndex: react66.Dispatch<react66.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/action-bar/action-bar.d.ts

@@ -7,7 +7,7 @@ import { UsePopupAnimationProps } from "../popover/popover.js";
 import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react1239 from "react";
+import * as react147 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/action-bar/action-bar.d.ts
@@ -29,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react1239.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react147.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

package/dist/types/components/airy/airy.d.ts

@@ -5,7 +5,7 @@ import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react1202 from "react";
+import * as react30 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/airy/airy.d.ts
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react1202.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react30.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

package/dist/types/components/alert/alert.d.ts

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react1205 from "react";
+import * as react146 from "react";
 
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react1205.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react146.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alert/alert.style.d.ts

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 
 //#region src/components/alert/alert.style.d.ts
-declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
+declare const alertStyle: ComponentSlotStyle<"loading" | "title" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"loading" | "title" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"loading" | "title" | "icon" | "root" | "description">>, {
   island: {
     description: {
       color: "fg.muted";

package/dist/types/components/alpha-slider/alpha-slider.d.ts

@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../hue-slider/index.js";
 import "../../index.js";
-import * as react1203 from "react";
+import * as react78 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react1203.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react78.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react1204 from "react";
+import * as react29 from "react";
 
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react1204.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react29.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

package/dist/types/components/autocomplete/autocomplete.d.ts

@@ -12,7 +12,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react1201 from "react";
+import * as react64 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -68,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react1201.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react64.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

package/dist/types/components/autocomplete/autocomplete.style.d.ts

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "indicator" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "indicator" | "empty" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts

@@ -8,7 +8,7 @@ import "../field/index.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react1195 from "react";
+import * as react58 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react1195.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react58.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -156,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react1195.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react58.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react1195.Dispatch<react1195.SetStateAction<string>>;
-  setValue: react1195.Dispatch<react1195.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react58.Dispatch<react58.SetStateAction<string>>;
+  setValue: react58.Dispatch<react58.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

package/dist/types/components/avatar/avatar.d.ts

@@ -6,9 +6,9 @@ import "../../core/index.js";
 import { AvatarStyle } from "./avatar.style.js";
 import { UseAvatarProps } from "./use-avatar.js";
 import "../../index.js";
-import * as react1189 from "react";
+import * as react141 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils18 from "@yamada-ui/utils";
+import * as _yamada_ui_utils9 from "@yamada-ui/utils";
 
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils18.Dict = _yamada_ui_utils18.Dict<any>>(el: H | react1189.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends As | "fragment" = "div", R extends _yamada_ui_utils9.Dict = _yamada_ui_utils9.Dict<any>>(el: H | react141.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1189.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1189.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils18.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react141.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react141.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils9.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils18.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils9.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {