bonkers-ui 2.0.8 → 2.0.10

package/components/UiIconBadge/_types.d.ts

@@ -11,5 +11,5 @@ export interface IUiIconBadgeProps {
     size?: BadgeSize;
     kind?: EIconBadgeKind;
     children: React.ReactNode;
-    className: string;
+    className?: string;
 }

package/components/UiIconBadge/_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"_types.js","sources":["../../../src/components/UiIconBadge/_types.ts"],"sourcesContent":["import { ESize } from \"../../_types/sizing\";\n\nexport type BadgeSize = ESize.SM | ESize.MD | ESize.LG | ESize.XL;\n\nexport enum EIconBadgeKind {\n\tPRIMARY = \"primary\",\n\tLIGHT = \"light\",\n\tDARK = \"dark\",\n\tWARNING = \"warning\",\n\tERROR = \"error\"\n}\n\nexport interface IUiIconBadgeProps {\n\tsize?: BadgeSize;\n\tkind?: EIconBadgeKind;\n\tchildren: React.ReactNode;\n\tclassName: string;\n}\n"],"names":["EIconBadgeKind"],"mappings":"AAIY,IAAAA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SALGA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiIconBadge/_types.ts"],"sourcesContent":["import { ESize } from \"../../_types/sizing\";\n\nexport type BadgeSize = ESize.SM | ESize.MD | ESize.LG | ESize.XL;\n\nexport enum EIconBadgeKind {\n\tPRIMARY = \"primary\",\n\tLIGHT = \"light\",\n\tDARK = \"dark\",\n\tWARNING = \"warning\",\n\tERROR = \"error\"\n}\n\nexport interface IUiIconBadgeProps {\n\tsize?: BadgeSize;\n\tkind?: EIconBadgeKind;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n"],"names":["EIconBadgeKind"],"mappings":"AAIY,IAAAA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SALGA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiInput/UiInput.base.js

@@ -20,7 +20,7 @@ const h = ({ postIcon: o, preIcon: t, className: l, kind: a = e.DEFAULT, ...r })
         "hover:border-secondary-alt-700",
         "focus-within:outline-4",
         "focus-within:outline-primary-300",
-        "active:ring focus-within:ring-secondary-alt-700",
+        "focus-within:ring-secondary-alt-700 active:ring",
         a && n[a],
         {
           "bg-white": !r.disabled,
@@ -33,7 +33,7 @@ const h = ({ postIcon: o, preIcon: t, className: l, kind: a = e.DEFAULT, ...r })
         /* @__PURE__ */ d(
           "input",
           {
-            className: i("bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full"),
+            className: i("w-full bg-transparent outline-hidden placeholder:text-secondary-alt-600"),
             ...r
           }
         ),

package/components/UiInput/UiInput.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiInput.base.js","sources":["../../../src/components/UiInput/UiInput.base.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiTypography } from \"../UiTypography\";\nimport { EInputKind } from \"./_types\";\nimport cx from \"classnames\";\n\nexport type TUiInputBaseProps = {\n\tid: string;\n\tpostIcon?: React.ReactNode;\n\tpreIcon?: React.ReactNode;\n\tkind?: EInputKind;\n\tclassName?: string;\n\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputBase: React.FC<\n\tTUiInputBaseProps\n> = ({ postIcon, preIcon, className, kind = EInputKind.DEFAULT, ...rest } ) => {\n\n\tconst stateClasses = {\n\t\t[EInputKind.DEFAULT]: \"border-secondary-alt-600\",\n\t\t[EInputKind.ERROR]: \"border-error\",\n\t\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t};\n\n\treturn (\n\t\t<UiTypography\n\t\t\ttag=\"label\"\n\t\t\thtmlFor={ rest.id }\n\t\t\tclassName={\n\t\t\t\tcx(\n\t\t\t\t\t\"ui-input-wrapper\",\n\t\t\t\t\t\"flex flex-row items-center gap-sm rounded-xl border p-sm\",\n\t\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\t\t\"focus-within:outline-4\",\n\t\t\t\t\t\"focus-within:outline-primary-300\",\n\t\t\t\t\t\"active:ring focus-within:ring-secondary-alt-700\",\n\t\t\t\t\tkind && stateClasses[kind],\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-white\": !rest.disabled,\n\t\t\t\t\t\t\"border-secondary-alt-300 bg-secondary-alt-200\": rest.disabled,\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ preIcon\n\t\t\t\t? preIcon\n\t\t\t\t: null }\n\t\t\t<input\n\t\t\t\tclassName={ cx(\"bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full\") }\n\t\t\t\t{ ...rest }\n\t\t\t/>\n\n\t\t\t{ postIcon\n\t\t\t\t? postIcon\n\t\t\t\t: null }\n\n\t\t</UiTypography>\n\t);\n};\n"],"names":["UiInputBase","postIcon","preIcon","className","kind","EInputKind","rest","stateClasses","jsxs","UiTypography","cx","jsx"],"mappings":";;;;;AAca,MAAAA,IAET,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,MAAAC,IAAOC,EAAW,SAAS,GAAGC,QAAY;AAE9E,QAAMC,IAAe;AAAA,IACpB,CAACF,EAAW,OAAO,GAAG;AAAA,IACtB,CAACA,EAAW,KAAK,GAAG;AAAA,IACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACvB;AAGC,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAI;AAAA,MACJ,SAAUH,EAAK;AAAA,MACf,WACCI;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN,KAAQG,EAAaH,CAAI;AAAA,QACzB;AAAA,UACC,YAAY,CAACE,EAAK;AAAA,UAClB,iDAAiDA,EAAK;AAAA,QACvD;AAAA,QACAH;AAAA,MACD;AAAA,MAGC,UAAA;AAAA,QAAAD,KAEC;AAAA,QACH,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD,EAAG,yEAAyE;AAAA,YACtF,GAAGJ;AAAA,UAAA;AAAA,QACN;AAAA,QAEEL,KAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEF;"}
+{"version":3,"file":"UiInput.base.js","sources":["../../../src/components/UiInput/UiInput.base.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiTypography } from \"../UiTypography\";\nimport { EInputKind } from \"./_types\";\nimport cx from \"classnames\";\n\nexport type TUiInputBaseProps = {\n\tid: string;\n\tpostIcon?: React.ReactNode;\n\tpreIcon?: React.ReactNode;\n\tkind?: EInputKind;\n\tclassName?: string;\n\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputBase: React.FC<\n\tTUiInputBaseProps\n> = ({ postIcon, preIcon, className, kind = EInputKind.DEFAULT, ...rest } ) => {\n\n\tconst stateClasses = {\n\t\t[EInputKind.DEFAULT]: \"border-secondary-alt-600\",\n\t\t[EInputKind.ERROR]: \"border-error\",\n\t\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t};\n\n\treturn (\n\t\t<UiTypography\n\t\t\ttag=\"label\"\n\t\t\thtmlFor={ rest.id }\n\t\t\tclassName={\n\t\t\t\tcx(\n\t\t\t\t\t\"ui-input-wrapper\",\n\t\t\t\t\t\"flex flex-row items-center gap-sm rounded-xl border p-sm\",\n\t\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\t\t\"focus-within:outline-4\",\n\t\t\t\t\t\"focus-within:outline-primary-300\",\n\t\t\t\t\t\"focus-within:ring-secondary-alt-700 active:ring\",\n\t\t\t\t\tkind && stateClasses[kind],\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-white\": !rest.disabled,\n\t\t\t\t\t\t\"border-secondary-alt-300 bg-secondary-alt-200\": rest.disabled,\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ preIcon\n\t\t\t\t? preIcon\n\t\t\t\t: null }\n\t\t\t<input\n\t\t\t\tclassName={ cx(\"w-full bg-transparent outline-hidden placeholder:text-secondary-alt-600\") }\n\t\t\t\t{ ...rest }\n\t\t\t/>\n\n\t\t\t{ postIcon\n\t\t\t\t? postIcon\n\t\t\t\t: null }\n\n\t\t</UiTypography>\n\t);\n};\n"],"names":["UiInputBase","postIcon","preIcon","className","kind","EInputKind","rest","stateClasses","jsxs","UiTypography","cx","jsx"],"mappings":";;;;;AAca,MAAAA,IAET,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,MAAAC,IAAOC,EAAW,SAAS,GAAGC,QAAY;AAE9E,QAAMC,IAAe;AAAA,IACpB,CAACF,EAAW,OAAO,GAAG;AAAA,IACtB,CAACA,EAAW,KAAK,GAAG;AAAA,IACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACvB;AAGC,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAI;AAAA,MACJ,SAAUH,EAAK;AAAA,MACf,WACCI;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN,KAAQG,EAAaH,CAAI;AAAA,QACzB;AAAA,UACC,YAAY,CAACE,EAAK;AAAA,UAClB,iDAAiDA,EAAK;AAAA,QACvD;AAAA,QACAH;AAAA,MACD;AAAA,MAGC,UAAA;AAAA,QAAAD,KAEC;AAAA,QACH,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD,EAAG,yEAAyE;AAAA,YACtF,GAAGJ;AAAA,UAAA;AAAA,QACN;AAAA,QAEEL,KAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEF;"}

