@yamada-ui/react 2.2.4 → 2.2.5-dev-20260716054036

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

@@ -1,12 +1,19 @@
 "use client";
+const require_environment_provider = require("./environment-provider.cjs");
 const require_create_system = require("./create-system.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/core/system/system-provider.tsx
 const SystemContext = (0, react.createContext)(require_create_system.defaultSystem);
 const SystemProvider = ({ children, config, theme = {} }) => {
+	const { getRootNode } = require_environment_provider.useEnvironment();
+	const rootNode = getRootNode();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SystemContext, {
-		value: (0, react.useMemo)(() => require_create_system.createSystem(theme, config), [theme, config]),
+		value: (0, react.useMemo)(() => require_create_system.createSystem(theme, config, rootNode), [
+			theme,
+			config,
+			rootNode
+		]),
 		children
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"system-provider.cjs","names":["defaultSystem","createSystem"],"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,iBAAA,GAAA,MAAA,cAAA,CAA6CA,sBAAAA,aAAa;AAahE,MAAa,kBAA2C,EACtD,UACA,QACA,QAAQ,CAAC,QACL;CAGJ,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;EAAe,QAAA,GAAA,MAAA,QAAA,OAFOC,sBAAAA,aAAa,OAAO,MAAM,GAAG,CAAC,OAAO,MAAM,CAEtC;EAAI;CAAwB,CAAA;AAChE;AAEA,MAAa,kBAAkB;CAG7B,QAAA,GAAA,MAAA,IAAA,CAFmB,aAEP;AACd"}
+{"version":3,"file":"system-provider.cjs","names":["defaultSystem","useEnvironment","createSystem"],"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\"\nimport { useEnvironment } from \"./environment-provider\"\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 { getRootNode } = useEnvironment()\n  const rootNode = getRootNode()\n  const system = useMemo(\n    () => createSystem(theme, config, rootNode),\n    [theme, config, rootNode],\n  )\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":";;;;;;AAUA,MAAM,iBAAA,GAAA,MAAA,cAAA,CAA6CA,sBAAAA,aAAa;AAahE,MAAa,kBAA2C,EACtD,UACA,QACA,QAAQ,CAAC,QACL;CACJ,MAAM,EAAE,gBAAgBC,6BAAAA,eAAe;CACvC,MAAM,WAAW,YAAY;CAM7B,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;EAAe,QAAA,GAAA,MAAA,QAAA,OAJdC,sBAAAA,aAAa,OAAO,QAAQ,QAAQ,GAC1C;GAAC;GAAO;GAAQ;EAAQ,CAGQ;EAAI;CAAwB,CAAA;AAChE;AAEA,MAAa,kBAAkB;CAG7B,QAAA,GAAA,MAAA,IAAA,CAFmB,aAEP;AACd"}

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

@@ -10,20 +10,24 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@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 win = environment.getWindow();
+	const doc = environment.getDocument();
+	const root = environment.getRootElement();
+	const rootNode = environment.getRootNode();
+	if (!win || !doc || !root) return;
 	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}`);
+	const shadowRoot = (0, require_utils_index.utils_exports.isShadowRoot)(rootNode);
+	const selector = shadowRoot ? ":host, *" : "*";
+	const container = shadowRoot ? rootNode : doc.head;
+	const node = doc.createTextNode(`${selector}{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`);
 	css.appendChild(node);
-	doc.head.appendChild(css);
+	container.appendChild(css);
 	return () => {
-		const forceReflow = () => win.getComputedStyle(doc.body);
+		const forceReflow = () => win.getComputedStyle(root);
 		forceReflow();
 		requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				doc.head.removeChild(css);
+				container.removeChild(css);
 			});
 		});
 	};
@@ -39,10 +43,9 @@ const ThemeProvider = ({ children, config, cookie, storage = cookie ? "cookie" :
 	const environment = require_environment_provider.useEnvironment();
 	const [themeScheme, setThemeScheme] = (0, react.useState)(storageManager.get());
 	const changeThemeScheme = (0, react.useCallback)((themeScheme) => {
-		const { getDocument } = environment;
-		const doc = getDocument();
+		const root = environment.getRootElement();
 		const cleanup = disableTransitionOnChange ? getPreventTransition(environment) : void 0;
-		if (doc) doc.documentElement.dataset.theme = themeScheme;
+		if (root) root.dataset.theme = themeScheme;
 		cleanup?.();
 		setThemeScheme(themeScheme);
 		storageManager.set(themeScheme);
@@ -80,7 +83,7 @@ const GlobalStyles = () => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.Global, { styles: [
 		atRule,
 		wrap("tokens", (0, react.useMemo)(() => {
-			return { ":host, :root, [data-mode]": system.cssVars };
+			return { [system.config.css?.varRoot ?? ":host, :root, [data-mode]"]: system.cssVars };
 		}, [system])),
 		wrap("reset", resetStyle),
 		wrap("global", globalStyle)

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

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.cjs","names":["THEME_SCHEME_STORAGE_KEY","createStorageManager","useEnvironment","EmotionThemeProvider","useSystem","css","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":"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"}
+{"version":3,"file":"theme-provider.cjs","names":["THEME_SCHEME_STORAGE_KEY","createStorageManager","useEnvironment","EmotionThemeProvider","useSystem","css","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 {\n  isEmptyObject,\n  isObject,\n  isShadowRoot,\n  isUndefined,\n  merge,\n} 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 win = environment.getWindow()\n  const doc = environment.getDocument()\n  const root = environment.getRootElement()\n  const rootNode = environment.getRootNode()\n\n  if (!win || !doc || !root) return\n\n  const css = doc.createElement(\"style\")\n  const shadowRoot = isShadowRoot(rootNode)\n  const selector = shadowRoot ? \":host, *\" : \"*\"\n  const container = shadowRoot ? rootNode : doc.head\n\n  const node = doc.createTextNode(\n    `${selector}{-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  container.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(root)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        container.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 root = environment.getRootElement()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (root) root.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 {\n      [system.config.css?.varRoot ?? \":host, :root, [data-mode]\"]:\n        system.cssVars,\n    }\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/cjs/core/system/var.cjs

@@ -39,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, require_utils_index.utils_exports.isString)(token) && token.startsWith("colorScheme.") && !token.includes("/");
-function createVars(prefix = "ui", theme, breakpoints) {
+function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 	return function(tokens) {
 		const { getQuery, isResponsive } = breakpoints;
 		function tokenToVar(token) {
@@ -54,7 +54,8 @@ function createVars(prefix = "ui", theme, breakpoints) {
 		return function(cssMap = {}, cssVars = {}, prevTokens) {
 			const system = {
 				...require_create_system.defaultSystem,
-				cssMap
+				cssMap,
+				rootNode
 			};
 			const options = {
 				css: require_css.css,
@@ -107,10 +108,10 @@ function createVars(prefix = "ui", theme, breakpoints) {
 			}
 			function createKeyframesVar(token, value) {
 				return function(semantic) {
-					if (!semantic) return require_animation.injectKeyframes(require_css.css(system, theme)(value));
+					if (!semantic) return require_animation.injectKeyframes(require_css.css(system, theme)(value), rootNode);
 					else {
 						const [variable, reference] = getRelatedReference(token, value);
-						return variable ? reference : require_animation.injectKeyframes(require_css.css(system, theme)(value));
+						return variable ? reference : require_animation.injectKeyframes(require_css.css(system, theme)(value), rootNode);
 					}
 				};
 			}

package/dist/cjs/core/system/var.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"var.cjs","names":["defaultSystem","colorMix","animation","gradient","injectKeyframes","css","conditions","isCSSFunction","getStyle","isCSSVar","isInterpolation"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  CSSMap,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  isArray,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  conditions,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n) {\n  return function (tokens: VariableTokens) {\n    const { getQuery, isResponsive } = breakpoints\n\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: Dict = {},\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: Dict } {\n      const system: System = { ...defaultSystem, cssMap }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value))\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value))\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (semantic: boolean, queries: string[] = []) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            const [lightValue, darkValue] = value\n\n            createVar(token, lightValue, variable)(semantic, queries)\n            createVar(\n              token,\n              darkValue,\n              variable,\n            )(semantic, [...queries, conditions._dark])\n          } else if (isResponsive(value, true)) {\n            Object.entries(value).forEach(([key, value]) => {\n              if (key === \"base\") {\n                createVar(token, value, variable)(semantic, queries)\n              } else {\n                const query = getQuery(key)\n\n                if (!query) return\n\n                createVar(token, value, variable)(semantic, [...queries, query])\n              }\n            })\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const resolvedCssVars = queries.reduceRight<Dict>(\n              (prev, key) => ({ [key]: prev }),\n              resolvedValue,\n            )\n\n            cssVars = merge(cssVars, resolvedCssVars)\n          }\n        }\n      }\n\n      for (let [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: Dict = {}\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":";;;;;;;;;;AA6CA,SAAgB,uBACd,OACA,UACA;CACA,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAChB,OAAO,MAAM,QAAQ,eAAe,GAAG,UAAU;EAC/C,MAAM,CAAC,OAAO,iBAAiB,MAAM,MAAM,OAAO;EAElD,OAAO,SAAS,MAAM,KAAK,GAAG,eAAe,KAAK,CAAC;CACrD,CAAC;MACE,OAAO;AACd;AAEA,SAAgB,OAAO,OAAe,UAAmB;CACvD,IAAI,CAAC,MAAM,WAAW,IAAI,GAAG,QAAQ,KAAK;CAE1C,QAAQ,MAAM,QAAQ,mBAAmB,EAAE;CAE3C,OAAO,WAAW,OAAO,MAAM,IAAI,SAAS,KAAK,OAAO,MAAM;AAChE;AAEA,SAAgB,WAAW,QAAgB;CACzC,OAAO,SAAU,OAAe;EAG9B,OAAO,KAFQ,OAAO,OAAO,KAAK,aAAA,KAEf,GAAG;CACxB;AACF;AAEA,SAAgB,kBAAkB,QAAgB;CAChD,OAAO,SAAU,OAAY,UAAmB;EAC9C,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,KAAK,GAAG,OAAO;EAE7B,MAAM,SAAS,OAAO,OAAO,KAAK,aAAA;EAElC,MAAM,GAAG,SAAS,MAAM,MAAM,GAAG;EAEjC,OAAO,OAAO,GAAG,OAAO,eAAe,SAAS,QAAQ;CAC1D;AACF;AAEA,MAAM,cAAc,UAAkB,MAAM,WAAW,YAAY;AACnE,MAAM,eAAe,UAAkB,MAAM,WAAW,YAAY;AACpE,MAAM,eAAe,UAAkB,MAAM,WAAW,aAAa;AACrE,MAAM,WAAW,UAAkB,MAAM,WAAW,SAAS;AAC7D,MAAM,WAAW,UAAkB,MAAM,WAAW,SAAS;AAC7D,MAAa,iBAAiB,WAAA,GAAA,oBAAA,cAAA,SAAA,CACnB,KAAK,KAAK,MAAM,WAAW,cAAc,KAAK,CAAC,MAAM,SAAS,GAAG;AAE5E,SAAgB,WACd,SAAA,MACA,OACA,aACA;CACA,OAAO,SAAU,QAAwB;EACvC,MAAM,EAAE,UAAU,iBAAiB;EAEnC,SAAS,WAAW,OAAyB;GAC3C,QAAQ,MAAM,QAAQ,OAAO,GAAG;GAChC,QAAQ,MAAM,QAAQ,OAAO,KAAK;GAElC,MAAM,WAAW,KAAK,CAAC,SAAA,GAAA,oBAAA,cAAA,OAAA,CAAe,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAG3E,OAAO;IAAE,WAAA,OAFgB,SAAS;IAEd;GAAS;EAC/B;EAEA,OAAO,SACL,SAAiB,CAAC,GAClB,UAAgB,CAAC,GACjB,YACmC;GACnC,MAAM,SAAiB;IAAE,GAAGA,sBAAAA;IAAe;GAAO;GAClD,MAAM,UAAU;IAAE,KAAA,YAAA;IAAK;IAAQ;GAAM;GAErC,SAAS,oBACP,OACA,QAAqB,IAC2B;IAChD,MAAM,eAAe,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,GAAG;IAE1D,IAAI,UAAU,cAAc,OAAO,CAAC,KAAA,GAAW,KAAK;IAIpD,IAAI,EAFgB,OAAO,iBAAiB,aAAa,gBAEvC,OAAO,CAAC,KAAA,GAAW,KAAK;IAE1C,MAAM,EAAE,WAAW,aAAa,WAAW,YAAY;IAEvD,OAAO,CAAC,UAAU,SAAS;GAC7B;GAEA,SAAS,WAAW,OAAY;IAC9B,OAAO,uBAAuB,QAAQ,OAAO,kBAAkB;KAC7D,IAAI,MAAM,SAAS,SAAS,KAAK,MAAM,SAAS,cAAc,GAAG;MAC/D,IAAI,cAAc,KAAK,GAAG,OAAO,kBAAkB,MAAM,CAAC,CAAC,KAAK;MAEhE,OAAOC,kBAAAA,SAAS,OAAO;OAAE,UAAU;OAAe;MAAO,CAAC;KAC5D,OAGE,IAFc,OAAO,UAAU,aAAa,QAG1C,OAAO,WAAW,KAAK,CAAC,CAAC;UACpB,IAAI,SAAS,UAAU,OAAO,MAAM,EAAE,KAC3C,OAAO,OAAO,MAAM,CAAC;UAChB,IAAI,eAAe;MACxB,gBACE,iBAAiB,UAAU,OAAO,cAAc,EAAE,MAC9C,OAAO,cAAc,EAAE,MACvB;MAEN,OAAO,SAAS,OAAO,GAAG,MAAM,IAAI,cAAc;KACpD,OACE,OAAO,SAAS,OAAO,GAAG,MAAM;IAGtC,CAAC;GACH;GAEA,SAAS,kBAAkB,OAAe,WAAmB;IAE3D,MAAM,CAAC,OAAO,GAAG,QADH,MAAM,MAAM,GACG;IAE7B,MAAM,gBAAgB,GAAG,MAAM,IAAI,KAAK,KAAK,GAAG;IAIhD,OAAO;KAAE,mBAAA,oBAAA,cAFiB,KAAK,OAAO,SAEb;KAAG;IAAc;GAC5C;GAEA,SAAS,mBAAmB,OAAsB;IAChD,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,GACf,OAAO,MAAM,KAAK,UAAUC,kBAAAA,UAAU,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG;SAC5D,OAAOA,kBAAAA,UAAU,OAAO,OAAO;GACtC;GAEA,SAAS,kBAAkB,OAAe,OAAyB;IACjE,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOC,iBAAAA,SAAS,OAAO,OAAO;UACzB;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WAAW,YAAYA,iBAAAA,SAAS,OAAO,OAAO;KACvD;IACF;GACF;GAEA,SAAS,mBAAmB,OAAe,OAAY;IACrD,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOC,kBAAAA,gBAAgBC,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK,CAAC;UAC3C;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WACH,YACAD,kBAAAA,gBAAgBC,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK,CAAC;KAC/C;IACF;GACF;GAEA,SAAS,eACP,OACA,YACA,OACA;IACA,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOJ,kBAAAA,SAAS,OAAO;MAAE,GAAG;MAAS;KAAW,CAAC;UAC5C;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WACH,YACAA,kBAAAA,SAAS,OAAO;OAAE,GAAG;OAAS;MAAW,CAAC;KAChD;IACF;GACF;GAEA,SAAS,UACP,OACA,OACA,UACA;IACA,OAAO,SAAU,UAAmB,UAAoB,CAAC,GAAG;KAC1D,IAAI,YAAY,KAAK,GAAG,QAAQ,mBAAmB,KAAK;KAExD,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,GAAG;MAClB,MAAM,CAAC,YAAY,aAAa;MAEhC,UAAU,OAAO,YAAY,QAAQ,CAAC,CAAC,UAAU,OAAO;MACxD,UACE,OACA,WACA,QACF,CAAC,CAAC,UAAU,CAAC,GAAG,SAASK,mBAAAA,WAAW,KAAK,CAAC;KAC5C,OAAO,IAAI,aAAa,OAAO,IAAI,GACjC,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;MAC9C,IAAI,QAAQ,QACV,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,UAAU,OAAO;WAC9C;OACL,MAAM,QAAQ,SAAS,GAAG;OAE1B,IAAI,CAAC,OAAO;OAEZ,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,KAAK,CAAC;MACjE;KACF,CAAC;UACI;MACL,MAAM,gBAAkC,WAAW,KAAK;MAExD,IAAI,gBAAyC;MAE7C,IAAI,YAAY,KAAK,GACnB,gBAAgB,mBAAmB,OAAO,aAAa,CAAC,CAAC,QAAQ;WAC5D,IAAI,WAAW,KAAK,GACzB,gBAAgB,kBAAkB,OAAO,aAAa,CAAC,CAAC,QAAQ;WAC3D,IAAI,QAAQ,KAAK,GACtB,gBAAgB,eACd,OACA,CAAC,QAAQ,GACT,aACF,CAAC,CAAC,QAAQ;WACL,IAAI,UAAU;OACnB,MAAM,GAAG,aAAa,oBAAoB,OAAO,aAAa;OAE9D,gBAAgB;MAClB;MAEA,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,aAAa,GACzB,gBAAgB,GAAG,WAAW,cAAc;MAE9C,MAAM,kBAAkB,QAAQ,aAC7B,MAAM,SAAS,GAAG,MAAM,KAAK,IAC9B,aACF;MAEA,WAAA,GAAA,oBAAA,cAAA,MAAA,CAAgB,SAAS,eAAe;KAC1C;IACF;GACF;GAEA,KAAK,IAAI,CAAC,OAAO,EAAE,UAAU,YAAY,OAAO,QAAQ,MAAM,GAAG;IAC/D,MAAM,EAAE,WAAW,aAAa,WAAW,KAAK;IAEhD,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,QAAQ;IAE1C,IAAI,QAAQ,KAAK,GAAG;KAClB,MAAM,EAAE,mBAAmB,kBAAkB,kBAC3C,OACA,SACF;KAEA,OAAO,iBAAiB;MAAE,KAAK;MAAmB,KAAK;KAAS;IAClE;IAEA,OAAO,SAAS;KAAE,KAAK;KAAW,KAAK;IAAS;GAClD;GAEA,OAAO;IAAE;IAAQ;GAAQ;EAC3B;CACF;AACF;AAIA,SAAgB,UAAU,GAAG,KAAmB;CAC9C,OAAO,SAAU,YAA6B;EAC5C,IAAI,SAAiB,CAAC;EACtB,IAAI,UAAgB,CAAC;EAErB,KAAK,MAAM,MAAM,KAAK;GACpB,MAAM,SAAS,GAAG,QAAQ,SAAS,UAAU;GAE7C,SAAS;IAAE,GAAG;IAAQ,GAAG,OAAO;GAAO;GACvC,UAAU;IAAE,GAAG;IAAS,GAAG,OAAO;GAAQ;EAC5C;EAEA,OAAO;GAAE;GAAQ;EAAQ;CAC3B;AACF;AAEA,SAAgB,QACd,OACA,OACA,eACe;CACf,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,KAAK,MAAA,GAAA,oBAAA,cAAA,OAAA,CAAY,KAAK,KAAKC,cAAAA,cAAc,KAAK,GAAG,OAAO;CAExE,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,MAAA,GAAA,oBAAA,cAAA,QAAA,CAAa,KAAK,GAClC,QAAA,GAAA,oBAAA,cAAA,cAAA,CAAqB,QAAQ,UAAU,QAAQ,OAAO,OAAO,aAAa,CAAC;MAE3E,OAAO,QACF,IAAI,MAAM,GAAG,MAAyB,IAAI,iBAAkB,MAA0B,KACvF;AACR;AAEA,SAAgB,WACd,YACA,SACA,eACG;CACH,IAAI,CAAC,YAAY,OAAO;CAExB,SAAS,SAAS,YAAkB;EAClC,OAAO,OAAO,YACZ,OAAO,QAAQ,UAAU,CAAC,CAAC,QAAQ,SAAU,CAAC,MAAM,QAAQ;GAC1D,IAAI,gBAAgB,IAAI,GAAG,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC;GAEhD,MAAM,SAAS,QAAQ;GACvB,MAAM,SAA0B,CAAC;GAEjC,IAAI,QAAQ;IACV,MAAM,EAAE,UAAUC,YAAAA,SAAS,IAAI,KAAK,CAAC;IAErC,IAAIC,cAAAA,SAAS,KAAK,KAAKC,cAAAA,gBAAgB,KAAK,GAC1C,OAAO,KAAK,CAAC,KAAK,UAAU,KAAK,CAAC;SAElC,OAAO,KAAK,CACV,KAAK,WAAA,GAAA,oBAAA,cAAA,cAAA,CACS,QAAQ,UACpB,QAAQ,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK,KAC5C,CACF,CAAC;GACL,OAAO,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GACvB,OAAO,KAAK,CAAC,MAAM,WAAW,OAAO,OAAO,CAAC,CAAC;QAE9C,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;GAG3B,OAAO;EACT,CAAC,CACH;CACF;CAEA,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,UAAU,GAAG,OAAO,WAAW,IAAI,QAAQ;MAClD,OAAO,SAAS,UAAU;AACjC"}
+{"version":3,"file":"var.cjs","names":["defaultSystem","colorMix","animation","gradient","injectKeyframes","css","conditions","isCSSFunction","getStyle","isCSSVar","isInterpolation"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  CSSMap,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  isArray,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  conditions,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n  rootNode?: System[\"rootNode\"],\n) {\n  return function (tokens: VariableTokens) {\n    const { getQuery, isResponsive } = breakpoints\n\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: Dict = {},\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: Dict } {\n      const system: System = { ...defaultSystem, cssMap, rootNode }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value), rootNode)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value), rootNode)\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (semantic: boolean, queries: string[] = []) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            const [lightValue, darkValue] = value\n\n            createVar(token, lightValue, variable)(semantic, queries)\n            createVar(\n              token,\n              darkValue,\n              variable,\n            )(semantic, [...queries, conditions._dark])\n          } else if (isResponsive(value, true)) {\n            Object.entries(value).forEach(([key, value]) => {\n              if (key === \"base\") {\n                createVar(token, value, variable)(semantic, queries)\n              } else {\n                const query = getQuery(key)\n\n                if (!query) return\n\n                createVar(token, value, variable)(semantic, [...queries, query])\n              }\n            })\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const resolvedCssVars = queries.reduceRight<Dict>(\n              (prev, key) => ({ [key]: prev }),\n              resolvedValue,\n            )\n\n            cssVars = merge(cssVars, resolvedCssVars)\n          }\n        }\n      }\n\n      for (let [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: Dict = {}\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":"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"}

package/dist/cjs/theme/styles/global-style.cjs

@@ -9,7 +9,7 @@ const globalStyle = require("../../core/system/config.cjs").defineStyles.globalS
 		overflowWrap: "break-word"
 	},
 	"*::placeholder, *[data-placeholder]": { color: "fg.subtle" },
-	body: {
+	":host, body": {
 		colorScheme: "mono",
 		bg: "bg",
 		color: "fg",

package/dist/cjs/theme/styles/global-style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"global-style.cjs","names":["defineStyles"],"sources":["../../../../src/theme/styles/global-style.ts"],"sourcesContent":["import { defineStyles } from \"../../core\"\n\nexport const globalStyle = defineStyles.globalStyle({\n  \"*, *::before, *::after\": {\n    borderColor: \"border\",\n    borderStyle: \"solid\",\n    borderWidth: \"0\",\n    focusVisibleRing: \"outline\",\n    fontFeatureSettings: '\"cv11\"',\n    overflowWrap: \"break-word\",\n  },\n  \"*::placeholder, *[data-placeholder]\": {\n    color: \"fg.subtle\",\n  },\n  body: {\n    colorScheme: \"mono\",\n    bg: \"bg\",\n    color: \"fg\",\n    fontFamily: \"body\",\n    lineHeight: \"moderate\",\n    overflowX: \"hidden\",\n    transitionDuration: \"moderate\",\n    transitionProperty: \"background-color\",\n  },\n})\n"],"mappings":";AAEA,MAAa,oDAAcA,CAAAA,CAAAA,aAAa,YAAY;CAClD,0BAA0B;EACxB,aAAa;EACb,aAAa;EACb,aAAa;EACb,kBAAkB;EAClB,qBAAqB;EACrB,cAAc;CAChB;CACA,uCAAuC,EACrC,OAAO,YACT;CACA,MAAM;EACJ,aAAa;EACb,IAAI;EACJ,OAAO;EACP,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,oBAAoB;EACpB,oBAAoB;CACtB;AACF,CAAC"}
+{"version":3,"file":"global-style.cjs","names":["defineStyles"],"sources":["../../../../src/theme/styles/global-style.ts"],"sourcesContent":["import { defineStyles } from \"../../core\"\n\nexport const globalStyle = defineStyles.globalStyle({\n  \"*, *::before, *::after\": {\n    borderColor: \"border\",\n    borderStyle: \"solid\",\n    borderWidth: \"0\",\n    focusVisibleRing: \"outline\",\n    fontFeatureSettings: '\"cv11\"',\n    overflowWrap: \"break-word\",\n  },\n  \"*::placeholder, *[data-placeholder]\": {\n    color: \"fg.subtle\",\n  },\n  \":host, body\": {\n    colorScheme: \"mono\",\n    bg: \"bg\",\n    color: \"fg\",\n    fontFamily: \"body\",\n    lineHeight: \"moderate\",\n    overflowX: \"hidden\",\n    transitionDuration: \"moderate\",\n    transitionProperty: \"background-color\",\n  },\n})\n"],"mappings":";AAEA,MAAa,oDAAcA,CAAAA,CAAAA,aAAa,YAAY;CAClD,0BAA0B;EACxB,aAAa;EACb,aAAa;EACb,aAAa;EACb,kBAAkB;EAClB,qBAAqB;EACrB,cAAc;CAChB;CACA,uCAAuC,EACrC,OAAO,YACT;CACA,eAAe;EACb,aAAa;EACb,IAAI;EACJ,OAAO;EACP,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,oBAAoB;EACpB,oBAAoB;CACtB;AACF,CAAC"}

package/dist/cjs/theme/styles/reset-style.cjs

@@ -52,7 +52,7 @@ const resetStyle = require("../../core/system/config.cjs").defineStyles.resetSty
 		color: "inherit",
 		overflow: "visible"
 	},
-	html: {
+	":host, html": {
 		fontFamily: "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
 		lineHeight: 1.5,
 		WebkitTapHighlightColor: "transparent",
@@ -82,8 +82,8 @@ const resetStyle = require("../../core/system/config.cjs").defineStyles.resetSty
 	summary: { display: "list-item" },
 	sup: { top: "-0.5em" },
 	"ul, ol": { listStyle: "none" },
-	"@media (prefers-reduced-motion: no-preference)": { ":where(html:focus-within)": { scrollBehavior: "smooth" } },
-	":where(html:has(dialog:modal[open]))": { overflow: "clip" },
+	"@media (prefers-reduced-motion: no-preference)": { ":host(:focus-within), :where(html:focus-within)": { scrollBehavior: "smooth" } },
+	":host(:has(dialog:modal[open])), :where(html:has(dialog:modal[open]))": { overflow: "clip" },
 	":where(dialog, [popover])": {
 		background: "none",
 		border: "none",

package/dist/cjs/theme/styles/reset-style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"reset-style.cjs","names":["defineStyles"],"sources":["../../../../src/theme/styles/reset-style.ts"],"sourcesContent":["import { defineStyles } from \"../../core\"\n\nexport const resetStyle = defineStyles.resetStyle({\n  \"*, *::before, *::after\": {\n    boxSizing: \"border-box\",\n    margin: 0,\n    padding: 0,\n  },\n\n  \"::-webkit-file-upload-button\": {\n    font: \"inherit\",\n    WebkitAppearance: \"button\",\n  },\n\n  \"::-webkit-search-cancel-button, ::-webkit-search-decoration\": {\n    WebkitAppearance: \"none\",\n  },\n\n  \"[contenteditable]\": {\n    outline: \"none\",\n  },\n\n  \"[hidden]:where(:not([hidden='until-found']))\": {\n    display: \"none !important\",\n  },\n\n  \"[type='time']::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  \"::-webkit-details-marker\": {\n    display: \"none\",\n  },\n\n  a: {\n    color: \"inherit\",\n    textDecoration: \"none\",\n  },\n\n  \"abbr[title]\": {\n    textDecoration: \"underline dotted\",\n  },\n\n  \"b, strong\": {\n    fontWeight: \"bolder\",\n  },\n\n  \"button, input, optgroup, select, textarea\": {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    border: 0,\n    borderRadius: 0,\n    color: \"inherit\",\n    font: \"inherit\",\n    fontFeatureSettings: \"inherit\",\n    fontVariationSettings: \"inherit\",\n    letterSpacing: \"inherit\",\n    outline: 0,\n    WebkitAppearance: \"none\",\n  },\n\n  \"code, kbd, samp, pre\": {\n    fontFamily: \"inherit\",\n    fontSize: \"1em\",\n  },\n\n  fieldset: {\n    border: 0,\n    minWidth: 0,\n  },\n\n  \"h1, h2, h3, h4, h5, h6\": {\n    fontSize: \"inherit\",\n    fontWeight: \"inherit\",\n  },\n\n  hr: {\n    blockSize: 0,\n    border: \"none\",\n    borderBlockStart: \"1px solid\",\n    color: \"inherit\",\n    overflow: \"visible\",\n  },\n\n  html: {\n    fontFamily:\n      \"system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'\",\n    lineHeight: 1.5,\n    WebkitTapHighlightColor: \"transparent\",\n    WebkitTextSizeAdjust: \"100%\",\n  },\n\n  \"img, svg, video, canvas, audio, iframe, embed, object\": {\n    display: \"block\",\n  },\n\n  \"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button\":\n    {\n      display: \"none\",\n    },\n\n  \"input[type='search']\": {\n    outlineOffset: \"-2px\",\n  },\n\n  legend: {\n    display: \"table\",\n    float: \"left\",\n    width: \"100%\",\n  },\n\n  mark: {\n    backgroundColor: \"inherit\",\n    color: \"inherit\",\n  },\n\n  progress: {\n    verticalAlign: \"baseline\",\n  },\n\n  small: {\n    fontSize: \"80%\",\n  },\n\n  sub: {\n    bottom: \"-0.25em\",\n  },\n\n  \"sub, sup\": {\n    fontSize: \"75%\",\n    lineHeight: 0,\n    position: \"relative\",\n    verticalAlign: \"baseline\",\n  },\n\n  summary: {\n    display: \"list-item\",\n  },\n\n  sup: {\n    top: \"-0.5em\",\n  },\n\n  \"ul, ol\": {\n    listStyle: \"none\",\n  },\n\n  \"@media (prefers-reduced-motion: no-preference)\": {\n    \":where(html:focus-within)\": {\n      scrollBehavior: \"smooth\",\n    },\n  },\n\n  \":where(html:has(dialog:modal[open]))\": {\n    overflow: \"clip\",\n  },\n\n  \":where(dialog, [popover])\": {\n    background: \"none\",\n    border: \"none\",\n    color: \"inherit\",\n    inset: \"unset\",\n    maxHeight: \"unset\",\n    maxWidth: \"unset\",\n    overflow: \"unset\",\n  },\n\n  \":where(dialog:not([open], [popover]), [popover]:not(:popover-open))\": {\n    display: \"none !important\",\n  },\n})\n"],"mappings":";AAEA,MAAa,mDAAaA,CAAAA,CAAAA,aAAa,WAAW;CAChD,0BAA0B;EACxB,WAAW;EACX,QAAQ;EACR,SAAS;CACX;CAEA,gCAAgC;EAC9B,MAAM;EACN,kBAAkB;CACpB;CAEA,+DAA+D,EAC7D,kBAAkB,OACpB;CAEA,qBAAqB,EACnB,SAAS,OACX;CAEA,gDAAgD,EAC9C,SAAS,kBACX;CAEA,oDAAoD,EAClD,SAAS,OACX;CAEA,4BAA4B,EAC1B,SAAS,OACX;CAEA,GAAG;EACD,OAAO;EACP,gBAAgB;CAClB;CAEA,eAAe,EACb,gBAAgB,mBAClB;CAEA,aAAa,EACX,YAAY,SACd;CAEA,6CAA6C;EAC3C,YAAY;EACZ,iBAAiB;EACjB,QAAQ;EACR,cAAc;EACd,OAAO;EACP,MAAM;EACN,qBAAqB;EACrB,uBAAuB;EACvB,eAAe;EACf,SAAS;EACT,kBAAkB;CACpB;CAEA,wBAAwB;EACtB,YAAY;EACZ,UAAU;CACZ;CAEA,UAAU;EACR,QAAQ;EACR,UAAU;CACZ;CAEA,0BAA0B;EACxB,UAAU;EACV,YAAY;CACd;CAEA,IAAI;EACF,WAAW;EACX,QAAQ;EACR,kBAAkB;EAClB,OAAO;EACP,UAAU;CACZ;CAEA,MAAM;EACJ,YACE;EACF,YAAY;EACZ,yBAAyB;EACzB,sBAAsB;CACxB;CAEA,yDAAyD,EACvD,SAAS,QACX;CAEA,oGACE,EACE,SAAS,OACX;CAEF,wBAAwB,EACtB,eAAe,OACjB;CAEA,QAAQ;EACN,SAAS;EACT,OAAO;EACP,OAAO;CACT;CAEA,MAAM;EACJ,iBAAiB;EACjB,OAAO;CACT;CAEA,UAAU,EACR,eAAe,WACjB;CAEA,OAAO,EACL,UAAU,MACZ;CAEA,KAAK,EACH,QAAQ,UACV;CAEA,YAAY;EACV,UAAU;EACV,YAAY;EACZ,UAAU;EACV,eAAe;CACjB;CAEA,SAAS,EACP,SAAS,YACX;CAEA,KAAK,EACH,KAAK,SACP;CAEA,UAAU,EACR,WAAW,OACb;CAEA,kDAAkD,EAChD,6BAA6B,EAC3B,gBAAgB,SAClB,EACF;CAEA,wCAAwC,EACtC,UAAU,OACZ;CAEA,6BAA6B;EAC3B,YAAY;EACZ,QAAQ;EACR,OAAO;EACP,OAAO;EACP,WAAW;EACX,UAAU;EACV,UAAU;CACZ;CAEA,uEAAuE,EACrE,SAAS,kBACX;AACF,CAAC"}
+{"version":3,"file":"reset-style.cjs","names":["defineStyles"],"sources":["../../../../src/theme/styles/reset-style.ts"],"sourcesContent":["import { defineStyles } from \"../../core\"\n\nexport const resetStyle = defineStyles.resetStyle({\n  \"*, *::before, *::after\": {\n    boxSizing: \"border-box\",\n    margin: 0,\n    padding: 0,\n  },\n\n  \"::-webkit-file-upload-button\": {\n    font: \"inherit\",\n    WebkitAppearance: \"button\",\n  },\n\n  \"::-webkit-search-cancel-button, ::-webkit-search-decoration\": {\n    WebkitAppearance: \"none\",\n  },\n\n  \"[contenteditable]\": {\n    outline: \"none\",\n  },\n\n  \"[hidden]:where(:not([hidden='until-found']))\": {\n    display: \"none !important\",\n  },\n\n  \"[type='time']::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  \"::-webkit-details-marker\": {\n    display: \"none\",\n  },\n\n  a: {\n    color: \"inherit\",\n    textDecoration: \"none\",\n  },\n\n  \"abbr[title]\": {\n    textDecoration: \"underline dotted\",\n  },\n\n  \"b, strong\": {\n    fontWeight: \"bolder\",\n  },\n\n  \"button, input, optgroup, select, textarea\": {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    border: 0,\n    borderRadius: 0,\n    color: \"inherit\",\n    font: \"inherit\",\n    fontFeatureSettings: \"inherit\",\n    fontVariationSettings: \"inherit\",\n    letterSpacing: \"inherit\",\n    outline: 0,\n    WebkitAppearance: \"none\",\n  },\n\n  \"code, kbd, samp, pre\": {\n    fontFamily: \"inherit\",\n    fontSize: \"1em\",\n  },\n\n  fieldset: {\n    border: 0,\n    minWidth: 0,\n  },\n\n  \"h1, h2, h3, h4, h5, h6\": {\n    fontSize: \"inherit\",\n    fontWeight: \"inherit\",\n  },\n\n  hr: {\n    blockSize: 0,\n    border: \"none\",\n    borderBlockStart: \"1px solid\",\n    color: \"inherit\",\n    overflow: \"visible\",\n  },\n\n  \":host, html\": {\n    fontFamily:\n      \"system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'\",\n    lineHeight: 1.5,\n    WebkitTapHighlightColor: \"transparent\",\n    WebkitTextSizeAdjust: \"100%\",\n  },\n\n  \"img, svg, video, canvas, audio, iframe, embed, object\": {\n    display: \"block\",\n  },\n\n  \"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button\":\n    {\n      display: \"none\",\n    },\n\n  \"input[type='search']\": {\n    outlineOffset: \"-2px\",\n  },\n\n  legend: {\n    display: \"table\",\n    float: \"left\",\n    width: \"100%\",\n  },\n\n  mark: {\n    backgroundColor: \"inherit\",\n    color: \"inherit\",\n  },\n\n  progress: {\n    verticalAlign: \"baseline\",\n  },\n\n  small: {\n    fontSize: \"80%\",\n  },\n\n  sub: {\n    bottom: \"-0.25em\",\n  },\n\n  \"sub, sup\": {\n    fontSize: \"75%\",\n    lineHeight: 0,\n    position: \"relative\",\n    verticalAlign: \"baseline\",\n  },\n\n  summary: {\n    display: \"list-item\",\n  },\n\n  sup: {\n    top: \"-0.5em\",\n  },\n\n  \"ul, ol\": {\n    listStyle: \"none\",\n  },\n\n  \"@media (prefers-reduced-motion: no-preference)\": {\n    \":host(:focus-within), :where(html:focus-within)\": {\n      scrollBehavior: \"smooth\",\n    },\n  },\n\n  \":host(:has(dialog:modal[open])), :where(html:has(dialog:modal[open]))\": {\n    overflow: \"clip\",\n  },\n\n  \":where(dialog, [popover])\": {\n    background: \"none\",\n    border: \"none\",\n    color: \"inherit\",\n    inset: \"unset\",\n    maxHeight: \"unset\",\n    maxWidth: \"unset\",\n    overflow: \"unset\",\n  },\n\n  \":where(dialog:not([open], [popover]), [popover]:not(:popover-open))\": {\n    display: \"none !important\",\n  },\n})\n"],"mappings":";AAEA,MAAa,mDAAaA,CAAAA,CAAAA,aAAa,WAAW;CAChD,0BAA0B;EACxB,WAAW;EACX,QAAQ;EACR,SAAS;CACX;CAEA,gCAAgC;EAC9B,MAAM;EACN,kBAAkB;CACpB;CAEA,+DAA+D,EAC7D,kBAAkB,OACpB;CAEA,qBAAqB,EACnB,SAAS,OACX;CAEA,gDAAgD,EAC9C,SAAS,kBACX;CAEA,oDAAoD,EAClD,SAAS,OACX;CAEA,4BAA4B,EAC1B,SAAS,OACX;CAEA,GAAG;EACD,OAAO;EACP,gBAAgB;CAClB;CAEA,eAAe,EACb,gBAAgB,mBAClB;CAEA,aAAa,EACX,YAAY,SACd;CAEA,6CAA6C;EAC3C,YAAY;EACZ,iBAAiB;EACjB,QAAQ;EACR,cAAc;EACd,OAAO;EACP,MAAM;EACN,qBAAqB;EACrB,uBAAuB;EACvB,eAAe;EACf,SAAS;EACT,kBAAkB;CACpB;CAEA,wBAAwB;EACtB,YAAY;EACZ,UAAU;CACZ;CAEA,UAAU;EACR,QAAQ;EACR,UAAU;CACZ;CAEA,0BAA0B;EACxB,UAAU;EACV,YAAY;CACd;CAEA,IAAI;EACF,WAAW;EACX,QAAQ;EACR,kBAAkB;EAClB,OAAO;EACP,UAAU;CACZ;CAEA,eAAe;EACb,YACE;EACF,YAAY;EACZ,yBAAyB;EACzB,sBAAsB;CACxB;CAEA,yDAAyD,EACvD,SAAS,QACX;CAEA,oGACE,EACE,SAAS,OACX;CAEF,wBAAwB,EACtB,eAAe,OACjB;CAEA,QAAQ;EACN,SAAS;EACT,OAAO;EACP,OAAO;CACT;CAEA,MAAM;EACJ,iBAAiB;EACjB,OAAO;CACT;CAEA,UAAU,EACR,eAAe,WACjB;CAEA,OAAO,EACL,UAAU,MACZ;CAEA,KAAK,EACH,QAAQ,UACV;CAEA,YAAY;EACV,UAAU;EACV,YAAY;EACZ,UAAU;EACV,eAAe;CACjB;CAEA,SAAS,EACP,SAAS,YACX;CAEA,KAAK,EACH,KAAK,SACP;CAEA,UAAU,EACR,WAAW,OACb;CAEA,kDAAkD,EAChD,mDAAmD,EACjD,gBAAgB,SAClB,EACF;CAEA,yEAAyE,EACvE,UAAU,OACZ;CAEA,6BAA6B;EAC3B,YAAY;EACZ,QAAQ;EACR,OAAO;EACP,OAAO;EACP,WAAW;EACX,UAAU;EACV,UAAU;CACZ;CAEA,uEAAuE,EACrE,SAAS,kBACX;AACF,CAAC"}

package/dist/esm/components/textarea/use-autosize.js

@@ -61,7 +61,9 @@ const calcRows = (el, sizingStyle, value, maxRows, minRows) => {
 	Object.assign(cloneEl.style, sizingStyle.style);
 	setHiddenStyle(cloneEl);
 	cloneEl.value = value;
-	document.body.appendChild(cloneEl);
+	const rootNode = el.getRootNode();
+	const container = (0, utils_exports.isShadowRoot)(rootNode) ? rootNode : el.ownerDocument.body;
+	container.appendChild(cloneEl);
 	let rows;
 	if (cloneEl.scrollHeight) {
 		const rowHeight = sizingStyle.rowHeight;
@@ -70,7 +72,7 @@ const calcRows = (el, sizingStyle, value, maxRows, minRows) => {
 		const lineBreaks = (value.match(/\n/g) || []).length;
 		rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1));
 	}
-	document.body.removeChild(cloneEl);
+	container.removeChild(cloneEl);
 	return rows;
 };
 const useAutosize = ({ disabled = false, maxRows = Infinity, minRows = 2 } = {}) => {

package/dist/esm/components/textarea/use-autosize.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-autosize.js","names":["noop"],"sources":["../../../../src/components/textarea/use-autosize.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  addDomEvent,\n  createdDom,\n  handlerAll,\n  mergeRefs,\n  noop,\n  pickObject,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst SIZING_STYLE_PROPERTIES = [\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"borderRightWidth\",\n  \"borderTopWidth\",\n  \"boxSizing\",\n  \"fontFamily\",\n  \"fontSize\",\n  \"fontStyle\",\n  \"fontWeight\",\n  \"letterSpacing\",\n  \"lineHeight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n  // non-standard\n  \"tabSize\",\n  \"textIndent\",\n  // non-standard\n  \"textRendering\",\n  \"textTransform\",\n  \"width\",\n  \"wordBreak\",\n] as const\n\nconst HIDDEN_STYLE = {\n  height: \"0\",\n  \"max-height\": \"none\",\n  \"min-height\": \"0\",\n  overflow: \"hidden\",\n  position: \"absolute\",\n  right: \"0\",\n  top: \"0\",\n  visibility: \"hidden\",\n  \"z-index\": \"-1000\",\n} as const\n\ntype SizingProperties = Extract<\n  (typeof SIZING_STYLE_PROPERTIES)[number],\n  keyof CSSStyleDeclaration\n>\n\ninterface SizingStyle {\n  border: number\n  padding: number\n  rowHeight: number\n  style: Pick<CSSStyleDeclaration, SizingProperties>\n}\n\nconst getSizingStyle = (el: HTMLElement): null | SizingStyle => {\n  const style = window.getComputedStyle(el) as CSSStyleDeclaration | undefined\n\n  if (style == null) return null\n\n  const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES)\n\n  if (computedStyle.boxSizing === \"\") return null\n\n  const padding =\n    parseFloat(computedStyle.paddingBottom) +\n    parseFloat(computedStyle.paddingTop)\n\n  const border =\n    parseFloat(computedStyle.borderBottomWidth) +\n    parseFloat(computedStyle.borderTopWidth)\n\n  const rowHeight = parseFloat(computedStyle.lineHeight)\n\n  return {\n    style: computedStyle,\n    border,\n    padding,\n    rowHeight,\n  }\n}\n\nconst setHiddenStyle = (el: HTMLElement) => {\n  Object.keys(HIDDEN_STYLE).forEach((key) => {\n    el.style.setProperty(\n      key,\n      HIDDEN_STYLE[key as keyof typeof HIDDEN_STYLE],\n      \"important\",\n    )\n  })\n}\n\nconst calcRows = (\n  el: HTMLTextAreaElement,\n  sizingStyle: SizingStyle,\n  value: string,\n  maxRows: number,\n  minRows: number,\n) => {\n  const cloneEl = el.cloneNode() as HTMLTextAreaElement\n\n  Object.assign(cloneEl.style, sizingStyle.style)\n\n  setHiddenStyle(cloneEl)\n\n  cloneEl.value = value\n\n  document.body.appendChild(cloneEl)\n\n  let rows: number\n\n  if (cloneEl.scrollHeight) {\n    const rowHeight = sizingStyle.rowHeight\n\n    rows = Math.min(\n      maxRows,\n      Math.max(minRows, Math.floor(cloneEl.scrollHeight / rowHeight)),\n    )\n  } else {\n    const lineBreaks = (value.match(/\\n/g) || []).length\n\n    rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1))\n  }\n\n  document.body.removeChild(cloneEl)\n\n  return rows\n}\n\nexport interface UseAutosizeProps {\n  /**\n   * If `true`, the Textarea height will not be adjusted.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Autosize up to maxRows rows.\n   *\n   * @default Infinity\n   */\n  maxRows?: number\n  /**\n   * Autosize up to minRows rows.\n   *\n   * @default 2\n   */\n  minRows?: number\n}\n\nexport const useAutosize = ({\n  disabled = false,\n  maxRows = Infinity,\n  minRows = 2,\n}: UseAutosizeProps = {}) => {\n  const ref = useRef<HTMLTextAreaElement>(null)\n  const beforeValueRef = useRef<string>(null)\n  const value = ref.current?.value ?? \"\"\n\n  const onResizeTextarea = useCallback(() => {\n    const el = ref.current\n\n    if (!el) return\n\n    let { placeholder, value } = el\n\n    if (value === beforeValueRef.current) return\n\n    beforeValueRef.current = value\n\n    value ||= placeholder || \"x\"\n\n    const sizingStyle = getSizingStyle(el)\n\n    if (!sizingStyle) return\n\n    const rows = calcRows(el, sizingStyle, value, maxRows, minRows)\n\n    el.rows = rows\n  }, [ref, maxRows, minRows])\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      style: { resize: !disabled ? \"none\" : undefined, ...props.style },\n      onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop),\n    }),\n    [ref, onResizeTextarea, disabled],\n  )\n\n  useSafeLayoutEffect(() => {\n    if (!createdDom() || disabled) return\n\n    onResizeTextarea()\n\n    const unsubscribeResize = addDomEvent(window, \"resize\", onResizeTextarea)\n    const unsubscribeLoadingdone = addDomEvent(\n      document.fonts,\n      \"loadingdone\",\n      onResizeTextarea,\n    )\n\n    return () => {\n      unsubscribeResize()\n      unsubscribeLoadingdone()\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    if (disabled) return\n\n    onResizeTextarea()\n  }, [value])\n\n  return { ref, getTextareaProps, onResizeTextarea }\n}\n\nexport type UseAutosizeReturn = ReturnType<typeof useAutosize>\n"],"mappings":"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"}
+{"version":3,"file":"use-autosize.js","names":["noop"],"sources":["../../../../src/components/textarea/use-autosize.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  addDomEvent,\n  createdDom,\n  handlerAll,\n  isShadowRoot,\n  mergeRefs,\n  noop,\n  pickObject,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst SIZING_STYLE_PROPERTIES = [\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"borderRightWidth\",\n  \"borderTopWidth\",\n  \"boxSizing\",\n  \"fontFamily\",\n  \"fontSize\",\n  \"fontStyle\",\n  \"fontWeight\",\n  \"letterSpacing\",\n  \"lineHeight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n  // non-standard\n  \"tabSize\",\n  \"textIndent\",\n  // non-standard\n  \"textRendering\",\n  \"textTransform\",\n  \"width\",\n  \"wordBreak\",\n] as const\n\nconst HIDDEN_STYLE = {\n  height: \"0\",\n  \"max-height\": \"none\",\n  \"min-height\": \"0\",\n  overflow: \"hidden\",\n  position: \"absolute\",\n  right: \"0\",\n  top: \"0\",\n  visibility: \"hidden\",\n  \"z-index\": \"-1000\",\n} as const\n\ntype SizingProperties = Extract<\n  (typeof SIZING_STYLE_PROPERTIES)[number],\n  keyof CSSStyleDeclaration\n>\n\ninterface SizingStyle {\n  border: number\n  padding: number\n  rowHeight: number\n  style: Pick<CSSStyleDeclaration, SizingProperties>\n}\n\nconst getSizingStyle = (el: HTMLElement): null | SizingStyle => {\n  const style = window.getComputedStyle(el) as CSSStyleDeclaration | undefined\n\n  if (style == null) return null\n\n  const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES)\n\n  if (computedStyle.boxSizing === \"\") return null\n\n  const padding =\n    parseFloat(computedStyle.paddingBottom) +\n    parseFloat(computedStyle.paddingTop)\n\n  const border =\n    parseFloat(computedStyle.borderBottomWidth) +\n    parseFloat(computedStyle.borderTopWidth)\n\n  const rowHeight = parseFloat(computedStyle.lineHeight)\n\n  return {\n    style: computedStyle,\n    border,\n    padding,\n    rowHeight,\n  }\n}\n\nconst setHiddenStyle = (el: HTMLElement) => {\n  Object.keys(HIDDEN_STYLE).forEach((key) => {\n    el.style.setProperty(\n      key,\n      HIDDEN_STYLE[key as keyof typeof HIDDEN_STYLE],\n      \"important\",\n    )\n  })\n}\n\nconst calcRows = (\n  el: HTMLTextAreaElement,\n  sizingStyle: SizingStyle,\n  value: string,\n  maxRows: number,\n  minRows: number,\n) => {\n  const cloneEl = el.cloneNode() as HTMLTextAreaElement\n\n  Object.assign(cloneEl.style, sizingStyle.style)\n\n  setHiddenStyle(cloneEl)\n\n  cloneEl.value = value\n\n  const rootNode = el.getRootNode()\n  const container = isShadowRoot(rootNode) ? rootNode : el.ownerDocument.body\n\n  container.appendChild(cloneEl)\n\n  let rows: number\n\n  if (cloneEl.scrollHeight) {\n    const rowHeight = sizingStyle.rowHeight\n\n    rows = Math.min(\n      maxRows,\n      Math.max(minRows, Math.floor(cloneEl.scrollHeight / rowHeight)),\n    )\n  } else {\n    const lineBreaks = (value.match(/\\n/g) || []).length\n\n    rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1))\n  }\n\n  container.removeChild(cloneEl)\n\n  return rows\n}\n\nexport interface UseAutosizeProps {\n  /**\n   * If `true`, the Textarea height will not be adjusted.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Autosize up to maxRows rows.\n   *\n   * @default Infinity\n   */\n  maxRows?: number\n  /**\n   * Autosize up to minRows rows.\n   *\n   * @default 2\n   */\n  minRows?: number\n}\n\nexport const useAutosize = ({\n  disabled = false,\n  maxRows = Infinity,\n  minRows = 2,\n}: UseAutosizeProps = {}) => {\n  const ref = useRef<HTMLTextAreaElement>(null)\n  const beforeValueRef = useRef<string>(null)\n  const value = ref.current?.value ?? \"\"\n\n  const onResizeTextarea = useCallback(() => {\n    const el = ref.current\n\n    if (!el) return\n\n    let { placeholder, value } = el\n\n    if (value === beforeValueRef.current) return\n\n    beforeValueRef.current = value\n\n    value ||= placeholder || \"x\"\n\n    const sizingStyle = getSizingStyle(el)\n\n    if (!sizingStyle) return\n\n    const rows = calcRows(el, sizingStyle, value, maxRows, minRows)\n\n    el.rows = rows\n  }, [ref, maxRows, minRows])\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      style: { resize: !disabled ? \"none\" : undefined, ...props.style },\n      onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop),\n    }),\n    [ref, onResizeTextarea, disabled],\n  )\n\n  useSafeLayoutEffect(() => {\n    if (!createdDom() || disabled) return\n\n    onResizeTextarea()\n\n    const unsubscribeResize = addDomEvent(window, \"resize\", onResizeTextarea)\n    const unsubscribeLoadingdone = addDomEvent(\n      document.fonts,\n      \"loadingdone\",\n      onResizeTextarea,\n    )\n\n    return () => {\n      unsubscribeResize()\n      unsubscribeLoadingdone()\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    if (disabled) return\n\n    onResizeTextarea()\n  }, [value])\n\n  return { ref, getTextareaProps, onResizeTextarea }\n}\n\nexport type UseAutosizeReturn = ReturnType<typeof useAutosize>\n"],"mappings":";;;;;;AAgBA,MAAM,0BAA0B;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF;AAEA,MAAM,eAAe;CACnB,QAAQ;CACR,cAAc;CACd,cAAc;CACd,UAAU;CACV,UAAU;CACV,OAAO;CACP,KAAK;CACL,YAAY;CACZ,WAAW;AACb;AAcA,MAAM,kBAAkB,OAAwC;CAC9D,MAAM,QAAQ,OAAO,iBAAiB,EAAE;CAExC,IAAI,SAAS,MAAM,OAAO;CAE1B,MAAM,iBAAA,GAAA,cAAA,WAAA,CAA2B,OAAO,uBAAuB;CAE/D,IAAI,cAAc,cAAc,IAAI,OAAO;CAE3C,MAAM,UACJ,WAAW,cAAc,aAAa,IACtC,WAAW,cAAc,UAAU;CAQrC,OAAO;EACL,OAAO;EACP,QAPA,WAAW,cAAc,iBAAiB,IAC1C,WAAW,cAAc,cAAc;EAOvC;EACA,WANgB,WAAW,cAAc,UAMjC;CACV;AACF;AAEA,MAAM,kBAAkB,OAAoB;CAC1C,OAAO,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;EACzC,GAAG,MAAM,YACP,KACA,aAAa,MACb,WACF;CACF,CAAC;AACH;AAEA,MAAM,YACJ,IACA,aACA,OACA,SACA,YACG;CACH,MAAM,UAAU,GAAG,UAAU;CAE7B,OAAO,OAAO,QAAQ,OAAO,YAAY,KAAK;CAE9C,eAAe,OAAO;CAEtB,QAAQ,QAAQ;CAEhB,MAAM,WAAW,GAAG,YAAY;CAChC,MAAM,aAAA,GAAA,cAAA,aAAA,CAAyB,QAAQ,IAAI,WAAW,GAAG,cAAc;CAEvE,UAAU,YAAY,OAAO;CAE7B,IAAI;CAEJ,IAAI,QAAQ,cAAc;EACxB,MAAM,YAAY,YAAY;EAE9B,OAAO,KAAK,IACV,SACA,KAAK,IAAI,SAAS,KAAK,MAAM,QAAQ,eAAe,SAAS,CAAC,CAChE;CACF,OAAO;EACL,MAAM,cAAc,MAAM,MAAM,KAAK,KAAK,CAAC,EAAA,CAAG;EAE9C,OAAO,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,aAAa,CAAC,CAAC;CAC5D;CAEA,UAAU,YAAY,OAAO;CAE7B,OAAO;AACT;AAuBA,MAAa,eAAe,EAC1B,WAAW,OACX,UAAU,UACV,UAAU,MACU,CAAC,MAAM;CAC3B,MAAM,MAAM,OAA4B,IAAI;CAC5C,MAAM,iBAAiB,OAAe,IAAI;CAC1C,MAAM,QAAQ,IAAI,SAAS,SAAS;CAEpC,MAAM,mBAAmB,kBAAkB;EACzC,MAAM,KAAK,IAAI;EAEf,IAAI,CAAC,IAAI;EAET,IAAI,EAAE,aAAa,UAAU;EAE7B,IAAI,UAAU,eAAe,SAAS;EAEtC,eAAe,UAAU;EAEzB,UAAU,eAAe;EAEzB,MAAM,cAAc,eAAe,EAAE;EAErC,IAAI,CAAC,aAAa;EAIlB,GAAG,OAFU,SAAS,IAAI,aAAa,OAAO,SAAS,OAE1C;CACf,GAAG;EAAC;EAAK;EAAS;CAAO,CAAC;CAE1B,MAAM,mBAA2C,aAC9C,QAAQ,CAAC,OAAO;EACf,GAAG;EACH,KAAK,UAAU,MAAM,KAAK,GAAG;EAC7B,OAAO;GAAE,QAAQ,CAAC,WAAW,SAAS,KAAA;GAAW,GAAG,MAAM;EAAM;EAChE,WAAA,GAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,CAAC,WAAW,mBAAmBA,cAAAA,IAAI;CAC1E,IACA;EAAC;EAAK;EAAkB;CAAQ,CAClC;CAEA,0BAA0B;EACxB,IAAI,EAAA,GAAA,cAAA,WAAA,CAAY,KAAK,UAAU;EAE/B,iBAAiB;EAEjB,MAAM,qBAAA,GAAA,cAAA,YAAA,CAAgC,QAAQ,UAAU,gBAAgB;EACxE,MAAM,0BAAA,GAAA,cAAA,YAAA,CACJ,SAAS,OACT,eACA,gBACF;EAEA,aAAa;GACX,kBAAkB;GAClB,uBAAuB;EACzB;CACF,GAAG,CAAC,CAAC;CAEL,sBAAsB;EACpB,IAAI,UAAU;EAEd,iBAAiB;CACnB,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;EAAE;EAAK;EAAkB;CAAiB;AACnD"}

package/dist/esm/core/css/animation.js

@@ -4,10 +4,24 @@ import { globalValues, tokenToVar } from "./utils.js";
 import { keyframes } from "@emotion/react";
 import { StyleSheet } from "@emotion/sheet";
 //#region src/core/css/animation.ts
-const styleSheet = (0, utils_exports.createdDom)() ? new StyleSheet({
-	key: "css",
-	container: document.head
-}) : void 0;
+const styleSheets = /* @__PURE__ */ new WeakMap();
+const insertedKeyframes = /* @__PURE__ */ new WeakMap();
+const getStyleSheet = (rootNode) => {
+	if (!(0, utils_exports.createdDom)()) return;
+	const container = (0, utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, utils_exports.getDocument)(rootNode).head;
+	let styleSheet = styleSheets.get(container);
+	if (!styleSheet) {
+		styleSheet = new StyleSheet({
+			key: "css",
+			container
+		});
+		styleSheets.set(container, styleSheet);
+	}
+	return {
+		container,
+		styleSheet
+	};
+};
 function transformAnimationValue(value) {
 	return Object.entries(value).reduce((prev, [key, value]) => {
 		if (key === "keyframes") prev._keyframes = value;
@@ -17,9 +31,21 @@ function transformAnimationValue(value) {
 		return prev;
 	}, {});
 }
-function injectKeyframes(value) {
+function injectKeyframes(value, rootNode) {
 	const { name, styles } = keyframes(value);
-	styleSheet?.insert(styles);
+	const result = getStyleSheet(rootNode);
+	if (result) {
+		const { container, styleSheet } = result;
+		let names = insertedKeyframes.get(container);
+		if (!names) {
+			names = /* @__PURE__ */ new Set();
+			insertedKeyframes.set(container, names);
+		}
+		if (!names.has(name)) {
+			styleSheet.insert(styles);
+			names.add(name);
+		}
+	}
 	return name;
 }
 function animation(value, { css, system, theme }) {
@@ -43,7 +69,7 @@ function keyframes$1(value, { css, system, theme }) {
 	if (value == null) return value;
 	if ((0, utils_exports.isObject)(value)) {
 		value = css?.(system, theme)(value);
-		return injectKeyframes(value);
+		return injectKeyframes(value, system.rootNode);
 	} else return value;
 }
 //#endregion

package/dist/esm/core/css/animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation.js","names":["emotionKeyframes","keyframes"],"sources":["../../../../src/core/css/animation.ts"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type { TransformOptions } from \"./utils\"\nimport { keyframes as emotionKeyframes } from \"@emotion/react\"\nimport { StyleSheet } from \"@emotion/sheet\"\nimport { createdDom, isObject } from \"../../utils\"\nimport { globalValues, tokenToVar } from \"./utils\"\n\nconst styleSheet = createdDom()\n  ? new StyleSheet({ key: \"css\", container: document.head })\n  : undefined\n\nfunction transformAnimationValue(value: Dict) {\n  return Object.entries(value).reduce<Dict>((prev, [key, value]) => {\n    if (key === \"keyframes\") prev._keyframes = value\n    else if (key === \"duration\") prev.animationDuration = value\n    else if (key === \"timingFunction\") prev.animationTimingFunction = value\n    else prev[key] = value\n\n    return prev\n  }, {})\n}\n\nexport function injectKeyframes(value: any) {\n  const { name, styles } = emotionKeyframes(value)\n\n  styleSheet?.insert(styles)\n\n  return name\n}\n\nexport function animation(\n  value: any,\n  { css, system, theme }: TransformOptions,\n) {\n  if (value == null || globalValues.has(value)) return value\n\n  if (isObject(value)) {\n    const {\n      animationDuration = \"0s\",\n      animationName,\n      animationTimingFunction = \"ease\",\n      delay = \"0s\",\n      direction = \"normal\",\n      fillMode = \"none\",\n      iterationCount = \"1\",\n      playState = \"running\",\n    } = css?.(system, theme)(transformAnimationValue(value)) ?? {}\n\n    return `${animationName} ${animationDuration} ${animationTimingFunction} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`\n  } else if (value.includes(\",\")) {\n    value = value\n      .split(\",\")\n      .map((value: string) => {\n        value = value.trim()\n\n        value = tokenToVar(system)(\"animations\", value)\n\n        return value\n      })\n      .join(\",\")\n\n    return value\n  } else {\n    value = tokenToVar(system)(\"animations\", value)\n\n    return value\n  }\n}\n\nexport function keyframes(\n  value: any,\n  { css, system, theme }: TransformOptions,\n) {\n  if (value == null) return value\n\n  if (isObject(value)) {\n    value = css?.(system, theme)(value)\n\n    const name = injectKeyframes(value)\n\n    return name\n  } else {\n    return value\n  }\n}\n"],"mappings":";;;;;;AASA,MAAM,cAAA,GAAA,cAAA,WAAA,CAAwB,IAC1B,IAAI,WAAW;CAAE,KAAK;CAAO,WAAW,SAAS;AAAK,CAAC,IACvD,KAAA;AAEJ,SAAS,wBAAwB,OAAa;CAC5C,OAAO,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAc,MAAM,CAAC,KAAK,WAAW;EAChE,IAAI,QAAQ,aAAa,KAAK,aAAa;OACtC,IAAI,QAAQ,YAAY,KAAK,oBAAoB;OACjD,IAAI,QAAQ,kBAAkB,KAAK,0BAA0B;OAC7D,KAAK,OAAO;EAEjB,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,SAAgB,gBAAgB,OAAY;CAC1C,MAAM,EAAE,MAAM,WAAWA,UAAiB,KAAK;CAE/C,YAAY,OAAO,MAAM;CAEzB,OAAO;AACT;AAEA,SAAgB,UACd,OACA,EAAE,KAAK,QAAQ,SACf;CACA,IAAI,SAAS,QAAQ,aAAa,IAAI,KAAK,GAAG,OAAO;CAErD,KAAA,GAAA,cAAA,SAAA,CAAa,KAAK,GAAG;EACnB,MAAM,EACJ,oBAAoB,MACpB,eACA,0BAA0B,QAC1B,QAAQ,MACR,YAAY,UACZ,WAAW,QACX,iBAAiB,KACjB,YAAY,cACV,MAAM,QAAQ,KAAK,CAAC,CAAC,wBAAwB,KAAK,CAAC,KAAK,CAAC;EAE7D,OAAO,GAAG,cAAc,GAAG,kBAAkB,GAAG,wBAAwB,GAAG,MAAM,GAAG,eAAe,GAAG,UAAU,GAAG,SAAS,GAAG;CACjI,OAAO,IAAI,MAAM,SAAS,GAAG,GAAG;EAC9B,QAAQ,MACL,MAAM,GAAG,CAAC,CACV,KAAK,UAAkB;GACtB,QAAQ,MAAM,KAAK;GAEnB,QAAQ,WAAW,MAAM,CAAC,CAAC,cAAc,KAAK;GAE9C,OAAO;EACT,CAAC,CAAC,CACD,KAAK,GAAG;EAEX,OAAO;CACT,OAAO;EACL,QAAQ,WAAW,MAAM,CAAC,CAAC,cAAc,KAAK;EAE9C,OAAO;CACT;AACF;AAEA,SAAgBC,YACd,OACA,EAAE,KAAK,QAAQ,SACf;CACA,IAAI,SAAS,MAAM,OAAO;CAE1B,KAAA,GAAA,cAAA,SAAA,CAAa,KAAK,GAAG;EACnB,QAAQ,MAAM,QAAQ,KAAK,CAAC,CAAC,KAAK;EAIlC,OAFa,gBAAgB,KAEnB;CACZ,OACE,OAAO;AAEX"}
+{"version":3,"file":"animation.js","names":["emotionKeyframes","keyframes"],"sources":["../../../../src/core/css/animation.ts"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type { TransformOptions } from \"./utils\"\nimport { keyframes as emotionKeyframes } from \"@emotion/react\"\nimport { StyleSheet } from \"@emotion/sheet\"\nimport { createdDom, getDocument, isObject, isShadowRoot } from \"../../utils\"\nimport { globalValues, tokenToVar } from \"./utils\"\n\nconst styleSheets = new WeakMap<Node, StyleSheet>()\nconst insertedKeyframes = new WeakMap<Node, Set<string>>()\n\nconst getStyleSheet = (rootNode?: Document | Node | ShadowRoot) => {\n  if (!createdDom()) return\n\n  const container = isShadowRoot(rootNode)\n    ? rootNode\n    : getDocument(rootNode).head\n\n  let styleSheet = styleSheets.get(container)\n\n  if (!styleSheet) {\n    styleSheet = new StyleSheet({ key: \"css\", container })\n\n    styleSheets.set(container, styleSheet)\n  }\n\n  return { container, styleSheet }\n}\n\nfunction transformAnimationValue(value: Dict) {\n  return Object.entries(value).reduce<Dict>((prev, [key, value]) => {\n    if (key === \"keyframes\") prev._keyframes = value\n    else if (key === \"duration\") prev.animationDuration = value\n    else if (key === \"timingFunction\") prev.animationTimingFunction = value\n    else prev[key] = value\n\n    return prev\n  }, {})\n}\n\nexport function injectKeyframes(\n  value: any,\n  rootNode?: Document | Node | ShadowRoot,\n) {\n  const { name, styles } = emotionKeyframes(value)\n  const result = getStyleSheet(rootNode)\n\n  if (result) {\n    const { container, styleSheet } = result\n\n    let names = insertedKeyframes.get(container)\n\n    if (!names) {\n      names = new Set()\n\n      insertedKeyframes.set(container, names)\n    }\n\n    if (!names.has(name)) {\n      styleSheet.insert(styles)\n\n      names.add(name)\n    }\n  }\n\n  return name\n}\n\nexport function animation(\n  value: any,\n  { css, system, theme }: TransformOptions,\n) {\n  if (value == null || globalValues.has(value)) return value\n\n  if (isObject(value)) {\n    const {\n      animationDuration = \"0s\",\n      animationName,\n      animationTimingFunction = \"ease\",\n      delay = \"0s\",\n      direction = \"normal\",\n      fillMode = \"none\",\n      iterationCount = \"1\",\n      playState = \"running\",\n    } = css?.(system, theme)(transformAnimationValue(value)) ?? {}\n\n    return `${animationName} ${animationDuration} ${animationTimingFunction} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`\n  } else if (value.includes(\",\")) {\n    value = value\n      .split(\",\")\n      .map((value: string) => {\n        value = value.trim()\n\n        value = tokenToVar(system)(\"animations\", value)\n\n        return value\n      })\n      .join(\",\")\n\n    return value\n  } else {\n    value = tokenToVar(system)(\"animations\", value)\n\n    return value\n  }\n}\n\nexport function keyframes(\n  value: any,\n  { css, system, theme }: TransformOptions,\n) {\n  if (value == null) return value\n\n  if (isObject(value)) {\n    value = css?.(system, theme)(value)\n\n    const name = injectKeyframes(value, system.rootNode)\n\n    return name\n  } else {\n    return value\n  }\n}\n"],"mappings":";;;;;;AASA,MAAM,8BAAc,IAAI,QAA0B;AAClD,MAAM,oCAAoB,IAAI,QAA2B;AAEzD,MAAM,iBAAiB,aAA4C;CACjE,IAAI,EAAA,GAAA,cAAA,WAAA,CAAY,GAAG;CAEnB,MAAM,aAAA,GAAA,cAAA,aAAA,CAAyB,QAAQ,IACnC,YAAA,GAAA,cAAA,YAAA,CACY,QAAQ,CAAC,CAAC;CAE1B,IAAI,aAAa,YAAY,IAAI,SAAS;CAE1C,IAAI,CAAC,YAAY;EACf,aAAa,IAAI,WAAW;GAAE,KAAK;GAAO;EAAU,CAAC;EAErD,YAAY,IAAI,WAAW,UAAU;CACvC;CAEA,OAAO;EAAE;EAAW;CAAW;AACjC;AAEA,SAAS,wBAAwB,OAAa;CAC5C,OAAO,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAc,MAAM,CAAC,KAAK,WAAW;EAChE,IAAI,QAAQ,aAAa,KAAK,aAAa;OACtC,IAAI,QAAQ,YAAY,KAAK,oBAAoB;OACjD,IAAI,QAAQ,kBAAkB,KAAK,0BAA0B;OAC7D,KAAK,OAAO;EAEjB,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,SAAgB,gBACd,OACA,UACA;CACA,MAAM,EAAE,MAAM,WAAWA,UAAiB,KAAK;CAC/C,MAAM,SAAS,cAAc,QAAQ;CAErC,IAAI,QAAQ;EACV,MAAM,EAAE,WAAW,eAAe;EAElC,IAAI,QAAQ,kBAAkB,IAAI,SAAS;EAE3C,IAAI,CAAC,OAAO;GACV,wBAAQ,IAAI,IAAI;GAEhB,kBAAkB,IAAI,WAAW,KAAK;EACxC;EAEA,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG;GACpB,WAAW,OAAO,MAAM;GAExB,MAAM,IAAI,IAAI;EAChB;CACF;CAEA,OAAO;AACT;AAEA,SAAgB,UACd,OACA,EAAE,KAAK,QAAQ,SACf;CACA,IAAI,SAAS,QAAQ,aAAa,IAAI,KAAK,GAAG,OAAO;CAErD,KAAA,GAAA,cAAA,SAAA,CAAa,KAAK,GAAG;EACnB,MAAM,EACJ,oBAAoB,MACpB,eACA,0BAA0B,QAC1B,QAAQ,MACR,YAAY,UACZ,WAAW,QACX,iBAAiB,KACjB,YAAY,cACV,MAAM,QAAQ,KAAK,CAAC,CAAC,wBAAwB,KAAK,CAAC,KAAK,CAAC;EAE7D,OAAO,GAAG,cAAc,GAAG,kBAAkB,GAAG,wBAAwB,GAAG,MAAM,GAAG,eAAe,GAAG,UAAU,GAAG,SAAS,GAAG;CACjI,OAAO,IAAI,MAAM,SAAS,GAAG,GAAG;EAC9B,QAAQ,MACL,MAAM,GAAG,CAAC,CACV,KAAK,UAAkB;GACtB,QAAQ,MAAM,KAAK;GAEnB,QAAQ,WAAW,MAAM,CAAC,CAAC,cAAc,KAAK;GAE9C,OAAO;EACT,CAAC,CAAC,CACD,KAAK,GAAG;EAEX,OAAO;CACT,OAAO;EACL,QAAQ,WAAW,MAAM,CAAC,CAAC,cAAc,KAAK;EAE9C,OAAO;CACT;AACF;AAEA,SAAgBC,YACd,OACA,EAAE,KAAK,QAAQ,SACf;CACA,IAAI,SAAS,MAAM,OAAO;CAE1B,KAAA,GAAA,cAAA,SAAA,CAAa,KAAK,GAAG;EACnB,QAAQ,MAAM,QAAQ,KAAK,CAAC,CAAC,KAAK;EAIlC,OAFa,gBAAgB,OAAO,OAAO,QAEjC;CACZ,OACE,OAAO;AAEX"}

package/dist/esm/core/css/conditions.js

@@ -41,7 +41,7 @@ const attributes = {
 	/**
 	* Styles for when `data-mode` is applied to any parent of this component or element.
 	*/
-	_dark: ".dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]",
+	_dark: ":host([data-mode=dark]) &, .dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]",
 	/**
 	* The CSS `&:is([data-end], [data-group-end])` attribute selector.
 	*/
@@ -85,7 +85,7 @@ const attributes = {
 	/**
 	* Styles for when `data-mode` is applied to any parent of this component or element.
 	*/
-	_light: ".light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]",
+	_light: ":host([data-mode=light]) &, .light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]",
 	/**
 	* The CSS `&[data-loaded]` attribute selector.
 	*/