@blueshift-gg/ui-components 0.1.18 → 0.1.20

package/dist/Alert.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-_eAGhkdn.mjs';
+import { a as IconProps } from './Icon-D0R9Y5U4.mjs';
 import './utils/colours.mjs';
 
 type AlertProps = {

package/dist/Alert.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-DTD8APSk.js';
+import { a as IconProps } from './Icon-Xhwol1Zj.js';
 import './utils/colours.js';
 
 type AlertProps = {

package/dist/Avatar.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-_eAGhkdn.mjs';
+import { a as IconProps } from './Icon-D0R9Y5U4.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-DTD8APSk.js';
+import { a as IconProps } from './Icon-Xhwol1Zj.js';
 import { CrosshairCornersProps } from './CrossHair.js';
 import { MotionProps } from 'motion/react';
 import { BrandColour } from './utils/colours.js';

package/dist/Badge.d.mts

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

package/dist/Badge.d.ts

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

package/dist/Badge.js

@@ -26,15 +26,15 @@ const Badge = ({
     {
       style: { color: colours.BRAND_COLOURS[variant ?? "Secondary"] },
       className: classNames__default.default(
-        className,
         "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",
         size === "md" && "!py-2",
-        !label && "!p-2",
+        !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",
         crosshair?.variant === "bordered" && label && iconPosition === "left" && "pl-2.5 pr-3",
-        crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5"
+        crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5",
+        className
       ),
       ...animation,
       children: [

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,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;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,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,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?: \"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        !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      )}\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","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,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;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?: \"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] 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 !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"]}

package/dist/Badge.mjs

@@ -20,15 +20,15 @@ const Badge = ({
     {
       style: { color: BRAND_COLOURS[variant ?? "Secondary"] },
       className: classNames(
-        className,
         "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",
         size === "md" && "!py-2",
-        !label && "!p-2",
+        !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",
         crosshair?.variant === "bordered" && label && iconPosition === "left" && "pl-2.5 pr-3",
-        crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5"
+        crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5",
+        className
       ),
       ...animation,
       children: [

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,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;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,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,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?: \"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        !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      )}\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":";;;;;;;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,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;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?: \"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] 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 !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"]}

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 './Icon-_eAGhkdn.mjs';
+import { c as IconName } from './Icon-D0R9Y5U4.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 './Icon-DTD8APSk.js';
+import { c as IconName } from './Icon-Xhwol1Zj.js';
 
 type ButtonProps = {
     className?: string;

package/dist/Dropdown.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-_eAGhkdn.mjs';
+import { a as IconProps } from './Icon-D0R9Y5U4.mjs';
 import './utils/colours.mjs';
 
 type DropdownOption = {

package/dist/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-DTD8APSk.js';
+import { a as IconProps } from './Icon-Xhwol1Zj.js';
 import './utils/colours.js';
 
 type DropdownOption = {

package/dist/{Icon-_eAGhkdn.d.mts → Icon-D0R9Y5U4.d.mts}

@@ -74,6 +74,8 @@ declare const IconComponents: {
     readonly Solflare: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
     readonly Brave: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
     readonly User: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly Metamask: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly Backpack: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
 };
 declare const iconMetadata: Partial<Record<IconName, {
     category: "brand" | "state" | "ui" | "socials";

package/dist/{Icon-DTD8APSk.d.ts → Icon-Xhwol1Zj.d.ts}

@@ -74,6 +74,8 @@ declare const IconComponents: {
     readonly Solflare: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
     readonly Brave: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
     readonly User: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly Metamask: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly Backpack: ({ className, size }: IconProps) => react_jsx_runtime.JSX.Element;
 };
 declare const iconMetadata: Partial<Record<IconName, {
     category: "brand" | "state" | "ui" | "socials";

package/dist/Icon.d.mts

@@ -1,3 +1,3 @@
 import 'react/jsx-runtime';
 import './utils/colours.mjs';
-export { I as Icon, b as IconComponents, c as IconName, a as IconProps, i as iconMetadata } from './Icon-_eAGhkdn.mjs';
+export { I as Icon, b as IconComponents, c as IconName, a as IconProps, i as iconMetadata } from './Icon-D0R9Y5U4.mjs';

package/dist/Icon.d.ts

@@ -1,3 +1,3 @@
 import 'react/jsx-runtime';
 import './utils/colours.js';
-export { I as Icon, b as IconComponents, c as IconName, a as IconProps, i as iconMetadata } from './Icon-DTD8APSk.js';
+export { I as Icon, b as IconComponents, c as IconName, a as IconProps, i as iconMetadata } from './Icon-Xhwol1Zj.js';

package/dist/Input.d.mts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MotionProps } from 'motion/react';
-import { c as IconName } from './Icon-_eAGhkdn.mjs';
+import { c as IconName } from './Icon-D0R9Y5U4.mjs';
 import { BadgeProps } from './Badge.mjs';
 import { TooltipProps } from './Tooltip.mjs';
 import './utils/colours.mjs';
 import './CrossHair.mjs';
 
 type InputProps = {
-    title: string;
+    title?: string;
     value: string;
     className?: string;
     onChange?: (value: string) => void;
@@ -32,7 +32,8 @@ type InputProps = {
     };
     animation?: MotionProps;
     tooltip?: TooltipProps;
+    children?: React.ReactNode;
 };
-declare const Input: ({ title, value, className, onChange, onFocus, onBlur, onClear, badge, type, message, hasMessage, disabled, placeholder, isValid, balance, action, animation, tooltip, }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ title, value, className, onChange, onFocus, onBlur, onClear, badge, type, message, hasMessage, disabled, placeholder, isValid, balance, action, animation, tooltip, children, }: InputProps) => react_jsx_runtime.JSX.Element;
 
 export { Input, type InputProps };

package/dist/Input.d.ts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MotionProps } from 'motion/react';
-import { c as IconName } from './Icon-DTD8APSk.js';
+import { c as IconName } from './Icon-Xhwol1Zj.js';
 import { BadgeProps } from './Badge.js';
 import { TooltipProps } from './Tooltip.js';
 import './utils/colours.js';
 import './CrossHair.js';
 
 type InputProps = {
-    title: string;
+    title?: string;
     value: string;
     className?: string;
     onChange?: (value: string) => void;
@@ -32,7 +32,8 @@ type InputProps = {
     };
     animation?: MotionProps;
     tooltip?: TooltipProps;
+    children?: React.ReactNode;
 };
-declare const Input: ({ title, value, className, onChange, onFocus, onBlur, onClear, badge, type, message, hasMessage, disabled, placeholder, isValid, balance, action, animation, tooltip, }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ title, value, className, onChange, onFocus, onBlur, onClear, badge, type, message, hasMessage, disabled, placeholder, isValid, balance, action, animation, tooltip, children, }: InputProps) => react_jsx_runtime.JSX.Element;
 
 export { Input, type InputProps };

package/dist/Input.js

@@ -33,7 +33,8 @@ const Input = ({
   balance,
   action,
   animation,
-  tooltip
+  tooltip,
+  children
 }) => {
   const [isTooltipOpen, setIsTooltipOpen] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -45,7 +46,7 @@ const Input = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-1 flex items-center justify-between w-full", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-1 flex items-center justify-between w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-shade-primary leading-[100%]", children: title }),
             tooltip && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -88,13 +89,14 @@ const Input = ({
           "div",
           {
             className: classNames__default.default(
-              "min-h-[44px] relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border focus-within:border-current/20 focus-within:bg-current/2 focus-within:shadow-[inset_0px_0px_12px] focus-within:shadow-current/10 transition-colors duration-100 ease-crisp",
+              "min-h-[44px] pr-4 relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border enabled:focus-within:border-current/20 enabled:focus-within:bg-current/2 enabled:focus-within:shadow-[inset_0px_0px_12px] enabled:focus-within:shadow-current/10 transition-colors duration-100 ease-crisp",
               !isValid && "border-state-error/20 text-state-error",
               !!badge && "pl-1.5 pr-[10px]",
-              !badge && "pl-3 pr-4"
+              !badge && "pl-3 pr-4",
+              !!children && "!pr-1.5"
             ),
             children: [
-              onFocus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-1.5 text-shade-mute group-hover/input:text-shade-primary group-focus-within/input:inset-0.5 group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide", children: /* @__PURE__ */ jsxRuntime.jsx(
+              onFocus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-1.5 text-shade-mute enabled:group-hover/input:text-shade-primary enabled:group-focus-within/input:inset-0.5 enabled:group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide", children: /* @__PURE__ */ jsxRuntime.jsx(
                 CrossHair.CrosshairCorners,
                 {
                   size: 6,
@@ -146,6 +148,7 @@ const Input = ({
                         )
                       }
                     ),
+                    children && children,
                     action && /* @__PURE__ */ jsxRuntime.jsx(
                       Button.Button,
                       {

package/dist/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Input.tsx"],"names":["useState","jsxs","motion","classNames","jsx","Tooltip","Icon","CrosshairCorners","Badge","Button","AnimatePresence","crisp"],"mappings":"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","file":"Input.js","sourcesContent":["\"use client\";\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconName, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { crisp } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { useState } from \"react\";\n\nexport type InputProps = {\n  title: string;\n  value: string;\n  className?: string;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onClear?: () => void;\n  badge?: BadgeProps;\n  message?: string;\n  hasMessage?: boolean;\n  disabled?: boolean;\n  placeholder?: string;\n  isValid?: boolean;\n  type?: \"generic\" | \"value\";\n  balance?: {\n    amount: string;\n    unit: string;\n    icon?: IconName;\n  };\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n  animation?: MotionProps;\n  tooltip?: TooltipProps;\n};\n\nexport const Input = ({\n  title,\n  value,\n  className,\n  onChange,\n  onFocus,\n  onBlur,\n  onClear,\n  badge,\n  type,\n  message,\n  hasMessage = true,\n  disabled,\n  placeholder,\n  isValid = true,\n  balance,\n  action,\n  animation,\n  tooltip,\n}: InputProps) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  return (\n    <motion.div\n      {...animation}\n      className={classNames(\n        \"flex flex-col gap-y-2.5 w-full relative group/input\",\n        className\n      )}\n    >\n      <div className=\"px-1 flex items-center justify-between w-full\">\n        <div className=\"flex items-center gap-x-1.5\">\n          <span className=\"font-medium text-shade-primary leading-[100%]\">\n            {title}\n          </span>\n          {tooltip && (\n            <div\n              className=\"h-[14px] w-[14px] relative\"\n              onMouseEnter={() => setIsTooltipOpen(true)}\n              onMouseLeave={() => setIsTooltipOpen(false)}\n            >\n              <Tooltip\n                isOpen={isTooltipOpen}\n                position={tooltip.position}\n                description={tooltip.description}\n              />\n              <Icon name=\"Info\" size={14} className=\"text-shade-tertiary\" />\n            </div>\n          )}\n        </div>\n        {balance && (\n          <div className=\"flex items-center gap-x-1.5\">\n            <Icon\n              name={balance.icon as IconName}\n              size={12}\n              className=\"text-shade-tertiary\"\n            />\n            <span className=\"font-medium text-shade-primary leading-[100%] text-sm font-mono\">\n              {balance.amount} {balance.unit}\n            </span>\n          </div>\n        )}\n      </div>\n      <div\n        className={classNames(\n          \"min-h-[44px] relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border focus-within:border-current/20 focus-within:bg-current/2 focus-within:shadow-[inset_0px_0px_12px] focus-within:shadow-current/10 transition-colors duration-100 ease-crisp\",\n          !isValid && \"border-state-error/20 text-state-error\",\n          !!badge && \"pl-1.5 pr-[10px]\",\n          !badge && \"pl-3 pr-4\"\n        )}\n      >\n        {onFocus && (\n          <div className=\"pointer-events-none absolute inset-1.5 text-shade-mute group-hover/input:text-shade-primary group-focus-within/input:inset-0.5 group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide\">\n            <CrosshairCorners\n              size={6}\n              variant=\"corners\"\n              corners={[\"bottom-right\"]}\n              animationDelay={0}\n              animationDuration={0.75}\n            />\n          </div>\n        )}\n        <div\n          className={classNames(\n            \"flex w-full items-center gap-x-3 text-shade-primary\"\n          )}\n        >\n          {badge && <Badge {...badge} />}\n          <input\n            className={classNames(\n              \"h-full w-full flex-shrink font-medium focus:outline-none bg-transparent placeholder:text-shade-mute\",\n              type === \"value\" && \"text-2xl font-mono text-right\",\n              // Hide buttons\n              \"[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            )}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            value={value}\n            onChange={(e) => onChange?.(e.target.value)}\n            disabled={disabled}\n            type={type === \"value\" ? \"number\" : \"text\"}\n          />\n          {onClear && value && (\n            <button\n              onClick={onClear}\n              className=\"absolute right-2 p-2 hover:bg-border-light/50 transition-colors duration-100 ease-crisp\"\n              type=\"button\"\n            >\n              <Icon\n                name=\"Close\"\n                size={12}\n                className=\"text-shade-tertiary hover:text-shade-primary transition-colors duration-100 ease-crisp\"\n              />\n            </button>\n          )}\n          {action && (\n            <Button\n              label={action.label}\n              onClick={action.onClick}\n              variant=\"secondary\"\n              size=\"xs\"\n              useHoverEffect={false}\n            />\n          )}\n        </div>\n      </div>\n      {hasMessage && (\n        <div className=\"h-[14px] ml-auto px-1\">\n          <AnimatePresence>\n            {message && (\n              <motion.span\n                initial={{ opacity: 0, filter: \"blur(4px)\" }}\n                animate={{ opacity: 1, filter: \"blur(0px)\" }}\n                exit={{ opacity: 0, filter: \"blur(4px)\" }}\n                transition={{ duration: 0.1, ease: crisp }}\n                className={classNames(\n                  \"text-sm text-shade-secondary font-medium leading-[100%]\",\n                  !isValid && \"text-state-error\"\n                )}\n              >\n                {message}\n              </motion.span>\n            )}\n          </AnimatePresence>\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Input.tsx"],"names":["useState","jsxs","motion","classNames","jsx","Tooltip","Icon","CrosshairCorners","Badge","Button","AnimatePresence","crisp"],"mappings":"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","file":"Input.js","sourcesContent":["\"use client\";\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconName, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { crisp } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { useState } from \"react\";\n\nexport type InputProps = {\n  title?: string;\n  value: string;\n  className?: string;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onClear?: () => void;\n  badge?: BadgeProps;\n  message?: string;\n  hasMessage?: boolean;\n  disabled?: boolean;\n  placeholder?: string;\n  isValid?: boolean;\n  type?: \"generic\" | \"value\";\n  balance?: {\n    amount: string;\n    unit: string;\n    icon?: IconName;\n  };\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n  animation?: MotionProps;\n  tooltip?: TooltipProps;\n  children?: React.ReactNode;\n};\n\nexport const Input = ({\n  title,\n  value,\n  className,\n  onChange,\n  onFocus,\n  onBlur,\n  onClear,\n  badge,\n  type,\n  message,\n  hasMessage = true,\n  disabled,\n  placeholder,\n  isValid = true,\n  balance,\n  action,\n  animation,\n  tooltip,\n  children,\n}: InputProps) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  return (\n    <motion.div\n      {...animation}\n      className={classNames(\n        \"flex flex-col gap-y-2.5 w-full relative group/input\",\n        className\n      )}\n    >\n      {title && (\n        <div className=\"px-1 flex items-center justify-between w-full\">\n          <div className=\"flex items-center gap-x-1.5\">\n            <span className=\"font-medium text-shade-primary leading-[100%]\">\n              {title}\n            </span>\n            {tooltip && (\n              <div\n                className=\"h-[14px] w-[14px] relative\"\n                onMouseEnter={() => setIsTooltipOpen(true)}\n                onMouseLeave={() => setIsTooltipOpen(false)}\n              >\n                <Tooltip\n                  isOpen={isTooltipOpen}\n                  position={tooltip.position}\n                  description={tooltip.description}\n                />\n                <Icon name=\"Info\" size={14} className=\"text-shade-tertiary\" />\n              </div>\n            )}\n          </div>\n          {balance && (\n            <div className=\"flex items-center gap-x-1.5\">\n              <Icon\n                name={balance.icon as IconName}\n                size={12}\n                className=\"text-shade-tertiary\"\n              />\n              <span className=\"font-medium text-shade-primary leading-[100%] text-sm font-mono\">\n                {balance.amount} {balance.unit}\n              </span>\n            </div>\n          )}\n        </div>\n      )}\n      <div\n        className={classNames(\n          \"min-h-[44px] pr-4 relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border enabled:focus-within:border-current/20 enabled:focus-within:bg-current/2 enabled:focus-within:shadow-[inset_0px_0px_12px] enabled:focus-within:shadow-current/10 transition-colors duration-100 ease-crisp\",\n          !isValid && \"border-state-error/20 text-state-error\",\n          !!badge && \"pl-1.5 pr-[10px]\",\n          !badge && \"pl-3 pr-4\",\n          !!children && \"!pr-1.5\"\n        )}\n      >\n        {onFocus && (\n          <div className=\"pointer-events-none absolute inset-1.5 text-shade-mute enabled:group-hover/input:text-shade-primary enabled:group-focus-within/input:inset-0.5 enabled:group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide\">\n            <CrosshairCorners\n              size={6}\n              variant=\"corners\"\n              corners={[\"bottom-right\"]}\n              animationDelay={0}\n              animationDuration={0.75}\n            />\n          </div>\n        )}\n        <div\n          className={classNames(\n            \"flex w-full items-center gap-x-3 text-shade-primary\"\n          )}\n        >\n          {badge && <Badge {...badge} />}\n          <input\n            className={classNames(\n              \"h-full w-full flex-shrink font-medium focus:outline-none bg-transparent placeholder:text-shade-mute\",\n              type === \"value\" && \"text-2xl font-mono text-right\",\n              // Hide buttons\n              \"[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            )}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            value={value}\n            onChange={(e) => onChange?.(e.target.value)}\n            disabled={disabled}\n            type={type === \"value\" ? \"number\" : \"text\"}\n          />\n          {onClear && value && (\n            <button\n              onClick={onClear}\n              className=\"absolute right-2 p-2 hover:bg-border-light/50 transition-colors duration-100 ease-crisp\"\n              type=\"button\"\n            >\n              <Icon\n                name=\"Close\"\n                size={12}\n                className=\"text-shade-tertiary hover:text-shade-primary transition-colors duration-100 ease-crisp\"\n              />\n            </button>\n          )}\n          {children && children}\n          {action && (\n            <Button\n              label={action.label}\n              onClick={action.onClick}\n              variant=\"secondary\"\n              size=\"xs\"\n              useHoverEffect={false}\n            />\n          )}\n        </div>\n      </div>\n      {hasMessage && (\n        <div className=\"h-[14px] ml-auto px-1\">\n          <AnimatePresence>\n            {message && (\n              <motion.span\n                initial={{ opacity: 0, filter: \"blur(4px)\" }}\n                animate={{ opacity: 1, filter: \"blur(0px)\" }}\n                exit={{ opacity: 0, filter: \"blur(4px)\" }}\n                transition={{ duration: 0.1, ease: crisp }}\n                className={classNames(\n                  \"text-sm text-shade-secondary font-medium leading-[100%]\",\n                  !isValid && \"text-state-error\"\n                )}\n              >\n                {message}\n              </motion.span>\n            )}\n          </AnimatePresence>\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"]}

package/dist/Input.mjs

@@ -27,7 +27,8 @@ const Input = ({
   balance,
   action,
   animation,
-  tooltip
+  tooltip,
+  children
 }) => {
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
   return /* @__PURE__ */ jsxs(
@@ -39,7 +40,7 @@ const Input = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "px-1 flex items-center justify-between w-full", children: [
+        title && /* @__PURE__ */ jsxs("div", { className: "px-1 flex items-center justify-between w-full", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1.5", children: [
             /* @__PURE__ */ jsx("span", { className: "font-medium text-shade-primary leading-[100%]", children: title }),
             tooltip && /* @__PURE__ */ jsxs(
@@ -82,13 +83,14 @@ const Input = ({
           "div",
           {
             className: classNames(
-              "min-h-[44px] relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border focus-within:border-current/20 focus-within:bg-current/2 focus-within:shadow-[inset_0px_0px_12px] focus-within:shadow-current/10 transition-colors duration-100 ease-crisp",
+              "min-h-[44px] pr-4 relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border enabled:focus-within:border-current/20 enabled:focus-within:bg-current/2 enabled:focus-within:shadow-[inset_0px_0px_12px] enabled:focus-within:shadow-current/10 transition-colors duration-100 ease-crisp",
               !isValid && "border-state-error/20 text-state-error",
               !!badge && "pl-1.5 pr-[10px]",
-              !badge && "pl-3 pr-4"
+              !badge && "pl-3 pr-4",
+              !!children && "!pr-1.5"
             ),
             children: [
-              onFocus && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-1.5 text-shade-mute group-hover/input:text-shade-primary group-focus-within/input:inset-0.5 group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide", children: /* @__PURE__ */ jsx(
+              onFocus && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-1.5 text-shade-mute enabled:group-hover/input:text-shade-primary enabled:group-focus-within/input:inset-0.5 enabled:group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide", children: /* @__PURE__ */ jsx(
                 CrosshairCorners,
                 {
                   size: 6,
@@ -140,6 +142,7 @@ const Input = ({
                         )
                       }
                     ),
+                    children && children,
                     action && /* @__PURE__ */ jsx(
                       Button,
                       {

package/dist/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Input.tsx"],"names":[],"mappings":"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","file":"Input.mjs","sourcesContent":["\"use client\";\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconName, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { crisp } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { useState } from \"react\";\n\nexport type InputProps = {\n  title: string;\n  value: string;\n  className?: string;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onClear?: () => void;\n  badge?: BadgeProps;\n  message?: string;\n  hasMessage?: boolean;\n  disabled?: boolean;\n  placeholder?: string;\n  isValid?: boolean;\n  type?: \"generic\" | \"value\";\n  balance?: {\n    amount: string;\n    unit: string;\n    icon?: IconName;\n  };\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n  animation?: MotionProps;\n  tooltip?: TooltipProps;\n};\n\nexport const Input = ({\n  title,\n  value,\n  className,\n  onChange,\n  onFocus,\n  onBlur,\n  onClear,\n  badge,\n  type,\n  message,\n  hasMessage = true,\n  disabled,\n  placeholder,\n  isValid = true,\n  balance,\n  action,\n  animation,\n  tooltip,\n}: InputProps) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  return (\n    <motion.div\n      {...animation}\n      className={classNames(\n        \"flex flex-col gap-y-2.5 w-full relative group/input\",\n        className\n      )}\n    >\n      <div className=\"px-1 flex items-center justify-between w-full\">\n        <div className=\"flex items-center gap-x-1.5\">\n          <span className=\"font-medium text-shade-primary leading-[100%]\">\n            {title}\n          </span>\n          {tooltip && (\n            <div\n              className=\"h-[14px] w-[14px] relative\"\n              onMouseEnter={() => setIsTooltipOpen(true)}\n              onMouseLeave={() => setIsTooltipOpen(false)}\n            >\n              <Tooltip\n                isOpen={isTooltipOpen}\n                position={tooltip.position}\n                description={tooltip.description}\n              />\n              <Icon name=\"Info\" size={14} className=\"text-shade-tertiary\" />\n            </div>\n          )}\n        </div>\n        {balance && (\n          <div className=\"flex items-center gap-x-1.5\">\n            <Icon\n              name={balance.icon as IconName}\n              size={12}\n              className=\"text-shade-tertiary\"\n            />\n            <span className=\"font-medium text-shade-primary leading-[100%] text-sm font-mono\">\n              {balance.amount} {balance.unit}\n            </span>\n          </div>\n        )}\n      </div>\n      <div\n        className={classNames(\n          \"min-h-[44px] relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border focus-within:border-current/20 focus-within:bg-current/2 focus-within:shadow-[inset_0px_0px_12px] focus-within:shadow-current/10 transition-colors duration-100 ease-crisp\",\n          !isValid && \"border-state-error/20 text-state-error\",\n          !!badge && \"pl-1.5 pr-[10px]\",\n          !badge && \"pl-3 pr-4\"\n        )}\n      >\n        {onFocus && (\n          <div className=\"pointer-events-none absolute inset-1.5 text-shade-mute group-hover/input:text-shade-primary group-focus-within/input:inset-0.5 group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide\">\n            <CrosshairCorners\n              size={6}\n              variant=\"corners\"\n              corners={[\"bottom-right\"]}\n              animationDelay={0}\n              animationDuration={0.75}\n            />\n          </div>\n        )}\n        <div\n          className={classNames(\n            \"flex w-full items-center gap-x-3 text-shade-primary\"\n          )}\n        >\n          {badge && <Badge {...badge} />}\n          <input\n            className={classNames(\n              \"h-full w-full flex-shrink font-medium focus:outline-none bg-transparent placeholder:text-shade-mute\",\n              type === \"value\" && \"text-2xl font-mono text-right\",\n              // Hide buttons\n              \"[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            )}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            value={value}\n            onChange={(e) => onChange?.(e.target.value)}\n            disabled={disabled}\n            type={type === \"value\" ? \"number\" : \"text\"}\n          />\n          {onClear && value && (\n            <button\n              onClick={onClear}\n              className=\"absolute right-2 p-2 hover:bg-border-light/50 transition-colors duration-100 ease-crisp\"\n              type=\"button\"\n            >\n              <Icon\n                name=\"Close\"\n                size={12}\n                className=\"text-shade-tertiary hover:text-shade-primary transition-colors duration-100 ease-crisp\"\n              />\n            </button>\n          )}\n          {action && (\n            <Button\n              label={action.label}\n              onClick={action.onClick}\n              variant=\"secondary\"\n              size=\"xs\"\n              useHoverEffect={false}\n            />\n          )}\n        </div>\n      </div>\n      {hasMessage && (\n        <div className=\"h-[14px] ml-auto px-1\">\n          <AnimatePresence>\n            {message && (\n              <motion.span\n                initial={{ opacity: 0, filter: \"blur(4px)\" }}\n                animate={{ opacity: 1, filter: \"blur(0px)\" }}\n                exit={{ opacity: 0, filter: \"blur(4px)\" }}\n                transition={{ duration: 0.1, ease: crisp }}\n                className={classNames(\n                  \"text-sm text-shade-secondary font-medium leading-[100%]\",\n                  !isValid && \"text-state-error\"\n                )}\n              >\n                {message}\n              </motion.span>\n            )}\n          </AnimatePresence>\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Input.tsx"],"names":[],"mappings":"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","file":"Input.mjs","sourcesContent":["\"use client\";\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconName, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { crisp } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { useState } from \"react\";\n\nexport type InputProps = {\n  title?: string;\n  value: string;\n  className?: string;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onClear?: () => void;\n  badge?: BadgeProps;\n  message?: string;\n  hasMessage?: boolean;\n  disabled?: boolean;\n  placeholder?: string;\n  isValid?: boolean;\n  type?: \"generic\" | \"value\";\n  balance?: {\n    amount: string;\n    unit: string;\n    icon?: IconName;\n  };\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n  animation?: MotionProps;\n  tooltip?: TooltipProps;\n  children?: React.ReactNode;\n};\n\nexport const Input = ({\n  title,\n  value,\n  className,\n  onChange,\n  onFocus,\n  onBlur,\n  onClear,\n  badge,\n  type,\n  message,\n  hasMessage = true,\n  disabled,\n  placeholder,\n  isValid = true,\n  balance,\n  action,\n  animation,\n  tooltip,\n  children,\n}: InputProps) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  return (\n    <motion.div\n      {...animation}\n      className={classNames(\n        \"flex flex-col gap-y-2.5 w-full relative group/input\",\n        className\n      )}\n    >\n      {title && (\n        <div className=\"px-1 flex items-center justify-between w-full\">\n          <div className=\"flex items-center gap-x-1.5\">\n            <span className=\"font-medium text-shade-primary leading-[100%]\">\n              {title}\n            </span>\n            {tooltip && (\n              <div\n                className=\"h-[14px] w-[14px] relative\"\n                onMouseEnter={() => setIsTooltipOpen(true)}\n                onMouseLeave={() => setIsTooltipOpen(false)}\n              >\n                <Tooltip\n                  isOpen={isTooltipOpen}\n                  position={tooltip.position}\n                  description={tooltip.description}\n                />\n                <Icon name=\"Info\" size={14} className=\"text-shade-tertiary\" />\n              </div>\n            )}\n          </div>\n          {balance && (\n            <div className=\"flex items-center gap-x-1.5\">\n              <Icon\n                name={balance.icon as IconName}\n                size={12}\n                className=\"text-shade-tertiary\"\n              />\n              <span className=\"font-medium text-shade-primary leading-[100%] text-sm font-mono\">\n                {balance.amount} {balance.unit}\n              </span>\n            </div>\n          )}\n        </div>\n      )}\n      <div\n        className={classNames(\n          \"min-h-[44px] pr-4 relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border enabled:focus-within:border-current/20 enabled:focus-within:bg-current/2 enabled:focus-within:shadow-[inset_0px_0px_12px] enabled:focus-within:shadow-current/10 transition-colors duration-100 ease-crisp\",\n          !isValid && \"border-state-error/20 text-state-error\",\n          !!badge && \"pl-1.5 pr-[10px]\",\n          !badge && \"pl-3 pr-4\",\n          !!children && \"!pr-1.5\"\n        )}\n      >\n        {onFocus && (\n          <div className=\"pointer-events-none absolute inset-1.5 text-shade-mute enabled:group-hover/input:text-shade-primary enabled:group-focus-within/input:inset-0.5 enabled:group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide\">\n            <CrosshairCorners\n              size={6}\n              variant=\"corners\"\n              corners={[\"bottom-right\"]}\n              animationDelay={0}\n              animationDuration={0.75}\n            />\n          </div>\n        )}\n        <div\n          className={classNames(\n            \"flex w-full items-center gap-x-3 text-shade-primary\"\n          )}\n        >\n          {badge && <Badge {...badge} />}\n          <input\n            className={classNames(\n              \"h-full w-full flex-shrink font-medium focus:outline-none bg-transparent placeholder:text-shade-mute\",\n              type === \"value\" && \"text-2xl font-mono text-right\",\n              // Hide buttons\n              \"[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            )}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            value={value}\n            onChange={(e) => onChange?.(e.target.value)}\n            disabled={disabled}\n            type={type === \"value\" ? \"number\" : \"text\"}\n          />\n          {onClear && value && (\n            <button\n              onClick={onClear}\n              className=\"absolute right-2 p-2 hover:bg-border-light/50 transition-colors duration-100 ease-crisp\"\n              type=\"button\"\n            >\n              <Icon\n                name=\"Close\"\n                size={12}\n                className=\"text-shade-tertiary hover:text-shade-primary transition-colors duration-100 ease-crisp\"\n              />\n            </button>\n          )}\n          {children && children}\n          {action && (\n            <Button\n              label={action.label}\n              onClick={action.onClick}\n              variant=\"secondary\"\n              size=\"xs\"\n              useHoverEffect={false}\n            />\n          )}\n        </div>\n      </div>\n      {hasMessage && (\n        <div className=\"h-[14px] ml-auto px-1\">\n          <AnimatePresence>\n            {message && (\n              <motion.span\n                initial={{ opacity: 0, filter: \"blur(4px)\" }}\n                animate={{ opacity: 1, filter: \"blur(0px)\" }}\n                exit={{ opacity: 0, filter: \"blur(4px)\" }}\n                transition={{ duration: 0.1, ease: crisp }}\n                className={classNames(\n                  \"text-sm text-shade-secondary font-medium leading-[100%]\",\n                  !isValid && \"text-state-error\"\n                )}\n              >\n                {message}\n              </motion.span>\n            )}\n          </AnimatePresence>\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"]}

package/dist/Slider.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-_eAGhkdn.mjs';
+import { a as IconProps } from './Icon-D0R9Y5U4.mjs';
 import './utils/colours.mjs';
 
 type SliderProps = {

package/dist/Slider.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-DTD8APSk.js';
+import { a as IconProps } from './Icon-Xhwol1Zj.js';
 import './utils/colours.js';
 
 type SliderProps = {

package/dist/Tabs.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-_eAGhkdn.mjs';
+import { a as IconProps } from './Icon-D0R9Y5U4.mjs';
 import './utils/colours.mjs';
 
 type TabsProps = {
@@ -13,12 +13,15 @@ type TabsProps = {
         disabled?: boolean;
         selected?: boolean;
         onClick?: () => void;
+        children?: React.ReactNode;
+        className?: string;
     }[];
     theme: "primary" | "secondary";
     animation?: MotionProps;
     stretch?: boolean;
     size?: "sm" | "lg";
+    title?: string;
 };
-declare const Tabs: ({ className, variant, items, theme, animation, stretch, size, }: TabsProps) => react_jsx_runtime.JSX.Element;
+declare const Tabs: ({ className, variant, items, theme, animation, stretch, size, title, }: TabsProps) => react_jsx_runtime.JSX.Element;
 
 export { Tabs, type TabsProps };

package/dist/Tabs.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-DTD8APSk.js';
+import { a as IconProps } from './Icon-Xhwol1Zj.js';
 import './utils/colours.js';
 
 type TabsProps = {
@@ -13,12 +13,15 @@ type TabsProps = {
         disabled?: boolean;
         selected?: boolean;
         onClick?: () => void;
+        children?: React.ReactNode;
+        className?: string;
     }[];
     theme: "primary" | "secondary";
     animation?: MotionProps;
     stretch?: boolean;
     size?: "sm" | "lg";
+    title?: string;
 };
-declare const Tabs: ({ className, variant, items, theme, animation, stretch, size, }: TabsProps) => react_jsx_runtime.JSX.Element;
+declare const Tabs: ({ className, variant, items, theme, animation, stretch, size, title, }: TabsProps) => react_jsx_runtime.JSX.Element;
 
 export { Tabs, type TabsProps };

package/dist/Tabs.js

@@ -18,7 +18,8 @@ const Tabs = ({
   theme,
   animation,
   stretch,
-  size = "lg"
+  size = "lg",
+  title
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.motion.div,
@@ -36,19 +37,21 @@ const Tabs = ({
         react.motion.button,
         {
           className: classNames__default.default(
-            "group hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-center w-full text-shade-tertiary",
+            "group hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-between w-full text-shade-tertiary",
             !item.label && "w-max !px-3",
             item.selected && theme === "secondary" && "!text-shade-primary",
             item.selected && theme === "primary" && "!text-brand-primary",
             size === "sm" && "py-2 px-4 text-sm",
-            size === "lg" && "py-3 px-6 text-base"
+            size === "lg" && "py-3 px-6 text-base",
+            !item.children && "!justify-center",
+            item.className
           ),
           onClick: item.onClick,
           children: [
             item.selected && variant === "segmented" && /* @__PURE__ */ jsxRuntime.jsx(
               react.motion.div,
               {
-                layoutId: "segmented-tab-selected",
+                layoutId: `segmented-tab-selected-${title}`,
                 transition: { duration: 0.1, ease: easings.breeze },
                 className: classNames__default.default(
                   "absolute inset-0",
@@ -92,7 +95,8 @@ const Tabs = ({
                 ),
                 children: item.label
               }
-            )
+            ),
+            item.children && item.children
           ]
         },
         item.value