@blueshift-gg/ui-components 0.1.41 → 0.1.42

package/dist/Alert.d.mts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MotionProps } from 'motion/react';
-import { a as IconProps } from './Icon-DZiidxwK.mjs';
-import './utils/colours.mjs';
+import { a as IconProps } from './Icon-N0gdQwEm.mjs';
 
 type AlertProps = {
     title: string;

package/dist/Alert.d.ts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MotionProps } from 'motion/react';
-import { a as IconProps } from './Icon-CwFBZAPq.js';
-import './utils/colours.js';
+import { a as IconProps } from './Icon-N0gdQwEm.js';
 
 type AlertProps = {
     title: string;

package/dist/Avatar.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-DZiidxwK.mjs';
+import { a as IconProps } from './Icon-N0gdQwEm.mjs';
 import { CrosshairCornersProps } from './CrossHair.mjs';
 import { MotionProps } from 'motion/react';
 import { BrandColour } from './utils/colours.mjs';

package/dist/Avatar.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-CwFBZAPq.js';
+import { a as IconProps } from './Icon-N0gdQwEm.js';
 import { CrosshairCornersProps } from './CrossHair.js';
 import { MotionProps } from 'motion/react';
 import { BrandColour } from './utils/colours.js';

package/dist/Badge.d.mts

@@ -1,14 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BrandColour } from './utils/colours.mjs';
-import { a as IconProps } from './Icon-DZiidxwK.mjs';
+import { a as IconProps } from './Icon-N0gdQwEm.mjs';
 import { CrosshairCornersProps } from './CrossHair.mjs';
 import { MotionProps } from 'motion/react';
+import { ReactNode } from 'react';
 
 type BadgeProps = {
     className?: string;
     label?: string;
     variant?: BrandColour;
-    icon?: IconProps;
+    icon?: IconProps | ReactNode;
     iconPosition?: "left" | "right";
     crosshair?: CrosshairCornersProps;
     size?: "xs" | "sm" | "md";

package/dist/Badge.d.ts

@@ -1,14 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BrandColour } from './utils/colours.js';
-import { a as IconProps } from './Icon-CwFBZAPq.js';
+import { a as IconProps } from './Icon-N0gdQwEm.js';
 import { CrosshairCornersProps } from './CrossHair.js';
 import { MotionProps } from 'motion/react';
+import { ReactNode } from 'react';
 
 type BadgeProps = {
     className?: string;
     label?: string;
     variant?: BrandColour;
-    icon?: IconProps;
+    icon?: IconProps | ReactNode;
     iconPosition?: "left" | "right";
     crosshair?: CrosshairCornersProps;
     size?: "xs" | "sm" | "md";

package/dist/Badge.js

@@ -6,6 +6,7 @@ var Icon = require('./Icon');
 var classNames = require('classnames');
 var CrossHair = require('./CrossHair');
 var react = require('motion/react');
+var react$1 = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -32,8 +33,8 @@ const Badge = ({
         size === "xs" && "text-xs leading-[100%]",
         !label && "!p-2 !justify-center",
         !icon && "!py-1 !px-2",
-        iconPosition === "left" && label && icon && "pl-1.5 pr-2",
-        iconPosition === "right" && label && icon && "pl-2 pr-1.5",
+        iconPosition === "left" && label && !!icon && "pl-1.5 pr-2",
+        iconPosition === "right" && label && !!icon && "pl-2 pr-1.5",
         crosshair?.variant === "bordered" && label && iconPosition === "left" && "pl-2.5 pr-3",
         crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5",
         className
@@ -50,27 +51,31 @@ const Badge = ({
             animationDuration: crosshair?.animationDuration || 1.5,
             size: crosshair?.size || 4
           },
-          icon?.name
+          react$1.isValidElement(icon) ? "custom-icon" : icon?.name
         ) }),
-        icon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(
+        icon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react$1.isValidElement(icon) ? icon : /* @__PURE__ */ jsxRuntime.jsx(
           Icon.Icon,
           {
             name: icon.name,
-            className: classNames__default.default(icon.className, "flex-shrink-0 text-current"),
-            size: icon.size || 14,
-            difficulties: icon.difficulties
+            className: classNames__default.default(
+              icon.className,
+              "flex-shrink-0 text-current"
+            ),
+            size: icon.size || 14
           }
-        ),
+        ) }),
         label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: label }),
