@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/styles/classNames.d.mts

@@ -1,8 +1,7 @@
 //#region src/styles/classNames.d.ts
-declare const CLASSNAMES: {
+export declare const CLASSNAMES: {
   ContextTrigger: string;
   DropdownMenuTrigger: string;
 };
 //#endregion
-export { CLASSNAMES };
 //# sourceMappingURL=classNames.d.mts.map

package/es/styles/createGlobalStyle.d.mts

@@ -0,0 +1,10 @@
+import { LobeTheme } from "./theme/scope.mjs";
+import { CSSInterpolation } from "@emotion/serialize";
+//#region src/styles/createGlobalStyle.d.ts
+type GlobalStyleProps = {
+  theme: LobeTheme;
+};
+type GlobalInterpolation = CSSInterpolation | ((props: GlobalStyleProps) => CSSInterpolation);
+export declare const createGlobalStyle: (template: TemplateStringsArray | ((props: GlobalStyleProps) => CSSInterpolation), ...args: GlobalInterpolation[]) => () => null;
+//#endregion
+//# sourceMappingURL=createGlobalStyle.d.mts.map

package/es/styles/createGlobalStyle.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { useTheme } from "./theme/scope.mjs";
+import { css, injectGlobal } from "./css.mjs";
+import { useMemo } from "react";
+//#region src/styles/createGlobalStyle.ts
+const createGlobalStyle = (template, ...args) => {
+	const GlobalStyle = () => {
+		const theme = useTheme();
+		useMemo(() => {
+			const props = { theme };
+			const styles = typeof template === "function" ? template(props) : css(template, ...args.map((arg) => typeof arg === "function" ? arg(props) : arg));
+			injectGlobal(styles);
+		}, [theme]);
+		return null;
+	};
+	return GlobalStyle;
+};
+//#endregion
+export { createGlobalStyle };
+
+//# sourceMappingURL=createGlobalStyle.mjs.map

package/es/styles/createGlobalStyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGlobalStyle.mjs","names":[],"sources":["../../src/styles/createGlobalStyle.ts"],"sourcesContent":["'use client';\n\nimport type { CSSInterpolation } from '@emotion/serialize';\nimport { useMemo } from 'react';\n\nimport { css, injectGlobal } from './css';\nimport { type LobeTheme, useTheme } from './theme/scope';\n\ntype GlobalStyleProps = { theme: LobeTheme };\ntype GlobalInterpolation = CSSInterpolation | ((props: GlobalStyleProps) => CSSInterpolation);\n\nexport const createGlobalStyle = (\n  template: TemplateStringsArray | ((props: GlobalStyleProps) => CSSInterpolation),\n  ...args: GlobalInterpolation[]\n) => {\n  const GlobalStyle = () => {\n    const theme = useTheme();\n\n    useMemo(() => {\n      const props = { theme };\n      const styles =\n        typeof template === 'function'\n          ? template(props)\n          : css(template, ...args.map((arg) => (typeof arg === 'function' ? arg(props) : arg)));\n      injectGlobal(styles as TemplateStringsArray);\n    }, [theme]);\n\n    return null;\n  };\n\n  return GlobalStyle;\n};\n"],"mappings":";;;;;AAWA,MAAa,qBACX,UACA,GAAG,SACA;CACH,MAAM,oBAAoB;EACxB,MAAM,QAAQ,SAAS;EAEvB,cAAc;GACZ,MAAM,QAAQ,EAAE,MAAM;GACtB,MAAM,SACJ,OAAO,aAAa,aAChB,SAAS,KAAK,IACd,IAAI,UAAU,GAAG,KAAK,KAAK,QAAS,OAAO,QAAQ,aAAa,IAAI,KAAK,IAAI,GAAI,CAAC;GACxF,aAAa,MAA8B;EAC7C,GAAG,CAAC,KAAK,CAAC;EAEV,OAAO;CACT;CAEA,OAAO;AACT"}

package/es/styles/css.d.mts

@@ -0,0 +1,44 @@
+import { LobeToken } from "./theme/createLobeToken.mjs";
+import { CSSInterpolation, SerializedStyles } from "@emotion/serialize";
+//#region src/styles/css.d.ts
+export type LobeCssVar = Record<Exclude<keyof LobeToken, 'motionBase' | 'motionUnit'>, string>;
+export declare const cssVar: LobeCssVar;
+export declare const responsive: {
+  desktop: string;
+  laptop: string;
+  mobile: string;
+  tablet: string;
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  xxl: string;
+};
+export interface StaticStyleUtils {
+  css: (template: TemplateStringsArray, ...args: any[]) => string;
+  cssVar: LobeCssVar;
+  cx: (...classNames: any[]) => string;
+  responsive: typeof responsive;
+}
+export declare const css: (template: TemplateStringsArray | CSSInterpolation, ...args: CSSInterpolation[]) => SerializedStyles;
+export declare const cx: (...classNames: unknown[]) => string;
+export declare const injectGlobal: {
+  (template: TemplateStringsArray, ...args: Array<CSSInterpolation>): void;
+  (...args: Array<CSSInterpolation>): void;
+}, keyframes: {
+  (template: TemplateStringsArray, ...args: Array<CSSInterpolation>): string;
+  (...args: Array<CSSInterpolation>): string;
+};
+export declare const createStaticStyles: <T>(stylesFn: (utils: StaticStyleUtils) => T) => T;
+export interface StaticStyleExtract {
+  css: string;
+  ids: string[];
+  key: string;
+  tag: string;
+}
+export declare const extractStaticStyle: ((html?: string, _options?: Record<string, unknown>) => StaticStyleExtract[]) & {
+  cache: import("@emotion/css/create-instance").EmotionCache;
+};
+//#endregion
+//# sourceMappingURL=css.d.mts.map

package/es/styles/css.mjs

@@ -0,0 +1,71 @@
+import { createLobeToken } from "./theme/createLobeToken.mjs";
+import createEmotion from "@emotion/css/create-instance";
+import { serializeStyles } from "@emotion/serialize";
+//#region src/styles/css.ts
+const UNITLESS = /* @__PURE__ */ new Set([
+	"fontWeightStrong",
+	"lineHeight",
+	"lineHeightHeading1",
+	"lineHeightHeading2",
+	"lineHeightHeading3",
+	"lineHeightHeading4",
+	"lineHeightHeading5",
+	"lineHeightLG",
+	"lineHeightSM",
+	"opacityImage",
+	"opacityLoading",
+	"zIndexBase",
+	"zIndexPopupBase"
+]);
+const IGNORED = /* @__PURE__ */ new Set(["motionBase", "motionUnit"]);
+const toKebabCase = (str) => str.replaceAll(/([a-z])([A-Z])/g, "$1-$2").replaceAll(/([a-z])(\d)/g, "$1-$2").replaceAll(/(\d)([A-Z])/g, "$1-$2").replaceAll(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
+const toCssVarName = (key) => `--lobe-${toKebabCase(key)}`;
+const toCssVariables = (token) => Object.fromEntries(Object.entries(token).filter(([key]) => !IGNORED.has(key)).map(([key, value]) => [toCssVarName(key), typeof value === "number" && !UNITLESS.has(key) ? `${value}px` : String(value).replaceAll(/\s+/g, " ").trim()]));
+const cssVar = Object.fromEntries(Object.keys(createLobeToken({ appearance: "light" })).filter((key) => !IGNORED.has(key)).map((key) => [key, `var(${toCssVarName(key)})`]));
+const breakpoints = {
+	xs: "@media (max-width: 479.98px)",
+	sm: "@media (max-width: 575.98px)",
+	md: "@media (max-width: 767.98px)",
+	lg: "@media (max-width: 991.98px)",
+	xl: "@media (max-width: 1199.98px)",
+	xxl: "@media (min-width: 1200px)"
+};
+const responsive = {
+	...breakpoints,
+	desktop: breakpoints.xxl,
+	laptop: breakpoints.lg,
+	mobile: breakpoints.xs,
+	tablet: breakpoints.md
+};
+const emotion = createEmotion({
+	key: "acss",
+	speedy: false
+});
+const isSerialized = (value) => typeof value === "object" && value !== null && "name" in value && "styles" in value;
+const css = (template, ...args) => serializeStyles([template, ...args], emotion.cache.registered);
+const cx = (...classNames) => emotion.cx(...classNames.map((value) => isSerialized(value) ? emotion.css(value) : value));
+const { injectGlobal, keyframes } = emotion;
+const staticCss = (template, ...args) => emotion.css(template, ...args);
+const createStaticStyles = (stylesFn) => stylesFn({
+	css: staticCss,
+	cssVar,
+	cx,
+	responsive
+});
+const extractStaticStyle = Object.assign((html, _options) => {
+	const { inserted, key, registered } = emotion.cache;
+	const used = html ? new Set([...html.matchAll(new RegExp(`${key}-([\\w-]+)`, "g"))].map((match) => match[1])) : void 0;
+	const ids = Object.keys(inserted).filter((id) => typeof inserted[id] === "string" && (!used || used.has(id) || registered[`${key}-${id}`] === void 0));
+	const styles = ids.map((id) => inserted[id]).join("");
+	if (!styles) return [];
+	return [{
+		css: styles,
+		ids,
+		key,
+		tag: `<style data-emotion="${key} ${ids.join(" ")}">${styles}</style>`
+	}];
+}, { cache: emotion.cache });
+//#endregion
+export { createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive, toCssVarName, toCssVariables, toKebabCase };
+
+//# sourceMappingURL=css.mjs.map

package/es/styles/css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.mjs","names":[],"sources":["../../src/styles/css.ts"],"sourcesContent":["import createEmotion from '@emotion/css/create-instance';\nimport { type CSSInterpolation, type SerializedStyles, serializeStyles } from '@emotion/serialize';\n\nimport { createLobeToken, type LobeToken } from './theme/createLobeToken';\n\nconst UNITLESS = new Set([\n  'fontWeightStrong',\n  'lineHeight',\n  'lineHeightHeading1',\n  'lineHeightHeading2',\n  'lineHeightHeading3',\n  'lineHeightHeading4',\n  'lineHeightHeading5',\n  'lineHeightLG',\n  'lineHeightSM',\n  'opacityImage',\n  'opacityLoading',\n  'zIndexBase',\n  'zIndexPopupBase',\n]);\n\nconst IGNORED = new Set(['motionBase', 'motionUnit']);\n\nexport const toKebabCase = (str: string) =>\n  str\n    .replaceAll(/([a-z])([A-Z])/g, '$1-$2')\n    .replaceAll(/([a-z])(\\d)/g, '$1-$2')\n    .replaceAll(/(\\d)([A-Z])/g, '$1-$2')\n    .replaceAll(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')\n    .toLowerCase();\n\nexport const toCssVarName = (key: string) => `--lobe-${toKebabCase(key)}`;\n\nexport const toCssVariables = (token: Record<string, number | string>) =>\n  Object.fromEntries(\n    Object.entries(token)\n      .filter(([key]) => !IGNORED.has(key))\n      .map(([key, value]) => [\n        toCssVarName(key),\n        typeof value === 'number' && !UNITLESS.has(key)\n          ? `${value}px`\n          : String(value).replaceAll(/\\s+/g, ' ').trim(),\n      ]),\n  );\n\nexport type LobeCssVar = Record<Exclude<keyof LobeToken, 'motionBase' | 'motionUnit'>, string>;\n\nexport const cssVar = Object.fromEntries(\n  Object.keys(createLobeToken({ appearance: 'light' }))\n    .filter((key) => !IGNORED.has(key))\n    .map((key) => [key, `var(${toCssVarName(key)})`]),\n) as LobeCssVar;\n\nconst breakpoints = {\n  xs: '@media (max-width: 479.98px)',\n  sm: '@media (max-width: 575.98px)',\n  md: '@media (max-width: 767.98px)',\n  lg: '@media (max-width: 991.98px)',\n  xl: '@media (max-width: 1199.98px)',\n  xxl: '@media (min-width: 1200px)',\n};\n\nexport const responsive = {\n  ...breakpoints,\n  desktop: breakpoints.xxl,\n  laptop: breakpoints.lg,\n  mobile: breakpoints.xs,\n  tablet: breakpoints.md,\n};\n\nexport interface StaticStyleUtils {\n  css: (template: TemplateStringsArray, ...args: any[]) => string;\n  cssVar: LobeCssVar;\n  cx: (...classNames: any[]) => string;\n  responsive: typeof responsive;\n}\n\nconst emotion = createEmotion({ key: 'acss', speedy: false });\n\nconst isSerialized = (value: unknown): value is SerializedStyles =>\n  typeof value === 'object' && value !== null && 'name' in value && 'styles' in value;\n\nexport const css = (\n  template: TemplateStringsArray | CSSInterpolation,\n  ...args: CSSInterpolation[]\n): SerializedStyles =>\n  serializeStyles([template as CSSInterpolation, ...args], emotion.cache.registered);\n\nexport const cx = (...classNames: unknown[]): string =>\n  emotion.cx(\n    ...(classNames.map((value) => (isSerialized(value) ? emotion.css(value) : value)) as Parameters<\n      typeof emotion.cx\n    >),\n  );\n\nexport const { injectGlobal, keyframes } = emotion;\n\nconst staticCss: StaticStyleUtils['css'] = (template, ...args) => emotion.css(template, ...args);\n\nexport const createStaticStyles = <T>(stylesFn: (utils: StaticStyleUtils) => T): T =>\n  stylesFn({ css: staticCss, cssVar, cx, responsive });\n\nexport interface StaticStyleExtract {\n  css: string;\n  ids: string[];\n  key: string;\n  tag: string;\n}\n\n// emotion rehydrates `<style data-emotion=\"acss id…\">` from SSR into its cache on the client\nexport const extractStaticStyle = Object.assign(\n  (html?: string, _options?: Record<string, unknown>): StaticStyleExtract[] => {\n    const { inserted, key, registered } = emotion.cache;\n    const used = html\n      ? new Set([...html.matchAll(new RegExp(`${key}-([\\\\w-]+)`, 'g'))].map((match) => match[1]))\n      : undefined;\n    // Same rule as @emotion/server extractCritical: unregistered ids are globals/keyframes and always ship\n    const ids = Object.keys(inserted).filter(\n      (id) =>\n        typeof inserted[id] === 'string' &&\n        (!used || used.has(id) || registered[`${key}-${id}`] === undefined),\n    );\n    const styles = ids.map((id) => inserted[id]).join('');\n    if (!styles) return [];\n    return [\n      {\n        css: styles,\n        ids,\n        key,\n        tag: `<style data-emotion=\"${key} ${ids.join(' ')}\">${styles}</style>`,\n      },\n    ];\n  },\n  { cache: emotion.cache },\n);\n"],"mappings":";;;;AAKA,MAAM,2BAAW,IAAI,IAAI;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,0BAAU,IAAI,IAAI,CAAC,cAAc,YAAY,CAAC;AAEpD,MAAa,eAAe,QAC1B,IACG,WAAW,mBAAmB,OAAO,CAAC,CACtC,WAAW,gBAAgB,OAAO,CAAC,CACnC,WAAW,gBAAgB,OAAO,CAAC,CACnC,WAAW,yBAAyB,OAAO,CAAC,CAC5C,YAAY;AAEjB,MAAa,gBAAgB,QAAgB,UAAU,YAAY,GAAG;AAEtE,MAAa,kBAAkB,UAC7B,OAAO,YACL,OAAO,QAAQ,KAAK,CAAC,CAClB,QAAQ,CAAC,SAAS,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,CACpC,KAAK,CAAC,KAAK,WAAW,CACrB,aAAa,GAAG,GAChB,OAAO,UAAU,YAAY,CAAC,SAAS,IAAI,GAAG,IAC1C,GAAG,MAAM,MACT,OAAO,KAAK,CAAC,CAAC,WAAW,QAAQ,GAAG,CAAC,CAAC,KAAK,CACjD,CAAC,CACL;AAIF,MAAa,SAAS,OAAO,YAC3B,OAAO,KAAK,gBAAgB,EAAE,YAAY,QAAQ,CAAC,CAAC,CAAC,CAClD,QAAQ,QAAQ,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,CAClC,KAAK,QAAQ,CAAC,KAAK,OAAO,aAAa,GAAG,EAAE,EAAE,CAAC,CACpD;AAEA,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAEA,MAAa,aAAa;CACxB,GAAG;CACH,SAAS,YAAY;CACrB,QAAQ,YAAY;CACpB,QAAQ,YAAY;CACpB,QAAQ,YAAY;AACtB;AASA,MAAM,UAAU,cAAc;CAAE,KAAK;CAAQ,QAAQ;AAAM,CAAC;AAE5D,MAAM,gBAAgB,UACpB,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,SAAS,YAAY;AAEhF,MAAa,OACX,UACA,GAAG,SAEH,gBAAgB,CAAC,UAA8B,GAAG,IAAI,GAAG,QAAQ,MAAM,UAAU;AAEnF,MAAa,MAAM,GAAG,eACpB,QAAQ,GACN,GAAI,WAAW,KAAK,UAAW,aAAa,KAAK,IAAI,QAAQ,IAAI,KAAK,IAAI,KAAM,CAGlF;AAEF,MAAa,EAAE,cAAc,cAAc;AAE3C,MAAM,aAAsC,UAAU,GAAG,SAAS,QAAQ,IAAI,UAAU,GAAG,IAAI;AAE/F,MAAa,sBAAyB,aACpC,SAAS;CAAE,KAAK;CAAW;CAAQ;CAAI;AAAW,CAAC;AAUrD,MAAa,qBAAqB,OAAO,QACtC,MAAe,aAA6D;CAC3E,MAAM,EAAE,UAAU,KAAK,eAAe,QAAQ;CAC9C,MAAM,OAAO,OACT,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,OAAO,GAAG,IAAI,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,UAAU,MAAM,EAAE,CAAC,IACxF,KAAA;CAEJ,MAAM,MAAM,OAAO,KAAK,QAAQ,CAAC,CAAC,QAC/B,OACC,OAAO,SAAS,QAAQ,aACvB,CAAC,QAAQ,KAAK,IAAI,EAAE,KAAK,WAAW,GAAG,IAAI,GAAG,UAAU,KAAA,EAC7D;CACA,MAAM,SAAS,IAAI,KAAK,OAAO,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;CACpD,IAAI,CAAC,QAAQ,OAAO,CAAC;CACrB,OAAO,CACL;EACE,KAAK;EACL;EACA;EACA,KAAK,wBAAwB,IAAI,GAAG,IAAI,KAAK,GAAG,EAAE,IAAI,OAAO;CAC/D,CACF;AACF,GACA,EAAE,OAAO,QAAQ,MAAM,CACzB"}

package/es/styles/customTheme.d.mts

@@ -1,5 +1,5 @@
 //#region src/styles/customTheme.d.ts
-declare const primaryColors: {
+export declare const primaryColors: {
   blue: string;
   cyan: string;
   geekblue: string;
@@ -13,20 +13,19 @@ declare const primaryColors: {
   volcano: string;
   yellow: string;
 };
-type PrimaryColorsObj = typeof primaryColors;
-type PrimaryColors = keyof PrimaryColorsObj;
-declare const primaryColorsSwatches: string[];
-declare const neutralColors: {
+export type PrimaryColorsObj = typeof primaryColors;
+export type PrimaryColors = keyof PrimaryColorsObj;
+export declare const primaryColorsSwatches: string[];
+export declare const neutralColors: {
   mauve: string;
   olive: string;
   sage: string;
   sand: string;
   slate: string;
 };
-declare const neutralColorsSwatches: string[];
-type NeutralColorsObj = typeof neutralColors;
-type NeutralColors = keyof NeutralColorsObj;
-declare const findCustomThemeName: (type: "primary" | "neutral", value: string) => string | undefined;
+export declare const neutralColorsSwatches: string[];
+export type NeutralColorsObj = typeof neutralColors;
+export type NeutralColors = keyof NeutralColorsObj;
+export declare const findCustomThemeName: (type: "primary" | "neutral", value: string) => string | undefined;
 //#endregion
-export { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches };
 //# sourceMappingURL=customTheme.d.mts.map

package/es/styles/index.d.mts

@@ -1,6 +1,9 @@
 import { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
-import { generateCustomStylish } from "./theme/customStylish.mjs";
+import { CreateLobeTokenParams, LobeToken, createLobeToken } from "./theme/createLobeToken.mjs";
+import { LobeAppearance, LobeTheme, LobeThemeScript, LobeThemeScriptProps, LobeThemeState, ResponsiveState, ThemeScope, ThemeScopeProps, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./theme/scope.mjs";
+import { createGlobalStyle } from "./createGlobalStyle.mjs";
+import { LobeCssVar, StaticStyleExtract, StaticStyleUtils, createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./css.mjs";
 import { staticStylish } from "./theme/customStylishStatic.mjs";
-import { generateCustomToken } from "./theme/customToken.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
-export { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches };
+import { getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
+export { type CreateLobeTokenParams, type LobeAppearance, type LobeCssVar, type LobeTheme, LobeThemeScript, type LobeThemeScriptProps, type LobeThemeState, type LobeToken, NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, type ResponsiveState, type StaticStyleExtract, type StaticStyleUtils, ThemeScope, type ThemeScopeProps, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getGlobalCss, getThemeCss, injectGlobal, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };

package/es/styles/index.mjs

@@ -1,6 +1,9 @@
+import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
+import { createLobeToken } from "./theme/createLobeToken.mjs";
+import { LobeThemeScript, ThemeScope, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./theme/scope.mjs";
+import { createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./css.mjs";
+import { createGlobalStyle } from "./createGlobalStyle.mjs";
 import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
-import { generateCustomStylish } from "./theme/customStylish.mjs";
 import { staticStylish } from "./theme/customStylishStatic.mjs";
-import { generateCustomToken } from "./theme/customToken.mjs";
-import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
-export { findCustomThemeName, generateColorNeutralPalette, generateColorPalette, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches };
+import { getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
+export { LobeThemeScript, ThemeScope, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getGlobalCss, getThemeCss, injectGlobal, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };