@fanvue/ui 1.1.0 → 1.1.1

package/dist/cjs/components/Alert/Alert.cjs

@@ -23,6 +23,12 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const CLOSE_BUTTON_CLASSES = {
+  info: "hover:bg-info-500/10 text-info-500",
+  success: "hover:bg-success-500/10 text-success-500",
+  warning: "hover:bg-warning-500/10 text-warning-500",
+  error: "hover:bg-error-500/10 text-error-500"
+};
 const Alert = React__namespace.forwardRef(
   ({ className, variant = "info", title, icon, closable = false, onClose, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -57,7 +63,7 @@ const Alert = React__namespace.forwardRef(
               variant: "tertiary",
               size: "24",
               onClick: onClose,
-              className: "self-start",
+              className: cn.cn("self-start", CLOSE_BUTTON_CLASSES[variant]),
               "aria-label": "Close alert",
               children: /* @__PURE__ */ jsxRuntime.jsx(CrossIcon.CrossIcon, {})
             }

package/dist/cjs/components/Alert/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert (matches Figma \"Variant\" property) */\n  variant?: AlertVariant;\n  /** Optional title text (bold) */\n  title?: string;\n  /** Left icon element */\n  icon?: React.ReactNode;\n  /** Show close button */\n  closable?: boolean;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    { className, variant = \"info\", title, icon, closable = false, onClose, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-lg p-4 text-sm leading-[18px]\",\n          icon && closable && \"grid-cols-[auto_1fr_auto]\",\n          icon && !closable && \"grid-cols-[auto_1fr]\",\n          !icon && closable && \"grid-cols-[1fr_auto]\",\n          !icon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-50 text-info-500\",\n          variant === \"success\" && \"bg-success-50 text-success-500\",\n          variant === \"warning\" && \"bg-warning-50 text-warning-500\",\n          variant === \"error\" && \"bg-error-50 text-error-500\",\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className=\"flex shrink-0 items-start\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && <div className=\"typography-body-2-semibold text-body-100\">{title}</div>}\n          <div className=\"typography-body-2-regular text-body-200\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className=\"self-start\"\n            aria-label=\"Close alert\"\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["React","jsxs","cn","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,QAAQ,OAAO,MAAM,WAAW,OAAO,SAAS,UAAU,GAAG,MAAA,GACpF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,QAAQ,YAAY;AAAA,UACpB,QAAQ,CAAC,YAAY;AAAA,UACrB,CAAC,QAAQ,YAAY;AAAA,UACrB,CAAC,QAAQ,CAAC,YAAY;AAAA,UACtB,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,uCACE,QAAA,EAAK,WAAU,6BAA4B,eAAY,QACrD,UAAA,MACH;AAAA,UAGFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SAASE,2BAAAA,IAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,OAAM;AAAA,YAC3EA,2BAAAA,IAAC,OAAA,EAAI,WAAU,2CAA2C,SAAA,CAAS;AAAA,UAAA,GACrE;AAAA,UAEC,YACCA,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cACV,cAAW;AAAA,cAEX,yCAACC,UAAAA,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert (matches Figma \"Variant\" property) */\n  variant?: AlertVariant;\n  /** Optional title text (bold) */\n  title?: string;\n  /** Left icon element */\n  icon?: React.ReactNode;\n  /** Show close button */\n  closable?: boolean;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n}\n\nconst CLOSE_BUTTON_CLASSES: Record<AlertVariant, string> = {\n  info: \"hover:bg-info-500/10 text-info-500\",\n  success: \"hover:bg-success-500/10 text-success-500\",\n  warning: \"hover:bg-warning-500/10 text-warning-500\",\n  error: \"hover:bg-error-500/10 text-error-500\",\n};\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    { className, variant = \"info\", title, icon, closable = false, onClose, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-lg p-4 text-sm leading-[18px]\",\n          icon && closable && \"grid-cols-[auto_1fr_auto]\",\n          icon && !closable && \"grid-cols-[auto_1fr]\",\n          !icon && closable && \"grid-cols-[1fr_auto]\",\n          !icon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-50 text-info-500\",\n          variant === \"success\" && \"bg-success-50 text-success-500\",\n          variant === \"warning\" && \"bg-warning-50 text-warning-500\",\n          variant === \"error\" && \"bg-error-50 text-error-500\",\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className=\"flex shrink-0 items-start\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && <div className=\"typography-body-2-semibold text-body-100\">{title}</div>}\n          <div className=\"typography-body-2-regular text-body-200\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className={cn(\"self-start\", CLOSE_BUTTON_CLASSES[variant])}\n            aria-label=\"Close alert\"\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["React","jsxs","cn","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,uBAAqD;AAAA,EACzD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,QAAQ,OAAO,MAAM,WAAW,OAAO,SAAS,UAAU,GAAG,MAAA,GACpF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,QAAQ,YAAY;AAAA,UACpB,QAAQ,CAAC,YAAY;AAAA,UACrB,CAAC,QAAQ,YAAY;AAAA,UACrB,CAAC,QAAQ,CAAC,YAAY;AAAA,UACtB,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,uCACE,QAAA,EAAK,WAAU,6BAA4B,eAAY,QACrD,UAAA,MACH;AAAA,UAGFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SAASE,2BAAAA,IAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,OAAM;AAAA,YAC3EA,2BAAAA,IAAC,OAAA,EAAI,WAAU,2CAA2C,SAAA,CAAS;AAAA,UAAA,GACrE;AAAA,UAEC,YACCA,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAWF,GAAAA,GAAG,cAAc,qBAAqB,OAAO,CAAC;AAAA,cACzD,cAAW;AAAA,cAEX,yCAACG,UAAAA,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}

package/dist/components/Alert/Alert.mjs

@@ -4,6 +4,12 @@ import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { CrossIcon } from "../Icons/CrossIcon.mjs";
+const CLOSE_BUTTON_CLASSES = {
+  info: "hover:bg-info-500/10 text-info-500",
+  success: "hover:bg-success-500/10 text-success-500",
+  warning: "hover:bg-warning-500/10 text-warning-500",
+  error: "hover:bg-error-500/10 text-error-500"
+};
 const Alert = React.forwardRef(
   ({ className, variant = "info", title, icon, closable = false, onClose, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
@@ -38,7 +44,7 @@ const Alert = React.forwardRef(
               variant: "tertiary",
               size: "24",
               onClick: onClose,
-              className: "self-start",
+              className: cn("self-start", CLOSE_BUTTON_CLASSES[variant]),
               "aria-label": "Close alert",
               children: /* @__PURE__ */ jsx(CrossIcon, {})
             }

package/dist/components/Alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert (matches Figma \"Variant\" property) */\n  variant?: AlertVariant;\n  /** Optional title text (bold) */\n  title?: string;\n  /** Left icon element */\n  icon?: React.ReactNode;\n  /** Show close button */\n  closable?: boolean;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    { className, variant = \"info\", title, icon, closable = false, onClose, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-lg p-4 text-sm leading-[18px]\",\n          icon && closable && \"grid-cols-[auto_1fr_auto]\",\n          icon && !closable && \"grid-cols-[auto_1fr]\",\n          !icon && closable && \"grid-cols-[1fr_auto]\",\n          !icon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-50 text-info-500\",\n          variant === \"success\" && \"bg-success-50 text-success-500\",\n          variant === \"warning\" && \"bg-warning-50 text-warning-500\",\n          variant === \"error\" && \"bg-error-50 text-error-500\",\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className=\"flex shrink-0 items-start\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && <div className=\"typography-body-2-semibold text-body-100\">{title}</div>}\n          <div className=\"typography-body-2-regular text-body-200\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className=\"self-start\"\n            aria-label=\"Close alert\"\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,QAAQ,OAAO,MAAM,WAAW,OAAO,SAAS,UAAU,GAAG,MAAA,GACpF,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,QAAQ,YAAY;AAAA,UACpB,QAAQ,CAAC,YAAY;AAAA,UACrB,CAAC,QAAQ,YAAY;AAAA,UACrB,CAAC,QAAQ,CAAC,YAAY;AAAA,UACtB,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,4BACE,QAAA,EAAK,WAAU,6BAA4B,eAAY,QACrD,UAAA,MACH;AAAA,UAGF,qBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,OAAM;AAAA,YAC3E,oBAAC,OAAA,EAAI,WAAU,2CAA2C,SAAA,CAAS;AAAA,UAAA,GACrE;AAAA,UAEC,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cACV,cAAW;AAAA,cAEX,8BAAC,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Alert.mjs","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert (matches Figma \"Variant\" property) */\n  variant?: AlertVariant;\n  /** Optional title text (bold) */\n  title?: string;\n  /** Left icon element */\n  icon?: React.ReactNode;\n  /** Show close button */\n  closable?: boolean;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n}\n\nconst CLOSE_BUTTON_CLASSES: Record<AlertVariant, string> = {\n  info: \"hover:bg-info-500/10 text-info-500\",\n  success: \"hover:bg-success-500/10 text-success-500\",\n  warning: \"hover:bg-warning-500/10 text-warning-500\",\n  error: \"hover:bg-error-500/10 text-error-500\",\n};\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    { className, variant = \"info\", title, icon, closable = false, onClose, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-lg p-4 text-sm leading-[18px]\",\n          icon && closable && \"grid-cols-[auto_1fr_auto]\",\n          icon && !closable && \"grid-cols-[auto_1fr]\",\n          !icon && closable && \"grid-cols-[1fr_auto]\",\n          !icon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-50 text-info-500\",\n          variant === \"success\" && \"bg-success-50 text-success-500\",\n          variant === \"warning\" && \"bg-warning-50 text-warning-500\",\n          variant === \"error\" && \"bg-error-50 text-error-500\",\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className=\"flex shrink-0 items-start\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && <div className=\"typography-body-2-semibold text-body-100\">{title}</div>}\n          <div className=\"typography-body-2-regular text-body-200\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className={cn(\"self-start\", CLOSE_BUTTON_CLASSES[variant])}\n            aria-label=\"Close alert\"\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":[],"mappings":";;;;;;AAoBA,MAAM,uBAAqD;AAAA,EACzD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,QAAQ,OAAO,MAAM,WAAW,OAAO,SAAS,UAAU,GAAG,MAAA,GACpF,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,QAAQ,YAAY;AAAA,UACpB,QAAQ,CAAC,YAAY;AAAA,UACrB,CAAC,QAAQ,YAAY;AAAA,UACrB,CAAC,QAAQ,CAAC,YAAY;AAAA,UACtB,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,4BACE,QAAA,EAAK,WAAU,6BAA4B,eAAY,QACrD,UAAA,MACH;AAAA,UAGF,qBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,OAAM;AAAA,YAC3E,oBAAC,OAAA,EAAI,WAAU,2CAA2C,SAAA,CAAS;AAAA,UAAA,GACrE;AAAA,UAEC,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,GAAG,cAAc,qBAAqB,OAAO,CAAC;AAAA,cACzD,cAAW;AAAA,cAEX,8BAAC,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/styles/theme.css

@@ -287,7 +287,7 @@
 
 }
 
-.typography-body-1-regular {
+@utility typography-body-1-regular {
   font-size: 16px;
   text-decoration: none;
   font-family: Inter;
@@ -301,7 +301,7 @@
   text-case: none;
 }
 
-.typography-body-1-medium {
+@utility typography-body-1-medium {
   font-size: 16px;
   text-decoration: none;
   font-family: Inter;
@@ -315,7 +315,7 @@
   text-case: none;
 }
 
-.typography-body-1-semibold {
+@utility typography-body-1-semibold {
   font-size: 16px;
   text-decoration: none;
   font-family: Inter;
@@ -329,7 +329,7 @@
   text-case: none;
 }
 
-.typography-body-2-regular {
+@utility typography-body-2-regular {
   font-size: 14px;
   text-decoration: none;
   font-family: Inter;
@@ -343,7 +343,7 @@
   text-case: none;
 }
 
-.typography-body-2-medium {
+@utility typography-body-2-medium {
   font-size: 14px;
   text-decoration: none;
   font-family: Inter;
@@ -357,7 +357,7 @@
   text-case: none;
 }
 
-.typography-body-2-semibold {
+@utility typography-body-2-semibold {
   font-size: 14px;
   text-decoration: none;
   font-family: Inter;
@@ -371,7 +371,7 @@
   text-case: none;
 }
 
-.typography-button-large {
+@utility typography-button-large {
   font-size: 18px;
   text-decoration: none;
   font-family: Inter;
@@ -385,7 +385,7 @@
   text-case: none;
 }
 
-.typography-button-small {
+@utility typography-button-small {
   font-size: 16px;
   text-decoration: none;
   font-family: Inter;
@@ -399,7 +399,7 @@
   text-case: none;
 }
 
-.typography-link-large {
+@utility typography-link-large {
   font-size: 16px;
   text-decoration: underline;
   font-family: Inter;
@@ -413,7 +413,7 @@
   text-case: none;
 }
 
-.typography-link-small {
+@utility typography-link-small {
   font-size: 14px;
   text-decoration: underline;
   font-family: Inter;
@@ -427,7 +427,7 @@
   text-case: none;
 }
 
-.typography-link-x-small {
+@utility typography-link-x-small {
   font-size: 12px;
   text-decoration: underline;
   font-family: Inter;
@@ -441,7 +441,7 @@
   text-case: none;
 }
 
-.typography-caption-regular {
+@utility typography-caption-regular {
   font-size: 12px;
   text-decoration: none;
   font-family: Inter;
@@ -455,7 +455,7 @@
   text-case: none;
 }
 
-.typography-caption-semibold {
+@utility typography-caption-semibold {
   font-size: 12px;
   text-decoration: none;
   font-family: Inter;
@@ -469,7 +469,7 @@
   text-case: none;
 }
 
-.typography-subtitle {
+@utility typography-subtitle {
   font-size: 18px;
   text-decoration: none;
   font-family: Inter;
@@ -483,7 +483,7 @@
   text-case: none;
 }
 
-.typography-heading-4 {
+@utility typography-heading-4 {
   font-size: 20px;
   text-decoration: none;
   font-family: Inter;
@@ -497,7 +497,7 @@
   text-case: none;
 }
 
-.typography-heading-3 {
+@utility typography-heading-3 {
   font-size: 24px;
   text-decoration: none;
   font-family: Inter;
@@ -511,7 +511,7 @@
   text-case: none;
 }
 
-.typography-heading-32 {
+@utility typography-heading-32 {
   font-size: 32px;
   text-decoration: none;
   font-family: Inter;
@@ -525,7 +525,7 @@
   text-case: none;
 }
 
-.typography-heading-2 {
+@utility typography-heading-2 {
   font-size: 40px;
   text-decoration: none;
   font-family: Inter;
@@ -539,7 +539,7 @@
   text-case: none;
 }
 
-.typography-heading-1 {
+@utility typography-heading-1 {
   font-size: 48px;
   text-decoration: none;
   font-family: Inter;
@@ -553,7 +553,7 @@
   text-case: none;
 }
 
-.typography-hero {
+@utility typography-hero {
   font-size: 64px;
   text-decoration: none;
   font-family: Inter;
@@ -567,7 +567,7 @@
   text-case: none;
 }
 
-.typography-badge {
+@utility typography-badge {
   font-size: 9px;
   text-decoration: none;
   font-family: Inter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",