-        icon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(
+        icon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react$1.isValidElement(icon) ? icon : /* @__PURE__ */ jsxRuntime.jsx(
           Icon.Icon,
           {
             name: icon.name,
-            className: classNames__default.default(icon.className, "flex-shrink-0 text-current"),
-            size: icon.size || 14,
-            difficulties: icon.difficulties
+            className: classNames__default.default(
+              icon.className,
+              "flex-shrink-0 text-current"
+            ),
+            size: icon.size || 14
           }
-        )
+        ) })
       ]
     }
   );

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Badge.tsx"],"names":["jsxs","motion","BRAND_COLOURS","classNames","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAAkB;AAChB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,OAAO,EAAE,KAAA,EAAOC,qBAAA,CAAc,OAAA,IAAW,WAAW,CAAA,EAAE;AAAA,MACtD,SAAA,EAAWC,2BAAA;AAAA,QACT,oMAAA;AAAA,QACA,SAAS,IAAA,IAAQ,eAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,CAAC,KAAA,IAAS,sBAAA;AAAA,QACV,CAAC,IAAA,IAAQ,aAAA;AAAA,QACT,YAAA,KAAiB,MAAA,IAAU,KAAA,IAAS,IAAA,IAAQ,aAAA;AAAA,QAC5C,YAAA,KAAiB,OAAA,IAAW,KAAA,IAAS,IAAA,IAAQ,aAAA;AAAA,QAC7C,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,MAAA,IACjB,aAAA;AAAA,QACF,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,OAAA,IACjB,aAAA;AAAA,QACF;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,2BAAA,CAAW,+BAA+B,CAAA,EACxD,QAAA,kBAAAC,cAAA;AAAA,UAACC,0BAAA;AAAA,UAAA;AAAA,YAEC,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,SAAA,EAAWF,2BAAA,CAAW,cAAA,EAAgB,SAAA,EAAW,SAAS,CAAA;AAAA,YAC1D,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,cAAA,EAAgB,WAAW,cAAA,IAAkB,CAAA;AAAA,YAC7C,iBAAA,EAAmB,WAAW,iBAAA,IAAqB,GAAA;AAAA,YACnD,IAAA,EAAM,WAAW,IAAA,IAAQ;AAAA,WAAA;AAAA,UANpB,IAAA,EAAM;AAAA,SAOb,EACF,CAAA;AAAA,QACC,IAAA,IAAQ,iBAAiB,MAAA,oBACxBC,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAWH,2BAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA,SACrB;AAAA,QAED,KAAA,oBAASC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC5C,IAAA,IAAQ,iBAAiB,OAAA,oBACxBA,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAWH,2BAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA;AACrB;AAAA;AAAA,GAEJ;AAEJ","file":"Badge.js","sourcesContent":["\"use client\";\n\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\n\nexport type BadgeProps = {\n  className?: string;\n  label?: string;\n  variant?: BrandColour;\n  icon?: IconProps;\n  iconPosition?: \"left\" | \"right\";\n  crosshair?: CrosshairCornersProps;\n  size?: \"xs\" | \"sm\" | \"md\";\n  animation?: MotionProps;\n};\n\nexport const Badge = ({\n  className,\n  variant,\n  icon,\n  crosshair,\n  iconPosition = \"left\",\n  label,\n  size = \"sm\",\n  animation,\n}: BadgeProps) => {\n  return (\n    <motion.div\n      style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n      className={classNames(\n        \"shadow-[inset_0px_0px_6px]  bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1\",\n        size === \"md\" && \"!py-2 text-sm\",\n        size === \"sm\" && \"text-sm leading-[16px]\",\n        size === \"xs\" && \"text-xs leading-[100%]\",\n        !label && \"!p-2 !justify-center\",\n        !icon && \"!py-1 !px-2\",\n        iconPosition === \"left\" && label && icon && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && icon && \"pl-2 pr-1.5\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"left\" &&\n          \"pl-2.5 pr-3\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"right\" &&\n          \"pl-3 pr-2.5\",\n        className,\n      )}\n      {...animation}\n    >\n      <div className={classNames(\"text-current absolute inset-0\")}>\n        <CrosshairCorners\n          key={icon?.name}\n          variant={crosshair?.variant}\n          className={classNames(\"text-current\", crosshair?.className)}\n          corners={crosshair?.corners}\n          animationDelay={crosshair?.animationDelay || 0}\n          animationDuration={crosshair?.animationDuration || 1.5}\n          size={crosshair?.size || 4}\n        />\n      </div>\n      {icon && iconPosition === \"left\" && (\n        <Icon\n          name={icon.name}\n          className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n          size={icon.size || 14}\n          difficulties={icon.difficulties}\n        />\n      )}\n      {label && <span className=\"font-mono\">{label}</span>}\n      {icon && iconPosition === \"right\" && (\n        <Icon\n          name={icon.name}\n          className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n          size={icon.size || 14}\n          difficulties={icon.difficulties}\n        />\n      )}\n    </motion.div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Badge.tsx"],"names":["jsxs","motion","BRAND_COLOURS","classNames","jsx","CrosshairCorners","isValidElement","Icon"],"mappings":";;;;;;;;;;;;;;AAoBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAAkB;AAChB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,OAAO,EAAE,KAAA,EAAOC,qBAAA,CAAc,OAAA,IAAW,WAAW,CAAA,EAAE;AAAA,MACtD,SAAA,EAAWC,2BAAA;AAAA,QACT,oMAAA;AAAA,QACA,SAAS,IAAA,IAAQ,eAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,CAAC,KAAA,IAAS,sBAAA;AAAA,QACV,CAAC,IAAA,IAAQ,aAAA;AAAA,QACT,YAAA,KAAiB,MAAA,IAAU,KAAA,IAAS,CAAC,CAAC,IAAA,IAAQ,aAAA;AAAA,QAC9C,YAAA,KAAiB,OAAA,IAAW,KAAA,IAAS,CAAC,CAAC,IAAA,IAAQ,aAAA;AAAA,QAC/C,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,MAAA,IACjB,aAAA;AAAA,QACF,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,OAAA,IACjB,aAAA;AAAA,QACF;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,2BAAA,CAAW,+BAA+B,CAAA,EACxD,QAAA,kBAAAC,cAAA;AAAA,UAACC,0BAAA;AAAA,UAAA;AAAA,YAEC,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,SAAA,EAAWF,2BAAA,CAAW,cAAA,EAAgB,SAAA,EAAW,SAAS,CAAA;AAAA,YAC1D,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,cAAA,EAAgB,WAAW,cAAA,IAAkB,CAAA;AAAA,YAC7C,iBAAA,EAAmB,WAAW,iBAAA,IAAqB,GAAA;AAAA,YACnD,IAAA,EAAM,WAAW,IAAA,IAAQ;AAAA,WAAA;AAAA,UANpBG,sBAAA,CAAe,IAAI,CAAA,GAAI,aAAA,GAAiB,IAAA,EAAoB;AAAA,SAOnE,EACF,CAAA;AAAA,QACC,QAAQ,YAAA,KAAiB,MAAA,0DAErB,QAAA,EAAAA,sBAAA,CAAe,IAAI,IAClB,IAAA,mBAEAF,cAAA;AAAA,UAACG,SAAA;AAAA,UAAA;AAAA,YACC,MAAO,IAAA,CAAmB,IAAA;AAAA,YAC1B,SAAA,EAAWJ,2BAAA;AAAA,cACR,IAAA,CAAmB,SAAA;AAAA,cACpB;AAAA,aACF;AAAA,YACA,IAAA,EAAO,KAAmB,IAAA,IAAQ;AAAA;AAAA,SACpC,EAEJ,CAAA;AAAA,QAED,KAAA,oBAASC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC5C,QAAQ,YAAA,KAAiB,OAAA,0DAErB,QAAA,EAAAE,sBAAA,CAAe,IAAI,IAClB,IAAA,mBAEAF,cAAA;AAAA,UAACG,SAAA;AAAA,UAAA;AAAA,YACC,MAAO,IAAA,CAAmB,IAAA;AAAA,YAC1B,SAAA,EAAWJ,2BAAA;AAAA,cACR,IAAA,CAAmB,SAAA;AAAA,cACpB;AAAA,aACF;AAAA,YACA,IAAA,EAAO,KAAmB,IAAA,IAAQ;AAAA;AAAA,SACpC,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"Badge.js","sourcesContent":["\"use client\";\n\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { isValidElement, ReactNode } from \"react\";\n\nexport type BadgeProps = {\n  className?: string;\n  label?: string;\n  variant?: BrandColour;\n  icon?: IconProps | ReactNode;\n  iconPosition?: \"left\" | \"right\";\n  crosshair?: CrosshairCornersProps;\n  size?: \"xs\" | \"sm\" | \"md\";\n  animation?: MotionProps;\n};\n\nexport const Badge = ({\n  className,\n  variant,\n  icon,\n  crosshair,\n  iconPosition = \"left\",\n  label,\n  size = \"sm\",\n  animation,\n}: BadgeProps) => {\n  return (\n    <motion.div\n      style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n      className={classNames(\n        \"shadow-[inset_0px_0px_6px]  bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1\",\n        size === \"md\" && \"!py-2 text-sm\",\n        size === \"sm\" && \"text-sm leading-[16px]\",\n        size === \"xs\" && \"text-xs leading-[100%]\",\n        !label && \"!p-2 !justify-center\",\n        !icon && \"!py-1 !px-2\",\n        iconPosition === \"left\" && label && !!icon && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && !!icon && \"pl-2 pr-1.5\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"left\" &&\n          \"pl-2.5 pr-3\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"right\" &&\n          \"pl-3 pr-2.5\",\n        className,\n      )}\n      {...animation}\n    >\n      <div className={classNames(\"text-current absolute inset-0\")}>\n        <CrosshairCorners\n          key={isValidElement(icon) ? \"custom-icon\" : (icon as IconProps)?.name}\n          variant={crosshair?.variant}\n          className={classNames(\"text-current\", crosshair?.className)}\n          corners={crosshair?.corners}\n          animationDelay={crosshair?.animationDelay || 0}\n          animationDuration={crosshair?.animationDuration || 1.5}\n          size={crosshair?.size || 4}\n        />\n      </div>\n      {icon && iconPosition === \"left\" && (\n        <>\n          {isValidElement(icon) ? (\n            icon\n          ) : (\n            <Icon\n              name={(icon as IconProps).name}\n              className={classNames(\n                (icon as IconProps).className,\n                \"flex-shrink-0 text-current\",\n              )}\n              size={(icon as IconProps).size || 14}\n            />\n          )}\n        </>\n      )}\n      {label && <span className=\"font-mono\">{label}</span>}\n      {icon && iconPosition === \"right\" && (\n        <>\n          {isValidElement(icon) ? (\n            icon\n          ) : (\n            <Icon\n              name={(icon as IconProps).name}\n              className={classNames(\n                (icon as IconProps).className,\n                \"flex-shrink-0 text-current\",\n              )}\n              size={(icon as IconProps).size || 14}\n            />\n          )}\n        </>\n      )}\n    </motion.div>\n  );\n};\n"]}

