@retinalabsllc/zairusjs 5.1.60 → 5.1.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -503,7 +503,7 @@ function AuthFormInner({
503
503
  maxLength: 1,
504
504
  value: digit,
505
505
  onChange: (e) => handleOtpChange(index, e.target.value),
506
- className: "w-10 h-10 text-center text-xl bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
506
+ className: "w-8 h-8 text-center text-lg bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
507
507
  }
508
508
  ))), /* @__PURE__ */ import_react5.default.createElement(
509
509
  ThreeDActionButton,
@@ -763,7 +763,7 @@ function AuthFormInner2({
763
763
  maxLength: 1,
764
764
  value: digit,
765
765
  onChange: (e) => handleOtpChange(index, e.target.value),
766
- className: "w-10 h-10 text-center text-xl bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
766
+ className: "w-8 h-8 text-center text-lg bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
767
767
  }
768
768
  ))), /* @__PURE__ */ import_react6.default.createElement(
769
769
  ThreeDActionButton,
@@ -1523,7 +1523,7 @@ var PageSpinner = ({
1523
1523
  {
1524
1524
  icon: import_core_free_icons4.Loading03Icon,
1525
1525
  size,
1526
- className: `animate-spin mb-4 ${iconClassName}`
1526
+ className: `animate-spin text-white mb-4 ${iconClassName}`
1527
1527
  }
1528
1528
  ))
1529
1529
  );
@@ -2380,15 +2380,16 @@ var UniversalProfileSettings = ({
2380
2380
  },
2381
2381
  disabled: true
2382
2382
  }
2383
- ), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center justify-between mt-1" }, /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, "To change your email address, please contact support."), /* @__PURE__ */ import_react39.default.createElement(
2383
+ ), /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 truncate" }, "To change your email address, please contact support.")), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-xs text-white block truncate" }, accountStatus)), /* @__PURE__ */ import_react39.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-xs text-white block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A")), /* @__PURE__ */ import_react39.default.createElement("div", { className: "min-w-0 pl-4" }, /* @__PURE__ */ import_react39.default.createElement(
2384
2384
  "button",
2385
2385
  {
2386
2386
  type: "button",
2387
2387
  onClick: () => setIsPinModalOpen(true),
2388
- className: "text-[11px] text-neutral-400 hover:text-white transition-colors underline-offset-4 outline-none"
2388
+ "aria-label": "PIN Settings",
2389
+ className: "w-9 h-9 flex items-center justify-center border border-neutral-700 rounded-full text-white transition-colors outline-none"
2389
2390
  },
2390
- "PIN Management Settings"
2391
- ))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-xs text-white block truncate" }, accountStatus)), /* @__PURE__ */ import_react39.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-xs text-white block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A"))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col-reverse sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto shrink-0" }, hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ import_react39.default.createElement(
2391
+ /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.LockKeyIcon, size: 17, className: "text-white" })
2392
+ ))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col-reverse sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto shrink-0" }, hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ import_react39.default.createElement(
2392
2393
  "button",
