@lobehub/ui 4.3.2 → 4.3.3

package/es/Form/style.mjs

@@ -1,13 +1,15 @@
-import { createStyles } from "antd-style";
-import { isNumber } from "es-toolkit/compat";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, responsive } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Form/style.ts
-const useStyles = createStyles(({ css: css$1, token, prefixCls, responsive }) => ({
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	borderless: css$1`
     gap: 48px;
     .${prefixCls}-collapse .${prefixCls}-collapse-header {
       padding-block-end: 16px;
-      border-block-end: 1px solid ${token.colorBorderSecondary};
+      border-block-end: 1px solid ${cssVar$1.colorBorderSecondary};
     }
   `,
 	root: css$1`
@@ -49,52 +51,69 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, responsive }) =>
     }
 
     .${prefixCls}-collapse-item {
-      border-radius: ${token.borderRadius}px !important;
+      border-radius: ${cssVar$1.borderRadius} !important;
     }
 
-    ${responsive.mobile} {
+    ${responsive.sm} {
       gap: 0 !important;
     }
   `
 }));
-const useFlatGroupStyles = createStyles(({ cx: cx$1, css: css$1, token, stylish }) => {
+const variants = cva(styles.root, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		filled: null,
+		outlined: null,
+		borderless: styles.borderless
+	} }
+});
+const flatGroupStyles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: cx$1(stylish.variantBorderlessWithoutHover, css$1`
-        padding-inline: 0;
-      `),
-		filled: stylish.variantFilledWithoutHover,
+		borderless: css$1`
+      ${staticStylish.variantBorderlessWithoutHover}
+      padding-inline: 0;
+    `,
+		filled: staticStylish.variantFilledWithoutHover,
 		mobile: css$1`
       padding-block: 0;
       padding-inline: 16px;
       border-radius: 0;
-      background: ${token.colorBgContainer};
+      background: ${cssVar$1.colorBgContainer};
     `,
-		outlined: stylish.variantOutlinedWithoutHover,
+		outlined: staticStylish.variantOutlinedWithoutHover,
 		root: css$1`
       padding-inline: 16px;
-      border-radius: ${token.borderRadiusLG}px;
+      border-radius: ${cssVar$1.borderRadiusLG};
     `
 	};
 });
-const useFooterStyles = createStyles(({ css: css$1, token, responsive }) => {
+const flatGroupVariants = cva(flatGroupStyles.root, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		filled: flatGroupStyles.filled,
+		outlined: flatGroupStyles.outlined,
+		borderless: flatGroupStyles.borderless
+	} }
+});
+const footerStyles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return { root: css$1`
-      ${responsive.mobile} {
+      ${responsive.sm} {
         padding: 16px;
-        border-block-start: 1px solid ${token.colorBorderSecondary};
-        background: ${token.colorBgContainer};
+        border-block-start: 1px solid ${cssVar$1.colorBorderSecondary};
+        background: ${cssVar$1.colorBgContainer};
       }
     ` };
 });
-const useGroupStyles = createStyles(({ css: css$1, token, responsive }) => {
+const groupStyles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		mobileGroupBody: css$1`
       padding-block: 0;
       padding-inline: 16px;
-      background: ${token.colorBgContainer};
+      background: ${cssVar$1.colorBgContainer};
     `,
 		mobileGroupHeader: css$1`
       padding: 16px;
-      background: ${token.colorBgLayout};
+      background: ${cssVar$1.colorBgLayout};
     `,
 		title: css$1`
       align-items: center;
@@ -106,7 +125,7 @@ const useGroupStyles = createStyles(({ css: css$1, token, responsive }) => {
       font-weight: bold;
     `,
 		titleMobile: css$1`
-      ${responsive.mobile} {
+      ${responsive.sm} {
         font-size: 14px;
         font-weight: 400;
         opacity: 0.5;
@@ -114,61 +133,90 @@ const useGroupStyles = createStyles(({ css: css$1, token, responsive }) => {
     `
 	};
 });
