@nswds/app 1.26.0 → 1.27.0

package/dist/globals.css

@@ -516,6 +516,12 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .ml-5 {
     margin-left: calc(var(--spacing) * 5);
   }
@@ -723,6 +729,12 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .w-0 {
+    width: calc(var(--spacing) * 0);
+  }
+  .w-0\.5 {
+    width: calc(var(--spacing) * 0.5);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -1123,6 +1135,13 @@
       margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-9 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 9) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 9) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-12 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1430,6 +1449,9 @@
   .bg-border {
     background-color: var(--border);
   }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
@@ -1685,6 +1707,9 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -2008,6 +2033,9 @@
   .text-nsw-grey-600 {
     color: var(--color-nsw-grey-600);
   }
+  .text-nsw-grey-700 {
+    color: var(--color-nsw-grey-700);
+  }
   .text-nsw-grey-800 {
     color: var(--color-nsw-grey-800);
   }
@@ -2498,6 +2526,27 @@
       background-color: color-mix(in oklab, oklch(0.2899986864508513 0.11729574451023282 259.841936589881) 10%, transparent);
     }
   }
+  .group-hover\:border-gray-400 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        border-color: var(--color-gray-400);
+      }
+    }
+  }
+  .group-hover\:bg-gray-300 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-gray-300);
+      }
+    }
+  }
+  .group-hover\:bg-nsw-grey-800 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-nsw-grey-800);
+      }
+    }
+  }
   .group-hover\:fill-nsw-grey-900 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2505,6 +2554,13 @@
       }
     }
   }
+  .group-hover\:text-white {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3057,6 +3113,13 @@
       }
     }
   }
+  .hover\:text-nsw-grey-800 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-nsw-grey-800);
+      }
+    }
+  }
   .hover\:text-nsw-grey-850 {
     &:hover {
       @media (hover: hover) {

package/dist/index.cjs

@@ -9,7 +9,7 @@ var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var Headless = require('@headlessui/react');
 var React6 = require('react');
-var Link3 = require('next/link');
+var Link9 = require('next/link');
 var culori = require('culori');
 var reactSlot = require('@radix-ui/react-slot');
 var navigation = require('next/navigation');
@@ -49,6 +49,8 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var slugify = require('@sindresorhus/slugify');
+var zustand = require('zustand');
+var middleware = require('zustand/middleware');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -76,7 +78,7 @@ var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatio
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var Headless__namespace = /*#__PURE__*/_interopNamespace(Headless);
 var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
-var Link3__default = /*#__PURE__*/_interopDefault(Link3);
+var Link9__default = /*#__PURE__*/_interopDefault(Link9);
 var culori__namespace = /*#__PURE__*/_interopNamespace(culori);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
@@ -372,7 +374,7 @@ function AvatarFallback({
   );
 }
 var Link = React6.forwardRef(function Link2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Headless__namespace.DataInteractive, { children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { ...props, ref }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Headless__namespace.DataInteractive, { children: /* @__PURE__ */ jsxRuntime.jsx(Link9__default.default, { ...props, ref }) });
 });
 var styles = {
   base: [
@@ -1866,7 +1868,7 @@ function Breadcrumbs({
   const shouldCollapse = breadcrumbItems.length > maxItems;
   if (!shouldCollapse) {
     return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "-ml-1", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: item.path, children: item.label }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link9__default.default, { href: item.path, children: item.label }) }) }),
       index < breadcrumbItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path)) }) });
   }
@@ -1877,7 +1879,7 @@ function Breadcrumbs({
   const collapsedItems = breadcrumbItems.slice(startItems, breadcrumbItems.length - endItems);
   return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
     itemsAtStart.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: item.path, children: item.label }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link9__default.default, { href: item.path, children: item.label }) }) }),
       index < itemsAtStart.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path)),
     itemsAtStart.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
@@ -1886,11 +1888,11 @@ function Breadcrumbs({
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbEllipsis, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", children: collapsedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: item.path, children: item.label }) }, item.path)) })
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", children: collapsedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link9__default.default, { href: item.path, children: item.label }) }, item.path)) })
     ] }) }),
     itemsAtEnd.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
     itemsAtEnd.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: item.path, children: item.label }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link9__default.default, { href: item.path, children: item.label }) }) }),
       index < itemsAtEnd.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path))
   ] }) });
@@ -7142,7 +7144,7 @@ function FooterLegalLinks({ legalLinks }) {
       "aria-label": "Footer",
       className: "flex flex-wrap justify-center gap-x-4 gap-y-3 py-4 text-sm lg:justify-start",
       children: legalLinks?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-        Link3__default.default,
+        Link9__default.default,
         {
           href: item.href,
           className: "text-nsw-grey-600 hover:text-nsw-grey-600 hover:bg-primary-800/10 -m-1 rounded p-1 underline underline-offset-4 hover:decoration-2",
@@ -7452,7 +7454,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.25.0"};
+  version: "1.26.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7596,7 +7598,7 @@ function Header2({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-6 flex lg:hidden" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex grow basis-0 items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Link3__default.default, { href: "/", "aria-label": "Home page", className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Link9__default.default, { href: "/", "aria-label": "Home page", className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Logo, { className: "h-12 w-auto lg:h-14" }),
             /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 6, className: "ml-6", children: sitename })
           ] }),