package/dist/Badge.mjs

@@ -1,9 +1,10 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { BRAND_COLOURS } from './utils/colours';
 import { Icon } from './Icon';
 import classNames from 'classnames';
 import { CrosshairCorners } from './CrossHair';
 import { motion } from 'motion/react';
+import { isValidElement } from 'react';
 
 const Badge = ({
   className,
@@ -26,8 +27,8 @@ const Badge = ({
         size === "xs" && "text-xs leading-[100%]",
         !label && "!p-2 !justify-center",
         !icon && "!py-1 !px-2",
-        iconPosition === "left" && label && icon && "pl-1.5 pr-2",
-        iconPosition === "right" && label && icon && "pl-2 pr-1.5",
+        iconPosition === "left" && label && !!icon && "pl-1.5 pr-2",
+        iconPosition === "right" && label && !!icon && "pl-2 pr-1.5",
         crosshair?.variant === "bordered" && label && iconPosition === "left" && "pl-2.5 pr-3",
         crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5",
         className
@@ -44,27 +45,31 @@ const Badge = ({
             animationDuration: crosshair?.animationDuration || 1.5,
             size: crosshair?.size || 4
           },
-          icon?.name
+          isValidElement(icon) ? "custom-icon" : icon?.name
         ) }),
-        icon && iconPosition === "left" && /* @__PURE__ */ jsx(
+        icon && iconPosition === "left" && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(
           Icon,
           {
             name: icon.name,
-            className: classNames(icon.className, "flex-shrink-0 text-current"),
-            size: icon.size || 14,
-            difficulties: icon.difficulties
+            className: classNames(
+              icon.className,
+              "flex-shrink-0 text-current"
+            ),
+            size: icon.size || 14
           }
-        ),
+        ) }),
         label && /* @__PURE__ */ jsx("span", { className: "font-mono", children: label }),
-        icon && iconPosition === "right" && /* @__PURE__ */ jsx(
+        icon && iconPosition === "right" && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(
           Icon,
           {
             name: icon.name,
-            className: classNames(icon.className, "flex-shrink-0 text-current"),
-            size: icon.size || 14,
-            difficulties: icon.difficulties
+            className: classNames(
+              icon.className,
+              "flex-shrink-0 text-current"
+            ),
+            size: icon.size || 14
           }
-        )
+        ) })
       ]
     }
   );

package/dist/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Badge.tsx"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAAkB;AAChB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,OAAO,EAAE,KAAA,EAAO,aAAA,CAAc,OAAA,IAAW,WAAW,CAAA,EAAE;AAAA,MACtD,SAAA,EAAW,UAAA;AAAA,QACT,oMAAA;AAAA,QACA,SAAS,IAAA,IAAQ,eAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,CAAC,KAAA,IAAS,sBAAA;AAAA,QACV,CAAC,IAAA,IAAQ,aAAA;AAAA,QACT,YAAA,KAAiB,MAAA,IAAU,KAAA,IAAS,IAAA,IAAQ,aAAA;AAAA,QAC5C,YAAA,KAAiB,OAAA,IAAW,KAAA,IAAS,IAAA,IAAQ,aAAA;AAAA,QAC7C,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,MAAA,IACjB,aAAA;AAAA,QACF,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,OAAA,IACjB,aAAA;AAAA,QACF;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,+BAA+B,CAAA,EACxD,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YAEC,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,SAAA,EAAW,SAAS,CAAA;AAAA,YAC1D,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,cAAA,EAAgB,WAAW,cAAA,IAAkB,CAAA;AAAA,YAC7C,iBAAA,EAAmB,WAAW,iBAAA,IAAqB,GAAA;AAAA,YACnD,IAAA,EAAM,WAAW,IAAA,IAAQ;AAAA,WAAA;AAAA,UANpB,IAAA,EAAM;AAAA,SAOb,EACF,CAAA;AAAA,QACC,IAAA,IAAQ,iBAAiB,MAAA,oBACxB,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAW,UAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA,SACrB;AAAA,QAED,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC5C,IAAA,IAAQ,iBAAiB,OAAA,oBACxB,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAW,UAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA;AACrB;AAAA;AAAA,GAEJ;AAEJ","file":"Badge.mjs","sourcesContent":["\"use client\";\n\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\n\nexport type BadgeProps = {\n  className?: string;\n  label?: string;\n  variant?: BrandColour;\n  icon?: IconProps;\n  iconPosition?: \"left\" | \"right\";\n  crosshair?: CrosshairCornersProps;\n  size?: \"xs\" | \"sm\" | \"md\";\n  animation?: MotionProps;\n};\n\nexport const Badge = ({\n  className,\n  variant,\n  icon,\n  crosshair,\n  iconPosition = \"left\",\n  label,\n  size = \"sm\",\n  animation,\n}: BadgeProps) => {\n  return (\n    <motion.div\n      style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n      className={classNames(\n        \"shadow-[inset_0px_0px_6px]  bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1\",\n        size === \"md\" && \"!py-2 text-sm\",\n        size === \"sm\" && \"text-sm leading-[16px]\",\n        size === \"xs\" && \"text-xs leading-[100%]\",\n        !label && \"!p-2 !justify-center\",\n        !icon && \"!py-1 !px-2\",\n        iconPosition === \"left\" && label && icon && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && icon && \"pl-2 pr-1.5\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"left\" &&\n          \"pl-2.5 pr-3\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"right\" &&\n          \"pl-3 pr-2.5\",\n        className,\n      )}\n      {...animation}\n    >\n      <div className={classNames(\"text-current absolute inset-0\")}>\n        <CrosshairCorners\n          key={icon?.name}\n          variant={crosshair?.variant}\n          className={classNames(\"text-current\", crosshair?.className)}\n          corners={crosshair?.corners}\n          animationDelay={crosshair?.animationDelay || 0}\n          animationDuration={crosshair?.animationDuration || 1.5}\n          size={crosshair?.size || 4}\n        />\n      </div>\n      {icon && iconPosition === \"left\" && (\n        <Icon\n          name={icon.name}\n          className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n          size={icon.size || 14}\n          difficulties={icon.difficulties}\n        />\n      )}\n      {label && <span className=\"font-mono\">{label}</span>}\n      {icon && iconPosition === \"right\" && (\n        <Icon\n          name={icon.name}\n          className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n          size={icon.size || 14}\n          difficulties={icon.difficulties}\n        />\n      )}\n    </motion.div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Badge.tsx"],"names":[],"mappings":";;;;;;;;AAoBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAAkB;AAChB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,OAAO,EAAE,KAAA,EAAO,aAAA,CAAc,OAAA,IAAW,WAAW,CAAA,EAAE;AAAA,MACtD,SAAA,EAAW,UAAA;AAAA,QACT,oMAAA;AAAA,QACA,SAAS,IAAA,IAAQ,eAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,CAAC,KAAA,IAAS,sBAAA;AAAA,QACV,CAAC,IAAA,IAAQ,aAAA;AAAA,QACT,YAAA,KAAiB,MAAA,IAAU,KAAA,IAAS,CAAC,CAAC,IAAA,IAAQ,aAAA;AAAA,QAC9C,YAAA,KAAiB,OAAA,IAAW,KAAA,IAAS,CAAC,CAAC,IAAA,IAAQ,aAAA;AAAA,QAC/C,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,MAAA,IACjB,aAAA;AAAA,QACF,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,OAAA,IACjB,aAAA;AAAA,QACF;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,+BAA+B,CAAA,EACxD,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YAEC,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,SAAA,EAAW,SAAS,CAAA;AAAA,YAC1D,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,cAAA,EAAgB,WAAW,cAAA,IAAkB,CAAA;AAAA,YAC7C,iBAAA,EAAmB,WAAW,iBAAA,IAAqB,GAAA;AAAA,YACnD,IAAA,EAAM,WAAW,IAAA,IAAQ;AAAA,WAAA;AAAA,UANpB,cAAA,CAAe,IAAI,CAAA,GAAI,aAAA,GAAiB,IAAA,EAAoB;AAAA,SAOnE,EACF,CAAA;AAAA,QACC,QAAQ,YAAA,KAAiB,MAAA,oCAErB,QAAA,EAAA,cAAA,CAAe,IAAI,IAClB,IAAA,mBAEA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAO,IAAA,CAAmB,IAAA;AAAA,YAC1B,SAAA,EAAW,UAAA;AAAA,cACR,IAAA,CAAmB,SAAA;AAAA,cACpB;AAAA,aACF;AAAA,YACA,IAAA,EAAO,KAAmB,IAAA,IAAQ;AAAA;AAAA,SACpC,EAEJ,CAAA;AAAA,QAED,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC5C,QAAQ,YAAA,KAAiB,OAAA,oCAErB,QAAA,EAAA,cAAA,CAAe,IAAI,IAClB,IAAA,mBAEA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAO,IAAA,CAAmB,IAAA;AAAA,YAC1B,SAAA,EAAW,UAAA;AAAA,cACR,IAAA,CAAmB,SAAA;AAAA,cACpB;AAAA,aACF;AAAA,YACA,IAAA,EAAO,KAAmB,IAAA,IAAQ;AAAA;AAAA,SACpC,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"Badge.mjs","sourcesContent":["\"use client\";\n\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { isValidElement, ReactNode } from \"react\";\n\nexport type BadgeProps = {\n  className?: string;\n  label?: string;\n  variant?: BrandColour;\n  icon?: IconProps | ReactNode;\n  iconPosition?: \"left\" | \"right\";\n  crosshair?: CrosshairCornersProps;\n  size?: \"xs\" | \"sm\" | \"md\";\n  animation?: MotionProps;\n};\n\nexport const Badge = ({\n  className,\n  variant,\n  icon,\n  crosshair,\n  iconPosition = \"left\",\n  label,\n  size = \"sm\",\n  animation,\n}: BadgeProps) => {\n  return (\n    <motion.div\n      style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n      className={classNames(\n        \"shadow-[inset_0px_0px_6px]  bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1\",\n        size === \"md\" && \"!py-2 text-sm\",\n        size === \"sm\" && \"text-sm leading-[16px]\",\n        size === \"xs\" && \"text-xs leading-[100%]\",\n        !label && \"!p-2 !justify-center\",\n        !icon && \"!py-1 !px-2\",\n        iconPosition === \"left\" && label && !!icon && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && !!icon && \"pl-2 pr-1.5\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"left\" &&\n          \"pl-2.5 pr-3\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"right\" &&\n          \"pl-3 pr-2.5\",\n        className,\n      )}\n      {...animation}\n    >\n      <div className={classNames(\"text-current absolute inset-0\")}>\n        <CrosshairCorners\n          key={isValidElement(icon) ? \"custom-icon\" : (icon as IconProps)?.name}\n          variant={crosshair?.variant}\n          className={classNames(\"text-current\", crosshair?.className)}\n          corners={crosshair?.corners}\n          animationDelay={crosshair?.animationDelay || 0}\n          animationDuration={crosshair?.animationDuration || 1.5}\n          size={crosshair?.size || 4}\n        />\n      </div>\n      {icon && iconPosition === \"left\" && (\n        <>\n          {isValidElement(icon) ? (\n            icon\n          ) : (\n            <Icon\n              name={(icon as IconProps).name}\n              className={classNames(\n                (icon as IconProps).className,\n                \"flex-shrink-0 text-current\",\n              )}\n              size={(icon as IconProps).size || 14}\n            />\n          )}\n        </>\n      )}\n      {label && <span className=\"font-mono\">{label}</span>}\n      {icon && iconPosition === \"right\" && (\n        <>\n          {isValidElement(icon) ? (\n            icon\n          ) : (\n            <Icon\n              name={(icon as IconProps).name}\n              className={classNames(\n                (icon as IconProps).className,\n                \"flex-shrink-0 text-current\",\n              )}\n              size={(icon as IconProps).size || 14}\n            />\n          )}\n        </>\n      )}\n    </motion.div>\n  );\n};\n"]}