-const useItemStyles = createStyles(({ css: css$1, responsive, prefixCls }, { minWidth }) => ({
+const titleVariants = cva(groupStyles.title, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		filled: null,
+		outlined: null,
+		borderless: groupStyles.titleBorderless
+	} }
+});
+const itemStyles = createStaticStyles(({ css: css$1 }) => ({
 	itemMinWidth: css$1`
-      .${prefixCls}-form-item-control {
-        width: ${isNumber(minWidth) ? `${minWidth}px` : minWidth};
-      }
-    `,
+    &.${prefixCls}-form-item .${prefixCls}-form-item-control {
+      width: var(--form-item-min-width) !important;
+    }
+  `,
 	itemNoDivider: css$1`
-      &:not(:first-child) {
-        padding-block-start: 0;
-      }
-    `,
+    &:not(:first-child) {
+      padding-block-start: 0;
+    }
+  `,
 	root: css$1`
-      &.${prefixCls}-form-item {
-        padding-block: 16px;
-        padding-inline: 0;
+    &.${prefixCls}-form-item {
+      padding-block: 16px;
+      padding-inline: 0;
 
-        .${prefixCls}-form-item-label {
-          text-align: start;
-        }
+      .${prefixCls}-form-item-label {
+        text-align: start;
+      }
 
-        .${prefixCls}-row {
-          gap: 12px;
-          justify-content: space-between;
+      .${prefixCls}-row {
+        gap: 12px;
+        justify-content: space-between;
 
-          > div {
-            flex: unset;
-            flex-grow: unset;
-          }
+        > div {
+          flex: unset;
+          flex-grow: unset;
         }
+      }
 
-        .${prefixCls}-form-item-required::before {
-          align-self: flex-start;
-        }
+      .${prefixCls}-form-item-required::before {
+        align-self: flex-start;
+      }
 
-        ${responsive.mobile} {
-          &.${prefixCls}-form-item-horizontal {
-            .${prefixCls}-form-item-label {
-              flex: 1 !important;
-            }
-            .${prefixCls}-form-item-control {
-              flex: none !important;
-            }
+      ${responsive.sm} {
+        &.${prefixCls}-form-item-horizontal {
+          .${prefixCls}-form-item-label {
+            flex: 1 !important;
+          }
+          .${prefixCls}-form-item-control {
+            flex: none !important;
           }
         }
       }
-    `,
+    }
+  `,
 	verticalLayout: css$1`
-      &.${prefixCls}-form-item {
-        .${prefixCls}-row {
-          align-items: stretch;
-        }
+    &.${prefixCls}-form-item {
+      .${prefixCls}-row {
+        align-items: stretch;
       }
-    `
+    }
+  `
 }));
-const useSubmitFooterStyles = createStyles(({ responsive, css: css$1, token }) => ({
+const itemVariants = cva(itemStyles.root, {
+	defaultVariants: {
+		divider: false,
+		itemMinWidth: false,
+		layout: "vertical"
+	},
+	variants: {
+		itemMinWidth: {
+			true: itemStyles.itemMinWidth,
+			false: null
+		},
+		divider: {
+			true: null,
+			false: itemStyles.itemNoDivider
+		},
+		layout: {
+			vertical: itemStyles.verticalLayout,
+			horizontal: null
+		}
+	}
+});
+const submitFooterStyles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	floatFooter: css$1`
     position: fixed;
     z-index: 1000;
@@ -178,22 +226,22 @@ const useSubmitFooterStyles = createStyles(({ responsive, css: css$1, token }) =
 
     width: max-content;
     padding: 8px;
-    border: 1px solid ${token.colorBorderSecondary};
+    border: 1px solid ${cssVar$1.colorBorderSecondary};
     border-radius: 48px;
 
-    background: ${token.colorBgContainer};
-    box-shadow: ${token.boxShadowSecondary};
+    background: ${cssVar$1.colorBgContainer};
+    box-shadow: ${cssVar$1.boxShadowSecondary};
   `,
 	footer: css$1`
-    ${responsive.mobile} {
-      margin-block-start: -${token.borderRadius}px;
+    ${responsive.sm} {
+      margin-block-start: calc(-1 * ${cssVar$1.borderRadius});
       padding: 16px;
-      border-block-start: 1px solid ${token.colorBorderSecondary};
-      background: ${token.colorBgContainer};
+      border-block-start: 1px solid ${cssVar$1.colorBorderSecondary};
+      background: ${cssVar$1.colorBgContainer};
     }
   `
 }));
-const useTitleStyles = createStyles(({ css: css$1, token }) => ({
+const titleStyles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	content: css$1`
     position: relative;
     text-align: start;
@@ -202,7 +250,7 @@ const useTitleStyles = createStyles(({ css: css$1, token }) => ({
     display: block;
 
     line-height: 1.44;
-    color: ${token.colorTextDescription};
+    color: ${cssVar$1.colorTextDescription};
     word-wrap: break-word;
     white-space: pre-wrap;
   `,
@@ -213,5 +261,5 @@ const useTitleStyles = createStyles(({ css: css$1, token }) => ({
 }));
 
 //#endregion
-export { useFlatGroupStyles, useGroupStyles, useItemStyles, useStyles, useSubmitFooterStyles, useTitleStyles };
+export { flatGroupStyles, flatGroupVariants, groupStyles, itemVariants, submitFooterStyles, titleStyles, titleVariants, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Form/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Form/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { isNumber } from 'es-toolkit/compat';\n\nexport const useStyles = createStyles(({ css, token, prefixCls, responsive }) => ({\n  borderless: css`\n    gap: 48px;\n    .${prefixCls}-collapse .${prefixCls}-collapse-header {\n      padding-block-end: 16px;\n      border-block-end: 1px solid ${token.colorBorderSecondary};\n    }\n  `,\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    .${prefixCls}-form-item {\n      margin: 0 !important;\n    }\n\n    .${prefixCls}-form-item .${prefixCls}-form-item-label > label {\n      height: unset;\n    }\n\n    .${prefixCls}-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .${prefixCls}-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .${prefixCls}-form-item-row {\n      align-items: center;\n    }\n\n    .${prefixCls}-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .${prefixCls}-collapse-item {\n      border-radius: ${token.borderRadius}px !important;\n    }\n\n    ${responsive.mobile} {\n      gap: 0 !important;\n    }\n  `,\n}));\n\nexport const useFlatGroupStyles = createStyles(({ cx, css, token, stylish }) => {\n  return {\n    borderless: cx(\n      stylish.variantBorderlessWithoutHover,\n      css`\n        padding-inline: 0;\n      `,\n    ),\n    filled: stylish.variantFilledWithoutHover,\n    mobile: css`\n      padding-block: 0;\n      padding-inline: 16px;\n      border-radius: 0;\n      background: ${token.colorBgContainer};\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: css`\n      padding-inline: 16px;\n      border-radius: ${token.borderRadiusLG}px;\n    `,\n  };\n});\n\nexport const useFooterStyles = createStyles(({ css, token, responsive }) => {\n  return {\n    root: css`\n      ${responsive.mobile} {\n        padding: 16px;\n        border-block-start: 1px solid ${token.colorBorderSecondary};\n        background: ${token.colorBgContainer};\n      }\n    `,\n  };\n});\n\nexport const useGroupStyles = createStyles(({ css, token, responsive }) => {\n  return {\n    mobileGroupBody: css`\n      padding-block: 0;\n      padding-inline: 16px;\n      background: ${token.colorBgContainer};\n    `,\n    mobileGroupHeader: css`\n      padding: 16px;\n      background: ${token.colorBgLayout};\n    `,\n    title: css`\n      align-items: center;\n      font-size: 16px;\n      font-weight: bold;\n    `,\n    titleBorderless: css`\n      font-size: 18px;\n      font-weight: bold;\n    `,\n    titleMobile: css`\n      ${responsive.mobile} {\n        font-size: 14px;\n        font-weight: 400;\n        opacity: 0.5;\n      }\n    `,\n  };\n});\n\nexport const useItemStyles = createStyles(\n  ({ css, responsive, prefixCls }, { minWidth }: { minWidth?: string | number }) => ({\n    itemMinWidth: css`\n      .${prefixCls}-form-item-control {\n        width: ${isNumber(minWidth) ? `${minWidth}px` : minWidth};\n      }\n    `,\n    itemNoDivider: css`\n      &:not(:first-child) {\n        padding-block-start: 0;\n      }\n    `,\n    root: css`\n      &.${prefixCls}-form-item {\n        padding-block: 16px;\n        padding-inline: 0;\n\n        .${prefixCls}-form-item-label {\n          text-align: start;\n        }\n\n        .${prefixCls}-row {\n          gap: 12px;\n          justify-content: space-between;\n\n          > div {\n            flex: unset;\n            flex-grow: unset;\n          }\n        }\n\n        .${prefixCls}-form-item-required::before {\n          align-self: flex-start;\n        }\n\n        ${responsive.mobile} {\n          &.${prefixCls}-form-item-horizontal {\n            .${prefixCls}-form-item-label {\n              flex: 1 !important;\n            }\n            .${prefixCls}-form-item-control {\n              flex: none !important;\n            }\n          }\n        }\n      }\n    `,\n    verticalLayout: css`\n      &.${prefixCls}-form-item {\n        .${prefixCls}-row {\n          align-items: stretch;\n        }\n      }\n    `,\n  }),\n);\n\nexport const useSubmitFooterStyles = createStyles(({ responsive, css, token }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${token.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${token.colorBgContainer};\n    box-shadow: ${token.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.mobile} {\n      margin-block-start: -${token.borderRadius}px;\n      padding: 16px;\n      border-block-start: 1px solid ${token.colorBorderSecondary};\n      background: ${token.colorBgContainer};\n    }\n  `,\n}));\n\nexport const useTitleStyles = createStyles(({ css, token }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n\n  desc: css`\n    display: block;\n\n    line-height: 1.44;\n    color: ${token.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n  `,\n}));\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,WAAW,kBAAkB;CAChF,YAAY,KAAG;;OAEV,UAAU,aAAa,UAAU;;oCAEJ,MAAM,qBAAqB;;;CAG7D,MAAM,KAAG;;;;;;;;;OASJ,UAAU;;;;OAIV,UAAU,cAAc,UAAU;;;;OAIlC,UAAU;;;;;OAKV,UAAU;;;;;;OAMV,UAAU;;;;OAIV,UAAU;;;;;;OAMV,UAAU;uBACM,MAAM,aAAa;;;MAGpC,WAAW,OAAO;;;;CAIvB,EAAE;AAEH,MAAa,qBAAqB,cAAc,EAAE,UAAI,YAAK,OAAO,cAAc;AAC9E,QAAO;EACL,YAAYA,KACV,QAAQ,+BACR,KAAG;;QAGJ;EACD,QAAQ,QAAQ;EAChB,QAAQ,KAAG;;;;oBAIK,MAAM,iBAAiB;;EAEvC,UAAU,QAAQ;EAClB,MAAM,KAAG;;uBAEU,MAAM,eAAe;;EAEzC;EACD;AAEF,MAAa,kBAAkB,cAAc,EAAE,YAAK,OAAO,iBAAiB;AAC1E,QAAO,EACL,MAAM,KAAG;QACL,WAAW,OAAO;;wCAEc,MAAM,qBAAqB;sBAC7C,MAAM,iBAAiB;;OAG1C;EACD;AAEF,MAAa,iBAAiB,cAAc,EAAE,YAAK,OAAO,iBAAiB;AACzE,QAAO;EACL,iBAAiB,KAAG;;;oBAGJ,MAAM,iBAAiB;;EAEvC,mBAAmB,KAAG;;oBAEN,MAAM,cAAc;;EAEpC,OAAO,KAAG;;;;;EAKV,iBAAiB,KAAG;;;;EAIpB,aAAa,KAAG;QACZ,WAAW,OAAO;;;;;;EAMvB;EACD;AAEF,MAAa,gBAAgB,cAC1B,EAAE,YAAK,YAAY,aAAa,EAAE,gBAAgD;CACjF,cAAc,KAAG;SACZ,UAAU;iBACF,SAAS,SAAS,GAAG,GAAG,SAAS,MAAM,SAAS;;;CAG7D,eAAe,KAAG;;;;;CAKlB,MAAM,KAAG;UACH,UAAU;;;;WAIT,UAAU;;;;WAIV,UAAU;;;;;;;;;;WAUV,UAAU;;;;UAIX,WAAW,OAAO;cACd,UAAU;eACT,UAAU;;;eAGV,UAAU;;;;;;;CAOrB,gBAAgB,KAAG;UACb,UAAU;WACT,UAAU;;;;;CAKlB,EACF;AAED,MAAa,wBAAwB,cAAc,EAAE,YAAY,YAAK,aAAa;CACjF,aAAa,KAAG;;;;;;;;;wBASM,MAAM,qBAAqB;;;kBAGjC,MAAM,iBAAiB;kBACvB,MAAM,mBAAmB;;CAEzC,QAAQ,KAAG;MACP,WAAW,OAAO;6BACK,MAAM,aAAa;;sCAEV,MAAM,qBAAqB;oBAC7C,MAAM,iBAAiB;;;CAG1C,EAAE;AAEH,MAAa,iBAAiB,cAAc,EAAE,YAAK,aAAa;CAC9D,SAAS,KAAG;;;;CAKZ,MAAM,KAAG;;;;aAIE,MAAM,qBAAqB;;;;CAItC,OAAO,KAAG;;;;CAIX,EAAE"}
+{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  borderless: css`\n    gap: 48px;\n    .${prefixCls}-collapse .${prefixCls}-collapse-header {\n      padding-block-end: 16px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    .${prefixCls}-form-item {\n      margin: 0 !important;\n    }\n\n    .${prefixCls}-form-item .${prefixCls}-form-item-label > label {\n      height: unset;\n    }\n\n    .${prefixCls}-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .${prefixCls}-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .${prefixCls}-form-item-row {\n      align-items: center;\n    }\n\n    .${prefixCls}-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .${prefixCls}-collapse-item {\n      border-radius: ${cssVar.borderRadius} !important;\n    }\n\n    ${responsive.sm} {\n      gap: 0 !important;\n    }\n  `,\n}));\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: null,\n      outlined: null,\n      borderless: styles.borderless,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const flatGroupStyles = createStaticStyles(({ css, cssVar }) => {\n  const borderlessBase = lobeStaticStylish.variantBorderlessWithoutHover;\n  return {\n    borderless: css`\n      ${borderlessBase}\n      padding-inline: 0;\n    `,\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    mobile: css`\n      padding-block: 0;\n      padding-inline: 16px;\n      border-radius: 0;\n      background: ${cssVar.colorBgContainer};\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      padding-inline: 16px;\n      border-radius: ${cssVar.borderRadiusLG};\n    `,\n  };\n});\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n      borderless: flatGroupStyles.borderless,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    root: css`\n      ${responsive.sm} {\n        padding: 16px;\n        border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n        background: ${cssVar.colorBgContainer};\n      }\n    `,\n  };\n});\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    mobileGroupBody: css`\n      padding-block: 0;\n      padding-inline: 16px;\n      background: ${cssVar.colorBgContainer};\n    `,\n    mobileGroupHeader: css`\n      padding: 16px;\n      background: ${cssVar.colorBgLayout};\n    `,\n    title: css`\n      align-items: center;\n      font-size: 16px;\n      font-weight: bold;\n    `,\n    titleBorderless: css`\n      font-size: 18px;\n      font-weight: bold;\n    `,\n    titleMobile: css`\n      ${responsive.sm} {\n        font-size: 14px;\n        font-weight: 400;\n        opacity: 0.5;\n      }\n    `,\n  };\n});\n\nexport const titleVariants = cva(groupStyles.title, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: null,\n      outlined: null,\n      borderless: groupStyles.titleBorderless,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const itemStyles = createStaticStyles(({ css }) => ({\n  itemMinWidth: css`\n    &.${prefixCls}-form-item .${prefixCls}-form-item-control {\n      width: var(--form-item-min-width) !important;\n    }\n  `,\n  itemNoDivider: css`\n    &:not(:first-child) {\n      padding-block-start: 0;\n    }\n  `,\n  root: css`\n    &.${prefixCls}-form-item {\n      padding-block: 16px;\n      padding-inline: 0;\n\n      .${prefixCls}-form-item-label {\n        text-align: start;\n      }\n\n      .${prefixCls}-row {\n        gap: 12px;\n        justify-content: space-between;\n\n        > div {\n          flex: unset;\n          flex-grow: unset;\n        }\n      }\n\n      .${prefixCls}-form-item-required::before {\n        align-self: flex-start;\n      }\n\n      ${responsive.sm} {\n        &.${prefixCls}-form-item-horizontal {\n          .${prefixCls}-form-item-label {\n            flex: 1 !important;\n          }\n          .${prefixCls}-form-item-control {\n            flex: none !important;\n          }\n        }\n      }\n    }\n  `,\n  verticalLayout: css`\n    &.${prefixCls}-form-item {\n      .${prefixCls}-row {\n        align-items: stretch;\n      }\n    }\n  `,\n}));\n\nexport const itemVariants = cva(itemStyles.root, {\n  defaultVariants: {\n    divider: false,\n    itemMinWidth: false,\n    layout: 'vertical',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    itemMinWidth: {\n      true: itemStyles.itemMinWidth,\n      false: null,\n    },\n    divider: {\n      true: null,\n      false: itemStyles.itemNoDivider,\n    },\n    layout: {\n      vertical: itemStyles.verticalLayout,\n      horizontal: null,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n\n  desc: css`\n    display: block;\n\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n  `,\n}));\n"],"mappings":";;;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,YAAY,KAAG;;OAEV,UAAU,aAAa,UAAU;;oCAEJA,SAAO,qBAAqB;;;CAG9D,MAAM,KAAG;;;;;;;;;OASJ,UAAU;;;;OAIV,UAAU,cAAc,UAAU;;;;OAIlC,UAAU;;;;;OAKV,UAAU;;;;;;OAMV,UAAU;;;;OAIV,UAAU;;;;;;OAMV,UAAU;uBACMA,SAAO,aAAa;;;MAGrC,WAAW,GAAG;;;;CAInB,EAAE;AAEH,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,cACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ;EACR,UAAU;EACV,YAAY,OAAO;EACpB,EACF;CAEF,CAAC;AAEF,MAAa,kBAAkB,oBAAoB,EAAE,YAAK,uBAAa;AAErE,QAAO;EACL,YAAY,KAAG;QAFMC,cAAkB,8BAGpB;;;EAGnB,QAAQA,cAAkB;EAC1B,QAAQ,KAAG;;;;oBAIKD,SAAO,iBAAiB;;EAExC,UAAUC,cAAkB;EAC5B,MAAM,KAAG;;uBAEUD,SAAO,eAAe;;EAE1C;EACD;AAEF,MAAa,oBAAoB,IAAI,gBAAgB,MAAM;CACzD,iBAAiB,EACf,SAAS,cACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ,gBAAgB;EACxB,UAAU,gBAAgB;EAC1B,YAAY,gBAAgB;EAC7B,EACF;CAEF,CAAC;AAEF,MAAa,eAAe,oBAAoB,EAAE,YAAK,uBAAa;AAClE,QAAO,EACL,MAAM,KAAG;QACL,WAAW,GAAG;;wCAEkBA,SAAO,qBAAqB;sBAC9CA,SAAO,iBAAiB;;OAG3C;EACD;AAEF,MAAa,cAAc,oBAAoB,EAAE,YAAK,uBAAa;AACjE,QAAO;EACL,iBAAiB,KAAG;;;oBAGJA,SAAO,iBAAiB;;EAExC,mBAAmB,KAAG;;oBAENA,SAAO,cAAc;;EAErC,OAAO,KAAG;;;;;EAKV,iBAAiB,KAAG;;;;EAIpB,aAAa,KAAG;QACZ,WAAW,GAAG;;;;;;EAMnB;EACD;AAEF,MAAa,gBAAgB,IAAI,YAAY,OAAO;CAClD,iBAAiB,EACf,SAAS,cACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ;EACR,UAAU;EACV,YAAY,YAAY;EACzB,EACF;CAEF,CAAC;AAEF,MAAa,aAAa,oBAAoB,EAAE,kBAAW;CACzD,cAAc,KAAG;QACX,UAAU,cAAc,UAAU;;;;CAIxC,eAAe,KAAG;;;;;CAKlB,MAAM,KAAG;QACH,UAAU;;;;SAIT,UAAU;;;;SAIV,UAAU;;;;;;;;;;SAUV,UAAU;;;;QAIX,WAAW,GAAG;YACV,UAAU;aACT,UAAU;;;aAGV,UAAU;;;;;;;CAOrB,gBAAgB,KAAG;QACb,UAAU;SACT,UAAU;;;;;CAKlB,EAAE;AAEH,MAAa,eAAe,IAAI,WAAW,MAAM;CAC/C,iBAAiB;EACf,SAAS;EACT,cAAc;EACd,QAAQ;EACT;CAED,UAAU;EACR,cAAc;GACZ,MAAM,WAAW;GACjB,OAAO;GACR;EACD,SAAS;GACP,MAAM;GACN,OAAO,WAAW;GACnB;EACD,QAAQ;GACN,UAAU,WAAW;GACrB,YAAY;GACb;EACF;CAEF,CAAC;AAEF,MAAa,qBAAqB,oBAAoB,EAAE,YAAK,wBAAc;CACzE,aAAa,KAAG;;;;;;;;;wBASMA,SAAO,qBAAqB;;;kBAGlCA,SAAO,iBAAiB;kBACxBA,SAAO,mBAAmB;;CAE1C,QAAQ,KAAG;MACP,WAAW,GAAG;sCACkBA,SAAO,aAAa;;sCAEpBA,SAAO,qBAAqB;oBAC9CA,SAAO,iBAAiB;;;CAG3C,EAAE;AAEH,MAAa,cAAc,oBAAoB,EAAE,YAAK,wBAAc;CAClE,SAAS,KAAG;;;;CAKZ,MAAM,KAAG;;;;aAIEA,SAAO,qBAAqB;;;;CAIvC,OAAO,KAAG;;;;CAIX,EAAE"}

package/es/FormModal/FormModal.d.mts

@@ -1,8 +1,8 @@
 import { FormModalProps } from "./type.mjs";
-import * as react52 from "react";
+import * as react64 from "react";
 
 //#region src/FormModal/FormModal.d.ts
-declare const FormModal: react52.NamedExoticComponent<FormModalProps>;
+declare const FormModal: react64.NamedExoticComponent<FormModalProps>;
 //#endregion
 export { FormModal };
 //# sourceMappingURL=FormModal.d.mts.map

package/es/FormModal/FormModal.mjs

@@ -4,17 +4,16 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Button_default from "../Button/Button.mjs";
 import Form_default from "../Form/index.mjs";
 import Modal_default from "../Modal/Modal.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import { cx, useResponsive } from "antd-style";
 
 //#region src/FormModal/FormModal.tsx
-const FormModal = memo(({ classNames = {}, className, style, closable, styles = {}, allowFullscreen, title, afterOpenChange, width, onCancel, centered, open, afterClose, destroyOnHidden, closeIcon, paddings, height, enableResponsive, zIndex, mask, getContainer, keyboard, focusTriggerAfterClose, forceRender, loading, footer, submitButtonProps, submitLoading, onFinish, submitText, variant = "borderless", gap, onSubmit, children, ref, ...rest }) => {
+const FormModal = memo(({ classNames = {}, className, style, closable, styles: styles$1 = {}, allowFullscreen, title, afterOpenChange, width, onCancel, centered, open, afterClose, destroyOnHidden, closeIcon, paddings, height, enableResponsive, zIndex, mask, getContainer, keyboard, focusTriggerAfterClose, forceRender, loading, footer, submitButtonProps, submitLoading, onFinish, submitText, variant = "borderless", gap, onSubmit, children, ref, ...rest }) => {
 	const { mobile } = useResponsive();
-	const { cx: cx$1, styles: s } = useStyles();
 	const { form: formClassName, ...modalClassNames } = classNames;
-	const { form: formStyle, ...modalStyles } = typeof styles === "function" ? { form: void 0 } : styles;
+	const { form: formStyle, ...modalStyles } = typeof styles$1 === "function" ? { form: void 0 } : styles$1;
 	return /* @__PURE__ */ jsx(Modal_default, {
 		afterClose,
 		afterOpenChange,
@@ -39,7 +38,7 @@ const FormModal = memo(({ classNames = {}, className, style, closable, styles =
 		open,
 		paddings,
 		style,
-		styles: typeof styles === "function" ? styles : {
+		styles: typeof styles$1 === "function" ? styles$1 : {
 			...modalStyles,
 			body: {
 				paddingTop: mobile ? 0 : void 0,
@@ -50,11 +49,11 @@ const FormModal = memo(({ classNames = {}, className, style, closable, styles =
 		width,
 		zIndex,
 		children: /* @__PURE__ */ jsx(Form_default, {
-			className: cx$1(s.form, formClassName),
+			className: cx(styles.form, formClassName || ""),
 			clearOnDestroy: destroyOnHidden,
 			footer: /* @__PURE__ */ jsx(FlexBasic_default, {
 				align: "center",
-				className: cx$1(s.footer),
+				className: styles.footer,
 				gap: 8,
 				horizontal: true,
 				children: footer || /* @__PURE__ */ jsx(Button_default, {

package/es/FormModal/FormModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormModal.mjs","names":["Modal","Form","cx","Flexbox","Button"],"sources":["../../src/FormModal/FormModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Form from '@/Form';\nimport Modal from '@/Modal';\n\nimport { useStyles } from './style';\nimport type { FormModalProps } from './type';\n\nconst FormModal = memo<FormModalProps>(\n  ({\n    classNames = {},\n    className,\n    style,\n    closable,\n    styles = {},\n    allowFullscreen,\n    title,\n\n    afterOpenChange,\n    width,\n    onCancel,\n    centered,\n    open,\n    afterClose,\n    destroyOnHidden,\n    closeIcon,\n    paddings,\n    height,\n    enableResponsive,\n    zIndex,\n    mask,\n    getContainer,\n    keyboard,\n    focusTriggerAfterClose,\n    forceRender,\n    loading,\n    footer,\n    submitButtonProps,\n    submitLoading,\n    onFinish,\n    submitText,\n    variant = 'borderless',\n    gap,\n    onSubmit,\n    children,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { cx, styles: s } = useStyles();\n    const { form: formClassName, ...modalClassNames } = classNames;\n    const { form: formStyle, ...modalStyles } =\n      typeof styles === 'function' ? { form: undefined } : styles;\n\n    return (\n      <Modal\n        afterClose={afterClose}\n        afterOpenChange={afterOpenChange}\n        allowFullscreen={allowFullscreen}\n        centered={centered}\n        className={className}\n        classNames={modalClassNames}\n        closable={closable}\n        closeIcon={closeIcon}\n        confirmLoading={submitLoading}\n        destroyOnHidden={destroyOnHidden}\n        enableResponsive={enableResponsive}\n        focusTriggerAfterClose={focusTriggerAfterClose}\n        footer={null}\n        forceRender={forceRender}\n        getContainer={getContainer}\n        height={height}\n        keyboard={keyboard}\n        loading={loading}\n        mask={mask}\n        onCancel={onCancel}\n        open={open}\n        paddings={paddings}\n        style={style}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...modalStyles,\n                body: {\n                  paddingTop: mobile ? 0 : undefined,\n                  ...modalStyles?.body,\n                },\n              }\n        }\n        title={title}\n        width={width}\n        zIndex={zIndex}\n      >\n        <Form\n          className={cx(s.form, formClassName)}\n          clearOnDestroy={destroyOnHidden}\n          footer={\n            <Flexbox align={'center'} className={cx(s.footer)} gap={8} horizontal>\n              {footer || (\n                <Button\n                  block\n                  htmlType=\"submit\"\n                  loading={submitLoading}\n                  onClick={onSubmit}\n                  type={'primary'}\n                  {...submitButtonProps}\n                  style={{\n                    flex: 1,\n                    ...submitButtonProps?.style,\n                  }}\n                >\n                  {submitText || 'Submit'}\n                </Button>\n              )}\n            </Flexbox>\n          }\n          gap={gap || (variant === 'borderless' ? 24 : gap)}\n          onFinish={onFinish}\n          ref={ref}\n          style={{\n            paddingBottom: 56,\n            ...formStyle,\n          }}\n          styles={{\n            title: { fontSize: 14 },\n          }}\n          variant={variant}\n          {...rest}\n        >\n          {children}\n        </Form>\n      </Modal>\n    );\n  },\n);\n\nFormModal.displayName = 'FormModal';\n\nexport default FormModal;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,aAAa,EAAE,EACf,WACA,OACA,UACA,SAAS,EAAE,EACX,iBACA,OAEA,iBACA,OACA,UACA,UACA,MACA,YACA,iBACA,WACA,UACA,QACA,kBACA,QACA,MACA,cACA,UACA,wBACA,aACA,SACA,QACA,mBACA,eACA,UACA,YACA,UAAU,cACV,KACA,UACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,UAAI,QAAQ,MAAM,WAAW;CACrC,MAAM,EAAE,MAAM,eAAe,GAAG,oBAAoB;CACpD,MAAM,EAAE,MAAM,WAAW,GAAG,gBAC1B,OAAO,WAAW,aAAa,EAAE,MAAM,QAAW,GAAG;AAEvD,QACE,oBAACA;EACa;EACK;EACA;EACP;EACC;EACX,YAAY;EACF;EACC;EACX,gBAAgB;EACC;EACC;EACM;EACxB,QAAQ;EACK;EACC;EACN;EACE;EACD;EACH;EACI;EACJ;EACI;EACH;EACP,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY,SAAS,IAAI;IACzB,GAAG,aAAa;IACjB;GACF;EAEA;EACA;EACC;YAER,oBAACC;GACC,WAAWC,KAAG,EAAE,MAAM,cAAc;GACpC,gBAAgB;GAChB,QACE,oBAACC;IAAQ,OAAO;IAAU,WAAWD,KAAG,EAAE,OAAO;IAAE,KAAK;IAAG;cACxD,UACC,oBAACE;KACC;KACA,UAAS;KACT,SAAS;KACT,SAAS;KACT,MAAM;KACN,GAAI;KACJ,OAAO;MACL,MAAM;MACN,GAAG,mBAAmB;MACvB;eAEA,cAAc;MACR;KAEH;GAEZ,KAAK,QAAQ,YAAY,eAAe,KAAK;GACnC;GACL;GACL,OAAO;IACL,eAAe;IACf,GAAG;IACJ;GACD,QAAQ,EACN,OAAO,EAAE,UAAU,IAAI,EACxB;GACQ;GACT,GAAI;GAEH;IACI;GACD;EAGb;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"FormModal.mjs","names":["styles","Modal","Form","staticStyles","Flexbox","Button"],"sources":["../../src/FormModal/FormModal.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Form from '@/Form';\nimport Modal from '@/Modal';\n\nimport { styles as staticStyles } from './style';\nimport type { FormModalProps } from './type';\n\nconst FormModal = memo<FormModalProps>(\n  ({\n    classNames = {},\n    className,\n    style,\n    closable,\n    styles = {},\n    allowFullscreen,\n    title,\n\n    afterOpenChange,\n    width,\n    onCancel,\n    centered,\n    open,\n    afterClose,\n    destroyOnHidden,\n    closeIcon,\n    paddings,\n    height,\n    enableResponsive,\n    zIndex,\n    mask,\n    getContainer,\n    keyboard,\n    focusTriggerAfterClose,\n    forceRender,\n    loading,\n    footer,\n    submitButtonProps,\n    submitLoading,\n    onFinish,\n    submitText,\n    variant = 'borderless',\n    gap,\n    onSubmit,\n    children,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { form: formClassName, ...modalClassNames } = classNames;\n    const { form: formStyle, ...modalStyles } =\n      typeof styles === 'function' ? { form: undefined } : styles;\n\n    return (\n      <Modal\n        afterClose={afterClose}\n        afterOpenChange={afterOpenChange}\n        allowFullscreen={allowFullscreen}\n        centered={centered}\n        className={className}\n        classNames={modalClassNames}\n        closable={closable}\n        closeIcon={closeIcon}\n        confirmLoading={submitLoading}\n        destroyOnHidden={destroyOnHidden}\n        enableResponsive={enableResponsive}\n        focusTriggerAfterClose={focusTriggerAfterClose}\n        footer={null}\n        forceRender={forceRender}\n        getContainer={getContainer}\n        height={height}\n        keyboard={keyboard}\n        loading={loading}\n        mask={mask}\n        onCancel={onCancel}\n        open={open}\n        paddings={paddings}\n        style={style}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...modalStyles,\n                body: {\n                  paddingTop: mobile ? 0 : undefined,\n                  ...modalStyles?.body,\n                },\n              }\n        }\n        title={title}\n        width={width}\n        zIndex={zIndex}\n      >\n        <Form\n          className={cx(staticStyles.form, formClassName || '')}\n          clearOnDestroy={destroyOnHidden}\n          footer={\n            <Flexbox align={'center'} className={staticStyles.footer} gap={8} horizontal>\n              {footer || (\n                <Button\n                  block\n                  htmlType=\"submit\"\n                  loading={submitLoading}\n                  onClick={onSubmit}\n                  type={'primary'}\n                  {...submitButtonProps}\n                  style={{\n                    flex: 1,\n                    ...submitButtonProps?.style,\n                  }}\n                >\n                  {submitText || 'Submit'}\n                </Button>\n              )}\n            </Flexbox>\n          }\n          gap={gap || (variant === 'borderless' ? 24 : gap)}\n          onFinish={onFinish}\n          ref={ref}\n          style={{\n            paddingBottom: 56,\n            ...formStyle,\n          }}\n          styles={{\n            title: { fontSize: 14 },\n          }}\n          variant={variant}\n          {...rest}\n        >\n          {children}\n        </Form>\n      </Modal>\n    );\n  },\n);\n\nFormModal.displayName = 'FormModal';\n\nexport default FormModal;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,aAAa,EAAE,EACf,WACA,OACA,UACA,mBAAS,EAAE,EACX,iBACA,OAEA,iBACA,OACA,UACA,UACA,MACA,YACA,iBACA,WACA,UACA,QACA,kBACA,QACA,MACA,cACA,UACA,wBACA,aACA,SACA,QACA,mBACA,eACA,UACA,YACA,UAAU,cACV,KACA,UACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAe,GAAG,oBAAoB;CACpD,MAAM,EAAE,MAAM,WAAW,GAAG,gBAC1B,OAAOA,aAAW,aAAa,EAAE,MAAM,QAAW,GAAGA;AAEvD,QACE,oBAACC;EACa;EACK;EACA;EACP;EACC;EACX,YAAY;EACF;EACC;EACX,gBAAgB;EACC;EACC;EACM;EACxB,QAAQ;EACK;EACC;EACN;EACE;EACD;EACH;EACI;EACJ;EACI;EACH;EACP,QACE,OAAOD,aAAW,aACdA,WACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY,SAAS,IAAI;IACzB,GAAG,aAAa;IACjB;GACF;EAEA;EACA;EACC;YAER,oBAACE;GACC,WAAW,GAAGC,OAAa,MAAM,iBAAiB,GAAG;GACrD,gBAAgB;GAChB,QACE,oBAACC;IAAQ,OAAO;IAAU,WAAWD,OAAa;IAAQ,KAAK;IAAG;cAC/D,UACC,oBAACE;KACC;KACA,UAAS;KACT,SAAS;KACT,SAAS;KACT,MAAM;KACN,GAAI;KACJ,OAAO;MACL,MAAM;MACN,GAAG,mBAAmB;MACvB;eAEA,cAAc;MACR;KAEH;GAEZ,KAAK,QAAQ,YAAY,eAAe,KAAK;GACnC;GACL;GACL,OAAO;IACL,eAAe;IACf,GAAG;IACJ;GACD,QAAQ,EACN,OAAO,EAAE,UAAU,IAAI,EACxB;GACQ;GACT,GAAI;GAEH;IACI;GACD;EAGb;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/FormModal/style.mjs

@@ -1,8 +1,8 @@
-import { createStyles } from "antd-style";
-import { rgba } from "polished";
+import { createStaticStyles } from "antd-style";
 
 //#region src/FormModal/style.ts
-const useStyles = createStyles(({ css: css$1, token, prefixCls, responsive }) => ({
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1, responsive: responsive$1 }) => ({
 	footer: css$1`
     position: absolute;
     z-index: 10;
@@ -15,8 +15,8 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, responsive }) =>
 
     background: linear-gradient(
       to bottom,
-      ${rgba(token.colorBgContainer, 0)} 0%,
-      ${token.colorBgContainer} 10%
+      color-mix(in srgb, ${cssVar$1.colorBgContainer} 0%, transparent) 0%,
+      ${cssVar$1.colorBgContainer} 10%
     );
   `,
 	form: css$1`
@@ -26,7 +26,7 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, responsive }) =>
       font-weight: 500;
     }
 
-    ${responsive.mobile} {
+    ${responsive$1.sm} {
       .${prefixCls}-form-group-title {
         font-size: 14px;
         font-weight: normal;
@@ -42,5 +42,5 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, responsive }) =>
 }));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/FormModal/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FormModal/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(({ css, token, prefixCls, responsive }) => ({\n  footer: css`\n    position: absolute;\n    z-index: 10;\n    inset-block-end: 0;\n    inset-inline: 0;\n\n    width: 100%;\n    margin: 0;\n    padding: 16px;\n\n    background: linear-gradient(\n      to bottom,\n      ${rgba(token.colorBgContainer, 0)} 0%,\n      ${token.colorBgContainer} 10%\n    );\n  `,\n  form: css`\n    position: static;\n    .${prefixCls}-form-group-title {\n      font-size: 15px;\n      font-weight: 500;\n    }\n\n    ${responsive.mobile} {\n      .${prefixCls}-form-group-title {\n        font-size: 14px;\n        font-weight: normal;\n      }\n\n      .${prefixCls}-form-group {\n        width: calc(100% + 32px);\n        margin-inline: -16px;\n        background: transparent;\n      }\n    }\n  `,\n}));\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,WAAW,kBAAkB;CAChF,QAAQ,KAAG;;;;;;;;;;;;QAYL,KAAK,MAAM,kBAAkB,EAAE,CAAC;QAChC,MAAM,iBAAiB;;;CAG7B,MAAM,KAAG;;OAEJ,UAAU;;;;;MAKX,WAAW,OAAO;SACf,UAAU;;;;;SAKV,UAAU;;;;;;;CAOlB,EAAE"}
+{"version":3,"file":"style.mjs","names":["cssVar","responsive"],"sources":["../../src/FormModal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  footer: css`\n    position: absolute;\n    z-index: 10;\n    inset-block-end: 0;\n    inset-inline: 0;\n\n    width: 100%;\n    margin: 0;\n    padding: 16px;\n\n    background: linear-gradient(\n      to bottom,\n      color-mix(in srgb, ${cssVar.colorBgContainer} 0%, transparent) 0%,\n      ${cssVar.colorBgContainer} 10%\n    );\n  `,\n  form: css`\n    position: static;\n    .${prefixCls}-form-group-title {\n      font-size: 15px;\n      font-weight: 500;\n    }\n\n    ${responsive.sm} {\n      .${prefixCls}-form-group-title {\n        font-size: 14px;\n        font-weight: normal;\n      }\n\n      .${prefixCls}-form-group {\n        width: calc(100% + 32px);\n        margin-inline: -16px;\n        background: transparent;\n      }\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,kBAAQ,gCAAkB;CACzE,QAAQ,KAAG;;;;;;;;;;;;2BAYcA,SAAO,iBAAiB;QAC3CA,SAAO,iBAAiB;;;CAG9B,MAAM,KAAG;;OAEJ,UAAU;;;;;MAKXC,aAAW,GAAG;SACX,UAAU;;;;;SAKV,UAAU;;;;;;;CAOlB,EAAE"}

package/es/Grid/Grid.mjs

@@ -1,20 +1,33 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { isString } from "es-toolkit/compat";
 
 //#region src/Grid/Grid.tsx
-const Grid = ({ className, gap = "1em", rows = 3, children, maxItemWidth = 240, ref, ...rest }) => {
-	const { cx, styles } = useStyles({
+const Grid = ({ className, gap = "1em", rows = 3, children, maxItemWidth = 240, ref, style, ...rest }) => {
+	const cssVariables = useMemo(() => {
+		return {
+			"--grid-gap": isString(gap) ? gap : `${gap}px`,
+			"--grid-max-item-width": isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,
+			"--grid-rows": `${rows}`
+		};
+	}, [
 		gap,
 		maxItemWidth,
 		rows
-	});
+	]);
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		className: cx(styles, className),
 		gap,
 		ref,
+		style: {
+			...cssVariables,
+			...style
+		},
 		...rest,
 		children
 	});

package/es/Grid/Grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.mjs","names":["Grid: FC<GridProps>","Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n  className,\n  gap = '1em',\n  rows = 3,\n  children,\n  maxItemWidth = 240,\n  ref,\n  ...rest\n}) => {\n  const { cx, styles } = useStyles({ gap, maxItemWidth, rows });\n  return (\n    <Flexbox className={cx(styles, className)} gap={gap as any} ref={ref} {...rest}>\n      {children}\n    </Flexbox>\n  );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;AASA,MAAMA,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,UAAU;EAAE;EAAK;EAAc;EAAM,CAAC;AAC7D,QACE,oBAACC;EAAQ,WAAW,GAAG,QAAQ,UAAU;EAAO;EAAiB;EAAK,GAAI;EACvE;GACO;;AAId,KAAK,cAAc;AAEnB,mBAAe"}
+{"version":3,"file":"Grid.mjs","names":["Grid: FC<GridProps>","Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isString } from 'es-toolkit/compat';\nimport { type FC } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n  className,\n  gap = '1em',\n  rows = 3,\n  children,\n  maxItemWidth = 240,\n  ref,\n  style,\n  ...rest\n}) => {\n  // Convert props to CSS variables\n  const cssVariables = useMemo<Record<string, string>>(() => {\n    const vars: Record<string, string> = {\n      '--grid-gap': isString(gap) ? gap : `${gap}px`,\n      '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\n      '--grid-rows': `${rows}`,\n    };\n    return vars;\n  }, [gap, maxItemWidth, rows]);\n\n  return (\n    <Flexbox\n      className={cx(styles, className)}\n      gap={gap as any}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;;;;AAYA,MAAMA,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;AAMzD,SALqC;GACnC,cAAc,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI;GAC3C,yBAAyB,SAAS,aAAa,GAAG,eAAe,GAAG,aAAa;GACjF,eAAe,GAAG;GACnB;IAEA;EAAC;EAAK;EAAc;EAAK,CAAC;AAE7B,QACE,oBAACC;EACC,WAAW,GAAG,QAAQ,UAAU;EAC3B;EACA;EACL,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EAEH;GACO;;AAId,KAAK,cAAc;AAEnB,mBAAe"}

package/es/Grid/style.mjs

@@ -1,24 +1,23 @@
-import { createStyles } from "antd-style";
-import { isString } from "es-toolkit/compat";
+import { createStaticStyles } from "antd-style";
 
 //#region src/Grid/style.ts
-const useStyles = createStyles(({ css: css$1 }, { rows, maxItemWidth, gap }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return css$1`
-      --rows: ${rows};
-      --max-item-width: ${isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`};
-      --gap: ${isString(gap) ? gap : `${gap}px`};
+    --rows: var(--grid-rows, 3);
+    --max-item-width: var(--grid-max-item-width, 240px);
+    --gap: var(--grid-gap, 1em);
 
-      display: grid !important;
-      grid-template-columns: repeat(
-        auto-fill,
-        minmax(
-          max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),
-          1fr
-        )
-      );
-    `;
+    display: grid !important;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(
+        max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),
+        1fr
+      )
+    );
+  `;
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Grid/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { isString } from 'es-toolkit/compat';\n\nexport const useStyles = createStyles(\n  (\n    { css },\n    {\n      rows,\n      maxItemWidth,\n      gap,\n    }: { gap: string | number; maxItemWidth: string | number; rows: number },\n  ) => {\n    return css`\n      --rows: ${rows};\n      --max-item-width: ${isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`};\n      --gap: ${isString(gap) ? gap : `${gap}px`};\n\n      display: grid !important;\n      grid-template-columns: repeat(\n        auto-fill,\n        minmax(\n          max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),\n          1fr\n        )\n      );\n    `;\n  },\n);\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,cACF,EACE,MACA,cACA,UAEC;AACH,QAAO,KAAG;gBACE,KAAK;0BACK,SAAS,aAAa,GAAG,eAAe,GAAG,aAAa,IAAI;eACvE,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI,IAAI;;;;;;;;;;;EAY/C"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return css`\n    --rows: var(--grid-rows, 3);\n    --max-item-width: var(--grid-max-item-width, 240px);\n    --gap: var(--grid-gap, 1em);\n\n    display: grid !important;\n    grid-template-columns: repeat(\n      auto-fill,\n      minmax(\n        max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),\n        1fr\n      )\n    );\n  `;\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO,KAAG;;;;;;;;;;;;;;EAcV"}

package/es/GroupAvatar/GroupAvatar.mjs

@@ -3,14 +3,13 @@
 import Block_default from "../Block/Block.mjs";
 import Avatar_default from "../Avatar/index.mjs";
 import Grid_default from "../Grid/Grid.mjs";
-import { useStyles } from "./style.mjs";
+import { variants } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#region src/GroupAvatar/GroupAvatar.tsx
 const GroupAvatar = ({ className, style, avatars = [], size = 32, grid = 2, cornerShape = "square", avatarShape = "square", ...rest }) => {
-	const { cx, styles } = useStyles();
 	const calcSize = useMemo(() => {
 		const length = avatars.length;
 		const gridSize = grid === "auto" ? length > 4 ? 3 : 2 : grid;
@@ -31,17 +30,6 @@ const GroupAvatar = ({ className, style, avatars = [], size = 32, grid = 2, corn
 		cornerShape
 	]);
 	const calcAvatars = useMemo(() => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize), [avatars, calcSize.gridSize]);
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: { cornerShape: "squircle" },
-		variants: { cornerShape: {
-			circle: styles.circle,
-			ios: styles.ios,
-			sharp: styles.sharp,
-			smooth: styles.smooth,
-			square: styles.square,
-			squircle: styles.squircle
-		} }
-	}), [styles]);
 	const isSingle = calcAvatars?.length === 1;
 	return /* @__PURE__ */ jsx(Block_default, {
 		align: "center",

package/es/GroupAvatar/GroupAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GroupAvatar.mjs","names":["GroupAvatar: FC<GroupAvatarProps>","Block","Grid","Avatar"],"sources":["../../src/GroupAvatar/GroupAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { type FC, useMemo } from 'react';\n\nimport Avatar from '@/Avatar';\nimport Block from '@/Block';\nimport Grid from '@/Grid';\n\nimport { useStyles } from './style';\nimport type { GroupAvatarProps } from './type';\n\nconst GroupAvatar: FC<GroupAvatarProps> = ({\n  className,\n  style,\n  avatars = [],\n  size = 32,\n  grid = 2,\n  cornerShape = 'square',\n  avatarShape = 'square',\n  ...rest\n}) => {\n  const { cx, styles } = useStyles();\n\n  const calcSize = useMemo(() => {\n    const length = avatars.length;\n    const isAutoGrid = grid === 'auto';\n    const gridSize = isAutoGrid ? (length > 4 ? 3 : 2) : grid;\n    const isCircle = cornerShape === 'circle';\n    const avatarSize = Math.floor((size / gridSize) * (isCircle ? 0.65 : 0.75));\n    const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));\n\n    return {\n      avatarSize,\n      gapSize,\n      gridSize,\n      gridWidth: avatarSize * gridSize + gapSize,\n      maxItemWidth: avatarSize - 1,\n    };\n  }, [avatars, grid, size, cornerShape]);\n\n  const calcAvatars = useMemo(\n    () => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize),\n    [avatars, calcSize.gridSize],\n  );\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          cornerShape: 'squircle',\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          cornerShape: {\n            circle: styles.circle,\n            ios: styles.ios,\n            sharp: styles.sharp,\n            smooth: styles.smooth,\n            square: styles.square,\n            squircle: styles.squircle,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  const isSingle = calcAvatars?.length === 1;\n\n  return (\n    <Block\n      align={'center'}\n      className={cx(variants({ cornerShape }), className)}\n      height={size}\n      justify={'center'}\n      style={style}\n      width={size}\n      {...rest}\n    >\n      <Grid\n        gap={calcSize.gapSize}\n        maxItemWidth={0}\n        rows={calcSize.gridSize}\n        width={calcSize.gridWidth}\n      >\n        {calcAvatars.map((item, index) => {\n          if (typeof item === 'string')\n            return (\n              <Avatar\n                avatar={item}\n                key={index}\n                shape={avatarShape}\n                size={isSingle ? size * 0.8 : calcSize.avatarSize}\n              />\n            );\n          return (\n            <Avatar\n              key={index}\n              {...item}\n              shape={avatarShape}\n              size={isSingle ? size * 0.8 : calcSize.avatarSize}\n            />\n          );\n        })}\n      </Grid>\n    </Block>\n  );\n};\n\nexport default GroupAvatar;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,eAAqC,EACzC,WACA,OACA,UAAU,EAAE,EACZ,OAAO,IACP,OAAO,GACP,cAAc,UACd,cAAc,UACd,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAAc;EAC7B,MAAM,SAAS,QAAQ;EAEvB,MAAM,WADa,SAAS,SACG,SAAS,IAAI,IAAI,IAAK;EACrD,MAAM,WAAW,gBAAgB;EACjC,MAAM,aAAa,KAAK,MAAO,OAAO,YAAa,WAAW,MAAO,KAAM;EAC3E,MAAM,UAAU,KAAK,OAAO,OAAO,aAAa,aAAa,WAAW,IAAI,GAAG;AAE/E,SAAO;GACL;GACA;GACA;GACA,WAAW,aAAa,WAAW;GACnC,cAAc,aAAa;GAC5B;IACA;EAAC;EAAS;EAAM;EAAM;EAAY,CAAC;CAEtC,MAAM,cAAc,cACZ,SAAS,MAAM,GAAG,SAAS,WAAW,SAAS,SAAS,EAC9D,CAAC,SAAS,SAAS,SAAS,CAC7B;CAED,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EACf,aAAa,YACd;EAED,UAAU,EACR,aAAa;GACX,QAAQ,OAAO;GACf,KAAK,OAAO;GACZ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,WAAW,aAAa,WAAW;AAEzC,QACE,oBAACC;EACC,OAAO;EACP,WAAW,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,UAAU;EACnD,QAAQ;EACR,SAAS;EACF;EACP,OAAO;EACP,GAAI;YAEJ,oBAACC;GACC,KAAK,SAAS;GACd,cAAc;GACd,MAAM,SAAS;GACf,OAAO,SAAS;aAEf,YAAY,KAAK,MAAM,UAAU;AAChC,QAAI,OAAO,SAAS,SAClB,QACE,oBAACC;KACC,QAAQ;KAER,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;OAFlC,MAGL;AAEN,WACE,oBAACA;KAEC,GAAI;KACJ,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;OAHlC,MAIL;KAEJ;IACG;GACD;;AAIZ,0BAAe"}
+{"version":3,"file":"GroupAvatar.mjs","names":["GroupAvatar: FC<GroupAvatarProps>","Block","Grid","Avatar"],"sources":["../../src/GroupAvatar/GroupAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport Avatar from '@/Avatar';\nimport Block from '@/Block';\nimport Grid from '@/Grid';\n\nimport { variants } from './style';\nimport type { GroupAvatarProps } from './type';\n\nconst GroupAvatar: FC<GroupAvatarProps> = ({\n  className,\n  style,\n  avatars = [],\n  size = 32,\n  grid = 2,\n  cornerShape = 'square',\n  avatarShape = 'square',\n  ...rest\n}) => {\n  const calcSize = useMemo(() => {\n    const length = avatars.length;\n    const isAutoGrid = grid === 'auto';\n    const gridSize = isAutoGrid ? (length > 4 ? 3 : 2) : grid;\n    const isCircle = cornerShape === 'circle';\n    const avatarSize = Math.floor((size / gridSize) * (isCircle ? 0.65 : 0.75));\n    const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));\n\n    return {\n      avatarSize,\n      gapSize,\n      gridSize,\n      gridWidth: avatarSize * gridSize + gapSize,\n      maxItemWidth: avatarSize - 1,\n    };\n  }, [avatars, grid, size, cornerShape]);\n\n  const calcAvatars = useMemo(\n    () => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize),\n    [avatars, calcSize.gridSize],\n  );\n\n  const isSingle = calcAvatars?.length === 1;\n\n  return (\n    <Block\n      align={'center'}\n      className={cx(variants({ cornerShape }), className)}\n      height={size}\n      justify={'center'}\n      style={style}\n      width={size}\n      {...rest}\n    >\n      <Grid\n        gap={calcSize.gapSize}\n        maxItemWidth={0}\n        rows={calcSize.gridSize}\n        width={calcSize.gridWidth}\n      >\n        {calcAvatars.map((item, index) => {\n          if (typeof item === 'string')\n            return (\n              <Avatar\n                avatar={item}\n                key={index}\n                shape={avatarShape}\n                size={isSingle ? size * 0.8 : calcSize.avatarSize}\n              />\n            );\n          return (\n            <Avatar\n              key={index}\n              {...item}\n              shape={avatarShape}\n              size={isSingle ? size * 0.8 : calcSize.avatarSize}\n            />\n          );\n        })}\n      </Grid>\n    </Block>\n  );\n};\n\nexport default GroupAvatar;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,eAAqC,EACzC,WACA,OACA,UAAU,EAAE,EACZ,OAAO,IACP,OAAO,GACP,cAAc,UACd,cAAc,UACd,GAAG,WACC;CACJ,MAAM,WAAW,cAAc;EAC7B,MAAM,SAAS,QAAQ;EAEvB,MAAM,WADa,SAAS,SACG,SAAS,IAAI,IAAI,IAAK;EACrD,MAAM,WAAW,gBAAgB;EACjC,MAAM,aAAa,KAAK,MAAO,OAAO,YAAa,WAAW,MAAO,KAAM;EAC3E,MAAM,UAAU,KAAK,OAAO,OAAO,aAAa,aAAa,WAAW,IAAI,GAAG;AAE/E,SAAO;GACL;GACA;GACA;GACA,WAAW,aAAa,WAAW;GACnC,cAAc,aAAa;GAC5B;IACA;EAAC;EAAS;EAAM;EAAM;EAAY,CAAC;CAEtC,MAAM,cAAc,cACZ,SAAS,MAAM,GAAG,SAAS,WAAW,SAAS,SAAS,EAC9D,CAAC,SAAS,SAAS,SAAS,CAC7B;CAED,MAAM,WAAW,aAAa,WAAW;AAEzC,QACE,oBAACC;EACC,OAAO;EACP,WAAW,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,UAAU;EACnD,QAAQ;EACR,SAAS;EACF;EACP,OAAO;EACP,GAAI;YAEJ,oBAACC;GACC,KAAK,SAAS;GACd,cAAc;GACd,MAAM,SAAS;GACf,OAAO,SAAS;aAEf,YAAY,KAAK,MAAM,UAAU;AAChC,QAAI,OAAO,SAAS,SAClB,QACE,oBAACC;KACC,QAAQ;KAER,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;OAFlC,MAGL;AAEN,WACE,oBAACA;KAEC,GAAI;KACJ,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;OAHlC,MAIL;KAEJ;IACG;GACD;;AAIZ,0BAAe"}