@nswds/app 1.36.0 → 1.37.1

package/dist/index.cjs

@@ -2,12 +2,12 @@
 
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx12 = require('clsx');
+var clsx4 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
-var Headless = require('@headlessui/react');
+var Headless4 = require('@headlessui/react');
 var React15 = require('react');
 var Link10 = require('next/link');
 var culori = require('culori');
@@ -27,7 +27,6 @@ require('prismjs/components/prism-tsx');
 require('prismjs/components/prism-typescript');
 var SelectPrimitive = require('@radix-ui/react-select');
 var PopoverPrimitive = require('@radix-ui/react-popover');
-var LabelPrimitive = require('@radix-ui/react-label');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var lucideReact = require('lucide-react');
 var TabsPrimitive2 = require('@radix-ui/react-tabs');
@@ -40,6 +39,7 @@ var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var vaul = require('vaul');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var reactHookForm = require('react-hook-form');
+var LabelPrimitive = require('@radix-ui/react-label');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var MenubarPrimitive = require('@radix-ui/react-menubar');
@@ -82,10 +82,10 @@ function _interopNamespace(e) {
 }
 
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-var clsx12__default = /*#__PURE__*/_interopDefault(clsx12);
+var clsx4__default = /*#__PURE__*/_interopDefault(clsx4);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
-var Headless__namespace = /*#__PURE__*/_interopNamespace(Headless);
+var Headless4__namespace = /*#__PURE__*/_interopNamespace(Headless4);
 var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
 var Link10__default = /*#__PURE__*/_interopDefault(Link10);
 var culori__namespace = /*#__PURE__*/_interopNamespace(culori);
@@ -95,13 +95,13 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 var Prism__default = /*#__PURE__*/_interopDefault(Prism);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var TabsPrimitive2__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive2);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
@@ -213,7 +213,7 @@ var Icons = {
   west: (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "currentColor", "data-slot": "icon", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M233-440h607q17 0 28.5-11.5T880-480q0-17-11.5-28.5T840-520H233l155-156q11-11 11.5-27.5T388-732q-11-11-28-11t-28 11L108-508q-6 6-8.5 13T97-480q0 8 2.5 15t8.5 13l224 224q11 11 27.5 11t28.5-11q12-12 12-28.5T388-285L233-440Z" }) })
 };
 function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx12.clsx(inputs));
