@lobehub/ui 5.57.3 → 6.0.0-beta.1

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

@@ -1,7 +1,6 @@
-import { ButtonProps } from "../../base-ui/Button/type.mjs";
-import "../../base-ui/Button/index.mjs";
+import { ButtonProps } from "../../Button/type.mjs";
+import "../../Button/index.mjs";
 //#region src/awesome/BottomGradientButton/type.d.ts
-type BottomGradientButtonProps = ButtonProps;
+export type BottomGradientButtonProps = ButtonProps;
 //#endregion
-export { BottomGradientButtonProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/CodeShowcase/CodeShowcase.mjs

@@ -1,10 +1,11 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { Highlighter } from "../../Highlighter/Highlighter.mjs";
-import Segmented from "../../base-ui/Segmented/Segmented.mjs";
-import { styles } from "./style.mjs";
+import Segmented from "../../Segmented/Segmented.mjs";
+import { childStyles, styles } from "./style.mjs";
 import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/CodeShowcase/CodeShowcase.tsx
 const CodeShowcase = memo(({ activeKey: controlledKey, className, defaultActiveKey, items, minHeight, onChange, style, ...rest }) => {
 	const [innerKey, setInnerKey] = useState(defaultActiveKey ?? items[0]?.key);
@@ -12,18 +13,17 @@ const CodeShowcase = memo(({ activeKey: controlledKey, className, defaultActiveK
 	const active = items.find((item) => item.key === activeKey) ?? items[0];
 	if (!active) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(styles.root, className),
-		style: {
+		...styleProps(styles.root, className, {
 			"--code-showcase-min-height": `${minHeight}px`,
 			...style
-		},
+		}),
 		...rest,
 		children: [items.length > 1 && /* @__PURE__ */ jsx(Segmented, {
-			className: styles.tabs,
 			options: items.map(({ key, label }) => ({
 				label,
 				value: key
 			})),
+			style: childStyles.tabs,
 			value: active.key,
 			variant: "outlined",
 			onChange: (key) => {
@@ -31,14 +31,14 @@ const CodeShowcase = memo(({ activeKey: controlledKey, className, defaultActiveK
 				onChange?.(key);
 			}
 		}), /* @__PURE__ */ jsxs("div", {
-			className: styles.panes,
+			...stylex.props(styles.panes),
 			children: [/* @__PURE__ */ jsx(Highlighter, {
-				className: styles.code,
 				language: active.language ?? "tsx",
+				style: childStyles.code,
 				variant: "outlined",
 				children: active.code
 			}), /* @__PURE__ */ jsx("div", {
-				className: styles.preview,
+				...styleProps(styles.preview, "lobe-code-showcase-preview"),
 				children: active.preview
 			})]
 		})]

package/es/awesome/CodeShowcase/CodeShowcase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeShowcase.mjs","names":[],"sources":["../../../src/awesome/CodeShowcase/CodeShowcase.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo, useState } from 'react';\n\nimport Segmented from '@/base-ui/Segmented';\nimport Highlighter from '@/Highlighter';\n\nimport { styles } from './style';\nimport type { CodeShowcaseProps } from './type';\n\nconst CodeShowcase = memo<CodeShowcaseProps>(\n  ({\n    activeKey: controlledKey,\n    className,\n    defaultActiveKey,\n    items,\n    minHeight,\n    onChange,\n    style,\n    ...rest\n  }) => {\n    const [innerKey, setInnerKey] = useState(defaultActiveKey ?? items[0]?.key);\n    const activeKey = controlledKey ?? innerKey;\n    const active = items.find((item) => item.key === activeKey) ?? items[0];\n\n    if (!active) return null;\n\n    return (\n      <div\n        className={cx(styles.root, className)}\n        style={{ '--code-showcase-min-height': `${minHeight}px`, ...style } as CSSProperties}\n        {...rest}\n      >\n        {items.length > 1 && (\n          <Segmented\n            className={styles.tabs}\n            options={items.map(({ key, label }) => ({ label, value: key }))}\n            value={active.key}\n            variant={'outlined'}\n            onChange={(key) => {\n              setInnerKey(key);\n              onChange?.(key);\n            }}\n          />\n        )}\n        <div className={styles.panes}>\n          <Highlighter\n            className={styles.code}\n            language={active.language ?? 'tsx'}\n            variant={'outlined'}\n          >\n            {active.code}\n          </Highlighter>\n          <div className={styles.preview}>{active.preview}</div>\n        </div>\n      </div>\n    );\n  },\n);\n\nCodeShowcase.displayName = 'CodeShowcase';\n\nexport default CodeShowcase;\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EACC,WAAW,eACX,WACA,kBACA,OACA,WACA,UACA,OACA,GAAG,WACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,oBAAoB,MAAM,EAAE,EAAE,GAAG;CAC1E,MAAM,YAAY,iBAAiB;CACnC,MAAM,SAAS,MAAM,MAAM,SAAS,KAAK,QAAQ,SAAS,KAAK,MAAM;CAErE,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,OAAO;GAAE,8BAA8B,GAAG,UAAU;GAAK,GAAG;EAAM;EAClE,GAAI;EAHN,UAAA,CAKG,MAAM,SAAS,KACd,oBAAC,WAAD;GACE,WAAW,OAAO;GAClB,SAAS,MAAM,KAAK,EAAE,KAAK,aAAa;IAAE;IAAO,OAAO;GAAI,EAAE;GAC9D,OAAO,OAAO;GACd,SAAS;GACT,WAAW,QAAQ;IACjB,YAAY,GAAG;IACf,WAAW,GAAG;GAChB;EACD,CAAA,GAEH,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,aAAD;IACE,WAAW,OAAO;IAClB,UAAU,OAAO,YAAY;IAC7B,SAAS;IAER,UAAA,OAAO;GACG,CAAA,GACb,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAU,UAAA,OAAO;GAAa,CAAA,CAClD;EACF,CAAA,CAAA;;AAET,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"CodeShowcase.mjs","names":[],"sources":["../../../src/awesome/CodeShowcase/CodeShowcase.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { type CSSProperties, memo, useState } from 'react';\n\nimport Highlighter from '@/Highlighter';\nimport Segmented from '@/Segmented';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { childStyles, styles } from './style';\nimport type { CodeShowcaseProps } from './type';\n\nconst CodeShowcase = memo<CodeShowcaseProps>(\n  ({\n    activeKey: controlledKey,\n    className,\n    defaultActiveKey,\n    items,\n    minHeight,\n    onChange,\n    style,\n    ...rest\n  }) => {\n    const [innerKey, setInnerKey] = useState(defaultActiveKey ?? items[0]?.key);\n    const activeKey = controlledKey ?? innerKey;\n    const active = items.find((item) => item.key === activeKey) ?? items[0];\n\n    if (!active) return null;\n\n    return (\n      <div\n        {...styleProps(styles.root, className, {\n          '--code-showcase-min-height': `${minHeight}px`,\n          ...style,\n        } as CSSProperties)}\n        {...rest}\n      >\n        {items.length > 1 && (\n          <Segmented\n            options={items.map(({ key, label }) => ({ label, value: key }))}\n            style={childStyles.tabs}\n            value={active.key}\n            variant={'outlined'}\n            onChange={(key) => {\n              setInnerKey(key);\n              onChange?.(key);\n            }}\n          />\n        )}\n        <div {...stylex.props(styles.panes)}>\n          <Highlighter\n            language={active.language ?? 'tsx'}\n            style={childStyles.code}\n            variant={'outlined'}\n          >\n            {active.code}\n          </Highlighter>\n          <div {...styleProps(styles.preview, 'lobe-code-showcase-preview')}>{active.preview}</div>\n        </div>\n      </div>\n    );\n  },\n);\n\nCodeShowcase.displayName = 'CodeShowcase';\n\nexport default CodeShowcase;\n"],"mappings":";;;;;;;;;AAUA,MAAM,eAAe,MAAyB,EAC5C,WAAW,eACX,WACA,kBACA,OACA,WACA,UACA,OACA,GAAG,WACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,oBAAoB,MAAM,EAAE,EAAE,GAAG;CAC1E,MAAM,YAAY,iBAAiB;CACnC,MAAM,SAAS,MAAM,MAAK,SAAQ,KAAK,QAAQ,SAAS,KAAK,MAAM;CACnE,IAAI,CAAC,QAAQ,OAAO;CACpB,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,WAAW;GACjD,8BAA8B,GAAG,UAAU;GAC3C,GAAG;EACL,CAAkB;EAAG,GAAI;EAHlB,UAAA,CAIA,MAAM,SAAS,KAAK,oBAAC,WAAD;GAAW,SAAS,MAAM,KAAK,EACtD,KACA,aACK;IACL;IACA,OAAO;GACT,EAAE;GAAG,OAAO,YAAY;GAAM,OAAO,OAAO;GAAK,SAAS;GAAY,WAAU,QAAO;IACrF,YAAY,GAAG;IACf,WAAW,GAAG;GAChB;EAAI,CAAA,GACA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,KAAK;GAAlC,UAAA,CACE,oBAAC,aAAD;IAAa,UAAU,OAAO,YAAY;IAAO,OAAO,YAAY;IAAM,SAAS;IAChF,UAAA,OAAO;GACG,CAAA,GACb,oBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,SAAS,4BAA4B;IAAI,UAAA,OAAO;GAAa,CAAA,CACrF;EACF,CAAA,CAAA;;AACX,CAAC;AACD,aAAa,cAAc"}

package/es/awesome/CodeShowcase/style.mjs

@@ -1,50 +1,46 @@
-import { createStaticStyles } from "antd-style";
 //#region src/awesome/CodeShowcase/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	code: css`
-    overflow: auto;
-    min-inline-size: 0;
-    min-block-size: var(--code-showcase-min-height);
-  `,
-	panes: css`
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-
-    ${responsive.mobile} {
-      grid-template-columns: 1fr;
-    }
-  `,
-	preview: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    min-inline-size: 0;
-    min-block-size: var(--code-showcase-min-height);
-    padding: 20px;
-    border: 1px solid ${cssVar.colorBorderSecondary};
-    border-radius: ${cssVar.borderRadiusLG};
-
-    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);
-    box-shadow: ${cssVar.boxShadowTertiary};
-
-    > * {
-      max-inline-size: 100%;
-    }
-  `,
-	root: css`
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: stretch;
-  `,
-	tabs: css`
-    align-self: center;
-    max-inline-size: 100%;
-  `
-}));
+const styles = {
+	panes: {
+		kOIVth: "lb1v2ro7d",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lbnby9oq lb1s63ql6",
+		$$css: true
+	},
+	preview: {
+		kmVPX3: "lb1qhigcl",
+		kVAM5u: "lb10cypdb",
+		kaIpWk: "lb1ndkxwp",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lb1sy65q1",
+		kGVxlE: "lb1c4gvbl",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lbl56j7k",
+		kAzted: "lb3yc1is",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	root: {
+		kOIVth: "lb1c1vhfx",
+		kGNEyG: "lb1qjc9v5",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		$$css: true
+	}
+};
+const childStyles = {
+	code: {
+		minBlockSize: "var(--code-showcase-min-height)",
+		minInlineSize: 0,
+		overflow: "auto"
+	},
+	tabs: {
+		alignSelf: "center",
+		maxInlineSize: "100%"
+	}
+};
 //#endregion
-export { styles };
+export { childStyles, styles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/CodeShowcase/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  code: css`\n    overflow: auto;\n    min-inline-size: 0;\n    min-block-size: var(--code-showcase-min-height);\n  `,\n  panes: css`\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n\n    ${responsive.mobile} {\n      grid-template-columns: 1fr;\n    }\n  `,\n  preview: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-inline-size: 0;\n    min-block-size: var(--code-showcase-min-height);\n    padding: 20px;\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    > * {\n      max-inline-size: 100%;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    align-items: stretch;\n  `,\n  tabs: css`\n    align-self: center;\n    max-inline-size: 100%;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;;;CAKT,OAAO,GAAG;;;;;MAKN,WAAW,OAAO;;;;CAItB,SAAS,GAAG;;;;;;;;wBAQU,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;qCAEN,OAAO,gBAAgB;kBAC1C,OAAO,kBAAkB;;;;;;CAMzC,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;AAIX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/CodeShowcase/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { CSSProperties } from 'react';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  panes: {\n    gap: 12,\n    display: 'grid',\n    gridTemplateColumns: {\n      default: 'repeat(2, minmax(0, 1fr))',\n      [media.mobile]: '1fr',\n    },\n  },\n  preview: {\n    padding: 20,\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    alignItems: 'center',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent)`,\n    boxShadow: cssVar.boxShadowTertiary,\n    display: 'flex',\n    justifyContent: 'center',\n    minBlockSize: 'var(--code-showcase-min-height)',\n    minInlineSize: 0,\n  },\n  root: {\n    gap: 20,\n    alignItems: 'stretch',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nexport const childStyles = {\n  code: {\n    minBlockSize: 'var(--code-showcase-min-height)',\n    minInlineSize: 0,\n    overflow: 'auto',\n  },\n  tabs: {\n    alignSelf: 'center',\n    maxInlineSize: '100%',\n  },\n} satisfies Record<string, CSSProperties>;\n"],"mappings":";AAMA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,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;AACF;AACA,MAAa,cAAc;CACzB,MAAM;EACJ,cAAc;EACd,eAAe;EACf,UAAU;CACZ;CACA,MAAM;EACJ,WAAW;EACX,eAAe;CACjB;AACF"}

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

@@ -1,7 +1,7 @@
 import { DivProps } from "../../types/index.mjs";
 import { ReactNode } from "react";
 //#region src/awesome/CodeShowcase/type.d.ts
-interface CodeShowcaseItem {
+export interface CodeShowcaseItem {
   /** The snippet shown on the left. Keep it short enough to read without scrolling. */
   code: string;
   key: string;
@@ -11,7 +11,7 @@ interface CodeShowcaseItem {
   /** The live render of the snippet, shown on the right. */
   preview: ReactNode;
 }
-interface CodeShowcaseProps extends Omit<DivProps, 'onChange'> {
+export interface CodeShowcaseProps extends Omit<DivProps, 'onChange'> {
   activeKey?: string;
   defaultActiveKey?: string;
   items: CodeShowcaseItem[];
@@ -23,5 +23,4 @@ interface CodeShowcaseProps extends Omit<DivProps, 'onChange'> {
   onChange?: (key: string) => void;
 }
 //#endregion
-export { CodeShowcaseItem, CodeShowcaseProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/FeatureGrid/FeatureGrid.mjs

@@ -1,42 +1,42 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import Icon from "../../Icon/Icon.mjs";
 import { renderLandingLink } from "../landingLink.mjs";
 import { styles } from "./style.mjs";
 import { Fragment, memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/FeatureGrid/FeatureGrid.tsx
 const FeatureGrid = memo(({ className, columns = 3, items, renderLink, style, ...rest }) => /* @__PURE__ */ jsx("div", {
-	className: cx(styles.grid, className),
-	style: {
+	...styleProps(styles.grid, className, {
 		"--feature-grid-columns": columns,
 		...style
-	},
+	}),
 	...rest,
 	children: items.map(({ description, href, icon, title }, index) => {
 		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			icon && /* @__PURE__ */ jsx("span", {
-				className: styles.icon,
+				...stylex.props(styles.icon),
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon,
 					size: 16
 				})
 			}),
 			/* @__PURE__ */ jsx("h3", {
-				className: styles.title,
+				...stylex.props(styles.title),
 				children: title
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: styles.description,
+				...stylex.props(styles.description),
 				children: description
 			})
 		] });
 		return /* @__PURE__ */ jsx(Fragment, { children: href ? renderLandingLink(renderLink, {
 			children: content,
-			className: styles.item,
+			className: stylex.props(styles.item).className,
 			href
 		}) : /* @__PURE__ */ jsx("div", {
-			className: styles.item,
+			...stylex.props(styles.item),
 			children: content
 		}) }, typeof title === "string" ? title : index);
 	})

package/es/awesome/FeatureGrid/FeatureGrid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureGrid.mjs","names":[],"sources":["../../../src/awesome/FeatureGrid/FeatureGrid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, Fragment, memo } from 'react';\n\nimport { renderLandingLink } from '@/awesome/landingLink';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { FeatureGridProps } from './type';\n\nconst FeatureGrid = memo<FeatureGridProps>(\n  ({ className, columns = 3, items, renderLink, style, ...rest }) => (\n    <div\n      className={cx(styles.grid, className)}\n      style={{ '--feature-grid-columns': columns, ...style } as CSSProperties}\n      {...rest}\n    >\n      {items.map(({ description, href, icon, title }, index) => {\n        const content = (\n          <>\n            {icon && (\n              <span className={styles.icon}>\n                <Icon icon={icon} size={16} />\n              </span>\n            )}\n            <h3 className={styles.title}>{title}</h3>\n            <p className={styles.description}>{description}</p>\n          </>\n        );\n\n        return (\n          <Fragment key={typeof title === 'string' ? title : index}>\n            {href ? (\n              renderLandingLink(renderLink, { children: content, className: styles.item, href })\n            ) : (\n              <div className={styles.item}>{content}</div>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  ),\n);\n\nFeatureGrid.displayName = 'FeatureGrid';\n\nexport default FeatureGrid;\n"],"mappings":";;;;;;;;AAWA,MAAM,cAAc,MACjB,EAAE,WAAW,UAAU,GAAG,OAAO,YAAY,OAAO,GAAG,WACtD,oBAAC,OAAD;CACE,WAAW,GAAG,OAAO,MAAM,SAAS;CACpC,OAAO;EAAE,0BAA0B;EAAS,GAAG;CAAM;CACrD,GAAI;CAEH,UAAA,MAAM,KAAK,EAAE,aAAa,MAAM,MAAM,SAAS,UAAU;EACxD,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;GACG,QACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IACtB,UAAA,oBAAC,MAAD;KAAY;KAAM,MAAM;IAAK,CAAA;GACzB,CAAA;GAER,oBAAC,MAAD;IAAI,WAAW,OAAO;IAAQ,UAAA;GAAU,CAAA;GACxC,oBAAC,KAAD;IAAG,WAAW,OAAO;IAAc,UAAA;GAAe,CAAA;EAClD,EAAA,CAAA;EAGJ,OACE,oBAAC,UAAD,EAAA,UACG,OACC,kBAAkB,YAAY;GAAE,UAAU;GAAS,WAAW,OAAO;GAAM;EAAK,CAAC,IAEjF,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAO,UAAA;EAAa,CAAA,EAErC,GANK,OAAO,UAAU,WAAW,QAAQ,KAMzC;CAEd,CAAC;AACE,CAAA,CAET;AAEA,YAAY,cAAc"}
+{"version":3,"file":"FeatureGrid.mjs","names":[],"sources":["../../../src/awesome/FeatureGrid/FeatureGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { type CSSProperties, Fragment, memo } from 'react';\n\nimport { renderLandingLink } from '@/awesome/landingLink';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { FeatureGridProps } from './type';\n\nconst FeatureGrid = memo<FeatureGridProps>(\n  ({ className, columns = 3, items, renderLink, style, ...rest }) => (\n    <div\n      {...styleProps(styles.grid, className, {\n        '--feature-grid-columns': columns,\n        ...style,\n      } as CSSProperties)}\n      {...rest}\n    >\n      {items.map(({ description, href, icon, title }, index) => {\n        const content = (\n          <>\n            {icon && (\n              <span {...stylex.props(styles.icon)}>\n                <Icon icon={icon} size={16} />\n              </span>\n            )}\n            <h3 {...stylex.props(styles.title)}>{title}</h3>\n            <p {...stylex.props(styles.description)}>{description}</p>\n          </>\n        );\n\n        return (\n          <Fragment key={typeof title === 'string' ? title : index}>\n            {href ? (\n              renderLandingLink(renderLink, {\n                children: content,\n                className: stylex.props(styles.item).className,\n                href,\n              })\n            ) : (\n              <div {...stylex.props(styles.item)}>{content}</div>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  ),\n);\n\nFeatureGrid.displayName = 'FeatureGrid';\n\nexport default FeatureGrid;\n"],"mappings":";;;;;;;;;AASA,MAAM,cAAc,MAAwB,EAC1C,WACA,UAAU,GACV,OACA,YACA,OACA,GAAG,WACC,oBAAC,OAAD;CAAK,GAAI,WAAW,OAAO,MAAM,WAAW;EAChD,0BAA0B;EAC1B,GAAG;CACL,CAAkB;CAAG,GAAI;CAClB,UAAA,MAAM,KAAK,EACd,aACA,MACA,MACA,SACC,UAAU;EACX,MAAM,UAAU,qBAAA,YAAA,EAAA,UAAA;GACP,QAAQ,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,IAAI;IACvC,UAAA,oBAAC,MAAD;KAAY;KAAM,MAAM;IAAK,CAAA;GACzB,CAAA;GACR,oBAAC,MAAD;IAAI,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI,UAAA;GAAU,CAAA;GAC/C,oBAAC,KAAD;IAAG,GAAI,OAAO,MAAM,OAAO,WAAW;IAAI,UAAA;GAAe,CAAA;EACzD,EAAA,CAAA;EACR,OAAO,oBAAC,UAAD,EAAA,UACE,OAAO,kBAAkB,YAAY;GAC1C,UAAU;GACV,WAAW,OAAO,MAAM,OAAO,IAAI,CAAC,CAAC;GACrC;EACF,CAAC,IAAI,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,IAAI;GAAI,UAAA;EAAa,CAAA,EACzC,GANM,OAAO,UAAU,WAAW,QAAQ,KAM1C;CAClB,CAAC;AACM,CAAA,CAAC;AACV,YAAY,cAAc"}

package/es/awesome/FeatureGrid/style.mjs

@@ -1,74 +1,58 @@
-import { createStaticStyles } from "antd-style";
 //#region src/awesome/FeatureGrid/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	description: css`
-    margin: 0;
-
-    font-size: 13.5px;
-    line-height: 1.65;
-    color: ${cssVar.colorTextSecondary};
-    text-wrap: pretty;
-  `,
-	grid: css`
-    display: grid;
-    grid-template-columns: repeat(var(--feature-grid-columns), minmax(0, 1fr));
-    gap: 16px;
-
-    ${responsive.tablet} {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    ${responsive.mobile} {
-      grid-template-columns: 1fr;
-    }
-  `,
-	icon: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    inline-size: 30px;
-    block-size: 30px;
-    margin-block-end: 14px;
-    border-radius: 9px;
-
-    color: ${cssVar.colorPrimary};
-
-    background: ${cssVar.colorPrimaryBg};
-  `,
-	item: css`
-    display: block;
-
-    padding-block: 20px 22px;
-    padding-inline: 20px;
-    border: 1px solid ${cssVar.colorBorderSecondary};
-    border-radius: ${cssVar.borderRadiusLG};
-
-    color: inherit;
-    text-decoration: none;
-
-    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);
-    box-shadow: ${cssVar.boxShadowTertiary};
-
-    transition:
-      border-color 140ms ease,
-      box-shadow 140ms ease;
-
-    &:hover {
-      border-color: ${cssVar.colorBorder};
-      box-shadow: ${cssVar.boxShadowSecondary};
-    }
-  `,
-	title: css`
-    margin-block: 0 6px;
-    margin-inline: 0;
-
-    font-size: 15px;
-    font-weight: 600;
-    color: ${cssVar.colorText};
-    letter-spacing: -0.01em;
-  `
-}));
+const styles = {
+	description: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb2ouz8m",
+		kLWn49: "lb11m8ghp",
+		kN2L0X: "lb1fzhlzt",
+		$$css: true
+	},
+	grid: {
+		kOIVth: "lbou54vl",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lb17c3u30 lb1s63ql6 lbmbhe7x",
+		$$css: true
+	},
+	icon: {
+		kaIpWk: "lbhpnuu7",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbaz5gdu",
+		kZKoxP: "lb1gnnpzl",
+		kMwMTN: "lb16owwnm",
+		k1xSpc: "lb78zum5",
+		kzqmXN: "lb1849jeq",
+		kjj79g: "lbl56j7k",
+		k1K539: "lb1u7kmwd",
+		$$css: true
+	},
+	item: {
+		kVAM5u: "lb10cypdb lb3mg3nv",
+		kaIpWk: "lb1ndkxwp",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kg3NbH: "lb17qtykl",
+		kybGjl: "lb1hl2dhg",
+		kmkexE: "lb4vgt72",
+		kWkggS: "lb1sy65q1",
+		kGVxlE: "lb1c4gvbl lb1ejz3n7",
+		kMwMTN: "lb1heor9g",
+		k1xSpc: "lb1lliihq",
+		kGO01o: "lb1t4gjm",
+		kLKAdn: "lb1cnzs8",
+		$$css: true
+	},
+	title: {
+		kUOVxO: "lbrxpjvj",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb1jvydc1",
+		k63SB2: "lb1s688f",
+		kb6lSQ: "lbjat59b",
+		k1K539: "lbzueoph",
+		keoZOQ: "lbdj266r",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/FeatureGrid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  description: css`\n    margin: 0;\n\n    font-size: 13.5px;\n    line-height: 1.65;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: pretty;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(var(--feature-grid-columns), minmax(0, 1fr));\n    gap: 16px;\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  icon: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 30px;\n    block-size: 30px;\n    margin-block-end: 14px;\n    border-radius: 9px;\n\n    color: ${cssVar.colorPrimary};\n\n    background: ${cssVar.colorPrimaryBg};\n  `,\n  item: css`\n    display: block;\n\n    padding-block: 20px 22px;\n    padding-inline: 20px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: inherit;\n    text-decoration: none;\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      box-shadow 140ms ease;\n\n    &:hover {\n      border-color: ${cssVar.colorBorder};\n      box-shadow: ${cssVar.boxShadowSecondary};\n    }\n  `,\n  title: css`\n    margin-block: 0 6px;\n    margin-inline: 0;\n\n    font-size: 15px;\n    font-weight: 600;\n    color: ${cssVar.colorText};\n    letter-spacing: -0.01em;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,aAAa,GAAG;;;;;aAKL,OAAO,mBAAmB;;;CAGrC,MAAM,GAAG;;;;;MAKL,WAAW,OAAO;;;;MAIlB,WAAW,OAAO;;;;CAItB,MAAM,GAAG;;;;;;;;;;aAUE,OAAO,aAAa;;kBAEf,OAAO,eAAe;;CAEtC,MAAM,GAAG;;;;;wBAKa,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;;;;qCAKN,OAAO,gBAAgB;kBAC1C,OAAO,kBAAkB;;;;;;;sBAOrB,OAAO,YAAY;oBACrB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;AAG9B,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/FeatureGrid/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  description: {\n    margin: 0,\n    color: cssVar.colorTextSecondary,\n    fontSize: 13.5,\n    lineHeight: 1.65,\n    textWrap: 'pretty',\n  },\n  grid: {\n    gap: 16,\n    display: 'grid',\n    gridTemplateColumns: {\n      default: 'repeat(var(--feature-grid-columns), minmax(0, 1fr))',\n      [tabletOnly]: 'repeat(2, minmax(0, 1fr))',\n      [media.mobile]: '1fr',\n    },\n  },\n  icon: {\n    borderRadius: 9,\n    alignItems: 'center',\n    backgroundColor: cssVar.colorPrimaryBg,\n    blockSize: 30,\n    color: cssVar.colorPrimary,\n    display: 'flex',\n    inlineSize: 30,\n    justifyContent: 'center',\n    marginBlockEnd: 14,\n  },\n  item: {\n    borderColor: {\n      'default': cssVar.colorBorderSecondary,\n      ':hover': cssVar.colorBorder,\n    },\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    paddingInline: 20,\n    textDecoration: 'none',\n    transition: 'border-color 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    color: 'inherit',\n    display: 'block',\n    paddingBlockEnd: '22px',\n    paddingBlockStart: '20px',\n  },\n  title: {\n    marginInline: 0,\n    color: cssVar.colorText,\n    fontSize: 15,\n    fontWeight: 600,\n    letterSpacing: '-0.01em',\n    marginBlockEnd: '6px',\n    marginBlockStart: '0',\n  },\n});\n"],"mappings":";AAMA,MAAa,SAAS;CACpB,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,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,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,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -4,14 +4,14 @@ import "../../Icon/index.mjs";
 import { LandingLinkRender } from "../landingLink.mjs";
 import { ReactNode } from "react";
 //#region src/awesome/FeatureGrid/type.d.ts
-interface FeatureGridItem {
+export interface FeatureGridItem {
   description: ReactNode;
   /** Makes the whole card a link. */
   href?: string;
   icon?: IconProps['icon'];
   title: ReactNode;
 }
-interface FeatureGridProps extends DivProps {
+export interface FeatureGridProps extends DivProps {
   /**
    * Columns on wide screens. The grid collapses to one column on phones.
    * @default 3
@@ -21,5 +21,4 @@ interface FeatureGridProps extends DivProps {
   renderLink?: LandingLinkRender;
 }
 //#endregion
-export { FeatureGridItem, FeatureGridProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/Features/FeatureItem.mjs

@@ -1,14 +1,16 @@
 "use client";
 import A from "../../A/index.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import Icon from "../../Icon/Icon.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Center from "../../Flex/Center.mjs";
-import Icon from "../../Icon/Icon.mjs";
-import Text from "../../Text/Text.mjs";
 import Img from "../../Img/index.mjs";
-import { styles } from "./style.mjs";
+import Text from "../../Text/Text.mjs";
+import { childStyles, styles } from "./style.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/Features/FeatureItem.tsx
 const Image = memo(({ image, className, title, style }) => {
 	return image.startsWith("http") ? /* @__PURE__ */ jsx(Img, {
@@ -30,26 +32,24 @@ const Item = memo(({ style, className, row, column, description, image, title, l
 		"--features-title-hover-size": hasLink ? "14px" : "20px"
 	}), [rowNumber, hasLink]);
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(hasLink ? styles.containerHasLink : styles.container, className),
-		style: {
+		...styleProps(styles.container, clsx("lobe-features-item", className), {
 			...cssVariables,
 			gridColumn: `span ${column || 1}`,
 			gridRow: `span ${rowNumber}`,
 			...style
-		},
+		}),
 		...rest,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: styles.cell,
+			...stylex.props(styles.cell),
 			children: [
 				image || icon && /* @__PURE__ */ jsxs(Center, {
-					className: styles.imgContainer,
-					style: imageStyle,
+					...styleProps(styles.imgContainer, void 0, imageStyle),
 					children: [icon && /* @__PURE__ */ jsx(Icon, {
-						className: styles.img,
-						icon
+						icon,
+						style: childStyles.img
 					}), image && /* @__PURE__ */ jsx(Image, {
-						className: styles.img,
 						image,
+						style: childStyles.img,
 						title
 					})]
 				}),
@@ -57,17 +57,17 @@ const Item = memo(({ style, className, row, column, description, image, title, l
 					horizontal: true,
 					align: "center",
 					as: "h3",
-					className: styles.title,
+					className: stylex.props(styles.title).className,
 					gap: 8,
 					children: title
 				}),
 				description && /* @__PURE__ */ jsx(Text, {
-					className: styles.desc,
+					style: childStyles.desc,
 					ellipsis: { rows: 4 },
 					children: description
 				}),
 				link && /* @__PURE__ */ jsx("div", {
-					className: styles.link,
+					...stylex.props(styles.link),
 					children: /* @__PURE__ */ jsx(A, {
 						href: link,
 						rel: "noreferrer",

package/es/awesome/Features/FeatureItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureItem.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo, useMemo } from 'react';\n\nimport A from '@/A';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { FeatureItemProps } from './type';\n\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\n  ({ image, className, title, style }) => {\n    return image.startsWith('http') ? (\n      <Img alt={title} className={className} src={image} style={style} />\n    ) : (\n      <Center className={className} style={style}>\n        {image}\n      </Center>\n    );\n  },\n);\n\nconst Item = memo<FeatureItemProps>(\n  ({\n    style,\n    className,\n    row,\n    column,\n    description,\n    image,\n    title,\n    link,\n    icon,\n    imageStyle,\n    openExternal,\n    ...rest\n  }) => {\n    const rowNumber = row || 7;\n    const hasLink = Boolean(link);\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--features-row-num': String(rowNumber),\n        '--features-title-hover-size': hasLink ? '14px' : '20px',\n      }),\n      [rowNumber, hasLink],\n    );\n\n    return (\n      <div\n        className={cx(hasLink ? styles.containerHasLink : styles.container, className)}\n        style={{\n          ...cssVariables,\n          gridColumn: `span ${column || 1}`,\n          gridRow: `span ${rowNumber}`,\n          ...style,\n        }}\n        {...rest}\n      >\n        <div className={styles.cell}>\n          {image ||\n            (icon && (\n              <Center className={styles.imgContainer} style={imageStyle}>\n                {icon && <Icon className={styles.img} icon={icon} />}\n                {image && <Image className={styles.img} image={image} title={title} />}\n              </Center>\n            ))}\n          {title && (\n            <Flexbox horizontal align={'center'} as={'h3'} className={styles.title} gap={8}>\n              {title}\n            </Flexbox>\n          )}\n          {description && (\n            <Text\n              className={styles.desc}\n              ellipsis={{\n                rows: 4,\n              }}\n            >\n              {description}\n            </Text>\n          )}\n          {link && (\n            <div className={styles.link}>\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\n                Read More\n              </A>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nItem.displayName = 'FeatureItem';\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,QAAQ,MACX,EAAE,OAAO,WAAW,OAAO,YAAY;CACtC,OAAO,MAAM,WAAW,MAAM,IAC5B,oBAAC,KAAD;EAAK,KAAK;EAAkB;EAAW,KAAK;EAAc;CAAQ,CAAA,IAElE,oBAAC,QAAD;EAAmB;EAAkB;EAClC,UAAA;CACK,CAAA;AAEZ,CACF;AAEA,MAAM,OAAO,MACV,EACC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,UAAU,QAAQ,IAAI;CAE5B,MAAM,eAAe,eACZ;EACL,sBAAsB,OAAO,SAAS;EACtC,+BAA+B,UAAU,SAAS;CACpD,IACA,CAAC,WAAW,OAAO,CACrB;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,UAAU,OAAO,mBAAmB,OAAO,WAAW,SAAS;EAC7E,OAAO;GACL,GAAG;GACH,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;EACL;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA;IACG,SACE,QACC,qBAAC,QAAD;KAAQ,WAAW,OAAO;KAAc,OAAO;KAA/C,UAAA,CACG,QAAQ,oBAAC,MAAD;MAAM,WAAW,OAAO;MAAW;KAAO,CAAA,GAClD,SAAS,oBAAC,OAAD;MAAO,WAAW,OAAO;MAAY;MAAc;KAAQ,CAAA,CAC/D;;IAEX,SACC,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO;KAAO,KAAK;KAC1E,UAAA;IACM,CAAA;IAEV,eACC,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,UAAU,EACR,MAAM,EACR;KAEC,UAAA;IACG,CAAA;IAEP,QACC,oBAAC,OAAD;KAAK,WAAW,OAAO;KACrB,UAAA,oBAAC,GAAD;MAAG,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW,KAAA;MAAW,UAAA;KAE1E,CAAA;IACA,CAAA;GAEJ;;CACF,CAAA;AAET,CACF;AAEA,KAAK,cAAc"}
+{"version":3,"file":"FeatureItem.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo, useMemo } from 'react';\n\nimport A from '@/A';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { childStyles, styles } from './style';\nimport type { FeatureItemProps } from './type';\n\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\n  ({ image, className, title, style }) => {\n    return image.startsWith('http') ? (\n      <Img alt={title} className={className} src={image} style={style} />\n    ) : (\n      <Center className={className} style={style}>\n        {image}\n      </Center>\n    );\n  },\n);\n\nconst Item = memo<FeatureItemProps>(\n  ({\n    style,\n    className,\n    row,\n    column,\n    description,\n    image,\n    title,\n    link,\n    icon,\n    imageStyle,\n    openExternal,\n    ...rest\n  }) => {\n    const rowNumber = row || 7;\n    const hasLink = Boolean(link);\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--features-row-num': String(rowNumber),\n        '--features-title-hover-size': hasLink ? '14px' : '20px',\n      }),\n      [rowNumber, hasLink],\n    );\n\n    return (\n      <div\n        {...styleProps(styles.container, clsx('lobe-features-item', className), {\n          ...cssVariables,\n          gridColumn: `span ${column || 1}`,\n          gridRow: `span ${rowNumber}`,\n          ...style,\n        })}\n        {...rest}\n      >\n        <div {...stylex.props(styles.cell)}>\n          {image ||\n            (icon && (\n              <Center {...styleProps(styles.imgContainer, undefined, imageStyle)}>\n                {icon && <Icon icon={icon} style={childStyles.img} />}\n                {image && <Image image={image} style={childStyles.img} title={title} />}\n              </Center>\n            ))}\n          {title && (\n            <Flexbox\n              horizontal\n              align={'center'}\n              as={'h3'}\n              className={stylex.props(styles.title).className}\n              gap={8}\n            >\n              {title}\n            </Flexbox>\n          )}\n          {description && (\n            <Text\n              style={childStyles.desc}\n              ellipsis={{\n                rows: 4,\n              }}\n            >\n              {description}\n            </Text>\n          )}\n          {link && (\n            <div {...stylex.props(styles.link)}>\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\n                Read More\n              </A>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nItem.displayName = 'FeatureItem';\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,QAAQ,MAKV,EACF,OACA,WACA,OACA,YACI;CACJ,OAAO,MAAM,WAAW,MAAM,IAAI,oBAAC,KAAD;EAAK,KAAK;EAAkB;EAAW,KAAK;EAAc;CAAQ,CAAA,IAAI,oBAAC,QAAD;EAAmB;EAAkB;EACtI,UAAA;CACK,CAAA;AACd,CAAC;AACD,MAAM,OAAO,MAAwB,EACnC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,UAAU,QAAQ,IAAI;CAC5B,MAAM,eAAe,eAAuC;EAC1D,sBAAsB,OAAO,SAAS;EACtC,+BAA+B,UAAU,SAAS;CACpD,IAAI,CAAC,WAAW,OAAO,CAAC;CACxB,OAAO,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,KAAK,sBAAsB,SAAS,GAAG;GAClF,GAAG;GACH,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;EACL,CAAC;EAAG,GAAI;EACF,UAAA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,IAAI;GAAjC,UAAA;IACG,SAAS,QAAQ,qBAAC,QAAD;KAAQ,GAAI,WAAW,OAAO,cAAc,KAAA,GAAW,UAAU;KAAjE,UAAA,CACX,QAAQ,oBAAC,MAAD;MAAY;MAAM,OAAO,YAAY;KAAM,CAAA,GACnD,SAAS,oBAAC,OAAD;MAAc;MAAO,OAAO,YAAY;MAAY;KAAQ,CAAA,CAChE;;IACX,SAAS,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC;KAAW,KAAK;KAC1G,UAAA;IACM,CAAA;IACV,eAAe,oBAAC,MAAD;KAAM,OAAO,YAAY;KAAM,UAAU,EAC3D,MAAM,EACR;KACS,UAAA;IACG,CAAA;IACP,QAAQ,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,IAAI;KACtC,UAAA,oBAAC,GAAD;MAAG,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW,KAAA;MAAW,UAAA;KAE1E,CAAA;IACA,CAAA;GACJ;;CACF,CAAA;AACX,CAAC;AACD,KAAK,cAAc"}