@nswds/app 1.27.0 → 1.28.0

package/dist/globals.css

@@ -116,6 +116,11 @@
     --color-grey-600: oklch(0.426426783985819 0.011202235626284581 232.61715023407646);
     --color-grey-800: oklch(0.26941250740174183 0.010359971488680036 242.08383926925922);
     --color-grey-900: oklch(0.17511812981113217 0.007251980042076026 242.08383926925922);
+    --color-success-450: oklch(0.6326270919832794 0.153487552492673 142.8252122365381);
+    --color-success-500: oklch(0.6047649705534097 0.16397310554979067 142.81705960187193);
+    --color-success-550: oklch(0.57690284912354 0.17445865860690835 142.80890696720576);
+    --color-danger-450: oklch(0.5961466901234453 0.1600594003984286 18.251840020312933);
+    --color-danger-500: oklch(0.5647631027123693 0.17094795668235796 18.194273652364046);
   }
 }
 @layer base {
@@ -1371,6 +1376,9 @@
   .border-grey-200 {
     border-color: oklch(0.9400701096450296 0 0);
   }
+  .border-grey-300 {
+    border-color: oklch(0.9015833129261941 0.0038881189007590215 228.8687380011113);
+  }
   .border-grey-950 {
     border-color: oklch(0.12797094101582737 0.005697984318774021 242.08383926925922);
   }
@@ -1389,12 +1397,18 @@
   .border-nsw-grey-600 {
     border-color: var(--color-nsw-grey-600);
   }
+  .border-primary-500 {
+    border-color: oklch(0.719602022988773 0.1609881523353869 242.17574150873253);
+  }
   .border-red-400 {
     border-color: var(--color-red-400);
   }
   .border-slate-200 {
     border-color: var(--color-slate-200);
   }
+  .border-success-450 {
+    border-color: var(--color-success-450);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1449,8 +1463,8 @@
   .bg-border {
     background-color: var(--border);
   }
-  .bg-gray-300 {
-    background-color: var(--color-gray-300);
+  .bg-danger-450 {
+    background-color: var(--color-danger-450);
   }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
@@ -1467,6 +1481,9 @@
   .bg-grey-100 {
     background-color: oklch(0.9700350548225147 0 0);
   }
+  .bg-grey-300 {
+    background-color: oklch(0.9015833129261941 0.0038881189007590215 228.8687380011113);
+  }
   .bg-grey-950 {
     background-color: oklch(0.12797094101582737 0.005697984318774021 242.08383926925922);
   }
@@ -1497,6 +1514,9 @@
   .bg-nsw-grey-800 {
     background-color: var(--color-nsw-grey-800);
   }
+  .bg-primary-500 {
+    background-color: oklch(0.719602022988773 0.1609881523353869 242.17574150873253);
+  }
   .bg-primary-800 {
     background-color: oklch(0.2899986864508513 0.11729574451023282 259.841936589881);
   }
@@ -1509,6 +1529,12 @@
   .bg-purple-50 {
     background-color: var(--color-purple-50);
   }
+  .bg-success-450 {
+    background-color: var(--color-success-450);
+  }
+  .bg-success-500 {
+    background-color: var(--color-success-500);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2039,6 +2065,9 @@
   .text-nsw-grey-800 {
     color: var(--color-nsw-grey-800);
   }
+  .text-primary-500 {
+    color: oklch(0.719602022988773 0.1609881523353869 242.17574150873253);
+  }
   .text-primary-700 {
     color: oklch(0.43255566986372795 0.17356468700683536 260.29913478593846);
   }
@@ -2063,6 +2092,9 @@
   .text-slate-900 {
     color: var(--color-slate-900);
   }
+  .text-success-450 {
+    color: var(--color-success-450);
+  }
   .text-transparent {
     color: transparent;
   }
@@ -2526,6 +2558,13 @@
       background-color: color-mix(in oklab, oklch(0.2899986864508513 0.11729574451023282 259.841936589881) 10%, transparent);
     }
   }
+  .group-hover\:border-danger-500 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        border-color: var(--color-danger-500);
+      }
+    }
+  }
   .group-hover\:border-gray-400 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2533,10 +2572,31 @@
       }
     }
   }
