@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/awesome/AuroraBackground/style.mjs

@@ -1,141 +1,53 @@
-import { createStaticStyles, keyframes, responsive } from "antd-style";
 //#region src/awesome/AuroraBackground/style.ts
-const aurora = keyframes`
-  0% {
-    background-position: 50% 50%, 50% 50%;
-  }
-  100% {
-    background-position: 350% 50%, 350% 50%;
-  }
-`;
-const darkBackground = `
-  background-image:
-    repeating-linear-gradient(
-      100deg,
-      rgb(0, 0, 0) 0%,
-      rgb(0, 0, 0) 7%,
-      rgba(0, 0, 0, 0%) 10%,
-      rgba(0, 0, 0, 0%) 12%,
-      rgb(0, 0, 0) 16%
-    ),
-    repeating-linear-gradient(
-      100deg,
-      rgb(59, 130, 246) 10%,
-      rgb(165, 180, 252) 15%,
-      rgb(147, 197, 253) 20%,
-      rgb(221, 214, 254) 25%,
-      rgb(96, 165, 250) 30%
-    );
-`;
-const lightBackground = `
-  background-image:
-    repeating-linear-gradient(
-      100deg,
-      rgb(255, 255, 255) 0%,
-      rgb(255, 255, 255) 7%,
-      rgba(0, 0, 0, 0%) 10%,
-      rgba(0, 0, 0, 0%) 12%,
-      rgb(255, 255, 255) 16%
-    ),
-    repeating-linear-gradient(
-      100deg,
-      rgb(59, 130, 246) 10%,
-      rgb(165, 180, 252) 15%,
-      rgb(147, 197, 253) 20%,
-      rgb(221, 214, 254) 25%,
-      rgb(96, 165, 250) 30%
-    );
-`;
-const styles = createStaticStyles(({ css }) => ({
-	bgDark: css`
-    ${darkBackground}
-    pointer-events: none;
-    will-change: transform;
-
-    position: absolute;
-    inset: -10px;
-
-    max-height: 100vh;
-
-    opacity: 0.3;
-    background-position:
-      50% 50%,
-      50% 50%;
-    background-size: 300%, 200%;
-    filter: blur(10px) invert(0);
-
-    animation: ${aurora} 100s linear infinite;
-
-    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);
-
-    &::after {
-      ${darkBackground}
-      position: absolute;
-
-      content: '';
-
-      inset: 0;
-
-      animation: ${aurora} 100s linear infinite;
-
-      mix-blend-mode: difference;
-      background-attachment: fixed;
-      background-size: 200%, 100%;
-    }
-
-    ${responsive.sm} {
-      transform: scale(2);
-      max-height: 25vh;
-    }
-  `,
-	bgLight: css`
-    ${lightBackground}
-    pointer-events: none;
-    will-change: transform;
-
-    position: absolute;
-    inset: -10px;
-
-    max-height: 100vh;
-
-    opacity: 0.6;
-    background-position:
-      50% 50%,
-      50% 50%;
-    background-size: 300%, 200%;
-    filter: blur(10px) invert(1);
-
-    animation: ${aurora} 100s linear infinite;
-
-    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);
-
-    &::after {
-      ${lightBackground}
-      position: absolute;
-
-      content: '';
-
-      inset: 0;
-
-      animation: ${aurora} 100s linear infinite;
-
-      mix-blend-mode: difference;
-      background-attachment: fixed;
-      background-size: 200%, 100%;
-    }
-
-    ${responsive.sm} {
-      transform: scale(2);
-      max-height: 25vh;
-    }
-  `,
-	wrapper: css`
-    position: absolute;
-    z-index: 0;
-    inset: 0;
-    overflow: hidden;
-  `
-}));
+const styles = {
+	bg: {
+		kpwlN0: "lbk9nw1o",
+		k1YJky: "lbt6pys0",
+		k44tkh: "lbcs2qfc",
+		ko0y90: "lba4qsjk",
+		kKVMdj: "lb11jb8ed",
+		kyAemX: "lb1esw782",
+		kgSjnq: "lbhanz7k",
+		kX1K2I: "lbt2nghk",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		k3aq6I: "lb1gur3ha",
+		k6sLGO: "lb1so62im",
+		kskxy: "lb1bwycvy lb1i3j3n0",
+		kv0HGH: "lbarstr8",
+		kh3gPk: "lb1buahrt",
+		kVUETb: "lb13ee8us",
+		kFguJn: "lbwkc154",
+		kYqdJW: "lb15y3wy1",
+		kg3FMZ: "lb15byv15",
+		kakxe6: "lb6clwu2",
+		k5JduY: "lb100rkj9",
+		kR4hYe: "lbg9mdyn",
+		kwXMNM: "lb1j6awrg",
+		$$css: true
+	},
+	bgDark: {
+		kKwaWg: "lbrfa9lx",
+		ku685b: "lb1d4pypk",
+		kSiTet: "lbuzhngd",
+		kNctxI: "lb1h2x0ap",
+		$$css: true
+	},
+	bgLight: {
+		kKwaWg: "lblxcre1",
+		ku685b: "lb1gsg1lh",
+		kSiTet: "lb197sbye",
+		kNctxI: "lbf5al9z",
+		$$css: true
+	},
+	wrapper: {
+		kpwlN0: "lb10a8y8t",
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1ja2u2z",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/awesome/AuroraBackground/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/AuroraBackground/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes, responsive } from 'antd-style';\n\nconst aurora = keyframes`\n  0% {\n    background-position: 50% 50%, 50% 50%;\n  }\n  100% {\n    background-position: 350% 50%, 350% 50%;\n  }\n`;\n\nconst darkBackground = `\n  background-image:\n    repeating-linear-gradient(\n      100deg,\n      rgb(0, 0, 0) 0%,\n      rgb(0, 0, 0) 7%,\n      rgba(0, 0, 0, 0%) 10%,\n      rgba(0, 0, 0, 0%) 12%,\n      rgb(0, 0, 0) 16%\n    ),\n    repeating-linear-gradient(\n      100deg,\n      rgb(59, 130, 246) 10%,\n      rgb(165, 180, 252) 15%,\n      rgb(147, 197, 253) 20%,\n      rgb(221, 214, 254) 25%,\n      rgb(96, 165, 250) 30%\n    );\n`;\n\nconst lightBackground = `\n  background-image:\n    repeating-linear-gradient(\n      100deg,\n      rgb(255, 255, 255) 0%,\n      rgb(255, 255, 255) 7%,\n      rgba(0, 0, 0, 0%) 10%,\n      rgba(0, 0, 0, 0%) 12%,\n      rgb(255, 255, 255) 16%\n    ),\n    repeating-linear-gradient(\n      100deg,\n      rgb(59, 130, 246) 10%,\n      rgb(165, 180, 252) 15%,\n      rgb(147, 197, 253) 20%,\n      rgb(221, 214, 254) 25%,\n      rgb(96, 165, 250) 30%\n    );\n`;\n\nexport const styles = createStaticStyles(({ css }) => ({\n  bgDark: css`\n    ${darkBackground}\n    pointer-events: none;\n    will-change: transform;\n\n    position: absolute;\n    inset: -10px;\n\n    max-height: 100vh;\n\n    opacity: 0.3;\n    background-position:\n      50% 50%,\n      50% 50%;\n    background-size: 300%, 200%;\n    filter: blur(10px) invert(0);\n\n    animation: ${aurora} 100s linear infinite;\n\n    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n    &::after {\n      ${darkBackground}\n      position: absolute;\n\n      content: '';\n\n      inset: 0;\n\n      animation: ${aurora} 100s linear infinite;\n\n      mix-blend-mode: difference;\n      background-attachment: fixed;\n      background-size: 200%, 100%;\n    }\n\n    ${responsive.sm} {\n      transform: scale(2);\n      max-height: 25vh;\n    }\n  `,\n\n  bgLight: css`\n    ${lightBackground}\n    pointer-events: none;\n    will-change: transform;\n\n    position: absolute;\n    inset: -10px;\n\n    max-height: 100vh;\n\n    opacity: 0.6;\n    background-position:\n      50% 50%,\n      50% 50%;\n    background-size: 300%, 200%;\n    filter: blur(10px) invert(1);\n\n    animation: ${aurora} 100s linear infinite;\n\n    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n    &::after {\n      ${lightBackground}\n      position: absolute;\n\n      content: '';\n\n      inset: 0;\n\n      animation: ${aurora} 100s linear infinite;\n\n      mix-blend-mode: difference;\n      background-attachment: fixed;\n      background-size: 200%, 100%;\n    }\n\n    ${responsive.sm} {\n      transform: scale(2);\n      max-height: 25vh;\n    }\n  `,\n\n  wrapper: css`\n    position: absolute;\n    z-index: 0;\n    inset: 0;\n    overflow: hidden;\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;AAoBvB,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;AAoBxB,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,QAAQ,GAAG;MACP,eAAe;;;;;;;;;;;;;;;;iBAgBJ,OAAO;;;;;QAKhB,eAAe;;;;;;;mBAOJ,OAAO;;;;;;;MAOpB,WAAW,GAAG;;;;;CAMlB,SAAS,GAAG;MACR,gBAAgB;;;;;;;;;;;;;;;;iBAgBL,OAAO;;;;;QAKhB,gBAAgB;;;;;;;mBAOL,OAAO;;;;;;;MAOpB,WAAW,GAAG;;;;;CAMlB,SAAS,GAAG;;;;;;AAMd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/AuroraBackground/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { media } from '@/styles/stylex/media.stylex';\n\nconst aurora = stylex.keyframes({\n  '0%': { backgroundPosition: '50% 50%, 50% 50%' },\n  '100%': { backgroundPosition: '350% 50%, 350% 50%' },\n});\n\nconst stripes =\n  'repeating-linear-gradient(100deg, rgb(59, 130, 246) 10%, rgb(165, 180, 252) 15%, rgb(147, 197, 253) 20%, rgb(221, 214, 254) 25%, rgb(96, 165, 250) 30%)';\n\nconst darkBackground = `repeating-linear-gradient(100deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 7%, rgba(0, 0, 0, 0%) 10%, rgba(0, 0, 0, 0%) 12%, rgb(0, 0, 0) 16%), ${stripes}`;\n\nconst lightBackground = `repeating-linear-gradient(100deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 7%, rgba(0, 0, 0, 0%) 10%, rgba(0, 0, 0, 0%) 12%, rgb(255, 255, 255) 16%), ${stripes}`;\n\nexport const styles = stylex.create({\n  bg: {\n    'inset': -10,\n    'backgroundPosition': '50% 50%, 50% 50%',\n    'animationDuration': '100s',\n    'animationIterationCount': 'infinite',\n    'animationName': aurora,\n    'animationTimingFunction': 'linear',\n    'backgroundSize': '300%, 200%',\n    'maskImage': 'radial-gradient(at 100% 0, rgb(0 0 0) 10%, rgb(0 0 0 / 0%) 70%)',\n    'pointerEvents': 'none',\n    'position': 'absolute',\n    'transform': { default: null, [media.sm]: 'scale(2)' },\n    'willChange': 'transform',\n    'maxHeight': { default: '100vh', [media.sm]: '25vh' },\n    '::after': {\n      inset: 0,\n      animationDuration: '100s',\n      animationIterationCount: 'infinite',\n      animationName: aurora,\n      animationTimingFunction: 'linear',\n      backgroundAttachment: 'fixed',\n      backgroundSize: '200%, 100%',\n      content: \"''\",\n      mixBlendMode: 'difference',\n      position: 'absolute',\n    },\n  },\n  bgDark: {\n    'backgroundImage': darkBackground,\n    'filter': 'blur(10px) invert(0)',\n    'opacity': 0.3,\n    '::after': { backgroundImage: darkBackground },\n  },\n  bgLight: {\n    'backgroundImage': lightBackground,\n    'filter': 'blur(10px) invert(1)',\n    'opacity': 0.6,\n    '::after': { backgroundImage: lightBackground },\n  },\n  wrapper: {\n    inset: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    zIndex: 0,\n  },\n});\n"],"mappings":";AAOA,MAAa,SAAS;CACpB,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/awesome/AuroraBackground/type.d.mts

@@ -2,7 +2,7 @@ import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
 import { CSSProperties, Ref } from "react";
 //#region src/awesome/AuroraBackground/type.d.ts
-interface AuroraBackgroundProps extends FlexboxProps {
+export interface AuroraBackgroundProps extends FlexboxProps {
   classNames?: {
     content?: string;
     wrapper?: string;
@@ -14,5 +14,4 @@ interface AuroraBackgroundProps extends FlexboxProps {
   };
 }
 //#endregion
-export { AuroraBackgroundProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/BentoGrid/BentoCard.mjs

@@ -1,34 +1,34 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { renderLandingLink } from "../landingLink.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/BentoGrid/BentoCard.tsx
 const BentoCard = memo(({ children, className, colSpan = 1, hint, href, renderLink, rowSpan = 1, style, title, ...rest }) => /* @__PURE__ */ jsxs("div", {
-	className: cx(styles.card, className),
 	"data-wide": colSpan > 2,
-	style: {
+	...styleProps(styles.card, className, {
 		"--bento-col-span": colSpan,
 		"--bento-row-span": rowSpan,
 		...style
-	},
+	}),
 	...rest,
 	children: [(title || hint) && /* @__PURE__ */ jsxs("div", {
-		className: styles.header,
+		...stylex.props(styles.header),
 		children: [title && (href ? renderLandingLink(renderLink, {
 			children: title,
-			className: styles.title,
+			className: stylex.props(styles.title).className,
 			href
 		}) : /* @__PURE__ */ jsx("span", {
-			className: styles.title,
+			...stylex.props(styles.title),
 			children: title
 		})), hint && /* @__PURE__ */ jsx("span", {
-			className: styles.hint,
+			...stylex.props(styles.hint),
 			children: hint
 		})]
 	}), /* @__PURE__ */ jsx("div", {
-		className: styles.body,
+		...styleProps(styles.body, "lobe-bento-card-body"),
 		children
 	})]
 }));

package/es/awesome/BentoGrid/BentoCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BentoCard.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/BentoCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingLink } from '@/awesome/landingLink';\n\nimport { styles } from './style';\nimport type { BentoCardProps } from './type';\n\nconst BentoCard = memo<BentoCardProps>(\n  ({\n    children,\n    className,\n    colSpan = 1,\n    hint,\n    href,\n    renderLink,\n    rowSpan = 1,\n    style,\n    title,\n    ...rest\n  }) => (\n    <div\n      className={cx(styles.card, className)}\n      data-wide={colSpan > 2}\n      style={\n        { '--bento-col-span': colSpan, '--bento-row-span': rowSpan, ...style } as CSSProperties\n      }\n      {...rest}\n    >\n      {(title || hint) && (\n        <div className={styles.header}>\n          {title &&\n            (href ? (\n              renderLandingLink(renderLink, { children: title, className: styles.title, href })\n            ) : (\n              <span className={styles.title}>{title}</span>\n            ))}\n          {hint && <span className={styles.hint}>{hint}</span>}\n        </div>\n      )}\n      <div className={styles.body}>{children}</div>\n    </div>\n  ),\n);\n\nBentoCard.displayName = 'BentoCard';\n\nexport default BentoCard;\n"],"mappings":";;;;;;;AAUA,MAAM,YAAY,MACf,EACC,UACA,WACA,UAAU,GACV,MACA,MACA,YACA,UAAU,GACV,OACA,OACA,GAAG,WAEH,qBAAC,OAAD;CACE,WAAW,GAAG,OAAO,MAAM,SAAS;CACpC,aAAW,UAAU;CACrB,OACE;EAAE,oBAAoB;EAAS,oBAAoB;EAAS,GAAG;CAAM;CAEvE,GAAI;CANN,UAAA,EAQI,SAAS,SACT,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,UACE,OACC,kBAAkB,YAAY;GAAE,UAAU;GAAO,WAAW,OAAO;GAAO;EAAK,CAAC,IAEhF,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAQ,UAAA;EAAY,CAAA,IAE/C,QAAQ,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA;EAAW,CAAA,CAChD;CAEP,CAAA,GAAA,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAO;CAAc,CAAA,CACzC;AAET,CAAA,CAAA;AAEA,UAAU,cAAc"}
+{"version":3,"file":"BentoCard.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/BentoCard.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingLink } from '@/awesome/landingLink';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { BentoCardProps } from './type';\n\nconst BentoCard = memo<BentoCardProps>(\n  ({\n    children,\n    className,\n    colSpan = 1,\n    hint,\n    href,\n    renderLink,\n    rowSpan = 1,\n    style,\n    title,\n    ...rest\n  }) => (\n    <div\n      data-wide={colSpan > 2}\n      {...styleProps(styles.card, className, {\n        '--bento-col-span': colSpan,\n        '--bento-row-span': rowSpan,\n        ...style,\n      } as CSSProperties)}\n      {...rest}\n    >\n      {(title || hint) && (\n        <div {...stylex.props(styles.header)}>\n          {title &&\n            (href ? (\n              renderLandingLink(renderLink, {\n                children: title,\n                className: stylex.props(styles.title).className,\n                href,\n              })\n            ) : (\n              <span {...stylex.props(styles.title)}>{title}</span>\n            ))}\n          {hint && <span {...stylex.props(styles.hint)}>{hint}</span>}\n        </div>\n      )}\n      <div {...styleProps(styles.body, 'lobe-bento-card-body')}>{children}</div>\n    </div>\n  ),\n);\n\nBentoCard.displayName = 'BentoCard';\n\nexport default BentoCard;\n"],"mappings":";;;;;;;;AASA,MAAM,YAAY,MAAsB,EACtC,UACA,WACA,UAAU,GACV,MACA,MACA,YACA,UAAU,GACV,OACA,OACA,GAAG,WACC,qBAAC,OAAD;CAAK,aAAW,UAAU;CAAG,GAAI,WAAW,OAAO,MAAM,WAAW;EACxE,oBAAoB;EACpB,oBAAoB;EACpB,GAAG;CACL,CAAkB;CAAG,GAAI;CAJnB,UAAA,EAKE,SAAS,SAAS,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,MAAM;EAAnC,UAAA,CACf,UAAU,OAAO,kBAAkB,YAAY;GACpD,UAAU;GACV,WAAW,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC;GACtC;EACF,CAAC,IAAI,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,KAAK;GAAI,UAAA;EAAY,CAAA,IACjD,QAAQ,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GAAI,UAAA;EAAW,CAAA,CACvD;CACP,CAAA,GAAA,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,sBAAsB;EAAI;CAAc,CAAA,CACtE;AAAC,CAAA,CAAA;AACV,UAAU,cAAc"}

package/es/awesome/BentoGrid/BentoGrid.mjs

@@ -1,16 +1,15 @@
 "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/awesome/BentoGrid/BentoGrid.tsx
 const BentoGrid = memo(({ className, columns = 4, rowHeight = 120, style, ...rest }) => /* @__PURE__ */ jsx("div", {
-	className: cx(styles.grid, className),
-	style: {
+	...styleProps(styles.grid, className, {
 		"--bento-columns": columns,
 		"--bento-row-height": `${rowHeight}px`,
 		...style
-	},
+	}),
 	...rest
 }));
 BentoGrid.displayName = "BentoGrid";

package/es/awesome/BentoGrid/BentoGrid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BentoGrid.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/BentoGrid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styles } from './style';\nimport type { BentoGridProps } from './type';\n\nconst BentoGrid = memo<BentoGridProps>(\n  ({ className, columns = 4, rowHeight = 120, style, ...rest }) => (\n    <div\n      className={cx(styles.grid, className)}\n      style={\n        {\n          '--bento-columns': columns,\n          '--bento-row-height': `${rowHeight}px`,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n    />\n  ),\n);\n\nBentoGrid.displayName = 'BentoGrid';\n\nexport default BentoGrid;\n"],"mappings":";;;;;;AAQA,MAAM,YAAY,MACf,EAAE,WAAW,UAAU,GAAG,YAAY,KAAK,OAAO,GAAG,WACpD,oBAAC,OAAD;CACE,WAAW,GAAG,OAAO,MAAM,SAAS;CACpC,OACE;EACE,mBAAmB;EACnB,sBAAsB,GAAG,UAAU;EACnC,GAAG;CACL;CAEF,GAAI;AACL,CAAA,CAEL;AAEA,UAAU,cAAc"}
+{"version":3,"file":"BentoGrid.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/BentoGrid.tsx"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { BentoGridProps } from './type';\n\nconst BentoGrid = memo<BentoGridProps>(\n  ({ className, columns = 4, rowHeight = 120, style, ...rest }) => (\n    <div\n      {...styleProps(styles.grid, className, {\n        '--bento-columns': columns,\n        '--bento-row-height': `${rowHeight}px`,\n        ...style,\n      } as CSSProperties)}\n      {...rest}\n    />\n  ),\n);\n\nBentoGrid.displayName = 'BentoGrid';\n\nexport default BentoGrid;\n"],"mappings":";;;;;;AASA,MAAM,YAAY,MACf,EAAE,WAAW,UAAU,GAAG,YAAY,KAAK,OAAO,GAAG,WACpD,oBAAC,OAAD;CACE,GAAI,WAAW,OAAO,MAAM,WAAW;EACrC,mBAAmB;EACnB,sBAAsB,GAAG,UAAU;EACnC,GAAG;CACL,CAAkB;CAClB,GAAI;AACL,CAAA,CAEL;AAEA,UAAU,cAAc"}

package/es/awesome/BentoGrid/style.mjs

@@ -1,101 +1,63 @@
-import { createStaticStyles } from "antd-style";
 //#region src/awesome/BentoGrid/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	card: css`
-    display: flex;
-    grid-column: span var(--bento-col-span, 1);
-    grid-row: span var(--bento-row-span, 1);
-    flex-direction: column;
-
-    min-inline-size: 0;
-    padding-block: 14px 16px;
-    padding-inline: 16px;
-    border: 1px solid ${cssVar.colorBorderSecondary};
-    border-radius: ${cssVar.borderRadiusLG};
-
-    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);
-    box-shadow: ${cssVar.boxShadowTertiary};
-
-    transition:
-      border-color 140ms ease,
-      transform 140ms ease,
-      box-shadow 140ms ease;
-
-    &:hover {
-      transform: translateY(-2px);
-      border-color: ${cssVar.colorBorder};
-      box-shadow: ${cssVar.boxShadowSecondary};
-    }
-
-    ${responsive.tablet} {
-      &[data-wide='true'] {
-        grid-column: span 2;
-      }
-    }
-
-    ${responsive.mobile} {
-      grid-column: span 1;
-      grid-row: span 1;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      &:hover {
-        transform: none;
-      }
-    }
-  `,
-	body: css`
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-
-    min-inline-size: 0;
-    margin-block-start: 12px;
-
-    > * {
-      max-inline-size: 100%;
-    }
-  `,
-	grid: css`
-    display: grid;
-    grid-auto-rows: minmax(var(--bento-row-height), auto);
-    grid-template-columns: repeat(var(--bento-columns), minmax(0, 1fr));
-    gap: 12px;
-
-    ${responsive.tablet} {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    ${responsive.mobile} {
-      grid-template-columns: 1fr;
-    }
-  `,
-	header: css`
-    display: flex;
-    gap: 8px;
-    align-items: baseline;
-    justify-content: space-between;
-  `,
-	hint: css`
-    overflow: hidden;
-
-    font-size: 11px;
-    color: ${cssVar.colorTextTertiary};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-	title: css`
-    font-size: ${cssVar.fontSizeSM};
-    font-weight: 600;
-    color: ${cssVar.colorText};
-    text-decoration: none;
-
-    &[href]:hover {
-      color: ${cssVar.colorPrimary};
-    }
-  `
-}));
+const styles = {
+	body: {
+		kUk6DE: "lb98rzlu",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lbl56j7k",
+		keoZOQ: "lb14vqqas",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	card: {
+		kVAM5u: "lb10cypdb lb3mg3nv",
+		kaIpWk: "lb1ndkxwp",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kBCFzs: "lb1zn0yr lb1d0fxmx lb1l92sca",
+		kbNqZ1: "lb1m30xi9 lb18noeup",
+		kg3NbH: "lb1hr3lfm",
+		kmkexE: "lb1ut79mn",
+		kWkggS: "lb1sy65q1",
+		kGVxlE: "lb1c4gvbl lb1ejz3n7",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k7Eaqz: "lbeuugli",
+		kGO01o: "lb1l90r2v",
+		kLKAdn: "lbyinxu5",
+		k3aq6I: "lb1lz31oe lbnotfpo",
+		$$css: true
+	},
+	grid: {
+		kOIVth: "lb1v2ro7d",
+		k1xSpc: "lbrvj5dj",
+		kJBjZk: "lb19zsl4l",
+		kumcoG: "lb1bucrzt lb1s63ql6 lbmbhe7x",
+		$$css: true
+	},
+	header: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb1pha0wt",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lb1qughib",
+		$$css: true
+	},
+	hint: {
+		kVQacm: "lbb3r6kr",
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lb1j6dyjg",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	title: {
+		kybGjl: "lb1hl2dhg",
+		kMwMTN: "lb66ogz0 lb16i6i0c",
+		kGuDYH: "lbxobqjj",
+		k63SB2: "lb1s688f",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/awesome/BentoGrid/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  card: css`\n    display: flex;\n    grid-column: span var(--bento-col-span, 1);\n    grid-row: span var(--bento-row-span, 1);\n    flex-direction: column;\n\n    min-inline-size: 0;\n    padding-block: 14px 16px;\n    padding-inline: 16px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition:\n      border-color 140ms ease,\n      transform 140ms ease,\n      box-shadow 140ms ease;\n\n    &:hover {\n      transform: translateY(-2px);\n      border-color: ${cssVar.colorBorder};\n      box-shadow: ${cssVar.boxShadowSecondary};\n    }\n\n    ${responsive.tablet} {\n      &[data-wide='true'] {\n        grid-column: span 2;\n      }\n    }\n\n    ${responsive.mobile} {\n      grid-column: span 1;\n      grid-row: span 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      &:hover {\n        transform: none;\n      }\n    }\n  `,\n  body: css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n\n    min-inline-size: 0;\n    margin-block-start: 12px;\n\n    > * {\n      max-inline-size: 100%;\n    }\n  `,\n  grid: css`\n    display: grid;\n    grid-auto-rows: minmax(var(--bento-row-height), auto);\n    grid-template-columns: repeat(var(--bento-columns), minmax(0, 1fr));\n    gap: 12px;\n\n    ${responsive.tablet} {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    ${responsive.mobile} {\n      grid-template-columns: 1fr;\n    }\n  `,\n  header: css`\n    display: flex;\n    gap: 8px;\n    align-items: baseline;\n    justify-content: space-between;\n  `,\n  hint: css`\n    overflow: hidden;\n\n    font-size: 11px;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  title: css`\n    font-size: ${cssVar.fontSizeSM};\n    font-weight: 600;\n    color: ${cssVar.colorText};\n    text-decoration: none;\n\n    &[href]:hover {\n      color: ${cssVar.colorPrimary};\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;;;;;;;wBASa,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;qCAEN,OAAO,gBAAgB;kBAC1C,OAAO,kBAAkB;;;;;;;;;sBASrB,OAAO,YAAY;oBACrB,OAAO,mBAAmB;;;MAGxC,WAAW,OAAO;;;;;;MAMlB,WAAW,OAAO;;;;;;;;;;;CAWtB,MAAM,GAAG;;;;;;;;;;;;;CAaT,MAAM,GAAG;;;;;;MAML,WAAW,OAAO;;;;MAIlB,WAAW,OAAO;;;;CAItB,QAAQ,GAAG;;;;;;CAMX,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;;;CAIpC,OAAO,GAAG;iBACK,OAAO,WAAW;;aAEtB,OAAO,UAAU;;;;eAIf,OAAO,aAAa;;;AAGnC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nconst tabletOnly = '@media (min-width: 480px) and (max-width: 767.98px)';\n\nexport const styles = stylex.create({\n  body: {\n    flex: '1',\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n    marginBlockStart: 12,\n    minInlineSize: 0,\n  },\n  card: {\n    borderColor: {\n      'default': cssVar.colorBorderSecondary,\n      ':hover': cssVar.colorBorder,\n    },\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gridColumn: {\n      default: 'span var(--bento-col-span, 1)',\n      [tabletOnly]: { 'default': null, ':is([data-wide=\"true\"])': 'span 2' },\n      [media.mobile]: 'span 1',\n    },\n    gridRow: {\n      default: 'span var(--bento-row-span, 1)',\n      [media.mobile]: 'span 1',\n    },\n    paddingInline: 16,\n    transition: 'border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent)`,\n    boxShadow: {\n      'default': cssVar.boxShadowTertiary,\n      ':hover': cssVar.boxShadowSecondary,\n    },\n    display: 'flex',\n    flexDirection: 'column',\n    minInlineSize: 0,\n    paddingBlockEnd: '16px',\n    paddingBlockStart: '14px',\n    transform: {\n      'default': null,\n      ':hover': 'translateY(-2px)',\n      '@media (prefers-reduced-motion: reduce)': { 'default': null, ':hover': 'none' },\n    },\n  },\n  grid: {\n    gap: 12,\n    display: 'grid',\n    gridAutoRows: 'minmax(var(--bento-row-height), auto)',\n    gridTemplateColumns: {\n      default: 'repeat(var(--bento-columns), minmax(0, 1fr))',\n      [tabletOnly]: 'repeat(2, minmax(0, 1fr))',\n      [media.mobile]: '1fr',\n    },\n  },\n  header: {\n    gap: 8,\n    alignItems: 'baseline',\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  hint: {\n    overflow: 'hidden',\n    color: cssVar.colorTextTertiary,\n    fontSize: 11,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  title: {\n    textDecoration: 'none',\n    color: {\n      'default': cssVar.colorText,\n      ':is([href]):hover': cssVar.colorPrimary,\n    },\n    fontSize: cssVar.fontSizeSM,\n    fontWeight: 600,\n  },\n});\n"],"mappings":";AAMA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/awesome/BentoGrid/type.d.mts

@@ -2,7 +2,7 @@ import { DivProps } from "../../types/index.mjs";
 import { LandingLinkRender } from "../landingLink.mjs";
 import { ReactNode } from "react";
 //#region src/awesome/BentoGrid/type.d.ts
-interface BentoGridProps extends DivProps {
+export interface BentoGridProps extends DivProps {
   children?: ReactNode;
   /**
    * Columns on wide screens. The grid drops to two columns on tablets and one on phones.
@@ -15,7 +15,7 @@ interface BentoGridProps extends DivProps {
    */
   rowHeight?: number;
 }
-interface BentoCardProps extends Omit<DivProps, 'title'> {
+export interface BentoCardProps extends Omit<DivProps, 'title'> {
   /** The live content of the tile. Render real components, not screenshots. */
   children?: ReactNode;
   /**
@@ -36,5 +36,4 @@ interface BentoCardProps extends Omit<DivProps, 'title'> {
   title?: ReactNode;
 }
 //#endregion
-export { BentoCardProps, BentoGridProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/BottomGradientButton/BottomGradientButton.mjs

@@ -1,16 +1,16 @@
 "use client";
-import Button from "../../base-ui/Button/Button.mjs";
+import { ButtonImpl } from "../../Button/Button.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
 //#region src/awesome/BottomGradientButton/BottomGradientButton.tsx
 const BottomGradientButton = memo(({ className, children, style, ref, ...rest }) => {
-	return /* @__PURE__ */ jsx(Button, {
-		className: cx(styles, className),
+	return /* @__PURE__ */ jsx(ButtonImpl, {
+		className,
 		ref,
 		shape: "round",
 		type: "fill",
+		xstyle: styles.root,
 		style: {
 			paddingInline: 16,
 			width: "unset",

package/es/awesome/BottomGradientButton/BottomGradientButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomGradientButton.mjs","names":[],"sources":["../../../src/awesome/BottomGradientButton/BottomGradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport Button from '@/base-ui/Button';\n\nimport { styles } from './style';\nimport type { BottomGradientButtonProps } from './type';\n\nconst BottomGradientButton = memo<BottomGradientButtonProps>(\n  ({ className, children, style, ref, ...rest }) => {\n    return (\n      <Button\n        className={cx(styles, className)}\n        ref={ref}\n        shape={'round'}\n        type={'fill'}\n        style={{\n          paddingInline: 16,\n          width: 'unset',\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Button>\n    );\n  },\n);\n\nBottomGradientButton.displayName = 'BottomGradientButton';\n\nexport default BottomGradientButton;\n"],"mappings":";;;;;;;AAUA,MAAM,uBAAuB,MAC1B,EAAE,WAAW,UAAU,OAAO,KAAK,GAAG,WAAW;CAChD,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,QAAQ,SAAS;EAC1B;EACL,OAAO;EACP,MAAM;EACN,OAAO;GACL,eAAe;GACf,OAAO;GACP,GAAG;EACL;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CACF;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"BottomGradientButton.mjs","names":[],"sources":["../../../src/awesome/BottomGradientButton/BottomGradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { ButtonImpl } from '@/Button/Button';\n\nimport { styles } from './style';\nimport type { BottomGradientButtonProps } from './type';\n\nconst BottomGradientButton = memo<BottomGradientButtonProps>(\n  ({ className, children, style, ref, ...rest }) => {\n    return (\n      <ButtonImpl\n        className={className}\n        ref={ref}\n        shape={'round'}\n        type={'fill'}\n        xstyle={styles.root}\n        style={{\n          paddingInline: 16,\n          width: 'unset',\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </ButtonImpl>\n    );\n  },\n);\n\nBottomGradientButton.displayName = 'BottomGradientButton';\n\nexport default BottomGradientButton;\n"],"mappings":";;;;;;AASA,MAAM,uBAAuB,MAC1B,EAAE,WAAW,UAAU,OAAO,KAAK,GAAG,WAAW;CAChD,OACE,oBAAC,YAAD;EACa;EACN;EACL,OAAO;EACP,MAAM;EACN,QAAQ,OAAO;EACf,OAAO;GACL,eAAe;GACf,OAAO;GACP,GAAG;EACL;EACA,GAAI;EAEH;CACS,CAAA;AAEhB,CACF;AAEA,qBAAqB,cAAc"}

package/es/awesome/BottomGradientButton/style.mjs

@@ -1,38 +1,21 @@
-import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles, cx } from "antd-style";
 //#region src/awesome/BottomGradientButton/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => cx(staticStylish.resetLinkColor, css`
-      overflow: hidden;
-      font-weight: bold;
-      transition: all 0.2s ease-in-out;
-
-      &::before {
-        content: '';
-
-        position: absolute;
-        inset-block-end: 0;
-
-        display: block;
-
-        width: 50%;
-        height: 1px;
-
-        opacity: 0;
-        background-image: linear-gradient(to right, transparent, ${cssVar.gold}, transparent);
-
-        transition: all 0.2s ease-in-out;
-      }
-
-      &&:not(:hover) {
-        color: ${cssVar.colorTextSecondary};
-      }
-
-      &:hover {
-        &::before {
-          opacity: 1;
-        }
-      }
-    `));
+const styles = { root: {
+	kVQacm: "lbb3r6kr",
+	kmkexE: "lby9syeq",
+	kMwMTN: "lbc77et8 lb1bxu9lh",
+	kkrTdU: "lb1ypdohk",
+	k63SB2: "lb117nqv4",
+	k2g4ti: "lbpd8o3w",
+	k3DiCg: "lb1h34v2x",
+	kgeoSG: "lb10tli2e",
+	kP1sEF: "lb1fgarty",
+	k5Ofw7: "lbhq5o37",
+	k5QlbN: "lb124lp2h lb1a9ivi1",
+	kEoFBp: "lb1hmns74",
+	kgzTxl: "lby80zi5",
+	kOlAkY: "lb1t94pr5",
+	$$css: true
+} };
 //#endregion
 export { styles };
 

package/es/awesome/BottomGradientButton/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/awesome/BottomGradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) =>\n  cx(\n    lobeStaticStylish.resetLinkColor,\n    css`\n      overflow: hidden;\n      font-weight: bold;\n      transition: all 0.2s ease-in-out;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-end: 0;\n\n        display: block;\n\n        width: 50%;\n        height: 1px;\n\n        opacity: 0;\n        background-image: linear-gradient(to right, transparent, ${cssVar.gold}, transparent);\n\n        transition: all 0.2s ease-in-out;\n      }\n\n      &&:not(:hover) {\n        color: ${cssVar.colorTextSecondary};\n      }\n\n      &:hover {\n        &::before {\n          opacity: 1;\n        }\n      }\n    `,\n  ),\n);\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAC/C,GACEA,cAAkB,gBAClB,GAAG;;;;;;;;;;;;;;;;;mEAiB4D,OAAO,KAAK;;;;;;iBAM9D,OAAO,mBAAmB;;;;;;;;KASzC,CACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/BottomGradientButton/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  root: {\n    'overflow': 'hidden',\n    'transition': 'all 0.2s ease-in-out',\n    'color': { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    'cursor': 'pointer',\n    'fontWeight': 'bold',\n    '::before': {\n      transition: 'all 0.2s ease-in-out',\n      backgroundImage: `linear-gradient(to right, transparent, ${cssVar.gold}, transparent)`,\n      content: \"''\",\n      display: 'block',\n      insetBlockEnd: 0,\n      opacity: { 'default': 0, ':hover': 1 },\n      position: 'absolute',\n      height: 1,\n      width: '50%',\n    },\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS,EACpB,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}