@blueshift-gg/ui-components 0.1.1 → 0.1.3

package/dist/Alert.d.mts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+import { a as IconProps } from './Icon-CTxwWbdC.mjs';
+import './utils/colours.mjs';
+
+type AlertProps = {
+    title: string;
+    description: string;
+    variant?: "warning";
+    icon?: IconProps;
+    isExpandable?: boolean;
+    className?: string;
+    isClearable?: boolean;
+    onClear?: () => void;
+    animation?: MotionProps;
+};
+declare const Alert: ({ onClear, isClearable, isExpandable, title, description, variant, icon, className, animation, }: AlertProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps };

package/dist/Alert.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+import { a as IconProps } from './Icon-llWd6yMa.js';
+import './utils/colours.js';
+
+type AlertProps = {
+    title: string;
+    description: string;
+    variant?: "warning";
+    icon?: IconProps;
+    isExpandable?: boolean;
+    className?: string;
+    isClearable?: boolean;
+    onClear?: () => void;
+    animation?: MotionProps;
+};
+declare const Alert: ({ onClear, isClearable, isExpandable, title, description, variant, icon, className, animation, }: AlertProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps };

package/dist/Alert.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('motion/react');
+var classNames = require('classnames');
+var Icon = require('./Icon');
+var CrossHair = require('./CrossHair');
+var react = require('react');
+var easings = require('./utils/easings');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Alert = ({
+  onClear,
+  isClearable,
+  isExpandable,
+  title,
+  description,
+  variant = "warning",
+  icon,
+  className,
+  animation
+}) => {
+  const [isExpanded, setIsExpanded] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.motion.div,
+    {
+      onClick: () => {
+        if (isExpandable) {
+          setIsExpanded(!isExpanded);
+        }
+      },
+      className: classNames__default.default(
+        "group p-6 relative bg-current/4 border border-current/15 shadow-[inset_0px_0px_32px]",
+        variant === "warning" && "text-brand-rust shadow-current/15",
+        isExpandable && "cursor-row-resize",
+        className
+      ),
+      ...animation,
+      children: [
+        isClearable && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onClear,
+            className: "z-10 flex items-center justify-center absolute top-2.5 right-2.5 h-[28px] w-[28px] bg-current/5 text-current hover:bg-current/10 active:scale-[0.97] transition-colors duration-100 ease-glide",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "Close", size: 12 })
+          }
+        ),
+        isExpandable && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classNames__default.default(
+              "text-shade-tertiary group-hover:text-shade-primary absolute inset-2.5 transition-all duration-100 ease-glide group-hover:inset-1"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              CrossHair.CrosshairCorners,
+              {
+                animationDelay: 0,
+                size: 8,
+                corners: ["bottom-right"]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          react$1.motion.div,
+          {
+            initial: false,
+            animate: {
+              height: isExpanded ? "100%" : "120px"
+            },
+            transition: {
+              duration: 0.15,
+              ease: easings.glide
+            },
+            className: classNames__default.default(
+              "flex flex-col gap-y-4",
+              isExpandable && "overflow-y-auto",
+              isExpandable && !isExpanded && "[mask-image:linear-gradient(180deg,#D9D9D9_45.42%,rgba(115,115,115,0)_100%)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+                icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon?.name, size: icon?.size || 18 }),
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-mono font-medium text-current leading-none", children: title })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-shade-primary leading-[160%] font-medium", children: description })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.Alert = Alert;
+//# sourceMappingURL=Alert.js.map
+//# sourceMappingURL=Alert.js.map

package/dist/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Alert.tsx"],"names":["useState","jsxs","motion","classNames","jsx","Icon","CrosshairCorners","glide"],"mappings":";;;;;;;;;;;;;;AAqBO,MAAM,QAAQ,CAAC;AAAA,EACpB,OAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAkB;AAChB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAElD,EAAA,uBACEC,eAAA;AAAA,IAACC,cAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAS,MAAM;AACb,QAAA,IAAI,YAAA,EAAc;AAChB,UAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAWC,2BAAA;AAAA,QACT,sFAAA;AAAA,QACA,YAAY,SAAA,IAAa,mCAAA;AAAA,QACzB,YAAA,IAAgB,mBAAA;AAAA,QAChB;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACCC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,SAAA,EAAU,gMAAA;AAAA,YAEV,QAAA,kBAAAA,cAAA,CAACC,SAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,MAAM,EAAA,EAAI;AAAA;AAAA,SAC/B;AAAA,QAED,YAAA,oBACCD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,2BAAA;AAAA,cACT;AAAA,aACF;AAAA,YAEA,QAAA,kBAAAC,cAAA;AAAA,cAACE,0BAAA;AAAA,cAAA;AAAA,gBACC,cAAA,EAAgB,CAAA;AAAA,gBAChB,IAAA,EAAM,CAAA;AAAA,gBACN,OAAA,EAAS,CAAC,cAAc;AAAA;AAAA;AAC1B;AAAA,SACF;AAAA,wBAEFL,eAAA;AAAA,UAACC,cAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS,KAAA;AAAA,YACT,OAAA,EAAS;AAAA,cACP,MAAA,EAAQ,aAAa,MAAA,GAAS;AAAA,aAChC;AAAA,YACA,UAAA,EAAY;AAAA,cACV,QAAA,EAAU,IAAA;AAAA,cACV,IAAA,EAAMK;AAAA,aACR;AAAA,YACA,SAAA,EAAWJ,2BAAA;AAAA,cACT,uBAAA;AAAA,cACA,YAAA,IAAgB,iBAAA;AAAA,cAChB,YAAA,IACE,CAAC,UAAA,IACD;AAAA,aACJ;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,gBAAA,IAAA,oBAAQG,cAAA,CAACC,aAAK,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,QAAQ,EAAA,EAAI,CAAA;AAAA,gCACzDD,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,iDAAA,EACX,QAAA,EAAA,KAAA,EACH;AAAA,eAAA,EACF,CAAA;AAAA,8BACAA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+CAAA,EACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"Alert.js","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { useState } from \"react\";\nimport { glide } from \"./utils/easings\";\n\nexport type AlertProps = {\n  title: string;\n  description: string;\n  variant?: \"warning\";\n  icon?: IconProps;\n  isExpandable?: boolean;\n  className?: string;\n  isClearable?: boolean;\n  onClear?: () => void;\n  animation?: MotionProps;\n};\n\nexport const Alert = ({\n  onClear,\n  isClearable,\n  isExpandable,\n  title,\n  description,\n  variant = \"warning\",\n  icon,\n  className,\n  animation,\n}: AlertProps) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <motion.div\n      onClick={() => {\n        if (isExpandable) {\n          setIsExpanded(!isExpanded);\n        }\n      }}\n      className={classNames(\n        \"group p-6 relative bg-current/4 border border-current/15 shadow-[inset_0px_0px_32px]\",\n        variant === \"warning\" && \"text-brand-rust shadow-current/15\",\n        isExpandable && \"cursor-row-resize\",\n        className\n      )}\n      {...animation}\n    >\n      {isClearable && (\n        <button\n          onClick={onClear}\n          className=\"z-10 flex items-center justify-center absolute top-2.5 right-2.5 h-[28px] w-[28px] bg-current/5 text-current hover:bg-current/10 active:scale-[0.97] transition-colors duration-100 ease-glide\"\n        >\n          <Icon name=\"Close\" size={12} />\n        </button>\n      )}\n      {isExpandable && (\n        <div\n          className={classNames(\n            \"text-shade-tertiary group-hover:text-shade-primary absolute inset-2.5 transition-all duration-100 ease-glide group-hover:inset-1\"\n          )}\n        >\n          <CrosshairCorners\n            animationDelay={0}\n            size={8}\n            corners={[\"bottom-right\"]}\n          />\n        </div>\n      )}\n      <motion.div\n        initial={false}\n        animate={{\n          height: isExpanded ? \"100%\" : \"120px\",\n        }}\n        transition={{\n          duration: 0.15,\n          ease: glide,\n        }}\n        className={classNames(\n          \"flex flex-col gap-y-4\",\n          isExpandable && \"overflow-y-auto\",\n          isExpandable &&\n            !isExpanded &&\n            \"[mask-image:linear-gradient(180deg,#D9D9D9_45.42%,rgba(115,115,115,0)_100%)]\"\n        )}\n      >\n        <div className=\"flex items-center gap-x-2\">\n          {icon && <Icon name={icon?.name} size={icon?.size || 18} />}\n          <h1 className=\"font-mono font-medium text-current leading-none\">\n            {title}\n          </h1>\n        </div>\n        <p className=\"text-shade-primary leading-[160%] font-medium\">\n          {description}\n        </p>\n      </motion.div>\n    </motion.div>\n  );\n};\n"]}

