@nswds/app 1.37.1 → 1.38.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx4 = require('clsx');
+var clsx20 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
@@ -27,6 +27,7 @@ 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');
@@ -39,7 +40,6 @@ 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');
@@ -48,7 +48,6 @@ var ProgressPrimitive = require('@radix-ui/react-progress');
 var ResizablePrimitive = require('react-resizable-panels');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SliderPrimitive = require('@radix-ui/react-slider');
-var SwitchPrimitive = require('@radix-ui/react-switch');
 var RechartsPrimitive = require('recharts');
 var react = require('@remixicon/react');
 var tailwindVariants = require('tailwind-variants');
@@ -82,7 +81,7 @@ function _interopNamespace(e) {
 }
 
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-var clsx4__default = /*#__PURE__*/_interopDefault(clsx4);
+var clsx20__default = /*#__PURE__*/_interopDefault(clsx20);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var Headless4__namespace = /*#__PURE__*/_interopNamespace(Headless4);
@@ -95,13 +94,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);
@@ -110,7 +109,6 @@ var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimit
 var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
-var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var RechartsPrimitive__namespace = /*#__PURE__*/_interopNamespace(RechartsPrimitive);
 var HoverCardPrimitives__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitives);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
@@ -213,7 +211,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(clsx4.clsx(inputs));
+  return tailwindMerge.twMerge(clsx20.clsx(inputs));
 }
 function truncate(text, maxLength) {
   if (text.length <= maxLength) {
@@ -736,7 +734,7 @@ var Button2 = React15.forwardRef(function Button3({ className, variant, color, s
     {
       "data-variant": variant,
       ...props,
-      className: clsx4__default.default(classes, "cursor-pointer"),
+      className: clsx20__default.default(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children })
     }
@@ -1201,7 +1199,7 @@ var BadgeButton = React15.forwardRef(function BadgeButton2({
   children,
   ...props
 }, ref) {
-  const classes = clsx4__default.default(className, focusOutline[color], [
+  const classes = clsx20__default.default(className, focusOutline[color], [
     // Base
     "group relative inline-flex rounded-sm",
     // Focus
@@ -1223,7 +1221,7 @@ var BadgeButton = React15.forwardRef(function BadgeButton2({
     {
       "data-variant": variant,
       ...props,
-      className: clsx4__default.default(classes, "cursor-pointer"),
+      className: clsx20__default.default(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, color, size, children }) })
     }
@@ -1248,10 +1246,10 @@ var lightenColor = (color, factor = 2) => {
 var addStartStopToColorArray = (colorArray) => {
   const darkColor = (color) => darkenColor(color, 0.3);
   const lightColor = (color) => lightenColor(color, 2);
-  const colors2 = [...colorArray];
-  colors2.unshift(darkColor(colorArray[0]));
-  colors2.push(lightColor(colorArray[colorArray.length - 1]));
-  return colors2;
+  const colors3 = [...colorArray];
+  colors3.unshift(darkColor(colorArray[0]));
+  colors3.push(lightColor(colorArray[colorArray.length - 1]));
+  return colors3;
 };
 var interpolateColors = (color1, color2, steps) => {
   const results = [];
@@ -1285,12 +1283,12 @@ var GenerateInterpolatedColors = (colorArray) => {
   const finalPaletteColours = fullPalette.slice(1, -1).reverse();
   return finalPaletteColours;
 };
-var getSurroundingColors = (colors2, themeColor) => {
-  const index = colors2.findIndex((color) => color.oklch === themeColor);
+var getSurroundingColors = (colors3, themeColor) => {
+  const index = colors3.findIndex((color) => color.oklch === themeColor);
   if (index === -1) return [];
   const start = Math.max(0, index - 3);
-  const end = Math.min(colors2.length, index + 4);
-  const surroundingColors = colors2.slice(start, end);
+  const end = Math.min(colors3.length, index + 4);
+  const surroundingColors = colors3.slice(start, end);
   return surroundingColors;
 };
 var colorDataArray = (colorsToUse, paletteName, format, output, variant) => {
@@ -1414,12 +1412,12 @@ var renderColorOutputToDTFM = (colorsToUse, paletteName, format, variant) => {
 };
 var themeIndices = [3, 7, 11, 15];
 var themeTokens = [200, 400, 600, 800];
-var generateColorThemes = (colors2) => {
+var generateColorThemes = (colors3) => {
   const colorThemes2 = {};
-  for (const category in colors2) {
+  for (const category in colors3) {
     colorThemes2[category] = {};
-    for (const shade in colors2[category]) {
-      const base = colors2[category][shade];
+    for (const shade in colors3[category]) {
+      const base = colors3[category][shade];
       colorThemes2[category][shade] = {
         name: base.name,
         colors: themeIndices.map((idx) => {
@@ -2360,67 +2358,12 @@ function PopoverContent({
 function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { "data-slot": "popover-anchor", ...props });
 }
-function Fieldset2({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Headless4__namespace.Fieldset,
-    {
-      ...props,
-      className: clsx4__default.default(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
-    }
-  );
-}
-function Legend2({
-  className,
-  ...props
-}) {
+function Label3({ 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,
+    LabelPrimitive__namespace.Root,
     {
       "data-slot": "label",
-      ...props,
-      className: clsx4__default.default(
+      className: cn(
         // Base
         "flex items-center gap-2",
         "text-grey-900 text-base/6 font-semibold select-none",
@@ -2429,39 +2372,8 @@ function Label4({
         // 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
-      )
-    }
-  );
-}
-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"
-      )
+      ),
+      ...props
     }
   );
 }
@@ -2673,7 +2585,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(Label4, { htmlFor: `primary-${key}`, className: cn(labelStyles.label, ""), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Label3, { htmlFor: `primary-${key}`, className: cn(labelStyles.label, ""), children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -2698,7 +2610,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(Label4, { htmlFor: `accent-${key}`, className: cn(labelStyles.label, ""), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Label3, { htmlFor: `accent-${key}`, className: cn(labelStyles.label, ""), children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -6354,7 +6266,7 @@ function CodePreview({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: clsx4.clsx(
+              className: clsx20.clsx(
                 "group dark:bg-grey-900 mx-auto bg-white bg-gradient-to-r",
                 view === "desktop" && "w-full",
                 view === "tablet" && "max-w-lg",
@@ -6592,7 +6504,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: clsx4.clsx("font-medium", isLightColor(hex) ? "text-primary-950" : "text-white"), children: name })
+          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx20.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: [
@@ -7318,25 +7230,6 @@ 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 = ({
@@ -7371,7 +7264,7 @@ function FormItem({ className, ...props }) {
 function FormLabel({ className, ...props }) {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Label6,
+    Label3,
     {
       "data-slot": "form-label",
       "data-error": !!error,
@@ -7465,7 +7358,7 @@ var toggleVariants = classVarianceAuthority.cva(styles3.base, {
   variants: {
     variant: {
       ghost: "",
-      outline: clsx4__default.default(styles3.outline)
+      outline: clsx20__default.default(styles3.outline)
     },
     size: {
       default: "h-9 px-2 min-w-9",
@@ -7609,7 +7502,7 @@ function Heading({
     Element,
     {
       ...props,
-      className: clsx4__default.default(
+      className: clsx20__default.default(
         className,
         trimClasses[trim],
         "m-0",
@@ -7624,7 +7517,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.36.0"};
+  version: "1.37.1"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7767,7 +7660,7 @@ function Header2({
       "data-slot": "header",
       "data-scrolled": isScrolled,
       id: "nsw-header",
-      className: clsx4__default.default(
+      className: clsx20__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"
@@ -7816,7 +7709,7 @@ function Input({ className, type, ...props }) {
       "data-slot": "input",
       className: cn(
         // Base styles
-        "border-nsw-grey-600 flex h-12 w-full min-w-0 rounded-sm border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+        "border-grey-600 flex h-12 w-full min-w-0 rounded-sm 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-800 selection:text-white",
         // Placeholder styles
@@ -7837,8 +7730,107 @@ function Input({ className, type, ...props }) {
     }
   );
 }
+function Fieldset2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Fieldset,
+    {
+      ...props,
+      className: clsx20__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: clsx20__default.default(
+        className,
+        "text-base/6 font-semibold text-zinc-950 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: clsx20__default.default(className, "space-y-8") });
+}
+function Field2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Field,
+    {
+      ...props,
+      className: clsx20__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 FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Label,
+    {
+      "data-slot": "label",
+      ...props,
+      className: clsx20__default.default(
+        className,
+        "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
+      )
+    }
+  );
+}
+function Description3({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Description,
+    {
+      "data-slot": "description",
+      ...props,
+      className: clsx20__default.default(
+        className,
+        "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400"
+      )
+    }
+  );
+}
+function ErrorMessage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Description,
+    {
+      "data-slot": "error",
+      ...props,
+      className: clsx20__default.default(
+        className,
+        "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500"
+      )
+    }
+  );
+}
 function cn2(...inputs) {
-  return tailwindMerge.twMerge(clsx4.clsx(inputs));
+  return tailwindMerge.twMerge(clsx20.clsx(inputs));
 }
 var sizeStyles = {
   sm: "text-sm",
@@ -8124,7 +8116,7 @@ function MainNavigation({ navigation }) {
       "aria-label": "Main Navigation",
       role: "navigation",
       id: "nsw-main-navigation",
-      className: "shadow-grey-900/5 sticky z-40 hidden bg-gray-100 shadow-md sm:px-6 lg:block lg:px-4 dark:shadow-none",
+      className: "shadow-grey-900/5 bg-grey-100 sticky z-40 hidden shadow-md sm:px-6 lg:block lg:px-4 dark:shadow-none",
       style: {
         top: `${headerHeight}px`,
         transition: "top 0.2s ease-in-out"
@@ -8155,7 +8147,14 @@ function TopLevel({ title, href }) {
     Link10__default.default,
     {
       href,
-      className: "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 lg:px-8",
+      className: cn(
+        // Base styles
+        "inline-flex items-center gap-x-1 p-4 transition lg:px-8",
+        // Text styles
+        "text-grey-800 text-base leading-6 font-bold",
+        // Hover styles
+        "hover:bg-primary-800/10"
+      ),
       children: title
     },
     title
@@ -8167,13 +8166,28 @@ function MegaMenu({ title, href, links }) {
       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",
+          "inline-flex items-center gap-x-1 p-4 transition lg:px-8",
+          // Text styles
+          "text-grey-800 hover:text-primary-800 dark:text-grey-400 text-base leading-6 font-bold dark:hover:text-white",
+          // Hover styles
+          "hover:text-primary-800 hover:bg-primary-800/10 hover:font-bold",
+          // Focus styles,
+          "",
+          // Border styles
           "border-b-2",
-          open ? "border-primary" : "border-transparent"
+          open ? "border-primary-800" : "border-transparent"
         ),
         children: [
           title,
-          /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_down, { className: cn("h-6 w-6 transition", open ? "rotate-180" : "") })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Icons.chevron_down,
+            {
+              className: cn(
+                "h-6 w-6 transition duration-350 ease-in-out",
+                open ? "rotate-180" : ""
+              )
+            }
+          )
         ]
       }
     ) }),
@@ -8187,11 +8201,11 @@ function MegaMenu({ title, href, links }) {
             Link10__default.default,
             {
               href,
-              className: "text-primary flex items-center px-8 py-8 text-xl font-bold hover:bg-gray-50",
+              className: "group text-primary-800 hover:bg-primary-800/10 flex items-center px-8 py-8 text-xl font-bold",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "absolute inset-0" }),
                 title,
-                /* @__PURE__ */ jsxRuntime.jsx(Icons.east, { className: "ml-4 h-6 w-6" })
+                /* @__PURE__ */ jsxRuntime.jsx(Icons.east, { className: "ml-4 h-6 w-6 transform transition-transform duration-300 ease-in-out group-hover:translate-x-1" })
               ]
             }
           ),
@@ -8199,12 +8213,31 @@ function MegaMenu({ title, href, links }) {
             "div",
             {
               className: cn(
-                "relative mx-2 border-t bg-white p-4 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-inset hover:bg-gray-50 [&:nth-last-child(-n+3)]:border-b"
+                // Base styles
+                "hover:bg-primary-800/10 hover:text-primary-800 relative mx-2 border-t bg-white p-4 hover:font-bold [&:nth-last-child(-n+3)]:border-b",
+                // Hover styles
+                "",
+                // Focus styles
+                "focus-within:rounded-sm focus-within:outline focus-within:outline-inherit"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: item.href, className: "focus:outline-none", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "absolute inset-0" }),
-                item.title
-              ] }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-grey-900 text-base font-semibold", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Link10__default.default,
+                {
+                  href: item.href,
+                  className: cn(
+                    // Base styles
+                    "",
+                    // Hover styles
+                    "",
+                    // Focus styles
+                    "outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "absolute inset-0" }),
+                    item.title
+                  ]
+                }
+              ) })
             },
             item.href
           )) })
@@ -8219,23 +8252,23 @@ function Navigation({
   navigation: navigation$1
 }) {
   const pathname = navigation.usePathname();
-  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: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx20__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",
       {
         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",
+        className: "border-grey-400 dark:border-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
         children: /* @__PURE__ */ jsxRuntime.jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
           Link10__default.default,
           {
             href: section.href || "/",
             onClick: onLinkClick,
-            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",
-              "dark:hover:border-nsw-grey-400 dark:hover:text-white",
-              section.href === pathname && "border-primary text-primary border-l font-semibold dark:border-white"
+            className: clsx20__default.default(
+              "text-foreground inline-block border-l pl-5 text-base/8 sm:pl-4 sm:text-sm/6",
+              "hover:border-grey-950 hover:text-grey-950 hover:font-semibold",
+              "dark:text-grey-400",
+              "dark:hover:border-grey-400 dark:hover:text-white",
+              section.href === pathname && "border-primary-800 text-primary-800 bg-primary-800/10 border-l font-bold dark:border-white dark:bg-white/20"
             ),
             children: section.title
           }
@@ -8246,18 +8279,18 @@ function Navigation({
       "ul",
       {
         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",
+        className: "border-grey-400 dark:border-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
         children: section.links && section.links.map((link, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
           Link10__default.default,
           {
             href: link.href,
             onClick: onLinkClick,
-            className: clsx4__default.default(
+            className: clsx20__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",
-              "dark:hover:border-nsw-grey-400 dark:hover:text-white",
-              link.href === pathname && "border-primary text-primary border-l font-semibold dark:border-white"
+              "hover:border-grey-950 hover:text-grey-950 hover:font-semibold",
+              "dark:text-grey-400",
+              "dark:hover:border-grey-400 dark:hover:text-white",
+              link.href === pathname && "border-primary-800 text-primary-800 bg-primary-800/10 border-l font-bold dark:border-white dark:bg-white/20"
             ),
             children: link.title
           }
@@ -8509,7 +8542,7 @@ function PrevNextLinksPageLink({
       Link10__default.default,
       {
         href,
-        className: clsx4__default.default(
+        className: clsx20__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"
         ),
@@ -8518,7 +8551,7 @@ function PrevNextLinksPageLink({
           /* @__PURE__ */ jsxRuntime.jsx(
             Icons.east,
             {
-              className: clsx4__default.default("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
+              className: clsx20__default.default("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
             }
           )
         ]
@@ -8761,12 +8794,12 @@ function SidebarNavigation({
   navigation: navigation$1
 }) {
   const pathname = navigation.usePathname();
-  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: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx20__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",
       {
         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",
+        className: "border-grey-400 dark:border-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
         children: /* @__PURE__ */ jsxRuntime.jsx(
           SidebarLink,
           {
@@ -8783,7 +8816,7 @@ function SidebarNavigation({
       "ul",
       {
         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",
+        className: "border-grey-400 dark:border-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
         children: section.links && section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
           SidebarLink,
           {
@@ -8802,23 +8835,23 @@ 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 = 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",
-    isActive && "border-primary text-primary font-bold dark:border-white bg-nsw-sky-100 dark:bg-nsw-sky-900/20"
+  const baseLinkClasses = clsx20__default.default(
+    "border-l pl-4 pr-2 text-base/8 sm:text-sm/6 w-full text-left py-1 rounded-r-md cursor-pointer",
+    "hover:border-grey-950 hover:text-grey-950 hover:font-semibold hover:bg-primary-800/10",
+    "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
+    isActive && "border-l border-primary-800 text-primary-800 font-bold dark:border-white bg-primary-800/10 dark:bg-white/20"
   );
   return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "-ml-px flex flex-col items-start gap-1", children: hasChildren ? /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { className: "w-full", defaultOpen: isActive, children: [
     /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
-        className: clsx4__default.default(baseLinkClasses, "group flex items-center justify-between gap-1"),
+        className: clsx20__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: clsx4__default.default(
+              className: clsx20__default.default(
                 "ml-2 size-5 transition-transform duration-200",
                 "group-data-[state=open]:rotate-90"
               )
@@ -8830,8 +8863,8 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
-        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"
+        className: clsx20__default.default(
+          "border-grey-400 dark:border-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(
           SidebarLink,
@@ -8853,7 +8886,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: clsx4__default.default(stepIdx !== array.length - 1 ? "pb-3" : "", "relative"),
+        className: clsx20__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",
@@ -9099,7 +9132,7 @@ function StepNavigation({
     })),
     [navigation, formStatus, getStatus]
   );
-  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: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx20__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)) }) });
@@ -9226,36 +9259,188 @@ function Spinner({ className, size = "md", ...props }) {
     }
   ) });
 }
-function Switch({ className, ...props }) {
+function SwitchGroup({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SwitchPrimitive__namespace.Root,
+    "div",
     {
-      "data-slot": "switch",
-      className: cn(
-        "peer border-grey-600 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none",
-        // state styles
-        "data-[state=unchecked]:bg-input data-[state=checked]:bg-primary-800",
-        // Dark mode styles
-        "dark:data-[state=unchecked]:bg-input/80",
-        // Focus styles
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        // aria-invalid styles
-        "",
-        // Disabled styles
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
+      "data-slot": "control",
       ...props,
+      className: clsx20__default.default(
+        className,
+        // Basic groups
+        "space-y-3 **:data-[slot=label]:font-normal",
+        // With descriptions
+        "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium"
+      )
+    }
+  );
+}
+function SwitchField({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Field,
+    {
+      "data-slot": "field",
+      ...props,
+      className: clsx20__default.default(
+        className,
+        // Base layout
+        "grid grid-cols-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]",
+        // Control layout
+        "*:data-[slot=control]:col-start-2 *:data-[slot=control]:self-start sm:*:data-[slot=control]:mt-0.5",
+        // Label layout
+        "*:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1",
+        // Description layout
+        "*:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2",
+        // With description
+        "has-data-[slot=description]:**:data-[slot=label]:font-medium"
+      )
+    }
+  );
+}
+var colors2 = {
+  "dark/zinc": [
+    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]/25",
+    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:var(--color-zinc-700)]/90"
+  ],
+  "dark/white": [
+    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]",
+    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:var(--color-zinc-900)]"
+  ],
+  dark: [
+    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:var(--color-white)]/15",
+    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]"
+  ],
+  zinc: [
+    "[--switch-bg-ring:var(--color-zinc-700)]/90 [--switch-bg:var(--color-zinc-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-shadow:var(--color-black)]/10 [--switch:white] [--switch-ring:var(--color-zinc-700)]/90"
+  ],
+  white: [
+    "[--switch-bg-ring:var(--color-black)]/15 [--switch-bg:white] dark:[--switch-bg-ring:transparent]",
+    "[--switch-shadow:var(--color-black)]/10 [--switch-ring:transparent] [--switch:var(--color-zinc-950)]"
+  ],
+  red: [
+    "[--switch-bg-ring:var(--color-red-700)]/90 [--switch-bg:var(--color-red-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-red-700)]/90 [--switch-shadow:var(--color-red-900)]/20"
+  ],
+  orange: [
+    "[--switch-bg-ring:var(--color-orange-600)]/90 [--switch-bg:var(--color-orange-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-orange-600)]/90 [--switch-shadow:var(--color-orange-900)]/20"
+  ],
+  amber: [
+    "[--switch-bg-ring:var(--color-amber-500)]/80 [--switch-bg:var(--color-amber-400)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-amber-950)]"
+  ],
+  yellow: [
+    "[--switch-bg-ring:var(--color-yellow-400)]/80 [--switch-bg:var(--color-yellow-300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-yellow-950)]"
+  ],
+  lime: [
+    "[--switch-bg-ring:var(--color-lime-400)]/80 [--switch-bg:var(--color-lime-300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-lime-950)]"
+  ],
+  green: [
+    "[--switch-bg-ring:var(--color-green-700)]/90 [--switch-bg:var(--color-green-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-green-700)]/90 [--switch-shadow:var(--color-green-900)]/20"
+  ],
+  emerald: [
+    "[--switch-bg-ring:var(--color-emerald-600)]/90 [--switch-bg:var(--color-emerald-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-emerald-600)]/90 [--switch-shadow:var(--color-emerald-900)]/20"
+  ],
+  teal: [
+    "[--switch-bg-ring:var(--color-teal-700)]/90 [--switch-bg:var(--color-teal-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-teal-700)]/90 [--switch-shadow:var(--color-teal-900)]/20"
+  ],
+  cyan: [
+    "[--switch-bg-ring:var(--color-cyan-400)]/80 [--switch-bg:var(--color-cyan-300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-cyan-950)]"
+  ],
+  sky: [
+    "[--switch-bg-ring:var(--color-sky-600)]/80 [--switch-bg:var(--color-sky-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-sky-600)]/80 [--switch-shadow:var(--color-sky-900)]/20"
+  ],
+  blue: [
+    "[--switch-bg-ring:var(--color-blue-700)]/90 [--switch-bg:var(--color-blue-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-blue-700)]/90 [--switch-shadow:var(--color-blue-900)]/20"
+  ],
+  indigo: [
+    "[--switch-bg-ring:var(--color-indigo-600)]/90 [--switch-bg:var(--color-indigo-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-indigo-600)]/90 [--switch-shadow:var(--color-indigo-900)]/20"
+  ],
+  violet: [
+    "[--switch-bg-ring:var(--color-violet-600)]/90 [--switch-bg:var(--color-violet-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-violet-600)]/90 [--switch-shadow:var(--color-violet-900)]/20"
+  ],
+  purple: [
+    "[--switch-bg-ring:var(--color-purple-600)]/90 [--switch-bg:var(--color-purple-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-purple-600)]/90 [--switch-shadow:var(--color-purple-900)]/20"
+  ],
+  fuchsia: [
+    "[--switch-bg-ring:var(--color-fuchsia-600)]/90 [--switch-bg:var(--color-fuchsia-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-fuchsia-600)]/90 [--switch-shadow:var(--color-fuchsia-900)]/20"
+  ],
+  pink: [
+    "[--switch-bg-ring:var(--color-pink-600)]/90 [--switch-bg:var(--color-pink-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-pink-600)]/90 [--switch-shadow:var(--color-pink-900)]/20"
+  ],
+  rose: [
+    "[--switch-bg-ring:var(--color-rose-600)]/90 [--switch-bg:var(--color-rose-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-rose-600)]/90 [--switch-shadow:var(--color-rose-900)]/20"
+  ]
+};
+function Switch2({
+  color = "dark/zinc",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Headless4__namespace.Switch,
+    {
+      "data-slot": "control",
+      ...props,
+      className: clsx20__default.default(
+        className,
+        // Base styles
+        "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8",
+        // Transitions
+        "transition duration-0 ease-in-out data-changing:duration-200",
+        // Outline and background color in forced-colors mode so switch is still visible
+        "forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]",
+        // Unchecked
+        "bg-zinc-200 ring-1 ring-black/5 ring-inset dark:bg-white/5 dark:ring-white/15",
+        // Checked
+        "data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) dark:data-checked:bg-(--switch-bg) dark:data-checked:ring-(--switch-bg-ring)",
+        // Focus
+        "focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500",
+        // Hover
+        "data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)",
+        "dark:data-hover:ring-white/25 dark:data-hover:data-checked:ring-(--switch-bg-ring)",
+        // Disabled
+        "data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5",
+        "dark:data-disabled:bg-white/15 dark:data-disabled:data-checked:bg-white/15 dark:data-disabled:data-checked:ring-white/15",
+        // Color specific styles
+        colors2[color]
+      ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        SwitchPrimitive__namespace.Thumb,
-        {
-          "data-slot": "switch-thumb",
-          className: cn(
-            "bg-background pointer-events-none block size-4 rounded-full ring-0 transition-transform",
-            // state styles
-            "data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
-            // Dark mode styles
-            "dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground"
+        "span",
+        {
+          "aria-hidden": "true",
+          className: clsx20__default.default(
+            // Basic layout
+            "pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5",
+            // Transition
+            "translate-x-0 transition duration-200 ease-in-out",
+            // Invisible border so the switch is still visible in forced-colors mode
+            "border border-transparent",
+            // Unchecked
+            "bg-white shadow-sm ring-1 ring-black/5",
+            // Checked
+            "group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring)",
+            "group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3",
+            // Disabled
+            "group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5"
           )
         }
       )
@@ -9418,7 +9603,7 @@ function TableOfContents({ tableOfContents }) {
       "ol",
       {
         role: "list",
-        className: clsx4__default.default(
+        className: clsx20__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"
@@ -9428,7 +9613,7 @@ function TableOfContents({ tableOfContents }) {
             Link10__default.default,
             {
               href: `#${section.id}`,
-              className: clsx4__default.default(
+              className: clsx20__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"
@@ -9440,7 +9625,7 @@ function TableOfContents({ tableOfContents }) {
             Link10__default.default,
             {
               href: `#${subSection.id}`,
-              className: clsx4__default.default(
+              className: clsx20__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"
@@ -9552,7 +9737,7 @@ function Text({ className, trim = "normal", size = 2, label = false, ...props })
     {
       "data-slot": "text",
       ...props,
-      className: clsx4__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
+      className: clsx20__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
     }
   );
 }
@@ -9561,7 +9746,7 @@ function TextLink({ className, ...props }) {
     Link,
     {
       ...props,
-      className: clsx4__default.default(
+      className: clsx20__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"
       )
@@ -9569,14 +9754,14 @@ function TextLink({ className, ...props }) {
   );
 }
 function Strong({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx4__default.default(className, "text-grey-950 font-medium dark:text-white") });
+  return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx20__default.default(className, "text-grey-950 font-medium dark:text-white") });
 }
 function Code({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "code",
     {
       ...props,
-      className: clsx4__default.default(
+      className: clsx20__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"
       )
@@ -10072,10 +10257,10 @@ var chartColors = {
 var AvailableChartColors = Object.keys(
   chartColors
 );
-var constructCategoryColors = (categories, colors2) => {
+var constructCategoryColors = (categories, colors3) => {
   const categoryColors = /* @__PURE__ */ new Map();
   categories.forEach((category, index) => {
-    categoryColors.set(category, colors2[index % colors2.length]);
+    categoryColors.set(category, colors3[index % colors3.length]);
   });
   return categoryColors;
 };
@@ -10208,7 +10393,7 @@ var ScrollButton = ({ icon, onClick, disabled }) => {
 var Legend4 = React15__namespace.default.forwardRef((props, ref) => {
   const {
     categories,
-    colors: colors2 = AvailableChartColors,
+    colors: colors3 = AvailableChartColors,
     className,
     onClickLegendItem,
     activeLegend,
@@ -10300,7 +10485,7 @@ var Legend4 = React15__namespace.default.forwardRef((props, ref) => {
           LegendItem,
           {
             name: category,
-            color: colors2[index],
+            color: colors3[index],
             onClick: onClickLegendItem,
             activeLegend
           },
@@ -10453,7 +10638,7 @@ var AreaChart = React15__namespace.default.forwardRef((props, ref) => {
     data = [],
     categories = [],
     index,
-    colors: colors2 = AvailableChartColors,
+    colors: colors3 = AvailableChartColors,
     valueFormatter = (value) => value.toString(),
     startEndOnly = false,
     showXAxis = true,
@@ -10486,7 +10671,7 @@ var AreaChart = React15__namespace.default.forwardRef((props, ref) => {
   const [legendHeight, setLegendHeight] = React15__namespace.default.useState(60);
   const [activeDot, setActiveDot] = React15__namespace.default.useState(void 0);
   const [activeLegend, setActiveLegend] = React15__namespace.default.useState(void 0);
-  const categoryColors = constructCategoryColors(categories, colors2);
+  const categoryColors = constructCategoryColors(categories, colors3);
   const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   const hasOnValueChange = !!onValueChange;
   const stacked = type === "stacked" || type === "percent";
@@ -10967,7 +11152,7 @@ var ScrollButton2 = ({ icon, onClick, disabled }) => {
 var Legend5 = React15__namespace.default.forwardRef((props, ref) => {
   const {
     categories,
-    colors: colors2 = AvailableChartColors,
+    colors: colors3 = AvailableChartColors,
     className,
     onClickLegendItem,
     activeLegend,
@@ -11059,7 +11244,7 @@ var Legend5 = React15__namespace.default.forwardRef((props, ref) => {
           LegendItem2,
           {
             name: category,
-            color: colors2[index],
+            color: colors3[index],
             onClick: onClickLegendItem,
             activeLegend
           },
@@ -11211,7 +11396,7 @@ var BarChart = React15__namespace.default.forwardRef((props, forwardedRef) => {
     data = [],
     categories = [],
     index,
-    colors: colors2 = AvailableChartColors,
+    colors: colors3 = AvailableChartColors,
     valueFormatter = (value) => value.toString(),
     startEndOnly = false,
     showXAxis = true,
@@ -11243,7 +11428,7 @@ var BarChart = React15__namespace.default.forwardRef((props, forwardedRef) => {
   const paddingValue = !showXAxis && !showYAxis || startEndOnly && !showYAxis ? 0 : 20;
   const [legendHeight, setLegendHeight] = React15__namespace.default.useState(60);
   const [activeLegend, setActiveLegend] = React15__namespace.default.useState(void 0);
-  const categoryColors = constructCategoryColors(categories, colors2);
+  const categoryColors = constructCategoryColors(categories, colors3);
   const [activeBar, setActiveBar] = React15__namespace.default.useState(void 0);
   const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   const hasOnValueChange = !!onValueChange;
@@ -11686,12 +11871,12 @@ var Tooltip5 = React15__namespace.default.forwardRef(
   }
 );
 Tooltip5.displayName = "Tooltip";
-var getMarkerBgColor = (marker, values, colors2) => {
+var getMarkerBgColor = (marker, values, colors3) => {
   if (marker === void 0) return "";
   if (marker === 0) {
     for (let index = 0; index < values.length; index++) {
       if (values[index] > 0) {
-        return getColorClassName(colors2[index], "bg");
+        return getColorClassName(colors3[index], "bg");
       }
     }
   }
@@ -11699,10 +11884,10 @@ var getMarkerBgColor = (marker, values, colors2) => {
   for (let index = 0; index < values.length; index++) {
     prefixSum += values[index];
     if (prefixSum >= marker) {
-      return getColorClassName(colors2[index], "bg");
+      return getColorClassName(colors3[index], "bg");
     }
   }
-  return getColorClassName(colors2[values.length - 1], "bg");
+  return getColorClassName(colors3[values.length - 1], "bg");
 };
 var getPositionLeft = (value, maxValue) => value ? value / maxValue * 100 : 0;
 var sumNumericArray = (arr) => arr.reduce((prefixSum, num) => prefixSum + num, 0);
@@ -11748,10 +11933,10 @@ var BarLabels = ({ values }) => {
   );
 };
 var CategoryBar = React15__namespace.default.forwardRef(
-  ({ values = [], colors: colors2 = AvailableChartColors, marker, showLabels = true, className, ...props }, forwardedRef) => {
+  ({ values = [], colors: colors3 = AvailableChartColors, marker, showLabels = true, className, ...props }, forwardedRef) => {
     const markerBgColor = React15__namespace.default.useMemo(
-      () => getMarkerBgColor(marker?.value, values, colors2),
-      [marker, values, colors2]
+      () => getMarkerBgColor(marker?.value, values, colors3),
+      [marker, values, colors3]
     );
     const maxValue = React15__namespace.default.useMemo(() => sumNumericArray(values), [values]);
     const adjustedMarkerValue = React15__namespace.default.useMemo(() => {
@@ -11777,7 +11962,7 @@ var CategoryBar = React15__namespace.default.forwardRef(
           showLabels ? /* @__PURE__ */ jsxRuntime.jsx(BarLabels, { values }) : null,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-full items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-1 items-center gap-0.5 overflow-hidden rounded-full", children: values.map((value, index) => {
-              const barColor = colors2[index] ?? "gray";
+              const barColor = colors3[index] ?? "gray";
               const percentage = value / maxValue * 100;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -12798,7 +12983,7 @@ var DonutChart = React15__namespace.default.forwardRef(
     data = [],
     value,
     category,
-    colors: colors2 = AvailableChartColors,
+    colors: colors3 = AvailableChartColors,
     variant = "donut",
     valueFormatter = (value2) => value2.toString(),
     label,
@@ -12815,7 +13000,7 @@ var DonutChart = React15__namespace.default.forwardRef(
     const isDonut = variant === "donut";
     const parsedLabelInput = parseLabelInput(label, valueFormatter, data, value);
     const categories = Array.from(new Set(data.map((item) => item[category])));
-    const categoryColors = constructCategoryColors(categories, colors2);
+    const categoryColors = constructCategoryColors(categories, colors3);
     const prevActiveRef = React15__namespace.default.useRef(void 0);
     const prevCategoryRef = React15__namespace.default.useRef(void 0);
     const handleShapeClick = (data2, index, event) => {
@@ -13019,7 +13204,7 @@ var ScrollButton4 = ({ icon, onClick, disabled }) => {
 var Legend7 = React15__namespace.default.forwardRef((props, ref) => {
   const {
     categories,
-    colors: colors2 = AvailableChartColors,
+    colors: colors3 = AvailableChartColors,
     className,
     onClickLegendItem,
     activeLegend,
@@ -13111,7 +13296,7 @@ var Legend7 = React15__namespace.default.forwardRef((props, ref) => {
           LegendItem4,
           {
             name: category,
-            color: colors2[index],
+            color: colors3[index],
             onClick: onClickLegendItem,
             activeLegend
           },
@@ -13265,7 +13450,7 @@ var LineChart = React15__namespace.default.forwardRef((props, ref) => {
     data = [],
     categories = [],
     index,
-    colors: colors2 = AvailableChartColors,
+    colors: colors3 = AvailableChartColors,
     valueFormatter = (value) => value.toString(),
     startEndOnly = false,
     showXAxis = true,
@@ -13296,7 +13481,7 @@ var LineChart = React15__namespace.default.forwardRef((props, ref) => {
   const [legendHeight, setLegendHeight] = React15__namespace.default.useState(60);
   const [activeDot, setActiveDot] = React15__namespace.default.useState(void 0);
   const [activeLegend, setActiveLegend] = React15__namespace.default.useState(void 0);
-  const categoryColors = constructCategoryColors(categories, colors2);
+  const categoryColors = constructCategoryColors(categories, colors3);
   const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   const hasOnValueChange = !!onValueChange;
   const prevActiveRef = React15__namespace.default.useRef(void 0);
@@ -13803,7 +13988,7 @@ var SparkAreaChart = React15__namespace.default.forwardRef(
       data = [],
       categories = [],
       index,
-      colors: colors2 = AvailableChartColors,
+      colors: colors3 = AvailableChartColors,
       autoMinValue = false,
       minValue,
       maxValue,
@@ -13813,7 +13998,7 @@ var SparkAreaChart = React15__namespace.default.forwardRef(
       fill = "gradient",
       ...other
     } = props;
-    const categoryColors = constructCategoryColors(categories, colors2);
+    const categoryColors = constructCategoryColors(categories, colors3);
     const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
     const stacked = type === "stacked" || type === "percent";
     const areaId = React15__namespace.default.useId();
@@ -13914,7 +14099,7 @@ var SparkLineChart = React15__namespace.default.forwardRef(
       data = [],
       categories = [],
       index,
-      colors: colors2 = AvailableChartColors,
+      colors: colors3 = AvailableChartColors,
       autoMinValue = false,
       minValue,
       maxValue,
@@ -13922,7 +14107,7 @@ var SparkLineChart = React15__namespace.default.forwardRef(
       className,
       ...other
     } = props;
-    const categoryColors = constructCategoryColors(categories, colors2);
+    const categoryColors = constructCategoryColors(categories, colors3);
     const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -13980,7 +14165,7 @@ var SparkBarChart = React15__namespace.default.forwardRef((props, forwardedRef)
     data = [],
     categories = [],
     index,
-    colors: colors2 = AvailableChartColors,
+    colors: colors3 = AvailableChartColors,
     autoMinValue = false,
     minValue,
     maxValue,
@@ -13989,7 +14174,7 @@ var SparkBarChart = React15__namespace.default.forwardRef((props, forwardedRef)
     className,
     ...other
   } = props;
-  const categoryColors = constructCategoryColors(categories, colors2);
+  const categoryColors = constructCategoryColors(categories, colors3);
   const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   const stacked = type === "stacked" || type === "percent";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -14623,7 +14808,7 @@ function Prose({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: clsx4__default.default(
+      className: clsx20__default.default(
         className,
         "prose dark:!prose-invert max-w-none",
         // headings
@@ -14643,6 +14828,217 @@ function Prose({
     }
   );
 }
+function Listbox2({
+  className,
+  placeholder,
+  autoFocus,
+  "aria-label": ariaLabel,
+  children: options,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Headless4__namespace.Listbox, { ...props, multiple: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Headless4__namespace.ListboxButton,
+      {
+        autoFocus,
+        "data-slot": "control",
+        "aria-label": ariaLabel,
+        className: clsx20__default.default([
+          className,
+          // Basic layout
+          "group relative block w-full",
+          // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+          "before:absolute before:inset-px before:rounded-[calc(var(--radius)-1px)] before:bg-white before:shadow-sm",
+          // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+          "dark:before:hidden",
+          // Hide default focus styles
+          "focus:outline-hidden",
+          // Focus ring
+          "after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:ring-transparent after:ring-offset-2",
+          "data-focus:after:ring-primary-650/70 data-focus:after:ring-2 data-focus:after:ring-offset-white",
+          "",
+          // Disabled state
+          "data-disabled:before:bg-grey-950/5 data-disabled:opacity-50 data-disabled:before:shadow-none"
+        ]),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Headless4__namespace.ListboxSelectedOption,
+            {
+              as: "span",
+              options,
+              placeholder: placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-grey-500 block truncate", children: placeholder }),
+              className: clsx20__default.default([
+                "cursor-pointer",
+                // Basic layout
+                "relative block w-full appearance-none rounded-sm py-[calc(--spacing(4.5)-1px)] sm:py-[calc(--spacing(3.5)-1px)]",
+                // Set minimum height for when no value is selected
+                "min-h-16 sm:min-h-12",
+                // Horizontal padding
+                "pr-[calc(--spacing(7)-1px)] pl-[calc(--spacing(4.5)-1px)] sm:pl-[calc(--spacing(4)-1px)]",
+                // Typography
+                "text-grey-950 placeholder:text-grey-500 text-left text-base/6 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
+                // Border
+                "border-grey-600 group-data-active:border-grey-750 group-data-hover:border-grey-700 border dark:border-white/10 dark:group-data-active:border-white/20 dark:group-data-hover:border-white/20",
+                // Background color
+                "bg-transparent dark:bg-white/5",
+                // Invalid state
+                "group-data-invalid:border-red-500 group-data-hover:group-data-invalid:border-red-500 dark:group-data-invalid:border-red-600 dark:data-hover:group-data-invalid:border-red-600",
+                // Disabled state
+                "group-data-disabled:border-grey-950/20 group-data-disabled:opacity-100 dark:group-data-disabled:border-white/15 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:data-hover:border-white/15"
+              ])
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.unfold_more, { className: "stroke-grey-800 group-data-disabled:stroke-grey-600 dark:stroke-grey-400 size-5 sm:size-4 forced-colors:stroke-[CanvasText]" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Headless4__namespace.ListboxOptions,
+      {
+        transition: true,
+        anchor: "selection start",
+        className: clsx20__default.default(
+          // Anchor positioning
+          "[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]",
+          // Base styles
+          "isolate w-max min-w-[calc(var(--button-width)+1.75rem)] scroll-py-1 rounded-md p-1 select-none",
+          // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
+          "outline outline-transparent focus:outline-hidden",
+          // Handle scrolling when menu won't fit in viewport
+          "overflow-y-scroll overscroll-contain",
+          // Popover background
+          "dark:bg-grey-800/75 bg-white/75 backdrop-blur-xl",
+          // Shadows
+          "ring-grey-950/10 shadow-lg ring-1 dark:ring-white/10 dark:ring-inset",
+          // Transitions
+          "transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none"
+        ),
+        children: options
+      }
+    )
+  ] });
+}
+function ListboxOption2({
+  children,
+  className,
+  ...props
+}) {
+  const sharedClasses = clsx20__default.default(
+    // Base
+    "flex min-w-0 items-center",
+    // Icons
+    "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4",
+    "*:data-[slot=icon]:text-grey-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-grey-400",
+    "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]",
+    // Avatars
+    "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Headless4__namespace.ListboxOption, { as: React15.Fragment, ...props, children: ({ selectedOption }) => {
+    if (selectedOption) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx20__default.default(className, sharedClasses), children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx20__default.default(
+          // Basic layout
+          "group/option grid cursor-pointer grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-sm py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5",
+          // Typography
+          "text-grey-950 text-base/6 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
+          // Focus
+          "data-focus:bg-primary-800/10 data-focus:text-primary-800 outline-hidden data-focus:cursor-pointer data-focus:font-bold",
+          // Forced colors mode
+          "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]",
+          // Disabled
+          "data-disabled:opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "relative hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M4 8.5l3 3L12 4",
+                  strokeWidth: 1.5,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx20__default.default(className, sharedClasses, "col-start-2"), children })
+        ]
+      }
+    );
+  } });
+}
+function ListboxLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...props,
+      className: clsx20__default.default(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
+    }
+  );
+}
+function ListboxDescription({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...props,
+      className: clsx20__default.default(
+        className,
+        "text-grey-500 dark:text-grey-400 flex flex-1 overflow-hidden group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children })
+    }
+  );
+}
+function DescriptionList({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dl",
+    {
+      ...props,
+      className: clsx20__default.default(
+        className,
+        "grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6"
+      )
+    }
+  );
+}
+function DescriptionTerm({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dt",
+    {
+      ...props,
+      className: clsx20__default.default(
+        className,
+        "border-grey-950/5 text-grey-600 sm:border-grey-950/5 dark:text-grey-400 col-start-1 border-t pt-3 first:border-none sm:border-t sm:py-3 dark:border-white/5 sm:dark:border-white/5"
+      )
+    }
+  );
+}
+function DescriptionDetails({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dd",
+    {
+      ...props,
+      className: clsx20__default.default(
+        className,
+        "text-grey-950 sm:border-grey-950/5 pt-1 pb-3 sm:border-t sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5"
+      )
+    }
+  );
+}
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
   const [isMobile, setIsMobile] = React15__namespace.useState(void 0);
@@ -14892,7 +15288,10 @@ exports.ContextMenuSub = ContextMenuSub;
 exports.ContextMenuSubContent = ContextMenuSubContent;
 exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
 exports.ContextMenuTrigger = ContextMenuTrigger;
-exports.Description = Description2;
+exports.Description = Description3;
+exports.DescriptionDetails = DescriptionDetails;
+exports.DescriptionList = DescriptionList;
+exports.DescriptionTerm = DescriptionTerm;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -14935,6 +15334,7 @@ exports.ExpandableSearch = ExpandableSearch;
 exports.ExpandableSearchField = ExpandableSearchField;
 exports.Field = Field2;
 exports.FieldGroup = FieldGroup;
+exports.FieldLabel = FieldLabel;
 exports.Fieldset = Fieldset2;
 exports.Footer = Footer;
 exports.FooterAcknowledgement = FooterAcknowledgement;
@@ -14961,11 +15361,15 @@ exports.InputOTP = InputOTP;
 exports.InputOTPGroup = InputOTPGroup;
 exports.InputOTPSeparator = InputOTPSeparator;
 exports.InputOTPSlot = InputOTPSlot;
-exports.Label = Label4;
+exports.Label = Label3;
 exports.Legend = Legend2;
 exports.LineChart = LineChart;
 exports.Link = Link;
 exports.List = _List;
+exports.Listbox = Listbox2;
+exports.ListboxDescription = ListboxDescription;
+exports.ListboxLabel = ListboxLabel;
+exports.ListboxOption = ListboxOption2;
 exports.Logo = Logo;
 exports.MainNavigation = MainNavigation;
 exports.Masthead = Masthead;
@@ -15052,7 +15456,9 @@ exports.Spinner = Spinner;
 exports.StepIndicator = StepIndicator;
 exports.StepNavigation = StepNavigation;
 exports.Strong = Strong;
-exports.Switch = Switch;
+exports.Switch = Switch2;
+exports.SwitchField = SwitchField;
+exports.SwitchGroup = SwitchGroup;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;