-  .group-hover\:bg-gray-300 {
+  .group-hover\:border-primary-550 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        background-color: var(--color-gray-300);
+        border-color: oklch(0.6473573381326887 0.19541089091941238 251.4660372453642);
+      }
+    }
+  }
+  .group-hover\:border-success-550 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        border-color: var(--color-success-550);
+      }
+    }
+  }
+  .group-hover\:bg-danger-500 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-danger-500);
+      }
+    }
+  }
+  .group-hover\:bg-grey-300 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: oklch(0.9015833129261941 0.0038881189007590215 228.8687380011113);
       }
     }
   }
@@ -2547,6 +2607,27 @@
       }
     }
   }
+  .group-hover\:bg-primary-550 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: oklch(0.6473573381326887 0.19541089091941238 251.4660372453642);
+      }
+    }
+  }
+  .group-hover\:bg-success-450 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-success-450);
+      }
+    }
+  }
+  .group-hover\:bg-success-500 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-success-500);
+      }
+    }
+  }
   .group-hover\:fill-nsw-grey-900 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {

package/dist/index.cjs

@@ -7454,7 +7454,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.26.0"};
+  version: "1.27.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -8526,7 +8526,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+              className: "bg-grey-300 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8536,16 +8536,16 @@ var StepIndicator = React6__namespace.forwardRef(
               className: "group relative flex items-center",
               onClick: onLinkClick,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "-ml-1 flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-tertiary-lighter relative z-10 flex size-8 items-center justify-center rounded-full border-2 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-tertiary-lighter relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "-ml-1 flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-primary-500 relative z-10 flex size-8 items-center justify-center rounded-full border-2 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-primary-500 relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(
                   Icons.more_horiz,
                   {
                     "aria-hidden": "true",
-                    className: "text-tertiary-lighter size-4"
+                    className: "text-primary-500 size-4"
                   }
                 ) }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-3 flex min-w-0 flex-col", children: [
-                  step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-tertiary-lighter text-sm font-semibold dark:text-slate-400", children: step.title }),
-                  step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-tertiary-lighter text-sm font-semibold dark:text-slate-400", children: step.description })
+                  step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-500 text-sm font-semibold dark:text-slate-400", children: step.title }),
+                  step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-500 text-sm font-semibold dark:text-slate-400", children: step.description })
                 ] })
               ]
             }
@@ -8555,7 +8555,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+              className: "bg-grey-300 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8566,10 +8566,10 @@ var StepIndicator = React6__namespace.forwardRef(
               className: "group relative flex items-center",
               onClick: onLinkClick,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-tertiary-lighter relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-tertiary-lighter size-2 rounded-full" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-primary-500 relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary-500 size-2 rounded-full" }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-4 flex min-w-0 flex-col", children: [
-                  step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-tertiary-lighter text-sm font-semibold dark:text-slate-400", children: step.title }),
-                  step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-tertiary-lighter text-sm font-semibold dark:text-slate-400", children: step.description })
+                  step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-500 text-sm font-semibold dark:text-slate-400", children: step.title }),
+                  step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-500 text-sm font-semibold dark:text-slate-400", children: step.description })
                 ] })
               ]
             }
@@ -8579,7 +8579,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "bg-success absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
+              className: "bg-success-500 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8589,7 +8589,7 @@ var StepIndicator = React6__namespace.forwardRef(
               className: "group relative flex items-center",
               onClick: onLinkClick,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-success-light group-hover:bg-success group-hover:border-success-dark relative z-10 flex size-6 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "aria-hidden": "true", className: "size-4 text-white" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-success-450 group-hover:bg-success-500 group-hover:border-success-550 relative z-10 flex size-6 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "aria-hidden": "true", className: "size-4 text-white" }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-4 flex min-w-0 flex-col", children: [
                   step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.title }),
                   step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.description })
@@ -8602,7 +8602,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+              className: "bg-grey-300 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8612,7 +8612,7 @@ var StepIndicator = React6__namespace.forwardRef(
               className: "group relative flex items-center",
               onClick: onLinkClick,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-success-light group-hover:bg-success-light text-success-light relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white group-hover:text-white", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "aria-hidden": "true", className: "size-4" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-success-450 group-hover:bg-success-450 text-success-450 relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white group-hover:text-white", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "aria-hidden": "true", className: "size-4" }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-4 flex min-w-0 flex-col", children: [
                   step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.title }),
                   step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.description })