package/dist/Alert.mjs

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+import { CrosshairCorners } from './CrossHair';
+import { useState } from 'react';
+import { glide } from './utils/easings';
+
+const Alert = ({
+  onClear,
+  isClearable,
+  isExpandable,
+  title,
+  description,
+  variant = "warning",
+  icon,
+  className,
+  animation
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      onClick: () => {
+        if (isExpandable) {
+          setIsExpanded(!isExpanded);
+        }
+      },
+      className: classNames(
+        "group p-6 relative bg-current/4 border border-current/15 shadow-[inset_0px_0px_32px]",
+        variant === "warning" && "text-brand-rust shadow-current/15",
+        isExpandable && "cursor-row-resize",
+        className
+      ),
+      ...animation,
+      children: [
+        isClearable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClear,
+            className: "z-10 flex items-center justify-center absolute top-2.5 right-2.5 h-[28px] w-[28px] bg-current/5 text-current hover:bg-current/10 active:scale-[0.97] transition-colors duration-100 ease-glide",
+            children: /* @__PURE__ */ jsx(Icon, { name: "Close", size: 12 })
+          }
+        ),
+        isExpandable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "text-shade-tertiary group-hover:text-shade-primary absolute inset-2.5 transition-all duration-100 ease-glide group-hover:inset-1"
+            ),
+            children: /* @__PURE__ */ jsx(
+              CrosshairCorners,
+              {
+                animationDelay: 0,
+                size: 8,
+                corners: ["bottom-right"]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: false,
+            animate: {
+              height: isExpanded ? "100%" : "120px"
+            },
+            transition: {
+              duration: 0.15,
+              ease: glide
+            },
+            className: classNames(
+              "flex flex-col gap-y-4",
+              isExpandable && "overflow-y-auto",
+              isExpandable && !isExpanded && "[mask-image:linear-gradient(180deg,#D9D9D9_45.42%,rgba(115,115,115,0)_100%)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+                icon && /* @__PURE__ */ jsx(Icon, { name: icon?.name, size: icon?.size || 18 }),
+                /* @__PURE__ */ jsx("h1", { className: "font-mono font-medium text-current leading-none", children: title })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-shade-primary leading-[160%] font-medium", children: description })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Alert };
+//# sourceMappingURL=Alert.mjs.map
+//# sourceMappingURL=Alert.mjs.map

package/dist/Alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Alert.tsx"],"names":[],"mappings":";;;;;;;;AAqBO,MAAM,QAAQ,CAAC;AAAA,EACpB,OAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAkB;AAChB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAElD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAS,MAAM;AACb,QAAA,IAAI,YAAA,EAAc;AAChB,UAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAW,UAAA;AAAA,QACT,sFAAA;AAAA,QACA,YAAY,SAAA,IAAa,mCAAA;AAAA,QACzB,YAAA,IAAgB,mBAAA;AAAA,QAChB;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,SAAA,EAAU,gMAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,MAAM,EAAA,EAAI;AAAA;AAAA,SAC/B;AAAA,QAED,YAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT;AAAA,aACF;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBACC,cAAA,EAAgB,CAAA;AAAA,gBAChB,IAAA,EAAM,CAAA;AAAA,gBACN,OAAA,EAAS,CAAC,cAAc;AAAA;AAAA;AAC1B;AAAA,SACF;AAAA,wBAEF,IAAA;AAAA,UAAC,MAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS,KAAA;AAAA,YACT,OAAA,EAAS;AAAA,cACP,MAAA,EAAQ,aAAa,MAAA,GAAS;AAAA,aAChC;AAAA,YACA,UAAA,EAAY;AAAA,cACV,QAAA,EAAU,IAAA;AAAA,cACV,IAAA,EAAM;AAAA,aACR;AAAA,YACA,SAAA,EAAW,UAAA;AAAA,cACT,uBAAA;AAAA,cACA,YAAA,IAAgB,iBAAA;AAAA,cAChB,YAAA,IACE,CAAC,UAAA,IACD;AAAA,aACJ;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,gBAAA,IAAA,oBAAQ,GAAA,CAAC,QAAK,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,QAAQ,EAAA,EAAI,CAAA;AAAA,gCACzD,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,iDAAA,EACX,QAAA,EAAA,KAAA,EACH;AAAA,eAAA,EACF,CAAA;AAAA,8BACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+CAAA,EACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"Alert.mjs","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { useState } from \"react\";\nimport { glide } from \"./utils/easings\";\n\nexport type AlertProps = {\n  title: string;\n  description: string;\n  variant?: \"warning\";\n  icon?: IconProps;\n  isExpandable?: boolean;\n  className?: string;\n  isClearable?: boolean;\n  onClear?: () => void;\n  animation?: MotionProps;\n};\n\nexport const Alert = ({\n  onClear,\n  isClearable,\n  isExpandable,\n  title,\n  description,\n  variant = \"warning\",\n  icon,\n  className,\n  animation,\n}: AlertProps) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <motion.div\n      onClick={() => {\n        if (isExpandable) {\n          setIsExpanded(!isExpanded);\n        }\n      }}\n      className={classNames(\n        \"group p-6 relative bg-current/4 border border-current/15 shadow-[inset_0px_0px_32px]\",\n        variant === \"warning\" && \"text-brand-rust shadow-current/15\",\n        isExpandable && \"cursor-row-resize\",\n        className\n      )}\n      {...animation}\n    >\n      {isClearable && (\n        <button\n          onClick={onClear}\n          className=\"z-10 flex items-center justify-center absolute top-2.5 right-2.5 h-[28px] w-[28px] bg-current/5 text-current hover:bg-current/10 active:scale-[0.97] transition-colors duration-100 ease-glide\"\n        >\n          <Icon name=\"Close\" size={12} />\n        </button>\n      )}\n      {isExpandable && (\n        <div\n          className={classNames(\n            \"text-shade-tertiary group-hover:text-shade-primary absolute inset-2.5 transition-all duration-100 ease-glide group-hover:inset-1\"\n          )}\n        >\n          <CrosshairCorners\n            animationDelay={0}\n            size={8}\n            corners={[\"bottom-right\"]}\n          />\n        </div>\n      )}\n      <motion.div\n        initial={false}\n        animate={{\n          height: isExpanded ? \"100%\" : \"120px\",\n        }}\n        transition={{\n          duration: 0.15,\n          ease: glide,\n        }}\n        className={classNames(\n          \"flex flex-col gap-y-4\",\n          isExpandable && \"overflow-y-auto\",\n          isExpandable &&\n            !isExpanded &&\n            \"[mask-image:linear-gradient(180deg,#D9D9D9_45.42%,rgba(115,115,115,0)_100%)]\"\n        )}\n      >\n        <div className=\"flex items-center gap-x-2\">\n          {icon && <Icon name={icon?.name} size={icon?.size || 18} />}\n          <h1 className=\"font-mono font-medium text-current leading-none\">\n            {title}\n          </h1>\n        </div>\n        <p className=\"text-shade-primary leading-[160%] font-medium\">\n          {description}\n        </p>\n      </motion.div>\n    </motion.div>\n  );\n};\n"]}

package/dist/Avatar.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as IconName } from './index-DWGhkMUQ.mjs';
+import { c as IconName } from './Icon-CTxwWbdC.mjs';
 import { MotionProps } from 'motion/react';
 import { BrandColour } from './utils/colours.mjs';
 
