@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/Input/style.mjs

@@ -1,95 +1,293 @@
-import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles, cx } from "antd-style";
-import { cva } from "class-variance-authority";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+import { inputMarker } from "./marker.stylex.mjs";
+import * as stylex from "@stylexjs/stylex";
 //#region src/Input/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		borderless: css`
-      &[class*='ant-input'] {
-        ${staticStylish.variantBorderless}
-        &:hover {
-          ${staticStylish.variantBorderlessWithoutHover}
-        }
-      }
-    `,
-		borderlessOPT: css`
-      &[class*='ant-otp'] {
-        [class*='ant-otp-input'] {
-          ${staticStylish.variantBorderless};
-        }
-      }
-    `,
-		filled: cx(staticStylish.variantFilled, css`
-        &:focus-within {
-          ${staticStylish.variantFilledWithoutHover}
-        }
-      `),
-		filledOPT: css`
-      &[class*='ant-otp'] {
-        [class*='ant-otp-input'] {
-          ${staticStylish.variantFilled};
-        }
-      }
-    `,
-		outlined: staticStylish.variantOutlined,
-		outlinedOPT: css`
-      &[class*='ant-otp'] {
-        [class*='ant-otp-input'] {
-          ${staticStylish.variantOutlined};
-        }
-      }
-    `,
-		root: css``,
-		rootOPT: css`
-      &[class*='ant-otp'] {
-        [class*='ant-otp-input'] {
-          &:focus-within {
-            border-color: ${cssVar.colorBorder};
-          }
-        }
-      }
-    `,
-		shadow: staticStylish.shadow,
-		shadowOPT: css`
-      &[class*='ant-otp'] {
-        [class*='ant-otp-input'] {
-          ${staticStylish.shadow};
-        }
-      }
-    `
-	};
-});
-const variants = cva(styles.root, {
-	defaultVariants: { shadow: false },
-	variants: {
-		variant: {
-			filled: styles.filled,
-			outlined: styles.outlined,
-			borderless: styles.borderless,
-			underlined: null
-		},
-		shadow: {
-			false: null,
-			true: styles.shadow
-		}
+`${cssVar.colorBorder}${cssVar.colorBorder}${cssVar.colorBorderSecondary}${cssVar.colorBorderSecondary}`;
+`${cssVar.colorPrimaryBg}`;
+`${cssVar.colorErrorBg}`;
+const styles = {
+	borderless: {
+		kVAM5u: "lb9r1u3d lb11xq1n2",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lbjbqb8w",
+		kKwaWg: "lb18o3ruo",
+		kGVxlE: "lb15yobv",
+		$$css: true
+	},
+	clear: {
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb16rqkct",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbur9dxv lb116dz5d",
+		kMwMTN: "lb1y38k7b",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		k33iCy: "lblshs6z lbqh6ce5 lb1s61rn1",
+		kZKoxP: "lblup9mm",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	},
+	count: {
+		kaIpWk: "lb1e6avla",
+		kg3NbH: "lbdqyycr",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbaljia1 lbkv9twt",
+		kMwMTN: "lbc77et8 lbitgxk9",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lb1j6dyjg",
+		kcqcaj: "lbss6m8b",
+		k63SB2: "lb1s688f",
+		krVfgx: "lbrb244j",
+		kt4wiu: "lb11dcrhx",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lb1qx5ct2",
+		$$css: true
+	},
+	filled: {
+		kVAM5u: "lb9r1u3d lb11xq1n2",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lbaljia1 lbecsk89",
+		kGVxlE: "lb15yobv",
+		$$css: true
+	},
+	input: {
+		kVVagm: "lbln7xf2",
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kUk6DE: "lb98rzlu",
+		kI3sdo: "lb1a2a7pz",
+		kysU6D: "lbjyslct",
+		kWkggS: "lbjbqb8w",
+		kMwMTN: "lb1heor9g",
+		k7Eaqz: "lbeuugli",
+		k8Qsv1: "lb14injf2",
+		$$css: true
+	},
+	numberControl: {
+		kogj98: "lb1ghz6dp",
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb12oqio5",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kI3sdo: "lb1a2a7pz",
+		kmkexE: "lb1noqm3w",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w lbbchuj0",
+		kMwMTN: "lb53gy9q lb8qk002",
+		kkrTdU: "lb1ypdohk lb1s07b3s",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lbl56j7k",
+		kSiTet: "lb1bq4at4",
+		kZKoxP: "lb18gnavp",
+		kzqmXN: "lbw4jnvo",
+		$$css: true
+	},
+	numberControlLarge: {
+		kZKoxP: "lbx3o462",
+		kzqmXN: "lb17z2i9w",
+		$$css: true
+	},
+	numberControls: {
+		kUk6DE: "lb1okw0bk",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k71WvV: "lb1ws5yxj",
+		$$css: true
+	},
+	numberControlSmall: {
+		kaIpWk: "lb18zih8k",
+		kZKoxP: "lb170jfvy",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	},
+	numberControlsSmall: {
+		k71WvV: "lb1lxpwgx",
+		$$css: true
+	},
+	numberInput: {
+		kcqcaj: "lbss6m8b",
+		$$css: true
+	},
+	otpCell: {
+		kUk6DE: "lb1okw0bk",
+		kg3NbH: "lbnjsko4",
+		k9WMMc: "lb2b8uid",
+		kzqmXN: "lb1td3qas",
+		$$css: true
+	},
+	otpRoot: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	outlined: {
+		kVAM5u: "lb10cypdb lbjmsf0 lb1pinziv lb1o0n66f",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lb6yijhg",
+		kGVxlE: "lb15yobv lb1x4c7q",
+		$$css: true
+	},
+	passwordToggle: {
+		kogj98: "lb1ghz6dp",
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kI3sdo: "lb1a2a7pz",
+		kmkexE: "lb627avl",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w",
+		kMwMTN: "lb53gy9q lb1bxu9lh",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	root: {
+		kaIpWk: "lb1sbi92r",
+		kOIVth: "lb167g77z",
+		kg3NbH: "lbaope02",
+		kmkexE: "lbavbupb",
+		kGNEyG: "lb6s0dn4",
+		kB7OPa: "lb9f619",
+		kMwMTN: "lb66ogz0 lb1pedyqg",
+		kkrTdU: "lb1ed109x lbzoe6q",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lbif65rj",
+		kSiTet: "lbb5d7sw",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	shadow: {
+		kGVxlE: "lbpjwdtl lb15yobv",
+		$$css: true
+	},
+	shadowOutlined: {
+		kGVxlE: "lbpjwdtl lb15yobv lb1x4c7q",
+		$$css: true
+	},
+	sizeLarge: {
+		kaIpWk: "lb1ndkxwp",
+		kGuDYH: "lb1j61zf2",
+		kAzted: "lb1ba4aug",
+		$$css: true
+	},
+	sizeMiddle: {
+		kAzted: "lb21xpn4",
+		$$css: true
+	},
+	sizeSmall: {
+		kaIpWk: "lb1vihcfj",
+		kg3NbH: "lbdqyycr",
+		kGuDYH: "lbfifm61",
+		kAzted: "lbjwf9q1",
+		$$css: true
+	},
+	slot: {
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb53gy9q",
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	textarea: {
+		k8WAf4: "lb1vvogim",
+		kVAEAm: "lb1n2onr6",
+		kZKoxP: "lbt7dq6l",
+		$$css: true
+	},
+	textareaAutoSize: {
+		kOwNse: "lb5f5z56",
+		$$css: true
+	},
+	textareaClear: {
+		k87sOh: "lb1eu8d0j",
+		kt4wiu: "lbo2ifbc",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	textareaControl: {
+		kLWn49: "lb1evy7pa",
+		kHenm0: "lbtt52l0",
+		kskxy: "lbscuc4t",
+		kAzted: "lbnqaks7",
+		$$css: true
+	},
+	textareaResize: {
+		kHenm0: "lb288g5",
+		$$css: true
+	},
+	textareaWithCount: {
+		kGO01o: "lbbaz6xv",
+		$$css: true
 	}
-});
-const variantsOPT = cva(styles.rootOPT, {
-	defaultVariants: { shadow: false },
-	variants: {
-		variant: {
-			filled: styles.filledOPT,
-			outlined: styles.outlinedOPT,
-			borderless: styles.borderlessOPT,
-			underlined: null
-		},
-		shadow: {
-			false: null,
-			true: styles.shadowOPT
-		}
-	}
-});
+};
+const sizeStyles = {
+	large: styles.sizeLarge,
+	middle: styles.sizeMiddle,
+	small: styles.sizeSmall
+};
+const variantStyles = {
+	borderless: styles.borderless,
+	filled: styles.filled,
+	outlined: styles.outlined
+};
+const inputRootStyles = ({ shadow, size, variant } = {}) => {
+	const mergedVariant = variant || "outlined";
+	return [
+		inputMarker,
+		styles.root,
+		sizeStyles[size || "middle"],
+		variantStyles[mergedVariant],
+		shadow && (mergedVariant === "outlined" ? styles.shadowOutlined : styles.shadow)
+	];
+};
+const rootVariants = (options) => stylex.props(inputRootStyles(options)).className ?? "";
+const className = (style) => styleProps(style).className;
+const inputClassNames = {
+	borderless: className(styles.borderless),
+	clear: className(styles.clear),
+	count: className(styles.count),
+	filled: className(styles.filled),
+	input: className(styles.input),
+	invalid: "",
+	numberControl: className(styles.numberControl),
+	numberControlLarge: className(styles.numberControlLarge),
+	numberControls: className(styles.numberControls),
+	numberControlSmall: className(styles.numberControlSmall),
+	numberControlsSmall: className(styles.numberControlsSmall),
+	numberInput: className(styles.numberInput),
+	otpCell: className(styles.otpCell),
+	otpRoot: className(styles.otpRoot),
+	outlined: className(styles.outlined),
+	passwordToggle: className(styles.passwordToggle),
+	root: className([inputMarker, styles.root]),
+	shadow: className(styles.shadow),
+	sizeLarge: className(styles.sizeLarge),
+	sizeMiddle: className(styles.sizeMiddle),
+	sizeSmall: className(styles.sizeSmall),
+	slot: className(styles.slot),
+	textarea: className(styles.textarea),
+	textareaAutoSize: className(styles.textareaAutoSize),
+	textareaClear: className(styles.textareaClear),
+	textareaResize: className(styles.textareaResize),
+	textareaWithCount: className(styles.textareaWithCount)
+};
 //#endregion
-export { styles, variants, variantsOPT };
+export { inputClassNames, inputRootStyles, rootVariants, styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/Input/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Input/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: css`\n      &[class*='ant-input'] {\n        ${lobeStaticStylish.variantBorderless}\n        &:hover {\n          ${lobeStaticStylish.variantBorderlessWithoutHover}\n        }\n      }\n    `,\n    borderlessOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantBorderless};\n        }\n      }\n    `,\n    filled: cx(\n      lobeStaticStylish.variantFilled,\n      css`\n        &:focus-within {\n          ${lobeStaticStylish.variantFilledWithoutHover}\n        }\n      `,\n    ),\n\n    filledOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantFilled};\n        }\n      }\n    `,\n    outlined: lobeStaticStylish.variantOutlined,\n    outlinedOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantOutlined};\n        }\n      }\n    `,\n    root: css``,\n    rootOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          &:focus-within {\n            border-color: ${cssVar.colorBorder};\n          }\n        }\n      }\n    `,\n    shadow: lobeStaticStylish.shadow,\n    shadowOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.shadow};\n        }\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n\nexport const variantsOPT = cva(styles.rootOPT, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filledOPT,\n      outlined: styles.outlinedOPT,\n      borderless: styles.borderlessOPT,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadowOPT,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,YAAY,GAAG;;UAETA,cAAkB,kBAAkB;;YAElCA,cAAkB,8BAA8B;;;;EAIxD,eAAe,GAAG;;;YAGVA,cAAkB,kBAAkB;;;;EAI5C,QAAQ,GACNA,cAAkB,eAClB,GAAG;;YAEGA,cAAkB,0BAA0B;;OAGpD;EAEA,WAAW,GAAG;;;YAGNA,cAAkB,cAAc;;;;EAIxC,UAAUA,cAAkB;EAC5B,aAAa,GAAG;;;YAGRA,cAAkB,gBAAgB;;;;EAI1C,MAAM,GAAG;EACT,SAAS,GAAG;;;;4BAIY,OAAO,YAAY;;;;;EAK3C,QAAQA,cAAkB;EAC1B,WAAW,GAAG;;;YAGNA,cAAkB,OAAO;;;;CAInC;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,MACV;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;EACd;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC;AAED,MAAa,cAAc,IAAI,OAAO,SAAS;CAC7C,iBAAiB,EACf,QAAQ,MACV;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;EACd;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Input/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { inputMarker } from './marker.stylex';\nimport type { InputSize, InputVariant } from './type';\n\nconst disabled = ':is([data-disabled], :has(:disabled))';\nconst hover = ':hover:not(:focus-within, [data-disabled])';\nconst invalid = \":has([data-invalid], [aria-invalid='true'])\";\nconst invalidIdle =\n  \":has([data-invalid], [aria-invalid='true']):is(:focus-within, :not(:hover), [data-disabled])\";\nconst invalidFocus = \":has([data-invalid], [aria-invalid='true']):focus-within\";\nconst validFocus = \":focus-within:not(:has([data-invalid], [aria-invalid='true']))\";\n\nconst lobeShadow = `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`;\nconst primaryRing = `0 0 0 2px ${cssVar.colorPrimaryBg}`;\nconst errorRing = `0 0 0 2px ${cssVar.colorErrorBg}`;\n\nexport const styles = stylex.create({\n  borderless: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  clear: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'none',\n    borderWidth: 0,\n    flex: 'none',\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorTextQuaternary,\n      ':hover': cssVar.colorTextTertiary,\n    },\n    color: cssVar.colorBgContainer,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    visibility: {\n      default: 'hidden',\n      [stylex.when.ancestor(':focus-within', inputMarker)]: 'visible',\n      [stylex.when.ancestor(':hover', inputMarker)]: 'visible',\n    },\n    height: 16,\n    width: 16,\n  },\n  count: {\n    borderRadius: 999,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillTertiary,\n      ':is([data-over])': cssVar.colorError,\n    },\n    color: {\n      'default': cssVar.colorTextSecondary,\n      ':is([data-over])': cssVar.colorWhite,\n    },\n    display: 'inline-flex',\n    fontSize: 11,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    insetBlockEnd: 6,\n    insetInlineEnd: 8,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 20,\n  },\n  filled: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: {\n      default: cssVar.colorFillTertiary,\n      [hover]: cssVar.colorFillSecondary,\n    },\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  input: {\n    'font': 'inherit',\n    'padding': 0,\n    'borderColor': 'currentcolor',\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'flex': '1',\n    'outline': 'none',\n    'appearance': 'none',\n    'backgroundColor': 'transparent',\n    'color': 'inherit',\n    'minWidth': 0,\n    '::placeholder': {\n      color: cssVar.colorTextPlaceholder,\n    },\n  },\n  numberControl: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: 4,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}, background 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      ':hover:not(:disabled)': cssVar.colorFillSecondary,\n    },\n    color: {\n      'default': cssVar.colorTextTertiary,\n      ':hover:not(:disabled)': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':disabled': 'not-allowed' },\n    display: 'flex',\n    justifyContent: 'center',\n    opacity: { 'default': null, ':disabled': 0.3 },\n    height: 13,\n    width: 20,\n  },\n  numberControlLarge: {\n    height: 15,\n    width: 22,\n  },\n  numberControls: {\n    flex: 'none',\n    display: 'flex',\n    flexDirection: 'column',\n    marginInlineEnd: -6,\n  },\n  numberControlSmall: {\n    borderRadius: 3,\n    height: 10,\n    width: 16,\n  },\n  numberControlsSmall: {\n    marginInlineEnd: -4,\n  },\n  numberInput: {\n    fontVariantNumeric: 'tabular-nums',\n  },\n  otpCell: {\n    flex: 'none',\n    paddingInline: 0,\n    textAlign: 'center',\n    width: 32,\n  },\n  otpRoot: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  outlined: {\n    borderColor: {\n      default: cssVar.colorBorderSecondary,\n      [hover]: cssVar.colorBorder,\n      [invalidIdle]: cssVar.colorError,\n      [validFocus]: cssVar.colorPrimary,\n    },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: { default: null, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  passwordToggle: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    gap: 8,\n    paddingInline: 12,\n    transition: `background 150ms ${cssVar.motionEaseOut}, border-color 150ms ${cssVar.motionEaseOut}, box-shadow 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    color: { default: cssVar.colorText, [disabled]: cssVar.colorTextQuaternary },\n    cursor: { default: 'text', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontSize: 14,\n    opacity: { default: null, [disabled]: 0.66 },\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing },\n  },\n  shadowOutlined: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  sizeLarge: {\n    borderRadius: cssVar.borderRadiusLG,\n    fontSize: 16,\n    minHeight: 40,\n  },\n  sizeMiddle: {\n    minHeight: 32,\n  },\n  sizeSmall: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingInline: 8,\n    fontSize: 12,\n    minHeight: 24,\n  },\n  slot: {\n    flex: 'none',\n    alignItems: 'center',\n    color: cssVar.colorTextTertiary,\n    display: 'inline-flex',\n  },\n  textarea: {\n    paddingBlock: 8,\n    position: 'relative',\n    height: 'auto',\n  },\n  textareaAutoSize: {\n    fieldSizing: 'content',\n  },\n  textareaClear: {\n    insetBlockStart: 10,\n    insetInlineEnd: 10,\n    position: 'absolute',\n  },\n  textareaControl: {\n    lineHeight: 1.5,\n    resize: 'none',\n    maxHeight: 'var(--textarea-max-height, none)',\n    minHeight: 'calc(1.5em * var(--textarea-min-rows, 2))',\n  },\n  textareaResize: {\n    resize: 'vertical',\n  },\n  textareaWithCount: {\n    paddingBlockEnd: 30,\n  },\n});\n\nconst sizeStyles = {\n  large: styles.sizeLarge,\n  middle: styles.sizeMiddle,\n  small: styles.sizeSmall,\n};\n\nconst variantStyles = {\n  borderless: styles.borderless,\n  filled: styles.filled,\n  outlined: styles.outlined,\n};\n\ninterface RootOptions {\n  shadow?: boolean | null;\n  size?: InputSize | null;\n  variant?: InputVariant | null;\n}\n\nexport const inputRootStyles = ({ shadow, size, variant }: RootOptions = {}) => {\n  const mergedVariant = variant || 'outlined';\n  return [\n    inputMarker,\n    styles.root,\n    sizeStyles[size || 'middle'],\n    variantStyles[mergedVariant],\n    shadow && (mergedVariant === 'outlined' ? styles.shadowOutlined : styles.shadow),\n  ];\n};\n\nexport const rootVariants = (options?: RootOptions) =>\n  stylex.props(inputRootStyles(options)).className ?? '';\n\nconst className = (style: Parameters<typeof styleProps>[0]) => styleProps(style).className;\n\nexport const inputClassNames = {\n  borderless: className(styles.borderless),\n  clear: className(styles.clear),\n  count: className(styles.count),\n  filled: className(styles.filled),\n  input: className(styles.input),\n  invalid: '',\n  numberControl: className(styles.numberControl),\n  numberControlLarge: className(styles.numberControlLarge),\n  numberControls: className(styles.numberControls),\n  numberControlSmall: className(styles.numberControlSmall),\n  numberControlsSmall: className(styles.numberControlsSmall),\n  numberInput: className(styles.numberInput),\n  otpCell: className(styles.otpCell),\n  otpRoot: className(styles.otpRoot),\n  outlined: className(styles.outlined),\n  passwordToggle: className(styles.passwordToggle),\n  root: className([inputMarker, styles.root]),\n  shadow: className(styles.shadow),\n  sizeLarge: className(styles.sizeLarge),\n  sizeMiddle: className(styles.sizeMiddle),\n  sizeSmall: className(styles.sizeSmall),\n  slot: className(styles.slot),\n  textarea: className(styles.textarea),\n  textareaAutoSize: className(styles.textareaAutoSize),\n  textareaClear: className(styles.textareaClear),\n  textareaResize: className(styles.textareaResize),\n  textareaWithCount: className(styles.textareaWithCount),\n};\n"],"mappings":"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"}

