@lobehub/ui 4.3.2 → 4.3.3

package/es/Snippet/style.mjs

@@ -1,10 +1,12 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Snippet/style.ts
-const useStyles = createStyles(({ css: css$1, token, stylish }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: stylish.variantBorderlessWithoutHover,
-		filled: stylish.variantFilledWithoutHover,
+		borderless: staticStylish.variantBorderlessWithoutHover,
+		filled: staticStylish.variantFilledWithoutHover,
 		hightlight: css$1`
       overflow: auto hidden;
       flex: 1;
@@ -17,7 +19,7 @@ const useStyles = createStyles(({ css: css$1, token, stylish }) => {
         height: 100%;
       }
     `,
-		outlined: stylish.variantOutlinedWithoutHover,
+		outlined: staticStylish.variantOutlinedWithoutHover,
 		root: css$1`
       position: relative;
 
@@ -27,13 +29,29 @@ const useStyles = createStyles(({ css: css$1, token, stylish }) => {
       height: 38px;
       padding-block: 0;
       padding-inline: 12px 8px;
-
-      border-radius: ${token.borderRadius}px;
+      border-radius: ${cssVar$1.borderRadius};
     `,
-		shadow: stylish.shadow
+		shadow: staticStylish.shadow
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		shadow: false,
+		variant: "filled"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Snippet/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Snippet/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, stylish }) => {\n  return {\n    borderless: stylish.variantBorderlessWithoutHover,\n    filled: stylish.variantFilledWithoutHover,\n    hightlight: css`\n      overflow: auto hidden;\n      flex: 1;\n      height: 100%;\n      padding: 0;\n\n      pre {\n        display: flex;\n        align-items: center;\n        height: 100%;\n      }\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n\n      overflow: hidden;\n\n      max-width: 100%;\n      height: 38px;\n      padding-block: 0;\n      padding-inline: 12px 8px;\n\n      border-radius: ${token.borderRadius}px;\n    `,\n    shadow: stylish.shadow,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,cAAc;AACjE,QAAO;EACL,YAAY,QAAQ;EACpB,QAAQ,QAAQ;EAChB,YAAY,KAAG;;;;;;;;;;;;EAYf,UAAU,QAAQ;EAClB,MAAM,KAAG;;;;;;;;;;uBAUU,MAAM,aAAa;;EAEtC,QAAQ,QAAQ;EACjB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Snippet/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    hightlight: css`\n      overflow: auto hidden;\n      flex: 1;\n      height: 100%;\n      padding: 0;\n\n      pre {\n        display: flex;\n        align-items: center;\n        height: 100%;\n      }\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n\n      overflow: hidden;\n\n      max-width: 100%;\n      height: 38px;\n      padding-block: 0;\n      padding-inline: 12px 8px;\n      border-radius: ${cssVar.borderRadius};\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\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    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAYA,cAAkB;EAC9B,QAAQA,cAAkB;EAC1B,YAAY,KAAG;;;;;;;;;;;;EAYf,UAAUA,cAAkB;EAC5B,MAAM,KAAG;;;;;;;;;uBASUC,SAAO,aAAa;;EAEvC,QAAQD,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/SortableList/SortableList.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import SortableItem_default from "./components/SortableItem.mjs";
 import DragHandle_default from "./components/DragHandle.mjs";
 import SortableOverlay_default from "./components/SortableOverlay.mjs";
@@ -14,7 +14,6 @@ import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSo
 //#region src/SortableList/SortableList.tsx
 const SortableListParent = memo(({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {
 	const [active, setActive] = useState(null);
-	const { styles } = useStyles();
 	const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
 	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
 	return /* @__PURE__ */ jsxs(DndContext, {

package/es/SortableList/SortableList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.mjs","names":["active","Flexbox","SortableOverlay","SortableItem","DragHandle"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type Active,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, type ReactNode, memo, useMemo, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport DragHandle from './components/DragHandle';\nimport SortableItem from './components/SortableItem';\nimport SortableOverlay from './components/SortableOverlay';\nimport { useStyles } from './style';\nimport type { SortableListProps } from './type';\n\nconst SortableListParent = memo<SortableListProps>(\n  ({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {\n    const [active, setActive] = useState<Active | null>(null);\n    const { styles } = useStyles();\n    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);\n    const sensors = useSensors(\n      useSensor(PointerSensor),\n      useSensor(KeyboardSensor, {\n        coordinateGetter: sortableKeyboardCoordinates,\n      }),\n    );\n\n    return (\n      <DndContext\n        modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n        onDragCancel={() => {\n          setActive(null);\n        }}\n        onDragEnd={({ active, over }) => {\n          if (over && active.id !== over?.id) {\n            const activeIndex = items.findIndex(({ id }) => id === active.id);\n            const overIndex = items.findIndex(({ id }) => id === over.id);\n\n            onChange(arrayMove(items, activeIndex, overIndex));\n          }\n          setActive(null);\n        }}\n        onDragStart={({ active }) => {\n          setActive(active);\n        }}\n        sensors={sensors}\n      >\n        <SortableContext items={items} strategy={verticalListSortingStrategy}>\n          <Flexbox as={'ul'} className={styles.container} gap={gap} ref={ref} {...rest}>\n            {items.map((item) => (\n              <Fragment key={item.id}>{renderItem(item)}</Fragment>\n            ))}\n          </Flexbox>\n        </SortableContext>\n        <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>\n      </DndContext>\n    );\n  },\n);\n\nSortableListParent.displayName = 'SortableList';\n\nexport interface ISortableList {\n  (props: SortableListProps): ReactNode;\n  DragHandle: typeof DragHandle;\n  Item: typeof SortableItem;\n}\n\nconst SortableList = SortableListParent as unknown as ISortableList;\n\nSortableList.Item = SortableItem;\nSortableList.DragHandle = DragHandle;\n\nexport default SortableList;\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,qBAAqB,MACxB,EAAE,KAAK,OAAO,UAAU,YAAY,MAAM,GAAG,GAAG,WAAW;CAC1D,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CACzD,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,aAAa,cAAc,MAAM,MAAM,SAAS,KAAK,OAAO,QAAQ,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC;CAC/F,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;AAED,QACE,qBAAC;EACC,WAAW,CAAC,wBAAwB,sBAAsB;EAC1D,oBAAoB;AAClB,aAAU,KAAK;;EAEjB,YAAY,EAAE,kBAAQ,WAAW;AAC/B,OAAI,QAAQA,SAAO,OAAO,MAAM,GAI9B,UAAS,UAAU,OAHC,MAAM,WAAW,EAAE,SAAS,OAAOA,SAAO,GAAG,EAC/C,MAAM,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEZ,CAAC;AAEpD,aAAU,KAAK;;EAEjB,cAAc,EAAE,uBAAa;AAC3B,aAAUA,SAAO;;EAEV;aAET,oBAAC;GAAuB;GAAO,UAAU;aACvC,oBAACC;IAAQ,IAAI;IAAM,WAAW,OAAO;IAAgB;IAAU;IAAK,GAAI;cACrE,MAAM,KAAK,SACV,oBAAC,sBAAwB,WAAW,KAAK,IAA1B,KAAK,GAAiC,CACrD;KACM;IACM,EAClB,oBAACC,qCAAiB,aAAa,WAAW,WAAW,GAAG,OAAuB;GACpE;EAGlB;AAED,mBAAmB,cAAc;AAQjC,MAAM,eAAe;AAErB,aAAa,OAAOC;AACpB,aAAa,aAAaC;AAE1B,2BAAe"}
+{"version":3,"file":"SortableList.mjs","names":["active","Flexbox","SortableOverlay","SortableItem","DragHandle"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type Active,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, type ReactNode, memo, useMemo, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport DragHandle from './components/DragHandle';\nimport SortableItem from './components/SortableItem';\nimport SortableOverlay from './components/SortableOverlay';\nimport { styles } from './style';\nimport type { SortableListProps } from './type';\n\nconst SortableListParent = memo<SortableListProps>(\n  ({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {\n    const [active, setActive] = useState<Active | null>(null);\n    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);\n    const sensors = useSensors(\n      useSensor(PointerSensor),\n      useSensor(KeyboardSensor, {\n        coordinateGetter: sortableKeyboardCoordinates,\n      }),\n    );\n\n    return (\n      <DndContext\n        modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n        onDragCancel={() => {\n          setActive(null);\n        }}\n        onDragEnd={({ active, over }) => {\n          if (over && active.id !== over?.id) {\n            const activeIndex = items.findIndex(({ id }) => id === active.id);\n            const overIndex = items.findIndex(({ id }) => id === over.id);\n\n            onChange(arrayMove(items, activeIndex, overIndex));\n          }\n          setActive(null);\n        }}\n        onDragStart={({ active }) => {\n          setActive(active);\n        }}\n        sensors={sensors}\n      >\n        <SortableContext items={items} strategy={verticalListSortingStrategy}>\n          <Flexbox as={'ul'} className={styles.container} gap={gap} ref={ref} {...rest}>\n            {items.map((item) => (\n              <Fragment key={item.id}>{renderItem(item)}</Fragment>\n            ))}\n          </Flexbox>\n        </SortableContext>\n        <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>\n      </DndContext>\n    );\n  },\n);\n\nSortableListParent.displayName = 'SortableList';\n\nexport interface ISortableList {\n  (props: SortableListProps): ReactNode;\n  DragHandle: typeof DragHandle;\n  Item: typeof SortableItem;\n}\n\nconst SortableList = SortableListParent as unknown as ISortableList;\n\nSortableList.Item = SortableItem;\nSortableList.DragHandle = DragHandle;\n\nexport default SortableList;\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,qBAAqB,MACxB,EAAE,KAAK,OAAO,UAAU,YAAY,MAAM,GAAG,GAAG,WAAW;CAC1D,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CACzD,MAAM,aAAa,cAAc,MAAM,MAAM,SAAS,KAAK,OAAO,QAAQ,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC;CAC/F,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;AAED,QACE,qBAAC;EACC,WAAW,CAAC,wBAAwB,sBAAsB;EAC1D,oBAAoB;AAClB,aAAU,KAAK;;EAEjB,YAAY,EAAE,kBAAQ,WAAW;AAC/B,OAAI,QAAQA,SAAO,OAAO,MAAM,GAI9B,UAAS,UAAU,OAHC,MAAM,WAAW,EAAE,SAAS,OAAOA,SAAO,GAAG,EAC/C,MAAM,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEZ,CAAC;AAEpD,aAAU,KAAK;;EAEjB,cAAc,EAAE,uBAAa;AAC3B,aAAUA,SAAO;;EAEV;aAET,oBAAC;GAAuB;GAAO,UAAU;aACvC,oBAACC;IAAQ,IAAI;IAAM,WAAW,OAAO;IAAgB;IAAU;IAAK,GAAI;cACrE,MAAM,KAAK,SACV,oBAAC,sBAAwB,WAAW,KAAK,IAA1B,KAAK,GAAiC,CACrD;KACM;IACM,EAClB,oBAACC,qCAAiB,aAAa,WAAW,WAAW,GAAG,OAAuB;GACpE;EAGlB;AAED,mBAAmB,cAAc;AAQjC,MAAM,eAAe;AAErB,aAAa,OAAOC;AACpB,aAAa,aAAaC;AAE1B,2BAAe"}

package/es/SortableList/components/DragHandle.d.mts

@@ -1,9 +1,9 @@
 import { ActionIconProps } from "../../ActionIcon/type.mjs";
 import "../../ActionIcon/index.mjs";
-import * as react102 from "react";
+import * as react103 from "react";
 
 //#region src/SortableList/components/DragHandle.d.ts
-declare const DragHandle: react102.NamedExoticComponent<ActionIconProps>;
+declare const DragHandle: react103.NamedExoticComponent<ActionIconProps>;
 //#endregion
 export { DragHandle };
 //# sourceMappingURL=DragHandle.d.mts.map

package/es/SortableList/components/SortableItem.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
-import * as react100 from "react";
+import * as react101 from "react";
 import "@dnd-kit/core";
 
 //#region src/SortableList/components/SortableItem.d.ts
@@ -9,7 +9,7 @@ interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
   id: string | number;
   variant?: 'borderless' | 'filled' | 'outlined';
 }
-declare const SortableItem: react100.NamedExoticComponent<SortableItemProps>;
+declare const SortableItem: react101.NamedExoticComponent<SortableItemProps>;
 //#endregion
 export { SortableItem };
 //# sourceMappingURL=SortableItem.d.mts.map

package/es/SortableList/components/SortableItem.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { useStyles } from "../style.mjs";
+import { variants } from "../style.mjs";
 import { createContext, memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
@@ -15,22 +15,6 @@ const SortableItemContext = createContext({
 	ref() {}
 });
 const SortableItem = memo(({ variant = "borderless", className, children, id, style, ...rest }) => {
-	const { cx, styles } = useStyles();
-	const variants = useMemo(() => cva(styles.item, {
-		compoundVariants: [{
-			className: styles.itemVariant,
-			variant: "outlined"
-		}, {
-			className: styles.itemVariant,
-			variant: "filled"
-		}],
-		defaultVariants: { variant: "borderless" },
-		variants: { variant: {
-			filled: styles.filled,
-			outlined: styles.outlined,
-			borderless: styles.borderless
-		} }
-	}), [styles]);
 	const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({ id });
 	return /* @__PURE__ */ jsx(SortableItemContext, {
 		value: useMemo(() => ({
@@ -45,10 +29,7 @@ const SortableItem = memo(({ variant = "borderless", className, children, id, st
 		children: /* @__PURE__ */ jsx(FlexBasic_default, {
 			align: "center",
 			as: "li",
-			className: cx(variants({
-				className,
-				variant
-			})),
+			className: cx(variants({ variant }), className),
 			gap: 4,
 			horizontal: true,
 			ref: setNodeRef,

package/es/SortableList/components/SortableItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.mjs","names":["Flexbox"],"sources":["../../../src/SortableList/components/SortableItem.tsx"],"sourcesContent":["'use client';\n\nimport type { DraggableSyntheticListeners } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { cva } from 'class-variance-authority';\nimport { createContext, memo, useMemo } from 'react';\n\nimport { type FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from '../style';\n\ninterface Context {\n  attributes: Record<string, any>;\n  listeners: DraggableSyntheticListeners;\n  ref(node: HTMLElement | null): void;\n}\n\nexport const SortableItemContext = createContext<Context>({\n  attributes: {},\n  listeners: undefined,\n  ref() {},\n});\n\nexport interface SortableItemProps extends Omit<FlexboxProps, 'id'> {\n  id: string | number;\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst SortableItem = memo<SortableItemProps>(\n  ({ variant = 'borderless', className, children, id, style, ...rest }) => {\n    const { cx, styles } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.item, {\n          compoundVariants: [\n            {\n              className: styles.itemVariant,\n              variant: 'outlined',\n            },\n            {\n              className: styles.itemVariant,\n              variant: 'filled',\n            },\n          ],\n          defaultVariants: {\n            variant: 'borderless',\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      [styles],\n    );\n\n    const {\n      attributes,\n      isDragging,\n      listeners,\n      setNodeRef,\n      setActivatorNodeRef,\n      transform,\n      transition,\n    } = useSortable({ id });\n    const context = useMemo(\n      () => ({\n        attributes,\n        listeners,\n        ref: setActivatorNodeRef,\n      }),\n      [attributes, listeners, setActivatorNodeRef],\n    );\n\n    return (\n      <SortableItemContext value={context}>\n        <Flexbox\n          align={'center'}\n          as={'li'}\n          className={cx(variants({ className, variant }))}\n          gap={4}\n          horizontal\n          ref={setNodeRef}\n          style={{\n            opacity: isDragging ? 0.4 : undefined,\n            transform: CSS.Translate.toString(transform),\n            transition,\n            ...style,\n          }}\n          {...rest}\n        >\n          {children}\n        </Flexbox>\n      </SortableItemContext>\n    );\n  },\n);\n\nSortableItem.displayName = 'SortableItem';\n\nexport default SortableItem;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,sBAAsB,cAAuB;CACxD,YAAY,EAAE;CACd,WAAW;CACX,MAAM;CACP,CAAC;AAOF,MAAM,eAAe,MAClB,EAAE,UAAU,cAAc,WAAW,UAAU,IAAI,OAAO,GAAG,WAAW;CACvE,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,kBAAkB,CAChB;GACE,WAAW,OAAO;GAClB,SAAS;GACV,EACD;GACE,WAAW,OAAO;GAClB,SAAS;GACV,CACF;EACD,iBAAiB,EACf,SAAS,cACV;EAED,UAAU,EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,EACJ,YACA,YACA,WACA,YACA,qBACA,WACA,eACE,YAAY,EAAE,IAAI,CAAC;AAUvB,QACE,oBAAC;EAAoB,OAVP,eACP;GACL;GACA;GACA,KAAK;GACN,GACD;GAAC;GAAY;GAAW;GAAoB,CAC7C;YAIG,oBAACA;GACC,OAAO;GACP,IAAI;GACJ,WAAW,GAAG,SAAS;IAAE;IAAW;IAAS,CAAC,CAAC;GAC/C,KAAK;GACL;GACA,KAAK;GACL,OAAO;IACL,SAAS,aAAa,KAAM;IAC5B,WAAW,IAAI,UAAU,SAAS,UAAU;IAC5C;IACA,GAAG;IACJ;GACD,GAAI;GAEH;IACO;GACU;EAG3B;AAED,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"SortableItem.mjs","names":["Flexbox"],"sources":["../../../src/SortableList/components/SortableItem.tsx"],"sourcesContent":["'use client';\n\nimport type { DraggableSyntheticListeners } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { cx } from 'antd-style';\nimport { createContext, memo, useMemo } from 'react';\n\nimport { type FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\n\nimport { variants } from '../style';\n\ninterface Context {\n  attributes: Record<string, any>;\n  listeners: DraggableSyntheticListeners;\n  ref(node: HTMLElement | null): void;\n}\n\nexport const SortableItemContext = createContext<Context>({\n  attributes: {},\n  listeners: undefined,\n  ref() {},\n});\n\nexport interface SortableItemProps extends Omit<FlexboxProps, 'id'> {\n  id: string | number;\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst SortableItem = memo<SortableItemProps>(\n  ({ variant = 'borderless', className, children, id, style, ...rest }) => {\n    const {\n      attributes,\n      isDragging,\n      listeners,\n      setNodeRef,\n      setActivatorNodeRef,\n      transform,\n      transition,\n    } = useSortable({ id });\n    const context = useMemo(\n      () => ({\n        attributes,\n        listeners,\n        ref: setActivatorNodeRef,\n      }),\n      [attributes, listeners, setActivatorNodeRef],\n    );\n\n    return (\n      <SortableItemContext value={context}>\n        <Flexbox\n          align={'center'}\n          as={'li'}\n          className={cx(variants({ variant }), className)}\n          gap={4}\n          horizontal\n          ref={setNodeRef}\n          style={{\n            opacity: isDragging ? 0.4 : undefined,\n            transform: CSS.Translate.toString(transform),\n            transition,\n            ...style,\n          }}\n          {...rest}\n        >\n          {children}\n        </Flexbox>\n      </SortableItemContext>\n    );\n  },\n);\n\nSortableItem.displayName = 'SortableItem';\n\nexport default SortableItem;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,sBAAsB,cAAuB;CACxD,YAAY,EAAE;CACd,WAAW;CACX,MAAM;CACP,CAAC;AAOF,MAAM,eAAe,MAClB,EAAE,UAAU,cAAc,WAAW,UAAU,IAAI,OAAO,GAAG,WAAW;CACvE,MAAM,EACJ,YACA,YACA,WACA,YACA,qBACA,WACA,eACE,YAAY,EAAE,IAAI,CAAC;AAUvB,QACE,oBAAC;EAAoB,OAVP,eACP;GACL;GACA;GACA,KAAK;GACN,GACD;GAAC;GAAY;GAAW;GAAoB,CAC7C;YAIG,oBAACA;GACC,OAAO;GACP,IAAI;GACJ,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;GAC/C,KAAK;GACL;GACA,KAAK;GACL,OAAO;IACL,SAAS,aAAa,KAAM;IAC5B,WAAW,IAAI,UAAU,SAAS,UAAU;IAC5C;IACA,GAAG;IACJ;GACD,GAAI;GAEH;IACO;GACU;EAG3B;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/SortableList/style.mjs

@@ -1,28 +1,45 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/SortableList/style.ts
-const useStyles = createStyles(({ css: css$1, stylish, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: stylish.variantBorderlessWithoutHover,
+		borderless: staticStylish.variantBorderlessWithoutHover,
 		container: css$1`
       padding: 0;
       list-style: none;
     `,
-		filled: stylish.variantFilledWithoutHover,
+		filled: staticStylish.variantFilledWithoutHover,
 		item: css$1`
       overflow: hidden;
       box-sizing: border-box;
+      border-radius: ${cssVar$1.borderRadius};
       list-style: none;
-      border-radius: ${token.borderRadius}px;
     `,
 		itemVariant: css$1`
       padding-block: 4px;
       padding-inline: 4px 16px;
     `,
-		outlined: stylish.variantOutlinedWithoutHover
+		outlined: staticStylish.variantOutlinedWithoutHover
 	};
 });
+const variants = cva(styles.item, {
+	compoundVariants: [{
+		className: styles.itemVariant,
+		variant: "outlined"
+	}, {
+		className: styles.itemVariant,
+		variant: "filled"
+	}],
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		filled: styles.filled,
+		outlined: styles.outlined,
+		borderless: styles.borderless
+	} }
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/SortableList/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/SortableList/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, stylish, token }) => {\n  return {\n    borderless: stylish.variantBorderlessWithoutHover,\n    container: css`\n      padding: 0;\n      list-style: none;\n    `,\n    filled: stylish.variantFilledWithoutHover,\n    item: css`\n      overflow: hidden;\n      box-sizing: border-box;\n      list-style: none;\n      border-radius: ${token.borderRadius}px;\n    `,\n    itemVariant: css`\n      padding-block: 4px;\n      padding-inline: 4px 16px;\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,SAAS,YAAY;AACjE,QAAO;EACL,YAAY,QAAQ;EACpB,WAAW,KAAG;;;;EAId,QAAQ,QAAQ;EAChB,MAAM,KAAG;;;;uBAIU,MAAM,aAAa;;EAEtC,aAAa,KAAG;;;;EAIhB,UAAU,QAAQ;EACnB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/SortableList/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    container: css`\n      padding: 0;\n      list-style: none;\n    `,\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    item: css`\n      overflow: hidden;\n      box-sizing: border-box;\n      border-radius: ${cssVar.borderRadius};\n      list-style: none;\n    `,\n    itemVariant: css`\n      padding-block: 4px;\n      padding-inline: 4px 16px;\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  };\n});\n\nexport const variants = cva(styles.item, {\n  compoundVariants: [\n    {\n      className: styles.itemVariant,\n      variant: 'outlined',\n    },\n    {\n      className: styles.itemVariant,\n      variant: 'filled',\n    },\n  ],\n  defaultVariants: {\n    variant: 'borderless',\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"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAYA,cAAkB;EAC9B,WAAW,KAAG;;;;EAId,QAAQA,cAAkB;EAC1B,MAAM,KAAG;;;uBAGUC,SAAO,aAAa;;;EAGvC,aAAa,KAAG;;;;EAIhB,UAAUD,cAAkB;EAC7B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB,CAChB;EACE,WAAW,OAAO;EAClB,SAAS;EACV,EACD;EACE,WAAW,OAAO;EAClB,SAAS;EACV,CACF;CACD,iBAAiB,EACf,SAAS,cACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;EACpB,EACF;CAEF,CAAC"}

package/es/Tabs/Tabs.mjs

@@ -1,40 +1,17 @@
 'use client';
 
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
-import { useStyles } from "./style.mjs";
-import { useMemo } from "react";
+import { styles, variants } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "antd";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 import { MoreHorizontalIcon } from "lucide-react";
 
 //#region src/Tabs/Tabs.tsx
 const Tabs$1 = ({ className, compact, variant = "rounded", items, ...rest }) => {
-	const { styles, cx } = useStyles();
 	const hasContent = items?.some((item) => !!item.children);
 	return /* @__PURE__ */ jsx(Tabs, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: {
-				compact: false,
-				underlined: false,
-				variant: "rounded"
-			},
-			variants: {
-				variant: {
-					square: null,
-					rounded: styles.rounded,
-					point: styles.point
-				},
-				compact: {
-					false: styles.margin,
-					true: styles.compact
-				},
-				underlined: {
-					false: styles.hideHolder,
-					true: null
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			compact,
 			underlined: hasContent,
 			variant

package/es/Tabs/Tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","names":["Tabs: FC<TabsProps>","AntdTabs","ActionIcon","Tabs"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as AntdTabs } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { MoreHorizontalIcon } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\n\nimport { useStyles } from './style';\nimport type { TabsProps } from './type';\n\nconst Tabs: FC<TabsProps> = ({ className, compact, variant = 'rounded', items, ...rest }) => {\n  const { styles, cx } = useStyles();\n  const hasContent = items?.some((item) => !!item.children);\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          compact: false,\n          underlined: false,\n          variant: 'rounded',\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          variant: {\n            square: null,\n            rounded: styles.rounded,\n            point: styles.point,\n          },\n          compact: {\n            false: styles.margin,\n            true: styles.compact,\n          },\n          underlined: {\n            false: styles.hideHolder,\n            true: null,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <AntdTabs\n      className={cx(variants({ compact, underlined: hasContent, variant }), className)}\n      items={items}\n      {...rest}\n      classNames={{\n        ...rest?.classNames,\n        popup: {\n          root: styles.dropdown,\n          ...rest?.classNames?.popup,\n        },\n      }}\n      more={{\n        icon: <ActionIcon icon={MoreHorizontalIcon} />,\n        ...rest?.more,\n      }}\n    />\n  );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,UAAuB,EAAE,WAAW,SAAS,UAAU,WAAW,OAAO,GAAG,WAAW;CAC3F,MAAM,EAAE,QAAQ,OAAO,WAAW;CAClC,MAAM,aAAa,OAAO,MAAM,SAAS,CAAC,CAAC,KAAK,SAAS;AA+BzD,QACE,oBAACC;EACC,WAAW,GA/BE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB;IACf,SAAS;IACT,YAAY;IACZ,SAAS;IACV;GAED,UAAU;IACR,SAAS;KACP,QAAQ;KACR,SAAS,OAAO;KAChB,OAAO,OAAO;KACf;IACD,SAAS;KACP,OAAO,OAAO;KACd,MAAM,OAAO;KACd;IACD,YAAY;KACV,OAAO,OAAO;KACd,MAAM;KACP;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B;GAAE;GAAS,YAAY;GAAY;GAAS,CAAC,EAAE,UAAU;EACzE;EACP,GAAI;EACJ,YAAY;GACV,GAAG,MAAM;GACT,OAAO;IACL,MAAM,OAAO;IACb,GAAG,MAAM,YAAY;IACtB;GACF;EACD,MAAM;GACJ,MAAM,oBAACC,sBAAW,MAAM,qBAAsB;GAC9C,GAAG,MAAM;GACV;GACD;;AAIN,OAAK,cAAc;AAEnB,mBAAeC"}
+{"version":3,"file":"Tabs.mjs","names":["Tabs: FC<TabsProps>","AntdTabs","ActionIcon","Tabs"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as AntdTabs } from 'antd';\nimport { cx } from 'antd-style';\nimport { MoreHorizontalIcon } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\n\nimport { styles, variants } from './style';\nimport type { TabsProps } from './type';\n\nconst Tabs: FC<TabsProps> = ({ className, compact, variant = 'rounded', items, ...rest }) => {\n  const hasContent = items?.some((item) => !!item.children);\n\n  return (\n    <AntdTabs\n      className={cx(variants({ compact, underlined: hasContent, variant }), className)}\n      items={items}\n      {...rest}\n      classNames={{\n        ...rest?.classNames,\n        popup: {\n          root: styles.dropdown,\n          ...rest?.classNames?.popup,\n        },\n      }}\n      more={{\n        icon: <ActionIcon icon={MoreHorizontalIcon} />,\n        ...rest?.more,\n      }}\n    />\n  );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;AAYA,MAAMA,UAAuB,EAAE,WAAW,SAAS,UAAU,WAAW,OAAO,GAAG,WAAW;CAC3F,MAAM,aAAa,OAAO,MAAM,SAAS,CAAC,CAAC,KAAK,SAAS;AAEzD,QACE,oBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAS,YAAY;GAAY;GAAS,CAAC,EAAE,UAAU;EACzE;EACP,GAAI;EACJ,YAAY;GACV,GAAG,MAAM;GACT,OAAO;IACL,MAAM,OAAO;IACb,GAAG,MAAM,YAAY;IACtB;GACF;EACD,MAAM;GACJ,MAAM,oBAACC,sBAAW,MAAM,qBAAsB;GAC9C,GAAG,MAAM;GACV;GACD;;AAIN,OAAK,cAAc;AAEnB,mBAAeC"}

package/es/Tabs/style.mjs

@@ -1,14 +1,16 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Tabs/style.ts
-const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		compact: css$1`
       &.${prefixCls}-tabs {
         .${prefixCls}-tabs-tab {
           margin: 4px;
 
-          + .${prefixCls}-tabs-tab {
+          + [class*='ant-tabs-tab'] {
             margin: 4px;
           }
         }
@@ -17,10 +19,10 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
 		dropdown: css$1`
       .${prefixCls}-tabs-dropdown-menu {
         padding: 4px;
-        border: 1px solid ${token.colorBorderSecondary};
+        border: 1px solid ${cssVar$1.colorBorderSecondary};
 
         .${prefixCls}-tabs-dropdown-menu-item {
-          border-radius: ${token.borderRadius}px;
+          border-radius: ${cssVar$1.borderRadius};
         }
       }
     `,
@@ -94,13 +96,13 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
         .${prefixCls}-tabs-tab {
           padding-block: 8px;
           padding-inline: 12px;
-          color: ${token.colorTextSecondary};
+          color: ${cssVar$1.colorTextSecondary};
           transition: background-color 100ms ease-out;
 
           &:hover {
-            color: ${token.colorText};
-            background: ${token.colorFillTertiary};
-            border-radius: ${token.borderRadius}px;
+            border-radius: ${cssVar$1.borderRadius};
+            color: ${cssVar$1.colorText};
+            background: ${cssVar$1.colorFillTertiary};
           }
         }
       }
@@ -142,7 +144,29 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		compact: false,
+		underlined: false,
+		variant: "rounded"
+	},
+	variants: {
+		variant: {
+			square: null,
+			rounded: styles.rounded,
+			point: styles.point
+		},
+		compact: {
+			false: styles.margin,
+			true: styles.compact
+		},
+		underlined: {
+			false: styles.hideHolder,
+			true: null
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Tabs/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tabs/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, prefixCls }) => {\n  return {\n    compact: css`\n      &.${prefixCls}-tabs {\n        .${prefixCls}-tabs-tab {\n          margin: 4px;\n\n          + .${prefixCls}-tabs-tab {\n            margin: 4px;\n          }\n        }\n      }\n    `,\n    dropdown: css`\n      .${prefixCls}-tabs-dropdown-menu {\n        padding: 4px;\n        border: 1px solid ${token.colorBorderSecondary};\n\n        .${prefixCls}-tabs-dropdown-menu-item {\n          border-radius: ${token.borderRadius}px;\n        }\n      }\n    `,\n    hideHolder: css`\n      &.${prefixCls}-tabs {\n        .${prefixCls}-tabs-content-holder {\n          display: none;\n        }\n\n        .${prefixCls}-tabs-nav {\n          margin: 0;\n\n          &::before {\n            display: none;\n          }\n        }\n      }\n    `,\n\n    margin: css`\n      &.${prefixCls}-tabs {\n        .${prefixCls}-tabs-tab {\n          margin: 8px;\n\n          + .${prefixCls}-tabs-tab {\n            margin: 8px;\n          }\n        }\n      }\n    `,\n    point: css`\n      &.${prefixCls}-tabs {\n        &.${prefixCls}-tabs-top {\n          .${prefixCls}-tabs-ink-bar {\n            width: 8px !important;\n            height: 4px;\n            border-start-start-radius: 4px;\n            border-start-end-radius: 4px;\n          }\n        }\n\n        &.${prefixCls}-tabs-bottom {\n          .${prefixCls}-tabs-ink-bar {\n            width: 8px !important;\n            height: 4px;\n            border-end-start-radius: 4px;\n            border-end-end-radius: 4px;\n          }\n        }\n\n        &.${prefixCls}-tabs-left {\n          .${prefixCls}-tabs-ink-bar {\n            width: 4px;\n            height: 8px !important;\n            border-start-start-radius: 4px;\n            border-end-start-radius: 4px;\n          }\n        }\n\n        &.${prefixCls}-tabs-right {\n          .${prefixCls}-tabs-ink-bar {\n            width: 4px;\n            height: 8px !important;\n            border-start-end-radius: 4px;\n            border-end-end-radius: 4px;\n          }\n        }\n      }\n    `,\n    root: css`\n      &.${prefixCls}-tabs {\n        .${prefixCls}-tabs-tab {\n          padding-block: 8px;\n          padding-inline: 12px;\n          color: ${token.colorTextSecondary};\n          transition: background-color 100ms ease-out;\n\n          &:hover {\n            color: ${token.colorText};\n            background: ${token.colorFillTertiary};\n            border-radius: ${token.borderRadius}px;\n          }\n        }\n      }\n    `,\n    rounded: css`\n      &.${prefixCls}-tabs {\n        &.${prefixCls}-tabs-top {\n          .${prefixCls}-tabs-ink-bar {\n            height: 3px;\n            border-start-start-radius: 3px;\n            border-start-end-radius: 3px;\n          }\n        }\n\n        &.${prefixCls}-tabs-bottom {\n          .${prefixCls}-tabs-ink-bar {\n            height: 3px;\n            border-end-start-radius: 3px;\n            border-end-end-radius: 3px;\n          }\n        }\n\n        &.${prefixCls}-tabs-left {\n          .${prefixCls}-tabs-ink-bar {\n            width: 3px;\n            border-start-start-radius: 3px;\n            border-end-start-radius: 3px;\n          }\n        }\n\n        &.${prefixCls}-tabs-right {\n          .${prefixCls}-tabs-ink-bar {\n            width: 3px;\n            border-start-end-radius: 3px;\n            border-end-end-radius: 3px;\n          }\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,gBAAgB;AACnE,QAAO;EACL,SAAS,KAAG;UACN,UAAU;WACT,UAAU;;;eAGN,UAAU;;;;;;EAMrB,UAAU,KAAG;SACR,UAAU;;4BAES,MAAM,qBAAqB;;WAE5C,UAAU;2BACM,MAAM,aAAa;;;;EAI1C,YAAY,KAAG;UACT,UAAU;WACT,UAAU;;;;WAIV,UAAU;;;;;;;;;EAUjB,QAAQ,KAAG;UACL,UAAU;WACT,UAAU;;;eAGN,UAAU;;;;;;EAMrB,OAAO,KAAG;UACJ,UAAU;YACR,UAAU;aACT,UAAU;;;;;;;;YAQX,UAAU;aACT,UAAU;;;;;;;;YAQX,UAAU;aACT,UAAU;;;;;;;;YAQX,UAAU;aACT,UAAU;;;;;;;;;EASnB,MAAM,KAAG;UACH,UAAU;WACT,UAAU;;;mBAGF,MAAM,mBAAmB;;;;qBAIvB,MAAM,UAAU;0BACX,MAAM,kBAAkB;6BACrB,MAAM,aAAa;;;;;EAK5C,SAAS,KAAG;UACN,UAAU;YACR,UAAU;aACT,UAAU;;;;;;;YAOX,UAAU;aACT,UAAU;;;;;;;YAOX,UAAU;aACT,UAAU;;;;;;;YAOX,UAAU;aACT,UAAU;;;;;;;;EAQpB;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    compact: css`\n      &.${prefixCls}-tabs {\n        .${prefixCls}-tabs-tab {\n          margin: 4px;\n\n          + [class*='ant-tabs-tab'] {\n            margin: 4px;\n          }\n        }\n      }\n    `,\n    dropdown: css`\n      .${prefixCls}-tabs-dropdown-menu {\n        padding: 4px;\n        border: 1px solid ${cssVar.colorBorderSecondary};\n\n        .${prefixCls}-tabs-dropdown-menu-item {\n          border-radius: ${cssVar.borderRadius};\n        }\n      }\n    `,\n    hideHolder: css`\n      &.${prefixCls}-tabs {\n        .${prefixCls}-tabs-content-holder {\n          display: none;\n        }\n\n        .${prefixCls}-tabs-nav {\n          margin: 0;\n\n          &::before {\n            display: none;\n          }\n        }\n      }\n    `,\n\n    margin: css`\n      &.${prefixCls}-tabs {\n        .${prefixCls}-tabs-tab {\n          margin: 8px;\n\n          + .${prefixCls}-tabs-tab {\n            margin: 8px;\n          }\n        }\n      }\n    `,\n    point: css`\n      &.${prefixCls}-tabs {\n        &.${prefixCls}-tabs-top {\n          .${prefixCls}-tabs-ink-bar {\n            width: 8px !important;\n            height: 4px;\n            border-start-start-radius: 4px;\n            border-start-end-radius: 4px;\n          }\n        }\n\n        &.${prefixCls}-tabs-bottom {\n          .${prefixCls}-tabs-ink-bar {\n            width: 8px !important;\n            height: 4px;\n            border-end-start-radius: 4px;\n            border-end-end-radius: 4px;\n          }\n        }\n\n        &.${prefixCls}-tabs-left {\n          .${prefixCls}-tabs-ink-bar {\n            width: 4px;\n            height: 8px !important;\n            border-start-start-radius: 4px;\n            border-end-start-radius: 4px;\n          }\n        }\n\n        &.${prefixCls}-tabs-right {\n          .${prefixCls}-tabs-ink-bar {\n            width: 4px;\n            height: 8px !important;\n            border-start-end-radius: 4px;\n            border-end-end-radius: 4px;\n          }\n        }\n      }\n    `,\n    root: css`\n      &.${prefixCls}-tabs {\n        .${prefixCls}-tabs-tab {\n          padding-block: 8px;\n          padding-inline: 12px;\n          color: ${cssVar.colorTextSecondary};\n          transition: background-color 100ms ease-out;\n\n          &:hover {\n            border-radius: ${cssVar.borderRadius};\n            color: ${cssVar.colorText};\n            background: ${cssVar.colorFillTertiary};\n          }\n        }\n      }\n    `,\n    rounded: css`\n      &.${prefixCls}-tabs {\n        &.${prefixCls}-tabs-top {\n          .${prefixCls}-tabs-ink-bar {\n            height: 3px;\n            border-start-start-radius: 3px;\n            border-start-end-radius: 3px;\n          }\n        }\n\n        &.${prefixCls}-tabs-bottom {\n          .${prefixCls}-tabs-ink-bar {\n            height: 3px;\n            border-end-start-radius: 3px;\n            border-end-end-radius: 3px;\n          }\n        }\n\n        &.${prefixCls}-tabs-left {\n          .${prefixCls}-tabs-ink-bar {\n            width: 3px;\n            border-start-start-radius: 3px;\n            border-end-start-radius: 3px;\n          }\n        }\n\n        &.${prefixCls}-tabs-right {\n          .${prefixCls}-tabs-ink-bar {\n            width: 3px;\n            border-start-end-radius: 3px;\n            border-end-end-radius: 3px;\n          }\n        }\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    compact: false,\n    underlined: false,\n    variant: 'rounded',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      square: null,\n      rounded: styles.rounded,\n      point: styles.point,\n    },\n    compact: {\n      false: styles.margin,\n      true: styles.compact,\n    },\n    underlined: {\n      false: styles.hideHolder,\n      true: null,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;AAGA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,SAAS,KAAG;UACN,UAAU;WACT,UAAU;;;;;;;;;EASjB,UAAU,KAAG;SACR,UAAU;;4BAESA,SAAO,qBAAqB;;WAE7C,UAAU;2BACMA,SAAO,aAAa;;;;EAI3C,YAAY,KAAG;UACT,UAAU;WACT,UAAU;;;;WAIV,UAAU;;;;;;;;;EAUjB,QAAQ,KAAG;UACL,UAAU;WACT,UAAU;;;eAGN,UAAU;;;;;;EAMrB,OAAO,KAAG;UACJ,UAAU;YACR,UAAU;aACT,UAAU;;;;;;;;YAQX,UAAU;aACT,UAAU;;;;;;;;YAQX,UAAU;aACT,UAAU;;;;;;;;YAQX,UAAU;aACT,UAAU;;;;;;;;;EASnB,MAAM,KAAG;UACH,UAAU;WACT,UAAU;;;mBAGFA,SAAO,mBAAmB;;;;6BAIhBA,SAAO,aAAa;qBAC5BA,SAAO,UAAU;0BACZA,SAAO,kBAAkB;;;;;EAK/C,SAAS,KAAG;UACN,UAAU;YACR,UAAU;aACT,UAAU;;;;;;;YAOX,UAAU;aACT,UAAU;;;;;;;YAOX,UAAU;aACT,UAAU;;;;;;;YAOX,UAAU;aACT,UAAU;;;;;;;;EAQpB;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,SAAS;EACT,YAAY;EACZ,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ;GACR,SAAS,OAAO;GAChB,OAAO,OAAO;GACf;EACD,SAAS;GACP,OAAO,OAAO;GACd,MAAM,OAAO;GACd;EACD,YAAY;GACV,OAAO,OAAO;GACd,MAAM;GACP;EACF;CAEF,CAAC"}

package/es/Tag/Tag.mjs

@@ -1,33 +1,15 @@
 'use client';
 
 import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./utils.mjs";
-import { useStyles } from "./styles.mjs";
+import { variants } from "./styles.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Tag } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useTheme } from "antd-style";
 
 //#region src/Tag/Tag.tsx
 const Tag$1 = ({ className, ref, size = "middle", color, variant = "filled", children, onClick, style, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			size: "middle",
-			variant: "filled"
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			size: {
-				small: styles.small,
-				middle: null,
-				large: styles.large
-			}
-		}
-	}), [styles]);
+	const theme = useTheme();
 	const colors = useMemo(() => {
 		let textColor = theme.colorTextSecondary;
 		let backgroundColor;

package/es/Tag/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":["Tag: FC<TagProps>","AntTag","Tag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\n\nimport { useStyles } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n  className,\n  ref,\n  size = 'middle',\n  color,\n  variant = 'filled',\n  children,\n  onClick,\n  style,\n  ...rest\n}) => {\n  const { styles, cx, theme } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          size: 'middle',\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          size: {\n            small: styles.small,\n            middle: null,\n            large: styles.large,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  const colors = useMemo(() => {\n    let textColor = theme.colorTextSecondary;\n    let backgroundColor;\n    let borderColor;\n    const isBorderless = variant === 'borderless';\n    const isFilled = variant === 'filled';\n    const isPresetColor = color && presetColors.includes(color);\n    const isPresetSystemColors = color && presetSystemColors.has(color);\n    const isHexColor = color && color.startsWith('#');\n\n    if (isPresetColor) {\n      textColor = colorsPreset(theme, color);\n      backgroundColor = isBorderless ? 'transparent' : colorsPreset(theme, color, 'fillTertiary');\n      borderColor = colorsPreset(theme, color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isPresetSystemColors) {\n      textColor = colorsPresetSystem(theme, color);\n      backgroundColor = isBorderless\n        ? 'transparent'\n        : colorsPresetSystem(theme, color, 'fillTertiary');\n      borderColor = colorsPresetSystem(theme, color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isHexColor) {\n      textColor = theme.colorBgLayout;\n      backgroundColor = isBorderless ? 'transparent' : color;\n    }\n\n    return {\n      backgroundColor,\n      borderColor,\n      textColor,\n    };\n  }, [color, theme, variant]);\n\n  return (\n    <AntTag\n      className={cx(variants({ size, variant: variant as any }), className)}\n      color={color}\n      onClick={onClick}\n      ref={ref}\n      style={{\n        background: colors?.backgroundColor,\n        borderColor: colors?.borderColor,\n        color: colors?.textColor,\n        cursor: onClick ? 'pointer' : undefined,\n        ...style,\n      }}\n      variant={variant === 'borderless' ? 'outlined' : variant}\n      {...rest}\n    >\n      {children}\n    </AntTag>\n  );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;AAWA,MAAMA,SAAqB,EACzB,WACA,KACA,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CAEzC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,MAAM;GACN,SAAS;GACV;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,MAAM;IACJ,OAAO,OAAO;IACd,QAAQ;IACR,OAAO,OAAO;IACf;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,MAAM;EACtB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,gBAAgB,SAAS,aAAa,SAAS,MAAM;EAC3D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,MAAM;EACnE,MAAM,aAAa,SAAS,MAAM,WAAW,IAAI;AAEjD,MAAI,eAAe;AACjB,eAAY,aAAa,OAAO,MAAM;AACtC,qBAAkB,eAAe,gBAAgB,aAAa,OAAO,OAAO,eAAe;AAC3F,iBAAc,aAAa,OAAO,OAAO,WAAW,mBAAmB,eAAe;;AAExF,MAAI,sBAAsB;AACxB,eAAY,mBAAmB,OAAO,MAAM;AAC5C,qBAAkB,eACd,gBACA,mBAAmB,OAAO,OAAO,eAAe;AACpD,iBAAc,mBAAmB,OAAO,OAAO,WAAW,mBAAmB,eAAe;;AAE9F,MAAI,YAAY;AACd,eAAY,MAAM;AAClB,qBAAkB,eAAe,gBAAgB;;AAGnD,SAAO;GACL;GACA;GACA;GACD;IACA;EAAC;EAAO;EAAO;EAAQ,CAAC;AAE3B,QACE,oBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAe;GAAgB,CAAC,EAAE,UAAU;EAC9D;EACE;EACJ;EACL,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY;GAC9B,GAAG;GACJ;EACD,SAAS,YAAY,eAAe,aAAa;EACjD,GAAI;EAEH;GACM;;AAIb,MAAI,cAAc;AAElB,kBAAeC"}
+{"version":3,"file":"Tag.mjs","names":["Tag: FC<TagProps>","AntTag","Tag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cx, useTheme } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n  className,\n  ref,\n  size = 'middle',\n  color,\n  variant = 'filled',\n  children,\n  onClick,\n  style,\n  ...rest\n}) => {\n  const theme = useTheme();\n\n  const colors = useMemo(() => {\n    let textColor = theme.colorTextSecondary;\n    let backgroundColor;\n    let borderColor;\n    const isBorderless = variant === 'borderless';\n    const isFilled = variant === 'filled';\n    const isPresetColor = color && presetColors.includes(color);\n    const isPresetSystemColors = color && presetSystemColors.has(color);\n    const isHexColor = color && color.startsWith('#');\n\n    if (isPresetColor) {\n      textColor = colorsPreset(theme, color);\n      backgroundColor = isBorderless ? 'transparent' : colorsPreset(theme, color, 'fillTertiary');\n      borderColor = colorsPreset(theme, color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isPresetSystemColors) {\n      textColor = colorsPresetSystem(theme, color);\n      backgroundColor = isBorderless\n        ? 'transparent'\n        : colorsPresetSystem(theme, color, 'fillTertiary');\n      borderColor = colorsPresetSystem(theme, color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isHexColor) {\n      textColor = theme.colorBgLayout;\n      backgroundColor = isBorderless ? 'transparent' : color;\n    }\n\n    return {\n      backgroundColor,\n      borderColor,\n      textColor,\n    };\n  }, [color, theme, variant]);\n\n  return (\n    <AntTag\n      className={cx(variants({ size, variant: variant as any }), className)}\n      color={color}\n      onClick={onClick}\n      ref={ref}\n      style={{\n        background: colors?.backgroundColor,\n        borderColor: colors?.borderColor,\n        color: colors?.textColor,\n        cursor: onClick ? 'pointer' : undefined,\n        ...style,\n      }}\n      variant={variant === 'borderless' ? 'outlined' : variant}\n      {...rest}\n    >\n      {children}\n    </AntTag>\n  );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;AAWA,MAAMA,SAAqB,EACzB,WACA,KACA,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CAExB,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,MAAM;EACtB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,gBAAgB,SAAS,aAAa,SAAS,MAAM;EAC3D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,MAAM;EACnE,MAAM,aAAa,SAAS,MAAM,WAAW,IAAI;AAEjD,MAAI,eAAe;AACjB,eAAY,aAAa,OAAO,MAAM;AACtC,qBAAkB,eAAe,gBAAgB,aAAa,OAAO,OAAO,eAAe;AAC3F,iBAAc,aAAa,OAAO,OAAO,WAAW,mBAAmB,eAAe;;AAExF,MAAI,sBAAsB;AACxB,eAAY,mBAAmB,OAAO,MAAM;AAC5C,qBAAkB,eACd,gBACA,mBAAmB,OAAO,OAAO,eAAe;AACpD,iBAAc,mBAAmB,OAAO,OAAO,WAAW,mBAAmB,eAAe;;AAE9F,MAAI,YAAY;AACd,eAAY,MAAM;AAClB,qBAAkB,eAAe,gBAAgB;;AAGnD,SAAO;GACL;GACA;GACA;GACD;IACA;EAAC;EAAO;EAAO;EAAQ,CAAC;AAE3B,QACE,oBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAe;GAAgB,CAAC,EAAE,UAAU;EAC9D;EACE;EACJ;EACL,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY;GAC9B,GAAG;GACJ;EACD,SAAS,YAAY,eAAe,aAAa;EACjD,GAAI;EAEH;GACM;;AAIb,MAAI,cAAc;AAElB,kBAAeC"}

package/es/Tag/styles.mjs

@@ -1,19 +1,23 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Tag/styles.ts
-const useStyles = createStyles(({ stylish, prefixCls, css: css$1, token }) => ({
-	borderless: stylish.variantBorderlessWithoutHover,
-	filled: stylish.variantFilledWithoutHover,
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	borderless: staticStylish.variantBorderlessWithoutHover,
+	filled: staticStylish.variantFilledWithoutHover,
 	large: css$1`
     &.${prefixCls}-tag {
       height: 28px;
       padding-inline: 12px;
-      border-radius: 6px;
+      border-radius: 6px !important;
     }
   `,
-	outlined: stylish.variantOutlinedWithoutHover,
+	outlined: staticStylish.variantOutlinedWithoutHover,
 	root: css$1`
-    color: ${token.colorTextSecondary};
+    color: ${cssVar$1.colorTextSecondary};
+
     &.${prefixCls}-tag {
       user-select: none;
 
@@ -25,24 +29,46 @@ const useStyles = createStyles(({ stylish, prefixCls, css: css$1, token }) => ({
       width: fit-content;
       height: 22px;
       margin: 0;
+      border-radius: 3px;
 
       line-height: 1.2;
 
-      border-radius: 3px;
-
       span {
         margin: 0;
       }
+
+      span:not(.anticon) {
+        line-height: inherit;
+      }
     }
   `,
 	small: css$1`
     &.${prefixCls}-tag {
       height: 20px;
       padding-inline: 4px;
+      border-radius: 3px;
     }
   `
 }));
+const variants = cva(styles.root, {
+	defaultVariants: {
+		size: "middle",
+		variant: "filled"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		size: {
+			small: styles.small,
+			middle: null,
+			large: styles.large
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=styles.mjs.map

package/es/Tag/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":[],"sources":["../../src/Tag/styles.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ stylish, prefixCls, css, token }) => ({\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: stylish.variantFilledWithoutHover,\n  large: css`\n    &.${prefixCls}-tag {\n      height: 28px;\n      padding-inline: 12px;\n      border-radius: 6px;\n    }\n  `,\n  outlined: stylish.variantOutlinedWithoutHover,\n  root: css`\n    color: ${token.colorTextSecondary};\n    &.${prefixCls}-tag {\n      user-select: none;\n\n      display: flex;\n      gap: 0.4em;\n      align-items: center;\n      justify-content: center;\n\n      width: fit-content;\n      height: 22px;\n      margin: 0;\n\n      line-height: 1.2;\n\n      border-radius: 3px;\n\n      span {\n        margin: 0;\n      }\n    }\n  `,\n  small: css`\n    &.${prefixCls}-tag {\n      height: 20px;\n      padding-inline: 4px;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,SAAS,WAAW,YAAK,aAAa;CAC7E,YAAY,QAAQ;CACpB,QAAQ,QAAQ;CAChB,OAAO,KAAG;QACJ,UAAU;;;;;;CAMhB,UAAU,QAAQ;CAClB,MAAM,KAAG;aACE,MAAM,mBAAmB;QAC9B,UAAU;;;;;;;;;;;;;;;;;;;;;CAqBhB,OAAO,KAAG;QACJ,UAAU;;;;;CAKjB,EAAE"}
+{"version":3,"file":"styles.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Tag/styles.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  borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n  filled: lobeStaticStylish.variantFilledWithoutHover,\n  large: css`\n    &.${prefixCls}-tag {\n      height: 28px;\n      padding-inline: 12px;\n      border-radius: 6px !important;\n    }\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    color: ${cssVar.colorTextSecondary};\n\n    &.${prefixCls}-tag {\n      user-select: none;\n\n      display: flex;\n      gap: 0.4em;\n      align-items: center;\n      justify-content: center;\n\n      width: fit-content;\n      height: 22px;\n      margin: 0;\n      border-radius: 3px;\n\n      line-height: 1.2;\n\n      span {\n        margin: 0;\n      }\n\n      span:not(.anticon) {\n        line-height: inherit;\n      }\n    }\n  `,\n  small: css`\n    &.${prefixCls}-tag {\n      height: 20px;\n      padding-inline: 4px;\n      border-radius: 3px;\n    }\n  `,\n}));\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    size: 'middle',\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    size: {\n      small: styles.small,\n      middle: null,\n      large: styles.large,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,YAAYA,cAAkB;CAC9B,QAAQA,cAAkB;CAC1B,OAAO,KAAG;QACJ,UAAU;;;;;;CAMhB,UAAUA,cAAkB;CAC5B,MAAM,KAAG;aACEC,SAAO,mBAAmB;;QAE/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;CAwBhB,OAAO,KAAG;QACJ,UAAU;;;;;;CAMjB,EAAE;AAEH,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ;GACR,OAAO,OAAO;GACf;EACF;CAEF,CAAC"}

package/es/Text/Text.mjs

@@ -1,45 +1,12 @@
 'use client';
 
 import Tooltip_default from "../Tooltip/Tooltip.mjs";
-import { useStyles } from "./styles.mjs";
-import { useMemo } from "react";
+import { variants } from "./styles.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#region src/Text/Text.tsx
 const Text = ({ as: Container = "div", align, className, children, style, type, disabled, strong, italic, underline, delete: deleteStyle, fontSize, mark, code, color, weight, ellipsis, ...rest }) => {
-	const { styles, cx } = useStyles();
-	const variants = useMemo(() => cva(styles.text, {
-		defaultVariants: {},
-		variants: {
-			as: {
-				h1: styles.h1,
-				h2: styles.h2,
-				h3: styles.h3,
-				h4: styles.h4,
-				h5: styles.h5,
-				p: styles.p
-			},
-			code: { true: styles.code },
-			delete: { true: styles.delete },
-			disabled: { true: styles.disabled },
-			ellipsis: {
-				multi: styles.ellipsisMulti,
-				true: styles.ellipsis
-			},
-			italic: { true: styles.italic },
-			mark: { true: styles.mark },
-			strong: { true: styles.strong },
-			type: {
-				danger: styles.danger,
-				info: styles.info,
-				secondary: styles.secondary,
-				success: styles.success,
-				warning: styles.warning
-			},
-			underline: { true: styles.underline }
-		}
-	}), [styles]);
 	const textStyle = {
 		...color && { color },
 		...weight && { fontWeight: weight },