@lobehub/ui 4.3.2 → 4.3.3

package/es/Image/style.mjs

@@ -1,9 +1,12 @@
-import { createStyles } from "antd-style";
-import { rgba } from "polished";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Image/style.ts
-const useStyles = createStyles(({ cx: cx$1, css: css$1, token, stylish, prefixCls }, { alwaysShowActions } = {}) => {
-	const actions = cx$1(css$1`
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
+	return {
+		actionsHidden: css$1`
       cursor: pointer;
 
       position: absolute;
@@ -11,73 +14,95 @@ const useStyles = createStyles(({ cx: cx$1, css: css$1, token, stylish, prefixCl
       inset-block-start: 0;
       inset-inline-end: 0;
 
-      opacity: ${alwaysShowActions ? 1 : 0};
-    `);
-	return {
-		actions,
-		borderless: stylish.variantBorderlessWithoutHover,
-		filled: cx$1(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),
+      opacity: 0;
+    `,
+		actionsVisible: css$1`
+      cursor: pointer;
+
+      position: absolute;
+      z-index: 1;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+
+      opacity: 1;
+    `,
+		borderless: staticStylish.variantBorderlessWithoutHover,
+		filled: css$1`
+      ${staticStylish.variantOutlinedWithoutHover};
+      ${staticStylish.variantFilledWithoutHover};
+    `,
 		image: css$1`
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-        width: auto;
-        height: auto;
-      `,
-		mask: cx$1(stylish.blur, css$1`
-          backdrop-filter: blur(8px);
-        `),
-		outlined: stylish.variantOutlinedWithoutHover,
+      width: auto;
+      height: auto;
+    `,
+		mask: css$1`
+      ${staticStylish.blur};
+      backdrop-filter: blur(8px);
+    `,
+		outlined: staticStylish.variantOutlinedWithoutHover,
 		preview: css$1`
-        .${prefixCls}-image-preview-mask {
-          background: ${rgba(token.colorBgLayout, .9)};
-        }
+      .${prefixCls}-image-preview-mask {
+        background: color-mix(in srgb, ${cssVar$1.colorBgLayout} 90%, transparent);
+      }
 
-        img {
-          width: 100%;
-        }
-      `,
+      img {
+        width: 100%;
+      }
+    `,
 		root: css$1`
-        cursor: pointer;
-        user-select: none;
+      cursor: pointer;
+      user-select: none;
 
-        position: relative;
+      position: relative;
 
-        overflow: hidden;
+      overflow: hidden;
 
-        width: fit-content;
-        border-radius: ${token.borderRadius}px;
+      width: fit-content;
+      border-radius: ${cssVar$1.borderRadius};
 
-        line-height: 1;
+      line-height: 1;
 
-        .${prefixCls}-image-cover {
-          display: none !important;
-        }
+      .${prefixCls}-image-cover {
+        display: none !important;
+      }
 
-        &:hover {
-          .${actions} {
-            opacity: 1;
-          }
+      &:hover {
+        .actions-hidden {
+          opacity: 1;
         }
-      `,
-		toolbar: cx$1(stylish.blur, stylish.variantOutlinedWithoutHover, css$1`
-          padding: 4px;
-          border-color: ${token.colorFillTertiary};
-          border-radius: ${token.borderRadiusLG}px;
-          background: ${rgba(token.colorBgContainer, .5)};
-        `),
+      }
+    `,
+		toolbar: css$1`
+      ${staticStylish.blur};
+      ${staticStylish.variantOutlinedWithoutHover};
+      padding: 4px;
+      border-color: ${cssVar$1.colorFillTertiary};
+      border-radius: ${cssVar$1.borderRadiusLG};
+      background: color-mix(in srgb, ${cssVar$1.colorBgContainer} 50%, transparent);
+    `,
 		wrapper: css$1`
-        position: relative;
-        overflow: hidden;
-        max-width: 100%;
-        height: auto;
-      `
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+      height: auto;
+    `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: { variant: "filled" },
+	variants: { variant: {
+		filled: styles.filled,
+		outlined: styles.outlined,
+		borderless: styles.borderless
+	} }
+});
 const FALLBACK_DARK = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
 const FALLBACK_LIGHT = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
 
 //#endregion
-export { FALLBACK_DARK, FALLBACK_LIGHT, useStyles };
+export { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Image/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(\n  (\n    { cx, css, token, stylish, prefixCls },\n    {\n      alwaysShowActions,\n    }: {\n      alwaysShowActions?: boolean;\n    } = {},\n  ) => {\n    const actions = cx(css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: ${alwaysShowActions ? 1 : 0};\n    `);\n\n    return {\n      actions,\n      borderless: stylish.variantBorderlessWithoutHover,\n      filled: cx(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),\n      image: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: auto;\n        height: auto;\n      `,\n      mask: cx(\n        stylish.blur,\n        css`\n          backdrop-filter: blur(8px);\n        `,\n      ),\n      outlined: stylish.variantOutlinedWithoutHover,\n      preview: css`\n        .${prefixCls}-image-preview-mask {\n          background: ${rgba(token.colorBgLayout, 0.9)};\n        }\n\n        img {\n          width: 100%;\n        }\n      `,\n      root: css`\n        cursor: pointer;\n        user-select: none;\n\n        position: relative;\n\n        overflow: hidden;\n\n        width: fit-content;\n        border-radius: ${token.borderRadius}px;\n\n        line-height: 1;\n\n        .${prefixCls}-image-cover {\n          display: none !important;\n        }\n\n        &:hover {\n          .${actions} {\n            opacity: 1;\n          }\n        }\n      `,\n      toolbar: cx(\n        stylish.blur,\n        stylish.variantOutlinedWithoutHover,\n        css`\n          padding: 4px;\n          border-color: ${token.colorFillTertiary};\n          border-radius: ${token.borderRadiusLG}px;\n          background: ${rgba(token.colorBgContainer, 0.5)};\n        `,\n      ),\n\n      wrapper: css`\n        position: relative;\n        overflow: hidden;\n        max-width: 100%;\n        height: auto;\n      `,\n    };\n  },\n);\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,UAAI,YAAK,OAAO,SAAS,aAC3B,EACE,sBAGE,EAAE,KACH;CACH,MAAM,UAAUA,KAAG,KAAG;;;;;;;;iBAQT,oBAAoB,IAAI,EAAE;MACrC;AAEF,QAAO;EACL;EACA,YAAY,QAAQ;EACpB,QAAQA,KAAG,QAAQ,6BAA6B,QAAQ,0BAA0B;EAClF,OAAO,KAAG;;;;;;;;EAQV,MAAMA,KACJ,QAAQ,MACR,KAAG;;UAGJ;EACD,UAAU,QAAQ;EAClB,SAAS,KAAG;WACP,UAAU;wBACG,KAAK,MAAM,eAAe,GAAI,CAAC;;;;;;;EAOjD,MAAM,KAAG;;;;;;;;;yBASU,MAAM,aAAa;;;;WAIjC,UAAU;;;;;aAKR,QAAQ;;;;;EAKf,SAASA,KACP,QAAQ,MACR,QAAQ,6BACR,KAAG;;0BAEe,MAAM,kBAAkB;2BACvB,MAAM,eAAe;wBACxB,KAAK,MAAM,kBAAkB,GAAI,CAAC;UAEnD;EAED,SAAS,KAAG;;;;;;EAMb;EAEJ;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } 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  return {\n    actionsHidden: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 0;\n    `,\n    actionsVisible: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 1;\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      ${lobeStaticStylish.variantFilledWithoutHover};\n    `,\n    image: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: auto;\n      height: auto;\n    `,\n    mask: css`\n      ${lobeStaticStylish.blur};\n      backdrop-filter: blur(8px);\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    preview: css`\n      .${prefixCls}-image-preview-mask {\n        background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n      }\n\n      img {\n        width: 100%;\n      }\n    `,\n    root: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      line-height: 1;\n\n      .${prefixCls}-image-cover {\n        display: none !important;\n      }\n\n      &:hover {\n        .actions-hidden {\n          opacity: 1;\n        }\n      }\n    `,\n    toolbar: css`\n      ${lobeStaticStylish.blur};\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      padding: 4px;\n      border-color: ${cssVar.colorFillTertiary};\n      border-radius: ${cssVar.borderRadiusLG};\n      background: color-mix(in srgb, ${cssVar.colorBgContainer} 50%, transparent);\n    `,\n\n    wrapper: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      height: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,eAAe,KAAG;;;;;;;;;;EAUlB,gBAAgB,KAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,KAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,KAAG;;;;;;;;EAQV,MAAM,KAAG;QACLA,cAAkB,KAAK;;;EAG3B,UAAUA,cAAkB;EAC5B,SAAS,KAAG;SACP,UAAU;yCACsBC,SAAO,cAAc;;;;;;;EAO1D,MAAM,KAAG;;;;;;;;;uBASUA,SAAO,aAAa;;;;SAIlC,UAAU;;;;;;;;;;EAUf,SAAS,KAAG;QACRD,cAAkB,KAAK;QACvBA,cAAkB,4BAA4B;;sBAEhCC,SAAO,kBAAkB;uBACxBA,SAAO,eAAe;uCACNA,SAAO,iBAAiB;;EAG3D,SAAS,KAAG;;;;;;EAMb;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,UACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;EACpB,EACF;CAEF,CAAC;AAEF,MAAa,gBACX;AACF,MAAa,iBACX"}

package/es/ImageSelect/ImageSelect.mjs

@@ -3,9 +3,10 @@
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Icon_default from "../Icon/Icon.mjs";
 import Img_default from "../Img/index.mjs";
-import { useStyles } from "./styles.mjs";
+import { styles } from "./styles.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
 
 //#region src/ImageSelect/ImageSelect.tsx
@@ -15,7 +16,6 @@ const ImageSelect = memo(({ ref, className, style, value, defaultValue, onChange
 		onChange,
 		value
 	});
-	const { styles, cx } = useStyles();
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		className,
 		gap: 16,

package/es/ImageSelect/ImageSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSelect.mjs","names":["useControlledState","Flexbox","Img","Icon"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { useStyles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    const { styles, cx } = useStyles();\n\n    return (\n      <Flexbox className={className} gap={16} horizontal ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              className={cx(styles.container, isActive && styles.active)}\n              gap={4}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                className={cx(styles.img, isActive && styles.imgActive, classNames?.img)}\n                height={height}\n                src={item.img}\n                style={{\n                  ...customStyles?.img,\n                  height,\n                  width,\n                }}\n                unoptimized={unoptimized}\n                width={width}\n              />\n\n              <Flexbox align={'center'} gap={4} horizontal>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,cAAc,MACjB,EACC,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmBA,cAA2B,cAAc;EAC/E;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,QAAQ,OAAO,WAAW;AAElC,QACE,oBAACC;EAAmB;EAAW,KAAK;EAAI;EAAgB;EAAY;EAAO,GAAI;YAC5E,SAAS,KAAK,SAAS;GACtB,MAAM,WAAW,KAAK,UAAU;AAChC,UACE,qBAACA;IACC,OAAO;IACP,WAAW,GAAG,OAAO,WAAW,YAAY,OAAO,OAAO;IAC1D,KAAK;IAEL,eAAe,gBAAgB,KAAK,MAAM;eAE1C,oBAACC;KACC,KAAK,KAAK,OAAO,KAAK;KACtB,WAAW,GAAG,OAAO,KAAK,YAAY,OAAO,WAAW,YAAY,IAAI;KAChE;KACR,KAAK,KAAK;KACV,OAAO;MACL,GAAG,cAAc;MACjB;MACA;MACD;KACY;KACN;MACP,EAEF,qBAACD;KAAQ,OAAO;KAAU,KAAK;KAAG;gBAC/B,KAAK,QAAQ,oBAACE,gBAAK,MAAM,KAAK,OAAQ,EACtC,KAAK;MACE;MApBL,KAAK,MAqBF;IAEZ;GACM;EAGf;AAED,YAAY,cAAc;AAE1B,0BAAe"}
+{"version":3,"file":"ImageSelect.mjs","names":["useControlledState","Flexbox","Img","Icon"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { styles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    return (\n      <Flexbox className={className} gap={16} horizontal ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              className={cx(styles.container, isActive && styles.active)}\n              gap={4}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                className={cx(styles.img, isActive && styles.imgActive, classNames?.img)}\n                height={height}\n                src={item.img}\n                style={{\n                  ...customStyles?.img,\n                  height,\n                  width,\n                }}\n                unoptimized={unoptimized}\n                width={width}\n              />\n\n              <Flexbox align={'center'} gap={4} horizontal>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,cAAc,MACjB,EACC,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmBA,cAA2B,cAAc;EAC/E;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAACC;EAAmB;EAAW,KAAK;EAAI;EAAgB;EAAY;EAAO,GAAI;YAC5E,SAAS,KAAK,SAAS;GACtB,MAAM,WAAW,KAAK,UAAU;AAChC,UACE,qBAACA;IACC,OAAO;IACP,WAAW,GAAG,OAAO,WAAW,YAAY,OAAO,OAAO;IAC1D,KAAK;IAEL,eAAe,gBAAgB,KAAK,MAAM;eAE1C,oBAACC;KACC,KAAK,KAAK,OAAO,KAAK;KACtB,WAAW,GAAG,OAAO,KAAK,YAAY,OAAO,WAAW,YAAY,IAAI;KAChE;KACR,KAAK,KAAK;KACV,OAAO;MACL,GAAG,cAAc;MACjB;MACA;MACD;KACY;KACN;MACP,EAEF,qBAACD;KAAQ,OAAO;KAAU,KAAK;KAAG;gBAC/B,KAAK,QAAQ,oBAACE,gBAAK,MAAM,KAAK,OAAQ,EACtC,KAAK;MACE;MApBL,KAAK,MAqBF;IAEZ;GACM;EAGf;AAED,YAAY,cAAc;AAE1B,0BAAe"}

package/es/ImageSelect/styles.mjs

@@ -1,28 +1,29 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
 
 //#region src/ImageSelect/styles.ts
-const useStyles = createStyles(({ cx: cx$1, stylish, css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		active: css$1`
-      color: ${token.colorText};
+      color: ${cssVar$1.colorText};
     `,
 		container: css$1`
       cursor: pointer;
-      color: ${token.colorTextDescription};
+      color: ${cssVar$1.colorTextDescription};
     `,
-		img: cx$1(stylish.variantFilled, css$1`
-        border-radius: ${token.borderRadius}px;
+		img: cx(staticStylish.variantFilled, css$1`
+        border-radius: ${cssVar$1.borderRadius};
 
         &:hover {
-          box-shadow: 0 0 0 2px ${token.colorText};
+          box-shadow: 0 0 0 2px ${cssVar$1.colorText};
         }
       `),
-		imgActive: cx$1(stylish.active, css$1`
-        box-shadow: 0 0 0 2px ${token.colorTextTertiary};
+		imgActive: cx(staticStylish.active, css$1`
+        box-shadow: 0 0 0 2px ${cssVar$1.colorTextTertiary};
       `)
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=styles.mjs.map

package/es/ImageSelect/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":["cx"],"sources":["../../src/ImageSelect/styles.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, stylish, css, token }) => {\n  return {\n    active: css`\n      color: ${token.colorText};\n    `,\n    container: css`\n      cursor: pointer;\n      color: ${token.colorTextDescription};\n    `,\n\n    img: cx(\n      stylish.variantFilled,\n      css`\n        border-radius: ${token.borderRadius}px;\n\n        &:hover {\n          box-shadow: 0 0 0 2px ${token.colorText};\n        }\n      `,\n    ),\n    imgActive: cx(\n      stylish.active,\n      css`\n        box-shadow: 0 0 0 2px ${token.colorTextTertiary};\n      `,\n    ),\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,SAAS,YAAK,YAAY;AACrE,QAAO;EACL,QAAQ,KAAG;eACA,MAAM,UAAU;;EAE3B,WAAW,KAAG;;eAEH,MAAM,qBAAqB;;EAGtC,KAAKA,KACH,QAAQ,eACR,KAAG;yBACgB,MAAM,aAAa;;;kCAGV,MAAM,UAAU;;QAG7C;EACD,WAAWA,KACT,QAAQ,QACR,KAAG;gCACuB,MAAM,kBAAkB;QAEnD;EACF;EACD"}
+{"version":3,"file":"styles.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/ImageSelect/styles.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    active: css`\n      color: ${cssVar.colorText};\n    `,\n    container: css`\n      cursor: pointer;\n      color: ${cssVar.colorTextDescription};\n    `,\n\n    img: cx(\n      lobeStaticStylish.variantFilled,\n      css`\n        border-radius: ${cssVar.borderRadius};\n\n        &:hover {\n          box-shadow: 0 0 0 2px ${cssVar.colorText};\n        }\n      `,\n    ),\n    imgActive: cx(\n      lobeStaticStylish.active,\n      css`\n        box-shadow: 0 0 0 2px ${cssVar.colorTextTertiary};\n      `,\n    ),\n  };\n});\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,QAAQ,KAAG;eACAA,SAAO,UAAU;;EAE5B,WAAW,KAAG;;eAEHA,SAAO,qBAAqB;;EAGvC,KAAK,GACHC,cAAkB,eAClB,KAAG;yBACgBD,SAAO,aAAa;;;kCAGXA,SAAO,UAAU;;QAG9C;EACD,WAAW,GACTC,cAAkB,QAClB,KAAG;gCACuBD,SAAO,kBAAkB;QAEpD;EACF;EACD"}

package/es/Input/Input.d.mts

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

package/es/Input/Input.mjs

@@ -1,35 +1,21 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
-import { memo, useMemo } from "react";
+import { variants } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/Input/Input.tsx
 const Input$1 = memo(({ ref, variant, shadow, className, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(Input, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: { shadow: false },
-			variants: {
-				variant: {
-					filled: styles.filled,
-					outlined: styles.outlined,
-					borderless: styles.borderless,
-					underlined: null
-				},
-				shadow: {
-					false: null,
-					true: styles.shadow
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			shadow,
-			variant: variant || (theme.isDarkMode ? "filled" : "outlined")
+			variant: variant || (isDarkMode ? "filled" : "outlined")
 		}), className),
 		ref,
-		variant: variant || (theme.isDarkMode ? "filled" : "outlined"),
+		variant: variant || (isDarkMode ? "filled" : "outlined"),
 		...rest
 	});
 });

package/es/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input","AntInput"],"sources":["../../src/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { useStyles } from './style';\nimport type { InputProps } from './type';\n\nconst Input = memo<InputProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { styles, cx, theme } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          shadow: false,\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          variant: {\n            filled: styles.filled,\n            outlined: styles.outlined,\n            borderless: styles.borderless,\n            underlined: null,\n          },\n          shadow: {\n            false: null,\n            true: styles.shadow,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <AntInput\n      className={cx(\n        variants({ shadow, variant: variant || (theme.isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      ref={ref}\n      variant={variant || (theme.isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;;;AASA,MAAMA,UAAQ,MAAkB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/E,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;AA0BzC,QACE,oBAACC;EACC,WAAW,GA1BE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,QAAQ,OACT;GAED,UAAU;IACR,SAAS;KACP,QAAQ,OAAO;KACf,UAAU,OAAO;KACjB,YAAY,OAAO;KACnB,YAAY;KACb;IACD,QAAQ;KACN,OAAO;KACP,MAAM,OAAO;KACd;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAKc;GAAE;GAAQ,SAAS,YAAY,MAAM,aAAa,WAAW;GAAa,CAAC,EACpF,UACD;EACI;EACL,SAAS,YAAY,MAAM,aAAa,WAAW;EACnD,GAAI;GACJ;EAEJ;AAEF,QAAM,cAAc;AAEpB,oBAAeD"}
+{"version":3,"file":"Input.mjs","names":["Input","AntInput"],"sources":["../../src/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputProps } from './type';\n\nconst Input = memo<InputProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;;;AASA,MAAMA,UAAQ,MAAkB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/E,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC;EACC,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACI;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAEJ;AAEF,QAAM,cAAc;AAEpB,oBAAeD"}

package/es/Input/InputNumber.d.mts

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

package/es/Input/InputNumber.mjs

@@ -1,35 +1,21 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
-import { memo, useMemo } from "react";
+import { variants } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { InputNumber } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/Input/InputNumber.tsx
 const InputNumber$1 = memo(({ ref, variant, shadow, className, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(InputNumber, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: { shadow: false },
-			variants: {
-				variant: {
-					filled: styles.filled,
-					outlined: styles.outlined,
-					borderless: styles.borderless,
-					underlined: null
-				},
-				shadow: {
-					false: null,
-					true: styles.shadow
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			shadow,
-			variant: variant || (theme.isDarkMode ? "filled" : "outlined")
+			variant: variant || (isDarkMode ? "filled" : "outlined")
 		}), className),
 		ref,
-		variant: variant || (theme.isDarkMode ? "filled" : "outlined"),
+		variant: variant || (isDarkMode ? "filled" : "outlined"),
 		...rest
 	});
 });

package/es/Input/InputNumber.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.mjs","names":["InputNumber","AntInputNumber"],"sources":["../../src/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { InputNumber as AntInputNumber } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { useStyles } from './style';\nimport type { InputNumberProps } from './type';\n\nconst InputNumber = memo<InputNumberProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { styles, cx, theme } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          shadow: false,\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          variant: {\n            filled: styles.filled,\n            outlined: styles.outlined,\n            borderless: styles.borderless,\n            underlined: null,\n          },\n          shadow: {\n            false: null,\n            true: styles.shadow,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <AntInputNumber\n      className={cx(\n        variants({ shadow, variant: variant || (theme.isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      ref={ref}\n      variant={variant || (theme.isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;;;AASA,MAAMA,gBAAc,MAAwB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC3F,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;AA0BzC,QACE,oBAACC;EACC,WAAW,GA1BE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,QAAQ,OACT;GAED,UAAU;IACR,SAAS;KACP,QAAQ,OAAO;KACf,UAAU,OAAO;KACjB,YAAY,OAAO;KACnB,YAAY;KACb;IACD,QAAQ;KACN,OAAO;KACP,MAAM,OAAO;KACd;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAKc;GAAE;GAAQ,SAAS,YAAY,MAAM,aAAa,WAAW;GAAa,CAAC,EACpF,UACD;EACI;EACL,SAAS,YAAY,MAAM,aAAa,WAAW;EACnD,GAAI;GACJ;EAEJ;AAEF,cAAY,cAAc;AAE1B,0BAAeD"}
+{"version":3,"file":"InputNumber.mjs","names":["InputNumber","AntInputNumber"],"sources":["../../src/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { InputNumber as AntInputNumber } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputNumberProps } from './type';\n\nconst InputNumber = memo<InputNumberProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInputNumber\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;;;AASA,MAAMA,gBAAc,MAAwB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC3F,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC;EACC,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACI;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAEJ;AAEF,cAAY,cAAc;AAE1B,0BAAeD"}

package/es/Input/InputOPT.d.mts

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

package/es/Input/InputOPT.mjs

@@ -1,36 +1,21 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
-import { memo, useMemo } from "react";
+import { variantsOPT } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/Input/InputOPT.tsx
 const InputOPT = memo(({ ref, variant, shadow, className, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
-	const variants = useMemo(() => cva(styles.rootOPT, {
-		defaultVariants: { shadow: false },
-		variants: {
-			variant: {
-				filled: styles.filledOPT,
-				outlined: styles.outlinedOPT,
-				borderless: styles.borderlessOPT,
-				underlined: null
-			},
-			shadow: {
-				false: null,
-				true: styles.shadowOPT
-			}
-		}
-	}), [styles]);
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(Input.OTP, {
-		className: cx(variants({
+		className: cx(variantsOPT({
 			shadow,
-			variant: variant || (theme.isDarkMode ? "filled" : "outlined")
+			variant: variant || (isDarkMode ? "filled" : "outlined")
 		}), className),
 		ref,
-		variant: variant || (theme.isDarkMode ? "filled" : "outlined"),
+		variant: variant || (isDarkMode ? "filled" : "outlined"),
 		...rest
 	});
 });

package/es/Input/InputOPT.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputOPT.mjs","names":["AntInput"],"sources":["../../src/Input/InputOPT.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { useStyles } from './style';\nimport type { InputOPTProps } from './type';\n\nconst InputOPT = memo<InputOPTProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { styles, cx, theme } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.rootOPT, {\n        defaultVariants: {\n          shadow: false,\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          variant: {\n            filled: styles.filledOPT,\n            outlined: styles.outlinedOPT,\n            borderless: styles.borderlessOPT,\n            underlined: null,\n          },\n          shadow: {\n            false: null,\n            true: styles.shadowOPT,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <AntInput.OTP\n      className={cx(\n        variants({ shadow, variant: variant || (theme.isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      ref={ref}\n      variant={variant || (theme.isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nInputOPT.displayName = 'InputOPT';\n\nexport default InputOPT;\n"],"mappings":";;;;;;;;;AASA,MAAM,WAAW,MAAqB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CACrF,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CAEzC,MAAM,WAAW,cAEb,IAAI,OAAO,SAAS;EAClB,iBAAiB,EACf,QAAQ,OACT;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACnB,YAAY;IACb;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;AAED,QACE,oBAACA,MAAS;EACR,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,MAAM,aAAa,WAAW;GAAa,CAAC,EACpF,UACD;EACI;EACL,SAAS,YAAY,MAAM,aAAa,WAAW;EACnD,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"InputOPT.mjs","names":["AntInput"],"sources":["../../src/Input/InputOPT.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variantsOPT } from './style';\nimport type { InputOPTProps } from './type';\n\nconst InputOPT = memo<InputOPTProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput.OTP\n      className={cx(\n        variantsOPT({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nInputOPT.displayName = 'InputOPT';\n\nexport default InputOPT;\n"],"mappings":";;;;;;;;;AASA,MAAM,WAAW,MAAqB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CACrF,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACA,MAAS;EACR,WAAW,GACT,YAAY;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EACjF,UACD;EACI;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc;AAEvB,uBAAe"}

package/es/Input/InputPassword.d.mts

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

package/es/Input/InputPassword.mjs

@@ -1,36 +1,21 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
-import { memo, useMemo } from "react";
+import { variants } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/Input/InputPassword.tsx
 const InputPassword = memo(({ ref, variant, shadow, className, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: { shadow: false },
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless,
-				underlined: null
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			}
-		}
-	}), [styles]);
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(Input.Password, {
 		className: cx(variants({
 			shadow,
-			variant: variant || (theme.isDarkMode ? "filled" : "outlined")
+			variant: variant || (isDarkMode ? "filled" : "outlined")
 		}), className),
 		ref,
-		variant: variant || (theme.isDarkMode ? "filled" : "outlined"),
+		variant: variant || (isDarkMode ? "filled" : "outlined"),
 		...rest
 	});
 });

package/es/Input/InputPassword.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.mjs","names":["AntInput"],"sources":["../../src/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { useStyles } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { styles, cx, theme } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          shadow: false,\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          variant: {\n            filled: styles.filled,\n            outlined: styles.outlined,\n            borderless: styles.borderless,\n            underlined: null,\n          },\n          shadow: {\n            false: null,\n            true: styles.shadow,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <AntInput.Password\n      className={cx(\n        variants({ shadow, variant: variant || (theme.isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      ref={ref}\n      variant={variant || (theme.isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"mappings":";;;;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/F,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CAEzC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EACf,QAAQ,OACT;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACnB,YAAY;IACb;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;AAED,QACE,oBAACA,MAAS;EACR,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,MAAM,aAAa,WAAW;GAAa,CAAC,EACpF,UACD;EACI;EACL,SAAS,YAAY,MAAM,aAAa,WAAW;EACnD,GAAI;GACJ;EAEJ;AAEF,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"InputPassword.mjs","names":["AntInput"],"sources":["../../src/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput.Password\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"mappings":";;;;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/F,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACA,MAAS;EACR,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACI;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAEJ;AAEF,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Input/TextArea.d.mts

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

package/es/Input/TextArea.mjs

@@ -1,40 +1,25 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
-import { memo, useMemo } from "react";
+import { variants } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/Input/TextArea.tsx
 const TextArea = memo(({ ref, variant, shadow, className, resize = false, style, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: { shadow: false },
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless,
-				underlined: null
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			}
-		}
-	}), [styles]);
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(Input.TextArea, {
 		className: cx(variants({
 			shadow,
-			variant: variant || (theme.isDarkMode ? "filled" : "outlined")
+			variant: variant || (isDarkMode ? "filled" : "outlined")
 		}), className),
 		ref,
 		style: {
 			resize: resize ? void 0 : "none",
 			...style
 		},
-		variant: variant || (theme.isDarkMode ? "filled" : "outlined"),
+		variant: variant || (isDarkMode ? "filled" : "outlined"),
 		...rest
 	});
 });