@@ -8625,7 +8625,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+              className: "bg-grey-300 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8635,7 +8635,7 @@ var StepIndicator = React6__namespace.forwardRef(
               className: "group relative flex items-center",
               onClick: onLinkClick,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-tertiary-lighter group-hover:border-tertiary-light group-hover:bg-tertiary-light text-tertiary-lighter relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white group-hover:text-white", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.more_horiz, { "aria-hidden": "true", className: "size-4" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-primary-500 group-hover:border-primary-550 group-hover:bg-primary-550 text-primary-500 relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white group-hover:text-white", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.more_horiz, { "aria-hidden": "true", className: "size-4" }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-4 flex min-w-0 flex-col", children: [
                   step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.title }),
                   step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.description })
@@ -8648,7 +8648,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "bg-error-light absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
+              className: "bg-danger-450 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8658,7 +8658,7 @@ var StepIndicator = React6__namespace.forwardRef(
               className: "group relative flex items-center",
               onClick: onLinkClick,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-error-light group-hover:bg-error group-hover:border-error relative z-10 flex size-6 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.exclamation, { "aria-hidden": "true", className: "size-4 text-white" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-danger-450 group-hover:bg-danger-500 group-hover:border-danger-500 relative z-10 flex size-6 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.exclamation, { "aria-hidden": "true", className: "size-4 text-white" }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-4 flex min-w-0 flex-col", children: [
                   step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.title }),
                   step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.description })
@@ -8671,7 +8671,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+              className: "bg-grey-300 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8681,7 +8681,7 @@ var StepIndicator = React6__namespace.forwardRef(
               className: "group relative flex items-center",
               onClick: onLinkClick,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 flex size-6 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-transparent group-hover:bg-gray-300" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-grey-300 relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white group-hover:border-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "group-hover:bg-grey-300 size-2 rounded-full bg-transparent" }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-4 flex min-w-0 flex-col", children: [
                   step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.title }),
                   step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.description })
@@ -8694,7 +8694,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+              className: "bg-grey-300 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8717,7 +8717,7 @@ var StepIndicator = React6__namespace.forwardRef(
             "div",
             {
               "aria-hidden": "true",
-              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+              className: "bg-grey-300 absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8727,7 +8727,7 @@ var StepIndicator = React6__namespace.forwardRef(
               className: "group relative flex items-center",
               onClick: onLinkClick,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 flex size-6 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-transparent group-hover:bg-gray-300" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-9 items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-grey-300 relative z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white group-hover:border-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "group-hover:bg-grey-300 size-2 rounded-full bg-transparent" }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-4 flex min-w-0 flex-col", children: [
                   step.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.title }),
                   step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-nsw-grey-700 hover:text-nsw-grey-800 text-sm dark:text-slate-400 dark:hover:text-slate-300", children: step.description })
@@ -8742,27 +8742,34 @@ var StepIndicator = React6__namespace.forwardRef(
   }
 );
 StepIndicator.displayName = "StepIndicator";
+function defaultGetStatus(id, storeStatus) {
+  const status = storeStatus[id];
+  if (status === "completed" || status === "saved" || status === "in-progress" || status === "error" || status === "not-started" || status === "cannot-start" || status === "default") {
+    return status;
+  }
+  return "default";
+}
 function StepNavigation({
   className,
   navigation,
-  useFormStore
+  useFormStore,
+  getStatus = defaultGetStatus
 }) {
   const { formStatus } = useFormStore();
-  const navigationWithStatus = navigation.map((section) => ({
-    ...section,
-    links: section.links.map((link) => {
-      return {
+  const navigationWithStatus = React6.useMemo(
+    () => navigation.map((section) => ({
+      ...section,
+      links: section.links.map((link) => ({
         ...link,
-        status: formStatus[camelCase(
-          `${section.title.replace(/[|&;$%@"<>()+,]/g, "")} ${link.title.replace(/[|&;$%@"<>()+,]/g, "")}`
-        )] || "unknown"
-      };
-    })
-  }));
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "space-y-9", children: navigationWithStatus.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+        status: getStatus(link.id ?? "", formStatus)
+      }))
+    })),
+    [navigation, formStatus, getStatus]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "space-y-9", children: navigationWithStatus.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display font-medium text-slate-900 dark:text-white", children: section.title }),
     /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { className: "mt-2 lg:mt-4", array: section.links })
-  ] }, section.title)) }) }) });
+  ] }, section.title)) }) });
 }
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(