package/dist/Banner.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MotionProps } from 'motion/react';
-import { a as IconProps } from './Icon-DZiidxwK.mjs';
+import { a as IconProps } from './Icon-N0gdQwEm.mjs';
 import { TooltipProps } from './Tooltip.mjs';
 import { BrandColour } from './utils/colours.mjs';
 

package/dist/Banner.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MotionProps } from 'motion/react';
-import { a as IconProps } from './Icon-CwFBZAPq.js';
+import { a as IconProps } from './Icon-N0gdQwEm.js';
 import { TooltipProps } from './Tooltip.js';
 import { BrandColour } from './utils/colours.js';
 

package/dist/Button.d.mts

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MotionProps } from 'motion/react';
 import { CrosshairCornersProps } from './CrossHair.mjs';
-import { courseDifficulty } from './utils/colours.mjs';
-import { c as IconName } from './Icon-DZiidxwK.mjs';
+import { c as IconName } from './Icon-N0gdQwEm.mjs';
 
 type ButtonProps = {
     className?: string;
@@ -12,8 +11,7 @@ type ButtonProps = {
         name: IconName;
         className?: string;
         size?: number;
-        difficulties?: Array<keyof typeof courseDifficulty>;
-    };
+    } | React.ReactNode;
     iconPosition?: "left" | "right";
     hideLabel?: boolean;
     label?: string;

package/dist/Button.d.ts

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MotionProps } from 'motion/react';
 import { CrosshairCornersProps } from './CrossHair.js';
-import { courseDifficulty } from './utils/colours.js';
-import { c as IconName } from './Icon-CwFBZAPq.js';
+import { c as IconName } from './Icon-N0gdQwEm.js';
 
 type ButtonProps = {
     className?: string;
@@ -12,8 +11,7 @@ type ButtonProps = {
         name: IconName;
         className?: string;
         size?: number;
-        difficulties?: Array<keyof typeof courseDifficulty>;
-    };
+    } | React.ReactNode;
     iconPosition?: "left" | "right";
     hideLabel?: boolean;
     label?: string;

package/dist/Button.js

@@ -67,12 +67,12 @@ const Button = ({
         size === "md" && hideLabel && "h-[42px] w-[42px] justify-center !pr-0 !pl-0",
         size === "sm" && hideLabel && "h-[36px] w-[36px] justify-center !pr-0 !pl-0",
         // Icon offsets
-        size === "lg" && icon && iconPosition === "right" && "pl-6 pr-[22px]",
-        size === "lg" && icon && iconPosition === "left" && "pl-[22px] pr-6",
-        size === "md" && icon && iconPosition === "right" && "pl-4 pr-[18px]",
-        size === "md" && icon && iconPosition === "left" && "pl-[18px] pr-4",
-        size === "sm" && icon && iconPosition === "right" && "pl-3 pr-[14px]",
-        size === "sm" && icon && iconPosition === "left" && "pl-[14px] pr-3",
+        size === "lg" && !!icon && iconPosition === "right" && "pl-6 pr-[22px]",
+        size === "lg" && !!icon && iconPosition === "left" && "pl-[22px] pr-6",
+        size === "md" && !!icon && iconPosition === "right" && "pl-4 pr-[18px]",
+        size === "md" && !!icon && iconPosition === "left" && "pl-[18px] pr-4",
+        size === "sm" && !!icon && iconPosition === "right" && "pl-3 pr-[14px]",
+        size === "sm" && !!icon && iconPosition === "left" && "pl-[14px] pr-3",
         className
       ),
       ...animation,
@@ -103,15 +103,24 @@ const Button = ({
             )
           }
         ),