@@ -7929,7 +7931,7 @@ function Navigation({
         role: "list",
         className: "border-nsw-grey-400 dark:border-nsw-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
         children: section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Link3__default.default,
+          Link9__default.default,
           {
             href: link.href,
             onClick: onLinkClick,
@@ -8187,7 +8189,7 @@ function PrevNextLinksPageLink({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-display text-sm font-medium text-slate-900 dark:text-white", children: dir === "next" ? "Next" : "Previous" }),
     /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Link3__default.default,
+      Link9__default.default,
       {
         href,
         className: clsx12__default.default(
@@ -8510,7 +8512,257 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
         ))
       }
     ) })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: link.href, onClick: onLinkClick, className: baseLinkClasses, children: link.title }) });
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(Link9__default.default, { href: link.href, onClick: onLinkClick, className: baseLinkClasses, children: link.title }) });
+}
+var StepIndicator = React6__namespace.forwardRef(
+  ({ className, array, onLinkClick, ...props }, ref) => {
+    const pathname = navigation.usePathname();
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", ref, className: cn("w-full", className), ...props, children: array.map((step, stepIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        className: clsx12__default.default(stepIdx !== array.length - 1 ? "pb-3" : "", "relative"),
+        children: step.href === pathname && !(step.status === "completed" || step.status === "error" || step.status === "saved" || step.status === "cannot-start") ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: step.status === "in-progress" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              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(
+                  Icons.more_horiz,
+                  {
+                    "aria-hidden": "true",
+                    className: "text-tertiary-lighter 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 })
+                ] })
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              "aria-current": "step",
+              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.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.status === "completed" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "bg-success absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              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.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 })
+                ] })
+              ]
+            }
+          )
+        ] }) : step.status === "saved" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              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.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 })
+                ] })
+              ]
+            }
+          )
+        ] }) : step.status === "in-progress" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              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.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 })
+                ] })
+              ]
+            }
+          )
+        ] }) : step.status === "error" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "bg-error-light absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              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.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 })
+                ] })
+              ]
+            }
+          )
+        ] }) : step.status === "not-started" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              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.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 })
+                ] })
+              ]
+            }
+          )
+        ] }) : step.status === "cannot-start" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              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-nsw-grey-600 group-hover:bg-nsw-grey-800 relative z-10 flex size-6 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.remove, { "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 })
+                ] })
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-4 left-3 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Link9__default.default,
+            {
+              href: step.href,
+              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.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 })
+                ] })
+              ]
+            }
+          )
+        ] })
+      },
+      step.title
+    )) });
+  }
+);
+StepIndicator.displayName = "StepIndicator";
+function StepNavigation({
+  className,
+  navigation,
+  useFormStore
+}) {
+  const { formStatus } = useFormStore();
+  const navigationWithStatus = navigation.map((section) => ({
+    ...section,
+    links: section.links.map((link) => {
+      return {
+        ...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: [
+    /* @__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)) }) }) });
 }
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8791,7 +9043,7 @@ function TableOfContents({ tableOfContents }) {
     ),
     /* @__PURE__ */ jsxRuntime.jsx("ol", { role: "list", className: "mt-4 space-y-3 text-sm", children: tableOfContents.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        Link3__default.default,
+        Link9__default.default,
         {
           href: `#${section.id}`,
           className: clsx12__default.default(
@@ -8806,7 +9058,7 @@ function TableOfContents({ tableOfContents }) {
           role: "list",
           className: "mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400",
           children: section.children.map((subSection) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Link3__default.default,
+            Link9__default.default,
             {
               href: `#${subSection.id}`,
               className: isActive(subSection) ? "text-primary-750 font-semibold" : "hover:text-slate-600 dark:hover:text-slate-300",
@@ -9199,6 +9451,36 @@ function getHeadings(slugify$1 = slugify.slugifyWithCounter()) {
   });
   return result;
 }
+function createFormStore(opts) {
+  const { storageKey, initialFormData, initialFormStatus } = opts;
+  return zustand.create()(
+    middleware.persist(
+      (set) => ({
+        formData: initialFormData,
+        formStatus: initialFormStatus,
+        isLoading: true,
+        updateFormData: (page, data) => set((state) => ({
+          formData: {
+            ...state.formData,
+            [page]: { ...state.formData[page] || {}, ...data }
+          }
+        })),
+        updateFormStatus: (page, status) => set((state) => ({
+          formStatus: { ...state.formStatus, [page]: status }
+        })),
+        resetForm: () => set({ formData: initialFormData, formStatus: initialFormStatus }),
+        setIsLoading: (loading) => set({ isLoading: loading })
+      }),
+      {
+        name: storageKey,
+        storage: middleware.createJSONStorage(() => localStorage),
+        onRehydrateStorage: () => (state) => {
+          state?.setIsLoading(false);
+        }
+      }
+    )
+  );
+}
 
 // src/types/types.ts
 var languages = [
@@ -9412,6 +9694,8 @@ exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Social = Social;
 exports.Spinner = Spinner;
+exports.StepIndicator = StepIndicator;
+exports.StepNavigation = StepNavigation;
 exports.Strong = Strong;
 exports.Switch = Switch;
 exports.Table = Table;
@@ -9459,6 +9743,7 @@ exports.colorThemes = colorThemes;
 exports.colors = colors;
 exports.createColorArray = createColorArray;
 exports.createColorData = createColorData;
+exports.createFormStore = createFormStore;
 exports.darkenColor = darkenColor;
 exports.domToSimple = domToSimple;
 exports.generateColorThemes = generateColorThemes;