@nswds/app 1.23.6 → 1.24.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx11 = require('clsx');
+var clsx12 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
@@ -70,7 +70,7 @@ function _interopNamespace(e) {
 }
 
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-var clsx11__default = /*#__PURE__*/_interopDefault(clsx11);
+var clsx12__default = /*#__PURE__*/_interopDefault(clsx12);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var Headless__namespace = /*#__PURE__*/_interopNamespace(Headless);
@@ -197,7 +197,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(clsx11.clsx(inputs));
+  return tailwindMerge.twMerge(clsx12.clsx(inputs));
 }
 function truncate(text, maxLength) {
   if (text.length <= maxLength) {
@@ -211,6 +211,9 @@ function kebabCase(str) {
 function camelCase(str) {
   return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
 }
+function humaniseVariant(key) {
+  return key.replace(/([a-z])([A-Z0-9])/g, "$1 $2").replace(/([0-9])([A-Za-z])/g, "$1 $2").replace(/_/g, " ").replace(/\bFull\s?Width\b/gi, "full width").replace(/\s+/g, " ").trim().replace(/^./, (s) => s.toUpperCase());
+}
 function Accordion({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
 }
@@ -695,7 +698,7 @@ var Button2 = React6.forwardRef(function Button3({ className, variant, color, si
     {
       "data-variant": variant,
       ...props,
-      className: clsx11__default.default(classes, "cursor-pointer"),
+      className: clsx12__default.default(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children })
     }
@@ -1160,7 +1163,7 @@ var BadgeButton = React6.forwardRef(function BadgeButton2({
   children,
   ...props
 }, ref) {
-  const classes = clsx11__default.default(className, focusOutline[color], [
+  const classes = clsx12__default.default(className, focusOutline[color], [
     // Base
     "group relative inline-flex rounded-sm",
     // Focus
@@ -1182,7 +1185,7 @@ var BadgeButton = React6.forwardRef(function BadgeButton2({
     {
       "data-variant": variant,
       ...props,
-      className: clsx11__default.default(classes, "cursor-pointer"),
+      className: clsx12__default.default(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, color, size, children }) })
     }
@@ -2086,40 +2089,11 @@ function PreWithCopy(props) {
         onClick: handleCopy,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge(isJustCopied && "hidden"), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "me-1.5 size-3",
-                "aria-hidden": "true",
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "currentColor",
-                viewBox: "0 0 18 20",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z" })
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Icons.copy, { className: "me-1.5 size-3" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold", children: "Copy code" })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge(isJustCopied ? "block" : "hidden"), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "text-primary-700 dark:text-primary-500 me-1.5 size-3",
-                "aria-hidden": "true",
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 16 12",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    stroke: "currentColor",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "2",
-                    d: "M1 5.917 5.724 10.5 15 1.5"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { className: "text-primary-700 dark:text-primary-500 me-1.5 size-3" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-700 dark:text-primary-500 text-xs font-semibold", children: "Copied" })
           ] }) })
         ]
@@ -2166,13 +2140,26 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "border-nsw-grey-200 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // Base styles
+        "border-nsw-grey-600 [&_svg:not([class*='text-'])]:text-nsw-grey-600 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // Disabled styles
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        // aria-invalid styles
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        // Focus styles
+        "focus:outline-primary-650/70 focus:outline focus:outline-2 focus:outline-offset-2",
+        // Placeholder styles
+        "data-[placeholder]:text-nsw-grey-600",
+        // Dark mode styles
+        "dark:bg-input/30 dark:hover:bg-input/50",
+        // Size styles
+        "data-[size=default]:h-12 data-[size=sm]:h-9",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_down, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_down, { className: "size-6 opacity-80" }) })
       ]
     }
   );
@@ -2188,7 +2175,9 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        // Base styles
+        "text-nsw-grey-800 bg-white",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -2216,7 +2205,7 @@ function SelectLabel({ className, ...props }) {
     SelectPrimitive__namespace.Label,
     {
       "data-slot": "select-label",
-      className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+      className: cn("text-nsw-grey-600 px-2 py-1.5 text-xs", className),
       ...props
     }
   );
@@ -2231,12 +2220,12 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "focus:bg-primary-800/10 focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-primary-800/10 focus:text-primary-800 [&_svg:not([class*='text-'])]:text-nsw-grey-600 relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:font-bold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { className: "size-6" }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
       ]
     }
@@ -2250,7 +2239,7 @@ function SelectSeparator({
     SelectPrimitive__namespace.Separator,
     {
       "data-slot": "select-separator",
-      className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+      className: cn("bg-nsw-primary-800/20 pointer-events-none -mx-1 my-1 h-px", className),
       ...props
     }
   );
@@ -2265,7 +2254,7 @@ function SelectScrollUpButton({
       "data-slot": "select-scroll-up-button",
       className: cn("flex cursor-default items-center justify-center py-1", className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_up, { className: "size-4" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_up, { className: "size-6" })
     }
   );
 }
@@ -2279,7 +2268,7 @@ function SelectScrollDownButton({
       "data-slot": "select-scroll-down-button",
       className: cn("flex cursor-default items-center justify-center py-1", className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_down, { className: "size-4" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_down, { className: "size-6" })
     }
   );
 }
@@ -6046,6 +6035,10 @@ function CodeDemo({ data, hide = {} }) {
   const codeItems = getCodeItems(code);
   const current = getCurrent(codeItems, tabIndex);
   const shouldExpand = getShouldExpand(current.code.trim());
+  const variantLabels = React6__namespace.default.useMemo(() => {
+    const explicit = data.labels ?? {};
+    return Object.fromEntries(variants.map((v) => [v, explicit[v] ?? humaniseVariant(v)]));
+  }, [variants, data]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-grey-200 bg-grey-50 dark:border-grey-600 dark:bg-grey-700 w-full rounded-t-xl border p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(EditOnGithubButton, { githubSlug: data.githubSlug }),
@@ -6105,8 +6098,8 @@ function CodeDemo({ data, hide = {} }) {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-grey-200 bg-grey-50 dark:border-grey-600 dark:bg-grey-700 flex w-full rounded-t-md border-b", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Tabs, { tabIndex, items: codeItems, onSelect: setTabIndex }),
             variants.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: (value) => handleSelectVariant(value), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a variant" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: variants.map((v) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: v, children: v }, v)) })
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a variant" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: variants.map((v) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: v, children: variantLabels[v] }, v)) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
               CopyToClipboardButton,
@@ -6207,7 +6200,7 @@ function CodePreview({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: clsx11.clsx(
+              className: clsx12.clsx(
                 "group dark:bg-grey-900 mx-auto bg-white bg-gradient-to-r",
                 view === "desktop" && "w-full",
                 view === "tablet" && "max-w-lg",
@@ -6445,7 +6438,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: clsx11.clsx("font-medium", isLightColor(hex) ? "text-primary-950" : "text-white"), children: name })
+          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx12.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: [
@@ -7097,7 +7090,7 @@ function Separator4({
       decorative,
       orientation,
       className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "bg-primary-800/20 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       ),
       ...props
@@ -7213,7 +7206,7 @@ var toggleVariants = classVarianceAuthority.cva(styles3.base, {
   variants: {
     variant: {
       ghost: "",
-      outline: clsx11__default.default(styles3.outline)
+      outline: clsx12__default.default(styles3.outline)
     },
     size: {
       default: "h-9 px-2 min-w-9",
@@ -7357,7 +7350,7 @@ function Heading({
     Element,
     {
       ...props,
-      className: clsx11__default.default(
+      className: clsx12__default.default(
         className,
         trimClasses[trim],
         "m-0",
@@ -7372,7 +7365,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.22.0"};
+  version: "1.23.4"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7491,9 +7484,11 @@ function SiteSearch({ navigation: navigation$1 }) {
 function Header2({
   sitename,
   navigation,
-  version = false
+  version = false,
+  hide = {}
 }) {
   const [isScrolled, setIsScrolled] = React6.useState(false);
+  const { search = false, themeSwitcher = false, github = false } = hide;
   React6.useEffect(() => {
     function onScroll() {
       setIsScrolled(window.scrollY > 0);
@@ -7507,7 +7502,7 @@ function Header2({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
     {
-      className: clsx11__default.default(
+      className: clsx12__default.default(
         "sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8 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"
       ),
@@ -7521,9 +7516,9 @@ function Header2({
           version && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "soft", color: "primary", className: "ml-2", children: package_default.version })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex basis-0 justify-end gap-2 sm:gap-4 md:grow", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SiteSearch, { navigation }),
-          /* @__PURE__ */ jsxRuntime.jsx(ThemeSwitcher, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !search && /* @__PURE__ */ jsxRuntime.jsx(SiteSearch, { navigation }),
+          !themeSwitcher && /* @__PURE__ */ jsxRuntime.jsx(ThemeSwitcher, {}),
+          !github && /* @__PURE__ */ jsxRuntime.jsx(
             Button2,
             {
               variant: "surface",
@@ -7553,15 +7548,76 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-nsw-grey-200 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        // Base styles
+        "border-nsw-grey-200 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+        // Selection styles
+        "selection:bg-primary selection:text-primary-foreground",
+        // Placeholder styles
+        "placeholder:text-muted-foreground",
+        // File input styles
+        "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        // Focus styles
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Disabled styles
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        // aria-invalid styles
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        // Dark mode styles
+        "dark:bg-input/30",
         className
       ),
       ...props
     }
   );
 }
+function cn2(...inputs) {
+  return tailwindMerge.twMerge(clsx12.clsx(inputs));
+}
+var sizeStyles = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var variantStyles = {
+  disc: "list-disc pl-5",
+  decimal: "list-decimal pl-5",
+  icon: "list-none",
+  none: "list-none"
+};
+var gapStyles = {
+  sm: "space-y-1",
+  md: "space-y-2",
+  lg: "space-y-3"
+};
+var List2 = React6__namespace.forwardRef(
+  ({ asChild, variant = "disc", size = "md", gap = "md", className, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "ul";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        "data-slot": "list",
+        className: cn2(sizeStyles[size], variantStyles[variant], gapStyles[gap], className),
+        ...props
+      }
+    );
+  }
+);
+List2.displayName = "List";
+var ListItem = React6__namespace.forwardRef(
+  ({ icon, className, children, ...props }, ref) => {
+    if (icon) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { ref, "data-slot": "list-item", className: cn2("flex gap-2", className), ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, "data-slot": "list-item", className: cn2(className), ...props, children });
+  }
+);
+ListItem.displayName = "List.Item";
+var _List = List2;
+_List.Item = ListItem;
 function Masthead() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary h-[var(--masthead-height)] w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex w-full items-center justify-between px-4 py-2 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-x-12", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-white", children: "A NSW Government website" }) }) }) });
 }
@@ -7778,7 +7834,7 @@ function Navigation({
   navigation: navigation$1
 }) {
   const pathname = navigation.usePathname();
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx11__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) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+  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) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-foreground font-medium dark:text-white", children: section.title }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
@@ -7790,7 +7846,7 @@ function Navigation({
           {
             href: link.href,
             onClick: onLinkClick,
-            className: clsx11__default.default(
+            className: clsx12__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",
@@ -8047,7 +8103,7 @@ function PrevNextLinksPageLink({
       Link3__default.default,
       {
         href,
-        className: clsx11__default.default(
+        className: clsx12__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"
         ),
@@ -8056,7 +8112,7 @@ function PrevNextLinksPageLink({
           /* @__PURE__ */ jsxRuntime.jsx(
             Icons.east,
             {
-              className: clsx11__default.default("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
+              className: clsx12__default.default("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
             }
           )
         ]
@@ -8296,7 +8352,7 @@ function SidebarNavigation({
   navigation: navigation$1
 }) {
   const pathname = navigation.usePathname();
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx11__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: 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: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-foreground font-medium dark:text-white", children: section.title }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
@@ -8321,7 +8377,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 = clsx11__default.default(
+  const baseLinkClasses = clsx12__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",
@@ -8331,13 +8387,13 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
-        className: clsx11__default.default(baseLinkClasses, "group flex items-center justify-between gap-1"),
+        className: clsx12__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: clsx11__default.default(
+              className: clsx12__default.default(
                 "ml-2 size-5 transition-transform duration-200",
                 "group-data-[state=open]:rotate-90"
               )
@@ -8349,7 +8405,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
-        className: clsx11__default.default(
+        className: clsx12__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(
@@ -8648,7 +8704,7 @@ function TableOfContents({ tableOfContents }) {
         Link3__default.default,
         {
           href: `#${section.id}`,
-          className: clsx11__default.default(
+          className: clsx12__default.default(
             isActive(section) ? "text-primary font-semibold" : "font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300"
           ),
           children: section.title
@@ -8771,7 +8827,7 @@ function Text({ className, trim = "normal", size = 2, label = false, ...props })
     {
       "data-slot": "text",
       ...props,
-      className: clsx11__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
+      className: clsx12__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
     }
   );
 }
@@ -8780,7 +8836,7 @@ function TextLink({ className, ...props }) {
     Link,
     {
       ...props,
-      className: clsx11__default.default(
+      className: clsx12__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"
       )
@@ -8788,14 +8844,14 @@ function TextLink({ className, ...props }) {
   );
 }
 function Strong({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx11__default.default(className, "text-grey-950 font-medium dark:text-white") });
+  return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx12__default.default(className, "text-grey-950 font-medium dark:text-white") });
 }
 function Code({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "code",
     {
       ...props,
-      className: clsx11__default.default(
+      className: clsx12__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"
       )
@@ -9183,6 +9239,7 @@ exports.Icons = Icons;
 exports.Input = Input;
 exports.Label = Label3;
 exports.Link = Link;
+exports.List = _List;
 exports.Logo = Logo;
 exports.Masthead = Masthead;
 exports.Menubar = Menubar;
@@ -9312,6 +9369,7 @@ exports.getColorValue = getColorValue;
 exports.getHeadings = getHeadings;
 exports.getNodeText = getNodeText;
 exports.getSurroundingColors = getSurroundingColors;
+exports.humaniseVariant = humaniseVariant;
 exports.interpolateColors = interpolateColors;
 exports.isLightColor = isLightColor;
 exports.kebabCase = kebabCase;