-        icon && iconPosition === "left" && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsx(
+        icon && iconPosition === "left" && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.isValidElement(icon) ? loading ? /* @__PURE__ */ jsxRuntime.jsx(
           Icon.Icon,
           {
-            size: icon.size,
-            name: loading ? "Loading" : icon.name,
-            className: classNames__default.default(icon.className, "flex-shrink-0"),
-            difficulties: icon.difficulties
+            size: icon.props.size || 18,
+            name: "Loading",
+            className: "flex-shrink-0"
           }
-        ),
+        ) : icon : (
+          /* Icon config object */
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              size: icon.size,
+              name: loading ? "Loading" : icon.name,
+              className: classNames__default.default(icon.className, "flex-shrink-0")
+            }
+          )
+        ) }),
         children && children,
         !hideLabel && label && /* @__PURE__ */ jsxRuntime.jsx(
           DecryptedText__default.default,
@@ -121,15 +130,21 @@ const Button = ({
             text: label
           }
         ),
-        icon && iconPosition === "right" && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsx(
+        icon && iconPosition === "right" && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.isValidElement(icon) ? loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size: icon.props.size || 18,
+            name: "Loading",
+            className: "flex-shrink-0"
+          }
+        ) : icon : /* @__PURE__ */ jsxRuntime.jsx(
           Icon.Icon,
           {
             size: icon.size,
             name: loading ? "Loading" : icon.name,
-            className: classNames__default.default(icon.className, "flex-shrink-0"),
-            difficulties: icon.difficulties
+            className: classNames__default.default(icon.className, "flex-shrink-0")
           }
-        )
+        ) })
       ]
     }
   );

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Button.tsx"],"names":["useState","jsxs","motion","classNames","jsx","CrosshairCorners","Icon","DecryptedText"],"mappings":"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","file":"Button.js","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState } from \"react\";\nimport { courseDifficulty } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n  className?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  icon?: {\n    name: IconName;\n    className?: string;\n    size?: number;\n    difficulties?: Array<keyof typeof courseDifficulty>;\n  };\n  iconPosition?: \"left\" | \"right\";\n  hideLabel?: boolean;\n  label?: string;\n  loading?: boolean;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n  variant?: \"primary\" | \"secondary\" | \"outline\" | \"link\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\n  useDecryptAnimation?: boolean;\n};\n\nexport const Button = ({\n  label,\n  variant = \"primary\",\n  size = \"lg\",\n  className = \"\",\n  onClick,\n  disabled = false,\n  icon,\n  iconPosition = \"left\",\n  loading = false,\n  crosshairProps = {\n    variant: \"corners\",\n  },\n  hideLabel,\n  animation,\n  useHoverEffect = true,\n  onMouseEnter,\n  onMouseLeave,\n  children,\n  useDecryptAnimation = true,\n}: ButtonProps) => {\n  const [isHovering, setIsHovering] = useState(false);\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      onMouseEnter={() => {\n        setIsHovering(true);\n        onMouseEnter?.();\n      }}\n      onMouseLeave={() => {\n        setIsHovering(false);\n        onMouseLeave?.();\n      }}\n      className={classNames(\n        // Animation\n        \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n        // Base Styles\n        \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n        // Themes\n        variant === \"primary\" &&\n          \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n        variant === \"secondary\" &&\n          \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n        variant === \"outline\" &&\n          \"bg-transparent text-shade-secondary gradient-border before:bg-border hover:before:bg-border-light hover:text-shade-primary\",\n        variant === \"link\" && \"text-shade-secondary hover:text-shade-primary\",\n        // Sizes\n        size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n        size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n        size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n        size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n        size === \"lg\" &&\n          hideLabel &&\n          \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n        size === \"md\" &&\n          hideLabel &&\n          \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n        size === \"sm\" &&\n          hideLabel &&\n          \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n        // Icon offsets\n        size === \"lg\" && icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n        size === \"lg\" && icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n        size === \"md\" && icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n        size === \"md\" && icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n        size === \"sm\" && icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n        size === \"sm\" && icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n        className,\n      )}\n      {...animation}\n    >\n      {crosshairProps && variant !== \"outline\" && variant !== \"link\" && (\n        <div\n          className={classNames(\n            \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n            variant === \"secondary\" && \"text-shade-mute\",\n            variant === \"primary\" && \"text-background\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size === \"lg\" &&\n              \"group-enabled:group-hover:inset-[-4px]\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size === \"md\" &&\n              \"group-enabled:group-hover:inset-[-3px]\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size !== \"lg\" &&\n              size !== \"md\" &&\n              \"group-enabled:group-hover:inset-[-2px]\",\n            crosshairProps.variant === \"cross\" &&\n              useHoverEffect &&\n              \"-inset-1 text-shade-primary\",\n            crosshairProps.variant === \"bordered\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n          )}\n        >\n          <CrosshairCorners\n            size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n            animationDelay={0}\n            variant={crosshairProps.variant}\n            animationDuration={1.5}\n            {...crosshairProps}\n          />\n        </div>\n      )}\n      {icon && iconPosition === \"left\" && size !== \"xs\" && (\n        <Icon\n          size={icon.size}\n          name={loading ? \"Loading\" : icon.name}\n          className={classNames(icon.className, \"flex-shrink-0\")}\n          difficulties={icon.difficulties}\n        />\n      )}\n      {children && children}\n      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering && !disabled && useDecryptAnimation}\n          text={label}\n        />\n      )}\n      {icon && iconPosition === \"right\" && size !== \"xs\" && (\n        <Icon\n          size={icon.size}\n          name={loading ? \"Loading\" : icon.name}\n          className={classNames(icon.className, \"flex-shrink-0\")}\n          difficulties={icon.difficulties}\n        />\n      )}\n    </motion.button>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Button.tsx"],"names":["useState","jsxs","motion","classNames","jsx","CrosshairCorners","Fragment","isValidElement","Icon","DecryptedText"],"mappings":";;;;;;;;;;;;;;;AAoCO,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,OAAA,GAAU,KAAA;AAAA,EACV,cAAA,GAAiB;AAAA,IACf,OAAA,EAAS;AAAA,GACX;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA,GAAiB,IAAA;AAAA,EACjB,YAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA,GAAsB;AACxB,CAAA,KAAmB;AACjB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,uBACEC,eAAA;AAAA,IAACC,cAAA,CAAO,MAAA;AAAA,IAAP;AAAA,MACC,QAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,aAAA,CAAc,IAAI,CAAA;AAClB,QAAA,YAAA,IAAe;AAAA,MACjB,CAAA;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,aAAA,CAAc,KAAK,CAAA;AACnB,QAAA,YAAA,IAAe;AAAA,MACjB,CAAA;AAAA,MACA,SAAA,EAAWC,2BAAA;AAAA;AAAA,QAET,oHAAA;AAAA;AAAA,QAEA,6EAAA;AAAA;AAAA,QAEA,YAAY,SAAA,IACV,mFAAA;AAAA,QACF,YAAY,WAAA,IACV,2FAAA;AAAA,QACF,YAAY,SAAA,IACV,4HAAA;AAAA,QACF,YAAY,MAAA,IAAU,+CAAA;AAAA;AAAA,QAEtB,SAAS,IAAA,IAAQ,0BAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,uCAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,yBAAA;AAAA,QACjB,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA,QACF,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA,QACF,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA;AAAA,QAEF,SAAS,IAAA,IAAQ,CAAC,CAAC,IAAA,IAAQ,iBAAiB,OAAA,IAAW,gBAAA;AAAA,QACvD,SAAS,IAAA,IAAQ,CAAC,CAAC,IAAA,IAAQ,iBAAiB,MAAA,IAAU,gBAAA;AAAA,QACtD,SAAS,IAAA,IAAQ,CAAC,CAAC,IAAA,IAAQ,iBAAiB,OAAA,IAAW,gBAAA;AAAA,QACvD,SAAS,IAAA,IAAQ,CAAC,CAAC,IAAA,IAAQ,iBAAiB,MAAA,IAAU,gBAAA;AAAA,QACtD,SAAS,IAAA,IAAQ,CAAC,CAAC,IAAA,IAAQ,iBAAiB,OAAA,IAAW,gBAAA;AAAA,QACvD,SAAS,IAAA,IAAQ,CAAC,CAAC,IAAA,IAAQ,iBAAiB,MAAA,IAAU,gBAAA;AAAA,QACtD;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,IAAkB,OAAA,KAAY,SAAA,IAAa,OAAA,KAAY,MAAA,oBACtDC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,2BAAA;AAAA,cACT,8EAAA;AAAA,cACA,YAAY,WAAA,IAAe,iBAAA;AAAA,cAC3B,YAAY,SAAA,IAAa,iBAAA;AAAA,cACzB,cAAA,CAAe,OAAA,KAAY,SAAA,IACzB,cAAA,IACA,mIAAA;AAAA,cACF,cAAA,CAAe,OAAA,KAAY,SAAA,IACzB,cAAA,IACA,SAAS,IAAA,IACT,wCAAA;AAAA,cACF,cAAA,CAAe,OAAA,KAAY,SAAA,IACzB,cAAA,IACA,SAAS,IAAA,IACT,wCAAA;AAAA,cACF,eAAe,OAAA,KAAY,SAAA,IACzB,kBACA,IAAA,KAAS,IAAA,IACT,SAAS,IAAA,IACT,wCAAA;AAAA,cACF,cAAA,CAAe,OAAA,KAAY,OAAA,IACzB,cAAA,IACA,6BAAA;AAAA,cACF,cAAA,CAAe,OAAA,KAAY,UAAA,IACzB,cAAA,IACA;AAAA,aACJ;AAAA,YAEA,QAAA,kBAAAC,cAAA;AAAA,cAACC,0BAAA;AAAA,cAAA;AAAA,gBACC,MAAM,IAAA,KAAS,IAAA,GAAO,CAAA,GAAI,IAAA,KAAS,OAAO,CAAA,GAAI,CAAA;AAAA,gBAC9C,cAAA,EAAgB,CAAA;AAAA,gBAChB,SAAS,cAAA,CAAe,OAAA;AAAA,gBACxB,iBAAA,EAAmB,GAAA;AAAA,gBAClB,GAAG;AAAA;AAAA;AACN;AAAA,SACF;AAAA,QAED,IAAA,IAAQ,iBAAiB,MAAA,IAAU,IAAA,KAAS,wBAC3CD,cAAA,CAAAE,mBAAA,EAAA,EAEG,QAAA,EAAAC,oBAAA,CAAe,IAAI,CAAA,GAClB,OAAA,mBACEH,cAAA;AAAA,UAACI,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAO,IAAA,CAAK,KAAA,CAAc,IAAA,IAAQ,EAAA;AAAA,YAClC,IAAA,EAAK,SAAA;AAAA,YACL,SAAA,EAAU;AAAA;AAAA,SACZ,GAEA,IAAA;AAAA;AAAA,0BAIFJ,cAAA;AAAA,YAACI,SAAA;AAAA,YAAA;AAAA,cACC,MAAO,IAAA,CAAa,IAAA;AAAA,cACpB,IAAA,EAAM,OAAA,GAAU,SAAA,GAAa,IAAA,CAAa,IAAA;AAAA,cAC1C,SAAA,EAAWL,2BAAA,CAAY,IAAA,CAAa,SAAA,EAAW,eAAe;AAAA;AAAA;AAChE,SAAA,EAEJ,CAAA;AAAA,QAED,QAAA,IAAY,QAAA;AAAA,QACZ,CAAC,aAAa,KAAA,oBACbC,cAAA;AAAA,UAACK,8BAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,MAAM,MAAA,GAAS,GAAA;AAAA,YACtB,UAAA,EAAY,UAAA,IAAc,CAAC,QAAA,IAAY,mBAAA;AAAA,YACvC,IAAA,EAAM;AAAA;AAAA,SACR;AAAA,QAED,IAAA,IAAQ,iBAAiB,OAAA,IAAW,IAAA,KAAS,wBAC5CL,cAAA,CAAAE,mBAAA,EAAA,EACG,QAAA,EAAAC,oBAAA,CAAe,IAAI,CAAA,GAClB,OAAA,mBACEH,cAAA;AAAA,UAACI,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAO,IAAA,CAAK,KAAA,CAAc,IAAA,IAAQ,EAAA;AAAA,YAClC,IAAA,EAAK,SAAA;AAAA,YACL,SAAA,EAAU;AAAA;AAAA,YAGZ,IAAA,mBAGFJ,cAAA;AAAA,UAACI,SAAA;AAAA,UAAA;AAAA,YACC,MAAO,IAAA,CAAa,IAAA;AAAA,YACpB,IAAA,EAAM,OAAA,GAAU,SAAA,GAAa,IAAA,CAAa,IAAA;AAAA,YAC1C,SAAA,EAAWL,2BAAA,CAAY,IAAA,CAAa,SAAA,EAAW,eAAe;AAAA;AAAA,SAChE,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"Button.js","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState, isValidElement } from \"react\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n  className?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  icon?:\n    | {\n        name: IconName;\n        className?: string;\n        size?: number;\n      }\n    | React.ReactNode;\n  iconPosition?: \"left\" | \"right\";\n  hideLabel?: boolean;\n  label?: string;\n  loading?: boolean;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n  variant?: \"primary\" | \"secondary\" | \"outline\" | \"link\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\n  useDecryptAnimation?: boolean;\n};\n\nexport const Button = ({\n  label,\n  variant = \"primary\",\n  size = \"lg\",\n  className = \"\",\n  onClick,\n  disabled = false,\n  icon,\n  iconPosition = \"left\",\n  loading = false,\n  crosshairProps = {\n    variant: \"corners\",\n  },\n  hideLabel,\n  animation,\n  useHoverEffect = true,\n  onMouseEnter,\n  onMouseLeave,\n  children,\n  useDecryptAnimation = true,\n}: ButtonProps) => {\n  const [isHovering, setIsHovering] = useState(false);\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      onMouseEnter={() => {\n        setIsHovering(true);\n        onMouseEnter?.();\n      }}\n      onMouseLeave={() => {\n        setIsHovering(false);\n        onMouseLeave?.();\n      }}\n      className={classNames(\n        // Animation\n        \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n        // Base Styles\n        \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n        // Themes\n        variant === \"primary\" &&\n          \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n        variant === \"secondary\" &&\n          \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n        variant === \"outline\" &&\n          \"bg-transparent text-shade-secondary gradient-border before:bg-border hover:before:bg-border-light hover:text-shade-primary\",\n        variant === \"link\" && \"text-shade-secondary hover:text-shade-primary\",\n        // Sizes\n        size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n        size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n        size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n        size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n        size === \"lg\" &&\n          hideLabel &&\n          \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n        size === \"md\" &&\n          hideLabel &&\n          \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n        size === \"sm\" &&\n          hideLabel &&\n          \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n        // Icon offsets\n        size === \"lg\" && !!icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n        size === \"lg\" && !!icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n        size === \"md\" && !!icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n        size === \"md\" && !!icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n        size === \"sm\" && !!icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n        size === \"sm\" && !!icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n        className,\n      )}\n      {...animation}\n    >\n      {crosshairProps && variant !== \"outline\" && variant !== \"link\" && (\n        <div\n          className={classNames(\n            \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n            variant === \"secondary\" && \"text-shade-mute\",\n            variant === \"primary\" && \"text-background\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size === \"lg\" &&\n              \"group-enabled:group-hover:inset-[-4px]\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size === \"md\" &&\n              \"group-enabled:group-hover:inset-[-3px]\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size !== \"lg\" &&\n              size !== \"md\" &&\n              \"group-enabled:group-hover:inset-[-2px]\",\n            crosshairProps.variant === \"cross\" &&\n              useHoverEffect &&\n              \"-inset-1 text-shade-primary\",\n            crosshairProps.variant === \"bordered\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n          )}\n        >\n          <CrosshairCorners\n            size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n            animationDelay={0}\n            variant={crosshairProps.variant}\n            animationDuration={1.5}\n            {...crosshairProps}\n          />\n        </div>\n      )}\n      {icon && iconPosition === \"left\" && size !== \"xs\" && (\n        <>\n          {/* Check if icon is a ReactNode (not an object with 'name') */}\n          {isValidElement(icon) ? (\n            loading ? (\n              <Icon\n                size={(icon.props as any).size || 18}\n                name=\"Loading\"\n                className=\"flex-shrink-0\"\n              />\n            ) : (\n              icon\n            )\n          ) : (\n            /* Icon config object */\n            <Icon\n              size={(icon as any).size}\n              name={loading ? \"Loading\" : (icon as any).name}\n              className={classNames((icon as any).className, \"flex-shrink-0\")}\n            />\n          )}\n        </>\n      )}\n      {children && children}\n      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering && !disabled && useDecryptAnimation}\n          text={label}\n        />\n      )}\n      {icon && iconPosition === \"right\" && size !== \"xs\" && (\n        <>\n          {isValidElement(icon) ? (\n            loading ? (\n              <Icon\n                size={(icon.props as any).size || 18}\n                name=\"Loading\"\n                className=\"flex-shrink-0\"\n              />\n            ) : (\n              icon\n            )\n          ) : (\n            <Icon\n              size={(icon as any).size}\n              name={loading ? \"Loading\" : (icon as any).name}\n              className={classNames((icon as any).className, \"flex-shrink-0\")}\n            />\n          )}\n        </>\n      )}\n    </motion.button>\n  );\n};\n"]}