2393
2394
  {
2394
2395
  type: "button",
@@ -2408,40 +2409,40 @@ var UniversalProfileSettings = ({
2408
2409
  className: "min-w-32 w-full sm:w-auto"
2409
2410
  },
2410
2411
  "Save Changes"
2411
- ))))), isPinModalOpen && /* @__PURE__ */ import_react39.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: closePinModal }), /* @__PURE__ */ import_react39.default.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, hasPin ? "Change PIN" : "Create PIN"), /* @__PURE__ */ import_react39.default.createElement("button", { onClick: closePinModal, disabled: isPinSubmitting, className: "text-neutral-500 hover:text-white transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-6" }, isPinLoading ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.Loading03Icon, size: 28, className: "animate-spin text-neutral-500 mb-4" })) : /* @__PURE__ */ import_react39.default.createElement("form", { onSubmit: handlePinSubmit, className: "flex flex-col gap-5" }, hasPin && /* @__PURE__ */ import_react39.default.createElement("div", null, /* @__PURE__ */ import_react39.default.createElement("label", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Old PIN"), /* @__PURE__ */ import_react39.default.createElement(
2412
- "input",
2412
+ ))))), isPinModalOpen && /* @__PURE__ */ import_react39.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: closePinModal }), /* @__PURE__ */ import_react39.default.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, hasPin ? "Change PIN" : "Create PIN"), /* @__PURE__ */ import_react39.default.createElement("button", { onClick: closePinModal, disabled: isPinSubmitting, className: "text-neutral-500 hover:text-white transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-6" }, isPinLoading ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.Loading03Icon, size: 28, className: "animate-spin text-neutral-500 mb-4" })) : /* @__PURE__ */ import_react39.default.createElement("form", { onSubmit: handlePinSubmit, className: "flex flex-col gap-6" }, hasPin && /* @__PURE__ */ import_react39.default.createElement(
2413
+ TextInput,
2413
2414
  {
2414
2415
  type: "password",
2416
+ label: "Old PIN",
2415
2417
  maxLength: 4,
2416
2418
  disabled: isPinSubmitting,
2417
2419
  value: oldPin,
2418
- onChange: (e) => handlePinInput(e.target.value, setOldPin),
2419
- className: "w-full px-4 py-2.5 bg-neutral-950 border border-neutral-800 rounded-xl text-white text-[13px] outline-none focus:border-neutral-600 transition-colors placeholder-neutral-700 tracking-[0.2em]",
2420
+ onChange: (val) => handlePinInput(val, setOldPin),
2420
2421
  placeholder: "\u2022\u2022\u2022\u2022"
2421
2422
  }
2422
- )), /* @__PURE__ */ import_react39.default.createElement("div", null, /* @__PURE__ */ import_react39.default.createElement("label", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, hasPin ? "New PIN" : "Enter 4-Digit PIN"), /* @__PURE__ */ import_react39.default.createElement(
2423
- "input",
2423
+ ), /* @__PURE__ */ import_react39.default.createElement(
2424
+ TextInput,
2424
2425
  {
2425
2426
  type: "password",
2427
+ label: hasPin ? "New PIN" : "Enter 4-Digit PIN",
2426
2428
  maxLength: 4,
2427
2429
  disabled: isPinSubmitting,
2428
2430
  value: newPin,
2429
- onChange: (e) => handlePinInput(e.target.value, setNewPin),
2430
- className: "w-full px-4 py-2.5 bg-neutral-950 border border-neutral-800 rounded-xl text-white text-[13px] outline-none focus:border-neutral-600 transition-colors placeholder-neutral-700 tracking-[0.2em]",
2431
+ onChange: (val) => handlePinInput(val, setNewPin),
2431
2432
  placeholder: "\u2022\u2022\u2022\u2022"
2432
2433
  }
2433
- )), /* @__PURE__ */ import_react39.default.createElement("div", null, /* @__PURE__ */ import_react39.default.createElement("label", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Retype New PIN"), /* @__PURE__ */ import_react39.default.createElement(
2434
- "input",
2434
+ ), /* @__PURE__ */ import_react39.default.createElement(
2435
+ TextInput,
2435
2436
  {
2436
2437
  type: "password",
2438
+ label: "Retype New PIN",
2437
2439
  maxLength: 4,
2438
2440
  disabled: isPinSubmitting,
2439
2441
  value: confirmPin,
2440
- onChange: (e) => handlePinInput(e.target.value, setConfirmPin),
2441
- className: "w-full px-4 py-2.5 bg-neutral-950 border border-neutral-800 rounded-xl text-white text-[13px] outline-none focus:border-neutral-600 transition-colors placeholder-neutral-700 tracking-[0.2em]",
2442
+ onChange: (val) => handlePinInput(val, setConfirmPin),
2442
2443
  placeholder: "\u2022\u2022\u2022\u2022"
2443
2444
  }
2444
- )), /* @__PURE__ */ import_react39.default.createElement("div", { className: "pt-4" }, /* @__PURE__ */ import_react39.default.createElement(
2445
+ ), /* @__PURE__ */ import_react39.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ import_react39.default.createElement(
2445
2446
  ThreeDActionButton,
2446
2447
  {
2447
2448
  type: "submit",
package/dist/index.mjs CHANGED
@@ -432,7 +432,7 @@ function AuthFormInner({
432
432
  maxLength: 1,
433
433
  value: digit,
434
434
  onChange: (e) => handleOtpChange(index, e.target.value),
435
- className: "w-10 h-10 text-center text-xl bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
435
+ className: "w-8 h-8 text-center text-lg bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
436
436
  }
437
437
  ))), /* @__PURE__ */ React4.createElement(
438
438
  ThreeDActionButton,
@@ -692,7 +692,7 @@ function AuthFormInner2({
692
692
  maxLength: 1,
693
693
  value: digit,
694
694
  onChange: (e) => handleOtpChange(index, e.target.value),
695
- className: "w-10 h-10 text-center text-xl bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
695
+ className: "w-8 h-8 text-center text-lg bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
696
696
  }
697
697
  ))), /* @__PURE__ */ React5.createElement(
698
698
  ThreeDActionButton,
@@ -1452,7 +1452,7 @@ var PageSpinner = ({
1452
1452
  {
1453
1453
  icon: Loading03Icon3,
1454
1454
  size,
1455
- className: `animate-spin mb-4 ${iconClassName}`
1455
+ className: `animate-spin text-white mb-4 ${iconClassName}`
1456
1456
  }
1457
1457
  ))
1458
1458
  );