package/components/UiInput/UiInputText.js

@@ -21,7 +21,7 @@ const j = ({
     {
       className: d(
         "transition-all duration-300 ease-in-out",
-        "max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs",
+        "mt-xxs max-h-0 gap-xxs overflow-hidden opacity-0",
         "data-[status=true]:max-h-full data-[status=true]:opacity-100"
       ),
       lineHeight: !0,

package/components/UiInput/UiInputText.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase, type TUiInputBaseProps } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string | React.ReactElement;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} & TUiInputBaseProps;\n\nexport const UiInputText: React.FC<TUiInputTextProps> = ({\n\tkind,\n\ttitle,\n\tinfoComponent,\n\tsubtitle,\n\tstatusMessage,\n\t...rest\n}) => {\n\treturn (\n\t\t<UiInputTitled title={ title } subtitle={ subtitle } infoComponent={ infoComponent } >\n\t\t\t<UiInputBase kind={ kind } { ...rest }/>\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"transition-all duration-300 ease-in-out\",\n\t\t\t\t\t\t\t\"max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs\",\n\t\t\t\t\t\t\t\"data-[status=true]:max-h-full data-[status=true]:opacity-100\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tkind === EInputKind.ERROR\n\t\t\t\t\t\t\t\t? EColors.ERROR\n\t\t\t\t\t\t\t\t: EColors.PRIMARY\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\tdata-status={ !!statusMessage }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\n\t\t</UiInputTitled>\n\t);\n};\n"],"names":["UiInputText","kind","title","infoComponent","subtitle","statusMessage","rest","jsxs","UiInputTitled","jsx","UiInputBase","UiTypography","cx","EInputKind","EColors","ETypographySizes"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAA2C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAEG,gBAAAC,EAAAC,GAAA,EAAc,OAAAN,GAAgB,UAAAE,GAAsB,eAAAD,GACpD,UAAA;AAAA,EAAC,gBAAAM,EAAAC,GAAA,EAAY,MAAAT,GAAgB,GAAGK,EAAM,CAAA;AAAA,EACpCD,IAEA,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,YAAU;AAAA,MACV,OACCX,MAASY,EAAW,QACjBC,EAAQ,QACRA,EAAQ;AAAA,MAEZ,MAAOC,EAAiB;AAAA,MACxB,eAAc,CAAC,CAACV;AAAA,MAEd,UAAAA;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,GAEJ;"}
+{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase, type TUiInputBaseProps } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string | React.ReactElement;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} & TUiInputBaseProps;\n\nexport const UiInputText: React.FC<TUiInputTextProps> = ({\n\tkind,\n\ttitle,\n\tinfoComponent,\n\tsubtitle,\n\tstatusMessage,\n\t...rest\n}) => {\n\treturn (\n\t\t<UiInputTitled title={ title } subtitle={ subtitle } infoComponent={ infoComponent } >\n\t\t\t<UiInputBase kind={ kind } { ...rest }/>\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"transition-all duration-300 ease-in-out\",\n\t\t\t\t\t\t\t\"mt-xxs max-h-0 gap-xxs overflow-hidden opacity-0\",\n\t\t\t\t\t\t\t\"data-[status=true]:max-h-full data-[status=true]:opacity-100\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tkind === EInputKind.ERROR\n\t\t\t\t\t\t\t\t? EColors.ERROR\n\t\t\t\t\t\t\t\t: EColors.PRIMARY\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\tdata-status={ !!statusMessage }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\n\t\t</UiInputTitled>\n\t);\n};\n"],"names":["UiInputText","kind","title","infoComponent","subtitle","statusMessage","rest","jsxs","UiInputTitled","jsx","UiInputBase","UiTypography","cx","EInputKind","EColors","ETypographySizes"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAA2C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAEG,gBAAAC,EAAAC,GAAA,EAAc,OAAAN,GAAgB,UAAAE,GAAsB,eAAAD,GACpD,UAAA;AAAA,EAAC,gBAAAM,EAAAC,GAAA,EAAY,MAAAT,GAAgB,GAAGK,EAAM,CAAA;AAAA,EACpCD,IAEA,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,YAAU;AAAA,MACV,OACCX,MAASY,EAAW,QACjBC,EAAQ,QACRA,EAAQ;AAAA,MAEZ,MAAOC,EAAiB;AAAA,MACxB,eAAc,CAAC,CAACV;AAAA,MAEd,UAAAA;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,GAEJ;"}

package/components/UiInput/_types.d.ts

@@ -1,5 +1,6 @@
 export declare enum EInputKind {
     DEFAULT = "DEFAULT",
     ERROR = "ERROR",
-    SUCCESS = "SUCCESS"
+    SUCCESS = "SUCCESS",
+    WARNING = "WARNING"
 }

package/components/UiInput/_types.js

@@ -1,4 +1,4 @@
-var S = /* @__PURE__ */ ((R) => (R.DEFAULT = "DEFAULT", R.ERROR = "ERROR", R.SUCCESS = "SUCCESS", R))(S || {});
+var S = /* @__PURE__ */ ((R) => (R.DEFAULT = "DEFAULT", R.ERROR = "ERROR", R.SUCCESS = "SUCCESS", R.WARNING = "WARNING", R))(S || {});
 export {
   S as EInputKind
 };

package/components/UiInput/_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"_types.js","sources":["../../../src/components/UiInput/_types.ts"],"sourcesContent":["export enum EInputKind {\n\tDEFAULT = \"DEFAULT\",\n\tERROR = \"ERROR\",\n\tSUCCESS = \"SUCCESS\",\n}\n"],"names":["EInputKind"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,UAAU,WAHCA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiInput/_types.ts"],"sourcesContent":["export enum EInputKind {\n\tDEFAULT = \"DEFAULT\",\n\tERROR = \"ERROR\",\n\tSUCCESS = \"SUCCESS\",\n\tWARNING = \"WARNING\",\n}\n"],"names":["EInputKind"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WAJCA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiInputRange/UiInputRange.js

@@ -1,81 +1,96 @@
-import { jsxs as M, jsx as n } from "react/jsx-runtime";
-import m, { useState as b, useCallback as O, useEffect as S } from "react";
-import g from "classnames";
-import '../../assets/UiInputRange.css';const j = "_thumb_hkko1_18", T = {
-  thumb: j
-}, $ = ({
+import { jsxs as V, jsx as l } from "react/jsx-runtime";
+import f, { useState as z, useCallback as $, useEffect as T } from "react";
+import x from "classnames";
+import '../../assets/UiInputRange.css';const E = "_thumb_hkko1_18", O = {
+  thumb: E
+}, L = ({
   value: s,
-  min: r,
-  max: a,
-  step: x,
-  onChangeHandler: y,
-  className: v,
-  ...l
+  min: a,
+  max: c,
+  step: p,
+  onChangeHandler: v,
+  className: y,
+  ...h
 }) => {
-  const e = m.useRef(null), c = m.useRef(null), [k, R] = b(0), [w, N] = b(0), i = O(() => {
-    var h, f;
-    if (!e.current || !c.current) return;
-    const t = parseFloat(String(s)), o = parseFloat(String(r)), z = parseFloat(String(a)), C = ((h = c.current) == null ? void 0 : h.getBoundingClientRect().width) ?? 0, u = ((f = e.current) == null ? void 0 : f.getBoundingClientRect().width) ?? 0;
-    if (u === 0) return;
-    const F = (t - o) / (z - o) * 100, p = C / u * 100, d = Math.max(0, Math.min(100, F * (1 - p / 100)));
-    R(d), N(d + p / 2);
-  }, [r, a, s]);
-  S(() => {
-    i();
+  const n = f.useRef(null), S = f.useRef(null), d = f.useRef(null), m = M(s, a, c), [g, F] = z(
+    `calc(${m}% - ${m * 32 / 100}px)`
+  ), b = $(() => {
+    const t = parseFloat(String(s)), e = parseFloat(String(a)), o = parseFloat(String(c)), r = (t - e) / (o - e) * 100;
+    F(`calc(${r}% - ${r * 32 / 100}px)`);
+  }, [a, c, s]);
+  T(() => {
+    b();
     const t = new ResizeObserver(() => {
-      i();
+      b();
     });
-    return e.current && t.observe(e.current), () => {
+    return n.current && t.observe(n.current), () => {
       t.disconnect();
     };
-  }, [i]);
-  const P = (t) => {
-    if (t === s) return;
-    const o = parseFloat(t.toFixed(10));
-    y(o);
+  }, [b]);
+  const k = (t) => {
+    const e = +t.target.value;
+    if (e === s) return;
+    const o = parseFloat(e.toFixed(10));
+    v(o);
+  }, w = (t) => {
+    if (!d.current || !n.current) return;
+    const e = d.current.getBoundingClientRect(), o = t.clientX - e.left, r = e.width, i = o / r * 100, u = parseFloat(String(a)), N = parseFloat(String(c)), R = u + i / 100 * (N - u), C = Math.round(R / Number(p)) * Number(p);
+    if (n.current) {
+      n.current.value = String(C);
+      const P = new Event("input", {
+        bubbles: !0
+      });
+      n.current.dispatchEvent(P);
+    }
   };
-  return /* @__PURE__ */ M(
+  function M(t, e, o) {
+    const r = parseFloat(String(t)), i = parseFloat(String(e)), u = parseFloat(String(o));
+    return (r - i) / (u - i) * 100;
+  }
+  return /* @__PURE__ */ V(
     "div",
     {
-      className: g(
+      ref: d,
+      className: x(
         "relative box-content h-xl py-xxs",
-        l.disabled && "opacity-60 cursor-default pointer-events-none",
-        v
+        h.disabled && "pointer-events-none cursor-default opacity-60",
+        y
       ),
+      onClick: w,
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ l(
           "input",
           {
-            ...l,
-            ref: e,
-            className: "absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent",
+            ...h,
+            ref: n,
+            className: "absolute top-0 left-0 size-full cursor-pointer appearance-none bg-transparent",
             style: {
               touchAction: "none"
             },
             type: "range",
-            min: r,
-            max: a,
-            step: x,
+            min: a,
+            max: c,
+            step: p,
             value: s,
-            onChange: (t) => P(+t.target.value),
+            onChange: k,
             onTouchStart: (t) => t.stopPropagation(),
             onTouchMove: (t) => t.stopPropagation()
           }
         ),
-        /* @__PURE__ */ n("div", { className: "pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt overflow-clip", children: /* @__PURE__ */ n(
+        /* @__PURE__ */ l("div", { className: "pointer-events-none absolute top-1/2 left-0 h-xxs w-full -translate-y-1/2 overflow-clip rounded-sm bg-secondary-alt", children: /* @__PURE__ */ l(
           "div",
           {
-            className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600",
+            className: "pointer-events-none absolute top-1/2 left-0 h-xxs -translate-y-1/2 rounded-sm bg-primary-600",
             style: {
-              width: `${w}%`
+              width: `calc(${g} + 16px)`
             }
           }
         ) }),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ l(
           "div",
           {
-            className: g(
-              T.thumb,
+            className: x(
+              O.thumb,
               "pointer-events-none",
               "absolute",
               "box-content",
@@ -85,11 +100,11 @@ import '../../assets/UiInputRange.css';const j = "_thumb_hkko1_18", T = {
               "bg-white",
               "border-primary-600"
             ),
-            ref: c,
+            ref: S,
             style: {
-              left: `${k}%`
+              left: g
             },
-            children: /* @__PURE__ */ n("div", { className: "absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600" })
+            children: /* @__PURE__ */ l("div", { className: "absolute top-1/2 left-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600" })
           }
         )
       ]
@@ -97,6 +112,6 @@ import '../../assets/UiInputRange.css';const j = "_thumb_hkko1_18", T = {
   );
 };
 export {
-  $ as UiInputRange
+  L as UiInputRange
 };
 //# sourceMappingURL=UiInputRange.js.map

package/components/UiInputRange/UiInputRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiInputRange.module.css\";\n\nexport type TUiInputRangeProps = {\n\tvalue: number;\n\tmin: string | number;\n\tmax: string | number;\n\tstep: string | number;\n\tonChangeHandler: (value: number) => void;\n\tclassName?: string;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\tclassName,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState(0);\n\tconst [trackOffset, setTrackOffset] = useState(0);\n\n\tconst updatePositions = useCallback(() => {\n\t\tif (!track.current || !thumb.current) return;\n\n\t\tconst numValue = parseFloat(String(value));\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\n\t\tconst thumbWidth = thumb.current?.getBoundingClientRect().width ?? 0;\n\t\tconst trackWidth = track.current?.getBoundingClientRect().width ?? 0;\n\n\t\tif (trackWidth === 0) return;\n\n\t\tconst percentage = ((numValue - numMin) / (numMax - numMin)) * 100;\n\t\tconst thumbWidthPercentage = (thumbWidth / trackWidth) * 100;\n\n\t\tconst adjustedPercentage = Math.max(0, Math.min(100, percentage * (1 - thumbWidthPercentage / 100)));\n\n\t\tsetPosition(adjustedPercentage);\n\t\tsetTrackOffset(adjustedPercentage + (thumbWidthPercentage / 2));\n\t}, [min, max, value]);\n\n\tuseEffect(() => {\n\t\tupdatePositions();\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tupdatePositions();\n\t\t});\n\n\t\tif (track.current) {\n\t\t\tresizeObserver.observe(track.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [updatePositions]);\n\n\tconst handleOnChange = (newValue: number) => {\n\t\tif (newValue === value) return;\n\t\tconst preciseValue = parseFloat(newValue.toFixed(10));\n\t\tonChangeHandler(preciseValue);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ cx(\n\t\t\t\t\"relative box-content h-xl py-xxs\",\n\t\t\t\trest.disabled && \"opacity-60 cursor-default pointer-events-none\",\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tref={ track }\n\t\t\t\tclassName=\"absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t} }\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tstep={ step }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ (e) => handleOnChange(+e.target.value) }\n\t\t\t\tonTouchStart={ (e) => e.stopPropagation() }\n\t\t\t\tonTouchMove={ (e) => e.stopPropagation() }\n\t\t\t/>\n\n\t\t\t<div className=\"pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt overflow-clip\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: `${trackOffset}%`,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\tstyles.thumb,\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"box-content\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\t\"-translate-y-1/2\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"border-primary-600\",\n\t\t\t\t) }\n\t\t\t\tref={ thumb }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${position}%`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputRange","value","min","max","step","onChangeHandler","className","rest","track","React","thumb","position","setPosition","useState","trackOffset","setTrackOffset","updatePositions","useCallback","numValue","numMin","numMax","thumbWidth","_a","trackWidth","_b","percentage","thumbWidthPercentage","adjustedPercentage","useEffect","resizeObserver","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":";;;;;GAaaA,IAA6C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAAC,IAAQC,EAAM,OAAyB,IAAI,GAC3CC,IAAQD,EAAM,OAAuB,IAAI,GACzC,CAACE,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpC,CAACC,GAAaC,CAAc,IAAIF,EAAS,CAAC,GAE1CG,IAAkBC,EAAY,MAAM;;AACzC,QAAI,CAACT,EAAM,WAAW,CAACE,EAAM,QAAS;AAEtC,UAAMQ,IAAW,WAAW,OAAOjB,CAAK,CAAC,GACnCkB,IAAS,WAAW,OAAOjB,CAAG,CAAC,GAC/BkB,IAAS,WAAW,OAAOjB,CAAG,CAAC,GAE/BkB,MAAaC,IAAAZ,EAAM,YAAN,gBAAAY,EAAe,wBAAwB,UAAS,GAC7DC,MAAaC,IAAAhB,EAAM,YAAN,gBAAAgB,EAAe,wBAAwB,UAAS;AAEnE,QAAID,MAAe,EAAG;AAEtB,UAAME,KAAeP,IAAWC,MAAWC,IAASD,KAAW,KACzDO,IAAwBL,IAAaE,IAAc,KAEnDI,IAAqB,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKF,KAAc,IAAIC,IAAuB,IAAI,CAAC;AAEnG,IAAAd,EAAYe,CAAkB,GACfZ,EAAAY,IAAsBD,IAAuB,CAAE;AAAA,EAC5D,GAAA,CAACxB,GAAKC,GAAKF,CAAK,CAAC;AAEpB,EAAA2B,EAAU,MAAM;AACC,IAAAZ,EAAA;AAEV,UAAAa,IAAiB,IAAI,eAAe,MAAM;AAC/B,MAAAb,EAAA;AAAA,IAAA,CAChB;AAED,WAAIR,EAAM,WACMqB,EAAA,QAAQrB,EAAM,OAAO,GAG9B,MAAM;AACZ,MAAAqB,EAAe,WAAW;AAAA,IAC3B;AAAA,EAAA,GACE,CAACb,CAAe,CAAC;AAEd,QAAAc,IAAiB,CAACC,MAAqB;AAC5C,QAAIA,MAAa9B,EAAO;AACxB,UAAM+B,IAAe,WAAWD,EAAS,QAAQ,EAAE,CAAC;AACpD,IAAA1B,EAAgB2B,CAAY;AAAA,EAC7B;AAGC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACA3B,EAAK,YAAY;AAAA,QACjBD;AAAA,MACD;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAA6B;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAG5B;AAAA,YACL,KAAMC;AAAA,YACN,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,aAAa;AAAA,YACd;AAAA,YACA,MAAK;AAAA,YACL,KAAAN;AAAA,YACA,KAAAC;AAAA,YACA,MAAAC;AAAA,YACA,OAAAH;AAAA,YACA,UAAW,CAACmC,MAAMN,EAAe,CAACM,EAAE,OAAO,KAAK;AAAA,YAChD,cAAe,CAACA,MAAMA,EAAE,gBAAgB;AAAA,YACxC,aAAc,CAACA,MAAMA,EAAE,gBAAgB;AAAA,UAAA;AAAA,QACxC;AAAA,QAEA,gBAAAD,EAAC,OAAI,EAAA,WAAU,uHACd,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,OAAO,GAAGrB,CAAW;AAAA,YAAA;AAAA,UACtB;AAAA,QAAA,GAEF;AAAA,QACA,gBAAAqB;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD;AAAA,cACXG,EAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA,YACA,KAAM3B;AAAA,YACN,OAAQ;AAAA,cACP,MAAM,GAAGC,CAAQ;AAAA,YAClB;AAAA,YAEA,UAAA,gBAAAwB,EAAC,OAAI,EAAA,WAAU,mGAAmG,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACnH;AAAA,IAAA;AAAA,EACD;AAEF;"}
+{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiInputRange.module.css\";\n\nexport type TUiInputRangeProps = {\n\tvalue: number;\n\tmin: string | number;\n\tmax: string | number;\n\tstep: string | number;\n\tonChangeHandler: (value: number) => void;\n\tclassName?: string;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\tclassName,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\tconst container = React.useRef<HTMLDivElement>(null);\n\n\tconst initialPosition = calculateInitialPosition(value, min, max);\n\tconst [thumbLeft, setThumbLeft] = useState(\n\t\t`calc(${initialPosition}% - ${(initialPosition * 32) / 100}px)`\n\t);\n\n\tconst updatePositions = useCallback(() => {\n\t\tconst numValue = parseFloat(String(value));\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\n\t\tconst percentage = ((numValue - numMin) / (numMax - numMin)) * 100;\n\t\tsetThumbLeft(`calc(${percentage}% - ${(percentage * 32) / 100}px)`);\n\t}, [min, max, value]);\n\n\tuseEffect(() => {\n\t\tupdatePositions();\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tupdatePositions();\n\t\t});\n\n\t\tif (track.current) {\n\t\t\tresizeObserver.observe(track.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [updatePositions]);\n\n\tconst handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst newValue = +e.target.value;\n\t\tif (newValue === value) return;\n\t\tconst preciseValue = parseFloat(newValue.toFixed(10));\n\t\tonChangeHandler(preciseValue);\n\t};\n\n\tconst handleTrackClick = (e: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (!container.current || !track.current) return;\n\n\t\tconst rect = container.current.getBoundingClientRect();\n\t\tconst clickPosition = e.clientX - rect.left;\n\t\tconst trackWidth = rect.width;\n\t\tconst percentage = (clickPosition / trackWidth) * 100;\n\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\t\tconst newValue = numMin + (percentage / 100) * (numMax - numMin);\n\n\t\tconst steppedValue = Math.round(newValue / Number(step)) * Number(step);\n\n\t\tif (track.current) {\n\t\t\ttrack.current.value = String(steppedValue);\n\t\t\tconst event = new Event(\"input\", {\n\t\t\t\tbubbles: true\n\t\t\t});\n\t\t\ttrack.current.dispatchEvent(event);\n\t\t}\n\t};\n\n\tfunction calculateInitialPosition(value: number, min: string | number, max: string | number) {\n\t\tconst numValue = parseFloat(String(value));\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\n\t\treturn ((numValue - numMin) / (numMax - numMin)) * 100;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ container }\n\t\t\tclassName={ cx(\n\t\t\t\t\"relative box-content h-xl py-xxs\",\n\t\t\t\trest.disabled && \"pointer-events-none cursor-default opacity-60\",\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tonClick={ handleTrackClick }\n\t\t>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tref={ track }\n\t\t\t\tclassName=\"absolute top-0 left-0 size-full cursor-pointer appearance-none bg-transparent\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t} }\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tstep={ step }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ handleOnChange }\n\t\t\t\tonTouchStart={ (e) => e.stopPropagation() }\n\t\t\t\tonTouchMove={ (e) => e.stopPropagation() }\n\t\t\t/>\n\n\t\t\t<div className=\"pointer-events-none absolute top-1/2 left-0 h-xxs w-full -translate-y-1/2 overflow-clip rounded-sm bg-secondary-alt\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"pointer-events-none absolute top-1/2 left-0 h-xxs -translate-y-1/2 rounded-sm bg-primary-600\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: `calc(${thumbLeft} + 16px)`,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\tstyles.thumb,\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"box-content\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\t\"-translate-y-1/2\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"border-primary-600\",\n\t\t\t\t) }\n\t\t\t\tref={ thumb }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: thumbLeft,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"absolute top-1/2 left-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputRange","value","min","max","step","onChangeHandler","className","rest","track","React","thumb","container","initialPosition","calculateInitialPosition","thumbLeft","setThumbLeft","useState","updatePositions","useCallback","numValue","numMin","numMax","percentage","useEffect","resizeObserver","handleOnChange","e","newValue","preciseValue","handleTrackClick","rect","clickPosition","trackWidth","steppedValue","event","jsxs","cx","jsx","styles"],"mappings":"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"}

package/components/UiNavigationSteps/UiNavigationStep.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { INavStepProps } from './_types';
+export declare const UiNavigationStep: React.FC<INavStepProps>;

package/components/UiNavigationSteps/UiNavigationStep.js

@@ -0,0 +1,115 @@
+import { jsx as m, jsxs as f } from "react/jsx-runtime";
+import { useEffect as w } from "react";
+import n from "classnames";
+import { ENavStepStatus as e } from "./_types.js";
+import { UiTypography as E } from "../UiTypography/UiTypography.js";
+import { ETypographySizes as g, ETextWeight as h } from "../UiTypography/_types.js";
+import { u as z, s as L } from "../../UiNavigationSteps-N3juxg3H.js";
+function M(s, a) {
+  return n(
+    `
+			flex
+			transform
+			items-center
+			justify-center
+			rounded-full
+			border
+			text-secondary-400
+			transition-all
+			duration-150
+			ease-in-out
+			md:h-xl
+			md:w-full
+			md:px-xs
+			md:py-xxs
+			lg:px-sm
+		`,
+    !a && "bg-secondary-400",
+    a && "cursor-pointer",
+    s === e.COMPLETE && "size-sm border-secondary-400 bg-secondary-400 p-xs text-white",
+    s === e.ACTIVE && "border-secondary-400 bg-secondary-alt-200 px-xs py-xxs text-secondary-400",
+    s === e.INACTIVE && "size-sm border-secondary-alt-500 bg-white p-xs text-secondary-alt-500"
+  );
+}
+const W = ({
+  id: s,
+  name: a,
+  subSteps: r = [],
+  className: T = "",
+  onClick: I,
+  order: i = 1,
+  totalSteps: x = 1,
+  isActive: u = !1,
+  isComplete: c = !1,
+  icon: y
+}) => {
+  const { currentStepId: l, updateSubstepProgress: p, navigateToStep: C, registerStep: A } = z(), N = r.some((S) => S.id === l), o = r.length > 0;
+  w(() => {
+    A(s, o), o && p(s, l, r);
+  }, [s, o, r, l, p]);
+  const t = !c && (u || N) ? e.ACTIVE : c ? e.COMPLETE : e.INACTIVE, V = () => {
+    t !== e.INACTIVE && (I?.(), C(s));
+  }, b = () => i / x * 100, d = t !== e.INACTIVE, v = o ? c ? ` ${r.length}/${r.length}` : ` ${i}/${x || r.length}` : null;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      style: t === e.ACTIVE ? {
+        "--step-width": `${b()}%`
+      } : {},
+      className: n(
+        "flex flex-col gap-xxs md:flex-row md:items-center",
+        {
+          [L.active]: t === e.ACTIVE
+        }
+      ),
+      children: /* @__PURE__ */ m(
+        "button",
+        {
+          onClick: V,
+          "aria-current": t === e.ACTIVE ? "step" : void 0,
+          "aria-disabled": !d,
+          disabled: !d,
+          className: n(M(t, d), T),
+          children: /* @__PURE__ */ f(
+            E,
+            {
+              className: "flex place-items-center gap-xxs",
+              weight: t === e.ACTIVE ? h.SEMI_BOLD : h.REGULAR,
+              lineHeight: !0,
+              size: g.XS,
+              children: [
+                t === e.COMPLETE ? y : /* @__PURE__ */ m(
+                  E,
+                  {
+                    className: n({
+                      "font-semibold md:font-medium": t === e.INACTIVE
+                    }),
+                    tag: "span",
+                    size: g.SM,
+                    children: i
+                  }
+                ),
+                /* @__PURE__ */ f(
+                  "span",
+                  {
+                    className: n("text-xxs text-nowrap md:text-xs", {
+                      "hidden md:inline": t !== e.ACTIVE
+                    }),
+                    children: [
+                      a,
+                      v
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  W as UiNavigationStep
+};
+//# sourceMappingURL=UiNavigationStep.js.map

package/components/UiNavigationSteps/UiNavigationStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiNavigationStep.js","sources":["../../../src/components/UiNavigationSteps/UiNavigationStep.tsx"],"sourcesContent":["import React, { useEffect  } from \"react\";\nimport cx from \"classnames\";\nimport { ENavStepStatus, type INavStepProps } from \"./_types\";\nimport { ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\nimport { useStepNav } from \"./UiNavigationSteps\";\nimport styles from \"./UiNavigationSteps.module.css\";\n\nfunction getStepClasses(status: ENavStepStatus, isClickable: boolean) {\n\treturn cx(\n\t\t`\n\t\t\tflex\n\t\t\ttransform\n\t\t\titems-center\n\t\t\tjustify-center\n\t\t\trounded-full\n\t\t\tborder\n\t\t\ttext-secondary-400\n\t\t\ttransition-all\n\t\t\tduration-150\n\t\t\tease-in-out\n\t\t\tmd:h-xl\n\t\t\tmd:w-full\n\t\t\tmd:px-xs\n\t\t\tmd:py-xxs\n\t\t\tlg:px-sm\n\t\t`,\n\t\t!isClickable && \"bg-secondary-400\",\n\t\tisClickable && \"cursor-pointer\",\n\t\tstatus === ENavStepStatus.COMPLETE\n\t\t&& \"size-sm border-secondary-400 bg-secondary-400 p-xs text-white\",\n\t\tstatus === ENavStepStatus.ACTIVE\n\t\t&& \"border-secondary-400 bg-secondary-alt-200 px-xs py-xxs text-secondary-400\",\n\t\tstatus === ENavStepStatus.INACTIVE\n\t\t&& \"size-sm border-secondary-alt-500 bg-white p-xs text-secondary-alt-500\",\n\t);\n}\n\nexport const UiNavigationStep: React.FC<INavStepProps> = ({\n\tid,\n\tname,\n\tsubSteps = [],\n\tclassName = \"\",\n\tonClick,\n\torder = 1,\n\ttotalSteps = 1,\n\tisActive = false,\n\tisComplete = false,\n\ticon\n}) => {\n\tconst { currentStepId, updateSubstepProgress, navigateToStep, registerStep } = useStepNav();\n\tconst isSubstepActive = subSteps.some((subStep) => subStep.id === currentStepId);\n\tconst hasSubsteps = subSteps.length > 0;\n\n\tuseEffect(() => {\n\t\tregisterStep(id, hasSubsteps);\n\n\t\tif (hasSubsteps) {\n\t\t\tupdateSubstepProgress(id, currentStepId, subSteps);\n\t\t}\n\t}, [id, hasSubsteps, subSteps, currentStepId, updateSubstepProgress]);\n\n\tconst status = !isComplete && (isActive || isSubstepActive)\n\t\t? ENavStepStatus.ACTIVE\n\t\t: isComplete\n\t\t\t? ENavStepStatus.COMPLETE\n\t\t\t: ENavStepStatus.INACTIVE;\n\n\tconst handleClick = () => {\n\t\tif (status !== ENavStepStatus.INACTIVE) {\n\t\t\tonClick?.();\n\t\t\tnavigateToStep(id);\n\t\t}\n\t};\n\n\tconst calculateWidth = () => (order / totalSteps) * 100;\n\n\tconst isClickable = status !== ENavStepStatus.INACTIVE;\n\n\tconst progressText = hasSubsteps\n\t\t? isComplete\n\t\t\t? ` ${subSteps.length}/${subSteps.length}`\n\t\t\t: ` ${order}/${totalSteps || subSteps.length}`\n\t\t: null;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={ status === ENavStepStatus.ACTIVE\n\t\t\t\t? ({\n\t\t\t\t\t\"--step-width\": `${calculateWidth()}%`\n\t\t\t\t} as React.CSSProperties)\n\t\t\t\t: {} }\n\t\t\tclassName={ cx(\"flex flex-col gap-xxs md:flex-row md:items-center\", {\n\t\t\t\t[styles.active]: status === ENavStepStatus.ACTIVE,\n\t\t\t},\n\t\t\t) }\n\t\t>\n\t\t\t<button\n\t\t\t\tonClick={ handleClick }\n\t\t\t\taria-current={ status === ENavStepStatus.ACTIVE\n\t\t\t\t\t? \"step\"\n\t\t\t\t\t: undefined }\n\t\t\t\taria-disabled={ !isClickable }\n\t\t\t\tdisabled={ !isClickable }\n\t\t\t\tclassName={ cx(getStepClasses(status, isClickable), className) }\n\t\t\t>\n\t\t\t\t<UiTypography\n\t\t\t\t\tclassName=\"flex place-items-center gap-xxs\"\n\t\t\t\t\tweight={ status === ENavStepStatus.ACTIVE\n\t\t\t\t\t\t? ETextWeight.SEMI_BOLD\n\t\t\t\t\t\t: ETextWeight.REGULAR }\n\t\t\t\t\tlineHeight\n\t\t\t\t\tsize={ ETypographySizes.XS }\n\t\t\t\t>\n\t\t\t\t\t{ status === ENavStepStatus.COMPLETE\n\t\t\t\t\t\t? icon\n\t\t\t\t\t\t: (\n\t\t\t\t\t\t\t<UiTypography\n\t\t\t\t\t\t\t\tclassName={ cx({\n\t\t\t\t\t\t\t\t\t\"font-semibold md:font-medium\": status === ENavStepStatus.INACTIVE,\n\t\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{  order }\n\t\t\t\t\t\t\t</UiTypography>\n\t\t\t\t\t\t) }\n\t\t\t\t\t{\n\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={ cx(\"text-xxs text-nowrap md:text-xs\", {\n\t\t\t\t\t\t\t\t\"hidden md:inline\": status !== ENavStepStatus.ACTIVE,\n\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t\t{ progressText }\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t}\n\t\t\t\t</UiTypography>\n\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n"],"names":["getStepClasses","status","isClickable","cx","ENavStepStatus","UiNavigationStep","id","name","subSteps","className","onClick","order","totalSteps","isActive","isComplete","icon","currentStepId","updateSubstepProgress","navigateToStep","registerStep","useStepNav","isSubstepActive","subStep","hasSubsteps","useEffect","handleClick","calculateWidth","progressText","jsx","styles","jsxs","UiTypography","ETextWeight","ETypographySizes"],"mappings":"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"}

package/components/UiNavigationSteps/UiNavigationSteps.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { INavigationStepContext } from './_types';
+export declare const UiNavigationSteps: React.FC<{
+    initialStepId: string;
+    children: React.ReactNode;
+    className?: string;
+    complete?: boolean;
+}>;
+export declare const useStepNav: () => INavigationStepContext;

package/components/UiNavigationSteps/UiNavigationSteps.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "react";
+import "classnames";
+import { U as r, u as e } from "../../UiNavigationSteps-N3juxg3H.js";
+export {
+  r as UiNavigationSteps,
+  e as useStepNav
+};
+//# sourceMappingURL=UiNavigationSteps.js.map

package/components/UiNavigationSteps/UiNavigationSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiNavigationSteps.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/components/UiNavigationSteps/_types.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export declare enum ENavStepStatus {
+    COMPLETE = "complete",
+    ACTIVE = "active",
+    INACTIVE = "inactive"
+}
+export interface INavSubStep {
+    id: string;
+    name: string;
+}
+export interface INavigationStepContext {
+    currentStepId: string;
+    completedSteps: Set<string>;
+    navigateToStep: (id: string) => void;
+    registerStep: (id: string, hasSubsteps: boolean) => void;
+    updateSubstepProgress: (stepId: string, substepId: string, subSteps: INavSubStep[]) => void;
+}
+export interface INavStepProps {
+    id: string;
+    name: string;
+    subSteps?: INavSubStep[];
+    className?: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+    order?: number;
+    totalSteps?: number;
+    isActive?: boolean;
+    isComplete?: boolean;
+}

package/components/UiNavigationSteps/_types.js

@@ -0,0 +1,5 @@
+var r = /* @__PURE__ */ ((e) => (e.COMPLETE = "complete", e.ACTIVE = "active", e.INACTIVE = "inactive", e))(r || {});
+export {
+  r as ENavStepStatus
+};
+//# sourceMappingURL=_types.js.map

package/components/UiNavigationSteps/_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiNavigationSteps/_types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport enum ENavStepStatus {\n\tCOMPLETE = \"complete\",\n\tACTIVE = \"active\",\n\tINACTIVE = \"inactive\",\n}\n\nexport interface INavSubStep {\n\tid: string;\n\tname: string;\n}\n\nexport interface INavigationStepContext {\n\tcurrentStepId: string;\n\tcompletedSteps: Set<string>;\n\tnavigateToStep: (id: string) => void;\n\tregisterStep: (id: string, hasSubsteps: boolean) => void;\n\tupdateSubstepProgress: (stepId: string, substepId: string, subSteps: INavSubStep[]) => void;\n}\n\nexport interface INavStepProps {\n\tid: string;\n\tname: string;\n\tsubSteps?: INavSubStep[];\n\tclassName?: string;\n\tonClick?: () => void;\n\ticon?: ReactNode;\n\torder?: number;\n\ttotalSteps?: number;\n\tisActive?: boolean;\n\tisComplete?: boolean;\n}\n"],"names":["ENavStepStatus"],"mappings":"AAEY,IAAAA,sBAAAA,OACXA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,WAAW,YAHAA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiNavigationSteps/index.d.ts

@@ -0,0 +1,3 @@
+export { UiNavigationSteps } from './UiNavigationSteps.tsx';
+export { UiNavigationStep } from './UiNavigationStep.tsx';
+export * from './_types.ts';

package/components/UiNavigationSteps/index.js

@@ -0,0 +1,9 @@
+import { U as a } from "../../UiNavigationSteps-N3juxg3H.js";
+import { UiNavigationStep as i } from "./UiNavigationStep.js";
+import { ENavStepStatus as r } from "./_types.js";
+export {
+  r as ENavStepStatus,
+  i as UiNavigationStep,
+  a as UiNavigationSteps
+};
+//# sourceMappingURL=index.js.map

package/components/UiNavigationSteps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/components/UiPills/UiPills.js

@@ -25,7 +25,7 @@ const d = {
   rounded: x = !1
 }) => /* @__PURE__ */ m("div", { className: l(
   "ui-pills",
-  "grid grid-flow-col justify-start w-max",
+  "grid w-max grid-flow-col justify-start",
   "items-center",
   "gap-xxxs",
   "px-xxs py-xxxs",

package/components/UiPills/UiPills.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiPills.js","sources":["../../../src/components/UiPills/UiPills.tsx"],"sourcesContent":["import React from \"react\";\nimport { EBadgeKind, EBadgeSize } from \"./_types.ts\";\nimport { ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\nimport cx from \"classnames\";\n\ninterface IUiPills {\n\tchildren: React.ReactNode\n\tkind?: EBadgeKind,\n\tsize?: EBadgeSize,\n\ticon?: React.ReactNode,\n\trounded?: boolean,\n\tclassName?: string\n}\n\nconst kindClasses = {\n\t[EBadgeKind.PRIMARY]: \"bg-primary-100 text-primary-700\",\n\t[EBadgeKind.ERROR]: \"bg-error-300 text-error-700\",\n\t[EBadgeKind.WARNING]: \"bg-warning-300 text-warning-700\",\n\t[EBadgeKind.ACCENT]: \"bg-accent-300 text-accent-700\",\n\t[EBadgeKind.PRIMARY_ALT]: \"bg-primary-300 text-primary-800\",\n\t[EBadgeKind.SECONDARY]: \"bg-white text-secondary-300 ring-1 ring-secondary-alt-300\",\n\t[EBadgeKind.ACCENT_ALT]: \"bg-accent-alt-500 text-secondary-700\",\n};\n\nconst sizeEnums = {\n\t[EBadgeSize.SMALL]: ETypographySizes.XXS,\n\t[EBadgeSize.MEDIUM]: ETypographySizes.XS,\n\t[EBadgeSize.LARGE]: ETypographySizes.SM,\n};\n\nexport const UiPills: React.FC<IUiPills> = ({\n\tchildren,\n\tkind = EBadgeKind.PRIMARY,\n\tsize = EBadgeSize.SMALL,\n\tclassName,\n\ticon,\n\trounded = false\n}) => {\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-pills\",\n\t\t\t\"grid grid-flow-col justify-start w-max\",\n\t\t\t\"items-center\",\n\t\t\t\"gap-xxxs\",\n\t\t\t\"px-xxs py-xxxs\",\n\t\t\t\"overflow-hidden\",\n\t\t\trounded\n\t\t\t\t? \"rounded-full\"\n\t\t\t\t: \"rounded-sm\",\n\t\t\tkindClasses[kind],\n\t\t\tclassName\n\t\t) }>\n\t\t\t{ icon }\n\t\t\t{ children\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography size={ sizeEnums[size] } weight={ ETextWeight.SEMI_BOLD } className=\"whitespace-nowrap\">\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\t\t</div>\n\t);\n};\n"],"names":["kindClasses","EBadgeKind","sizeEnums","EBadgeSize","ETypographySizes","UiPills","children","kind","size","className","icon","rounded","jsxs","cx","jsx","UiTypography","ETextWeight"],"mappings":";;;;;;AAcA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,KAAK,GAAG;AAAA,EACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,WAAW,GAAG;AAAA,EAC1B,CAACA,EAAW,SAAS,GAAG;AAAA,EACxB,CAACA,EAAW,UAAU,GAAG;AAC1B,GAEMC,IAAY;AAAA,EACjB,CAACC,EAAW,KAAK,GAAGC,EAAiB;AAAA,EACrC,CAACD,EAAW,MAAM,GAAGC,EAAiB;AAAA,EACtC,CAACD,EAAW,KAAK,GAAGC,EAAiB;AACtC,GAEaC,IAA8B,CAAC;AAAA,EAC3C,UAAAC;AAAA,EACA,MAAAC,IAAON,EAAW;AAAA,EAClB,MAAAO,IAAOL,EAAW;AAAA,EAClB,WAAAM;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AACX,MAEE,gBAAAC,EAAC,SAAI,WAAYC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACAF,IACG,iBACA;AAAA,EACHX,EAAYO,CAAI;AAAA,EAChBE;AAEE,GAAA,UAAA;AAAA,EAAAC;AAAA,EACAJ,IAEA,gBAAAQ,EAACC,GAAa,EAAA,MAAOb,EAAUM,CAAI,GAAI,QAASQ,EAAY,WAAY,WAAU,qBAC/E,UAAAV,EACH,CAAA,IAEC;AAAA,GACJ;"}
+{"version":3,"file":"UiPills.js","sources":["../../../src/components/UiPills/UiPills.tsx"],"sourcesContent":["import React from \"react\";\nimport { EBadgeKind, EBadgeSize } from \"./_types.ts\";\nimport { ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\nimport cx from \"classnames\";\n\ninterface IUiPills {\n\tchildren: React.ReactNode\n\tkind?: EBadgeKind,\n\tsize?: EBadgeSize,\n\ticon?: React.ReactNode,\n\trounded?: boolean,\n\tclassName?: string\n}\n\nconst kindClasses = {\n\t[EBadgeKind.PRIMARY]: \"bg-primary-100 text-primary-700\",\n\t[EBadgeKind.ERROR]: \"bg-error-300 text-error-700\",\n\t[EBadgeKind.WARNING]: \"bg-warning-300 text-warning-700\",\n\t[EBadgeKind.ACCENT]: \"bg-accent-300 text-accent-700\",\n\t[EBadgeKind.PRIMARY_ALT]: \"bg-primary-300 text-primary-800\",\n\t[EBadgeKind.SECONDARY]: \"bg-white text-secondary-300 ring-1 ring-secondary-alt-300\",\n\t[EBadgeKind.ACCENT_ALT]: \"bg-accent-alt-500 text-secondary-700\",\n};\n\nconst sizeEnums = {\n\t[EBadgeSize.SMALL]: ETypographySizes.XXS,\n\t[EBadgeSize.MEDIUM]: ETypographySizes.XS,\n\t[EBadgeSize.LARGE]: ETypographySizes.SM,\n};\n\nexport const UiPills: React.FC<IUiPills> = ({\n\tchildren,\n\tkind = EBadgeKind.PRIMARY,\n\tsize = EBadgeSize.SMALL,\n\tclassName,\n\ticon,\n\trounded = false\n}) => {\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-pills\",\n\t\t\t\"grid w-max grid-flow-col justify-start\",\n\t\t\t\"items-center\",\n\t\t\t\"gap-xxxs\",\n\t\t\t\"px-xxs py-xxxs\",\n\t\t\t\"overflow-hidden\",\n\t\t\trounded\n\t\t\t\t? \"rounded-full\"\n\t\t\t\t: \"rounded-sm\",\n\t\t\tkindClasses[kind],\n\t\t\tclassName\n\t\t) }>\n\t\t\t{ icon }\n\t\t\t{ children\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography size={ sizeEnums[size] } weight={ ETextWeight.SEMI_BOLD } className=\"whitespace-nowrap\">\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\t\t</div>\n\t);\n};\n"],"names":["kindClasses","EBadgeKind","sizeEnums","EBadgeSize","ETypographySizes","UiPills","children","kind","size","className","icon","rounded","jsxs","cx","jsx","UiTypography","ETextWeight"],"mappings":";;;;;;AAcA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,KAAK,GAAG;AAAA,EACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,WAAW,GAAG;AAAA,EAC1B,CAACA,EAAW,SAAS,GAAG;AAAA,EACxB,CAACA,EAAW,UAAU,GAAG;AAC1B,GAEMC,IAAY;AAAA,EACjB,CAACC,EAAW,KAAK,GAAGC,EAAiB;AAAA,EACrC,CAACD,EAAW,MAAM,GAAGC,EAAiB;AAAA,EACtC,CAACD,EAAW,KAAK,GAAGC,EAAiB;AACtC,GAEaC,IAA8B,CAAC;AAAA,EAC3C,UAAAC;AAAA,EACA,MAAAC,IAAON,EAAW;AAAA,EAClB,MAAAO,IAAOL,EAAW;AAAA,EAClB,WAAAM;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AACX,MAEE,gBAAAC,EAAC,SAAI,WAAYC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACAF,IACG,iBACA;AAAA,EACHX,EAAYO,CAAI;AAAA,EAChBE;AAEE,GAAA,UAAA;AAAA,EAAAC;AAAA,EACAJ,IAEA,gBAAAQ,EAACC,GAAa,EAAA,MAAOb,EAAUM,CAAI,GAAI,QAASQ,EAAY,WAAY,WAAU,qBAC/E,UAAAV,EACH,CAAA,IAEC;AAAA,GACJ;"}

package/components/UiPlainRadio/UiPlainRadio.js

@@ -29,7 +29,7 @@ const v = ({
         "input",
         {
           className: i(
-            " absolute",
+            "absolute",
             "appearance-none",
             "peer"
           ),
@@ -61,7 +61,11 @@ const v = ({
             "rounded-xl",
             "size-full",
             "text-sm",
-            r ? "ring-secondary-alt-300" : "peer-checked:ring-primary-600 peer-checked:outline peer-checked:outline-primary-600",
+            r ? "ring-secondary-alt-300" : `
+						peer-checked:ring-primary-600
+						peer-checked:outline
+						peer-checked:outline-primary-600
+					`,
             e ? "ring-2" : "ring",
             {
               "ring-secondary-alt-600 hover:ring-secondary-500": !r && !e
@@ -79,7 +83,7 @@ const v = ({
               e ? "ring-2" : "ring",
               r ? "ring-secondary-alt-300" : "ring-primary-600",
               {
-                "ring-secondary-alt-600 group-hover:ring-secondary-500  group-active:ring-secondary-500": !r && !e
+                "ring-secondary-alt-600 group-hover:ring-secondary-500 group-active:ring-secondary-500": !r && !e
               }
             ), children: /* @__PURE__ */ n(
               "span",
@@ -102,9 +106,16 @@ const v = ({
                 )
               }
             ) }),
-            /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ a("div", { className: `
+					flex
+					flex-col
+				`, children: [
               s,
-              t ? /* @__PURE__ */ n("div", { className: "text-xs font-normal text-secondary-alt-400", children: t }) : null
+              t ? /* @__PURE__ */ n("div", { className: `
+								text-xs
+								font-normal
+								text-secondary-alt-400
+							`, children: t }) : null
             ] })
           ]
         }