@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/color/ColorScales/style.mjs

@@ -1,43 +1,35 @@
-import { createStaticStyles } from "antd-style";
 //#region src/color/ColorScales/style.ts
 const alphaBg = {
 	dark: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px",
 	light: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px"
 };
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	scaleBox: css`
-    cursor: pointer;
-
-    position: relative;
-
-    width: 48px;
-    height: 32px;
-
-    background-position:
-      0 0,
-      0 8px,
-      8px -8px,
-      -8px 0;
-    background-size: 16px 16px;
-
-    transition: scale 400ms ${cssVar.motionEaseOut};
-
-    &:active {
-      scale: 0.8;
-    }
-  `,
-	scaleItem: css`
-    width: 100%;
-    height: 100%;
-  `,
-	scaleRowTitle: css`
-    width: 64px;
-    height: 32px;
-  `,
-	text: css`
-    opacity: 0.5;
-  `
-}));
+const styles = {
+	scaleBox: {
+		k1YJky: "lb1wlk0ns",
+		kmkexE: "lb1aym83t",
+		kgSjnq: "lb1ht9rhz",
+		kkrTdU: "lb1ypdohk",
+		kVAEAm: "lb1n2onr6",
+		km0Bbg: "lb17v98wq",
+		kZKoxP: "lb10w6t97",
+		kzqmXN: "lb1useyqa",
+		$$css: true
+	},
+	scaleItem: {
+		kZKoxP: "lb5yr21d",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	scaleRowTitle: {
+		kZKoxP: "lb10w6t97",
+		kzqmXN: "lb1fu8urw",
+		$$css: true
+	},
+	text: {
+		kSiTet: "lbbyyjgo",
+		$$css: true
+	}
+};
 //#endregion
 export { alphaBg, styles };
 

package/es/color/ColorScales/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/color/ColorScales/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const alphaBg = {\n  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',\n  light:\n    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',\n};\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  scaleBox: css`\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position:\n      0 0,\n      0 8px,\n      8px -8px,\n      -8px 0;\n    background-size: 16px 16px;\n\n    transition: scale 400ms ${cssVar.motionEaseOut};\n\n    &:active {\n      scale: 0.8;\n    }\n  `,\n  scaleItem: css`\n    width: 100%;\n    height: 100%;\n  `,\n  scaleRowTitle: css`\n    width: 64px;\n    height: 32px;\n  `,\n  text: css`\n    opacity: 0.5;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,UAAU;CACrB,MAAM;CACN,OACE;AACJ;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;;;;;;;;;;;8BAee,OAAO,cAAc;;;;;;CAMjD,WAAW,GAAG;;;;CAId,eAAe,GAAG;;;;CAIlB,MAAM,GAAG;;;AAGX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/color/ColorScales/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const alphaBg = {\n  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',\n  light:\n    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',\n};\n\nexport const styles = stylex.create({\n  scaleBox: {\n    backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0',\n    transition: `scale 400ms ${cssVar.motionEaseOut}`,\n    backgroundSize: '16px 16px',\n    cursor: 'pointer',\n    position: 'relative',\n    scale: { 'default': null, ':active': 0.8 },\n    height: 32,\n    width: 48,\n  },\n  scaleItem: {\n    height: '100%',\n    width: '100%',\n  },\n  scaleRowTitle: {\n    height: 32,\n    width: 64,\n  },\n  text: {\n    opacity: 0.5,\n  },\n});\n"],"mappings":";AAGA,MAAa,UAAU;CACrB,MAAM;CACN,OAAO;AACT;AACA,MAAa,SAAS;CACpB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/color/CssVar/ScaleRow.mjs

@@ -1,9 +1,10 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { copyToClipboard } from "../../utils/copyToClipboard.mjs";
-import { toast } from "../../base-ui/Toast/imperative.mjs";
+import { toast } from "../../Toast/imperative.mjs";
 import { styles } from "./style.mjs";
-import { memo } from "react";
+import { createElement, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 //#region src/color/CssVar/ScaleRow.tsx
 const ScaleRow = memo(({ name, title, scale }) => {
 	const style = {};
@@ -11,31 +12,31 @@ const ScaleRow = memo(({ name, title, scale }) => {
 		horizontal: true,
 		align: "center",
 		gap: 2,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: styles.scaleRowTitle,
-			children: /* @__PURE__ */ jsx("div", {
-				className: styles.text,
-				children: title
-			})
-		}, title), scale.map((color, index) => {
+		children: [/* @__PURE__ */ createElement("div", {
+			...stylex.props(styles.scaleRowTitle),
+			key: title
+		}, /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.text),
+			children: title
+		})), scale.map((color, index) => {
 			if (index === 0 || index === 12) return false;
-			return /* @__PURE__ */ jsx("div", {
-				className: styles.scaleBox,
+			return /* @__PURE__ */ createElement("div", {
+				...stylex.props(styles.scaleBox),
+				key: index,
 				style,
 				title: color,
 				onClick: async () => {
 					const content = `token.${name}${index} /* ${color} */`;
 					await copyToClipboard(content);
 					toast.success(content);
-				},
-				children: /* @__PURE__ */ jsx(FlexBasic_default, {
-					horizontal: true,
-					align: "center",
-					className: styles.scaleItem,
-					justify: "center",
-					style: { backgroundColor: color }
-				})
-			}, index);
+				}
+			}, /* @__PURE__ */ jsx(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				...stylex.props(styles.scaleItem),
+				justify: "center",
+				style: { backgroundColor: color }
+			}));
 		})]
 	});
 });

package/es/color/CssVar/ScaleRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScaleRow.mjs","names":["Flexbox"],"sources":["../../../src/color/CssVar/ScaleRow.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { toast } from '@/base-ui/Toast';\nimport { Flexbox } from '@/Flex';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n  scale: string[];\n  title: 'light' | 'dark';\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name, title, scale }) => {\n  const style = {};\n  const isAlpha = false;\n\n  return (\n    <Flexbox horizontal align={'center'} gap={2}>\n      <div className={styles.scaleRowTitle} key={title}>\n        <div className={styles.text}>{title}</div>\n      </div>\n      {scale.map((color, index) => {\n        if (index === 0 || index === 12) return false;\n\n        return (\n          <div\n            className={styles.scaleBox}\n            key={index}\n            style={style}\n            title={color}\n            onClick={async () => {\n              const content = `token.${name}${index}${isAlpha ? 'A' : ''} /* ${color} */`;\n\n              await copyToClipboard(content);\n              toast.success(content);\n            }}\n          >\n            <Flexbox\n              horizontal\n              align={'center'}\n              className={styles.scaleItem}\n              justify={'center'}\n              style={{ backgroundColor: color }}\n            />\n          </div>\n        );\n      })}\n    </Flexbox>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;AAcA,MAAM,WAAW,MAAiB,EAAE,MAAM,OAAO,YAAY;CAC3D,MAAM,QAAQ,CAAC;CAGf,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAA1C,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAW,CAAA;EACtC,GAFsC,KAEtC,GACJ,MAAM,KAAK,OAAO,UAAU;GAC3B,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;GAExC,OACE,oBAAC,OAAD;IACE,WAAW,OAAO;IAEX;IACP,OAAO;IACP,SAAS,YAAY;KACnB,MAAM,UAAU,SAAS,OAAO,MAAA,MAAiC,MAAM;KAEvE,MAAM,gBAAgB,OAAO;KAC7B,MAAM,QAAQ,OAAO;IACvB;IAEA,UAAA,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,OAAO;KAClB,SAAS;KACT,OAAO,EAAE,iBAAiB,MAAM;IACjC,CAAA;GACE,GAjBE,KAiBF;EAET,CAAC,CACM;;AAEb,CAAC"}
+{"version":3,"file":"ScaleRow.mjs","names":["Flexbox"],"sources":["../../../src/color/CssVar/ScaleRow.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { toast } from '@/Toast';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n  scale: string[];\n  title: 'light' | 'dark';\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name, title, scale }) => {\n  const style = {};\n  const isAlpha = false;\n\n  return (\n    <Flexbox horizontal align={'center'} gap={2}>\n      <div {...stylex.props(styles.scaleRowTitle)} key={title}>\n        <div {...stylex.props(styles.text)}>{title}</div>\n      </div>\n      {scale.map((color, index) => {\n        if (index === 0 || index === 12) return false;\n\n        return (\n          <div\n            {...stylex.props(styles.scaleBox)}\n            key={index}\n            style={style}\n            title={color}\n            onClick={async () => {\n              const content = `token.${name}${index}${isAlpha ? 'A' : ''} /* ${color} */`;\n\n              await copyToClipboard(content);\n              toast.success(content);\n            }}\n          >\n            <Flexbox\n              horizontal\n              align={'center'}\n              {...stylex.props(styles.scaleItem)}\n              justify={'center'}\n              style={{ backgroundColor: color }}\n            />\n          </div>\n        );\n      })}\n    </Flexbox>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;;AAWA,MAAM,WAAW,MAAiB,EAChC,MACA,OACA,YACI;CACJ,MAAM,QAAQ,CAAC;CAEf,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAA1C,UAAA,CACH,8BAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,aAAa;GAAG,KAAK;EAE7C,GADH,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,IAAI;GAAI,UAAA;EAAW,CAAA,CAC7C,GACJ,MAAM,KAAK,OAAO,UAAU;GAC7B,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;GACxC,OAAO,8BAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;IAAG,KAAK;IAAc;IAAO,OAAO;IAAO,SAAS,YAAY;KAC1G,MAAM,UAAU,SAAS,OAAO,MAAA,MAAiC,MAAM;KACvE,MAAM,gBAAgB,OAAO;KAC7B,MAAM,QAAQ,OAAO;IACvB;GAIS,GAHH,oBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,GAAI,OAAO,MAAM,OAAO,SAAS;IAAG,SAAS;IAAU,OAAO,EACrG,iBAAiB,MACnB;GAAI,CAAA,CACG;EACX,CAAC,CACQ;;AACb,CAAC"}

package/es/color/CssVar/VarRow.mjs

@@ -1,23 +1,24 @@
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { copyToClipboard } from "../../utils/copyToClipboard.mjs";
-import { toast } from "../../base-ui/Toast/imperative.mjs";
+import { toast } from "../../Toast/imperative.mjs";
 import { styles } from "./style.mjs";
-import { memo } from "react";
+import { createElement, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/color/CssVar/VarRow.tsx
 const ScaleRow = memo(({ name }) => {
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		align: "center",
 		gap: 2,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: styles.scaleRowTitle,
-			children: /* @__PURE__ */ jsx("div", {
-				className: styles.text,
-				children: "cssVar"
-			})
-		}, name), [
+		children: [/* @__PURE__ */ createElement("div", {
+			...stylex.props(styles.scaleRowTitle),
+			key: name
+		}, /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.text),
+			children: "cssVar"
+		})), [
 			1,
 			2,
 			3,
@@ -29,22 +30,22 @@ const ScaleRow = memo(({ name }) => {
 			9,
 			10
 		].map((color) => {
-			return /* @__PURE__ */ jsx("div", {
-				className: styles.scaleBox,
+			return /* @__PURE__ */ createElement("div", {
+				...stylex.props(styles.scaleBox),
+				key: color,
 				title: cssVar[`${name}${color}`],
 				onClick: async () => {
 					const content = cssVar[`${name}${color}`];
 					await copyToClipboard(content);
 					toast.success(content);
-				},
-				children: /* @__PURE__ */ jsx(FlexBasic_default, {
-					horizontal: true,
-					align: "center",
-					className: styles.scaleItem,
-					justify: "center",
-					style: { backgroundColor: cssVar[`${name}${color}`] }
-				})
-			}, color);
+				}
+			}, /* @__PURE__ */ jsx(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				...stylex.props(styles.scaleItem),
+				justify: "center",
+				style: { backgroundColor: cssVar[`${name}${color}`] }
+			}));
 		})]
 	});
 });

package/es/color/CssVar/VarRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VarRow.mjs","names":["Flexbox"],"sources":["../../../src/color/CssVar/VarRow.tsx"],"sourcesContent":["import { cssVar } from 'antd-style';\nimport { memo } from 'react';\n\nimport { toast } from '@/base-ui/Toast';\nimport { Flexbox } from '@/Flex';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name }) => {\n  return (\n    <Flexbox horizontal align={'center'} gap={2}>\n      <div className={styles.scaleRowTitle} key={name}>\n        <div className={styles.text}>cssVar</div>\n      </div>\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((color) => {\n        return (\n          <div\n            className={styles.scaleBox}\n            key={color}\n            title={(cssVar as any)[`${name}${color}`] as any}\n            onClick={async () => {\n              const content = (cssVar as any)[`${name}${color}`] as any;\n\n              await copyToClipboard(content);\n              toast.success(content);\n            }}\n          >\n            <Flexbox\n              horizontal\n              align={'center'}\n              className={styles.scaleItem}\n              justify={'center'}\n              style={{ backgroundColor: (cssVar as any)[`${name}${color}`] as any }}\n            />\n          </div>\n        );\n      })}\n    </Flexbox>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;;AAaA,MAAM,WAAW,MAAiB,EAAE,WAAW;CAC7C,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAA1C,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAM,UAAA;GAAW,CAAA;EACrC,GAFsC,IAEtC,GACJ;GAAC;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;EAAE,CAAC,CAAC,KAAK,UAAU;GAC9C,OACE,oBAAC,OAAD;IACE,WAAW,OAAO;IAElB,OAAQ,OAAe,GAAG,OAAO;IACjC,SAAS,YAAY;KACnB,MAAM,UAAW,OAAe,GAAG,OAAO;KAE1C,MAAM,gBAAgB,OAAO;KAC7B,MAAM,QAAQ,OAAO;IACvB;IAEA,UAAA,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,OAAO;KAClB,SAAS;KACT,OAAO,EAAE,iBAAkB,OAAe,GAAG,OAAO,SAAgB;IACrE,CAAA;GACE,GAhBE,KAgBF;EAET,CAAC,CACM;;AAEb,CAAC"}
+{"version":3,"file":"VarRow.mjs","names":["Flexbox"],"sources":["../../../src/color/CssVar/VarRow.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { toast } from '@/Toast';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name }) => {\n  return (\n    <Flexbox horizontal align={'center'} gap={2}>\n      <div {...stylex.props(styles.scaleRowTitle)} key={name}>\n        <div {...stylex.props(styles.text)}>cssVar</div>\n      </div>\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((color) => {\n        return (\n          <div\n            {...stylex.props(styles.scaleBox)}\n            key={color}\n            title={(cssVar as any)[`${name}${color}`] as any}\n            onClick={async () => {\n              const content = (cssVar as any)[`${name}${color}`] as any;\n\n              await copyToClipboard(content);\n              toast.success(content);\n            }}\n          >\n            <Flexbox\n              horizontal\n              align={'center'}\n              {...stylex.props(styles.scaleItem)}\n              justify={'center'}\n              style={{ backgroundColor: (cssVar as any)[`${name}${color}`] as any }}\n            />\n          </div>\n        );\n      })}\n    </Flexbox>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;;;AAUA,MAAM,WAAW,MAAiB,EAChC,WACI;CACJ,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAA1C,UAAA,CACH,8BAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,aAAa;GAAG,KAAK;EAE7C,GADH,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,IAAI;GAAG,UAAA;EAAW,CAAA,CAC5C,GACJ;GAAC;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;EAAE,CAAC,CAAC,KAAI,UAAS;GAC9C,OAAO,8BAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;IAAG,KAAK;IAAO,OAAQ,OAAe,GAAG,OAAO;IAAiB,SAAS,YAAY;KAChI,MAAM,UAAW,OAAe,GAAG,OAAO;KAC1C,MAAM,gBAAgB,OAAO;KAC7B,MAAM,QAAQ,OAAO;IACvB;GAIS,GAHH,oBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,GAAI,OAAO,MAAM,OAAO,SAAS;IAAG,SAAS;IAAU,OAAO,EACrG,iBAAkB,OAAe,GAAG,OAAO,SAC7C;GAAI,CAAA,CACG;EACX,CAAC,CACQ;;AACb,CAAC"}

package/es/color/CssVar/index.d.mts

@@ -1,6 +1,6 @@
 import { ColorScaleItem } from "../types.mjs";
 //#region src/color/CssVar/index.d.ts
-interface ColorScalesProps {
+export interface ColorScalesProps {
   /**
    * @description Index of the mid highlight color in the scale
    */
@@ -16,5 +16,5 @@ interface ColorScalesProps {
 }
 declare const ColorScales: import("react").NamedExoticComponent<ColorScalesProps>;
 //#endregion
-export { ColorScalesProps, ColorScales as default };
+export { ColorScales as default };
 //# sourceMappingURL=index.d.mts.map

package/es/color/CssVar/index.mjs

@@ -1,12 +1,13 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { ToastHost } from "../../base-ui/Toast/imperative.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
+import { ToastHost } from "../../Toast/imperative.mjs";
 import { styles } from "./style.mjs";
 import ScaleRow from "./ScaleRow.mjs";
 import ScaleRow$1 from "./VarRow.mjs";
-import { memo } from "react";
+import { createElement, memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useThemeMode } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/color/CssVar/index.tsx
 const ColorScales = memo(({ name, scale, midHighLight }) => {
 	const { isDarkMode } = useThemeMode();
@@ -24,30 +25,31 @@ const ColorScales = memo(({ name, scale, midHighLight }) => {
 						horizontal: true,
 						align: "center",
 						gap: 2,
-						children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+						children: [/* @__PURE__ */ createElement(FlexBasic_default, {
 							horizontal: true,
 							align: "center",
-							className: styles.scaleRowTitle
-						}, "scale-num"), Array.from({ length: scale.light.length }).fill("").map((_, index) => {
+							...stylex.props(styles.scaleRowTitle),
+							key: "scale-num"
+						}), Array.from({ length: scale.light.length }).fill("").map((_, index) => {
 							if (index === 0 || index === 12) return false;
 							const isMidHighlight = midHighLight === index;
-							return /* @__PURE__ */ jsx("div", {
-								className: styles.scaleBox,
-								children: /* @__PURE__ */ jsx("div", {
-									className: styles.scaleBox,
-									children: /* @__PURE__ */ jsx(FlexBasic_default, {
-										horizontal: true,
-										align: "center",
-										className: styles.scaleItem,
-										justify: "center",
-										style: {
-											fontWeight: isMidHighlight ? 700 : 400,
-											opacity: .5
-										},
-										children: index
-									})
+							return /* @__PURE__ */ createElement("div", {
+								...stylex.props(styles.scaleBox),
+								key: `num${index}`
+							}, /* @__PURE__ */ jsx("div", {
+								...stylex.props(styles.scaleBox),
+								children: /* @__PURE__ */ jsx(FlexBasic_default, {
+									horizontal: true,
+									align: "center",
+									...stylex.props(styles.scaleItem),
+									justify: "center",
+									style: {
+										fontWeight: isMidHighlight ? 700 : 400,
+										opacity: .5
+									},
+									children: index
 								})
-							}, `num${index}`);
+							}));
 						})]
 					}, "scale-title"),
 					/* @__PURE__ */ jsx(ScaleRow$1, { name }),

package/es/color/CssVar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","VarRow"],"sources":["../../../src/color/CssVar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { ToastHost } from '@/base-ui/Toast';\nimport { Flexbox } from '@/Flex';\n\nimport { type ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\nimport VarRow from './VarRow';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  const { isDarkMode } = useThemeMode();\n  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Flexbox gap={2}>\n          <Flexbox horizontal align={'center'} gap={2} key=\"scale-title\">\n            <Flexbox horizontal align={'center'} className={styles.scaleRowTitle} key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        horizontal\n                        align={'center'}\n                        className={styles.scaleItem}\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Flexbox>\n          <VarRow name={name} />\n          {isDarkMode ? (\n            <>\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n            </>\n          ) : (\n            <>\n              {' '}\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n            </>\n          )}\n        </Flexbox>\n      </div>\n      <ToastHost />\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,MAAM,EAAE,eAAe,aAAa;CACpC,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;EAAvD,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,kBAAkB;GACvC,UAAA,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACE,qBAACA,mBAAD;MAAS,YAAA;MAAW,OAAO;MAAU,KAAK;MAA1C,UAAA,CACE,oBAACA,mBAAD;OAAS,YAAA;OAAW,OAAO;OAAU,WAAW,OAAO;MAAgC,GAAb,WAAa,GACtF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC,CACxC,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU;OACjB,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;OAExC,MAAM,iBAAiB,iBAAiB;OAExC,OACE,oBAAC,OAAD;QAAK,WAAW,OAAO;QACrB,UAAA,oBAAC,OAAD;SAAK,WAAW,OAAO;SACrB,UAAA,oBAACA,mBAAD;UACE,YAAA;UACA,OAAO;UACP,WAAW,OAAO;UAClB,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;UACX;UAEC,UAAA;SACM,CAAA;QACN,CAAA;OACF,GAfiC,MAAM,OAevC;MAET,CAAC,CACI;KA5BwC,GAAA,aA4BxC;KACT,oBAACC,YAAD,EAAc,KAAO,CAAA;KACpB,aACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;MAA2B;MAAM,OAAO,MAAM;MAAM,OAAM;KAAQ,GAApD,MAAoD,GAClE,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD,CACrE,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;MACG;MACD,oBAAC,UAAD;OAA4B;OAAM,OAAO,MAAM;OAAO,OAAM;MAAS,GAAvD,OAAuD;MACrE,oBAAC,UAAD;OAA2B;OAAM,OAAO,MAAM;OAAM,OAAM;MAAQ,GAApD,MAAoD;KAClE,EAAA,CAAA;IAEG;;EACN,CAAA,GACL,oBAAC,WAAD,CAAY,CAAA,CACL;;AAEb,CAAC"}
+{"version":3,"file":"index.mjs","names":["Flexbox","VarRow"],"sources":["../../../src/color/CssVar/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport { ToastHost } from '@/Toast';\n\nimport { type ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\nimport VarRow from './VarRow';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  const { isDarkMode } = useThemeMode();\n  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Flexbox gap={2}>\n          <Flexbox horizontal align={'center'} gap={2} key=\"scale-title\">\n            <Flexbox\n              horizontal\n              align={'center'}\n              {...stylex.props(styles.scaleRowTitle)}\n              key=\"scale-num\"\n            />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div {...stylex.props(styles.scaleBox)} key={`num${index}`}>\n                    <div {...stylex.props(styles.scaleBox)}>\n                      <Flexbox\n                        horizontal\n                        align={'center'}\n                        {...stylex.props(styles.scaleItem)}\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Flexbox>\n          <VarRow name={name} />\n          {isDarkMode ? (\n            <>\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n            </>\n          ) : (\n            <>\n              {' '}\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n            </>\n          )}\n        </Flexbox>\n      </div>\n      <ToastHost />\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,cAAc,MAAwB,EAC1C,MACA,OACA,mBACI;CACJ,MAAM,EACJ,eACE,aAAa;CACjB,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;EAAvD,UAAA,CACH,oBAAC,OAAD;GAAK,OAAO,EACZ,SAAS,kBACX;GACI,UAAA,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACE,qBAACA,mBAAD;MAAS,YAAA;MAAW,OAAO;MAAU,KAAK;MAA1C,UAAA,CACE,8BAACA,mBAAD;OAAS,YAAA;OAAW,OAAO;OAAU,GAAI,OAAO,MAAM,OAAO,aAAa;OAAG,KAAI;MAAa,CAAA,GAC7F,MAAM,KAAK,EACZ,QAAQ,MAAM,MAAM,OACtB,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,GAAG,UAAU;OAC5B,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;OACxC,MAAM,iBAAiB,iBAAiB;OACxC,OAAO,8BAAC,OAAD;QAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;QAAG,KAAK,MAAM;OAS/C,GARH,oBAAC,OAAD;QAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;QACnC,UAAA,oBAACA,mBAAD;SAAS,YAAA;SAAW,OAAO;SAAU,GAAI,OAAO,MAAM,OAAO,SAAS;SAAG,SAAS;SAAU,OAAO;UACvG,YAAY,iBAAiB,MAAM;UACnC,SAAS;SACX;SACS,UAAA;QACM,CAAA;OACN,CAAA,CACF;MACb,CAAC,CACQ;KAlBwC,GAAA,aAkBxC;KACT,oBAACC,YAAD,EAAc,KAAO,CAAA;KACpB,aAAa,qBAAA,YAAA,EAAA,UAAA,CACV,oBAAC,UAAD;MAA2B;MAAM,OAAO,MAAM;MAAM,OAAM;KAAQ,GAApD,MAAoD,GAClE,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD,CACrE,EAAA,CAAA,IAAI,qBAAA,YAAA,EAAA,UAAA;MACH;MACD,oBAAC,UAAD;OAA4B;OAAM,OAAO,MAAM;OAAO,OAAM;MAAS,GAAvD,OAAuD;MACrE,oBAAC,UAAD;OAA2B;OAAM,OAAO,MAAM;OAAM,OAAM;MAAQ,GAApD,MAAoD;KAClE,EAAA,CAAA;IACG;;EACN,CAAA,GACL,oBAAC,WAAD,CAAY,CAAA,CACL;;AACb,CAAC"}

package/es/color/CssVar/style.mjs

@@ -1,39 +1,31 @@
-import { createStaticStyles } from "antd-style";
 //#region src/color/CssVar/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	scaleBox: css`
-    cursor: pointer;
-
-    position: relative;
-
-    width: 48px;
-    height: 32px;
-
-    background-position:
-      0 0,
-      0 8px,
-      8px -8px,
-      -8px 0;
-    background-size: 16px 16px;
-
-    transition: scale 400ms ${cssVar.motionEaseOut};
-
-    &:active {
-      scale: 0.8;
-    }
-  `,
-	scaleItem: css`
-    width: 100%;
-    height: 100%;
-  `,
-	scaleRowTitle: css`
-    width: 64px;
-    height: 32px;
-  `,
-	text: css`
-    opacity: 0.5;
-  `
-}));
+const styles = {
+	scaleBox: {
+		k1YJky: "lb1wlk0ns",
+		kmkexE: "lb1aym83t",
+		kgSjnq: "lb1ht9rhz",
+		kkrTdU: "lb1ypdohk",
+		kVAEAm: "lb1n2onr6",
+		km0Bbg: "lb17v98wq",
+		kZKoxP: "lb10w6t97",
+		kzqmXN: "lb1useyqa",
+		$$css: true
+	},
+	scaleItem: {
+		kZKoxP: "lb5yr21d",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	scaleRowTitle: {
+		kZKoxP: "lb10w6t97",
+		kzqmXN: "lb1fu8urw",
+		$$css: true
+	},
+	text: {
+		kSiTet: "lbbyyjgo",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/color/CssVar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/color/CssVar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const alphaBg = {\n  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',\n  light:\n    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',\n};\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  scaleBox: css`\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position:\n      0 0,\n      0 8px,\n      8px -8px,\n      -8px 0;\n    background-size: 16px 16px;\n\n    transition: scale 400ms ${cssVar.motionEaseOut};\n\n    &:active {\n      scale: 0.8;\n    }\n  `,\n  scaleItem: css`\n    width: 100%;\n    height: 100%;\n  `,\n  scaleRowTitle: css`\n    width: 64px;\n    height: 32px;\n  `,\n  text: css`\n    opacity: 0.5;\n  `,\n}));\n"],"mappings":";;AAQA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;;;;;;;;;;;8BAee,OAAO,cAAc;;;;;;CAMjD,WAAW,GAAG;;;;CAId,eAAe,GAAG;;;;CAIlB,MAAM,GAAG;;;AAGX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/color/CssVar/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const alphaBg = {\n  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',\n  light:\n    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',\n};\n\nexport const styles = stylex.create({\n  scaleBox: {\n    backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0',\n    transition: `scale 400ms ${cssVar.motionEaseOut}`,\n    backgroundSize: '16px 16px',\n    cursor: 'pointer',\n    position: 'relative',\n    scale: { 'default': null, ':active': 0.8 },\n    height: 32,\n    width: 48,\n  },\n  scaleItem: {\n    height: '100%',\n    width: '100%',\n  },\n  scaleRowTitle: {\n    height: 32,\n    width: 64,\n  },\n  text: {\n    opacity: 0.5,\n  },\n});\n"],"mappings":";AAOA,MAAa,SAAS;CACpB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/color/colors/index.d.mts

@@ -14,7 +14,7 @@ import red from "./red.mjs";
 import volcano from "./volcano.mjs";
 import yellow from "./yellow.mjs";
 //#region src/color/colors/index.d.ts
-interface ColorScales {
+export interface ColorScales {
   blue: ColorScaleItem;
   cyan: ColorScaleItem;
   geekblue: ColorScaleItem;
@@ -30,7 +30,7 @@ interface ColorScales {
   volcano: ColorScaleItem;
   yellow: ColorScaleItem;
 }
-declare const colorScales: ColorScales;
+export declare const colorScales: ColorScales;
 //#endregion
-export { ColorScales, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, orange, primary, purple, red, volcano, yellow };
+export { blueGeekblueMix as blue, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, orange, primary, purple, red, volcano, yellow };
 //# sourceMappingURL=index.d.mts.map

package/es/color/neutrals/index.d.mts

@@ -5,14 +5,14 @@ import sage from "./sage.mjs";
 import sand from "./sand.mjs";
 import slate from "./slate.mjs";
 //#region src/color/neutrals/index.d.ts
-interface NeutralColorScales {
+export interface NeutralColorScales {
   mauve: ColorScaleItem;
   olive: ColorScaleItem;
   sage: ColorScaleItem;
   sand: ColorScaleItem;
   slate: ColorScaleItem;
 }
-declare const neutralColorScales: NeutralColorScales;
+export declare const neutralColorScales: NeutralColorScales;
 //#endregion
-export { NeutralColorScales, mauve, neutralColorScales, neutralColorScales as neutrals, olive, sage, sand, slate };
+export { mauve, neutralColorScales as neutrals, olive, sage, sand, slate };
 //# sourceMappingURL=index.d.mts.map

package/es/color/types.d.mts

@@ -1,11 +1,10 @@
 //#region src/color/types.d.ts
 type colorStep = [string, string, string, string, string, string, string, string, string, string, string, string, string];
-interface ColorScaleItem {
+export interface ColorScaleItem {
   dark: colorStep;
   darkA: colorStep;
   light: colorStep;
   lightA: colorStep;
 }
 //#endregion
-export { ColorScaleItem };
 //# sourceMappingURL=types.d.mts.map

package/es/dashboard/AuthLayout/AuthLayout.d.mts

@@ -1,6 +1,6 @@
 import { AuthLayoutProps } from "./type.mjs";
 //#region src/dashboard/AuthLayout/AuthLayout.d.ts
-declare function AuthLayout({ aside, brand, children, className, description, title, tools, ...rest }: AuthLayoutProps): import("react").JSX.Element;
+declare function AuthLayout({ aside, brand, children, className, description, style, title, tools, ...rest }: AuthLayoutProps): import("react").JSX.Element;
 declare namespace AuthLayout {
   var displayName: string;
 }

package/es/dashboard/AuthLayout/AuthLayout.mjs

@@ -1,45 +1,56 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Text from "../../base-ui/Text/Text.mjs";
+import Text from "../../Text/Text.mjs";
 import { styles } from "../Surface/style.mjs";
 import { styles as styles$1 } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/AuthLayout/AuthLayout.tsx
-function AuthLayout({ aside, brand, children, className, description, title, tools, ...rest }) {
+const titleStyle = {
+	fontSize: cssVar.fontSizeHeading3,
+	lineHeight: cssVar.lineHeightHeading3,
+	margin: 0
+};
+const descriptionStyle = {
+	color: cssVar.colorTextSecondary,
+	lineHeight: 1.6
+};
+function AuthLayout({ aside, brand, children, className, description, style, title, tools, ...rest }) {
 	const split = Boolean(aside);
 	return /* @__PURE__ */ jsxs("div", {
-		className: className ? `${styles$1.page} ${className}` : styles$1.page,
+		...styleProps(styles$1.page, className, style),
 		...rest,
 		children: [/* @__PURE__ */ jsxs("header", {
-			className: styles$1.header,
+			...stylex.props(styles$1.header),
 			children: [brand, tools ? /* @__PURE__ */ jsx("div", {
-				className: styles$1.tools,
+				...stylex.props(styles$1.tools),
 				children: tools
 			}) : null]
 		}), /* @__PURE__ */ jsx("main", {
-			className: styles$1.main,
+			...stylex.props(styles$1.main),
 			children: /* @__PURE__ */ jsx("div", {
-				className: cx(styles$1.lift, split && styles$1.liftSplit, styles.card),
+				...stylex.props(styles$1.lift, split && styles$1.liftSplit, styles.card),
 				children: /* @__PURE__ */ jsxs("div", {
-					className: cx(styles$1.frame, split && styles$1.split),
+					...stylex.props(styles$1.frame, split && styles$1.split),
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: cx(styles$1.form, split && styles$1.formSplit),
+						...stylex.props(styles$1.form, split && styles$1.formSplit),
 						children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
 							gap: 8,
 							children: [/* @__PURE__ */ jsx(Text, {
 								as: "h1",
-								className: styles$1.title,
+								style: titleStyle,
 								weight: "bold",
 								children: title
 							}), description ? /* @__PURE__ */ jsx(Text, {
-								className: styles$1.description,
+								style: descriptionStyle,
 								type: "secondary",
 								children: description
 							}) : null]
 						}), children]
 					}), aside ? /* @__PURE__ */ jsx("div", {
-						className: styles$1.aside,
+						...stylex.props(styles$1.aside),
 						children: aside
 					}) : null]
 				})

package/es/dashboard/AuthLayout/AuthLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthLayout.mjs","names":["styles","surfaceStyles","Flexbox"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nfunction AuthLayout({\n  aside,\n  brand,\n  children,\n  className,\n  description,\n  title,\n  tools,\n  ...rest\n}: AuthLayoutProps) {\n  const split = Boolean(aside);\n  return (\n    <div className={className ? `${styles.page} ${className}` : styles.page} {...rest}>\n      <header className={styles.header}>\n        {brand}\n        {tools ? <div className={styles.tools}>{tools}</div> : null}\n      </header>\n      <main className={styles.main}>\n        <div className={cx(styles.lift, split && styles.liftSplit, surfaceStyles.card)}>\n          <div className={cx(styles.frame, split && styles.split)}>\n            <div className={cx(styles.form, split && styles.formSplit)}>\n              <Flexbox gap={8}>\n                <Text as=\"h1\" className={styles.title} weight=\"bold\">\n                  {title}\n                </Text>\n                {description ? (\n                  <Text className={styles.description} type=\"secondary\">\n                    {description}\n                  </Text>\n                ) : null}\n              </Flexbox>\n              {children}\n            </div>\n            {aside ? <div className={styles.aside}>{aside}</div> : null}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n}\n\nAuthLayout.displayName = 'AuthLayout';\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;AAWA,SAAS,WAAW,EAClB,OACA,OACA,UACA,WACA,aACA,OACA,OACA,GAAG,QACe;CAClB,MAAM,QAAQ,QAAQ,KAAK;CAC3B,OACE,qBAAC,OAAD;EAAK,WAAW,YAAY,GAAGA,SAAO,KAAK,GAAG,cAAcA,SAAO;EAAM,GAAI;EAA7E,UAAA,CACE,qBAAC,UAAD;GAAQ,WAAWA,SAAO;GAA1B,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;IAAK,WAAWA,SAAO;IAAQ,UAAA;GAAW,CAAA,IAAI,IACjD;EACR,CAAA,GAAA,oBAAC,QAAD;GAAM,WAAWA,SAAO;GACtB,UAAA,oBAAC,OAAD;IAAK,WAAW,GAAGA,SAAO,MAAM,SAASA,SAAO,WAAWC,OAAc,IAAI;IAC3E,UAAA,qBAAC,OAAD;KAAK,WAAW,GAAGD,SAAO,OAAO,SAASA,SAAO,KAAK;KAAtD,UAAA,CACE,qBAAC,OAAD;MAAK,WAAW,GAAGA,SAAO,MAAM,SAASA,SAAO,SAAS;MAAzD,UAAA,CACE,qBAACE,mBAAD;OAAS,KAAK;OAAd,UAAA,CACE,oBAAC,MAAD;QAAM,IAAG;QAAK,WAAWF,SAAO;QAAO,QAAO;QAC3C,UAAA;OACG,CAAA,GACL,cACC,oBAAC,MAAD;QAAM,WAAWA,SAAO;QAAa,MAAK;QACvC,UAAA;OACG,CAAA,IACJ,IACG;MACR,CAAA,GAAA,QACE;KACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;MAAK,WAAWA,SAAO;MAAQ,UAAA;KAAW,CAAA,IAAI,IACpD;;GACF,CAAA;EACD,CAAA,CACH;;AAET;AAEA,WAAW,cAAc"}
+{"version":3,"file":"AuthLayout.mjs","names":["styles","surfaceStyles","Flexbox"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nconst titleStyle = {\n  fontSize: cssVar.fontSizeHeading3,\n  lineHeight: cssVar.lineHeightHeading3,\n  margin: 0,\n};\nconst descriptionStyle = { color: cssVar.colorTextSecondary, lineHeight: 1.6 };\n\nfunction AuthLayout({\n  aside,\n  brand,\n  children,\n  className,\n  description,\n  style,\n  title,\n  tools,\n  ...rest\n}: AuthLayoutProps) {\n  const split = Boolean(aside);\n  return (\n    <div {...styleProps(styles.page, className, style)} {...rest}>\n      <header {...stylex.props(styles.header)}>\n        {brand}\n        {tools ? <div {...stylex.props(styles.tools)}>{tools}</div> : null}\n      </header>\n      <main {...stylex.props(styles.main)}>\n        <div {...stylex.props(styles.lift, split && styles.liftSplit, surfaceStyles.card)}>\n          <div {...stylex.props(styles.frame, split && styles.split)}>\n            <div {...stylex.props(styles.form, split && styles.formSplit)}>\n              <Flexbox gap={8}>\n                <Text as=\"h1\" style={titleStyle} weight=\"bold\">\n                  {title}\n                </Text>\n                {description ? (\n                  <Text style={descriptionStyle} type=\"secondary\">\n                    {description}\n                  </Text>\n                ) : null}\n              </Flexbox>\n              {children}\n            </div>\n            {aside ? <div {...stylex.props(styles.aside)}>{aside}</div> : null}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n}\n\nAuthLayout.displayName = 'AuthLayout';\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,aAAa;CACjB,UAAU,OAAO;CACjB,YAAY,OAAO;CACnB,QAAQ;AACV;AACA,MAAM,mBAAmB;CACvB,OAAO,OAAO;CACd,YAAY;AACd;AACA,SAAS,WAAW,EAClB,OACA,OACA,UACA,WACA,aACA,OACA,OACA,OACA,GAAG,QACe;CAClB,MAAM,QAAQ,QAAQ,KAAK;CAC3B,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAWA,SAAO,MAAM,WAAW,KAAK;EAAG,GAAI;EAAxD,UAAA,CACH,qBAAC,UAAD;GAAQ,GAAI,OAAO,MAAMA,SAAO,MAAM;GAAtC,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAMA,SAAO,KAAK;IAAI,UAAA;GAAW,CAAA,IAAI,IACxD;EACR,CAAA,GAAA,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAMA,SAAO,IAAI;GAChC,UAAA,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAMA,SAAO,MAAM,SAASA,SAAO,WAAWC,OAAc,IAAI;IAC9E,UAAA,qBAAC,OAAD;KAAK,GAAI,OAAO,MAAMD,SAAO,OAAO,SAASA,SAAO,KAAK;KAAzD,UAAA,CACE,qBAAC,OAAD;MAAK,GAAI,OAAO,MAAMA,SAAO,MAAM,SAASA,SAAO,SAAS;MAA5D,UAAA,CACE,qBAACE,mBAAD;OAAS,KAAK;OAAd,UAAA,CACE,oBAAC,MAAD;QAAM,IAAG;QAAK,OAAO;QAAY,QAAO;QACrC,UAAA;OACG,CAAA,GACL,cAAc,oBAAC,MAAD;QAAM,OAAO;QAAkB,MAAK;QAC9C,UAAA;OACG,CAAA,IAAI,IACL;MACR,CAAA,GAAA,QACE;KACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;MAAK,GAAI,OAAO,MAAMF,SAAO,KAAK;MAAI,UAAA;KAAW,CAAA,IAAI,IAC3D;;GACF,CAAA;EACD,CAAA,CACH;;AACT;AACA,WAAW,cAAc"}