@@ -2211,7 +2211,8 @@ import { HugeiconsIcon as HugeiconsIcon14 } from "@hugeicons/react";
2211
2211
  import {
2212
2212
  CircleLock02Icon as CircleLock02Icon2,
2213
2213
  CancelCircleIcon as CancelCircleIcon2,
2214
- Loading03Icon as Loading03Icon5
2214
+ Loading03Icon as Loading03Icon5,
2215
+ LockKeyIcon
2215
2216
  } from "@hugeicons/core-free-icons";
2216
2217
  var UniversalProfileSettings = ({
2217
2218
  initialFirstName,
@@ -2327,15 +2328,16 @@ var UniversalProfileSettings = ({
2327
2328
  },
2328
2329
  disabled: true
2329
2330
  }
2330
- ), /* @__PURE__ */ React26.createElement("div", { className: "flex items-center justify-between mt-1" }, /* @__PURE__ */ React26.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, "To change your email address, please contact support."), /* @__PURE__ */ React26.createElement(
2331
+ ), /* @__PURE__ */ React26.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 truncate" }, "To change your email address, please contact support.")), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ React26.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ React26.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React26.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ React26.createElement("span", { className: "text-xs text-white block truncate" }, accountStatus)), /* @__PURE__ */ React26.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React26.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ React26.createElement("span", { className: "text-xs text-white block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A")), /* @__PURE__ */ React26.createElement("div", { className: "min-w-0 pl-4" }, /* @__PURE__ */ React26.createElement(
2331
2332
  "button",
2332
2333
  {
2333
2334
  type: "button",
2334
2335
  onClick: () => setIsPinModalOpen(true),
2335
- className: "text-[11px] text-neutral-400 hover:text-white transition-colors underline-offset-4 outline-none"
2336
+ "aria-label": "PIN Settings",
2337
+ className: "w-9 h-9 flex items-center justify-center border border-neutral-700 rounded-full text-white transition-colors outline-none"
2336
2338
  },
2337
- "PIN Management Settings"
2338
- ))), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ React26.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ React26.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React26.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ React26.createElement("span", { className: "text-xs text-white block truncate" }, accountStatus)), /* @__PURE__ */ React26.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React26.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ React26.createElement("span", { className: "text-xs text-white block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A"))), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col-reverse sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto shrink-0" }, hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ React26.createElement(
2339
+ /* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: LockKeyIcon, size: 17, className: "text-white" })
2340
+ ))), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col-reverse sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto shrink-0" }, hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ React26.createElement(
2339
2341
  "button",
2340
2342
  {
2341
2343
  type: "button",
@@ -2355,40 +2357,40 @@ var UniversalProfileSettings = ({
2355
2357
  className: "min-w-32 w-full sm:w-auto"
2356
2358
  },
2357
2359
  "Save Changes"
2358
- ))))), isPinModalOpen && /* @__PURE__ */ React26.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React26.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: closePinModal }), /* @__PURE__ */ React26.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React26.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React26.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, hasPin ? "Change PIN" : "Create PIN"), /* @__PURE__ */ React26.createElement("button", { onClick: closePinModal, disabled: isPinSubmitting, className: "text-neutral-500 hover:text-white transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React26.createElement("div", { className: "p-6" }, isPinLoading ? /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: Loading03Icon5, size: 28, className: "animate-spin text-neutral-500 mb-4" })) : /* @__PURE__ */ React26.createElement("form", { onSubmit: handlePinSubmit, className: "flex flex-col gap-5" }, hasPin && /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("label", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Old PIN"), /* @__PURE__ */ React26.createElement(
2359
- "input",
2360
+ ))))), isPinModalOpen && /* @__PURE__ */ React26.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React26.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: closePinModal }), /* @__PURE__ */ React26.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React26.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React26.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, hasPin ? "Change PIN" : "Create PIN"), /* @__PURE__ */ React26.createElement("button", { onClick: closePinModal, disabled: isPinSubmitting, className: "text-neutral-500 hover:text-white transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React26.createElement("div", { className: "p-6" }, isPinLoading ? /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: Loading03Icon5, size: 28, className: "animate-spin text-neutral-500 mb-4" })) : /* @__PURE__ */ React26.createElement("form", { onSubmit: handlePinSubmit, className: "flex flex-col gap-6" }, hasPin && /* @__PURE__ */ React26.createElement(
2361
+ TextInput,
2360
2362
  {
2361
2363
  type: "password",
2364
+ label: "Old PIN",
2362
2365
  maxLength: 4,
2363
2366
  disabled: isPinSubmitting,
2364
2367
  value: oldPin,
2365
- onChange: (e) => handlePinInput(e.target.value, setOldPin),
2366
- className: "w-full px-4 py-2.5 bg-neutral-950 border border-neutral-800 rounded-xl text-white text-[13px] outline-none focus:border-neutral-600 transition-colors placeholder-neutral-700 tracking-[0.2em]",
2368
+ onChange: (val) => handlePinInput(val, setOldPin),
2367
2369
  placeholder: "\u2022\u2022\u2022\u2022"
2368
2370
  }
2369
- )), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("label", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, hasPin ? "New PIN" : "Enter 4-Digit PIN"), /* @__PURE__ */ React26.createElement(
2370
- "input",
2371
+ ), /* @__PURE__ */ React26.createElement(
2372
+ TextInput,
2371
2373
  {
2372
2374
  type: "password",
2375
+ label: hasPin ? "New PIN" : "Enter 4-Digit PIN",
2373
2376
  maxLength: 4,
2374
2377
  disabled: isPinSubmitting,
2375
2378
  value: newPin,
2376
- onChange: (e) => handlePinInput(e.target.value, setNewPin),
2377
- className: "w-full px-4 py-2.5 bg-neutral-950 border border-neutral-800 rounded-xl text-white text-[13px] outline-none focus:border-neutral-600 transition-colors placeholder-neutral-700 tracking-[0.2em]",
2379
+ onChange: (val) => handlePinInput(val, setNewPin),
2378
2380
  placeholder: "\u2022\u2022\u2022\u2022"
2379
2381
  }
2380
- )), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("label", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Retype New PIN"), /* @__PURE__ */ React26.createElement(
2381
- "input",
2382
+ ), /* @__PURE__ */ React26.createElement(
2383
+ TextInput,
2382
2384
  {
2383
2385
  type: "password",
2386
+ label: "Retype New PIN",
2384
2387
  maxLength: 4,
2385
2388
  disabled: isPinSubmitting,
2386
2389
  value: confirmPin,
2387
- onChange: (e) => handlePinInput(e.target.value, setConfirmPin),
2388
- className: "w-full px-4 py-2.5 bg-neutral-950 border border-neutral-800 rounded-xl text-white text-[13px] outline-none focus:border-neutral-600 transition-colors placeholder-neutral-700 tracking-[0.2em]",
2390
+ onChange: (val) => handlePinInput(val, setConfirmPin),
2389
2391
  placeholder: "\u2022\u2022\u2022\u2022"
2390
2392
  }
2391
- )), /* @__PURE__ */ React26.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React26.createElement(
2393
+ ), /* @__PURE__ */ React26.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React26.createElement(
2392
2394
  ThreeDActionButton,
2393
2395
  {
2394
2396
  type: "submit",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "5.1.60",
3
+ "version": "5.1.70",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",