@yamada-ui/react 2.2.1-dev-20260508120223 → 2.2.1-dev-20260509050741

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

@@ -1 +1 @@
-{"version":3,"file":"environment-provider.js","names":["defaultEnvironment: Environment","EnvironmentProvider: FC<EnvironmentProviderProps>"],"sources":["../../../../src/core/system/environment-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport { createContext, use, useCallback, useMemo, useRef } from \"react\"\nimport { createdDom, getDocument, getWindow, runIfFn } from \"../../utils\"\n\nexport type RootNode = Document | Node | ShadowRoot\n\nexport interface Environment {\n  getDocument: () => Document | undefined\n  getRootNode: () => RootNode | undefined\n  getWindow: () => undefined | Window\n}\n\nexport const defaultEnvironment: Environment = {\n  getDocument: () => document,\n  getRootNode: () => document,\n  getWindow: () => window,\n}\n\nconst EnvironmentContext = createContext<Environment>(defaultEnvironment)\n\nexport interface EnvironmentProviderProps extends PropsWithChildren {\n  value?: (() => RootNode) | RootNode\n}\n\nexport const EnvironmentProvider: FC<EnvironmentProviderProps> = ({\n  children,\n  value,\n}) => {\n  const ref = useRef<HTMLSpanElement>(null)\n\n  const getRootNode = useCallback(() => {\n    return runIfFn(value) ?? ref.current?.getRootNode() ?? document\n  }, [value, ref])\n\n  const context = useMemo<Environment>(() => {\n    if (createdDom()) {\n      return {\n        getDocument: () => getDocument(getRootNode()),\n        getRootNode,\n        getWindow: () => getWindow(getRootNode()),\n      }\n    } else {\n      return {\n        getDocument: () => undefined,\n        getRootNode: () => undefined,\n        getWindow: () => undefined,\n      }\n    }\n  }, [getRootNode])\n\n  return (\n    <EnvironmentContext value={context}>\n      {children}\n\n      {!value ? <span ref={ref} hidden /> : null}\n    </EnvironmentContext>\n  )\n}\n\nexport const useEnvironment = () => {\n  return use(EnvironmentContext)\n}\n"],"mappings":";;;;;;;AAcA,MAAaA,qBAAkC;CAC7C,mBAAmB;CACnB,mBAAmB;CACnB,iBAAiB;CAClB;AAED,MAAM,qBAAqB,cAA2B,mBAAmB;AAMzE,MAAaC,uBAAqD,EAChE,UACA,YACI;CACJ,MAAM,MAAM,OAAwB,KAAK;CAEzC,MAAM,cAAc,kBAAkB;AACpC,oCAAe,MAAM,IAAI,IAAI,SAAS,aAAa,IAAI;IACtD,CAAC,OAAO,IAAI,CAAC;AAkBhB,QACE,qBAAC;EAAmB,OAjBN,cAA2B;AACzC,sCAAgB,CACd,QAAO;IACL,kDAA+B,aAAa,CAAC;IAC7C;IACA,8CAA2B,aAAa,CAAC;IAC1C;OAED,QAAO;IACL,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IAClB;KAEF,CAAC,YAAY,CAAC;aAIZ,UAEA,CAAC,QAAQ,oBAAC;GAAU;GAAK;IAAS,GAAG;GACnB;;AAIzB,MAAa,uBAAuB;AAClC,QAAO,IAAI,mBAAmB"}
+{"version":3,"file":"environment-provider.js","names":[],"sources":["../../../../src/core/system/environment-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport { createContext, use, useCallback, useMemo, useRef } from \"react\"\nimport { createdDom, getDocument, getWindow, runIfFn } from \"../../utils\"\n\nexport type RootNode = Document | Node | ShadowRoot\n\nexport interface Environment {\n  getDocument: () => Document | undefined\n  getRootNode: () => RootNode | undefined\n  getWindow: () => undefined | Window\n}\n\nexport const defaultEnvironment: Environment = {\n  getDocument: () => document,\n  getRootNode: () => document,\n  getWindow: () => window,\n}\n\nconst EnvironmentContext = createContext<Environment>(defaultEnvironment)\n\nexport interface EnvironmentProviderProps extends PropsWithChildren {\n  value?: (() => RootNode) | RootNode\n}\n\nexport const EnvironmentProvider: FC<EnvironmentProviderProps> = ({\n  children,\n  value,\n}) => {\n  const ref = useRef<HTMLSpanElement>(null)\n\n  const getRootNode = useCallback(() => {\n    return runIfFn(value) ?? ref.current?.getRootNode() ?? document\n  }, [value, ref])\n\n  const context = useMemo<Environment>(() => {\n    if (createdDom()) {\n      return {\n        getDocument: () => getDocument(getRootNode()),\n        getRootNode,\n        getWindow: () => getWindow(getRootNode()),\n      }\n    } else {\n      return {\n        getDocument: () => undefined,\n        getRootNode: () => undefined,\n        getWindow: () => undefined,\n      }\n    }\n  }, [getRootNode])\n\n  return (\n    <EnvironmentContext value={context}>\n      {children}\n\n      {!value ? <span ref={ref} hidden /> : null}\n    </EnvironmentContext>\n  )\n}\n\nexport const useEnvironment = () => {\n  return use(EnvironmentContext)\n}\n"],"mappings":";;;;;AAcA,MAAa,qBAAkC;CAC7C,mBAAmB;CACnB,mBAAmB;CACnB,iBAAiB;CAClB;AAED,MAAM,qBAAqB,cAA2B,mBAAmB;AAMzE,MAAa,uBAAqD,EAChE,UACA,YACI;CACJ,MAAM,MAAM,OAAwB,KAAK;CAEzC,MAAM,cAAc,kBAAkB;EACpC,QAAA,GAAA,cAAA,SAAe,MAAM,IAAI,IAAI,SAAS,aAAa,IAAI;IACtD,CAAC,OAAO,IAAI,CAAC;CAkBhB,OACE,qBAAC,oBAAD;EAAoB,OAjBN,cAA2B;GACzC,KAAA,GAAA,cAAA,aAAgB,EACd,OAAO;IACL,oBAAA,GAAA,cAAA,aAA+B,aAAa,CAAC;IAC7C;IACA,kBAAA,GAAA,cAAA,WAA2B,aAAa,CAAC;IAC1C;QAED,OAAO;IACL,mBAAmB,KAAA;IACnB,mBAAmB,KAAA;IACnB,iBAAiB,KAAA;IAClB;KAEF,CAAC,YAAY,CAGoB;YAAlC,CACG,UAEA,CAAC,QAAQ,oBAAC,QAAD;GAAW;GAAK,QAAA;GAAS,CAAA,GAAG,KACnB;;;AAIzB,MAAa,uBAAuB;CAClC,OAAO,IAAI,mBAAmB"}

package/dist/esm/core/system/factory.js

@@ -1,5 +1,4 @@
 import { createStyled } from "./styled.js";
-
 //#region src/core/system/factory.ts
 function factory() {
 	const cache = /* @__PURE__ */ new Map();
@@ -21,7 +20,7 @@ function factory() {
 * @see https://yamada-ui.com/docs/components/styled
 */
 const styled = factory();
-
 //#endregion
 export { styled };
+
 //# sourceMappingURL=factory.js.map

package/dist/esm/core/system/factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"factory.js","names":["target: ProxyTarget"],"sources":["../../../../src/core/system/factory.ts"],"sourcesContent":["import type { FC } from \"react\"\nimport type { As, DOMElement, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type { ComponentStyle, ThemeProps } from \"./index.types\"\nimport type { StyledOptions } from \"./styled\"\nimport { createStyled } from \"./styled\"\n\ntype ProxyTarget = (el: DOMElement, options?: StyledOptions) => unknown\n\ntype Components = {\n  [Y in DOMElement]: StyledComponent<Y>\n}\n\ninterface Factory extends Components {\n  <\n    Y extends As,\n    M extends object = {},\n    D extends CSSPropObject = CSSPropObject,\n    H extends CSSModifierObject = CSSModifierObject,\n    R extends CSSModifierObject = CSSModifierObject,\n  >(\n    el: FC<M> | Y,\n    options?: StyledOptions<D, H, R, keyof M>,\n  ): StyledComponent<Y, M & ThemeProps<ComponentStyle<D, H, R>>>\n}\n\nfunction factory() {\n  const cache = new Map<DOMElement, FC>()\n  const target: ProxyTarget = (el, options) => createStyled(el, options)\n\n  return new Proxy(target, {\n    apply: function (\n      _target,\n      _thisArg,\n      [el, options]: [DOMElement, StyledOptions],\n    ) {\n      return createStyled(el, options)\n    },\n\n    get: function (_target, el: DOMElement): FC | undefined {\n      if (!cache.has(el)) cache.set(el, createStyled(el))\n\n      return cache.get(el)\n    },\n  }) as Factory\n}\n\n/**\n * `styled` is an object of JSX elements enabled with Yamada UI's style system,\n * and can also be used as a function for custom components to receive Yamada UI's style system.\n *\n * @see https://yamada-ui.com/docs/components/styled\n */\nexport const styled = factory()\n"],"mappings":";;;AA0BA,SAAS,UAAU;CACjB,MAAM,wBAAQ,IAAI,KAAqB;CACvC,MAAMA,UAAuB,IAAI,YAAY,aAAa,IAAI,QAAQ;AAEtE,QAAO,IAAI,MAAM,QAAQ;EACvB,OAAO,SACL,SACA,UACA,CAAC,IAAI,UACL;AACA,UAAO,aAAa,IAAI,QAAQ;;EAGlC,KAAK,SAAU,SAAS,IAAgC;AACtD,OAAI,CAAC,MAAM,IAAI,GAAG,CAAE,OAAM,IAAI,IAAI,aAAa,GAAG,CAAC;AAEnD,UAAO,MAAM,IAAI,GAAG;;EAEvB,CAAC;;;;;;;;AASJ,MAAa,SAAS,SAAS"}
+{"version":3,"file":"factory.js","names":[],"sources":["../../../../src/core/system/factory.ts"],"sourcesContent":["import type { FC } from \"react\"\nimport type { As, DOMElement, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type { ComponentStyle, ThemeProps } from \"./index.types\"\nimport type { StyledOptions } from \"./styled\"\nimport { createStyled } from \"./styled\"\n\ntype ProxyTarget = (el: DOMElement, options?: StyledOptions) => unknown\n\ntype Components = {\n  [Y in DOMElement]: StyledComponent<Y>\n}\n\ninterface Factory extends Components {\n  <\n    Y extends As,\n    M extends object = {},\n    D extends CSSPropObject = CSSPropObject,\n    H extends CSSModifierObject = CSSModifierObject,\n    R extends CSSModifierObject = CSSModifierObject,\n  >(\n    el: FC<M> | Y,\n    options?: StyledOptions<D, H, R, keyof M>,\n  ): StyledComponent<Y, M & ThemeProps<ComponentStyle<D, H, R>>>\n}\n\nfunction factory() {\n  const cache = new Map<DOMElement, FC>()\n  const target: ProxyTarget = (el, options) => createStyled(el, options)\n\n  return new Proxy(target, {\n    apply: function (\n      _target,\n      _thisArg,\n      [el, options]: [DOMElement, StyledOptions],\n    ) {\n      return createStyled(el, options)\n    },\n\n    get: function (_target, el: DOMElement): FC | undefined {\n      if (!cache.has(el)) cache.set(el, createStyled(el))\n\n      return cache.get(el)\n    },\n  }) as Factory\n}\n\n/**\n * `styled` is an object of JSX elements enabled with Yamada UI's style system,\n * and can also be used as a function for custom components to receive Yamada UI's style system.\n *\n * @see https://yamada-ui.com/docs/components/styled\n */\nexport const styled = factory()\n"],"mappings":";;AA0BA,SAAS,UAAU;CACjB,MAAM,wBAAQ,IAAI,KAAqB;CACvC,MAAM,UAAuB,IAAI,YAAY,aAAa,IAAI,QAAQ;CAEtE,OAAO,IAAI,MAAM,QAAQ;EACvB,OAAO,SACL,SACA,UACA,CAAC,IAAI,UACL;GACA,OAAO,aAAa,IAAI,QAAQ;;EAGlC,KAAK,SAAU,SAAS,IAAgC;GACtD,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE,MAAM,IAAI,IAAI,aAAa,GAAG,CAAC;GAEnD,OAAO,MAAM,IAAI,GAAG;;EAEvB,CAAC;;;;;;;;AASJ,MAAa,SAAS,SAAS"}

package/dist/esm/core/system/index.js

@@ -13,5 +13,4 @@ import { ColorSchemeContext, createStyled, useColorSchemeContext } from "./style
 import { styled } from "./factory.js";
 import { ColorModeScript, ThemeSchemeScript, getStorageScript } from "./storage-script.js";
 import { getColorModeValue, useColorModeValue } from "./use-color-mode-value.js";
-
-export { ColorModeContext, ColorModeProvider, ColorModeScript, ColorSchemeContext, EnvironmentProvider, GlobalStyles, SystemProvider, ThemeProvider, ThemeSchemeScript, createBreakpoints, createLayers, createStorageManager, createStyled, createSystem, createVars, defaultEnvironment, defaultLayers, defaultSystem, defineComponentSlotStyle, defineComponentStyle, defineConfig, defineSemanticTokens, defineStyles, defineTheme, defineThemeSchemes, defineTokens, getColorModeValue, getColorSchemeVar, getPreventTransition, getStorageScript, getVar, getVarName, injectVars, isColorScheme, mergeVars, styled, transformInterpolation, useColorMode, useColorModeValue, useColorSchemeContext, useEnvironment, useSystem, useSystemColorMode, useTheme, varAttr };
+export { ColorModeContext, ColorModeProvider, ColorModeScript, ColorSchemeContext, EnvironmentProvider, GlobalStyles, SystemProvider, ThemeProvider, ThemeSchemeScript, createBreakpoints, createLayers, createStorageManager, createStyled, createSystem, createVars, defaultEnvironment, defaultLayers, defaultSystem, defineComponentSlotStyle, defineComponentStyle, defineConfig, defineSemanticTokens, defineStyles, defineTheme, defineThemeSchemes, defineTokens, getColorModeValue, getColorSchemeVar, getPreventTransition, getStorageScript, getVar, getVarName, injectVars, isColorScheme, mergeVars, styled, transformInterpolation, useColorMode, useColorModeValue, useColorSchemeContext, useEnvironment, useSystem, useSystemColorMode, useTheme, varAttr };

package/dist/esm/core/system/layer.js

@@ -1,6 +1,5 @@
 import { utils_exports } from "../../utils/index.js";
 import { DEFAULT_LAYERS } from "../constant.js";
-
 //#region src/core/system/layer.ts
 const defaultLayers = {
 	atRule: void 0,
@@ -24,7 +23,7 @@ function createLayers(layers = DEFAULT_LAYERS) {
 		wrap
 	};
 }
-
 //#endregion
 export { createLayers, defaultLayers };
+
 //# sourceMappingURL=layer.js.map

package/dist/esm/core/system/layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"layer.js","names":["defaultLayers: Layers"],"sources":["../../../../src/core/system/layer.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { LayerScheme, LayersConfig } from \"./index.types\"\nimport { runIfFn } from \"../../utils\"\nimport { DEFAULT_LAYERS } from \"../constant\"\n\nexport interface Layers {\n  atRule: string | undefined\n  names: string[]\n  wrap: (name: LayerScheme, style?: (() => Dict) | Dict) => Dict\n  getAtRule?: (name: LayerScheme) => string\n}\n\nexport const defaultLayers: Layers = {\n  atRule: undefined,\n  names: [] as string[],\n  wrap: function (_: LayerScheme, style?: (() => Dict) | Dict) {\n    return runIfFn(style) ?? {}\n  },\n}\n\nexport function createLayers(\n  layers: false | LayersConfig = DEFAULT_LAYERS,\n): Layers {\n  if (!layers) return defaultLayers\n\n  const names = Object.values(layers)\n    .sort((a, b) => a.order - b.order)\n    .map((layer) => layer.name)\n  const atRule = `@layer ${names.join(\", \")};`\n\n  const getAtRule = (name: LayerScheme) => `@layer ${layers[name].name}`\n\n  const wrap = (name: LayerScheme, style?: (() => Dict) | Dict) => {\n    const atRule = getAtRule(name)\n\n    return { [atRule]: runIfFn(style) }\n  }\n\n  return {\n    atRule,\n    getAtRule,\n    names,\n    wrap,\n  }\n}\n"],"mappings":";;;;AAYA,MAAaA,gBAAwB;CACnC,QAAQ;CACR,OAAO,EAAE;CACT,MAAM,SAAU,GAAgB,OAA6B;AAC3D,oCAAe,MAAM,IAAI,EAAE;;CAE9B;AAED,SAAgB,aACd,SAA+B,gBACvB;AACR,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,QAAQ,OAAO,OAAO,OAAO,CAChC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,CACjC,KAAK,UAAU,MAAM,KAAK;CAC7B,MAAM,SAAS,UAAU,MAAM,KAAK,KAAK,CAAC;CAE1C,MAAM,aAAa,SAAsB,UAAU,OAAO,MAAM;CAEhE,MAAM,QAAQ,MAAmB,UAAgC;AAG/D,SAAO,GAFQ,UAAU,KAAK,8BAEH,MAAM,EAAE;;AAGrC,QAAO;EACL;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"layer.js","names":[],"sources":["../../../../src/core/system/layer.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { LayerScheme, LayersConfig } from \"./index.types\"\nimport { runIfFn } from \"../../utils\"\nimport { DEFAULT_LAYERS } from \"../constant\"\n\nexport interface Layers {\n  atRule: string | undefined\n  names: string[]\n  wrap: (name: LayerScheme, style?: (() => Dict) | Dict) => Dict\n  getAtRule?: (name: LayerScheme) => string\n}\n\nexport const defaultLayers: Layers = {\n  atRule: undefined,\n  names: [] as string[],\n  wrap: function (_: LayerScheme, style?: (() => Dict) | Dict) {\n    return runIfFn(style) ?? {}\n  },\n}\n\nexport function createLayers(\n  layers: false | LayersConfig = DEFAULT_LAYERS,\n): Layers {\n  if (!layers) return defaultLayers\n\n  const names = Object.values(layers)\n    .sort((a, b) => a.order - b.order)\n    .map((layer) => layer.name)\n  const atRule = `@layer ${names.join(\", \")};`\n\n  const getAtRule = (name: LayerScheme) => `@layer ${layers[name].name}`\n\n  const wrap = (name: LayerScheme, style?: (() => Dict) | Dict) => {\n    const atRule = getAtRule(name)\n\n    return { [atRule]: runIfFn(style) }\n  }\n\n  return {\n    atRule,\n    getAtRule,\n    names,\n    wrap,\n  }\n}\n"],"mappings":";;;AAYA,MAAa,gBAAwB;CACnC,QAAQ,KAAA;CACR,OAAO,EAAE;CACT,MAAM,SAAU,GAAgB,OAA6B;EAC3D,QAAA,GAAA,cAAA,SAAe,MAAM,IAAI,EAAE;;CAE9B;AAED,SAAgB,aACd,SAA+B,gBACvB;CACR,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,QAAQ,OAAO,OAAO,OAAO,CAChC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,CACjC,KAAK,UAAU,MAAM,KAAK;CAC7B,MAAM,SAAS,UAAU,MAAM,KAAK,KAAK,CAAC;CAE1C,MAAM,aAAa,SAAsB,UAAU,OAAO,MAAM;CAEhE,MAAM,QAAQ,MAAmB,UAAgC;EAG/D,OAAO,GAFQ,UAAU,KAET,IAAA,GAAA,cAAA,SAAW,MAAM,EAAE;;CAGrC,OAAO;EACL;EACA;EACA;EACA;EACD"}

package/dist/esm/core/system/storage-manager.js

@@ -1,9 +1,8 @@
 "use client";
-
 //#region src/core/system/storage-manager.ts
 const hasSupport = !!globalThis.document;
 function parseCookie(cookie, key) {
-	return cookie.match(/* @__PURE__ */ new RegExp(`(^| )${key}=([^;]+)`))?.[2];
+	return cookie.match(new RegExp(`(^| )${key}=([^;]+)`))?.[2];
 }
 function createStorageManager(storage, storageKey, defaultValue, cookie) {
 	return {
@@ -38,7 +37,7 @@ function createStorageManager(storage, storageKey, defaultValue, cookie) {
 		}
 	};
 }
-
 //#endregion
 export { createStorageManager };
+
 //# sourceMappingURL=storage-manager.js.map