@@ -12,6 +12,6 @@ type AvatarProps = {
     thickness: number;
     animation?: MotionProps;
 };
-declare const Avatar: ({ className, icon, iconClassName, crosshair, thickness, animation, variant, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ className, icon, iconClassName, crosshair, thickness, variant, animation, }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 export { Avatar, type AvatarProps };

package/dist/Avatar.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as IconName } from './index-ekBNDG0H.js';
+import { c as IconName } from './Icon-llWd6yMa.js';
 import { MotionProps } from 'motion/react';
 import { BrandColour } from './utils/colours.js';
 
@@ -12,6 +12,6 @@ type AvatarProps = {
     thickness: number;
     animation?: MotionProps;
 };
-declare const Avatar: ({ className, icon, iconClassName, crosshair, thickness, animation, variant, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ className, icon, iconClassName, crosshair, thickness, variant, animation, }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 export { Avatar, type AvatarProps };

package/dist/Avatar.js

@@ -17,8 +17,8 @@ const Avatar = ({
   iconClassName,
   crosshair,
   thickness = 1.5,
-  animation,
-  variant
+  variant,
+  animation
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.motion.div,

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Avatar.tsx"],"names":["jsxs","motion","classNames","BRAND_COLOURS","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAiBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,SAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAWC,2BAAA;AAAA,QACT,0EAAA;AAAA,QAAA,CACC,SAAA,KAAc,SAAA,IAAa,SAAA,KAAc,OAAA,KAAY,KAAA;AAAA,QACtD,cAAc,UAAA,IAAc,WAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAOC,qBAAA,CAAc,OAAA,IAAW,WAAW;AAAA,OAC7C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,2BAAA;AAAA,cACT,+BAAA;AAAA,cACA,cAAc,UAAA,IAAc;AAAA,aAC9B;AAAA,YAEA,QAAA,kBAAAE,cAAA;AAAA,cAACC,0BAAA;AAAA,cAAA;AAAA,gBAEC,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAWH,4BAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,CAAA;AAAA,gBAChB,iBAAA,EAAmB,GAAA;AAAA,gBACnB,IAAA,EAAM;AAAA,eAAA;AAAA,cALD;AAAA;AAMP;AAAA,SACF;AAAA,wBACAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,kBAAAA,cAAA,CAACE,SAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAkB,SAAA,EAAW,aAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,EACpE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.js","sourcesContent":["import classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n  className?: string;\n  icon: IconName;\n  variant?: BrandColour;\n  iconClassName?: string;\n  crosshair?: \"corners\" | \"cross\" | \"bordered\";\n  thickness: number;\n  animation?: MotionProps;\n};\n\nexport const Avatar = ({\n  className,\n  icon,\n  iconClassName,\n  crosshair,\n  thickness = 1.5,\n  animation,\n  variant,\n}: AvatarProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"flex items-center justify-center relative border-current/15 bg-current/5\",\n        (crosshair === \"corners\" || crosshair === \"cross\") && \"p-2\",\n        crosshair === \"bordered\" && \"px-3 py-2\",\n        className\n      )}\n      style={{\n        borderWidth: thickness,\n        color: BRAND_COLOURS[variant ?? \"Secondary\"],\n      }}\n      {...animation}\n    >\n      <div\n        className={classNames(\n          \"text-current absolute inset-0\",\n          crosshair !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n        )}\n      >\n        <CrosshairCorners\n          key={icon}\n          variant={crosshair}\n          className={classNames(\"text-current\")}\n          animationDelay={0}\n          animationDuration={1.5}\n          size={6}\n        />\n      </div>\n      <div className=\"flex items-center justify-center h-[32px] w-[32px]\">\n        <Icon name={icon as IconName} className={iconClassName} size={24} />\n      </div>\n    </motion.div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Avatar.tsx"],"names":["jsxs","motion","classNames","BRAND_COLOURS","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAWC,2BAAA;AAAA,QACT,0EAAA;AAAA,QAAA,CACC,SAAA,KAAc,SAAA,IAAa,SAAA,KAAc,OAAA,KAAY,KAAA;AAAA,QACtD,cAAc,UAAA,IAAc,WAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAOC,qBAAA,CAAc,OAAA,IAAW,WAAW;AAAA,OAC7C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,2BAAA;AAAA,cACT,+BAAA;AAAA,cACA,cAAc,UAAA,IAAc;AAAA,aAC9B;AAAA,YAEA,QAAA,kBAAAE,cAAA;AAAA,cAACC,0BAAA;AAAA,cAAA;AAAA,gBAEC,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAWH,4BAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,CAAA;AAAA,gBAChB,iBAAA,EAAmB,GAAA;AAAA,gBACnB,IAAA,EAAM;AAAA,eAAA;AAAA,cALD;AAAA;AAMP;AAAA,SACF;AAAA,wBACAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,kBAAAA,cAAA,CAACE,SAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAkB,SAAA,EAAW,aAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,EACpE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n  className?: string;\n  icon: IconName;\n  variant?: BrandColour;\n  iconClassName?: string;\n  crosshair?: \"corners\" | \"cross\" | \"bordered\";\n  thickness: number;\n  animation?: MotionProps;\n};\n\nexport const Avatar = ({\n  className,\n  icon,\n  iconClassName,\n  crosshair,\n  thickness = 1.5,\n  variant,\n  animation,\n}: AvatarProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"flex items-center justify-center relative border-current/15 bg-current/5\",\n        (crosshair === \"corners\" || crosshair === \"cross\") && \"p-2\",\n        crosshair === \"bordered\" && \"px-3 py-2\",\n        className\n      )}\n      style={{\n        borderWidth: thickness,\n        color: BRAND_COLOURS[variant ?? \"Secondary\"],\n      }}\n      {...animation}\n    >\n      <div\n        className={classNames(\n          \"text-current absolute inset-0\",\n          crosshair !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n        )}\n      >\n        <CrosshairCorners\n          key={icon}\n          variant={crosshair}\n          className={classNames(\"text-current\")}\n          animationDelay={0}\n          animationDuration={1.5}\n          size={6}\n        />\n      </div>\n      <div className=\"flex items-center justify-center h-[32px] w-[32px]\">\n        <Icon name={icon as IconName} className={iconClassName} size={24} />\n      </div>\n    </motion.div>\n  );\n};\n"]}

package/dist/Avatar.mjs

@@ -11,8 +11,8 @@ const Avatar = ({
   iconClassName,
   crosshair,
   thickness = 1.5,
-  animation,
-  variant
+  variant,
+  animation
 }) => {
   return /* @__PURE__ */ jsxs(
     motion.div,

package/dist/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,SAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,0EAAA;AAAA,QAAA,CACC,SAAA,KAAc,SAAA,IAAa,SAAA,KAAc,OAAA,KAAY,KAAA;AAAA,QACtD,cAAc,UAAA,IAAc,WAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAO,aAAA,CAAc,OAAA,IAAW,WAAW;AAAA,OAC7C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,+BAAA;AAAA,cACA,cAAc,UAAA,IAAc;AAAA,aAC9B;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBAEC,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAW,WAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,CAAA;AAAA,gBAChB,iBAAA,EAAmB,GAAA;AAAA,gBACnB,IAAA,EAAM;AAAA,eAAA;AAAA,cALD;AAAA;AAMP;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAkB,SAAA,EAAW,aAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,EACpE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.mjs","sourcesContent":["import classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n  className?: string;\n  icon: IconName;\n  variant?: BrandColour;\n  iconClassName?: string;\n  crosshair?: \"corners\" | \"cross\" | \"bordered\";\n  thickness: number;\n  animation?: MotionProps;\n};\n\nexport const Avatar = ({\n  className,\n  icon,\n  iconClassName,\n  crosshair,\n  thickness = 1.5,\n  animation,\n  variant,\n}: AvatarProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"flex items-center justify-center relative border-current/15 bg-current/5\",\n        (crosshair === \"corners\" || crosshair === \"cross\") && \"p-2\",\n        crosshair === \"bordered\" && \"px-3 py-2\",\n        className\n      )}\n      style={{\n        borderWidth: thickness,\n        color: BRAND_COLOURS[variant ?? \"Secondary\"],\n      }}\n      {...animation}\n    >\n      <div\n        className={classNames(\n          \"text-current absolute inset-0\",\n          crosshair !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n        )}\n      >\n        <CrosshairCorners\n          key={icon}\n          variant={crosshair}\n          className={classNames(\"text-current\")}\n          animationDelay={0}\n          animationDuration={1.5}\n          size={6}\n        />\n      </div>\n      <div className=\"flex items-center justify-center h-[32px] w-[32px]\">\n        <Icon name={icon as IconName} className={iconClassName} size={24} />\n      </div>\n    </motion.div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,0EAAA;AAAA,QAAA,CACC,SAAA,KAAc,SAAA,IAAa,SAAA,KAAc,OAAA,KAAY,KAAA;AAAA,QACtD,cAAc,UAAA,IAAc,WAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAO,aAAA,CAAc,OAAA,IAAW,WAAW;AAAA,OAC7C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,+BAAA;AAAA,cACA,cAAc,UAAA,IAAc;AAAA,aAC9B;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBAEC,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAW,WAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,CAAA;AAAA,gBAChB,iBAAA,EAAmB,GAAA;AAAA,gBACnB,IAAA,EAAM;AAAA,eAAA;AAAA,cALD;AAAA;AAMP;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAkB,SAAA,EAAW,aAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,EACpE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.mjs","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n  className?: string;\n  icon: IconName;\n  variant?: BrandColour;\n  iconClassName?: string;\n  crosshair?: \"corners\" | \"cross\" | \"bordered\";\n  thickness: number;\n  animation?: MotionProps;\n};\n\nexport const Avatar = ({\n  className,\n  icon,\n  iconClassName,\n  crosshair,\n  thickness = 1.5,\n  variant,\n  animation,\n}: AvatarProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"flex items-center justify-center relative border-current/15 bg-current/5\",\n        (crosshair === \"corners\" || crosshair === \"cross\") && \"p-2\",\n        crosshair === \"bordered\" && \"px-3 py-2\",\n        className\n      )}\n      style={{\n        borderWidth: thickness,\n        color: BRAND_COLOURS[variant ?? \"Secondary\"],\n      }}\n      {...animation}\n    >\n      <div\n        className={classNames(\n          \"text-current absolute inset-0\",\n          crosshair !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n        )}\n      >\n        <CrosshairCorners\n          key={icon}\n          variant={crosshair}\n          className={classNames(\"text-current\")}\n          animationDelay={0}\n          animationDuration={1.5}\n          size={6}\n        />\n      </div>\n      <div className=\"flex items-center justify-center h-[32px] w-[32px]\">\n        <Icon name={icon as IconName} className={iconClassName} size={24} />\n      </div>\n    </motion.div>\n  );\n};\n"]}

package/dist/Badge.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MotionProps } from 'motion/react';
 import { BrandColour } from './utils/colours.mjs';