package/es/Input/type.d.mts

@@ -1,31 +1,131 @@
-import { Ref } from "react";
-import { InputNumberProps, InputProps, InputRef } from "antd";
-import { OTPProps, OTPRef } from "antd/es/input/OTP/index.js";
-import { PasswordProps } from "antd/es/input/Password.js";
-import { TextAreaProps, TextAreaRef } from "antd/es/input/TextArea.js";
-import { InputNumberRef } from "rc-input-number";
+import { CSSProperties, ComponentProps, KeyboardEvent, ReactNode, Ref } from "react";
+import { Input } from "@base-ui/react/input";
+import { NumberField } from "@base-ui/react/number-field";
+import { OTPField } from "@base-ui/react/otp-field";
 //#region src/Input/type.d.ts
-interface InputProps$1 extends InputProps {
-  ref?: Ref<InputRef>;
-  shadow?: boolean;
+export type InputVariant = 'filled' | 'outlined' | 'borderless';
+export type InputSize = 'small' | 'middle' | 'large';
+export interface InputClassNames {
+  input?: string;
+  prefix?: string;
+  suffix?: string;
 }
-interface TextAreaProps$1 extends TextAreaProps {
-  ref?: Ref<TextAreaRef>;
-  resize?: boolean;
-  shadow?: boolean;
+export interface InputStyles {
+  input?: CSSProperties;
+  prefix?: CSSProperties;
+  suffix?: CSSProperties;
 }
-interface InputNumberProps$1 extends InputNumberProps {
-  ref?: Ref<InputNumberRef>;
+type BaseInputProps = Omit<ComponentProps<typeof Input>, 'size' | 'prefix' | 'render' | 'className' | 'style'>;
+export interface InputProps extends BaseInputProps {
+  allowClear?: boolean;
+  className?: string;
+  /**
+   * Custom class names for each part
+   */
+  classNames?: InputClassNames;
+  onClear?: () => void;
+  onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  /**
+   * Prefix node rendered before the input
+   */
+  prefix?: ReactNode;
+  /**
+   * Reference to the input element
+   */
+  ref?: Ref<HTMLInputElement>;
+  /**
+   * Apply lobe shadow style
+   */
   shadow?: boolean;
+  /**
+   * Size of the input
+   * @default 'middle'
+   */
+  size?: InputSize;
+  style?: CSSProperties;
+  /**
+   * Custom styles for each part
+   */
+  styles?: InputStyles;
+  /**
+   * Suffix node rendered after the input
+   */
+  suffix?: ReactNode;
+  /**
+   * Visual variant, defaults to `filled` in dark mode and `outlined` in light mode
+   */
+  variant?: InputVariant;
 }
-interface InputPasswordProps extends PasswordProps {
-  ref?: Ref<InputRef>;
+export interface InputPasswordProps extends Omit<InputProps, 'type'> {
+  /**
+   * Show the eye toggle button
+   * @default true
+   */
+  visibilityToggle?: boolean;
+}
+type BaseNumberFieldProps = Omit<ComponentProps<typeof NumberField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children' | 'prefix'>;
+export interface InputNumberProps extends BaseNumberFieldProps {
+  /**
+   * Change value on wheel scrub
+   */
+  changeOnWheel?: boolean;
+  className?: string;
+  classNames?: Pick<InputClassNames, 'input'>;
+  /**
+   * Show increment/decrement buttons
+   * @default true
+   */
+  controls?: boolean;
+  onChange?: (value: number | null) => void;
+  onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  precision?: number;
+  prefix?: ReactNode;
+  ref?: Ref<HTMLInputElement>;
   shadow?: boolean;
+  size?: InputSize;
+  style?: CSSProperties;
+  styles?: Pick<InputStyles, 'input'>;
+  suffix?: ReactNode;
+  variant?: InputVariant;
 }
-interface InputOPTProps extends OTPProps {
-  ref?: Ref<OTPRef>;
+type BaseOTPFieldProps = Omit<ComponentProps<typeof OTPField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children' | 'length'>;
+export interface InputOTPProps extends BaseOTPFieldProps {
+  className?: string;
+  classNames?: Pick<InputClassNames, 'input'>;
+  /**
+   * Number of cells
+   * @default 6
+   */
+  length?: number;
+  onChange?: (value: string) => void;
   shadow?: boolean;
+  size?: InputSize;
+  style?: CSSProperties;
+  styles?: Pick<InputStyles, 'input'>;
+  variant?: InputVariant;
+}
+export type TextAreaAutoSize = boolean | {
+  maxRows?: number;
+  minRows?: number;
+};
+export interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'prefix'>, Pick<InputProps, 'shadow' | 'variant'> {
+  allowClear?: boolean;
+  /**
+   * Auto grow with content, optionally bounded by minRows/maxRows
+   */
+  autoSize?: TextAreaAutoSize;
+  classNames?: Pick<InputClassNames, 'input'>;
+  onClear?: () => void;
+  onPressEnter?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  ref?: Ref<HTMLTextAreaElement>;
+  /**
+   * Allow manual resize
+   * @default false
+   */
+  resize?: boolean;
+  showCount?: boolean;
+  styles?: Pick<InputStyles, 'input'>;
 }
 //#endregion
-export { InputNumberProps$1 as InputNumberProps, InputOPTProps, InputPasswordProps, InputProps$1 as InputProps, TextAreaProps$1 as TextAreaProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Layout/Layout.mjs

@@ -1,5 +1,6 @@
 "use client";
-import DraggablePanel from "../DraggablePanel/index.mjs";
+import { useResponsive } from "../styles/theme/scope.mjs";
+import DraggablePanel from "../DraggablePanel/DraggablePanel.mjs";
 import { styles } from "./style.mjs";
 import { LayoutFooter } from "./components/LayoutFooter.mjs";
 import { LayoutHeader } from "./components/LayoutHeader.mjs";
@@ -9,7 +10,7 @@ import { LayoutSidebarInner } from "./components/LayoutSidebarInner.mjs";
 import { LayoutToc } from "./components/LayoutToc.mjs";
 import { memo, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/Layout/Layout.tsx
 const Layout = memo(({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {
 	const cssVariables = useMemo(() => ({ "--layout-header-height": `${headerHeight}px` }), [headerHeight]);
@@ -42,7 +43,7 @@ const Layout = memo(({ helmet, headerHeight = 64, header, footer, sidebar, aside
 					})
 				}),
 				/* @__PURE__ */ jsx("section", {
-					className: styles.content,
+					...stylex.props(styles.content),
 					children
 				}),
 				!mobile && toc && /* @__PURE__ */ jsx(LayoutToc, {

package/es/Layout/Layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.mjs","names":[],"sources":["../../src/Layout/Layout.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport LayoutFooter from './components/LayoutFooter';\nimport LayoutHeader from './components/LayoutHeader';\nimport LayoutMain from './components/LayoutMain';\nimport LayoutSidebar from './components/LayoutSidebar';\nimport LayoutSidebarInner from './components/LayoutSidebarInner';\nimport LayoutToc from './components/LayoutToc';\nimport { styles } from './style';\nimport type { LayoutProps } from './type';\n\nconst Layout = memo<LayoutProps>(\n  ({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {\n    // Convert headerHeight prop to CSS variable\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--layout-header-height': `${headerHeight}px`,\n      }),\n      [headerHeight],\n    );\n    const { mobile, laptop } = useResponsive();\n    const [expand, setExpand] = useState(true);\n    useEffect(() => {\n      setExpand(Boolean(laptop));\n    }, [laptop]);\n\n    return (\n      <div style={cssVariables}>\n        {helmet}\n        {header && (\n          <LayoutHeader headerHeight={headerHeight}>\n            {header}\n            {mobile && toc && <LayoutToc>{toc}</LayoutToc>}\n          </LayoutHeader>\n        )}\n        <LayoutMain>\n          {!mobile && !sidebar && <nav style={{ width: tocWidth }} />}\n          {!mobile && sidebar && (\n            <LayoutSidebar headerHeight={headerHeight}>\n              <DraggablePanel\n                expand={expand}\n                maxWidth={asideWidth}\n                placement=\"left\"\n                onExpandChange={setExpand}\n              >\n                <LayoutSidebarInner headerHeight={headerHeight}>{sidebar}</LayoutSidebarInner>\n              </DraggablePanel>\n            </LayoutSidebar>\n          )}\n          <section className={styles.content}>{children}</section>\n          {!mobile && toc && <LayoutToc tocWidth={tocWidth}>{toc}</LayoutToc>}\n        </LayoutMain>\n        {footer && <LayoutFooter>{footer}</LayoutFooter>}\n      </div>\n    );\n  },\n);\n\nexport default Layout;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,SAAS,MACZ,EAAE,QAAQ,eAAe,IAAI,QAAQ,QAAQ,SAAS,YAAY,KAAK,UAAU,eAAe;CAE/F,MAAM,eAAe,eACZ,EACL,0BAA0B,GAAG,aAAa,IAC5C,IACA,CAAC,YAAY,CACf;CACA,MAAM,EAAE,QAAQ,WAAW,cAAc;CACzC,MAAM,CAAC,QAAQ,aAAa,SAAS,IAAI;CACzC,gBAAgB;EACd,UAAU,QAAQ,MAAM,CAAC;CAC3B,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA;GACG;GACA,UACC,qBAAC,cAAD;IAA4B;IAA5B,UAAA,CACG,QACA,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,IAAe,CAAA,CACjC;;GAEhB,qBAAC,YAAD,EAAA,UAAA;IACG,CAAC,UAAU,CAAC,WAAW,oBAAC,OAAD,EAAK,OAAO,EAAE,OAAO,SAAS,EAAI,CAAA;IACzD,CAAC,UAAU,WACV,oBAAC,eAAD;KAA6B;KAC3B,UAAA,oBAAC,gBAAD;MACU;MACR,UAAU;MACV,WAAU;MACV,gBAAgB;MAEhB,UAAA,oBAAC,oBAAD;OAAkC;OAAe,UAAA;MAA4B,CAAA;KAC/D,CAAA;IACH,CAAA;IAEjB,oBAAC,WAAD;KAAS,WAAW,OAAO;KAAU;IAAkB,CAAA;IACtD,CAAC,UAAU,OAAO,oBAAC,WAAD;KAAqB;KAAW,UAAA;IAAe,CAAA;GACxD,EAAA,CAAA;GACX,UAAU,oBAAC,cAAD,EAAA,UAAe,OAAqB,CAAA;EAC5C;;AAET,CACF"}
+{"version":3,"file":"Layout.mjs","names":[],"sources":["../../src/Layout/Layout.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport { DraggablePanel } from '@/DraggablePanel';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport LayoutFooter from './components/LayoutFooter';\nimport LayoutHeader from './components/LayoutHeader';\nimport LayoutMain from './components/LayoutMain';\nimport LayoutSidebar from './components/LayoutSidebar';\nimport LayoutSidebarInner from './components/LayoutSidebarInner';\nimport LayoutToc from './components/LayoutToc';\nimport { styles } from './style';\nimport type { LayoutProps } from './type';\n\nconst Layout = memo<LayoutProps>(\n  ({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {\n    // Convert headerHeight prop to CSS variable\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--layout-header-height': `${headerHeight}px`,\n      }),\n      [headerHeight],\n    );\n    const { mobile, laptop } = useResponsive();\n    const [expand, setExpand] = useState(true);\n    useEffect(() => {\n      setExpand(Boolean(laptop));\n    }, [laptop]);\n\n    return (\n      <div style={cssVariables}>\n        {helmet}\n        {header && (\n          <LayoutHeader headerHeight={headerHeight}>\n            {header}\n            {mobile && toc && <LayoutToc>{toc}</LayoutToc>}\n          </LayoutHeader>\n        )}\n        <LayoutMain>\n          {!mobile && !sidebar && <nav style={{ width: tocWidth }} />}\n          {!mobile && sidebar && (\n            <LayoutSidebar headerHeight={headerHeight}>\n              <DraggablePanel\n                expand={expand}\n                maxWidth={asideWidth}\n                placement=\"left\"\n                onExpandChange={setExpand}\n              >\n                <LayoutSidebarInner headerHeight={headerHeight}>{sidebar}</LayoutSidebarInner>\n              </DraggablePanel>\n            </LayoutSidebar>\n          )}\n          <section {...stylex.props(styles.content)}>{children}</section>\n          {!mobile && toc && <LayoutToc tocWidth={tocWidth}>{toc}</LayoutToc>}\n        </LayoutMain>\n        {footer && <LayoutFooter>{footer}</LayoutFooter>}\n      </div>\n    );\n  },\n);\n\nexport default Layout;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,SAAS,MAAmB,EAChC,QACA,eAAe,IACf,QACA,QACA,SACA,YACA,KACA,UACA,eACI;CAEJ,MAAM,eAAe,eAAuC,EAC1D,0BAA0B,GAAG,aAAa,IAC5C,IAAI,CAAC,YAAY,CAAC;CAClB,MAAM,EACJ,QACA,WACE,cAAc;CAClB,MAAM,CAAC,QAAQ,aAAa,SAAS,IAAI;CACzC,gBAAgB;EACd,UAAU,QAAQ,MAAM,CAAC;CAC3B,GAAG,CAAC,MAAM,CAAC;CACX,OAAO,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA;GACA;GACA,UAAU,qBAAC,cAAD;IAA4B;IAA5B,UAAA,CACN,QACA,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,IAAe,CAAA,CACjC;;GAChB,qBAAC,YAAD,EAAA,UAAA;IACG,CAAC,UAAU,CAAC,WAAW,oBAAC,OAAD,EAAK,OAAO,EACtC,OAAO,SACT,EAAI,CAAA;IACC,CAAC,UAAU,WAAW,oBAAC,eAAD;KAA6B;KAChD,UAAA,oBAAC,gBAAD;MAAwB;MAAQ,UAAU;MAAY,WAAU;MAAO,gBAAgB;MACrF,UAAA,oBAAC,oBAAD;OAAkC;OAAe,UAAA;MAA4B,CAAA;KAC/D,CAAA;IACH,CAAA;IACjB,oBAAC,WAAD;KAAS,GAAI,OAAO,MAAM,OAAO,OAAO;KAAI;IAAkB,CAAA;IAC7D,CAAC,UAAU,OAAO,oBAAC,WAAD;KAAqB;KAAW,UAAA;IAAe,CAAA;GACxD,EAAA,CAAA;GACX,UAAU,oBAAC,cAAD,EAAA,UAAe,OAAqB,CAAA;EAC5C;;AACX,CAAC"}

package/es/Layout/components/LayoutFooter.d.mts

@@ -1,7 +1,7 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
 //#region src/Layout/components/LayoutFooter.d.ts
-declare const LayoutFooter: import("react").NamedExoticComponent<DivProps>;
+export declare const LayoutFooter: import("react").NamedExoticComponent<DivProps>;
 //#endregion
-export { LayoutFooter, LayoutFooter as default };
+export { LayoutFooter as default };
 //# sourceMappingURL=LayoutFooter.d.mts.map

package/es/Layout/components/LayoutFooter.mjs

@@ -1,12 +1,12 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { styles } from "../style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
 //#region src/Layout/components/LayoutFooter.tsx
 const LayoutFooter = memo(({ children, className, ...rest }) => {
 	return /* @__PURE__ */ jsx("footer", {
-		className: cx(styles.footer, className),
+		className: styleProps(styles.footer, className).className,
 		...rest,
 		children
 	});

package/es/Layout/components/LayoutFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutFooter.mjs","names":[],"sources":["../../../src/Layout/components/LayoutFooter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutFooterProps } from '../type';\n\nexport const LayoutFooter = memo<LayoutFooterProps>(({ children, className, ...rest }) => {\n  return (\n    <footer className={cx(styles.footer, className)} {...rest}>\n      {children}\n    </footer>\n  );\n});\n\nLayoutFooter.displayName = 'LayoutFooter';\n\nexport default LayoutFooter;\n"],"mappings":";;;;;;AAQA,MAAa,eAAe,MAAyB,EAAE,UAAU,WAAW,GAAG,WAAW;CACxF,OACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAG,GAAI;EAClD;CACK,CAAA;AAEZ,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"LayoutFooter.mjs","names":[],"sources":["../../../src/Layout/components/LayoutFooter.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from '../style';\nimport type { LayoutFooterProps } from '../type';\n\nexport const LayoutFooter = memo<LayoutFooterProps>(({ children, className, ...rest }) => {\n  return (\n    <footer className={styleProps(styles.footer, className).className} {...rest}>\n      {children}\n    </footer>\n  );\n});\n\nLayoutFooter.displayName = 'LayoutFooter';\n\nexport default LayoutFooter;\n"],"mappings":";;;;;;AASA,MAAa,eAAe,MAAyB,EAAE,UAAU,WAAW,GAAG,WAAW;CACxF,OACE,oBAAC,UAAD;EAAQ,WAAW,WAAW,OAAO,QAAQ,SAAS,CAAC,CAAC;EAAW,GAAI;EACpE;CACK,CAAA;AAEZ,CAAC;AAED,aAAa,cAAc"}