package/dist/Button.mjs

@@ -1,10 +1,10 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { motion } from 'motion/react';
 import classNames from 'classnames';
 import { Icon } from './Icon';
 import { CrosshairCorners } from './CrossHair';
 import DecryptedText from './DecryptText';
-import { useState } from 'react';
+import { useState, isValidElement } from 'react';
 
 const Button = ({
   label,
@@ -60,12 +60,12 @@ const Button = ({
         size === "md" && hideLabel && "h-[42px] w-[42px] justify-center !pr-0 !pl-0",
         size === "sm" && hideLabel && "h-[36px] w-[36px] justify-center !pr-0 !pl-0",
         // Icon offsets
-        size === "lg" && icon && iconPosition === "right" && "pl-6 pr-[22px]",
-        size === "lg" && icon && iconPosition === "left" && "pl-[22px] pr-6",
-        size === "md" && icon && iconPosition === "right" && "pl-4 pr-[18px]",
-        size === "md" && icon && iconPosition === "left" && "pl-[18px] pr-4",
-        size === "sm" && icon && iconPosition === "right" && "pl-3 pr-[14px]",
-        size === "sm" && icon && iconPosition === "left" && "pl-[14px] pr-3",
+        size === "lg" && !!icon && iconPosition === "right" && "pl-6 pr-[22px]",
+        size === "lg" && !!icon && iconPosition === "left" && "pl-[22px] pr-6",
+        size === "md" && !!icon && iconPosition === "right" && "pl-4 pr-[18px]",
+        size === "md" && !!icon && iconPosition === "left" && "pl-[18px] pr-4",
+        size === "sm" && !!icon && iconPosition === "right" && "pl-3 pr-[14px]",
+        size === "sm" && !!icon && iconPosition === "left" && "pl-[14px] pr-3",
         className
       ),
       ...animation,
@@ -96,15 +96,24 @@ const Button = ({
             )
           }
         ),
-        icon && iconPosition === "left" && size !== "xs" && /* @__PURE__ */ jsx(
+        icon && iconPosition === "left" && size !== "xs" && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(icon) ? loading ? /* @__PURE__ */ jsx(
           Icon,
           {
-            size: icon.size,
-            name: loading ? "Loading" : icon.name,
-            className: classNames(icon.className, "flex-shrink-0"),
-            difficulties: icon.difficulties
+            size: icon.props.size || 18,
+            name: "Loading",
+            className: "flex-shrink-0"
           }
-        ),
+        ) : icon : (
+          /* Icon config object */
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              size: icon.size,
+              name: loading ? "Loading" : icon.name,
+              className: classNames(icon.className, "flex-shrink-0")
+            }
+          )
+        ) }),
         children && children,
         !hideLabel && label && /* @__PURE__ */ jsx(
           DecryptedText,
@@ -114,15 +123,21 @@ const Button = ({
             text: label
           }
         ),
-        icon && iconPosition === "right" && size !== "xs" && /* @__PURE__ */ jsx(
+        icon && iconPosition === "right" && size !== "xs" && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(icon) ? loading ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: icon.props.size || 18,
+            name: "Loading",
+            className: "flex-shrink-0"
+          }
+        ) : icon : /* @__PURE__ */ jsx(
           Icon,
           {
             size: icon.size,
             name: loading ? "Loading" : icon.name,
-            className: classNames(icon.className, "flex-shrink-0"),
-            difficulties: icon.difficulties
+            className: classNames(icon.className, "flex-shrink-0")
           }
-        )
+        ) })
       ]
     }
   );

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":"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","file":"Button.mjs","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState } from \"react\";\nimport { courseDifficulty } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n  className?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  icon?: {\n    name: IconName;\n    className?: string;\n    size?: number;\n    difficulties?: Array<keyof typeof courseDifficulty>;\n  };\n  iconPosition?: \"left\" | \"right\";\n  hideLabel?: boolean;\n  label?: string;\n  loading?: boolean;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n  variant?: \"primary\" | \"secondary\" | \"outline\" | \"link\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\n  useDecryptAnimation?: boolean;\n};\n\nexport const Button = ({\n  label,\n  variant = \"primary\",\n  size = \"lg\",\n  className = \"\",\n  onClick,\n  disabled = false,\n  icon,\n  iconPosition = \"left\",\n  loading = false,\n  crosshairProps = {\n    variant: \"corners\",\n  },\n  hideLabel,\n  animation,\n  useHoverEffect = true,\n  onMouseEnter,\n  onMouseLeave,\n  children,\n  useDecryptAnimation = true,\n}: ButtonProps) => {\n  const [isHovering, setIsHovering] = useState(false);\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      onMouseEnter={() => {\n        setIsHovering(true);\n        onMouseEnter?.();\n      }}\n      onMouseLeave={() => {\n        setIsHovering(false);\n        onMouseLeave?.();\n      }}\n      className={classNames(\n        // Animation\n        \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n        // Base Styles\n        \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n        // Themes\n        variant === \"primary\" &&\n          \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n        variant === \"secondary\" &&\n          \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n        variant === \"outline\" &&\n          \"bg-transparent text-shade-secondary gradient-border before:bg-border hover:before:bg-border-light hover:text-shade-primary\",\n        variant === \"link\" && \"text-shade-secondary hover:text-shade-primary\",\n        // Sizes\n        size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n        size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n        size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n        size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n        size === \"lg\" &&\n          hideLabel &&\n          \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n        size === \"md\" &&\n          hideLabel &&\n          \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n        size === \"sm\" &&\n          hideLabel &&\n          \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n        // Icon offsets\n        size === \"lg\" && icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n        size === \"lg\" && icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n        size === \"md\" && icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n        size === \"md\" && icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n        size === \"sm\" && icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n        size === \"sm\" && icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n        className,\n      )}\n      {...animation}\n    >\n      {crosshairProps && variant !== \"outline\" && variant !== \"link\" && (\n        <div\n          className={classNames(\n            \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n            variant === \"secondary\" && \"text-shade-mute\",\n            variant === \"primary\" && \"text-background\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size === \"lg\" &&\n              \"group-enabled:group-hover:inset-[-4px]\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size === \"md\" &&\n              \"group-enabled:group-hover:inset-[-3px]\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size !== \"lg\" &&\n              size !== \"md\" &&\n              \"group-enabled:group-hover:inset-[-2px]\",\n            crosshairProps.variant === \"cross\" &&\n              useHoverEffect &&\n              \"-inset-1 text-shade-primary\",\n            crosshairProps.variant === \"bordered\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n          )}\n        >\n          <CrosshairCorners\n            size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n            animationDelay={0}\n            variant={crosshairProps.variant}\n            animationDuration={1.5}\n            {...crosshairProps}\n          />\n        </div>\n      )}\n      {icon && iconPosition === \"left\" && size !== \"xs\" && (\n        <Icon\n          size={icon.size}\n          name={loading ? \"Loading\" : icon.name}\n          className={classNames(icon.className, \"flex-shrink-0\")}\n          difficulties={icon.difficulties}\n        />\n      )}\n      {children && children}\n      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering && !disabled && useDecryptAnimation}\n          text={label}\n        />\n      )}\n      {icon && iconPosition === \"right\" && size !== \"xs\" && (\n        <Icon\n          size={icon.size}\n          name={loading ? \"Loading\" : icon.name}\n          className={classNames(icon.className, \"flex-shrink-0\")}\n          difficulties={icon.difficulties}\n        />\n      )}\n    </motion.button>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":"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","file":"Button.mjs","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState, isValidElement } from \"react\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n  className?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  icon?:\n    | {\n        name: IconName;\n        className?: string;\n        size?: number;\n      }\n    | React.ReactNode;\n  iconPosition?: \"left\" | \"right\";\n  hideLabel?: boolean;\n  label?: string;\n  loading?: boolean;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n  variant?: \"primary\" | \"secondary\" | \"outline\" | \"link\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\n  useDecryptAnimation?: boolean;\n};\n\nexport const Button = ({\n  label,\n  variant = \"primary\",\n  size = \"lg\",\n  className = \"\",\n  onClick,\n  disabled = false,\n  icon,\n  iconPosition = \"left\",\n  loading = false,\n  crosshairProps = {\n    variant: \"corners\",\n  },\n  hideLabel,\n  animation,\n  useHoverEffect = true,\n  onMouseEnter,\n  onMouseLeave,\n  children,\n  useDecryptAnimation = true,\n}: ButtonProps) => {\n  const [isHovering, setIsHovering] = useState(false);\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      onMouseEnter={() => {\n        setIsHovering(true);\n        onMouseEnter?.();\n      }}\n      onMouseLeave={() => {\n        setIsHovering(false);\n        onMouseLeave?.();\n      }}\n      className={classNames(\n        // Animation\n        \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n        // Base Styles\n        \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n        // Themes\n        variant === \"primary\" &&\n          \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n        variant === \"secondary\" &&\n          \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n        variant === \"outline\" &&\n          \"bg-transparent text-shade-secondary gradient-border before:bg-border hover:before:bg-border-light hover:text-shade-primary\",\n        variant === \"link\" && \"text-shade-secondary hover:text-shade-primary\",\n        // Sizes\n        size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n        size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n        size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n        size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n        size === \"lg\" &&\n          hideLabel &&\n          \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n        size === \"md\" &&\n          hideLabel &&\n          \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n        size === \"sm\" &&\n          hideLabel &&\n          \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n        // Icon offsets\n        size === \"lg\" && !!icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n        size === \"lg\" && !!icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n        size === \"md\" && !!icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n        size === \"md\" && !!icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n        size === \"sm\" && !!icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n        size === \"sm\" && !!icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n        className,\n      )}\n      {...animation}\n    >\n      {crosshairProps && variant !== \"outline\" && variant !== \"link\" && (\n        <div\n          className={classNames(\n            \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n            variant === \"secondary\" && \"text-shade-mute\",\n            variant === \"primary\" && \"text-background\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size === \"lg\" &&\n              \"group-enabled:group-hover:inset-[-4px]\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size === \"md\" &&\n              \"group-enabled:group-hover:inset-[-3px]\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              size !== \"lg\" &&\n              size !== \"md\" &&\n              \"group-enabled:group-hover:inset-[-2px]\",\n            crosshairProps.variant === \"cross\" &&\n              useHoverEffect &&\n              \"-inset-1 text-shade-primary\",\n            crosshairProps.variant === \"bordered\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n          )}\n        >\n          <CrosshairCorners\n            size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n            animationDelay={0}\n            variant={crosshairProps.variant}\n            animationDuration={1.5}\n            {...crosshairProps}\n          />\n        </div>\n      )}\n      {icon && iconPosition === \"left\" && size !== \"xs\" && (\n        <>\n          {/* Check if icon is a ReactNode (not an object with 'name') */}\n          {isValidElement(icon) ? (\n            loading ? (\n              <Icon\n                size={(icon.props as any).size || 18}\n                name=\"Loading\"\n                className=\"flex-shrink-0\"\n              />\n            ) : (\n              icon\n            )\n          ) : (\n            /* Icon config object */\n            <Icon\n              size={(icon as any).size}\n              name={loading ? \"Loading\" : (icon as any).name}\n              className={classNames((icon as any).className, \"flex-shrink-0\")}\n            />\n          )}\n        </>\n      )}\n      {children && children}\n      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering && !disabled && useDecryptAnimation}\n          text={label}\n        />\n      )}\n      {icon && iconPosition === \"right\" && size !== \"xs\" && (\n        <>\n          {isValidElement(icon) ? (\n            loading ? (\n              <Icon\n                size={(icon.props as any).size || 18}\n                name=\"Loading\"\n                className=\"flex-shrink-0\"\n              />\n            ) : (\n              icon\n            )\n          ) : (\n            <Icon\n              size={(icon as any).size}\n              name={loading ? \"Loading\" : (icon as any).name}\n              className={classNames((icon as any).className, \"flex-shrink-0\")}\n            />\n          )}\n        </>\n      )}\n    </motion.button>\n  );\n};\n"]}