-import { a as IconProps } from './index-DWGhkMUQ.mjs';
+import { a as IconProps } from './Icon-CTxwWbdC.mjs';
 import { CrosshairCornersProps } from './CrossHair.mjs';
+import { MotionProps } from 'motion/react';
 
 type BadgeProps = {
     className?: string;
@@ -11,9 +11,9 @@ type BadgeProps = {
     icon?: IconProps;
     iconPosition?: "left" | "right";
     crosshair?: CrosshairCornersProps;
-    animation?: MotionProps;
     size?: "sm" | "md";
+    animation?: MotionProps;
 };
-declare const Badge: ({ className, variant, icon, crosshair, iconPosition, animation, label, size, }: BadgeProps) => react_jsx_runtime.JSX.Element;
+declare const Badge: ({ className, variant, icon, crosshair, iconPosition, label, size, animation, }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 export { Badge, type BadgeProps };

package/dist/Badge.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MotionProps } from 'motion/react';
 import { BrandColour } from './utils/colours.js';
-import { a as IconProps } from './index-ekBNDG0H.js';
+import { a as IconProps } from './Icon-llWd6yMa.js';
 import { CrosshairCornersProps } from './CrossHair.js';
+import { MotionProps } from 'motion/react';
 
 type BadgeProps = {
     className?: string;
@@ -11,9 +11,9 @@ type BadgeProps = {
     icon?: IconProps;
     iconPosition?: "left" | "right";
     crosshair?: CrosshairCornersProps;
-    animation?: MotionProps;
     size?: "sm" | "md";
+    animation?: MotionProps;
 };
-declare const Badge: ({ className, variant, icon, crosshair, iconPosition, animation, label, size, }: BadgeProps) => react_jsx_runtime.JSX.Element;
+declare const Badge: ({ className, variant, icon, crosshair, iconPosition, label, size, animation, }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 export { Badge, type BadgeProps };

package/dist/Badge.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('motion/react');
 var colours = require('./utils/colours');
 var Icon = require('./Icon');
 var classNames = require('classnames');
 var CrossHair = require('./CrossHair');
+var react = require('motion/react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -17,9 +17,9 @@ const Badge = ({
   icon,
   crosshair,
   iconPosition = "left",
-  animation,
   label,
-  size = "sm"
+  size = "sm",
+  animation
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.motion.div,

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Badge.tsx"],"names":["jsxs","motion","BRAND_COLOURS","classNames","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAkBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO;AACT,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,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;AAAA,QACV,YAAA,KAAiB,UAAU,KAAA,IAAS,aAAA;AAAA,QACpC,YAAA,KAAiB,WAAW,KAAA,IAAS,aAAA;AAAA,QACrC,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,OACJ;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,CAAA;AAAA,YAChB,iBAAA,EAAmB,GAAA;AAAA,YACnB,IAAA,EAAM;AAAA,WAAA;AAAA,UAND,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":["import { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\n\nexport type BadgeProps = {\n  className?: string;\n  label?: string;\n  variant?: BrandColour;\n  icon?: IconProps;\n  iconPosition?: \"left\" | \"right\";\n  crosshair?: CrosshairCornersProps;\n  animation?: MotionProps;\n  size?: \"sm\" | \"md\";\n};\n\nexport const Badge = ({\n  className,\n  variant,\n  icon,\n  crosshair,\n  iconPosition = \"left\",\n  animation,\n  label,\n  size = \"sm\",\n}: BadgeProps) => {\n  return (\n    <motion.div\n      style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n      className={classNames(\n        className,\n        \"shadow-[inset_0px_0px_6px] text-sm 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\",\n        !label && \"!p-2\",\n        iconPosition === \"left\" && label && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && \"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      )}\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={0}\n          animationDuration={1.5}\n          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","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,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;AAAA,QACV,YAAA,KAAiB,UAAU,KAAA,IAAS,aAAA;AAAA,QACpC,YAAA,KAAiB,WAAW,KAAA,IAAS,aAAA;AAAA,QACrC,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,OACJ;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,CAAA;AAAA,YAChB,iBAAA,EAAmB,GAAA;AAAA,YACnB,IAAA,EAAM;AAAA,WAAA;AAAA,UAND,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?: \"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        className,\n        \"shadow-[inset_0px_0px_6px] text-sm 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\",\n        !label && \"!p-2\",\n        iconPosition === \"left\" && label && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && \"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      )}\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={0}\n          animationDuration={1.5}\n          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"]}

package/dist/Badge.mjs

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { motion } from 'motion/react';
 import { BRAND_COLOURS } from './utils/colours';
 import { Icon } from './Icon';
 import classNames from 'classnames';
 import { CrosshairCorners } from './CrossHair';
+import { motion } from 'motion/react';
 
 const Badge = ({
   className,
@@ -11,9 +11,9 @@ const Badge = ({
   icon,
   crosshair,
   iconPosition = "left",
-  animation,
   label,
-  size = "sm"
+  size = "sm",
+  animation
 }) => {
   return /* @__PURE__ */ jsxs(
     motion.div,

package/dist/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Badge.tsx"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO;AACT,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,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;AAAA,QACV,YAAA,KAAiB,UAAU,KAAA,IAAS,aAAA;AAAA,QACpC,YAAA,KAAiB,WAAW,KAAA,IAAS,aAAA;AAAA,QACrC,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,OACJ;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,CAAA;AAAA,YAChB,iBAAA,EAAmB,GAAA;AAAA,YACnB,IAAA,EAAM;AAAA,WAAA;AAAA,UAND,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":["import { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\n\nexport type BadgeProps = {\n  className?: string;\n  label?: string;\n  variant?: BrandColour;\n  icon?: IconProps;\n  iconPosition?: \"left\" | \"right\";\n  crosshair?: CrosshairCornersProps;\n  animation?: MotionProps;\n  size?: \"sm\" | \"md\";\n};\n\nexport const Badge = ({\n  className,\n  variant,\n  icon,\n  crosshair,\n  iconPosition = \"left\",\n  animation,\n  label,\n  size = \"sm\",\n}: BadgeProps) => {\n  return (\n    <motion.div\n      style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n      className={classNames(\n        className,\n        \"shadow-[inset_0px_0px_6px] text-sm 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\",\n        !label && \"!p-2\",\n        iconPosition === \"left\" && label && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && \"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      )}\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={0}\n          animationDuration={1.5}\n          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":";;;;;;;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,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;AAAA,QACV,YAAA,KAAiB,UAAU,KAAA,IAAS,aAAA;AAAA,QACpC,YAAA,KAAiB,WAAW,KAAA,IAAS,aAAA;AAAA,QACrC,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,OACJ;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,CAAA;AAAA,YAChB,iBAAA,EAAmB,GAAA;AAAA,YACnB,IAAA,EAAM;AAAA,WAAA;AAAA,UAND,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?: \"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        className,\n        \"shadow-[inset_0px_0px_6px] text-sm 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\",\n        !label && \"!p-2\",\n        iconPosition === \"left\" && label && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && \"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      )}\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={0}\n          animationDuration={1.5}\n          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"]}

package/dist/Button.d.mts

@@ -2,7 +2,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 './index-DWGhkMUQ.mjs';
+import { c as IconName } from './Icon-CTxwWbdC.mjs';
 
 type ButtonProps = {
     className?: string;

package/dist/Button.d.ts

@@ -2,7 +2,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 './index-ekBNDG0H.js';
+import { c as IconName } from './Icon-llWd6yMa.js';
 
 type ButtonProps = {
     className?: string;

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":["import { 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  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\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\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}: 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        // 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 && (\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:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\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      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering}\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","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  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\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\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}: 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        // 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 && (\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:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\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      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering}\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"]}

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":"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","file":"Button.mjs","sourcesContent":["import { 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  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\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\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}: 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        // 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 && (\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:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\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      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering}\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":";;;;;;;;AAkCO,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;AACF,CAAA,KAAmB;AACjB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,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,EAAW,UAAA;AAAA;AAAA,QAET,oHAAA;AAAA;AAAA,QAEA,6EAAA;AAAA;AAAA,QAEA,YAAY,SAAA,IACV,mFAAA;AAAA,QACF,YAAY,WAAA,IACV,2FAAA;AAAA;AAAA,QAEF,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,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;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,0KAAA;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,kBAAA,GAAA;AAAA,cAAC,gBAAA;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,YAAA,KAAiB,MAAA,IAAU,IAAA,KAAS,IAAA,oBAC3C,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,IAAA,EAAM,OAAA,GAAU,SAAA,GAAY,IAAA,CAAK,IAAA;AAAA,YACjC,SAAA,EAAW,UAAA,CAAW,IAAA,CAAK,SAAA,EAAW,eAAe,CAAA;AAAA,YACrD,cAAc,IAAA,CAAK;AAAA;AAAA,SACrB;AAAA,QAED,CAAC,aAAa,KAAA,oBACb,GAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,MAAM,MAAA,GAAS,GAAA;AAAA,YACtB,UAAA;AAAA,YACA,IAAA,EAAM;AAAA;AAAA,SACR;AAAA,QAED,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,IAAA,KAAS,IAAA,oBAC5C,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,IAAA,EAAM,OAAA,GAAU,SAAA,GAAY,IAAA,CAAK,IAAA;AAAA,YACjC,SAAA,EAAW,UAAA,CAAW,IAAA,CAAK,SAAA,EAAW,eAAe,CAAA;AAAA,YACrD,cAAc,IAAA,CAAK;AAAA;AAAA;AACrB;AAAA;AAAA,GAEJ;AAEJ","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  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\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\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}: 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        // 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 && (\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:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\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      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering}\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"]}