package/dist/esm/core/system/storage-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"storage-manager.js","names":[],"sources":["../../../../src/core/system/storage-manager.ts"],"sourcesContent":["\"use client\"\n\nexport type Storage = \"cookie\" | \"localStorage\"\n\nconst hasSupport = !!(globalThis.document as Document | undefined)\n\nfunction parseCookie<Y extends string>(\n  cookie: string,\n  key: string,\n): undefined | Y {\n  const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`))\n\n  return match?.[2] as undefined | Y\n}\n\nexport interface StorageManager<Y extends string, M extends Y = Y> {\n  default(value: M): M\n  get(value?: Y): Y\n  set(value: Y): void\n}\n\nexport function createStorageManager<Y extends string, M extends Y = Y>(\n  storage: Storage,\n  storageKey: string,\n  defaultValue: Y,\n  cookie?: string,\n): StorageManager<Y, M> {\n  return {\n    default(value) {\n      const defaultStorageKey = `default-${storageKey}`\n\n      if (cookie) return parseCookie(cookie, defaultStorageKey) || value\n\n      if (storage === \"localStorage\") {\n        try {\n          return (localStorage.getItem(defaultStorageKey) as M | null) || value\n        } catch {\n          return value\n        }\n      } else {\n        if (!hasSupport) return value\n\n        return parseCookie(document.cookie, defaultStorageKey) || value\n      }\n    },\n    get(value = defaultValue) {\n      if (cookie) return parseCookie(cookie, storageKey) || value\n\n      if (storage === \"localStorage\") {\n        try {\n          return (localStorage.getItem(storageKey) as null | Y) || value\n        } catch {\n          return value\n        }\n      } else {\n        if (!hasSupport) return value\n\n        return parseCookie(document.cookie, storageKey) || value\n      }\n    },\n    set(value: Y) {\n      if (storage === \"localStorage\") {\n        localStorage.setItem(storageKey, value)\n      } else {\n        document.cookie = `${storageKey}=${value}; max-age=31536000; path=/`\n      }\n    },\n  }\n}\n"],"mappings":";;;AAIA,MAAM,aAAa,CAAC,CAAE,WAAW;AAEjC,SAAS,YACP,QACA,KACe;AAGf,QAFc,OAAO,sBAAM,IAAI,OAAO,QAAQ,IAAI,UAAU,CAAC,GAE9C;;AASjB,SAAgB,qBACd,SACA,YACA,cACA,QACsB;AACtB,QAAO;EACL,QAAQ,OAAO;GACb,MAAM,oBAAoB,WAAW;AAErC,OAAI,OAAQ,QAAO,YAAY,QAAQ,kBAAkB,IAAI;AAE7D,OAAI,YAAY,eACd,KAAI;AACF,WAAQ,aAAa,QAAQ,kBAAkB,IAAiB;WAC1D;AACN,WAAO;;QAEJ;AACL,QAAI,CAAC,WAAY,QAAO;AAExB,WAAO,YAAY,SAAS,QAAQ,kBAAkB,IAAI;;;EAG9D,IAAI,QAAQ,cAAc;AACxB,OAAI,OAAQ,QAAO,YAAY,QAAQ,WAAW,IAAI;AAEtD,OAAI,YAAY,eACd,KAAI;AACF,WAAQ,aAAa,QAAQ,WAAW,IAAiB;WACnD;AACN,WAAO;;QAEJ;AACL,QAAI,CAAC,WAAY,QAAO;AAExB,WAAO,YAAY,SAAS,QAAQ,WAAW,IAAI;;;EAGvD,IAAI,OAAU;AACZ,OAAI,YAAY,eACd,cAAa,QAAQ,YAAY,MAAM;OAEvC,UAAS,SAAS,GAAG,WAAW,GAAG,MAAM;;EAG9C"}
+{"version":3,"file":"storage-manager.js","names":[],"sources":["../../../../src/core/system/storage-manager.ts"],"sourcesContent":["\"use client\"\n\nexport type Storage = \"cookie\" | \"localStorage\"\n\nconst hasSupport = !!(globalThis.document as Document | undefined)\n\nfunction parseCookie<Y extends string>(\n  cookie: string,\n  key: string,\n): undefined | Y {\n  const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`))\n\n  return match?.[2] as undefined | Y\n}\n\nexport interface StorageManager<Y extends string, M extends Y = Y> {\n  default(value: M): M\n  get(value?: Y): Y\n  set(value: Y): void\n}\n\nexport function createStorageManager<Y extends string, M extends Y = Y>(\n  storage: Storage,\n  storageKey: string,\n  defaultValue: Y,\n  cookie?: string,\n): StorageManager<Y, M> {\n  return {\n    default(value) {\n      const defaultStorageKey = `default-${storageKey}`\n\n      if (cookie) return parseCookie(cookie, defaultStorageKey) || value\n\n      if (storage === \"localStorage\") {\n        try {\n          return (localStorage.getItem(defaultStorageKey) as M | null) || value\n        } catch {\n          return value\n        }\n      } else {\n        if (!hasSupport) return value\n\n        return parseCookie(document.cookie, defaultStorageKey) || value\n      }\n    },\n    get(value = defaultValue) {\n      if (cookie) return parseCookie(cookie, storageKey) || value\n\n      if (storage === \"localStorage\") {\n        try {\n          return (localStorage.getItem(storageKey) as null | Y) || value\n        } catch {\n          return value\n        }\n      } else {\n        if (!hasSupport) return value\n\n        return parseCookie(document.cookie, storageKey) || value\n      }\n    },\n    set(value: Y) {\n      if (storage === \"localStorage\") {\n        localStorage.setItem(storageKey, value)\n      } else {\n        document.cookie = `${storageKey}=${value}; max-age=31536000; path=/`\n      }\n    },\n  }\n}\n"],"mappings":";;AAIA,MAAM,aAAa,CAAC,CAAE,WAAW;AAEjC,SAAS,YACP,QACA,KACe;CAGf,OAFc,OAAO,MAAM,IAAI,OAAO,QAAQ,IAAI,UAAU,CAEhD,GAAG;;AASjB,SAAgB,qBACd,SACA,YACA,cACA,QACsB;CACtB,OAAO;EACL,QAAQ,OAAO;GACb,MAAM,oBAAoB,WAAW;GAErC,IAAI,QAAQ,OAAO,YAAY,QAAQ,kBAAkB,IAAI;GAE7D,IAAI,YAAY,gBACd,IAAI;IACF,OAAQ,aAAa,QAAQ,kBAAkB,IAAiB;WAC1D;IACN,OAAO;;QAEJ;IACL,IAAI,CAAC,YAAY,OAAO;IAExB,OAAO,YAAY,SAAS,QAAQ,kBAAkB,IAAI;;;EAG9D,IAAI,QAAQ,cAAc;GACxB,IAAI,QAAQ,OAAO,YAAY,QAAQ,WAAW,IAAI;GAEtD,IAAI,YAAY,gBACd,IAAI;IACF,OAAQ,aAAa,QAAQ,WAAW,IAAiB;WACnD;IACN,OAAO;;QAEJ;IACL,IAAI,CAAC,YAAY,OAAO;IAExB,OAAO,YAAY,SAAS,QAAQ,WAAW,IAAI;;;EAGvD,IAAI,OAAU;GACZ,IAAI,YAAY,gBACd,aAAa,QAAQ,YAAY,MAAM;QAEvC,SAAS,SAAS,GAAG,WAAW,GAAG,MAAM;;EAG9C"}

package/dist/esm/core/system/storage-script.js

@@ -1,9 +1,7 @@
 "use client";
-
 import { utils_exports } from "../../utils/index.js";
 import { COLOR_MODE_STORAGE_KEY, THEME_SCHEME_STORAGE_KEY } from "../constant.js";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/core/system/storage-script.tsx
 function getStorageScript(type, defaultKey) {
 	return function({ key = defaultKey, type: storage = "localStorage", defaultValue } = {}) {
@@ -35,7 +33,7 @@ function ThemeSchemeScript({ nonce, ...rest }) {
 		nonce
 	});
 }
-
 //#endregion
 export { ColorModeScript, ThemeSchemeScript, getStorageScript };
+
 //# sourceMappingURL=storage-script.js.map

package/dist/esm/core/system/storage-script.js.map