+  return tailwindMerge.twMerge(clsx4.clsx(inputs));
 }
 function truncate(text, maxLength) {
   if (text.length <= maxLength) {
@@ -409,7 +409,7 @@ function AvatarFallback({
   );
 }
 var Link = React15.forwardRef(function Link2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Headless__namespace.DataInteractive, { children: /* @__PURE__ */ jsxRuntime.jsx(Link10__default.default, { ...props, ref }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Headless4__namespace.DataInteractive, { children: /* @__PURE__ */ jsxRuntime.jsx(Link10__default.default, { ...props, ref }) });
 });
 var styles = {
   base: [
@@ -732,11 +732,11 @@ var Button2 = React15.forwardRef(function Button3({ className, variant, color, s
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children })
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(
-    Headless__namespace.Button,
+    Headless4__namespace.Button,
     {
       "data-variant": variant,
       ...props,
-      className: clsx12__default.default(classes, "cursor-pointer"),
+      className: clsx4__default.default(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children })
     }
@@ -1201,7 +1201,7 @@ var BadgeButton = React15.forwardRef(function BadgeButton2({
   children,
   ...props
 }, ref) {
-  const classes = clsx12__default.default(className, focusOutline[color], [
+  const classes = clsx4__default.default(className, focusOutline[color], [
     // Base
     "group relative inline-flex rounded-sm",
     // Focus
@@ -1219,11 +1219,11 @@ var BadgeButton = React15.forwardRef(function BadgeButton2({
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, color, size, children }) })
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(
-    Headless__namespace.Button,
+    Headless4__namespace.Button,
     {
       "data-variant": variant,
       ...props,
-      className: clsx12__default.default(classes, "cursor-pointer"),
+      className: clsx4__default.default(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, color, size, children }) })
     }
@@ -2360,16 +2360,108 @@ function PopoverContent({
 function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { "data-slot": "popover-anchor", ...props });
 }
-function Label3({ className, ...props }) {
+function Fieldset2({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LabelPrimitive__namespace.Root,
+    Headless4__namespace.Fieldset,
+    {
+      ...props,
+      className: clsx4__default.default(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
+    }
+  );
+}
+function Legend2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Legend,
+    {
+      "data-slot": "legend",
+      ...props,
+      className: clsx4__default.default(
+        className,
+        "text-grey-900 text-base/6 font-semibold data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
+      )
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "control", ...props, className: clsx4__default.default(className, "space-y-8") });
+}
+function Field2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Field,
+    {
+      ...props,
+      className: clsx4__default.default(
+        className,
+        "[&>[data-slot=label]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=label]+[data-slot=description]]:mt-1",
+        "[&>[data-slot=description]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=description]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=error]]:mt-3",
+        "*:data-[slot=label]:font-medium"
+      )
+    }
+  );
+}
+function Label4({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Label,
     {
       "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+      ...props,
+      className: clsx4__default.default(
+        // Base
+        "flex items-center gap-2",
+        "text-grey-900 text-base/6 font-semibold select-none",
+        // Dark mode
+        "dark:group-data-[disabled=true]:text-grey-400 dark:text-white",
+        // Disabled state
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
-      ),
-      ...props
+      )
+    }
+  );
+}
+function Description2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Description,
+    {
+      "data-slot": "description",
+      ...props,
+      className: clsx4__default.default(
+        className,
+        "text-grey-500 dark:text-grey-400 text-base/6 data-disabled:opacity-50 sm:text-sm/6"
+      )
+    }
+  );
+}
+function ErrorMessage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Description,
+    {
+      "data-slot": "error",
+      ...props,
+      className: clsx4__default.default(
+        className,
+        "text-danger-600 dark:text-danger-500 text-base/6 data-disabled:opacity-50 sm:text-sm/6"
+      )
     }
   );
 }
@@ -2581,7 +2673,7 @@ function ThemeSelector({
             className: "grid grid-cols-2 gap-2",
             children: Object.entries(colorThemes2[themeCategory]).map(([key, theme2]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(labelStyles.base, ""), children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: key, id: `primary-${key}`, className: "peer sr-only" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Label3, { htmlFor: `primary-${key}`, className: cn(labelStyles.label, ""), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Label4, { htmlFor: `primary-${key}`, className: cn(labelStyles.label, ""), children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -2606,7 +2698,7 @@ function ThemeSelector({
             className: "grid grid-cols-2 gap-2",
             children: availableAccentColors.map((key) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(labelStyles.base, ""), children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: key, id: `accent-${key}`, className: "peer sr-only" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Label3, { htmlFor: `accent-${key}`, className: cn(labelStyles.label, ""), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Label4, { htmlFor: `accent-${key}`, className: cn(labelStyles.label, ""), children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -6262,7 +6354,7 @@ function CodePreview({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: clsx12.clsx(
+              className: clsx4.clsx(
                 "group dark:bg-grey-900 mx-auto bg-white bg-gradient-to-r",
                 view === "desktop" && "w-full",
                 view === "tablet" && "max-w-lg",
@@ -6500,7 +6592,7 @@ function ColorCard({ name, token, hex, rgb: rgb2, hsl, oklch: oklch2, format, vi
         {
           className: "flex h-24 w-full items-center justify-center",
           style: { backgroundColor: hex },
-          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx12.clsx("font-medium", isLightColor(hex) ? "text-primary-950" : "text-white"), children: name })
+          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx4.clsx("font-medium", isLightColor(hex) ? "text-primary-950" : "text-white"), children: name })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -7226,6 +7318,25 @@ function Footer({
     /* @__PURE__ */ jsxRuntime.jsx(FooterSmallPrint, { department, socialLinks })
   ] });
 }
+function Label6({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LabelPrimitive__namespace.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        // Base
+        "flex items-center gap-2",
+        "text-grey-900 text-base/6 font-semibold select-none",
+        // Dark mode
+        "dark:group-data-[disabled=true]:text-grey-400 dark:text-white",
+        // Disabled state
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var Form = reactHookForm.FormProvider;
 var FormFieldContext = React15__namespace.createContext({});
 var FormField = ({
@@ -7260,7 +7371,7 @@ function FormItem({ className, ...props }) {
 function FormLabel({ className, ...props }) {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Label3,
+    Label6,
     {
       "data-slot": "form-label",
       "data-error": !!error,
@@ -7354,7 +7465,7 @@ var toggleVariants = classVarianceAuthority.cva(styles3.base, {
   variants: {
     variant: {
       ghost: "",
-      outline: clsx12__default.default(styles3.outline)
+      outline: clsx4__default.default(styles3.outline)
     },
     size: {
       default: "h-9 px-2 min-w-9",
@@ -7498,7 +7609,7 @@ function Heading({
     Element,
     {
       ...props,
-      className: clsx12__default.default(
+      className: clsx4__default.default(
         className,
         trimClasses[trim],
         "m-0",
@@ -7513,7 +7624,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.35.0"};
+  version: "1.36.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7656,7 +7767,7 @@ function Header2({
       "data-slot": "header",
       "data-scrolled": isScrolled,
       id: "nsw-header",
-      className: clsx12__default.default(
+      className: clsx4__default.default(
         "sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 transition duration-500 sm:px-6 lg:px-12",
         shadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
         isScrolled ? "dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75" : "dark:bg-transparent"
@@ -7727,7 +7838,7 @@ function Input({ className, type, ...props }) {
   );
 }
 function cn2(...inputs) {
-  return tailwindMerge.twMerge(clsx12.clsx(inputs));
+  return tailwindMerge.twMerge(clsx4.clsx(inputs));
 }
 var sizeStyles = {
   sm: "text-sm",
@@ -8018,7 +8129,7 @@ function MainNavigation({ navigation }) {
         top: `${headerHeight}px`,
         transition: "top 0.2s ease-in-out"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-50 mx-auto flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx(Headless.PopoverGroup, { className: "flex justify-start", children: navigation.map(
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-50 mx-auto flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx(Headless4.PopoverGroup, { className: "flex justify-start", children: navigation.map(
         (item, index) => item.links ? /* @__PURE__ */ jsxRuntime.jsx(
           MegaMenu,
           {
@@ -8051,9 +8162,9 @@ function TopLevel({ title, href }) {
   );
 }
 function MegaMenu({ title, href, links }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Headless.Popover, { className: "group", children: ({ open }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Headless4.Popover, { className: "group", children: ({ open }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-0 mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Headless.PopoverButton,
+      Headless4.PopoverButton,
       {
         className: cn(
           "text-nsw-grey-900 hover:bg-nsw-grey-900/10 inline-flex items-center gap-x-1 p-4 text-base leading-6 font-bold transition focus:ring-0 focus:ring-offset-0 focus:outline-none lg:px-8",
@@ -8067,7 +8178,7 @@ function MegaMenu({ title, href, links }) {
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Headless.PopoverPanel,
+      Headless4.PopoverPanel,
       {
         transition: true,
         className: "absolute inset-x-0 top-0 -z-10 pt-14 shadow transition data-[closed]:-translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[enter]:ease-out data-[leave]:duration-150 data-[leave]:ease-in",
@@ -8108,7 +8219,7 @@ function Navigation({
   navigation: navigation$1
 }) {
   const pathname = navigation.usePathname();
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx4__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
     section.links ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-foreground font-medium dark:text-white", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
@@ -8119,7 +8230,7 @@ function Navigation({
           {
             href: section.href || "/",
             onClick: onLinkClick,
-            className: clsx12__default.default(
+            className: clsx4__default.default(
               "text-foreground inline-block border-l border-transparent pl-5 text-base/8 sm:pl-4 sm:text-sm/6",
               "hover:border-nsw-grey-950 hover:text-nsw-gray-950 hover:font-semibold",
               "dark:text-nsw-grey-400",
@@ -8141,7 +8252,7 @@ function Navigation({
           {
             href: link.href,
             onClick: onLinkClick,
-            className: clsx12__default.default(
+            className: clsx4__default.default(
               "text-foreground inline-block border-l border-transparent pl-5 text-base/8 sm:pl-4 sm:text-sm/6",
               "hover:border-nsw-grey-950 hover:text-nsw-gray-950 hover:font-semibold",
               "dark:text-nsw-grey-400",
@@ -8398,7 +8509,7 @@ function PrevNextLinksPageLink({
       Link10__default.default,
       {
         href,
-        className: clsx12__default.default(
+        className: clsx4__default.default(
           "flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
           dir === "previous" && "flex-row-reverse"
         ),
@@ -8407,7 +8518,7 @@ function PrevNextLinksPageLink({
           /* @__PURE__ */ jsxRuntime.jsx(
             Icons.east,
             {
-              className: clsx12__default.default("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
+              className: clsx4__default.default("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
             }
           )
         ]
@@ -8650,7 +8761,7 @@ function SidebarNavigation({
   navigation: navigation$1
 }) {
   const pathname = navigation.usePathname();
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx4__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
     section.links ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-foreground font-medium dark:text-white", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
@@ -8691,7 +8802,7 @@ function SidebarNavigation({
 function SidebarLink({ link, pathname, onLinkClick, depth }) {
   const hasChildren = Array.isArray(link.links) && link.links.length > 0;
   const isActive = pathname === link.href;
-  const baseLinkClasses = clsx12__default.default(
+  const baseLinkClasses = clsx4__default.default(
     "border-l border-transparent pl-4 pr-2 text-base/8 sm:text-sm/6 w-full text-left py-1 rounded-r-md cursor-pointer",
     "hover:border-nsw-grey-950 hover:text-nsw-gray-950 hover:font-semibold hover:bg-primary-800/10",
     "dark:text-nsw-grey-400 dark:hover:border-nsw-grey-400 dark:hover:text-white",
@@ -8701,13 +8812,13 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
-        className: clsx12__default.default(baseLinkClasses, "group flex items-center justify-between gap-1"),
+        className: clsx4__default.default(baseLinkClasses, "group flex items-center justify-between gap-1"),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: link.title }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Icons.chevron_right,
             {
-              className: clsx12__default.default(
+              className: clsx4__default.default(
                 "ml-2 size-5 transition-transform duration-200",
                 "group-data-[state=open]:rotate-90"
               )
@@ -8719,7 +8830,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
-        className: clsx12__default.default(
+        className: clsx4__default.default(
           "border-nsw-grey-400 dark:border-nsw-grey-200/15 mt-2 ml-5 flex flex-col gap-1 border-l pl-0"
         ),
         children: link.links && link.links.map((childLink) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -8742,7 +8853,7 @@ var StepIndicator = React15__namespace.forwardRef(
     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"),
+        className: clsx4__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",
@@ -8988,7 +9099,7 @@ function StepNavigation({
     })),
     [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: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx4__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)) }) });
@@ -9307,7 +9418,7 @@ function TableOfContents({ tableOfContents }) {
       "ol",
       {
         role: "list",
-        className: clsx12__default.default(
+        className: clsx4__default.default(
           "mt-3 flex flex-col gap-2",
           "border-grey-900/10 border-l dark:border-white/10",
           "text-grey-700 dark:text-grey-400 text-sm/6"
@@ -9317,7 +9428,7 @@ function TableOfContents({ tableOfContents }) {
             Link10__default.default,
             {
               href: `#${section.id}`,
-              className: clsx12__default.default(
+              className: clsx4__default.default(
                 "-ml-px inline-block border-l pl-4",
                 "hover:border-primary-800 dark:hover:border-white",
                 isActive(section) ? "text-primary-800 border-primary-800 font-semibold dark:border-white dark:text-white" : "border-transparent"
@@ -9329,7 +9440,7 @@ function TableOfContents({ tableOfContents }) {
             Link10__default.default,
             {
               href: `#${subSection.id}`,
-              className: clsx12__default.default(
+              className: clsx4__default.default(
                 "-ml-px inline-block border-l pl-8",
                 "hover:border-primary-800 dark:hover:border-white",
                 isActive(subSection) ? "text-primary-800 border-primary-800 font-semibold dark:border-white dark:text-white" : "border-transparent"
@@ -9441,7 +9552,7 @@ function Text({ className, trim = "normal", size = 2, label = false, ...props })
     {
       "data-slot": "text",
       ...props,
-      className: clsx12__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
+      className: clsx4__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
     }
   );
 }
@@ -9450,7 +9561,7 @@ function TextLink({ className, ...props }) {
     Link,
     {
       ...props,
-      className: clsx12__default.default(
+      className: clsx4__default.default(
         className,
         "text-primary-800 decoration-primary-800/50 data-hover:decoration-primary-800 underline dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white"
       )
@@ -9458,14 +9569,14 @@ function TextLink({ className, ...props }) {
   );
 }
 function Strong({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx12__default.default(className, "text-grey-950 font-medium dark:text-white") });
+  return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx4__default.default(className, "text-grey-950 font-medium dark:text-white") });
 }
 function Code({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "code",
     {
       ...props,
-      className: clsx12__default.default(
+      className: clsx4__default.default(
         className,
         "border-grey-950/10 bg-grey-950/[2.5%] text-grey-950 rounded-sm border px-0.5 text-sm font-medium sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white"
       )
@@ -10094,7 +10205,7 @@ var ScrollButton = ({ icon, onClick, disabled }) => {
     }
   );
 };
-var Legend2 = React15__namespace.default.forwardRef((props, ref) => {
+var Legend4 = React15__namespace.default.forwardRef((props, ref) => {
   const {
     categories,
     colors: colors2 = AvailableChartColors,
@@ -10234,7 +10345,7 @@ var Legend2 = React15__namespace.default.forwardRef((props, ref) => {
     ) }) : null
   ] });
 });
-Legend2.displayName = "Legend";
+Legend4.displayName = "Legend";
 var ChartLegend2 = ({ payload }, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, yAxisWidth) => {
   const legendRef = React15__namespace.default.useRef(null);
   useOnWindowResize(() => {
@@ -10255,7 +10366,7 @@ var ChartLegend2 = ({ payload }, categoryColors, setLegendHeight, activeLegend,
         { "justify-end": legendPosition === "right" }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        Legend2,
+        Legend4,
         {
           categories: legendPayload.map((entry) => entry.value),
           colors: legendPayload.map((entry) => categoryColors.get(entry.value)),
@@ -10853,7 +10964,7 @@ var ScrollButton2 = ({ icon, onClick, disabled }) => {
     }
   );
 };
-var Legend3 = React15__namespace.default.forwardRef((props, ref) => {
+var Legend5 = React15__namespace.default.forwardRef((props, ref) => {
   const {
     categories,
     colors: colors2 = AvailableChartColors,
@@ -10993,7 +11104,7 @@ var Legend3 = React15__namespace.default.forwardRef((props, ref) => {
     ) }) : null
   ] });
 });
-Legend3.displayName = "Legend";
+Legend5.displayName = "Legend";
 var ChartLegend3 = ({ payload }, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, yAxisWidth) => {
   const legendRef = React15__namespace.default.useRef(null);
   useOnWindowResize(() => {
@@ -11016,7 +11127,7 @@ var ChartLegend3 = ({ payload }, categoryColors, setLegendHeight, activeLegend,
         { "justify-end": legendPosition === "right" }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        Legend3,
+        Legend5,
         {
           categories: filteredPayload.map((entry) => entry.value),
           colors: filteredPayload.map((entry) => categoryColors.get(entry.value)),
@@ -11853,7 +11964,7 @@ var ScrollButton3 = ({ icon, onClick, disabled }) => {
     }
   );
 };
-var Legend4 = React15__namespace.default.forwardRef((props, ref) => {
+var Legend6 = React15__namespace.default.forwardRef((props, ref) => {
   const {
     categories,
     barCategoryColors,
@@ -11995,7 +12106,7 @@ var Legend4 = React15__namespace.default.forwardRef((props, ref) => {
     ) }) : null
   ] });
 });
-Legend4.displayName = "Legend";
+Legend6.displayName = "Legend";
 var ChartLegend4 = ({ payload }, barCategoryColors, lineCategoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, barYAxisWidth, lineYAxisWidth) => {
   const legendRef = React15__namespace.default.useRef(null);
   useOnWindowResize(() => {
@@ -12019,7 +12130,7 @@ var ChartLegend4 = ({ payload }, barCategoryColors, lineCategoryColors, setLegen
         { "justify-end": legendPosition === "right" }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        Legend4,
+        Legend6,
         {
           categories: filteredPayload.map((entry) => ({
             name: entry.value,
@@ -12905,7 +13016,7 @@ var ScrollButton4 = ({ icon, onClick, disabled }) => {
     }
   );
 };
-var Legend5 = React15__namespace.default.forwardRef((props, ref) => {
+var Legend7 = React15__namespace.default.forwardRef((props, ref) => {
   const {
     categories,
     colors: colors2 = AvailableChartColors,
@@ -13045,7 +13156,7 @@ var Legend5 = React15__namespace.default.forwardRef((props, ref) => {
     ) }) : null
   ] });
 });
-Legend5.displayName = "Legend";
+Legend7.displayName = "Legend";
 var ChartLegend5 = ({ payload }, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, yAxisWidth) => {
   const legendRef = React15__namespace.default.useRef(null);
   useOnWindowResize(() => {
@@ -13066,7 +13177,7 @@ var ChartLegend5 = ({ payload }, categoryColors, setLegendHeight, activeLegend,
         { "justify-end": legendPosition === "right" }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        Legend5,
+        Legend7,
         {
           categories: legendPayload.map((entry) => entry.value),
           colors: legendPayload.map((entry) => categoryColors.get(entry.value)),
@@ -14512,7 +14623,7 @@ function Prose({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: clsx12__default.default(
+      className: clsx4__default.default(
         className,
         "prose dark:!prose-invert max-w-none",
         // headings
@@ -14781,6 +14892,7 @@ exports.ContextMenuSub = ContextMenuSub;
 exports.ContextMenuSubContent = ContextMenuSubContent;
 exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
 exports.ContextMenuTrigger = ContextMenuTrigger;
+exports.Description = Description2;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -14818,8 +14930,12 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.DynamicFavicon = DynamicFavicon;
+exports.ErrorMessage = ErrorMessage;
 exports.ExpandableSearch = ExpandableSearch;
 exports.ExpandableSearchField = ExpandableSearchField;
+exports.Field = Field2;
+exports.FieldGroup = FieldGroup;
+exports.Fieldset = Fieldset2;
 exports.Footer = Footer;
 exports.FooterAcknowledgement = FooterAcknowledgement;
 exports.FooterLegalLinks = FooterLegalLinks;
@@ -14845,7 +14961,8 @@ exports.InputOTP = InputOTP;
 exports.InputOTPGroup = InputOTPGroup;
 exports.InputOTPSeparator = InputOTPSeparator;
 exports.InputOTPSlot = InputOTPSlot;
-exports.Label = Label3;
+exports.Label = Label4;
+exports.Legend = Legend2;
 exports.LineChart = LineChart;
 exports.Link = Link;
 exports.List = _List;