@@ -1 +1 @@
-{"version":3,"file":"storage-script.js","names":[],"sources":["../../../../src/core/system/storage-script.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ColorModeWithSystem, ThemeScheme } from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport { createdDom } from \"../../utils\"\nimport { COLOR_MODE_STORAGE_KEY, THEME_SCHEME_STORAGE_KEY } from \"../constant\"\n\nexport interface StorageScriptProps<Y extends string> {\n  defaultValue?: Y\n  key?: string\n  nonce?: string\n  type?: Storage\n}\n\nexport function getStorageScript<Y extends string>(\n  type: \"colorMode\" | \"themeScheme\",\n  defaultKey: string,\n) {\n  return function ({\n    key = defaultKey,\n    type: storage = \"localStorage\",\n    defaultValue,\n  }: Omit<StorageScriptProps<Y>, \"nonce\"> = {}) {\n    if (type === \"colorMode\") {\n      if (storage === \"localStorage\") {\n        return `!(function(){try{var a=function(c){var v=\"(prefers-color-scheme: dark)\",h=window.matchMedia(v).matches?\"dark\":\"light\",r=c===\"system\"?h:c,o=document.documentElement,s=document.body,l=\"light\",d=\"dark\",i=r===\"dark\";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.mode=r,r},m=\"${defaultValue}\",e=\"${key}\",t=localStorage.getItem(e);t?a(t):(localStorage.setItem(e,m),localStorage.setItem(\\`default-\\${e}\\`,a(m)))}catch{}})();`\n      } else {\n        return `!(function(){try{var a=function(o){var l=\"(prefers-color-scheme: dark)\",v=window.matchMedia(l).matches?\"dark\":\"light\",e=o===\"system\"?v:o,d=document.documentElement,m=document.body,i=\"light\",n=\"dark\",s=e===\"dark\";return m.classList.add(s?n:i),m.classList.remove(s?i:n),d.style.colorScheme=e,d.dataset.mode=e,e},h=\"${defaultValue}\",r=\"${key}\",t=document.cookie.match(new RegExp(\"(^| )\".concat(r,\"=([^;]+)\"))),c=t?t[2]:null;c?a(c):(document.cookie=\"\".concat(r,\"=\").concat(h,\"; max-age=31536000; path=/\"),document.cookie=\"\".concat(\\`default-\\${r}\\`,\"=\").concat(a(h),\"; max-age=31536000; path=/\"))}catch{}})();`\n      }\n    } else {\n      if (storage === \"localStorage\") {\n        return `!(function(){try{var a=function(c){var o=document.documentElement;return o.dataset.theme=c,c},m='${defaultValue}',e='${key}',t=localStorage.getItem(e);t?a(t):localStorage.setItem(e, a(m))}catch{}})();`\n      } else {\n        return `!(function(){try{var a=function(c){var o=document.documentElement;return o.dataset.theme=c,c},h='${defaultValue}',r='${key}',t=document.cookie.match(new RegExp('(^| )'.concat(r,'=([^;]+)'))),c=t?t[2]:null;c?a(c):(document.cookie=''.concat(r,'=').concat(a(h),'; max-age=31536000; path=/'))}catch{}})();`\n      }\n    }\n  }\n}\n\nexport function ColorModeScript({\n  nonce,\n  ...rest\n}: StorageScriptProps<ColorModeWithSystem>) {\n  const html = getStorageScript(\n    \"colorMode\",\n    COLOR_MODE_STORAGE_KEY,\n  )({ defaultValue: \"light\", ...rest })\n\n  if (createdDom()) return null\n\n  return <script dangerouslySetInnerHTML={{ __html: html }} nonce={nonce} />\n}\n\nexport function ThemeSchemeScript({\n  nonce,\n  ...rest\n}: StorageScriptProps<ThemeScheme>) {\n  const html = getStorageScript(\n    \"themeScheme\",\n    THEME_SCHEME_STORAGE_KEY,\n  )({\n    defaultValue: \"base\",\n    ...rest,\n  })\n\n  if (createdDom()) return null\n\n  return <script dangerouslySetInnerHTML={{ __html: html }} nonce={nonce} />\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,iBACd,MACA,YACA;AACA,QAAO,SAAU,EACf,MAAM,YACN,MAAM,UAAU,gBAChB,iBACwC,EAAE,EAAE;AAC5C,MAAI,SAAS,YACX,KAAI,YAAY,eACd,QAAO,4TAA4T,aAAa,OAAO,IAAI;MAE3V,QAAO,4TAA4T,aAAa,OAAO,IAAI;WAGzV,YAAY,eACd,QAAO,oGAAoG,aAAa,OAAO,IAAI;MAEnI,QAAO,oGAAoG,aAAa,OAAO,IAAI;;;AAM3I,SAAgB,gBAAgB,EAC9B,OACA,GAAG,QACuC;CAC1C,MAAM,OAAO,iBACX,aACA,uBACD,CAAC;EAAE,cAAc;EAAS,GAAG;EAAM,CAAC;AAErC,oCAAgB,CAAE,QAAO;AAEzB,QAAO,oBAAC;EAAO,yBAAyB,EAAE,QAAQ,MAAM;EAAS;GAAS;;AAG5E,SAAgB,kBAAkB,EAChC,OACA,GAAG,QAC+B;CAClC,MAAM,OAAO,iBACX,eACA,yBACD,CAAC;EACA,cAAc;EACd,GAAG;EACJ,CAAC;AAEF,oCAAgB,CAAE,QAAO;AAEzB,QAAO,oBAAC;EAAO,yBAAyB,EAAE,QAAQ,MAAM;EAAS;GAAS"}
+{"version":3,"file":"storage-script.js","names":[],"sources":["../../../../src/core/system/storage-script.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ColorModeWithSystem, ThemeScheme } from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport { createdDom } from \"../../utils\"\nimport { COLOR_MODE_STORAGE_KEY, THEME_SCHEME_STORAGE_KEY } from \"../constant\"\n\nexport interface StorageScriptProps<Y extends string> {\n  defaultValue?: Y\n  key?: string\n  nonce?: string\n  type?: Storage\n}\n\nexport function getStorageScript<Y extends string>(\n  type: \"colorMode\" | \"themeScheme\",\n  defaultKey: string,\n) {\n  return function ({\n    key = defaultKey,\n    type: storage = \"localStorage\",\n    defaultValue,\n  }: Omit<StorageScriptProps<Y>, \"nonce\"> = {}) {\n    if (type === \"colorMode\") {\n      if (storage === \"localStorage\") {\n        return `!(function(){try{var a=function(c){var v=\"(prefers-color-scheme: dark)\",h=window.matchMedia(v).matches?\"dark\":\"light\",r=c===\"system\"?h:c,o=document.documentElement,s=document.body,l=\"light\",d=\"dark\",i=r===\"dark\";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.mode=r,r},m=\"${defaultValue}\",e=\"${key}\",t=localStorage.getItem(e);t?a(t):(localStorage.setItem(e,m),localStorage.setItem(\\`default-\\${e}\\`,a(m)))}catch{}})();`\n      } else {\n        return `!(function(){try{var a=function(o){var l=\"(prefers-color-scheme: dark)\",v=window.matchMedia(l).matches?\"dark\":\"light\",e=o===\"system\"?v:o,d=document.documentElement,m=document.body,i=\"light\",n=\"dark\",s=e===\"dark\";return m.classList.add(s?n:i),m.classList.remove(s?i:n),d.style.colorScheme=e,d.dataset.mode=e,e},h=\"${defaultValue}\",r=\"${key}\",t=document.cookie.match(new RegExp(\"(^| )\".concat(r,\"=([^;]+)\"))),c=t?t[2]:null;c?a(c):(document.cookie=\"\".concat(r,\"=\").concat(h,\"; max-age=31536000; path=/\"),document.cookie=\"\".concat(\\`default-\\${r}\\`,\"=\").concat(a(h),\"; max-age=31536000; path=/\"))}catch{}})();`\n      }\n    } else {\n      if (storage === \"localStorage\") {\n        return `!(function(){try{var a=function(c){var o=document.documentElement;return o.dataset.theme=c,c},m='${defaultValue}',e='${key}',t=localStorage.getItem(e);t?a(t):localStorage.setItem(e, a(m))}catch{}})();`\n      } else {\n        return `!(function(){try{var a=function(c){var o=document.documentElement;return o.dataset.theme=c,c},h='${defaultValue}',r='${key}',t=document.cookie.match(new RegExp('(^| )'.concat(r,'=([^;]+)'))),c=t?t[2]:null;c?a(c):(document.cookie=''.concat(r,'=').concat(a(h),'; max-age=31536000; path=/'))}catch{}})();`\n      }\n    }\n  }\n}\n\nexport function ColorModeScript({\n  nonce,\n  ...rest\n}: StorageScriptProps<ColorModeWithSystem>) {\n  const html = getStorageScript(\n    \"colorMode\",\n    COLOR_MODE_STORAGE_KEY,\n  )({ defaultValue: \"light\", ...rest })\n\n  if (createdDom()) return null\n\n  return <script dangerouslySetInnerHTML={{ __html: html }} nonce={nonce} />\n}\n\nexport function ThemeSchemeScript({\n  nonce,\n  ...rest\n}: StorageScriptProps<ThemeScheme>) {\n  const html = getStorageScript(\n    \"themeScheme\",\n    THEME_SCHEME_STORAGE_KEY,\n  )({\n    defaultValue: \"base\",\n    ...rest,\n  })\n\n  if (createdDom()) return null\n\n  return <script dangerouslySetInnerHTML={{ __html: html }} nonce={nonce} />\n}\n"],"mappings":";;;;;AAcA,SAAgB,iBACd,MACA,YACA;CACA,OAAO,SAAU,EACf,MAAM,YACN,MAAM,UAAU,gBAChB,iBACwC,EAAE,EAAE;EAC5C,IAAI,SAAS,aACX,IAAI,YAAY,gBACd,OAAO,4TAA4T,aAAa,OAAO,IAAI;OAE3V,OAAO,4TAA4T,aAAa,OAAO,IAAI;OAG7V,IAAI,YAAY,gBACd,OAAO,oGAAoG,aAAa,OAAO,IAAI;OAEnI,OAAO,oGAAoG,aAAa,OAAO,IAAI;;;AAM3I,SAAgB,gBAAgB,EAC9B,OACA,GAAG,QACuC;CAC1C,MAAM,OAAO,iBACX,aACA,uBACD,CAAC;EAAE,cAAc;EAAS,GAAG;EAAM,CAAC;CAErC,KAAA,GAAA,cAAA,aAAgB,EAAE,OAAO;CAEzB,OAAO,oBAAC,UAAD;EAAQ,yBAAyB,EAAE,QAAQ,MAAM;EAAS;EAAS,CAAA;;AAG5E,SAAgB,kBAAkB,EAChC,OACA,GAAG,QAC+B;CAClC,MAAM,OAAO,iBACX,eACA,yBACD,CAAC;EACA,cAAc;EACd,GAAG;EACJ,CAAC;CAEF,KAAA,GAAA,cAAA,aAAgB,EAAE,OAAO;CAEzB,OAAO,oBAAC,UAAD;EAAQ,yBAAyB,EAAE,QAAQ,MAAM;EAAS;EAAS,CAAA"}

package/dist/esm/core/system/styled.js

@@ -1,17 +1,13 @@
 "use client";
-
 import { createContext as createContext$1 } from "../../utils/context.js";
 import { utils_exports } from "../../utils/index.js";
 import { useSystem } from "./system-provider.js";
 import { useTheme } from "./theme-provider.js";
 import { Slot } from "../../components/slot/slot.js";
-import "../../components/slot/index.js";
 import { css } from "../css/css.js";
-import "../css/index.js";
 import { createShouldForwardProp } from "../components/props.js";
 import { useComponentStyle } from "../components/use-component-style.js";
 import { getDisplayName } from "../components/utils.js";
-import "../components/index.js";
 import { useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { withEmotionCache } from "@emotion/react";
@@ -19,7 +15,6 @@ import { serializeStyles } from "@emotion/serialize";
 import { useInsertionEffectAlwaysWithSyncFallback } from "@emotion/use-insertion-effect-with-fallbacks";
 import { getRegisteredStyles, insertStyles, registerStyles } from "@emotion/utils";
 import isEqual from "react-fast-compare";
-
 //#region src/core/system/styled.tsx
 const Insertion = ({ cache, htmlTag, serialized }) => {
 	registerStyles(cache, serialized, htmlTag);
@@ -59,7 +54,7 @@ function createStyled(el, { name, base, compounds, props, sizes, variants, defau
 		variants,
 		defaultProps
 	});
-	const StyledComponent = withEmotionCache(function({ as: Component = el, asChild, children, ...props$1 }, cache, ref) {
+	const StyledComponent = withEmotionCache(function({ as: Component = el, asChild, children, ...props }, cache, ref) {
 		let className = "";
 		const system = useSystem();
 		const { theme } = useTheme();
@@ -72,14 +67,14 @@ function createStyled(el, { name, base, compounds, props, sizes, variants, defau
 		const registered = useRef([]);
 		const htmlTag = (0, utils_exports.isString)(Component);
 		const forwardAsChild = options.forwardAsChild || options.forwardProps?.includes("asChild");
-		const [omittedProps, styleProps] = useSplitProps(props$1, shouldForwardProp);
+		const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp);
 		const [, rest] = useComponentStyle(omittedProps, componentStyleOptions);
 		const [cssArray, colorScheme, forwardProps] = useMemo(() => {
-			const { css: css$1, colorScheme: colorScheme$1, ...forwardProps$1 } = rest;
+			const { css, colorScheme, ...forwardProps } = rest;
 			return [
-				(0, utils_exports.toArray)(css$1),
-				colorScheme$1,
-				forwardProps$1
+				(0, utils_exports.toArray)(css),
+				colorScheme,
+				forwardProps
 			];
 		}, [rest]);
 		styleProps.colorScheme ??= colorScheme;
@@ -117,7 +112,7 @@ function createStyled(el, { name, base, compounds, props, sizes, variants, defau
 	StyledComponent.displayName = displayName || "StyledComponent";
 	return StyledComponent;
 }
-
 //#endregion
 export { ColorSchemeContext, createStyled, useColorSchemeContext };
+
 //# sourceMappingURL=styled.js.map

package/dist/esm/core/system/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["Insertion: FC<InsertionProps>","createContext","props","className: string | undefined","forwardProps","css","colorScheme"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n  ColorScheme,\n  ComponentStyle,\n  System,\n  UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport {\n  getRegisteredStyles,\n  insertStyles,\n  registerStyles,\n} from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n  createContext,\n  createdDom,\n  cx,\n  filterEmpty,\n  filterUndefined,\n  isString,\n  isUndefined,\n  runIfFn,\n  splitObject,\n  toArray,\n  toKebabCase,\n} from \"../../utils\"\nimport {\n  createShouldForwardProp,\n  getDisplayName,\n  useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n  cache: EmotionCache\n  htmlTag: boolean\n  serialized: SerializedStyles\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n  registerStyles(cache, serialized, htmlTag)\n\n  const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n    insertStyles(cache, serialized, htmlTag),\n  )\n\n  if (!createdDom() && !isUndefined(style)) {\n    let className = serialized.name\n    let next = serialized.next\n\n    while (next !== undefined) {\n      className = cx(className, next.name) ?? \"\"\n      next = next.next\n    }\n\n    return (\n      <style\n        data-emotion={cx(cache.key, className)}\n        dangerouslySetInnerHTML={{ __html: style }}\n        nonce={cache.sheet.nonce}\n      />\n    )\n  } else {\n    return null\n  }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n  props: Dict,\n  shouldForwardProp?: ShouldForwardProp,\n) => {\n  const propsRef = useRef(props)\n\n  if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n  const computedProps = propsRef.current\n\n  return useMemo(\n    () => splitObject<Y, M>(computedProps, shouldForwardProp),\n    [computedProps, shouldForwardProp],\n  )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n  createContext<ColorScheme>({\n    name: \"ColorSchemeContext\",\n    strict: false,\n  })\n\nexport interface StyledOptions<\n  Y extends CSSPropObject = CSSPropObject,\n  M extends CSSModifierObject = CSSModifierObject,\n  D extends CSSModifierObject = CSSModifierObject,\n  H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n  className?: ((system: System) => string) | string\n  displayName?: string\n  forwardAsChild?: boolean\n  name?: string\n  shouldForwardProp?: boolean | ShouldForwardProp\n  target?: string\n  forwardProps?: string[]\n  transferProps?: H[]\n}\n\nexport function createStyled<\n  Y extends As,\n  M extends object = {},\n  D extends CSSPropObject = CSSPropObject,\n  H extends CSSModifierObject = CSSModifierObject,\n  R extends CSSModifierObject = CSSModifierObject,\n>(\n  el: Y,\n  {\n    name,\n    base,\n    compounds,\n    props,\n    sizes,\n    variants,\n    defaultProps,\n    transferProps,\n    ...options\n  }: StyledOptions<D, H, R, keyof M> = {},\n) {\n  const displayName = options.displayName ?? getDisplayName(name, \"\")\n  const shouldForwardProp = !options.shouldForwardProp\n    ? createShouldForwardProp(options.forwardProps)\n    : undefined\n  const style = filterUndefined({\n    base,\n    compounds,\n    props,\n    sizes,\n    variants,\n    defaultProps,\n  })\n\n  const StyledComponent = withEmotionCache<Dict>(function (\n    { as: Component = el, asChild, children, ...props },\n    cache,\n    ref,\n  ) {\n    let className: string | undefined = \"\"\n\n    const system = useSystem()\n    const { theme } = useTheme<UsageTheme>()\n    const componentStyleOptions = {\n      name,\n      className: system.utils.getClassName(\n        runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n      ),\n      style,\n      transferProps,\n    }\n    const registered = useRef<string[]>([])\n    const htmlTag = isString(Component)\n    const forwardAsChild =\n      options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n    const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n    const [, rest] = useComponentStyle<any, {}>(\n      omittedProps,\n      componentStyleOptions,\n    )\n    const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n      const { css, colorScheme, ...forwardProps } = rest\n\n      return [toArray(css), colorScheme, forwardProps]\n    }, [rest])\n\n    styleProps.colorScheme ??= colorScheme\n\n    if (forwardProps.className)\n      className = getRegisteredStyles(\n        cache.registered,\n        registered.current,\n        forwardProps.className,\n      ).trim()\n\n    const interpolations = useMemo(\n      () => [\n        ...registered.current,\n        ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n      ],\n      [cssArray, system, styleProps, theme],\n    )\n\n    const serialized = useMemo(\n      () => serializeStyles(interpolations, cache.registered),\n      [interpolations, cache.registered],\n    )\n\n    className = cx(\n      className,\n      serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n    )\n    className = cx(className, options.target)\n\n    if (!className) className = undefined\n\n    const mergedProps = { ...forwardProps, className, children }\n\n    return (\n      <ColorSchemeContext value={styleProps.colorScheme}>\n        <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n        {asChild && !forwardAsChild ? (\n          <Slot ref={ref} {...mergedProps} />\n        ) : (\n          <Component ref={ref} {...mergedProps} />\n        )}\n      </ColorSchemeContext>\n    )\n  }) as StyledComponent<Y, M>\n\n  StyledComponent.displayName = displayName || \"StyledComponent\"\n\n  return StyledComponent\n}\n"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":["createContext"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n  ColorScheme,\n  ComponentStyle,\n  System,\n  UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport {\n  getRegisteredStyles,\n  insertStyles,\n  registerStyles,\n} from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n  createContext,\n  createdDom,\n  cx,\n  filterEmpty,\n  filterUndefined,\n  isString,\n  isUndefined,\n  runIfFn,\n  splitObject,\n  toArray,\n  toKebabCase,\n} from \"../../utils\"\nimport {\n  createShouldForwardProp,\n  getDisplayName,\n  useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n  cache: EmotionCache\n  htmlTag: boolean\n  serialized: SerializedStyles\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n  registerStyles(cache, serialized, htmlTag)\n\n  const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n    insertStyles(cache, serialized, htmlTag),\n  )\n\n  if (!createdDom() && !isUndefined(style)) {\n    let className = serialized.name\n    let next = serialized.next\n\n    while (next !== undefined) {\n      className = cx(className, next.name) ?? \"\"\n      next = next.next\n    }\n\n    return (\n      <style\n        data-emotion={cx(cache.key, className)}\n        dangerouslySetInnerHTML={{ __html: style }}\n        nonce={cache.sheet.nonce}\n      />\n    )\n  } else {\n    return null\n  }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n  props: Dict,\n  shouldForwardProp?: ShouldForwardProp,\n) => {\n  const propsRef = useRef(props)\n\n  if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n  const computedProps = propsRef.current\n\n  return useMemo(\n    () => splitObject<Y, M>(computedProps, shouldForwardProp),\n    [computedProps, shouldForwardProp],\n  )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n  createContext<ColorScheme>({\n    name: \"ColorSchemeContext\",\n    strict: false,\n  })\n\nexport interface StyledOptions<\n  Y extends CSSPropObject = CSSPropObject,\n  M extends CSSModifierObject = CSSModifierObject,\n  D extends CSSModifierObject = CSSModifierObject,\n  H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n  className?: ((system: System) => string) | string\n  displayName?: string\n  forwardAsChild?: boolean\n  name?: string\n  shouldForwardProp?: boolean | ShouldForwardProp\n  target?: string\n  forwardProps?: string[]\n  transferProps?: H[]\n}\n\nexport function createStyled<\n  Y extends As,\n  M extends object = {},\n  D extends CSSPropObject = CSSPropObject,\n  H extends CSSModifierObject = CSSModifierObject,\n  R extends CSSModifierObject = CSSModifierObject,\n>(\n  el: Y,\n  {\n    name,\n    base,\n    compounds,\n    props,\n    sizes,\n    variants,\n    defaultProps,\n    transferProps,\n    ...options\n  }: StyledOptions<D, H, R, keyof M> = {},\n) {\n  const displayName = options.displayName ?? getDisplayName(name, \"\")\n  const shouldForwardProp = !options.shouldForwardProp\n    ? createShouldForwardProp(options.forwardProps)\n    : undefined\n  const style = filterUndefined({\n    base,\n    compounds,\n    props,\n    sizes,\n    variants,\n    defaultProps,\n  })\n\n  const StyledComponent = withEmotionCache<Dict>(function (\n    { as: Component = el, asChild, children, ...props },\n    cache,\n    ref,\n  ) {\n    let className: string | undefined = \"\"\n\n    const system = useSystem()\n    const { theme } = useTheme<UsageTheme>()\n    const componentStyleOptions = {\n      name,\n      className: system.utils.getClassName(\n        runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n      ),\n      style,\n      transferProps,\n    }\n    const registered = useRef<string[]>([])\n    const htmlTag = isString(Component)\n    const forwardAsChild =\n      options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n    const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n    const [, rest] = useComponentStyle<any, {}>(\n      omittedProps,\n      componentStyleOptions,\n    )\n    const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n      const { css, colorScheme, ...forwardProps } = rest\n\n      return [toArray(css), colorScheme, forwardProps]\n    }, [rest])\n\n    styleProps.colorScheme ??= colorScheme\n\n    if (forwardProps.className)\n      className = getRegisteredStyles(\n        cache.registered,\n        registered.current,\n        forwardProps.className,\n      ).trim()\n\n    const interpolations = useMemo(\n      () => [\n        ...registered.current,\n        ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n      ],\n      [cssArray, system, styleProps, theme],\n    )\n\n    const serialized = useMemo(\n      () => serializeStyles(interpolations, cache.registered),\n      [interpolations, cache.registered],\n    )\n\n    className = cx(\n      className,\n      serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n    )\n    className = cx(className, options.target)\n\n    if (!className) className = undefined\n\n    const mergedProps = { ...forwardProps, className, children }\n\n    return (\n      <ColorSchemeContext value={styleProps.colorScheme}>\n        <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n        {asChild && !forwardAsChild ? (\n          <Slot ref={ref} {...mergedProps} />\n        ) : (\n          <Component ref={ref} {...mergedProps} />\n        )}\n      </ColorSchemeContext>\n    )\n  }) as StyledComponent<Y, M>\n\n  StyledComponent.displayName = displayName || \"StyledComponent\"\n\n  return StyledComponent\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoDA,MAAM,aAAiC,EAAE,OAAO,SAAS,iBAAiB;CACxE,eAAe,OAAO,YAAY,QAAQ;CAE1C,MAAM,QAAQ,+CACZ,aAAa,OAAO,YAAY,QAAQ,CACzC;CAED,IAAI,EAAA,GAAA,cAAA,aAAa,IAAI,EAAA,GAAA,cAAA,aAAa,MAAM,EAAE;EACxC,IAAI,YAAY,WAAW;EAC3B,IAAI,OAAO,WAAW;EAEtB,OAAO,SAAS,KAAA,GAAW;GACzB,aAAA,GAAA,cAAA,IAAe,WAAW,KAAK,KAAK,IAAI;GACxC,OAAO,KAAK;;EAGd,OACE,oBAAC,SAAD;GACE,iBAAA,GAAA,cAAA,IAAiB,MAAM,KAAK,UAAU;GACtC,yBAAyB,EAAE,QAAQ,OAAO;GAC1C,OAAO,MAAM,MAAM;GACnB,CAAA;QAGJ,OAAO;;AAIX,MAAM,iBACJ,OACA,sBACG;CACH,MAAM,WAAW,OAAO,MAAM;CAE9B,IAAI,CAAC,QAAQ,SAAS,SAAS,MAAM,EAAE,SAAS,UAAU;CAE1D,MAAM,gBAAgB,SAAS;CAE/B,OAAO,eAAA,GAAA,cAAA,aACmB,eAAe,kBAAkB,EACzD,CAAC,eAAe,kBAAkB,CACnC;;AAGH,MAAa,CAAC,oBAAoB,yBAChCA,gBAA2B;CACzB,MAAM;CACN,QAAQ;CACT,CAAC;AAkBJ,SAAgB,aAOd,IACA,EACE,MACA,MACA,WACA,OACA,OACA,UACA,cACA,eACA,GAAG,YACgC,EAAE,EACvC;CACA,MAAM,cAAc,QAAQ,eAAe,eAAe,MAAM,GAAG;CACnE,MAAM,oBAAoB,CAAC,QAAQ,oBAC/B,wBAAwB,QAAQ,aAAa,GAC7C,KAAA;CACJ,MAAM,SAAA,GAAA,cAAA,iBAAwB;EAC5B;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBAAkB,iBAAuB,SAC7C,EAAE,IAAI,YAAY,IAAI,SAAS,UAAU,GAAG,SAC5C,OACA,KACA;EACA,IAAI,YAAgC;EAEpC,MAAM,SAAS,WAAW;EAC1B,MAAM,EAAE,UAAU,UAAsB;EACxC,MAAM,wBAAwB;GAC5B;GACA,WAAW,OAAO,MAAM,cAAA,GAAA,cAAA,SACd,QAAQ,WAAW,OAAO,KAAA,GAAA,cAAA,aAAgB,QAAQ,GAAG,CAC9D;GACD;GACA;GACD;EACD,MAAM,aAAa,OAAiB,EAAE,CAAC;EACvC,MAAM,WAAA,GAAA,cAAA,UAAmB,UAAU;EACnC,MAAM,iBACJ,QAAQ,kBAAkB,QAAQ,cAAc,SAAS,UAAU;EACrE,MAAM,CAAC,cAAc,cAAc,cAAc,OAAO,kBAAkB;EAC1E,MAAM,GAAG,QAAQ,kBACf,cACA,sBACD;EACD,MAAM,CAAC,UAAU,aAAa,gBAAgB,cAAc;GAC1D,MAAM,EAAE,KAAK,aAAa,GAAG,iBAAiB;GAE9C,OAAO;+BAAS,IAAI;IAAE;IAAa;IAAa;KAC/C,CAAC,KAAK,CAAC;EAEV,WAAW,gBAAgB;EAE3B,IAAI,aAAa,WACf,YAAY,oBACV,MAAM,YACN,WAAW,SACX,aAAa,UACd,CAAC,MAAM;EAEV,MAAM,iBAAiB,cACf,CACJ,GAAG,WAAW,SACd,IAAA,GAAA,cAAA,aAAe,CAAC,GAAG,UAAU,WAAW,CAAC,IAAI,IAAI,QAAQ,MAAM,CAAC,CAAC,CAClE,EACD;GAAC;GAAU;GAAQ;GAAY;GAAM,CACtC;EAED,MAAM,aAAa,cACX,gBAAgB,gBAAgB,MAAM,WAAW,EACvD,CAAC,gBAAgB,MAAM,WAAW,CACnC;EAED,aAAA,GAAA,cAAA,IACE,WACA,WAAW,SAAS,GAAG,MAAM,IAAI,GAAG,WAAW,SAAS,KAAA,EACzD;EACD,aAAA,GAAA,cAAA,IAAe,WAAW,QAAQ,OAAO;EAEzC,IAAI,CAAC,WAAW,YAAY,KAAA;EAE5B,MAAM,cAAc;GAAE,GAAG;GAAc;GAAW;GAAU;EAE5D,OACE,qBAAC,oBAAD;GAAoB,OAAO,WAAW;aAAtC,CACE,oBAAC,WAAD;IAAkB;IAAgB;IAAqB;IAAc,CAAA,EAEpE,WAAW,CAAC,iBACX,oBAAC,MAAD;IAAW;IAAK,GAAI;IAAe,CAAA,GAEnC,oBAAC,WAAD;IAAgB;IAAK,GAAI;IAAe,CAAA,CAEvB;;GAEvB;CAEF,gBAAgB,cAAc,eAAe;CAE7C,OAAO"}

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

@@ -1,9 +1,7 @@
 "use client";
-
 import { createSystem, defaultSystem } from "./create-system.js";
 import { createContext, use, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/core/system/system-provider.tsx
 const SystemContext = createContext(defaultSystem);
 const SystemProvider = ({ children, config, theme = {} }) => {
@@ -15,7 +13,7 @@ const SystemProvider = ({ children, config, theme = {} }) => {
 const useSystem = () => {
 	return use(SystemContext);
 };
-
 //#endregion
 export { SystemProvider, useSystem };
+
 //# sourceMappingURL=system-provider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"system-provider.js","names":["SystemProvider: FC<SystemProviderProps>"],"sources":["../../../../src/core/system/system-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { System, ThemeConfig, UsageTheme } from \"./index.types\"\nimport { createContext, use, useMemo } from \"react\"\nimport { createSystem, defaultSystem } from \"./create-system\"\n\ninterface SystemContext extends System {}\n\nconst SystemContext = createContext<SystemContext>(defaultSystem)\n\nexport interface SystemProviderProps extends PropsWithChildren {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const SystemProvider: FC<SystemProviderProps> = ({\n  children,\n  config,\n  theme = {},\n}) => {\n  const system = useMemo(() => createSystem(theme, config), [theme, config])\n\n  return <SystemContext value={system}>{children}</SystemContext>\n}\n\nexport const useSystem = () => {\n  const system = use(SystemContext)\n\n  return system\n}\n"],"mappings":";;;;;;;AASA,MAAM,gBAAgB,cAA6B,cAAc;AAajE,MAAaA,kBAA2C,EACtD,UACA,QACA,QAAQ,EAAE,OACN;AAGJ,QAAO,oBAAC;EAAc,OAFP,cAAc,aAAa,OAAO,OAAO,EAAE,CAAC,OAAO,OAAO,CAAC;EAEpC;GAAyB;;AAGjE,MAAa,kBAAkB;AAG7B,QAFe,IAAI,cAAc"}
+{"version":3,"file":"system-provider.js","names":[],"sources":["../../../../src/core/system/system-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { System, ThemeConfig, UsageTheme } from \"./index.types\"\nimport { createContext, use, useMemo } from \"react\"\nimport { createSystem, defaultSystem } from \"./create-system\"\n\ninterface SystemContext extends System {}\n\nconst SystemContext = createContext<SystemContext>(defaultSystem)\n\nexport interface SystemProviderProps extends PropsWithChildren {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const SystemProvider: FC<SystemProviderProps> = ({\n  children,\n  config,\n  theme = {},\n}) => {\n  const system = useMemo(() => createSystem(theme, config), [theme, config])\n\n  return <SystemContext value={system}>{children}</SystemContext>\n}\n\nexport const useSystem = () => {\n  const system = use(SystemContext)\n\n  return system\n}\n"],"mappings":";;;;;AASA,MAAM,gBAAgB,cAA6B,cAAc;AAajE,MAAa,kBAA2C,EACtD,UACA,QACA,QAAQ,EAAE,OACN;CAGJ,OAAO,oBAAC,eAAD;EAAe,OAFP,cAAc,aAAa,OAAO,OAAO,EAAE,CAAC,OAAO,OAAO,CAEtC;EAAG;EAAyB,CAAA;;AAGjE,MAAa,kBAAkB;CAG7B,OAFe,IAAI,cAEN"}

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

@@ -1,32 +1,29 @@
 "use client";
-
 import { utils_exports } from "../../utils/index.js";
 import { THEME_SCHEME_STORAGE_KEY } from "../constant.js";
 import { useEnvironment } from "./environment-provider.js";
 import { createStorageManager } from "./storage-manager.js";
 import { useSystem } from "./system-provider.js";
 import { css } from "../css/css.js";
-import "../css/index.js";
 import { use, useCallback, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Global, ThemeContext, ThemeProvider } from "@emotion/react";
-
 //#region src/core/system/theme-provider.tsx
 const getPreventTransition = (environment) => {
 	const { getDocument, getWindow } = environment;
 	const win = getWindow();
 	const doc = getDocument();
 	if (!win || !doc) return;
-	const css$1 = doc.createElement("style");
+	const css = doc.createElement("style");
 	const node = doc.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`);
-	css$1.appendChild(node);
-	doc.head.appendChild(css$1);
+	css.appendChild(node);
+	doc.head.appendChild(css);
 	return () => {
 		const forceReflow = () => win.getComputedStyle(doc.body);
 		forceReflow();
 		requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				doc.head.removeChild(css$1);
+				doc.head.removeChild(css);
 			});
 		});
 	};
@@ -41,14 +38,14 @@ const ThemeProvider$1 = ({ children, config, cookie, storage = cookie ? "cookie"
 	]);
 	const environment = useEnvironment();
 	const [themeScheme, setThemeScheme] = useState(storageManager.get());
-	const changeThemeScheme = useCallback((themeScheme$1) => {
+	const changeThemeScheme = useCallback((themeScheme) => {
 		const { getDocument } = environment;
 		const doc = getDocument();
 		const cleanup = disableTransitionOnChange ? getPreventTransition(environment) : void 0;
-		if (doc) doc.documentElement.dataset.theme = themeScheme$1;
+		if (doc) doc.documentElement.dataset.theme = themeScheme;
 		cleanup?.();
-		setThemeScheme(themeScheme$1);
-		storageManager.set(themeScheme$1);
+		setThemeScheme(themeScheme);
+		storageManager.set(themeScheme);
 	}, [
 		disableTransitionOnChange,
 		environment,
@@ -113,7 +110,7 @@ const useTheme = () => {
 		};
 	}, [theme, internalTheme]);
 };
-
 //#endregion
 export { GlobalStyles, ThemeProvider$1 as ThemeProvider, getPreventTransition, useTheme };
+
 //# sourceMappingURL=theme-provider.js.map

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        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"}
+{"version":3,"file":"theme-provider.js","names":["ThemeProvider","EmotionThemeProvider"],"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":"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"}

package/dist/esm/core/system/use-color-mode-value.js

@@ -1,5 +1,4 @@
 import { useColorMode } from "./color-mode-provider.js";
-
 //#region src/core/system/use-color-mode-value.ts
 /**
 * `useColorModeValue` is a custom hook that returns the value of the current color mode from the provided values.
@@ -13,7 +12,7 @@ const useColorModeValue = (light, dark) => {
 const getColorModeValue = (light, dark) => (colorMode) => {
 	return colorMode === "light" ? light : dark;
 };
-
 //#endregion
 export { getColorModeValue, useColorModeValue };
+
 //# sourceMappingURL=use-color-mode-value.js.map

package/dist/esm/core/system/use-color-mode-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-color-mode-value.js","names":[],"sources":["../../../../src/core/system/use-color-mode-value.ts"],"sourcesContent":["import type { ColorMode } from \"./index.types\"\nimport { useColorMode } from \"./color-mode-provider\"\n\n/**\n * `useColorModeValue` is a custom hook that returns the value of the current color mode from the provided values.\n *\n * @see https://yamada-ui.com/docs/hooks/use-color-mode-value\n */\nexport const useColorModeValue = <L, D>(light: L, dark: D): D | L => {\n  const { colorMode } = useColorMode()\n\n  return getColorModeValue<L, D>(light, dark)(colorMode)\n}\n\nexport const getColorModeValue =\n  <L, D>(light: L, dark: D) =>\n  (colorMode: ColorMode): D | L => {\n    return colorMode === \"light\" ? light : dark\n  }\n"],"mappings":";;;;;;;;AAQA,MAAa,qBAA2B,OAAU,SAAmB;CACnE,MAAM,EAAE,cAAc,cAAc;AAEpC,QAAO,kBAAwB,OAAO,KAAK,CAAC,UAAU;;AAGxD,MAAa,qBACJ,OAAU,UAChB,cAAgC;AAC/B,QAAO,cAAc,UAAU,QAAQ"}
+{"version":3,"file":"use-color-mode-value.js","names":[],"sources":["../../../../src/core/system/use-color-mode-value.ts"],"sourcesContent":["import type { ColorMode } from \"./index.types\"\nimport { useColorMode } from \"./color-mode-provider\"\n\n/**\n * `useColorModeValue` is a custom hook that returns the value of the current color mode from the provided values.\n *\n * @see https://yamada-ui.com/docs/hooks/use-color-mode-value\n */\nexport const useColorModeValue = <L, D>(light: L, dark: D): D | L => {\n  const { colorMode } = useColorMode()\n\n  return getColorModeValue<L, D>(light, dark)(colorMode)\n}\n\nexport const getColorModeValue =\n  <L, D>(light: L, dark: D) =>\n  (colorMode: ColorMode): D | L => {\n    return colorMode === \"light\" ? light : dark\n  }\n"],"mappings":";;;;;;;AAQA,MAAa,qBAA2B,OAAU,SAAmB;CACnE,MAAM,EAAE,cAAc,cAAc;CAEpC,OAAO,kBAAwB,OAAO,KAAK,CAAC,UAAU;;AAGxD,MAAa,qBACJ,OAAU,UAChB,cAAgC;CAC/B,OAAO,cAAc,UAAU,QAAQ"}

package/dist/esm/core/system/use-system-color-mode.js

@@ -1,11 +1,9 @@
 "use client";
-
 import { useSafeLayoutEffect } from "../../utils/effect.js";
 import { useCallbackRef } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
 import { useEnvironment } from "./environment-provider.js";
 import { useCallback, useEffect, useState } from "react";
-
 //#region src/core/system/use-system-color-mode.ts
 /**
 * `useSystemColorMode` is a custom hook that returns the current system color mode.
@@ -44,7 +42,7 @@ const useSystemColorMode = ({ callback, defaultColorMode }) => {
 		systemColorMode
 	};
 };
-
 //#endregion
 export { useSystemColorMode };
+
 //# sourceMappingURL=use-system-color-mode.js.map

package/dist/esm/core/system/use-system-color-mode.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-system-color-mode.js","names":[],"sources":["../../../../src/core/system/use-system-color-mode.ts"],"sourcesContent":["\"use client\"\n\nimport type { ColorMode } from \"./index.types\"\nimport { useCallback, useEffect, useState } from \"react\"\nimport { fnAll, useCallbackRef, useSafeLayoutEffect } from \"../../utils\"\nimport { useEnvironment } from \"./environment-provider\"\n\nexport interface UseSystemColorModeProps {\n  defaultColorMode: ColorMode\n  callback?: (colorMode: ColorMode) => void\n}\n\n/**\n * `useSystemColorMode` is a custom hook that returns the current system color mode.\n */\nexport const useSystemColorMode = ({\n  callback,\n  defaultColorMode,\n}: UseSystemColorModeProps) => {\n  const { getWindow } = useEnvironment()\n  const callbackRef = useCallbackRef(callback)\n  const [systemColorMode, setSystemColorMode] =\n    useState<ColorMode>(defaultColorMode)\n\n  const getSystemColorMode = useCallback(\n    (fallback?: ColorMode) => {\n      const mql = getWindow()?.matchMedia(\"(prefers-color-scheme: dark)\")\n      const dark = mql?.matches ?? fallback === \"dark\"\n\n      return dark ? \"dark\" : \"light\"\n    },\n    [getWindow],\n  )\n\n  const systemColorModeObserver = useCallback(\n    (func: (cm: ColorMode) => void) => {\n      const mql = getWindow()?.matchMedia(\"(prefers-color-scheme: dark)\")\n\n      const listener = (e: MediaQueryListEvent) => {\n        func(e.matches ? \"dark\" : \"light\")\n      }\n\n      if (typeof mql?.addListener === \"function\") {\n        mql.addListener(listener)\n      } else {\n        mql?.addEventListener(\"change\", listener)\n      }\n\n      return () => {\n        if (typeof mql?.removeListener === \"function\") {\n          mql.removeListener(listener)\n        } else {\n          mql?.removeEventListener(\"change\", listener)\n        }\n      }\n    },\n    [getWindow],\n  )\n\n  useSafeLayoutEffect(() => {\n    setSystemColorMode(getSystemColorMode())\n  }, [getSystemColorMode])\n\n  useEffect(() => {\n    return systemColorModeObserver(fnAll(setSystemColorMode, callbackRef))\n  }, [systemColorModeObserver, getSystemColorMode, callbackRef])\n\n  return { getSystemColorMode, systemColorMode }\n}\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,sBAAsB,EACjC,UACA,uBAC6B;CAC7B,MAAM,EAAE,cAAc,gBAAgB;CACtC,MAAM,cAAc,eAAe,SAAS;CAC5C,MAAM,CAAC,iBAAiB,sBACtB,SAAoB,iBAAiB;CAEvC,MAAM,qBAAqB,aACxB,aAAyB;AAIxB,UAHY,WAAW,EAAE,WAAW,+BAA+B,GACjD,WAAW,aAAa,SAE5B,SAAS;IAEzB,CAAC,UAAU,CACZ;CAED,MAAM,0BAA0B,aAC7B,SAAkC;EACjC,MAAM,MAAM,WAAW,EAAE,WAAW,+BAA+B;EAEnE,MAAM,YAAY,MAA2B;AAC3C,QAAK,EAAE,UAAU,SAAS,QAAQ;;AAGpC,MAAI,OAAO,KAAK,gBAAgB,WAC9B,KAAI,YAAY,SAAS;MAEzB,MAAK,iBAAiB,UAAU,SAAS;AAG3C,eAAa;AACX,OAAI,OAAO,KAAK,mBAAmB,WACjC,KAAI,eAAe,SAAS;OAE5B,MAAK,oBAAoB,UAAU,SAAS;;IAIlD,CAAC,UAAU,CACZ;AAED,2BAA0B;AACxB,qBAAmB,oBAAoB,CAAC;IACvC,CAAC,mBAAmB,CAAC;AAExB,iBAAgB;AACd,SAAO,iDAA8B,oBAAoB,YAAY,CAAC;IACrE;EAAC;EAAyB;EAAoB;EAAY,CAAC;AAE9D,QAAO;EAAE;EAAoB;EAAiB"}
+{"version":3,"file":"use-system-color-mode.js","names":[],"sources":["../../../../src/core/system/use-system-color-mode.ts"],"sourcesContent":["\"use client\"\n\nimport type { ColorMode } from \"./index.types\"\nimport { useCallback, useEffect, useState } from \"react\"\nimport { fnAll, useCallbackRef, useSafeLayoutEffect } from \"../../utils\"\nimport { useEnvironment } from \"./environment-provider\"\n\nexport interface UseSystemColorModeProps {\n  defaultColorMode: ColorMode\n  callback?: (colorMode: ColorMode) => void\n}\n\n/**\n * `useSystemColorMode` is a custom hook that returns the current system color mode.\n */\nexport const useSystemColorMode = ({\n  callback,\n  defaultColorMode,\n}: UseSystemColorModeProps) => {\n  const { getWindow } = useEnvironment()\n  const callbackRef = useCallbackRef(callback)\n  const [systemColorMode, setSystemColorMode] =\n    useState<ColorMode>(defaultColorMode)\n\n  const getSystemColorMode = useCallback(\n    (fallback?: ColorMode) => {\n      const mql = getWindow()?.matchMedia(\"(prefers-color-scheme: dark)\")\n      const dark = mql?.matches ?? fallback === \"dark\"\n\n      return dark ? \"dark\" : \"light\"\n    },\n    [getWindow],\n  )\n\n  const systemColorModeObserver = useCallback(\n    (func: (cm: ColorMode) => void) => {\n      const mql = getWindow()?.matchMedia(\"(prefers-color-scheme: dark)\")\n\n      const listener = (e: MediaQueryListEvent) => {\n        func(e.matches ? \"dark\" : \"light\")\n      }\n\n      if (typeof mql?.addListener === \"function\") {\n        mql.addListener(listener)\n      } else {\n        mql?.addEventListener(\"change\", listener)\n      }\n\n      return () => {\n        if (typeof mql?.removeListener === \"function\") {\n          mql.removeListener(listener)\n        } else {\n          mql?.removeEventListener(\"change\", listener)\n        }\n      }\n    },\n    [getWindow],\n  )\n\n  useSafeLayoutEffect(() => {\n    setSystemColorMode(getSystemColorMode())\n  }, [getSystemColorMode])\n\n  useEffect(() => {\n    return systemColorModeObserver(fnAll(setSystemColorMode, callbackRef))\n  }, [systemColorModeObserver, getSystemColorMode, callbackRef])\n\n  return { getSystemColorMode, systemColorMode }\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAa,sBAAsB,EACjC,UACA,uBAC6B;CAC7B,MAAM,EAAE,cAAc,gBAAgB;CACtC,MAAM,cAAc,eAAe,SAAS;CAC5C,MAAM,CAAC,iBAAiB,sBACtB,SAAoB,iBAAiB;CAEvC,MAAM,qBAAqB,aACxB,aAAyB;EAIxB,QAHY,WAAW,EAAE,WAAW,+BAA+B,GACjD,WAAW,aAAa,SAE5B,SAAS;IAEzB,CAAC,UAAU,CACZ;CAED,MAAM,0BAA0B,aAC7B,SAAkC;EACjC,MAAM,MAAM,WAAW,EAAE,WAAW,+BAA+B;EAEnE,MAAM,YAAY,MAA2B;GAC3C,KAAK,EAAE,UAAU,SAAS,QAAQ;;EAGpC,IAAI,OAAO,KAAK,gBAAgB,YAC9B,IAAI,YAAY,SAAS;OAEzB,KAAK,iBAAiB,UAAU,SAAS;EAG3C,aAAa;GACX,IAAI,OAAO,KAAK,mBAAmB,YACjC,IAAI,eAAe,SAAS;QAE5B,KAAK,oBAAoB,UAAU,SAAS;;IAIlD,CAAC,UAAU,CACZ;CAED,0BAA0B;EACxB,mBAAmB,oBAAoB,CAAC;IACvC,CAAC,mBAAmB,CAAC;CAExB,gBAAgB;EACd,OAAO,yBAAA,GAAA,cAAA,OAA8B,oBAAoB,YAAY,CAAC;IACrE;EAAC;EAAyB;EAAoB;EAAY,CAAC;CAE9D,OAAO;EAAE;EAAoB;EAAiB"}

package/dist/esm/core/system/var.js

@@ -1,19 +1,16 @@
 import { utils_exports } from "../../utils/index.js";
-import { DEFAULT_VAR_PREFIX } from "../constant.js";
+import "../constant.js";
 import { defaultSystem } from "./create-system.js";
-import "./index.js";
 import { isCSSFunction, isCSSVar, isInterpolation } from "../css/utils.js";
 import { animation, injectKeyframes } from "../css/animation.js";
 import { colorMix } from "../css/color-mix.js";
 import { conditions } from "../css/conditions.js";
 import { gradient } from "../css/gradient.js";
 import { css, getStyle } from "../css/css.js";
-import "../css/index.js";
-
 //#region src/core/system/var.ts
 function transformInterpolation(value, callback) {
-	if ((0, utils_exports.isString)(value)) return value.replace(/\{(.*?)\}/g, (_, value$1) => {
-		const [token, fallbackValue] = value$1.split(/,(.+)/);
+	if ((0, utils_exports.isString)(value)) return value.replace(/\{(.*?)\}/g, (_, value) => {
+		const [token, fallbackValue] = value.split(/,(.+)/);
 		return callback(token.trim(), fallbackValue?.trim());
 	});
 	else return value;
@@ -25,13 +22,13 @@ function getVar(token, fallback) {
 }
 function getVarName(system) {
 	return function(token) {
-		return `--${system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX}-${token}`;
+		return `--${system.config.css?.varPrefix ?? "ui"}-${token}`;
 	};
 }
 function getColorSchemeVar(system) {
 	return function(value, fallback) {
 		if (!(0, utils_exports.isString)(value)) return value;
-		const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX;
+		const prefix = system.config.css?.varPrefix ?? "ui";
 		const [, token] = value.split(".");
 		return getVar(`${prefix}-colorScheme-${token}`, fallback);
 	};
@@ -42,7 +39,7 @@ const isAnimation = (token) => token.startsWith("animations.");
 const isSpace = (token) => token.startsWith("spaces.");
 const isColor = (token) => token.startsWith("colors.");
 const isColorScheme = (token) => (0, utils_exports.isString)(token) && token.startsWith("colorScheme.") && !token.includes("/");
-function createVars(prefix = DEFAULT_VAR_PREFIX, theme, breakpoints) {
+function createVars(prefix = "ui", theme, breakpoints) {
 	return function(tokens) {
 		const { getQuery, isResponsive } = breakpoints;
 		function tokenToVar(token) {
@@ -72,19 +69,19 @@ function createVars(prefix = DEFAULT_VAR_PREFIX, theme, breakpoints) {
 				return [variable, reference];
 			}
 			function valueToVar(value) {
-				return transformInterpolation(value, (value$1, fallbackValue) => {
-					if (value$1.includes("colors.") || value$1.includes("colorScheme.")) {
-						if (isColorScheme(value$1)) return getColorSchemeVar(system)(value$1);
-						return colorMix(value$1, {
+				return transformInterpolation(value, (value, fallbackValue) => {
+					if (value.includes("colors.") || value.includes("colorScheme.")) {
+						if (isColorScheme(value)) return getColorSchemeVar(system)(value);
+						return colorMix(value, {
 							fallback: fallbackValue,
 							system
 						});
-					} else if (tokens[value$1] ?? prevTokens?.[value$1]) return tokenToVar(value$1).reference;
-					else if (value$1 in cssMap && cssMap[value$1]?.ref) return cssMap[value$1].ref;
+					} else if (tokens[value] ?? prevTokens?.[value]) return tokenToVar(value).reference;
+					else if (value in cssMap && cssMap[value]?.ref) return cssMap[value].ref;
 					else if (fallbackValue) {
 						fallbackValue = fallbackValue in cssMap && cssMap[fallbackValue]?.ref ? cssMap[fallbackValue]?.ref : fallbackValue;
-						return `var(--${prefix}-${value$1}, ${fallbackValue})`;
-					} else return `var(--${prefix}-${value$1})`;
+						return `var(--${prefix}-${value}, ${fallbackValue})`;
+					} else return `var(--${prefix}-${value})`;
 				});
 			}
 			function createNegativeVar(token, reference) {
@@ -96,7 +93,7 @@ function createVars(prefix = DEFAULT_VAR_PREFIX, theme, breakpoints) {
 				};
 			}
 			function createAnimationVar(value) {
-				if ((0, utils_exports.isArray)(value)) return value.map((value$1) => animation(value$1, options)).join(",");
+				if ((0, utils_exports.isArray)(value)) return value.map((value) => animation(value, options)).join(",");
 				else return animation(value, options);
 			}
 			function createGradientVar(token, value) {
@@ -139,12 +136,12 @@ function createVars(prefix = DEFAULT_VAR_PREFIX, theme, breakpoints) {
 						const [lightValue, darkValue] = value;
 						createVar(token, lightValue, variable)(semantic, queries);
 						createVar(token, darkValue, variable)(semantic, [...queries, conditions._dark]);
-					} else if (isResponsive(value, true)) Object.entries(value).forEach(([key, value$1]) => {
-						if (key === "base") createVar(token, value$1, variable)(semantic, queries);
+					} else if (isResponsive(value, true)) Object.entries(value).forEach(([key, value]) => {
+						if (key === "base") createVar(token, value, variable)(semantic, queries);
 						else {
 							const query = getQuery(key);
 							if (!query) return;
-							createVar(token, value$1, variable)(semantic, [...queries, query]);
+							createVar(token, value, variable)(semantic, [...queries, query]);
 						}
 					});
 					else {
@@ -208,13 +205,13 @@ function mergeVars(...fns) {
 }
 function varAttr(value, token, fallbackValue) {
 	if ((0, utils_exports.isUndefined)(value) || (0, utils_exports.isNull)(value) || isCSSFunction(value)) return value;
-	if ((0, utils_exports.isObject)(value) || (0, utils_exports.isArray)(value)) return (0, utils_exports.replaceObject)(value, (value$1) => varAttr(value$1, token, fallbackValue));
+	if ((0, utils_exports.isObject)(value) || (0, utils_exports.isArray)(value)) return (0, utils_exports.replaceObject)(value, (value) => varAttr(value, token, fallbackValue));
 	else return token ? `{${token}.${value}, ${fallbackValue ?? value}}` : value;
 }
 function injectVars(objOrArray, targets, isInvalidProp) {
 	if (!objOrArray) return objOrArray;
-	function callback(objOrArray$1) {
-		return Object.fromEntries(Object.entries(objOrArray$1).flatMap(function([prop, value]) {
+	function callback(objOrArray) {
+		return Object.fromEntries(Object.entries(objOrArray).flatMap(function([prop, value]) {
 			if (isInvalidProp?.(prop)) return [[prop, value]];
 			const target = targets[prop];
 			const result = [];
@@ -230,7 +227,7 @@ function injectVars(objOrArray, targets, isInvalidProp) {
 	if ((0, utils_exports.isArray)(objOrArray)) return objOrArray.map(callback);
 	else return callback(objOrArray);
 }
-
 //#endregion
 export { createVars, getColorSchemeVar, getVar, getVarName, injectVars, isColorScheme, mergeVars, transformInterpolation, varAttr };
+
 //# sourceMappingURL=var.js.map